/* Birddex — eigenständiges Stylesheet, kein Build-Schritt.
 *
 * Zwei Modi über Farbtokens: jede Farbe existiert einmal hell und einmal
 * dunkel, umgeschaltet wird nur die Zuordnung. Deshalb steht unten kein
 * einziger Farbwert mehr direkt in einer Regel.
 *
 * Die Akzentfarbe kommt vom Typ der Art, nicht global — dadurch fühlt sich
 * jede Artseite anders an. Die typabhängigen Töne werden in
 * dex/species_meta.py vorberechnet und als Inline-Variablen mitgegeben, in
 * beiden Modi (Endung -l und -d). Die Indirektion weiter unten wählt aus.
 *
 * Keine modernen Funktionen ohne Not: kein color-mix (Safari ab 16.2), kein
 * aspect-ratio (Safari ab 15). Beides fällt auf älteren Geräten ersatzlos weg
 * und reißt das Layout auseinander — Bildverhältnisse laufen über padding-top.
 */

:root {
  --bg: #f2f6f0;
  --bg-grad: #e9f0e6;
  --surface: #ffffff;
  --surface-2: #eef3ec;
  --line: #dde5db;
  --text: #16211a;
  --text-2: #3d5147;
  --muted: #6d8579;

  --accent: #2e9e63;
  --accent-2: #1f7a4a;
  --accent-wash: #e2f3e9;
  --accent-on: #ffffff;
  --gold: #cf9a1c;
  --gold-wash: #fbf3dc;
  --gold-line: #ecd9a0;

  --shadow: 0 1px 2px rgba(22,33,26,.05), 0 8px 20px -12px rgba(22,33,26,.18);
  --shadow-lift: 0 2px 4px rgba(22,33,26,.07), 0 16px 32px -16px rgba(22,33,26,.26);
  --nr-bg: rgba(255,255,255,.92);
  --head-bg: rgba(255,255,255,.86);
  --locked-opacity: .30;

  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --typ: #7f9b6a;
  --typ-ink: #ffffff;
}

/* Typabhängige Töne werden je Modus direkt am Verwendungsort gewählt.
   Der naheliegende Umweg über eine Variable auf :root funktioniert nicht:
   var() in einer Custom-Property-Deklaration wird auf dem deklarierenden
   Element ersetzt, und dort gibt es die -l/-d-Werte der Karte nicht. */

