/* Arbeitsblätter: Blattwerk's sheet layout (app.css, unchanged) in the Ton colours.
   Loaded after app.css and site.css. The sheet itself (paper, tasks, key, A4 print) keeps
   Blattwerk's layout; only its colours come from Ton. Everything around it is Ton. */

:root {
  --bg: var(--ton);
  --panel: var(--flaeche);
  --ink: var(--text);
  --ink-2: var(--text-blass);
  --ink-3: var(--text-blass);
  --line: var(--rand);
  --line-2: var(--rand);
  --accent: var(--terra);
  --accent-soft: var(--moos-hell);
  --warn: var(--terra);
  --ok: var(--moos);
  --sans: var(--font-sans);
  --mono: var(--font-mono);
}
/* app.css redefines its own dark values; send them back to Ton. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--ton); --panel: var(--flaeche); --ink: var(--text); --ink-2: var(--text-blass); --ink-3: var(--text-blass);
    --line: var(--rand); --line-2: var(--rand); --accent: var(--terra); --accent-soft: var(--moos-hell); --warn: var(--terra); --ok: var(--moos);
  }
}

body { font: 17px/1.55 var(--font-sans); background: var(--ton); color: var(--text); }
main { max-width: var(--breite); padding: 0 var(--s-5); }
.fuss { max-width: none; padding-left: 0; padding-right: 0; font-size: 14px; }

/* ---- library chrome ---- */
.suche { margin-top: 28px; }
.suche input {
  width: 100%; max-width: 560px; min-height: 52px; padding: 0 22px; border: 0; border-radius: var(--r-pille);
  background: var(--ton); box-shadow: var(--clay-mulde); color: var(--text); font: 400 16px var(--font-sans);
}
.suche input:focus { outline: 2px solid var(--terra); outline-offset: 2px; }
.gradebar { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 10px; padding: 22px 0 0; border: 0; background: none; }
.blatt-ansicht .seitenkopf, .blatt-ansicht .leise { display: none; }
.gradebar .filter { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.gradebar .lab { width: 56px; flex: none; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-blass); }
.gradebar button {
  min-width: 40px; min-height: 36px; padding: 0 13px; border: 0; border-radius: var(--r-pille);
  background: transparent; color: var(--text-blass); font: 500 14px var(--font-sans); cursor: pointer;
}
.gradebar button:hover { color: var(--text); border: 0; }
.gradebar button[aria-pressed="true"] { background: var(--flaeche); color: var(--text); font-weight: 600; box-shadow: var(--clay-karte); }
.treffer { margin: 28px 0 16px; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.03em; color: var(--text-blass); }

.cards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.card, .card.group {
  background: var(--flaeche); border: 0; border-radius: var(--r-innen); box-shadow: var(--clay-karte); padding: 18px 20px;
}
.card:hover, .card.group:hover { border: 0; transform: none; }
.card.group b, .card.group .gt { font-size: 17px; font-weight: 600; color: var(--text); }
.card.group .gt:hover { color: var(--terra-text); }
.card .sub { color: var(--text-blass); font-size: 14px; }
.card .chips { gap: 6px; }
.card .chip, .chip { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.03em; border: 0; padding: 3px 10px; border-radius: var(--r-pille); background: var(--ton); color: var(--text-blass); box-shadow: none; min-height: 0; }
.sheetlinks { border-top: 1px solid var(--rand); gap: 6px; }
.sl, .sl:hover { border: 0; border-radius: var(--r-pille); background: var(--ton); color: var(--text-blass); font-size: 13px; padding: 5px 12px; box-shadow: var(--clay-mulde); }
.sl:hover { color: var(--terra-text); }
.sl.ex, .sl.ex:hover { background: var(--terra-hell); color: var(--terra-text); box-shadow: none; font-weight: 600; }
.more { margin-top: 28px; }
.empty { padding: 56px 0; color: var(--text-blass); }

