/* DE: Das Klassenregal (ADR 0100), Kinderseite. Große Trefferflächen, wenige Wörter, ein Bild je Karte — die
   Zielgruppe sind teils Leseanfänger und Kinder mit Deutsch als Zweitsprache. Die Werkzeuge stehen als Verben
   untereinander, immer in derselben Reihenfolge: ein Kind lernt die Karte einmal.

   „Heute" ist eine Hervorhebung, keine Sperre — deshalb Rahmen und Fähnchen statt eines gesperrten Aussehens
   der übrigen Karten. Der Zustand hängt nie an der Farbe allein: das Fähnchen trägt den Text (WCAG 2.2 AA).
   EN: The class shelf, child side. Large hit areas, few words, one picture per card — the audience includes
   beginning readers and second-language learners. „Today" is an emphasis, not a lock, so it is a border plus a
   labelled flag rather than the other cards looking disabled; never colour alone. */

.shelf { margin-block-start: var(--sp-lg); }
.shelf__head { margin-block-end: var(--sp-lg); }
.shelf__class { color: var(--text-muted); font-weight: 700; margin: 0 0 var(--sp-2xs); }
.shelf__lead { color: var(--text-muted); margin-block-start: var(--sp-xs); }

.shelf__cards { list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: var(--sp-lg); }

.shelf-card { position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg, var(--radius-md)); box-shadow: var(--shadow-sm); overflow: hidden; }
.shelf-card--today { border: 2px solid var(--accent, var(--brand)); box-shadow: var(--shadow-md, var(--shadow-sm)); }
.shelf-card__today { position: absolute; inset-block-start: 0; inset-inline-end: 0;
  padding: var(--sp-2xs) var(--sp-md); border-end-start-radius: var(--radius-md);
  background: var(--accent, var(--brand)); color: var(--text-on-brand, var(--surface));
  font-family: var(--font-display); font-weight: 900; font-size: var(--step--1); }

.shelf-card__head { display: flex; align-items: center; gap: var(--sp-md); padding: var(--sp-lg) var(--sp-md); }
.shelf-card__pic { inline-size: 4.5rem; block-size: 4.5rem; flex-shrink: 0; border-radius: var(--radius-md);
  background: var(--surface-2); display: grid; place-items: center; overflow: hidden; }
.shelf-card__pic img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.shelf-card__title { display: grid; gap: var(--sp-2xs); min-inline-size: 0; }
.shelf-card__name { font-family: var(--font-display); font-weight: 900; font-size: var(--step-1);
  line-height: 1.15; overflow-wrap: break-word; }
.shelf-card__count { color: var(--text-muted); }

/* Ein Verb ist eine ganze Zeile: mit dem Finger am Smartboard so gut zu treffen wie mit der Maus. */
.shelf-card__tools { display: grid; gap: var(--sp-xs); padding: 0 var(--sp-md) var(--sp-md); }
.shelf-card__tool { display: flex; align-items: center; gap: var(--sp-sm); min-block-size: 3.5rem;
  padding: var(--sp-sm) var(--sp-md); border-radius: var(--radius-md); background: var(--surface-2);
  color: var(--text); text-decoration: none; }
.shelf-card__tool:hover { background: var(--brand-surface, var(--surface-2)); }
.shelf-card__tool:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.shelf-card__verb { font-family: var(--font-display); font-weight: 800; font-size: var(--step-0); }
.shelf-card__arrow { margin-inline-start: auto; color: var(--text-muted); }

.shelf-empty { color: var(--text-muted); max-width: 60ch; font-size: var(--step-0); }

/* „Immer da" — damit ein leeres Regal keine Sackgasse ist. */
.shelf__always { margin-block-start: var(--sp-xl); padding-block-start: var(--sp-md);
  border-block-start: 1px solid var(--border); }
.shelf__always-title { font-size: var(--step--1); color: var(--text-muted); margin: 0 0 var(--sp-sm); }
.shelf__always-links { display: flex; flex-wrap: wrap; gap: var(--sp-sm); margin: 0; }

/* DE: „Ins Regal legen" im Werkzeug (ADR 0100). Eine Klappe statt eines Dialogs: ohne JavaScript bedienbar,
   tastaturfähig, kein Fokus-Fang. Sie sitzt in der Werkzeugleiste und soll dort nicht dominieren — die
   Lehrkraft arbeitet gerade an etwas anderem.
   EN: „Put on the shelf" inside a tool. A fold rather than a dialog: usable without JavaScript, keyboard-
   operable, no focus trap. It sits in the toolbar and should not dominate it — the teacher is doing something
   else at that moment. */
.put-on-shelf { display: inline-block; }
/* Geöffnet nimmt die Klappe eine EIGENE Zeile: in einer flex-Werkzeugleiste schöbe das aufgeklappte Blatt sonst
   die übrigen Knöpfe auseinander, und die Lehrkraft verliert die Leiste, an der sie gerade gearbeitet hat. */
.put-on-shelf[open] { flex-basis: 100%; }
.put-on-shelf__summary { display: inline-flex; align-items: center; cursor: pointer; list-style: none; }
.put-on-shelf__summary::-webkit-details-marker { display: none; }
.put-on-shelf__form { display: grid; gap: var(--sp-sm); margin-block-start: var(--sp-sm);
  padding: var(--sp-md); border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); box-shadow: var(--shadow-sm); max-inline-size: 26rem; }