[data-theme="dark"] {
  /* Kühles Blaugrau statt Dunkelgrün: neutral genug, dass 16 Typfarben
     darauf nebeneinander funktionieren, ohne sich mit dem Grund zu beißen. */
  --bg: #10151b;
  --bg-grad: #141b23;
  --surface: #1a2129;
  --surface-2: #222b35;
  --line: #2e3945;
  --text: #e8eef4;
  --text-2: #b3c1cd;
  --muted: #7e8f9e;

  --accent: #45c98a;
  --accent-2: #2f9d68;
  --accent-wash: #163024;
  --accent-on: #08150d;
  --gold: #e8be5a;
  --gold-wash: #2a2415;
  --gold-line: #4a4026;

  /* Auf dunklem Grund trägt nicht der Schatten, sondern die Kante. */
  --shadow: 0 1px 2px rgba(0,0,0,.4);
  --shadow-lift: 0 10px 30px -14px rgba(0,0,0,.75);
  --nr-bg: rgba(10,14,19,.82);
  --head-bg: rgba(16,21,27,.86);
  --locked-opacity: .26;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: linear-gradient(180deg, var(--bg-grad) 0%, var(--bg) 420px);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

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

header.top {
  position: sticky; top: 0; z-index: 30;
  border-bottom: 1px solid var(--line);
  background: var(--head-bg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.top-inner { display: flex; align-items: center; gap: 14px; padding: 12px 0; flex-wrap: wrap; }

.brand { font-weight: 800; font-size: 21px; letter-spacing: -0.03em; display: flex; align-items: center; gap: 8px; }
.brand span { color: var(--accent); }
/* block, sonst sitzt das Zeichen auf der Schriftlinie und die Zeile wird hoeher
   als die Knoepfe daneben. */
.brand img { display: block; width: 30px; height: 30px; }

nav.main { display: flex; gap: 3px; margin-left: auto; flex-wrap: wrap; }
nav.main a {
  padding: 8px 15px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--text-2);
  transition: background .15s, color .15s;
}
nav.main a:hover { background: var(--surface-2); color: var(--text); }
nav.main a.active { background: var(--accent); color: var(--accent-on); }

/* Der Live-Knopf. Kein Navigationspunkt, sondern ein Hinweis, dass gerade
   etwas zu sehen ist — der Punkt pulst, solange die Seite offen ist. Rot ist
   hier die richtige Farbe: sie heisst "laeuft jetzt", nicht "Fehler". */
.live-knopf {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; text-decoration: none;
  color: var(--text-2); background: var(--surface);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px 6px 10px;
  transition: background .15s, color .15s, border-color .15s;
}
.live-knopf:hover { color: var(--text); border-color: var(--text-2); }
.live-knopf.on { background: #d6303a; border-color: #d6303a; color: #fff; }
.live-knopf .punkt {
  width: 8px; height: 8px; border-radius: 50%; background: #d6303a;
  animation: live-puls 2s ease-in-out infinite;
}
.live-knopf.on .punkt { background: #fff; }

@keyframes live-puls {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

.theme-toggle {
  width: 38px; height: 38px; flex-shrink: 0;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--surface); color: var(--text-2);
  font-size: 17px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: border-color .15s, color .15s;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.theme-toggle .icon-dark { display: none; }
[data-theme="dark"] .theme-toggle .icon-dark { display: block; }
[data-theme="dark"] .theme-toggle .icon-light { display: none; }

/* ---------- Fortschritt ---------- */

.progress-bar {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 18px 22px; margin: 22px 0;
  border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.level-badge {
  width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center; flex-shrink: 0;
  font-weight: 800; font-size: 24px; color: var(--accent-on);
  background: linear-gradient(145deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 0 5px var(--accent-wash);
}

.xp-track { height: 11px; border-radius: 999px; overflow: hidden; background: var(--surface-2); }
.xp-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  transition: width .6s cubic-bezier(.2,.8,.3,1);
}

.rank { font-weight: 750; font-size: 18px; letter-spacing: -0.015em; }
.sub { color: var(--muted); font-size: 13px; }

/* ---------- Kennzahlen ---------- */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px,1fr)); gap: 12px; }
.stat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 17px 19px; box-shadow: var(--shadow);
}
.stat .n { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--accent-2); }
.stat .l { color: var(--muted); font-size: 13px; margin-top: 6px; }

h2 {
  font-size: 21px; margin: 36px 0 15px; letter-spacing: -0.025em;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
h2 .count { color: var(--muted); font-weight: 500; font-size: 14px; letter-spacing: 0; }

/* ---------- Sammelkarten ---------- */

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 16px; }

.card {
  position: relative;
  border-radius: var(--r); overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transition: transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s, border-color .18s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--typ-line-l, var(--line)); }
[data-theme="dark"] .card:hover { border-color: var(--typ-line-d, var(--line)); }

/* Farbband oben — die Karte bekennt ihren Typ, bevor man den Namen liest. */
.card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--typ); z-index: 3;
}

.card .nr {
  position: absolute; top: 12px; left: 11px; z-index: 2;
  font-size: 11px; font-weight: 800; letter-spacing: .05em;
  padding: 3px 8px; border-radius: 999px;
  background: var(--nr-bg); color: var(--text-2);
}

.card .thumb {
  position: relative; width: 100%;
  padding-top: 75%;                    /* 4:3, funktioniert ohne aspect-ratio */
  background: var(--typ-wash-l, var(--surface-2));
  overflow: hidden;
}
[data-theme="dark"] .card .thumb { background: var(--typ-wash-d, var(--surface-2)); }
.card .thumb img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Nicht gesammelt: entfärbt und blass. Die Form ist zu ahnen, die
   Federzeichnung nicht — der Reiz des Freischaltens bleibt, ohne dass die
   Karte tot wirkt. */
.card.locked .thumb { background: var(--typ-card-l, var(--surface-2)); }
[data-theme="dark"] .card.locked .thumb { background: var(--typ-card-d, var(--surface-2)); }
.card.locked .thumb img { filter: grayscale(1) contrast(.85); opacity: var(--locked-opacity); }
.card.locked .thumb::after {
  content: "?"; position: absolute;
  right: 12px; bottom: 6px;
  font-size: 34px; font-weight: 800; line-height: 1;
  color: var(--typ); opacity: .6;
}
.card.locked .name { color: var(--text-2); }

