/* Aussehen der Filterbedienung — gehoert zu filter.js und wird von Liste und
   Karte gleichermassen gebraucht. Die Farbnamen (--card, --accent, ...) setzt
   jede Seite selbst; hier stehen nur die Formen. */

/* --- Schnellzugriffe: grosse Zahlen fuer das, was man taeglich braucht ---
   Bleiben bewusst offen stehen: sie sind der taegliche Blick ("was ist neu, was
   laeuft ab") und taugen nur, wenn man die Zahlen sieht, ohne zu klicken. Dafuer
   sind sie flach gehalten — auf dem Handy schiebt man sie seitlich durch, statt
   sie ueber drei Zeilen umbrechen zu lassen. */
.schnell {
  display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.2rem;
  scrollbar-width: thin;
}
.schnell button {
  flex: 1 0 7.5rem; display: flex; flex-direction: column; align-items: flex-start;
  gap: 0; padding: 0.45rem 0.6rem; text-align: left; line-height: 1.2;
  width: auto; margin: 0;
}
/* Ab Tabletbreite ein Raster statt Umbruch: sechs Karten ergeben zwei volle
   Reihen zu dritt, statt einer Reihe zu fuenft und einer einsamen sechsten. */
@media (min-width: 620px) {
  .schnell { display: grid; grid-template-columns: repeat(3, 1fr); overflow-x: visible; }
}
.schnell button {
  transition: border-color 0.12s ease, background 0.12s ease, transform 0.08s ease;
}
.schnell button:hover { border-color: var(--accent); }
.schnell button:active { transform: scale(0.985); }
.schnell button.aktiv {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.schnell button.aktiv .zahl { color: var(--accent); }
.schnell .zahl { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.schnell .wozu { font-size: 0.7rem; color: var(--muted); }

/* --- Zeitknoepfe: "nur aktive", "6 Monate", "1 Jahr" ---
   Liegen in der Kopfzeile neben der Einfaerbung (Karte) bzw. ueber den
   Schnellzugriffen (Liste). Die Zahl am Knopf sagt, was nach dem Klick uebrig
   bliebe - ein Knopf, der im heutigen Bestand nichts wegnimmt, soll das zeigen
   duerfen, statt einen Fehler in der Anzeige vermuten zu lassen. */
.zeit {
  display: flex; gap: 0.15rem; flex: 0 0 auto; flex-wrap: wrap;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 9px; padding: 0.15rem;
}
.zeit button {
  width: auto; margin: 0; padding: 0.25rem 0.55rem; font-size: 0.78rem;
  display: inline-flex; align-items: baseline; gap: 0.35rem;
  border: none; background: transparent; border-radius: 7px; cursor: pointer;
  color: var(--muted); transition: background 0.12s ease, color 0.12s ease;
}
.zeit button:hover { color: var(--text); }
.zeit button.aktiv { background: var(--accent); color: var(--accent-text); }
.zeit button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.zeit-zahl { font-size: 0.72rem; font-variant-numeric: tabular-nums; opacity: 0.8; }

/* --- Filter-Kacheln --- */
/* Jede Gruppe klappt einzeln auf. Zugeklappt bleibt sie eine Zeile, die sagt,
   wie viele Werte es gibt und wie viele davon gewaehlt sind. */
.kachel-gruppe { margin-bottom: 0.35rem; }
.kachel-gruppe > summary {
  display: flex; align-items: center; gap: 0.5rem; cursor: pointer;
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted); font-weight: 700; padding: 0.3rem 0;
  list-style: none;
}
.kachel-gruppe > summary::-webkit-details-marker { display: none; }
.kachel-gruppe > summary::before {
  content: "▸"; font-size: 0.85rem; transition: transform 0.15s ease;
}
.kachel-gruppe[open] > summary::before { transform: rotate(90deg); }
.kachel-gruppe > summary:hover { color: var(--text); }
.kachel-gruppe > summary .offen-zahl,
.kachel-gruppe > summary .gewaehlt {
  margin-left: auto; text-transform: none; letter-spacing: 0;
  font-weight: 600; font-size: 0.72rem;
}
.kachel-gruppe > summary .offen-zahl { opacity: 0.6; font-variant-numeric: tabular-nums; }
.kachel-gruppe > summary .gewaehlt {
  color: var(--accent-text); background: var(--accent);
  border-radius: 999px; padding: 0.05rem 0.5rem;
}
.kachel-gruppe[open] > .kacheln { padding-bottom: 0.5rem; }
.kacheln { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.kachel {
  display: inline-flex; align-items: baseline; gap: 0.35rem;
  padding: 0.3rem 0.65rem; border-radius: 999px; font-size: 0.83rem;
  border: 1px solid var(--border); background: var(--card); color: var(--text);
  cursor: pointer; width: auto; margin: 0;
}
.kachel { transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease; }
.kachel:hover { background: var(--bg); border-color: var(--accent); }
.kachel:active { transform: scale(0.96); }
.kachel.aktiv { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.kachel .n { font-size: 0.74rem; opacity: 0.7; font-variant-numeric: tabular-nums; }
.kachel.leer { opacity: 0.45; }
.kachel-mehr { background: transparent; border-style: dashed; }

/* Tippfeld einer suchbaren Kachelgruppe — sieht aus wie eine Kachel, damit die
   Zeile ruhig bleibt, verhaelt sich aber wie ein Eingabefeld. */
.kachel-suche {
  padding: 0.3rem 0.7rem; border-radius: 999px; font-size: 0.83rem;
  border: 1px dashed var(--border); background: var(--bg); color: var(--text);
  width: 9.5rem; margin: 0; flex: 0 0 auto;
}
.kachel-suche:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-style: solid; }
.kachel-leermeldung { font-size: 0.8rem; color: var(--muted); align-self: center; }

/* --- Frist-Ampel --- */
.frist-warn { color: var(--warn-text); font-weight: 600; }
.frist-eilig { color: var(--danger); font-weight: 700; }
.frist-weg { color: var(--muted); text-decoration: line-through; }