/* Das Thema von ludo.earth — wie die Seite AUSSIEHT.

   Der Aufbau steht in grundstil.css, der aus erde.gemein kommt und fuer
   alle .earth-Karten derselbe ist. Diese Datei wird DANACH geladen und
   ueberstimmt ihn.

   Was hier steht und nur hier:

   * `:root` — Farben, Schriften, Radien, Masse. Der Grundstil greift nur
     ueber diese Merkmale darauf zu und bringt nie eine eigene Farbe oder
     Schriftart mit.
   * Die Bauteile, die es nur auf dieser Seite gibt.
   * Die Stellen, an denen beide Karten etwas bewusst anders machen.

   Wer etwas aendert, das fuer ALLE Karten gelten soll, aendert es in
   erde.gemein/quellen/grundstil.css — nicht hier. Steht der Wert hier
   schon, muss er hier auch weg, sonst gewinnt er weiter. */

/*  Die Hausschriften dieser Seite.

    Sie stehen bewusst GANZ OBEN und ausserhalb jeder Umformung: @font-face
    traegt keine Regeln, sondern nur Angaben, und ein Zerleger, der
    At-Bloecke nach Unterregeln absucht, verschluckt sie lautlos. Genau das
    ist am 14.09.2026 passiert — beide Seiten liefen eine Stunde lang in der
    Systemschrift, ohne dass eine einzige Pruefung angeschlagen haette: der
    berechnete `font-family` stimmte ja weiter, es fehlte nur die Datei
    dahinter. Wer hier etwas aendert, prueft mit `document.fonts.check(...)`,
    nicht mit getComputedStyle.  */

@font-face {
  font-family: "Fredoka";
  src: url("/static/schrift/fredoka.woff2") format("woff2");
  font-weight: 300 700; font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("/static/schrift/nunito.woff2") format("woff2");
  font-weight: 200 1000; font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("/static/schrift/nunito-kursiv.woff2") format("woff2");
  font-weight: 200 1000; font-style: italic; font-display: swap;
}