.card .body { padding: 12px 14px 14px; }
.card .name { font-weight: 700; font-size: 15.5px; line-height: 1.25; letter-spacing: -0.015em; }
.card .meta { display: flex; align-items: center; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.card .times { margin-left: auto; color: var(--muted); font-size: 12px; font-weight: 700; }

/* ---------- Badges ---------- */

.pill {
  font-size: 11px; font-weight: 800; letter-spacing: .03em;
  padding: 4px 10px; border-radius: 999px;
  color: var(--typ-ink); background: var(--typ);
  white-space: nowrap;
}
.pill.ghost { background: var(--surface-2); color: var(--text-2); border: 1px solid var(--line); }
.pill.rar { color: #fff; }

.tag-new {
  background: var(--gold); color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: .06em;
  padding: 3px 8px; border-radius: 999px; text-transform: uppercase;
}

/* ---------- Artseite ---------- */

.species-hero {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg); margin: 18px 0 8px;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
/* Kräftiges Typband am oberen Rand statt einer flächigen Einfärbung — das
   gibt der Seite ihre Identität, ohne den Text zu bedrängen. */
.species-hero::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: var(--typ);
}

.hero-grid {
  display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr);
  gap: 26px; padding: 28px 26px 26px;
}
@media (max-width: 950px) { .hero-grid { grid-template-columns: 1fr; padding: 22px 18px 18px; } }

.hero-photo {
  position: relative; width: 100%; padding-top: 75%;
  border-radius: var(--r); overflow: hidden;
  background: var(--typ-wash-l, var(--surface-2)); border: 1px solid var(--typ-line-l, var(--line));
}
[data-theme="dark"] .hero-photo { background: var(--typ-wash-d, var(--surface-2)); border-color: var(--typ-line-d, var(--line)); }
.hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.dexnr { font-size: 13px; font-weight: 800; letter-spacing: .12em; color: var(--typ-text-l, var(--muted)); }
[data-theme="dark"] .dexnr { color: var(--typ-text-d, var(--muted)); }
.species-hero h1 { margin: 4px 0 2px; font-size: clamp(30px, 5vw, 44px); letter-spacing: -0.04em; line-height: 1.02; }
.kategorie { font-size: 16px; font-weight: 700; color: var(--typ-text-l, var(--text-2)); margin-bottom: 5px; }
[data-theme="dark"] .kategorie { color: var(--typ-text-d, var(--text-2)); }
.sci { color: var(--muted); font-style: italic; font-size: 14px; }

.badge-row { display: flex; gap: 7px; flex-wrap: wrap; margin: 16px 0; }

/* Statuswerte als Balken — die Pokédex-Geste schlechthin. */
.werte { display: grid; gap: 9px; margin-top: 18px; }
.wert { display: grid; grid-template-columns: 84px 1fr auto; align-items: center; gap: 11px; }
.wert .k { font-size: 12px; font-weight: 700; color: var(--muted); }
.wert .track { height: 9px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.wert .fill { height: 100%; border-radius: 999px; background: var(--typ); }
.wert .v { font-size: 12.5px; font-weight: 750; font-variant-numeric: tabular-nums; min-width: 62px; text-align: right; }

/* ---------- Fließtext und Steckbrief ---------- */

.prose { max-width: 68ch; }
.prose p { line-height: 1.7; margin: 0 0 16px; font-size: 16px; color: var(--text-2); }
.prose p:first-of-type::first-letter {
  font-size: 3.1em; float: left; line-height: .82;
  padding: 5px 10px 0 0; font-weight: 800; color: var(--typ-text-l, var(--text-2));
}
[data-theme="dark"] .prose p:first-of-type::first-letter { color: var(--typ-text-d, var(--text-2)); }

.fakten { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 12px; margin: 18px 0; }
.fakt {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--typ);
  border-radius: var(--r); padding: 14px 16px; box-shadow: var(--shadow);
}
.fakt .k { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fakt .v { margin-top: 5px; line-height: 1.5; font-size: 14.5px; color: var(--text-2); }

.verwechslung { display: flex; gap: 12px; flex-wrap: wrap; }
.vw {
  display: flex; align-items: center; gap: 11px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 18px 6px 6px;
  box-shadow: var(--shadow);
  transition: transform .15s, box-shadow .15s;
}
.vw:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.vw img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: var(--surface-2); }
.vw .n { font-weight: 650; font-size: 14.5px; }

/* ---------- Sichtungen ---------- */

