/* Rahmen für übernommene Live-Seiten (Test, Spiele, Bibliothek) im Creme-System.
   Wird nach app.css und jjm-design.css geladen und ändert nur Gestaltung, keine Inhalte. */

/* app.css verweist absolut auf /fonts/. Hier der relative Pfad für Gewicht 800. */
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/nunito-latin-800.woff2") format("woff2");
}

/* Zähler in der neuen Kopfzeile */
.frame-chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px; color: var(--ink); background: var(--paper); font-size: .84rem; white-space: nowrap; }
.frame-chip b { font-weight: 900; }

/* Große Flächen cremefarben statt blau. Blau bleibt Akzent, Gelb markiert das Aktive. */
.frame-page .play-hero,
.frame-page .library-hero,
.frame-page .mini-game-heading { border-bottom: 1px solid var(--line); color: var(--ink); background: var(--cream-panel); }
.frame-page .quiz-runner-wrap { border-block: 1px solid var(--line); background: var(--cream-deep); }
.frame-page .play-hero .eyebrow,
.frame-page .library-hero .eyebrow,
.frame-page .mini-game-heading .eyebrow { color: var(--blue); }
.frame-page .library-hero > div > p:not(.eyebrow),
.frame-page .play-hero > div > p:not(.eyebrow),
.frame-page .mini-game-heading p:not(.eyebrow),
.frame-page .filter-hint { color: var(--muted); }

.frame-page .filter-button,
.frame-page .game-tab { border: 2px solid var(--line); color: var(--ink); background: var(--paper); }
.frame-page .filter-button:hover,
.frame-page .game-tab:hover { border-color: var(--blue); color: var(--blue); }
.frame-page .filter-button.active,
.frame-page .game-tab.active { border-color: #e0a800; color: var(--ink); background: var(--yellow); box-shadow: 0 3px 0 #e0a800; }

.frame-page .library-search { border: 2px solid var(--line); box-shadow: 0 5px 0 var(--line); }
.frame-page .library-search:focus-within { border-color: var(--blue); box-shadow: 0 5px 0 var(--blue-soft); }

.frame-page .catalog-card,
.frame-page .play-card { border-radius: 24px; }

/* Testseite im Lektionsrahmen */
.frame-test.level-test-page { background: var(--cream); }
.frame-test .frame-main { width: min(100% - 32px, 980px); padding-top: 34px; }
.frame-test .frame-badge b { font-weight: 900; }

@media (max-width: 650px) {
  .frame-chip { padding: 6px 10px; font-size: .76rem; }
  .frame-test .frame-main { padding-top: 22px; }
}

/* Sprungziel unter der klebenden Kopfzeile */
.frame-play .quiz-runner-wrap, .frame-play [data-games-level] { scroll-margin-top: 96px; }