/* fiesta.earth — Nachtoptik wie ein Festivalplakat: fast schwarzer Grund,
   Neonfarben je Kategorie, breite Versalien im Titel, Verläufe an den Rändern.
   Absichtlich das Gegenteil von ludo.earth (hell, rund, warm) und von
   lido.earth (Sand und Meer): Ein Fest findet abends statt.
   Ein Design, dunkel — kein Umschalter: Die Farbwirkung IST der Inhalt hier. */

@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 {
  --grund: #0B0B14;
  --grund-2: #12121E;
  --papier: #171726;
  --papier-hell: #1E1E30;
  --rand: #2A2A40;
  --tinte: #F2F0FF;
  --tinte-leise: #9A97B8;
  --pink: #FF2D95;
  --gelb: #FFC531;
  --cyan: #00E5C7;
  --violett: #7C4DFF;
  --gruen: #5DD39E;
  --rot: #FF4D6D;
  --rund: 16px;
  --rund-klein: 10px;
  --rund-voll: 999px;
  --breit: 1180px;
  --schatten: 0 12px 40px -18px rgba(0, 0, 0, .9);
  --glanz: 0 0 0 1px rgba(255, 255, 255, .05);
  --kopf: 61px;          /* app.js setzt die echte Kopfhöhe */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--grund); }
body {
  margin: 0; color: var(--tinte); background: var(--grund);
  font-family: Manrope, "Segoe UI", system-ui, sans-serif;
  font-size: 16.5px; line-height: 1.6; font-weight: 450;
  /* Drei weiche Lichter in den Markenfarben — das Scheinwerferlicht über
     dem Platz. Fest angeheftet, damit es beim Rollen nicht mitwandert. */
  background-image:
    radial-gradient(900px 520px at 8% -6%, rgba(255, 45, 149, .16), transparent 70%),
    radial-gradient(760px 460px at 92% 4%, rgba(124, 77, 255, .16), transparent 70%),
    radial-gradient(700px 520px at 50% 108%, rgba(0, 229, 199, .10), transparent 70%);
  background-attachment: fixed;
}
h1, h2, h3, .wortmarke, .zahl b, .terminwert, .monatzahl {
  font-family: Unbounded, Manrope, system-ui, sans-serif;
  font-weight: 600; letter-spacing: -.02em; line-height: 1.1;
}
h1 { font-size: clamp(1.8rem, 1.1rem + 2.7vw, 3.2rem); margin: 0 0 .3em; }
h2 { font-size: clamp(1.15rem, .95rem + .9vw, 1.5rem); margin: 2em 0 .7em; }
h3 { font-size: 1rem; margin: 1.2em 0 .4em; }
a { color: var(--cyan); text-decoration-thickness: .07em; text-underline-offset: .2em; }
a:hover { color: var(--gelb); }
img, svg { max-width: 100%; }
code { font-family: ui-monospace, Consolas, monospace; font-size: .9em;
  background: var(--papier-hell); padding: .12em .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; background: var(--pink); color: #fff;
  padding: .6em 1em; border-radius: var(--rund-voll); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--pink); color: #fff; }