.rows { display: flex; flex-direction: column; gap: 9px; }
.row {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 10px 16px 10px 10px;
  box-shadow: var(--shadow); transition: box-shadow .15s;
}
.row:hover { box-shadow: var(--shadow-lift); }
.row img.shot, .row .shot {
  width: 74px; height: 56px; object-fit: cover;
  border-radius: var(--r-sm); background: var(--surface-2); flex-shrink: 0;
}
.row .who { font-weight: 680; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.row .when { color: var(--muted); font-size: 13px; margin-top: 2px; }
.row .right { margin-left: auto; text-align: right; flex-shrink: 0; }
.row .conf { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 15px; }
.row .xp { color: var(--accent-2); font-size: 13px; font-weight: 800; }

/* ---------- Abzeichen ---------- */

.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px,1fr)); gap: 13px; }
.badge {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 16px 18px; box-shadow: var(--shadow);
}
.badge.locked { opacity: .55; box-shadow: none; background: var(--surface-2); }
.badge .em { font-size: 30px; line-height: 1; filter: grayscale(1); }
.badge:not(.locked) .em { filter: none; }
.badge:not(.locked) { border-color: var(--gold-line); background: var(--gold-wash); }
.badge .n { font-weight: 750; font-size: 15.5px; }
.badge .d { color: var(--muted); font-size: 13.5px; margin-top: 4px; line-height: 1.45; }

/* ---------- Aktivität über den Tag ---------- */

.hours { display: flex; align-items: flex-end; gap: 3px; height: 74px; margin-top: 12px; }
.hours div { flex: 1; min-height: 3px; border-radius: 3px 3px 0 0; background: var(--typ); }
.hours-axis { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; margin-top: 6px; }

/* ---------- Kleinteile ---------- */

.empty {
  border: 1px dashed var(--line); border-radius: var(--r-lg);
  padding: 42px 24px; text-align: center; color: var(--muted);
  line-height: 1.6; background: var(--surface);
}

.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.filters a {
  padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 650;
  border: 1px solid var(--line); background: var(--surface); color: var(--text-2);
  transition: background .15s, color .15s, border-color .15s;
}
.filters a:hover { border-color: var(--muted); }
.filters a.on { background: var(--accent); color: var(--accent-on); border-color: var(--accent); }

.pager { display: flex; gap: 10px; justify-content: center; margin: 28px 0; }
.pager a {
  padding: 9px 20px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); font-size: 14px; font-weight: 650; color: var(--text-2);
}
.pager a:hover { border-color: var(--accent); color: var(--accent); }

.blaettern { display: flex; justify-content: space-between; gap: 12px; margin: 20px 0 4px; }
.blaettern a { color: var(--muted); font-size: 14px; font-weight: 650; }
.blaettern a:hover { color: var(--text); }

footer.bottom {
  border-top: 1px solid var(--line); margin-top: 60px; padding: 24px 0 44px;
  color: var(--muted); font-size: 13px; line-height: 1.6;
}

/* Das Zahnrad zum Admin — gleiche Form wie der Modus-Umschalter, weil es
   dieselbe Sorte Knopf ist: eine Einstellung, kein Navigationspunkt. Oben bei
   den Bedienelementen versteht man es ohne Beschriftung; im Footer neben
   einem Fliesstext nicht, das war der erste Versuch. */
