/* Das Thema von fiesta.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: "Unbounded";
  src: url("/static/schrift/unbounded.woff2") format("woff2");
  font-weight: 200 900; font-display: swap;
}

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

:root {
  /* --- Die Marke fiesta ------------------------------------------------
     Violett nach Magenta nach Orange: der Bogen eines Abends, von der
     Daemmerung ueber die Lichterkette bis zur Feuerschale. Er laeuft jetzt
     auf hellem Grund — ein Fest ist etwas, das man findet, keine Bar, in
     die man hineingeht. */
  --brand-950: #4A155D;
  --brand-800: #6A1B9A;
  --brand-600: #E91E63;
  --brand-400: #FF6B45;
  --brand-300: #FF9B36;
  --brand-accent: #FFBF3C;
  --brand-soft: #FFF4F8;
  --brand-verlauf: linear-gradient(135deg, #6A1B9A 0%, #E91E63 48%, #FF8C00 100%);
  --brand-flaeche: rgba(233, 30, 99, .10);
  --brand-flaeche-stark: rgba(233, 30, 99, .18);
  --auf-marke: #FFFFFF;

  /* --- Schriften -------------------------------------------------------
     Manrope wie bei den Geschwistern, Unbounded als eigene Stimme fuer
     Ueberschrift und Wortmarke. */
  --schrift: Manrope, Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --schrift-kopf: Unbounded, Manrope, ui-sans-serif, system-ui, sans-serif;
  --schrift-fest: ui-monospace, Consolas, monospace;

  /* --- Rollen ----------------------------------------------------------- */
  --grund: var(--earth-bg);
  --flaeche: var(--earth-surface);
  --flaeche-2: var(--earth-surface-soft);
  --rand: var(--earth-border);
  --rand-stark: var(--earth-border-strong);
  --tinte: var(--earth-text);
  --tinte-leise: var(--earth-text-muted);
  --schatten: var(--shadow-sm);

  /* --- Bisherige Namen, damit keine Regel bricht ------------------------ */
  --grund-2: var(--earth-surface-soft);
  --papier: var(--earth-surface);
  --papier-hell: var(--earth-surface-soft);
  --pink: var(--brand-600);
  --violett: var(--brand-800);
  --cyan: #0E8C8C;
  --gelb: var(--brand-accent);
  --gruen: #1E7A46;
  --rot: #B3392F;
  --glanz: 0 0 0 1px rgba(20, 40, 55, .04);

  /* --- Radien dieser Marke ---------------------------------------------- */
  --r-rolle-chip: var(--radius-sm);
  --r-rolle-karte: var(--radius-md);
  --r-rolle-blatt: var(--radius-lg);
  --r-voll-rolle: var(--radius-voll);
  --r-chip: var(--r-rolle-chip);
  --r-karte: var(--r-rolle-karte);
  --r-blatt: var(--r-rolle-blatt);
  /* alte Namen */
  --rund: var(--r-karte);
  --rund-klein: var(--r-chip);
  --rund-voll: var(--radius-voll);
}
html {
  background: var(--grund);
}
body {
  color: var(--tinte);
  background: var(--grund);
  font-family: var(--schrift);
  /* Drei weiche Lichter in den Markenfarben — das Scheinwerferlicht über dem Platz. Fest angeheftet, damit es beim Rollen nicht mitwandert. */
  background-image: radial-gradient(900px 420px at 12% -8%, rgba(233, 30, 99, .05), transparent 68%), radial-gradient(760px 380px at 88% -4%, rgba(106, 27, 154, .045), transparent 68%);
  background-attachment: fixed;
}
h1, h2, h3, .wortmarke, .zahl b, .terminwert, .monatzahl {
  font-family: var(--schrift-kopf);
  letter-spacing: -.02em;
}
a {
  color: var(--cyan);
}
a:hover {
  color: var(--gelb);
}
.springen:focus {
  background: var(--pink);
  color: var(--auf-marke);
}
:focus-visible {
  outline: 2px solid var(--cyan);
}
::selection {
  background: var(--pink);
  color: var(--auf-marke);
}
/* ---------- Kopf ---------- */
.kopf {
  gap: 10px 16px;
  flex-wrap: nowrap;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(12px);
}
.marke {
  align-items: center;
  text-decoration: none;
  color: inherit;
  flex: none;
  min-width: 0;
}
.wortmarke {
  letter-spacing: -.03em;
}
.punkt {
  background: linear-gradient(90deg, var(--pink), var(--gelb));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.leiste {
  flex-wrap: wrap;
}
.leiste a:hover {
  background: var(--flaeche);
}
.leiste a.on {
  background: var(--brand-flaeche);
  color: var(--brand-800);
}
.sprachwahl a.on {
  background: var(--flaeche-2);
  color: var(--tinte);
}
.merkzahl {
  background: var(--pink);
}
/* Der Menüknopf: nur mit JavaScript und nur auf schmalen Bildschirmen
   (siehe app.js — ohne Skript bliebe die Navigation hinter einem Knopf,
   den niemand öffnen kann). */
.menuknopf {
  border: 1px solid var(--rand);
}
.menuknopf:hover {
  border-color: var(--pink);
}
.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, 3vw, 40px) clamp(14px, 4vw, 28px) 70px;
}
.brot a:hover {
  color: var(--cyan);
}
.hinweis {
  background: var(--flaeche);
  border-left: 3px solid var(--violett);
}
.warnung {
  background: rgba(179, 57, 47, .07);
  border: 1px solid rgba(179, 57, 47, .25);
  border-radius: var(--r-chip);
  padding: .7em 1em;
  margin: 1.2em 0;
}
.warnung.leise {
  background: var(--flaeche);
  border-color: var(--rand);
  color: var(--tinte-leise);
}
.leer {
  font-style: italic;
}
.oberzeile {
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .76rem;
  font-weight: 800;
  color: var(--gelb);
  margin: 0 0 .8em;
}
/* ---------- Knöpfe, Chips ---------- */
.knopf {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .6em 1.15em;
  border-radius: var(--r-voll-rolle);
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .12s ease, filter .12s ease;
}
.knopf:hover {
  transform: translateY(-2px);
}
.knopf.primaer {
  /* Gefuellt wird mit der DUNKLEN Stufe. --brand-600 ist die Farbe, an der
     man die Marke erkennt, aber weisser Text darauf schafft die 4,5:1
     nicht (gemessen 2,1 bei ludo, 4,4 bei fiesta). */
  background: var(--brand-800);
  color: var(--auf-marke);
}
.knopf.primaer:hover {
  filter: brightness(1.12);
  color: var(--auf-marke);
}
.knopf.sekundaer {
  background: var(--flaeche-2);
  box-shadow: var(--glanz);
}
.knopf.sekundaer:hover {
  background: var(--earth-surface-soft);
}
.knopf.leise {
  box-shadow: inset 0 0 0 1px var(--rand);
}
.knopf.leise:hover {
  box-shadow: inset 0 0 0 1px var(--cyan);
}
.knopf.merken.an {
  background: linear-gradient(100deg, var(--gelb), var(--pink));
  color: var(--auf-marke);
}
/* Der lange Schwanz einer Ortsliste. Zugeklappt eine Zeile, aufgeklappt
   steht er da — ganz ohne JavaScript. */