/* ---- sheet view chrome ---- */
.crumb { margin: 28px 0 12px; font-size: 14px; color: var(--text-blass); }
.crumb a { color: var(--text-blass); }
.crumb a:hover { color: var(--terra-text); }
.topicnav { gap: 8px; color: var(--text-blass); }
.toolbar { background: none; border: 0; padding: 0; margin: 0 auto 18px; max-width: 880px; }
.haupt.klein { min-height: 44px; padding: 0 20px; font-size: 15px; }
.sheet { background: var(--flaeche); border: 0; border-radius: var(--r-karte); box-shadow: var(--clay-karte); }
.score { background: var(--moos-hell); border: 0; border-radius: var(--r-innen); color: var(--text); }
input.ans, textarea.ans { background: var(--ton); border-color: var(--rand); }
input.ans:focus { outline-color: var(--terra); }
.appzeile {
  max-width: 880px; margin: 28px auto 0; padding: 16px 20px; border-radius: var(--r-mulde); background: var(--ton); box-shadow: var(--clay-mulde);
  font-size: 15px; color: var(--text-blass);
}
.appzeile a { color: var(--terra-text); }

/* ---- topic pages ---- */
.thema-seite .sheet { margin: 0; max-width: 880px; }
.thema-seite .sheetlinks { margin-top: 22px; }

@media (max-width: 700px) {
  main { padding: 0 16px; }
  .gradebar .filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .gradebar .filter::-webkit-scrollbar { display: none; }
  .gradebar .lab { width: auto; margin-right: 4px; }
  .card, .card.group, .sheet { box-shadow: 0 8px 16px -10px rgba(92,64,44,0.35), inset 0 1px 0 rgba(255,255,255,0.6); }
}

@media print {
  .suche, .gradebar, .treffer, .appzeile, .kopf, .fuss { display: none !important; }
  main { padding: 0; }
  .sheet { box-shadow: none; background: #fff; border-radius: 0; }
}

/* ---- guided finder: Klasse → Fach → Ziel → Themen ---- */
.suche { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.suche input { flex: 1 1 280px; }
.tief .seitenkopf h1 { font-size: 34px; }
.tief .seitenkopf .unter { display: none; }
.frage { margin: 40px 0 20px; }
.frage h2 { font-size: 34px; line-height: 1.1; letter-spacing: -0.025em; }
.frage p { margin-top: 8px; color: var(--text-blass); }
.pfad { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 28px; }
.pfad-lab { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-blass); margin-right: 4px; }
.pfad-a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: var(--r-pille); background: var(--terra-hell); color: var(--terra-text); text-decoration: none; font-size: 14px; font-weight: 500; }
.pfad-a:hover { text-decoration: underline; }
.weiter-zeile { margin-top: 28px; color: var(--text-blass); font-size: 15px; }
@media (max-width: 700px) {
  .frage h2 { font-size: 27px; }
  .frage { margin-top: 28px; }
}

/* ---- print: watermark + site in the running footer ---- */
.wasserzeichen { display: none; }
@media print {
  .wasserzeichen {
    display: flex; flex-direction: column; align-items: center; gap: 6mm;
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-28deg);
    opacity: 0.06; pointer-events: none; z-index: 0;
    font: 600 28pt/1 var(--font-sans); letter-spacing: -0.01em; color: #000;
  }
  .wasserzeichen img { width: 40mm; height: 40mm; filter: grayscale(1); }
  .sheet { position: relative; z-index: 1; background: transparent; }
  .runfoot span { font-weight: 600; color: #444; letter-spacing: 0.06em; }
}
@media print {
  html, body { background: #fff !important; }
  /* Chrome draws this in the page margin of every page; other browsers fall back to Blattwerk's running footer. */
  @page {
    @bottom-left { content: "zirkelschlag.app · Arbeitsblätter mit Lösungen"; font: 7.5pt "Geist", sans-serif; color: #666; }
    @bottom-right { content: counter(page) " / " counter(pages); font: 7.5pt "Geist", sans-serif; color: #666; }
  }
}
@media print { .runfoot { display: none !important; } }