:root {
  /* Die Schriften dieser Seite. Sie stehen hier und nicht in den Regeln, damit der gemeinsame Grundstil Text setzen kann, ohne die Schriftart mitzubringen. */
  --schrift: Nunito, "Segoe UI", system-ui, sans-serif;
  --schrift-kopf: Fredoka, Nunito, system-ui, sans-serif;
  --schrift-fest: ui-monospace, "SF Mono", Consolas, monospace;
  /* Grundtöne: fast weiß, ein Hauch warm. */
  --grund: #FFFDF9;
  --flaeche: #FFFFFF;
  --flaeche-2: #FBF8F2;
  --rand: #E9E4DA;
  --rand-stark: #D6CFC1;
  --tinte: #241F19;
  --tinte-leise: #6B6459;
  /* EINE Leitfarbe (Sonnengelb) und EIN Akzent (Himmelblau). */
  --gelb: #FFC93C;
  --gelb-tief: #E8A900;
  --gelb-sanft: #FFF6E1;
  --blau: #2E7DD1;
  --blau-sanft: #EAF2FB;
  /* Zustandsfarben. Sie sind das Rueckgrat der Hervorhebung: Farbe sagt hier nicht "schoen", sondern WAS los ist — und darum gibt es je Zustand einen starken Ton (Text, Zahl), einen sanften (Flaeche) und einen Rand. "unklar" ist der haeufigste Zustand im Bestand und muss klar von "ja" UND von "nein" unterscheidbar bleiben. */
  --ja: #2E7D4F;
  --ja-sanft: #E6F4EA;
  --ja-rand: #A9D9B6;
  --nein: #BF3F35;
  --nein-sanft: #FCECEA;
  --nein-rand: #F0BDB7;
  --unklar: #7E776A;
  --unklar-sanft: #F3F0E9;
  --unklar-rand: #DFD8C9;
  --info: #1F6FB8;
  --info-sanft: #E7F1FB;
  --info-rand: #B4D3EF;
  /* Die neun Artenfarben stehen NICHT hier: Sie kommen aus ART_FARBE in app/main.py und werden am Element als `--f` gesetzt — auch die Karte (karte.js) braucht sie, und eine Farbe an zwei Stellen läuft auseinander. Hier wird `--f` nur benutzt, nicht definiert. */
  --r: 14px;
  --r-klein: 10px;
  --r-voll: 999px;
  --schatten: 0 1px 2px rgba(36, 31, 25, .05);
  --breit: 1080px;
  --kopf: 64px;
}
body {
  font-size: 17px;
}
h1, h2, h3, .wortmarke, .zahl b, .kachelzahl, .terminwert {
  font-family: var(--schrift-kopf);
  font-weight: 500;
  letter-spacing: -.005em;
  line-height: 1.2;
  color: var(--tinte);
}
h1 {
  font-size: clamp(1.65rem, 1.2rem + 1.8vw, 2.5rem);
  margin: 0 0 .3em;
}
h2 {
  font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem);
  margin: 2.2em 0 .8em;
}
h3 {
  font-size: 1rem;
  margin: 1.4em 0 .4em;
}
p {
  margin: 0 0 1em;
}
a {
  color: var(--blau);
}
a:hover {
  color: #1B5FA8;
}
small {
  font-size: .84em;
}
.springen:focus {
  background: var(--gelb);
  color: var(--tinte);
}
:focus-visible {
  outline: 2px solid var(--blau);
  outline-offset: 2px;
}
/* ---------- 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 {
  gap: 16px;
  background: rgba(255, 253, 249, .94);
  backdrop-filter: blur(8px);
}
.marke {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: inherit;
  flex: none;
}
.wortmarke {
  font-size: 1.3rem;
}
.punkt {
  color: var(--gelb-tief);
}
.leiste {
  align-items: center;
}
.leiste a {
  font-size: .93rem;
}
.leiste a:hover {
  background: var(--flaeche-2);
}
.leiste a.on {
  background: var(--gelb-sanft);
  color: var(--tinte);
}
.merkzahl {
  background: var(--gelb-tief);
  vertical-align: .1em;
}
.sprachwahl {
  gap: 1px;
  flex: none;
}
.sprachwahl a {
  font-size: .76rem;
}
.sprachwahl a:hover {
  background: var(--flaeche-2);
}
.sprachwahl a.on {
  background: var(--tinte);
  color: #fff;
}
/* Der Menüknopf: nur mit JavaScript und nur auf schmalen Bildschirmen. */
.menuknopf {
  border: 1px solid var(--rand-stark);
}
.menuknopf:hover {
  border-color: var(--gelb-tief);
}
.burger::before, .burger::after, .burger span {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2.2px;
  border-radius: 2px;
  background: var(--tinte);
  transition: transform .18s ease, opacity .18s ease;
}
.burger::before {
  top: 0;
}
.burger span {
  top: 4.4px;
}
.burger::after {
  bottom: 0;
}
/* ---------- Rahmen ---------- */
.inhalt {
  padding: clamp(20px, 3.5vw, 40px) clamp(14px, 4vw, 28px) 72px;
}
.unter {
  margin: .1em 0 1em;
}
.brot {
  font-size: .86rem;
}
.brot a:hover {
  color: var(--blau);
  text-decoration: underline;
}
.hinweis {
  background: var(--blau-sanft);
  border-radius: var(--r-chip);
  font-size: .94rem;
}
/* ---------- Knöpfe und Chips: flach, ein Radius ---------- */
.knopf {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .58em 1.1em;
  border-radius: var(--r-voll-rolle);
  border: 1px solid transparent;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease;
}
.knopf.primaer {
  background: var(--gelb);
  color: var(--tinte);
}
.knopf.primaer:hover {
  background: var(--gelb-tief);
  color: var(--tinte);
}
.knopf.sekundaer {
  background: var(--flaeche);
  border-color: var(--rand-stark);
}
.knopf.sekundaer:hover {
  border-color: var(--gelb-tief);
}
.knopf.leise {
  border-color: var(--rand);
}
.knopf.leise:hover {
  border-color: var(--rand-stark);
}
.knopf.klein {
  padding: .36em .8em;
  font-size: .89rem;
}
.knopf.merken.an {
  background: var(--gelb-sanft);
  border-color: var(--gelb);
}
/* Der lange Schwanz einer Ortsliste. Zugeklappt ist er eine Zeile,
   aufgeklappt steht er da — ganz ohne JavaScript. */