.put-on-shelf__classes { border: 0; margin: 0; padding: 0; display: grid; gap: var(--sp-2xs); }
.put-on-shelf__classes legend { font-weight: 700; padding: 0 0 var(--sp-2xs); }
.put-on-shelf__class { display: flex; align-items: center; gap: var(--sp-xs); }
.put-on-shelf__today { display: flex; align-items: flex-start; gap: var(--sp-xs); }
/* Dass die Hervorhebung nichts sperrt, gehört dazugesagt — sonst klingt „Heute" nach Zwang. */
.put-on-shelf__note { display: block; color: var(--text-muted); font-size: var(--step--1); font-weight: 400; }

/* DE: Das Regal verwalten (ADR 0100). Eine LESBARE Liste: Reihenfolge, „Heute" und die freigegebenen Verben
   stehen da, bevor man etwas anklickt — eine Kollegin, die die Stunde übernimmt, soll hier sehen, was läuft.
   Knöpfe statt Drag-and-drop: ohne JavaScript bedienbar und mit der Tastatur (WCAG 2.2 AA).
   EN: Managing the shelf. A READABLE list — order, highlight and released verbs before anything is clicked, so
   a colleague taking over the lesson sees what is running. Buttons, not drag-and-drop. */
.shelf-manage { margin-block-start: var(--sp-lg); }
.shelf-manage__lead { color: var(--text-muted); margin-block-start: var(--sp-2xs); }
.shelf-manage__empty { color: var(--text-muted); max-width: 60ch; }
.shelf-manage__rows { list-style: none; padding: 0; margin: var(--sp-lg) 0 0;
  border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.shelf-manage__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-md);
  padding: var(--sp-sm) var(--sp-md); border-block-end: 1px solid var(--border); background: var(--surface); }
.shelf-manage__row:last-child { border-block-end: 0; }
.shelf-manage__pic { inline-size: 2.9rem; block-size: 2.9rem; flex-shrink: 0; border-radius: var(--radius-sm);
  background: var(--surface-2); display: grid; place-items: center; overflow: hidden; }
.shelf-manage__pic img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.shelf-manage__what { display: grid; gap: 2px; min-inline-size: 11rem; }
.shelf-manage__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-xs);
  font-family: var(--font-display); font-weight: 800; }
.shelf-manage__count { color: var(--text-muted); font-weight: 400; font-size: var(--step--1); }
/* Der Verfügbarkeits-Hinweis erscheint nur bei Schwund. Er soll auffallen, aber nicht lauter sein als der
   Kartenname — die Karte ist die Sache, der Hinweis die Fußnote. Getragen wird er vom TEXT, nicht von der
   Farbe (WCAG 2.2 AA): „5 von 6 Wörtern noch da" steht auch ohne jede Farbwahrnehmung da. */
.shelf-manage__availability { color: var(--text-muted); font-weight: 400; font-size: var(--step--1);
  font-style: italic; }
/* Die Hervorhebung trägt ihren Text — nie Farbe allein (WCAG 2.2 AA). */
.shelf-manage__today { padding: 0 var(--sp-sm); border-radius: var(--radius-pill, 999px);
  background: var(--accent, var(--brand)); color: var(--text-on-brand, var(--surface));
  font-size: var(--step--1); font-weight: 900; }
.shelf-manage__tools { color: var(--text-muted); font-size: var(--step--1); }
.shelf-manage__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2xs); margin-inline-start: auto; }
.shelf-manage__actions form { margin: 0; }
.shelf-manage__print { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-sm);
  margin-block-start: var(--sp-lg); }
.shelf-manage__print-note { color: var(--text-muted); font-size: var(--step--1); }

/* DE: Stationskarten. Die Seite IST der Druck — sie zeigt am Schirm, was aufs Papier geht. Gestrichelte
   Schnittkanten und zwei Kärtchen je Zeile: ein Blatt trägt vier, das ist die übliche Menge für einen
   Stationenlauf.
   EN: Station cards. The page IS the print. Dashed cut edges, two per row — a sheet carries four, the usual
   number for a round of stations. */
.station-cards { margin-block-start: var(--sp-lg); }
.station-cards__lead, .station-cards__empty { color: var(--text-muted); max-width: 60ch; }
.station-cards__sheet { list-style: none; padding: 0; margin: var(--sp-lg) 0 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 0;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.station-card { display: flex; flex-direction: column; gap: var(--sp-md); justify-content: space-between;
  min-block-size: 11rem; padding: var(--sp-md);
  border-inline-end: 1px dashed var(--border); border-block-end: 1px dashed var(--border); }
.station-card__head { display: flex; align-items: flex-start; gap: var(--sp-sm); }
.station-card__pic { inline-size: 3.2rem; block-size: 3.2rem; flex-shrink: 0; border-radius: var(--radius-sm);
  background: var(--surface-2); display: grid; place-items: center; overflow: hidden; }
.station-card__pic img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.station-card__what { display: grid; gap: var(--sp-2xs); }
.station-card__name { font-family: var(--font-display); font-weight: 900; font-size: var(--step-0); }
.station-card__count { color: var(--text-muted); font-size: var(--step--1); }
.station-card__foot { display: flex; align-items: flex-end; gap: var(--sp-sm); }
.station-card__todo { display: grid; gap: var(--sp-2xs); flex: 1; min-inline-size: 0; }
.station-card__todo-label { color: var(--text-muted); font-size: var(--step--2); font-weight: 700; }
.station-card__verb { font-family: var(--font-display); font-weight: 800; }
.station-card__qr { inline-size: 4.5rem; block-size: 4.5rem; flex-shrink: 0; }
.station-card__qr svg { inline-size: 100%; block-size: 100%; }

@media print {
  /* Auf Papier trägt der Bogen sich selbst: Kopf und Rückweg sind Bildschirmsache. */
  .station-cards__head { display: none; }
  .station-cards__sheet { border: 0; }
  .station-card { break-inside: avoid; border-color: #999; }
}