/* filme.css — Filmregal „Gezielt zur Schulaufgabe“ (lomome.de/schulaufgabe/), 13.10.2026.
   Ergänzt stil.css, überschreibt nichts. Präfix .f */

.fSchalter { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; margin: 1.5rem 0 0.5rem; }
.fReiter { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; }
.fReiter button {
  font: 600 0.95rem var(--font-body);
  color: var(--creme);
  background: transparent;
  border: 1px solid rgba(245,245,220,0.35);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  cursor: pointer;
}
.fReiter button[aria-pressed="true"] { background: var(--marken); border-color: var(--marken); color: var(--tafel); }
.fReiter button:focus-visible { outline: 2px solid var(--creme); outline-offset: 2px; }

.fListe { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 0.9rem; margin: 0.6rem 0 1.8rem; }
.fEintrag {
  display: flex; gap: 0.9rem; align-items: flex-start;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(245,245,220,0.14);
  border-radius: 14px;
  color: var(--creme);
  text-decoration: none;
  min-width: 0;
}
.fEintrag:hover, .fEintrag:focus-visible { border-color: var(--marken); }
.fEintrag img { width: 72px; height: 72px; border-radius: 12px; flex: none; object-fit: cover; }
.fText { display: grid; gap: 0.25rem; min-width: 0; }
.fProblem { font-weight: 700; line-height: 1.35; }
.fTitel { font-size: 0.95rem; opacity: 0.85; }
.fMeta { font: 0.8rem var(--font-label); opacity: 0.6; }

/* Mit Skript: nur eine Ansicht, nur eine Sprache je Eintrag */
.fMitSkript .fAnsicht[hidden], .fMitSkript .fEintrag[hidden], .fMitSkript .fProblem[hidden] { display: none; }
.fMitSkript .fOhneSkript { display: none; }

.fFilm { margin: 1rem 0 2rem; }
.fZitat { font-weight: 700; }
.fVideo {
  display: block;
  width: min(100%, 22rem);
  height: auto;
  aspect-ratio: 9 / 16;
  max-width: 100%;
  border-radius: 18px;
  background: #1f2f26;
  margin: 1rem 0 1.4rem;
}
.fSchritte { margin: 0; padding-left: 1.3rem; display: grid; gap: 0.35rem; }
.fKlein { font-size: 0.9rem; opacity: 0.75; }