.weitere {
  margin-top: .6em;
}
.chip {
  border: 1px solid var(--rand);
  font-size: .91rem;
}
.chip:hover {
  border-color: var(--rand-stark);
}
.chip.klein {
  font-size: .82rem;
}
.chip.klein.an {
  background: var(--gelb-sanft);
  border-color: var(--gelb);
}
.chip.klein.aus {
  color: var(--tinte-leise);
  background: var(--flaeche-2);
}
/* Der Farbpunkt vor einer Art — Farbe als Information, nicht als Fläche. */
.chip .punktfarbe {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
  background: var(--f, var(--rand-stark));
}
.chip.wahl input {
  accent-color: var(--blau);
  margin: 0;
}
.chip.wahl:has(input:checked) {
  background: var(--gelb-sanft);
  border-color: var(--gelb-tief);
}
/* ---------- Merkmalsmarken -----------------------------------------------
   Die kleinste Einheit der Hervorhebung. Sie steht in jedem Listeneintrag und
   beantwortet beim Ueberfliegen die Frage "was gibt es dort?" — gruen heisst
   "ist da", blau ist eine Angabe ohne Ja-Nein (Geraetezahl, Wasser, Cafe).
   Was NICHT erfasst ist, erscheint in Listen gar nicht: eine Liste voller
   grauer "unbekannt"-Marken hilft niemandem weiter.
   ---------------------------------------------------------------------- */
.marken {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: .5em;
}
.marke {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  padding: .16em .55em;
  border-radius: var(--r-voll-rolle);
  font-size: .81rem;
  font-weight: 700;
  line-height: 1.5;
  background: var(--unklar-sanft);
  color: var(--unklar);
  border: 1px solid var(--unklar-rand);
}
.marke.ja {
  background: var(--ja-sanft);
  color: var(--ja);
  border-color: var(--ja-rand);
}
.marke.nein {
  background: var(--nein-sanft);
  color: var(--nein);
  border-color: var(--nein-rand);
}
.marke.info {
  background: var(--info-sanft);
  color: var(--info);
  border-color: var(--info-rand);
}
.marksinn {
  font-size: .95em;
  line-height: 1;
}
/* Die Art als kleine farbige Marke — sie sagt, WAS fuer ein Platz das ist. */
.artpunkt {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  margin-right: .5em;
  font-size: .8rem;
  font-weight: 800;
  color: var(--f);
}
.artpunkt::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--f);
  flex: none;
}
/* ---------- Antwortkarten (Detailseite, Ebene 1) ----------------------
   Vier bis fuenf Karten mit den Fragen, die Eltern zuerst stellen. Sie sind
   absichtlich das Groesste und Farbigste auf der Seite; alles darunter tritt
   zurueck. Vorher standen diese Angaben als gleichwertige Tabellenzeilen
   zwischen "Betreiber" und "Zuletzt geprueft" — und waren damit unsichtbar.
   ---------------------------------------------------------------------- */
