/* Suche und Filter der Übersicht (Alex, 29.09.2026: „durchsuchbar, Fachtag, Klassentag“; gebaut von Claude).
   Zweite Zeile im Kopf: Suchfeld, Klasse 1–4, Fach Mathe/Deutsch. Seit 29.09.2026 nachmittags (Alex: „nicht nur grau
   anzeigen, sondern nicht anzeigen“) verschwinden unpassende Kacheln und leere Abschnitte ganz. Das feste Raster der
   ungefilterten Übersicht gilt dann nicht mehr: Die Abschnitte stehen als Kästen nebeneinander und brechen um, jede
   Kachel hat dieselbe Breite, die Seite darf scrollen.
   Eigene Datei, damit styles.css (Raster, Szenen, „Bald neu“) unabhängig weiterwachsen kann. */

.topbar { row-gap: clamp(6px, 1vh, 10px); }

.finder {
  --ctl: clamp(42px, 5.4vh, 54px);
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px clamp(8px, 1vw, 14px);
  min-width: 0;
  font-size: clamp(1rem, 1.9vh, 1.2rem);
}

/* ---------------------------------------------------------------- Suchfeld */
.finder-search {
  position: relative;
  flex: 1 1 220px;
  min-width: 0;
  max-width: 440px;
}
.finder-search > svg {
  position: absolute;
  top: 50%;
  left: .85em;
  width: 1.2em;
  height: 1.2em;
  color: var(--muted);
  transform: translateY(-50%);
  pointer-events: none;
}
.finder-q {
  width: 100%;
  height: var(--ctl);
  margin: 0;
  padding: 0 2.7em 0 2.5em;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-weight: 500;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s;
}
.finder-q::placeholder { color: #737b8f; opacity: 1; }
.finder-q:placeholder-shown { padding-right: 1em; }
.finder-q:hover { border-color: #cfd4df; }
.finder-q::-webkit-search-cancel-button { display: none; -webkit-appearance: none; }
.finder-q::-webkit-search-decoration { -webkit-appearance: none; }

/* Eigenes Kreuz statt des winzigen Browser-Kreuzes, damit es sich auf der Tafel treffen lässt */
.finder-clear {
  position: absolute;
  top: 50%;
  right: 4px;
  display: grid;
  place-items: center;
  width: calc(var(--ctl) - 8px);
  height: calc(var(--ctl) - 8px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--soft);
  color: var(--ink);
  cursor: pointer;
  transform: translateY(-50%);
  touch-action: manipulation;
}
.finder-clear[hidden] { display: none; }
.finder-clear svg { width: 50%; height: 50%; }
.finder-clear:hover { background: #e4e6ee; }

/* ---------------------------------------------------------------- Klasse und Fach */
.seg {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 2px;
  height: var(--ctl);
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
}
.seg-label {
  padding: 0 .45em 0 .75em;
  color: var(--muted);
  font-size: .92em;
  font-weight: 600;
  white-space: nowrap;
}
.seg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  height: 100%;
  min-width: calc(var(--ctl) - 8px);
  margin: 0;
  padding: 0 .85em;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color .15s, color .15s;
}
/* Ziffern in der Tafelschrift; Baloo sitzt optisch hoch */
.seg-btn.is-num { padding: .14em 0 0; font-family: var(--font-display); font-size: 1.22em; font-weight: 800; }
.seg-btn:hover { background: var(--soft); }
.seg-btn[aria-pressed="true"] { background: var(--ink); color: #fff; }
/* Punkt wie vor den Abschnittsüberschriften */
.seg-dot {
  flex: none;
  width: .62em;
  height: .62em;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--dot);
}
.seg-btn[aria-pressed="true"] .seg-dot { border-color: #fff; }

.finder-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------- Kacheln */
.tile { transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out), opacity .25s ease, filter .25s ease; }
.shelf.is-filtered .tile.is-out,
.shelf.is-filtered .group.is-out { display: none; }

/* Gefiltert (Tablet, Tafel): Abschnitte als Kästen, Kacheln gleich breit, Bühne 4:3 */
@media (min-width: 641px) {
  .page:has(.shelf.is-filtered) { height: auto; min-height: 100vh; min-height: 100dvh; }
  .shelf.is-filtered {
    --tw: clamp(190px, calc((100vw - 2 * clamp(10px, 1.6vw, 22px) - 5 * var(--gap)) / 6), 320px);
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
    min-height: 40vh;
  }
  /* --k = sichtbare Kacheln im Abschnitt (suche.js); so ist der Kasten genau so breit wie seine Kacheln */
  .shelf.is-filtered .group {
    grid-template-columns: repeat(auto-fill, var(--tw));
    grid-template-rows: none;
    grid-auto-rows: auto;
    align-content: start;
    width: calc(var(--k, 1) * var(--tw) + (var(--k, 1) - 1) * var(--gap));
    max-width: 100%;
    grid-column: auto;
    grid-row: auto;
  }
  .shelf.is-filtered .group > .tile { grid-column: auto; grid-row: auto; grid-template-rows: auto auto; }
  .shelf.is-filtered .stage { aspect-ratio: 4 / 3; }
  .shelf.is-filtered .tile-title { font-size: clamp(1.25rem, calc(var(--tw) / 9), 1.9rem); }
}

/* Fach und Klasse auf der Kachel: nur in der Handy-Liste, dort ist Platz */
.tile-tags { display: none; grid-column: 1 / -1; color: var(--tone-deep); font-size: .95rem; font-weight: 700; }

/* ---------------------------------------------------------------- Nichts gefunden */
.shelf { position: relative; }
.finder-empty {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  width: min(92%, 480px);
  padding: 22px 26px 24px;
  border: 2px solid transparent;
  border-image: var(--frame) 34 fill / 24px / 0 stretch;
  border-radius: 24px;
  box-shadow: var(--shadow-lift);
  text-align: center;
  transform: translate(-50%, -50%);
}
.finder-empty[hidden] { display: none; }
.finder-empty p { margin: 0 0 16px; font-size: clamp(1.05rem, 2.2vh, 1.3rem); line-height: 1.4; text-wrap: balance; }
.finder-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.finder-reset {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 1.1em;
  border: 2.15px solid var(--ink);
  border-radius: 999px;
  background: var(--rose);
  box-shadow: inset -4px -5px 0 rgba(28, 34, 48, .13);
  color: #fff;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.finder-reset.is-soft { background: #fff; color: var(--ink); box-shadow: none; }
.finder-reset[hidden] { display: none; }
.finder-reset:active { transform: scale(.97); }

/* ---------------------------------------------------------------- Größen */
/* Tablet hoch: alles in eine Zeile, dafür kleiner */
@media (min-width: 641px) and (max-aspect-ratio: 11/10) {
  .finder { --ctl: 46px; font-size: 1rem; }
  .seg-btn { padding: 0 .7em; }
  /* Wort „Fach“ weg, die Punkte reichen; so bleibt die Suchzeile bei 768 px einzeilig */
  #f-fach { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@media (max-width: 640px) {
  .finder { --ctl: 46px; justify-content: flex-start; font-size: 1rem; }
  .finder-search { flex-basis: 100%; max-width: none; }
  .finder-empty { position: static; order: -1; width: auto; transform: none; }
  .tile-tags { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .tile, .group > .group-title, .seg-btn, .finder-q { transition: none; }
}

/* Fach ohne sichtbare Angebote: hidden muss die Flex-Regel überstimmen. */
.seg-btn[hidden] { display: none; }