.gear {
  width: 38px; height: 38px; flex-shrink: 0;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--surface); color: var(--text-2);
  font-size: 17px; line-height: 1;
  display: grid; place-items: center;
  transition: border-color .15s, color .15s;
}
.gear:hover { border-color: var(--accent); color: var(--accent); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- Schmale Geräte ---------- */

/* Der Kopf bricht um, sobald Marke, Live-Knopf, Navigation, Sprache und
   Umschalter nicht mehr in eine Zeile passen. Gemessen, nicht geschätzt: bei
   810 px (iPad hochkant) rutschte sonst der Umschalter allein in Zeile zwei —
   einer der Gründe, warum Layoutarbeit in vier Breiten angesehen wird.
   Marke und die kleinen Knöpfe bleiben oben, die Navigation nimmt die Zeile
   darunter. */
@media (max-width: 1000px) {
  .brand { order: 0; flex: 1 1 auto; }
  .live-knopf, .lang-switch, .theme-toggle, .gear { order: 1; }
  nav.main { order: 2; flex: 1 0 100%; margin-left: 0; }
}

@media (max-width: 560px) {
  /* Fünf Punkte passen auf einem Telefon nicht mehr in eine Zeile, und einer
     allein in der zweiten sieht nach Versehen aus. Also seitlich wischen
     statt umbrechen — die Zeile bleibt eine Zeile, egal wie viele Punkte
     dazukommen oder wie lang die Sprache sie macht ("Sightings" gegen
     "Sichtungen"). Die Leiste wird bündig am Rand gescrollt, damit man ihr
     ansieht, dass da noch etwas kommt. */
  nav.main {
    order: 2; flex: 1 0 100%; margin-left: 0;
    flex-wrap: nowrap; justify-content: flex-start;
    overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    /* Der Wisch-Rand gehört in die Leiste, nicht neben sie. */
    margin-inline: -14px; padding-inline: 14px;
  }
  nav.main::-webkit-scrollbar { display: none; }
  nav.main { gap: 1px; }
  nav.main a { padding: 7px 8px; font-size: 12.5px; white-space: nowrap; flex: none; }

  .wrap { padding: 0 14px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 12px; }

  /* Auf 360-px-Geräten ergeben Marke, Live, Sprache und Umschalter zusammen
     380 px und der Umschalter faellt in eine dritte Zeile. Gemessen, nicht
     geraten: 154 + 68 + 90 + 38 plus Abstaende gegen 332 px Platz, und das
     Zahnrad kommt noch dazu. Also alles eine Stufe kompakter — und vom
     Sprachumschalter bleibt nur die Sprache, in die man wechseln kann: welche
     gerade aktiv ist, sieht man am Text der Seite. */
  .top-inner { gap: 8px; }
  .brand { font-size: 19px; }
  .live-knopf { font-size: 12px; padding: 5px 10px 5px 8px; gap: 5px; }
  .theme-toggle, .gear { width: 34px; height: 34px; font-size: 15px; }
  .lang-switch button.on { display: none; }
  .progress-bar { padding: 16px; gap: 14px; }
  .species-hero h1 { font-size: 30px; }
  .wert { grid-template-columns: 74px 1fr auto; gap: 8px; }
  .fakten { grid-template-columns: 1fr; }
}

/* ---------- Sprachumschalter ---------- */

.lang-switch {
  display: flex; gap: 2px; flex-shrink: 0;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); padding: 2px;
}
.lang-switch button {
  border: 0; background: transparent; cursor: pointer;
  padding: 5px 11px; border-radius: 999px;
  font: inherit; font-size: 12px; font-weight: 800; letter-spacing: .04em;
  color: var(--muted);
  transition: background .15s, color .15s;
}
.lang-switch button:hover { color: var(--text); }
.lang-switch button.on { background: var(--accent); color: var(--accent-on); }

/* ---------- Filterleiste ---------- */

.filterleiste {
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px 16px; margin-bottom: 18px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow);
}

.filtergruppe { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.filterlabel {
  font-size: 11px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
  flex-shrink: 0;
}

.filterleiste .pills { display: flex; gap: 7px; flex-wrap: wrap; }
.filterleiste .pills a {
  padding: 6px 13px; border-radius: 999px;
  font-size: 13px; font-weight: 650;
  border: 1px solid var(--line); background: var(--surface); color: var(--text-2);
  transition: border-color .15s, background .15s, color .15s;
}
.filterleiste .pills a b { font-weight: 800; opacity: .55; margin-left: 2px; }
.filterleiste .pills a:hover { border-color: var(--muted); }
.filterleiste .pills a.on {
  background: var(--accent); color: var(--accent-on); border-color: var(--accent);
}
.filterleiste .pills a.on b { opacity: .8; }

/* Die Verfeinerung sitzt optisch unter der Hauptachse, nicht daneben. */
.verfeinern { border-top: 1px solid var(--line-soft, var(--line)); padding-top: 12px; }
.verfeinern label { display: flex; align-items: center; gap: 8px; }

.verfeinern select {
  font: inherit; font-size: 13.5px; font-weight: 600;
  padding: 7px 30px 7px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  cursor: pointer;
  /* Eigener Pfeil: das native Dreieck sieht in jedem Browser anders aus. */
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.verfeinern select:hover { border-color: var(--muted); }
.verfeinern select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.verfeinern button {
  font: inherit; font-size: 13.5px; font-weight: 650;
  padding: 7px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--accent); background: var(--accent); color: var(--accent-on);
}

.zuruecksetzen {
  font-size: 13px; font-weight: 650; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.zuruecksetzen:hover { color: var(--text); }

@media (max-width: 560px) {
  .filterleiste { padding: 12px; gap: 10px; }
  .filtergruppe { gap: 8px; }
  /* Label über die Zeile, damit die Pillen die volle Breite bekommen. */
  .filtergruppe > .filterlabel { flex: 1 0 100%; }
  .filterleiste .pills a { padding: 6px 11px; font-size: 12.5px; }
  .verfeinern { flex-wrap: wrap; }
  .verfeinern label { flex: 1 1 46%; }
  .verfeinern label .filterlabel { display: none; }
  .verfeinern select { width: 100%; }
}