.antworten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  margin: 0 0 1.6em;
}
.antwort {
  display: flex;
  flex-direction: column;
  gap: .12em;
  padding: .8em .95em .9em;
  border-radius: var(--r-karte);
  background: var(--unklar-sanft);
  border: 1px solid var(--unklar-rand);
}
.antwort.ja {
  background: var(--ja-sanft);
  border-color: var(--ja-rand);
}
.antwort.nein {
  background: var(--nein-sanft);
  border-color: var(--nein-rand);
}
.antwort.info {
  background: var(--info-sanft);
  border-color: var(--info-rand);
}
.antwortkopf {
  display: flex;
  align-items: center;
  gap: .35em;
  font-size: .8rem;
  font-weight: 800;
  color: var(--tinte-leise);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.antwortsinn {
  font-size: 1.05rem;
  line-height: 1;
}
.antwortwert {
  font-family: Fredoka, Nunito, sans-serif;
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--unklar);
}
.antwort.ja .antwortwert {
  color: var(--ja);
}
.antwort.nein .antwortwert {
  color: var(--nein);
}
.antwort.info .antwortwert {
  color: var(--info);
}
.antwortzusatz {
  font-size: .82rem;
  color: var(--tinte-leise);
}
/* Geraetegruppen: farbig genug, um die Ausstattung zu ueberfliegen. */
.gruppen {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin: 0 0 .9em;
}
.gruppenmarke {
  display: inline-block;
  padding: .18em .6em;
  border-radius: var(--r-voll-rolle);
  background: var(--gelb-sanft);
  border: 1px solid var(--gelb);
  font-size: .82rem;
  font-weight: 700;
  color: var(--tinte);
}
/* ---------- Startseite ---------- */
.held {
  margin: 0 0 2.6em;
}
.held h1 {
  margin-bottom: .4em;
}
.heldbild {
  display: none;
}
.suchform input[type=search] {
  border: 1px solid var(--rand-stark);
}
.suchform input[type=search]:focus {
  border-color: var(--blau);
  box-shadow: 0 0 0 3px var(--blau-sanft);
}
.suchform.gross input[type=search] {
  padding: .82em 1.15em;
}
.suchform .ikon {
  border: 1px solid var(--rand-stark);
  background: var(--flaeche);
  font-size: 1rem;
  padding: .45em .6em;
  line-height: 1;
}
.suchform .ikon:hover {
  border-color: var(--gelb-tief);
}
.vorschlaege {
  box-shadow: 0 8px 24px -14px rgba(36, 31, 25, .3);
}
.vorschlaege .vort {
  font-weight: 700;
}
.vorschlaege .vunter {
  font-size: .86em;
}
/* Zahlen: eine Zeile Text, keine Kästen. */
.zahlen {
  gap: 0 28px;
  margin: 0 0 2.6em;
  padding: 16px 0;
  border-top: 1px solid var(--rand);
  border-bottom: 1px solid var(--rand);
}
.zahl {
  display: flex;
  flex-direction: column;
}
.zahl b {
  font-size: 1.5rem;
  color: var(--gelb-tief);
}
.zahl:first-child b {
  font-size: 1.9rem;
}
/* Arten: gleich große, flache Kacheln. Die Farbe steckt im Punkt. */
.kacheln {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.kacheln.klein {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}
/* 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 {
  display: flex;
  flex-direction: column;
  gap: .1em;
  padding: .85em 1em .9em 1.1em;
  background: color-mix(in srgb, var(--f, #FFC93C) 9%, white);
  border: 1px solid var(--f, var(--rand));
  border-color: color-mix(in srgb, var(--f, #FFC93C) 34%, white);
  transition: border-color .15s ease, background-color .15s ease;
}
.kachel:hover {
  border-color: var(--f, var(--rand-stark));
  background: color-mix(in srgb, var(--f, #FFC93C) 16%, white);
}
.kachel b {
  font-weight: 700;
  font-size: .98rem;
  display: flex;
  align-items: center;
  gap: .5em;
}
.kachel b::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--f, var(--gelb));
  flex: none;
}
.kachelunter {
  font-size: .86rem;
}
.kachelzahl {
  font-family: Fredoka, Nunito, sans-serif;
  font-size: 1.25rem;
  color: var(--f, var(--gelb-tief));
  margin-top: .25em;
  line-height: 1.1;
}
/* Einträge: eine Liste, kein Kartenstapel. */
.karten {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
/* Einspaltig, wo die Reihenfolge etwas bedeutet — nach Entfernung sortiert
   liest man eine Spalte von oben nach unten, ein Raster nicht. */
.karten.eine {
  grid-template-columns: 1fr;
  max-width: 46rem;
}
/* Filterzeile mit Überschriften (Nähe-Seite). */
.filterzeile .filtergruppe + .filtergruppe {
  margin-top: .9em;
}
.filterzeile .filtergruppe h3 {
  margin: 0 0 .4em;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tinte-leise);
  font-family: Nunito, sans-serif;
  font-weight: 800;
}
.eintrag {
  align-items: stretch;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.eintrag:hover {
  border-color: var(--f);
  box-shadow: 0 2px 10px -6px rgba(36, 31, 25, .3);
}
/* Die farbige Kante ist der Anker beim Ueberfliegen einer langen Liste: Sie
   sagt schon vor dem Lesen, um welche Art von Platz es geht. */
.eintragkante {
  width: 5px;
  flex: none;
  background: var(--f);
}
.eintragtext {
  padding: .75em .95em .85em;
}
.eintragkopf {
  display: flex;
  gap: .6em;
  align-items: baseline;
  justify-content: space-between;
}
.eintragkopf b {
  font-weight: 700;
  line-height: 1.3;
}
/* Die Entfernung ist auf "In meiner Naehe" die zweitwichtigste Angabe nach
   dem Namen — sie steht deshalb rechts oben und nicht in der Marken-Zeile. */
.eintragweg {
  flex: none;
  font-family: Fredoka, Nunito, sans-serif;
  font-size: .92rem;
  color: var(--info);
  white-space: nowrap;
}
.eintragort {
  font-size: .86rem;
  margin-top: .1em;
}
/* ---------- Länder und Listen ---------- */
.laenderliste {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0 24px;
}
.landzeile {
  padding: .55em 0;
  border-bottom: 1px solid var(--rand);
}
.landzeile:hover {
  color: var(--blau);
}
.filterzeile {
  margin: 0 0 1.6em;
}
/* ---------- Detailseite ---------- */
.stellekopf {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-bottom: 1.2em;
}
.stelleknoepfe {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.art {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 .5em;
}
.artmarke {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  background: color-mix(in srgb, var(--f, #FFC93C) 14%, white);
  border: 1px solid color-mix(in srgb, var(--f, #FFC93C) 45%, white);
  color: var(--tinte);
  border-radius: var(--r-voll-rolle);
  padding: .2em .75em;
  font-size: .82rem;
  font-weight: 800;
}
.artmarke::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--f, var(--gelb));
  flex: none;
}
.lage {
  margin: 0;
}
.einleitung {
  font-size: 1.05rem;
  max-width: 44rem;
  color: var(--tinte);
}
.stellegitter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 10px;
  margin-top: 1.6em;
}
.block h2 small {
  color: var(--tinte-leise);
  font-weight: 400;
  font-size: .78em;
}
.karte-klein {
  grid-column: 1 / -1;
  border-radius: var(--r-karte);
  border: 1px solid var(--rand);
  background: var(--flaeche-2);
}
.geraeteliste {
  list-style: none;
  padding: 0;
  margin: 0 0 1em;
  columns: 2;
  column-gap: 20px;
}
.geraeteliste li {
  break-inside: avoid;
  padding: .1em 0;
  font-size: .95rem;
}
.geraeteliste b {
  color: var(--tinte-leise);
  font-weight: 700;
}
.tafel dd {
  margin: 0;
  font-weight: 700;
  text-align: right;
}
.tafel dd.ja {
  color: var(--ja);
}
.tafel dd.nein {
  color: var(--nein);
}
.tafel dd.unklar {
  font-weight: 400;
}
.naheliste {
  list-style: none;
  padding: 0;
  margin: 0;
}
.naheliste li {
  padding: .34em 0;
  display: flex;
  gap: .55em;
  align-items: baseline;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--rand);
}
.naheliste li:last-child {
  border-bottom: 0;
}
.naheweg {
  margin-left: auto;
  color: var(--tinte-leise);
  font-size: .86rem;
  white-space: nowrap;
}
.koordinaten {
  font-size: .92rem;
}
.nachbarn {
  margin-top: 2.4em;
}
.gruppen, .alter, .drin {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: baseline;
  margin: .8em 0 0;
}
.beschreibung {
  font-size: .95rem;
}
/* ---------- Fragen ---------- */
.fragen details {
  border-bottom: 1px solid var(--rand);
  padding: 0 0 .2em;
}
.fragen summary {
  font-family: Fredoka, Nunito, sans-serif;
  font-size: 1rem;
}
.fragen summary::marker {
  color: var(--gelb-tief);
}
.fragen summary:hover {
  color: var(--blau);
}
#karte.vollkarte {
  background: var(--flaeche-2);
}
/* 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 {
  background: rgba(255, 253, 249, .96);
  box-shadow: 0 6px 20px -12px rgba(36, 31, 25, .35);
  backdrop-filter: blur(6px);
}
.filtergruppe h3 {
  font-size: .76rem;
  letter-spacing: .08em;
  font-family: Nunito, sans-serif;
}
.filterfuss {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 1.1em 0 .3em;
  font-size: .88rem;
}
.filterzahl {
  background: var(--gelb-tief);
  font-size: .72rem;
}
.filterfuss {
  position: sticky;
  bottom: 0;
  background: rgba(255, 253, 249, .98);
  padding-bottom: .3em;
}
/* Trefferblatt: sitzt unten, hat einen eigenen Rollbereich und laesst sich
   auf den Kopf zusammenklappen (Klasse "zu"), ohne zu verschwinden. */
.kartetreffer {
  width: min(380px, calc(100vw - 20px));
  background: rgba(255, 253, 249, .97);
  box-shadow: 0 6px 20px -12px rgba(36, 31, 25, .35);
  backdrop-filter: blur(6px);
}
.trefferkopf {
  font-weight: 700;
}
.kartelegende {
  bottom: 12px;
  right: 12px;
  background: rgba(255, 253, 249, .95);
  font-size: .8rem;
  color: var(--tinte-leise);
}
.legendepunkt + span {
  margin-right: 4px;
}
.blase h3 {
  margin: .15em 0 .1em;
  font-size: 1.02rem;
}
.blasearten {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin: 0;
}
.blasemerkmale {
  margin: .5em 0 .7em;
}
.maplibregl-popup-content {
  border-radius: var(--r-karte);
  padding: .9em 1em;
  box-shadow: 0 8px 24px -14px rgba(36, 31, 25, .35);
  font-family: Nunito, sans-serif;
}
/* ---------- Fuß ---------- */
.fuss {
  background: var(--flaeche-2);
}
.fussmarke {
  font-family: Fredoka, Nunito, sans-serif;
  margin: 0 0 .15em;
}
.fussslogan {
  font-family: Nunito, sans-serif;
}
.fussquelle {
  margin: .4em 0 1.2em;
  max-width: 46rem;
}
.fussnav a {
  color: var(--tinte-leise);
  text-decoration: none;
}
.fussnav a:hover {
  color: var(--blau);
}
/* ---------- Schmale Bildschirme --------------------------------------- */
@media (max-width: 900px) {
.mitjs .leiste {
  box-shadow: 0 10px 24px -16px rgba(36, 31, 25, .4);
}
.kopf {
  position: sticky;
}
.geraeteliste {
  columns: 1;
}
.zahlen {
  gap: 0 20px;
}
}
@media (max-width: 560px) {
body {
  font-size: 16.5px;
}
.antworten {
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.antwort {
  padding: .65em .75em .75em;
}
.antwortwert {
  font-size: 1.12rem;
}
.antwortzusatz {
  display: none;
}
/* Der Zusatz ist hier Beiwerk. */
.kacheln, .kacheln.klein {
  grid-template-columns: 1fr 1fr;
}
.kachelunter {
  display: none;
}
/* Der Untertitel ist hier Beiwerk. */
.karten {
  grid-template-columns: 1fr;
}
.laenderliste {
  grid-template-columns: 1fr;
}
.kartekopf {
  left: 8px;
  right: 8px;
  width: auto;
}
.kartelegende {
  display: none;
}
/* Auf dem Handy nimmt sie nur Platz weg. */
.zahlen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
}
}
.formular label, .formular legend {
  font-weight: 600;
}
.formular input[type=text], .formular input[type=email] {
  border: 1px solid var(--rand-stark);
}
.formular textarea {
  width: 100%;
  font: inherit;
  color: var(--tinte);
  background: var(--flaeche);
  border: 1px solid var(--rand-stark);
  border-radius: var(--r-chip);
  padding: .62em .85em;
}
.formular textarea {
  resize: vertical;
  min-height: 7em;
  line-height: 1.5;
}
.formular input:focus, .formular textarea:focus {
  border-color: var(--blau);
  box-shadow: 0 0 0 3px var(--blau-sanft);
}
.wahlreihe .chip.wahl {
  font-weight: 400;
}
.hinweis.warnung {
  background: var(--nein-sanft);
  border: 1px solid var(--nein-rand);
  color: var(--nein);
}
.danke {
  background: var(--ja-sanft);
  border: 1px solid var(--ja-rand);
}
.dankekopf {
  font-family: "Fredoka", system-ui, sans-serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--ja);
}
/* 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. */
.tafel dd, .tafel dd a {
  overflow-wrap: anywhere;
}
.tafel dd a {
  text-decoration-thickness: 1px;
}
/* ===================================================================
   GEMEINSAMES GERUEST DER DREI KARTEN (lido.earth / ludo.earth /
   fiesta.earth). Gleiche Namen, gleiche Rollen, gleiche Skala — damit
   sich die drei Seiten gleich ANFUEHLEN, obwohl jede ihr eigenes Thema
   traegt. Die Vorlage ist lido.earth: dort sind die Groessen- und
   Radienrollen zuerst entstanden.

   Was hier steht, ist Struktur (Abstaende, Groessen, Rollen).
   Was das Thema traegt — Farbe, Schattenfarbe, Hover-Geste — steht
   weiter oben bei den eigenen Tokens und wird hier nur benutzt.
   =================================================================== */
:root {
  /* Radienrollen dieses Themas */
  --r-rolle-chip: 10px;
  --r-rolle-karte: 14px;
  --r-rolle-blatt: 20px;
  --r-voll-rolle: var(--r-voll);
  /* Abstaende im 4er-Rhythmus. Wer einen Wert braucht, der hier nicht steht, braucht in Wahrheit einen anderen Abstand. */
  --ab-1: 4px;
  --ab-2: 8px;
  --ab-3: 12px;
  --ab-4: 16px;
  --ab-5: 24px;
  --ab-6: 32px;
  --ab-7: 48px;
  /* Schriftgroessen (aus lido.earth uebernommen) */
  --t-xs: 13px;
  --t-s: 14px;
  --t-m: 16px;
  --t-l: 20px;
  --t-xl: 27px;
  /* Radien als ROLLE, nicht als Zahl: ein Chip ist ein Chip, eine Karte eine Karte — welchen Wert das Thema dafuer waehlt, ist seine Sache. */
  --r-chip: var(--r-rolle-chip);
  --r-karte: var(--r-rolle-karte);
  --r-blatt: var(--r-rolle-blatt);
  /* Knopfmasse: auf allen drei Seiten gleich gross, damit ein "Karte"- Knopf ueberall dieselbe Flaeche hat. */
  --knopf-y: .58em;
  --knopf-x: 1.1em;
  --knopf-y-klein: .36em;
  --knopf-x-klein: .8em;
}
/* --- Knopf ---------------------------------------------------------
   Ein Bauteil, drei Lautstaerken (primaer / sekundaer / leise) und eine
   kleine Groesse. `.btn` ist derselbe Knopf unter lido.earths Namen. */
.knopf {
  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;
}
.knopf.klein {
  padding: var(--knopf-y-klein) var(--knopf-x-klein);
  font-size: .89rem;
}
/* Thema: Die Sinnbilder der grossen Startknoepfe tragen den Akzent —
   ludo darf bunt sein, aber geordnet: EINE Akzentfarbe, nicht neun. */
.heldknoepfe .knopf .ikn {
  color: var(--blau);
}
.heldknoepfe .knopf.primaer .ikn {
  color: var(--tinte);
}