/* ---------- Kopf ---------- */
.kopf {
  /* Nicht umbrechen: Auf dem Handy übernimmt der Menüknopf, und ein
     zweizeiliger Kopf schöbe die Karte um 80 Pixel nach unten. */
  display: flex; align-items: center; gap: 10px 16px; flex-wrap: nowrap;
  padding: 13px clamp(14px, 4vw, 28px);
  background: rgba(11, 11, 20, .82); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rand);
  position: sticky; top: 0; z-index: 40;
}
.marke { display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  color: inherit; flex: none; min-width: 0; }
.logo { width: 34px; height: 34px; flex: none; }
.wortmarke { font-size: 1.3rem; letter-spacing: -.03em; }
.punkt { background: linear-gradient(90deg, var(--pink), var(--gelb));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.leiste { display: flex; gap: 2px; flex-wrap: wrap; margin-left: auto; }
.leiste a {
  padding: .4em .8em; border-radius: var(--rund-voll); text-decoration: none;
  color: var(--tinte-leise); font-weight: 700; font-size: .92rem; white-space: nowrap;
}
.leiste a:hover { color: var(--tinte); background: var(--papier); }
.leiste a.on { color: #0B0B14; background: linear-gradient(100deg, var(--gelb), var(--pink)); }
.sprachwahl { display: flex; gap: 2px; }
.sprachwahl a { padding: .28em .5em; border-radius: 8px; font-size: .74rem; font-weight: 800;
  text-decoration: none; color: var(--tinte-leise); }
.sprachwahl a.on { background: var(--papier-hell); color: var(--tinte); }
.merkzahl { background: var(--pink); color: #fff; border-radius: var(--rund-voll);
  padding: 0 .42em; font-size: .74em; margin-left: .2em; }

/* 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 {
  display: none; margin-left: auto; flex: none; align-items: center; gap: .45em;
  border: 1px solid var(--rand); background: var(--papier); color: var(--tinte);
  border-radius: var(--rund-voll); padding: .4em .85em .4em .7em;
  font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer;
}
.menuknopf:hover { border-color: var(--pink); }
.burger { display: block; width: 17px; height: 11px; position: relative; }
.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; }
[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; padding: clamp(20px, 3vw, 40px) clamp(14px, 4vw, 28px) 70px; }
.seitenkopf { margin-bottom: 1.4em; }
.unter { color: var(--tinte-leise); margin: .2em 0 1em; }
.leise { color: var(--tinte-leise); }
.klein { font-size: .88rem; }
.brot { font-size: .85rem; color: var(--tinte-leise); margin-bottom: .9em; }
.brot a { color: var(--tinte-leise); text-decoration: none; }
.brot a:hover { color: var(--cyan); }
.text { max-width: 44rem; }
.text h2 { margin-top: 1.8em; }
.text ul { padding-left: 1.2em; }
.hinweis { background: var(--papier); border-left: 3px solid var(--violett);
  border-radius: 0 var(--rund-klein) var(--rund-klein) 0; padding: .6em .9em; margin: .8em 0; }
.warnung { background: rgba(255, 77, 109, .12); border: 1px solid rgba(255, 77, 109, .35);
  border-radius: var(--rund-klein); padding: .7em 1em; margin: 1.2em 0; }
.warnung.leise { background: var(--papier); border-color: var(--rand); color: var(--tinte-leise); }
.leer { color: var(--tinte-leise); 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(--rund-voll); 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 { background: linear-gradient(100deg, var(--pink), var(--violett)); color: #fff; }
.knopf.primaer:hover { filter: brightness(1.12); color: #fff; }
.knopf.sekundaer { background: var(--papier-hell); color: var(--tinte); box-shadow: var(--glanz); }
.knopf.sekundaer:hover { color: var(--tinte); background: #26263C; }
.knopf.leise { background: transparent; color: var(--tinte-leise); box-shadow: inset 0 0 0 1px var(--rand); }
.knopf.leise:hover { color: var(--tinte); box-shadow: inset 0 0 0 1px var(--cyan); }
.knopf.klein { padding: .35em .8em; font-size: .88rem; }
.knopf.merken.an { background: linear-gradient(100deg, var(--gelb), var(--pink)); color: #0B0B14; }
.knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.heldknoepfe { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 1.2em; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: .35em; padding: .35em .75em;
  background: var(--papier); border-radius: var(--rund-voll); text-decoration: none;
  color: var(--tinte); font-size: .9rem; font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--rand); cursor: pointer;
}
.chip:hover { box-shadow: inset 0 0 0 1px var(--f, var(--cyan)); color: var(--tinte); }
.chip small { color: var(--tinte-leise); font-weight: 500; }
.chip.leer { background: transparent; }
.chip.klein { padding: .2em .55em; font-size: .8rem; }
.chip.an { background: var(--papier-hell); 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(--pink)); color: #0B0B14; font-weight: 800;
  box-shadow: inset 0 0 0 1px var(--f, var(--pink));
}
.chip.wahl:has(input:checked) small { color: rgba(11, 11, 20, .7); }

/* ---------- Startseite ---------- */
.held { max-width: 46rem; margin-bottom: 2.6em; }
.held h1 {
  background: linear-gradient(96deg, #FFFFFF 10%, var(--gelb) 45%, var(--pink) 78%, var(--violett));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.suchform { position: relative; display: flex; gap: 8px; align-items: center; }
.suchform input[type=search] {
  flex: 1; min-width: 0; padding: .78em 1.1em; border-radius: var(--rund-voll);
  border: 1px solid var(--rand); background: var(--papier); color: var(--tinte);
  font: inherit; font-weight: 500;
}
.suchform input[type=search]::placeholder { color: var(--tinte-leise); }
.suchform input[type=search]:focus { border-color: var(--pink); outline: none; }
.suchform.gross input[type=search] { font-size: 1.05rem; }
.suchform .ikon { border: 0; background: transparent; font-size: 1.2rem; cursor: pointer;
  padding: .3em; border-radius: var(--rund-voll); color: var(--tinte); }
.suchform .ikon:hover { background: var(--papier-hell); }
.vorschlaege {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50;
  background: var(--papier); border: 1px solid var(--rand); border-radius: var(--rund);
  box-shadow: var(--schatten); 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(--papier-hell); }
.vorschlaege .vort { font-weight: 800; }
.vorschlaege .vunter { color: var(--tinte-leise); font-size: .85em; }

.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.kachel {
  position: relative; display: block; padding: 1em 1.1em 1.2em;
  background: var(--papier); border-radius: var(--rund); text-decoration: none; color: var(--tinte);
  box-shadow: var(--glanz); overflow: hidden; transition: transform .14s ease, background .14s ease;
  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(--papier-hell); color: var(--tinte); }
.kachel b { display: block; font-size: 1rem; margin-top: .2em; }
.kachelbild { font-size: 1.5rem; }
.kachelunter { color: var(--tinte-leise); font-size: .84rem; }
.kachelzahl { position: absolute; top: .8em; right: 1em; font-size: .82rem; font-weight: 800;
  color: var(--f, var(--pink)); }

.karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; }
.eintrag {
  display: flex; gap: 0; background: var(--papier); border: 1px solid var(--rand);
  border-radius: var(--rund); overflow: hidden; text-decoration: none; color: var(--tinte);
  transition: transform .14s ease, border-color .14s ease;
}
.eintrag:hover { transform: translateY(-2px); border-color: var(--f, var(--pink)); color: var(--tinte); }
.eintragbild { width: 92px; flex: none; background-size: cover; background-position: center;
  background-color: var(--papier-hell); }
.eintragtext { padding: .7em .95em; min-width: 0; }
.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 { display: block; color: var(--tinte-leise); font-size: .84rem; }
.eintragmerkmale { display: flex; gap: 5px; flex-wrap: wrap; margin-top: .4em; }
.mm { background: var(--papier-hell); border-radius: var(--rund-voll); padding: .1em .55em;
  font-size: .76rem; font-weight: 700; color: var(--tinte-leise); }
.mm.termin.datum { background: rgba(0, 229, 199, .16); color: var(--cyan); }
.mm.termin.monat { background: rgba(255, 197, 49, .14); color: var(--gelb); }
.mm.termin.schaetzung { background: var(--papier-hell); color: var(--tinte-leise); }
.mm.km { background: rgba(124, 77, 255, .18); color: #B9A2FF; }
.mm.aus { background: rgba(255, 77, 109, .16); color: var(--rot); }
.unescomarke { background: var(--gelb); color: #0B0B14; border-radius: 4px; padding: 0 .3em;
  font-size: .7em; letter-spacing: .04em; }

.zahlen { display: flex; gap: 10px; flex-wrap: wrap; margin: 2.6em 0 0; }
.zahl { flex: 1 1 150px; background: var(--papier); border: 1px solid var(--rand);
  border-radius: var(--rund); padding: .85em 1.1em; }
.zahl b { display: block; font-size: 1.55rem; }
.zahl span { color: var(--tinte-leise); font-size: .84rem; }
.familie { margin-top: 3em; padding-top: 1.2em; border-top: 1px solid var(--rand);
  color: var(--tinte-leise); font-size: .92rem; }

/* ---------- Kalender ---------- */
.jahr { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.monat { background: var(--papier); border: 1px solid var(--rand); border-radius: var(--rund);
  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 { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 5px; }
.landzeile { display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
  padding: .45em .8em; background: var(--papier); border: 1px solid var(--rand);
  border-radius: var(--rund-klein); text-decoration: none; color: var(--tinte); }
.landzeile:hover { border-color: var(--cyan); color: var(--tinte); }
.landzeile small { color: var(--tinte-leise); }
.filterzeile { margin: 0 0 1.2em; }
.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; }
.blaettern { display: flex; gap: 12px; align-items: center; justify-content: center;
  margin-top: 1.8em; color: var(--tinte-leise); }

/* ---------- Detailseite ---------- */
.festkopf { position: relative; border-radius: var(--rund); overflow: hidden;
  border: 1px solid var(--rand); background: var(--papier); 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(--papier) 30%, rgba(23, 23, 38, .82));
}
.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(--pink)); color: #0B0B14; border-radius: var(--rund-voll);
  padding: .2em .8em; font-size: .78rem; font-weight: 800; text-decoration: none; }
.katmarke:hover { color: #0B0B14; 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 { color: var(--tinte-leise); 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 { background: var(--papier); border: 1px solid var(--rand); border-radius: var(--rund);
  padding: 1em 1.2em 1.3em; }
.block h2 { margin: 0 0 .8em; font-size: 1.05rem; }
.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 { margin: 0; }
.tafel > div { display: flex; justify-content: space-between; gap: 12px; padding: .4em 0;
  border-bottom: 1px solid var(--rand); }
.tafel > div:last-child { border-bottom: 0; }
.tafel dt { color: var(--tinte-leise); 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 { color: var(--tinte-leise); font-weight: 500; }
.karte-klein { height: 240px; border-radius: var(--rund-klein); overflow: hidden;
  margin: .9em 0; background: var(--grund-2); }
.wikitext { font-size: 1.02rem; }
.weitere { margin-top: 2.2em; }

/* ---------- Fragen ---------- */
.fragen details { background: var(--papier); border: 1px solid var(--rand);
  border-radius: var(--rund); padding: .1em 1.1em; margin-bottom: 7px; }
.fragen summary { cursor: pointer; font-weight: 700; padding: .75em 0;
  font-family: Unbounded, Manrope, sans-serif; font-size: .96rem; }
.fragen summary::marker { color: var(--pink); }
.fragen p { margin-top: 0; }

/* ---------- Karte ---------- */
.kartenseite { overflow: hidden; }
.kartenmain { position: relative; }
/* 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 {
  position: fixed; inset: 0; top: var(--kopf);
  min-height: calc(100vh - var(--kopf));
  background: var(--grund);
}
.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: 400px;
  background: rgba(17, 17, 28, .94); border: 1px solid var(--rand); border-radius: var(--rund);
  box-shadow: var(--schatten); padding: 7px; backdrop-filter: blur(10px);
}
.filterkasten { padding: 6px 4px 0; }
.filterkopf { display: none; }
.filterinhalt { display: contents; }
.filtergruppe h3 { margin: .7em 0 .35em; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--tinte-leise); font-family: Manrope, sans-serif; font-weight: 800; }
.filterfuss { display: flex; gap: 10px; align-items: center; margin: 1em 0 .3em; font-size: .86rem; }
.filterzahl { background: var(--pink); color: #fff; border-radius: var(--rund-voll);
  padding: 0 .4em; font-size: .7rem; }
.filterfuss { position: sticky; bottom: 0; background: rgba(17, 17, 28, .97);
  padding-bottom: .3em; }
.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; width: min(400px, calc(100vw - 20px));
  background: rgba(17, 17, 28, .95); border: 1px solid var(--rand); border-radius: var(--rund);
  box-shadow: var(--schatten); backdrop-filter: blur(10px); 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); font-family: Manrope, sans-serif; font-weight: 800;
  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; bottom: 12px; right: 12px; z-index: 28;
  background: rgba(17, 17, 28, .92); border: 1px solid var(--rand);
  border-radius: var(--rund-voll); padding: .4em 1em; font-size: .78rem;
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  max-width: calc(100vw - 24px);
}
.legendepunkt { width: 10px; height: 10px; border-radius: 50%; background: var(--f);
  display: inline-block; }
.blase { min-width: 200px; }
.blase h3 { margin: .1em 0; font-size: 1.02rem; }
.blasekats { display: flex; gap: 5px; flex-wrap: wrap; margin: 0; }
.blasemerkmale { display: flex; gap: 5px; flex-wrap: wrap; margin: .4em 0 .6em; }
.maplibregl-popup-content { border-radius: var(--rund) !important; padding: .9em 1em !important;
  background: var(--papier) !important; color: var(--tinte) !important;
  border: 1px solid var(--rand); box-shadow: var(--schatten) !important;
  font-family: Manrope, sans-serif; }
.maplibregl-popup-tip { border-top-color: var(--papier) !important;
  border-bottom-color: var(--papier) !important; }
.maplibregl-popup-close-button { color: var(--tinte-leise) !important; font-size: 1.2rem; }
.maplibregl-ctrl-group { border-radius: var(--rund-klein) !important; background: var(--papier) !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(11, 11, 20, .8) !important; }
.maplibregl-ctrl-attrib a { color: var(--tinte-leise) !important; }
.maplibregl-ctrl-scale { background: rgba(11, 11, 20, .7) !important; color: var(--tinte-leise) !important;
  border-color: var(--rand) !important; }

/* ---------- Fuß ---------- */
.fuss { border-top: 1px solid var(--rand); background: var(--grund-2); margin-top: 3.5em; }
.fussinnen { max-width: var(--breit); margin: 0 auto; padding: 26px clamp(14px, 4vw, 28px) 40px; }
.fussmarke { font-family: Unbounded, Manrope, sans-serif; font-size: 1.15rem; margin: 0 0 .2em; }
.fussslogan { font-family: Manrope, sans-serif; font-size: .88rem; color: var(--tinte-leise); font-weight: 500; }
.fussquelle { color: var(--tinte-leise); font-size: .8rem; margin: .3em 0 1em; }
.fussnav { display: flex; gap: 16px; flex-wrap: wrap; font-size: .9rem; font-weight: 700; }

@media (max-width: 900px) {
  .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(--papier); border-bottom: 1px solid var(--rand);
    box-shadow: 0 14px 34px -20px rgba(0, 0, 0, .9);
    padding: 6px clamp(14px, 4vw, 28px) 12px;
  }
  .mitjs .leiste a { padding: .7em .6em; border-radius: var(--rund-klein); font-size: 1rem; }
  .sprachwahl { order: 3; }
  .festbild { height: 210px; }
  .festkopf.mitbild .festkopftext { margin-top: -90px; }
  .kartekopf { left: 8px; right: 8px; }
}

/* 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; }
  /* 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) {
  * { transition: none !important; animation: none !important; }
  .knopf:hover, .kachel:hover, .eintrag:hover { transform: none; }
}

/* ---------- Meldeformular ----------
 * Ohne JavaScript: Die Seite hat keine Inline-Skripte (CSP), und eine Meldung
 * muss auch dann durchgehen, wenn unterwegs das Skript haengt. Dunkel wie der
 * Rest — Eingabefelder bekommen den Papierton, nicht Weiss. */
.formular { max-width: 44rem; margin-bottom: 2.4em; }
.formular .feld { margin-bottom: 1.15em; }
.formular label, .formular legend {
  display: block; font-weight: 700; margin-bottom: .35em; }
.formular fieldset { border: 0; padding: 0; margin: 0 0 1.15em; }
.formular input[type=text], .formular input[type=email], .formular textarea {
  width: 100%; font: inherit; color: var(--tinte); background: var(--papier);
  border: 1px solid var(--rand); border-radius: var(--rund-klein);
  padding: .62em .85em; }
.formular textarea { resize: vertical; min-height: 7em; line-height: 1.55; }
.formular input:focus, .formular textarea:focus {
  border-color: var(--pink); outline: none;
  box-shadow: 0 0 0 3px rgba(255, 45, 149, .18); }
.formular input::placeholder, .formular textarea::placeholder { color: var(--tinte-leise); }
.wahlreihe { display: flex; flex-wrap: wrap; gap: .5em; }
.wahlreihe .chip.wahl { font-weight: 500; margin: 0; cursor: pointer; }

/* 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; }

.hinweis.warnung { border-left-color: var(--rot); color: var(--tinte); }
.danke { max-width: 44rem; background: var(--papier); border-radius: var(--rund);
  box-shadow: var(--glanz); border-left: 3px solid var(--cyan); padding: 1.2em 1.4em; }
.dankekopf { font-family: Unbounded, Manrope, system-ui, sans-serif;
  font-size: 1.2rem; font-weight: 700; margin: 0 0 .5em; color: var(--cyan); }
.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. */
.tafel dd, .tafel dd a, .text a { overflow-wrap: anywhere; }
.tafel dd a { text-decoration-thickness: 1px; }