.weitere {
  margin-top: .6em;
}
.chip {
  box-shadow: inset 0 0 0 1px var(--rand);
}
.chip:hover {
  box-shadow: inset 0 0 0 1px var(--f, var(--cyan));
}
.chip.an {
  background: var(--flaeche-2);
  box-shadow: inset 0 0 0 1px var(--gelb);
}
.chip.wahl input {
  accent-color: var(--pink);
  margin: 0 .1em 0 0;
}
.chip.wahl:has(input:checked) {
  background: var(--f, var(--brand-600));
  color: var(--auf-marke);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--f, var(--pink));
}
.chip.wahl:has(input:checked) small {
  color: rgba(255, 255, 255, .8);
}
/* ---------- Startseite ---------- */
.held {
  margin-bottom: 2.6em;
}
.held h1 {
  color: var(--earth-text);
}
.suchform input[type=search] {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--rand);
  background: var(--flaeche);
  color: var(--tinte);
  font: inherit;
}
.suchform input[type=search]:focus {
  border-color: var(--pink);
}
.suchform .ikon {
  border: 0;
  background: transparent;
  color: var(--tinte);
}
.suchform .ikon:hover {
  background: var(--flaeche-2);
}
.vorschlaege {
  box-shadow: var(--schatten);
}
.vorschlaege .vort {
  font-weight: 800;
}
.vorschlaege .vunter {
  font-size: .85em;
}
.kachel {
  background: var(--flaeche);
  box-shadow: var(--glanz);
  overflow: hidden;
  border: 1px solid var(--rand);
}
.kachel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--f, var(--pink));
}
.kachel::after {
  content: "";
  position: absolute;
  inset: auto -30% -60% auto;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, var(--f, var(--pink)), transparent 70%);
  opacity: .16;
  pointer-events: none;
}
.kachel:hover {
  transform: translateY(-3px);
  background: var(--flaeche-2);
}
.kachel b {
  display: block;
  font-size: 1rem;
  margin-top: .2em;
}
.kachelbild {
  font-size: 1.5rem;
}
.kachelunter {
  font-size: .84rem;
}
.kachelzahl {
  position: absolute;
  top: .8em;
  right: 1em;
  font-size: .82rem;
  font-weight: 800;
  color: var(--f, var(--pink));
}
.eintrag:hover {
  transform: translateY(-2px);
  border-color: var(--f, var(--pink));
}
.eintragbild {
  width: 92px;
  flex: none;
  background-size: cover;
  background-position: center;
  background-color: var(--flaeche-2);
}
.eintragkat {
  display: block;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--f, var(--pink));
  margin-bottom: .15em;
}
.eintragtext b {
  display: block;
  font-weight: 800;
  line-height: 1.25;
}
.eintragkurz {
  display: block;
  color: var(--tinte-leise);
  font-size: .86rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.eintragort {
  font-size: .84rem;
}
.eintragmerkmale {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: .4em;
}
.mm {
  background: var(--flaeche-2);
  border-radius: var(--r-voll-rolle);
  padding: .1em .55em;
  font-size: .76rem;
  font-weight: 700;
  color: var(--tinte-leise);
}
.mm.termin.datum {
  background: rgba(14, 140, 140, .10);
  color: var(--cyan);
}
.mm.termin.monat {
  background: rgba(191, 126, 0, .10);
  color: var(--gelb);
}
.mm.termin.schaetzung {
  background: var(--flaeche-2);
  color: var(--tinte-leise);
}
.mm.km {
  background: rgba(106, 27, 154, .09);
  color: var(--brand-800);
}
.mm.aus {
  background: rgba(179, 57, 47, .09);
  color: var(--rot);
}
.unescomarke {
  background: var(--brand-accent);
  color: var(--earth-text);
  border-radius: 4px;
  padding: 0 .3em;
  font-size: .7em;
  letter-spacing: .04em;
}
.zahl {
  flex: 1 1 150px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--r-karte);
  padding: .85em 1.1em;
}
.zahl b {
  display: block;
  font-size: 1.55rem;
}
/* ---------- Kalender ---------- */
.jahr {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
}
.monat {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--r-karte);
  padding: .9em 1.1em 1.1em;
}
.monat.jetzt {
  border-color: var(--gelb);
  box-shadow: 0 0 0 1px var(--gelb) inset;
}
.monat h2 {
  margin: 0 0 .5em;
  font-size: 1.1rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.monat h2 a {
  text-decoration: none;
  color: var(--tinte);
}
.monat h2 a:hover {
  color: var(--gelb);
}
.monatzahl {
  font-size: .95rem;
  color: var(--tinte-leise);
}
.monatliste {
  list-style: none;
  padding: 0;
  margin: 0 0 .6em;
}
.monatliste li {
  padding: .22em 0 .22em .7em;
  border-left: 2px solid var(--f, var(--rand));
  margin-bottom: .2em;
}
.monatliste a {
  display: block;
  text-decoration: none;
  color: var(--tinte);
  font-weight: 600;
  font-size: .93rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.monatliste a:hover {
  color: var(--cyan);
}
.monatliste span {
  display: block;
}
.mehr {
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none;
}
/* ---------- Länder, Listen ---------- */
.laenderliste {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 5px;
}
.landzeile {
  background: var(--flaeche);
  border: 1px solid var(--rand);
}
.landzeile:hover {
  border-color: var(--cyan);
  color: var(--tinte);
}
.unterfilter {
  margin: 1.4em 0;
}
.unterfilter h2 {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--tinte-leise);
  margin: 0 0 .5em;
  font-family: Manrope, sans-serif;
  font-weight: 800;
}
/* ---------- Detailseite ---------- */
.festkopf {
  position: relative;
  border-radius: var(--r-karte);
  overflow: hidden;
  border: 1px solid var(--rand);
  background: var(--flaeche);
  margin-bottom: 1.2em;
}
.festbild {
  height: 300px;
  background-size: cover;
  background-position: center;
}
.festkopf.mitbild .festkopftext {
  margin-top: -120px;
  position: relative;
  background: linear-gradient(to top, var(--flaeche) 30%, rgba(255, 255, 255, .88));
}
.festkopftext {
  padding: 1.4em clamp(1em, 3vw, 2em) 1.5em;
}
.kats {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 .6em;
}
.katmarke {
  background: var(--f, var(--brand-600));
  color: var(--auf-marke);
  border-radius: var(--r-voll-rolle);
  padding: .2em .8em;
  font-size: .78rem;
  font-weight: 800;
  text-decoration: none;
}
.katmarke:hover {
  color: var(--auf-marke);
  filter: brightness(1.15);
}
.katmarke.unesco {
  background: var(--gelb);
}
.lokalname {
  color: var(--tinte-leise);
  font-size: 1.02rem;
  margin: 0 0 .2em;
  font-style: italic;
}
.kurz {
  font-size: 1.05rem;
  margin: .3em 0;
}
.lage {
  margin: .2em 0 0;
}
.festknoepfe {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 1.1em 0 0;
}
.festgitter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 12px;
}
.block.geschichte {
  grid-column: 1 / -1;
}
.terminwert {
  font-size: 1.7rem;
  margin: 0;
}
.terminwert.datum {
  color: var(--cyan);
}
.terminwert.monat {
  color: var(--gelb);
}
.terminwert.schaetzung, .terminwert.leer {
  color: var(--tinte-leise);
}
.terminhinweis {
  margin: .2em 0 1em;
  font-size: .86rem;
}
.tafel dt {
  font-weight: 600;
}
.tafel dd {
  margin: 0;
  font-weight: 700;
  text-align: right;
}
.tafel dd.ja {
  color: var(--gruen);
}
.tafel dd.nein {
  color: var(--rot);
}
.tafel dd.unklar {
  font-weight: 500;
}
.karte-klein {
  border-radius: var(--r-chip);
  margin: .9em 0;
  background: var(--grund-2);
}
.wikitext {
  font-size: 1.02rem;
}
/* ---------- Fragen ---------- */
.fragen details {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--r-karte);
  padding: .1em 1.1em;
  margin-bottom: 7px;
}
.fragen summary {
  font-family: Unbounded, Manrope, sans-serif;
}
.fragen summary::marker {
  color: var(--pink);
}
/* WARUM #karte UND .vollkarte, nicht nur .vollkarte:
   MapLibre hängt dem Behälter seine eigene Klasse `.maplibregl-map` an, und
   maplibre-gl.css setzt darauf `position: relative; overflow: hidden`. Das ist
   dieselbe Spezifität wie `.vollkarte` — und das Fremdstylesheet wird NACH
   diesem geladen, gewinnt also. Folge (07.09.2026 live erlebt): Der Behälter
   verliert seine Verankerung an den Bildschirmrändern und fällt auf **Höhe 0**
   zusammen. Die Karte lief, zeichnete, antwortete auf Abfragen — und war
   unsichtbar. Deshalb die höhere Spezifität, und zusätzlich eine echte
   min-height als Rückfall, damit ein zukünftiger Fremdstil das nicht wieder
   aushebeln kann. */
#karte.vollkarte {
  background: var(--grund);
}
/* 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, 255, 255, .95);
  box-shadow: var(--schatten);
  backdrop-filter: blur(10px);
}
.filtergruppe h3 {
  font-size: .74rem;
  letter-spacing: .1em;
  font-family: Manrope, sans-serif;
}
.filterfuss {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 1em 0 .3em;
  font-size: .86rem;
}
.filterzahl {
  background: var(--pink);
  font-size: .7rem;
}
.filterfuss {
  position: sticky;
  bottom: 0;
  background: rgba(255, 255, 255, .97);
  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(400px, calc(100vw - 20px));
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--schatten);
  backdrop-filter: blur(10px);
}
.kartetreffer[hidden] {
  display: none;
}
.trefferkopf {
  font-family: Manrope, sans-serif;
  font-weight: 800;
}
.trefferliste {
  grid-auto-rows: min-content;
  align-content: start;
}
/* Auf der Karte sind die Eintraege knapper als auf den Listenseiten: der
   Kasten ist nur 46vh hoch, und man will mehr als drei Treffer sehen. */
.trefferliste .eintragtext {
  padding: .45em .75em .5em;
}
.trefferliste .eintragkat {
  font-size: .7rem;
  margin-bottom: 0;
}
.trefferliste .eintragort {
  font-size: .8rem;
}
.trefferliste .eintragmerkmale {
  margin-top: .3em;
}
/* Unten rechts stehen schon zwei Dinge von MapLibre: die Quellenangabe ganz
   unten (24 px hoch) und die Zoomknoepfe am Rand. Die Legende lag auf beiden. */
.kartelegende {
  bottom: 34px;
  right: 48px;
  background: rgba(255, 255, 255, .94);
  font-size: .78rem;
}
/* Das Trefferblatt sitzt unten links und ist bis 400 px breit. Ohne diese
   Schranke schob sich die Legende darunter. */
@media (min-width: 861px) {
.kartelegende {
  max-width: calc(100vw - 482px);
}
}
.blase {
  max-width: 264px;
}
.blase > * {
  margin: 0;
}
/* Leere Angaben sollen keinen Abstand hinterlassen — ohne Ort oder Merkmale
   klaffte sonst eine Luecke. */
.blase > :empty {
  display: none;
}
/* Der Abstand steht an jeder Zeile selbst — mit einem "+ *" gewann die
   spaetere, staerkere h3-Regel und der Titel klebte an der Marke. */
.blasekats {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  padding-right: 20px;
}
.blase h3 {
  font-size: 1.04rem;
  line-height: 1.25;
  margin: .5em 0 0;
}
.blaseort {
  font-size: .88rem;
  margin: .3em 0 0;
}
.blasemerkmale {
  margin: .4em 0 0;
}
.blaselink {
  margin-top: .8em;
}
.maplibregl-popup-content {
  border-radius: var(--r-karte) !important;
  padding: .9em 1em !important;
  background: var(--flaeche) !important;
  color: var(--tinte) !important;
  box-shadow: var(--schatten) !important;
  font-family: Manrope, sans-serif;
}
.maplibregl-popup-tip {
  border-top-color: var(--flaeche) !important;
  border-bottom-color: var(--flaeche) !important;
}
.maplibregl-popup-close-button {
  color: var(--tinte-leise) !important;
  font-size: 1.1rem;
  top: 3px !important;
  right: 3px !important;
  width: 24px;
  height: 24px;
  line-height: 1;
  border-radius: var(--r-voll-rolle);
}
.maplibregl-popup-close-button:hover {
  background: var(--flaeche-2) !important;
  color: var(--tinte) !important;
}
.maplibregl-ctrl-group {
  background: var(--flaeche) !important;
}
.maplibregl-ctrl-group button + button {
  border-top-color: var(--rand) !important;
}
.maplibregl-ctrl-group button span {
  filter: invert(1) brightness(1.6);
}
.maplibregl-ctrl-attrib {
  background: rgba(255, 255, 255, .84) !important;
}
.maplibregl-ctrl-attrib a {
  color: var(--tinte-leise) !important;
}
.maplibregl-ctrl-scale {
  background: rgba(255, 255, 255, .8) !important;
  color: var(--tinte-leise) !important;
  border-color: var(--rand) !important;
}
/* ---------- Fuß ---------- */
.fuss {
  background: var(--grund-2);
}
.fussmarke {
  font-family: Unbounded, Manrope, sans-serif;
  margin: 0 0 .2em;
}
.fussslogan {
  font-family: Manrope, sans-serif;
}
.fussquelle {
  margin: .3em 0 1em;
}
@media (max-width: 900px) {
.mitjs .leiste {
  box-shadow: 0 14px 34px -20px rgba(20, 40, 55, .18);
}
.festbild {
  height: 210px;
}
.festkopf.mitbild .festkopftext {
  margin-top: -90px;
}
.kartekopf {
  left: 8px;
  right: 8px;
}
}
/* --- Karte auf kleinen Schirmen --- */
@media (max-width: 899px) {
/* Monate als Raster statt als lange Zeile — zwoelf Chips hintereinander
     ergaben auf dem Handy fuenf Umbrueche. */
.filtergruppe .chips:has(input[name="monat"]) {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}
.filtergruppe .chips:has(input[name="monat"]) .chip {
  justify-content: center;
}
}
@media (prefers-reduced-motion: reduce) {
.knopf:hover, .kachel:hover, .eintrag:hover {
  transform: none;
}
}
.formular input[type=text], .formular input[type=email] {
  border: 1px solid var(--rand);
}
.formular textarea {
  width: 100%;
  font: inherit;
  color: var(--tinte);
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--r-chip);
  padding: .62em .85em;
}
.formular textarea {
  resize: vertical;
  min-height: 7em;
  line-height: 1.55;
}
.formular input:focus, .formular textarea:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(233, 30, 99, .16);
}
.wahlreihe .chip.wahl {
  font-weight: 500;
  cursor: pointer;
}
.hinweis.warnung {
  border-left-color: var(--rot);
  color: var(--tinte);
}
.danke {
  background: var(--flaeche);
  box-shadow: var(--glanz);
  border-left: 3px solid var(--cyan);
}
.dankekopf {
  font-family: var(--schrift-kopf);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--cyan);
}
/* 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;
}
/* Kurze Erklaerung unter einer Filtergruppe — der Zeitfilter braucht sie:
   "Frühere" blendet etwas EIN, was sonst fehlt, und das versteht sonst
   niemand. */
.filterhilfe {
  margin: .5em 0 0;
  line-height: 1.35;
}
/* ===================================================================
   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.
   =================================================================== */
/* --- 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;
}
/* Thema: Neon auf Nacht — die Sinnbilder der grossen Startknoepfe
   leuchten in der Zweitfarbe, der Hauptknopf bleibt im Verlauf. */
.heldknoepfe .knopf .ikn {
  color: var(--cyan);
}
.heldknoepfe .knopf.primaer .ikn {
  color: var(--auf-marke);
}