/* DE: Die Gebärden-Wortseite: die Videofläche (Words::SignVideoComponent) und der zweispaltige Aufbau.
       Eigenes Blatt und nicht ans Ende von `learner-word.css` gehängt: die Stile gehören zu genau einer
       Komponente, und das Wort-Blatt stand bereits an seiner Größengrenze. Beim Anhängen hätte der
       Größenwächter zu Recht angeschlagen — die richtige Antwort darauf ist eine eigene Einheit, nicht ein
       höheres Limit.
   EN: The video area of a sign word page (Words::SignVideoComponent). Its own sheet rather than appended to
       `learner-word.css`: these styles belong to exactly one component, and the word sheet was already at its
       size limit. Appending would rightly have tripped the size guard — the answer to which is a separate
       unit, not a higher limit. */

/* DE: Die Videofläche einer Gebärde. Sie steht vor dem Glossenwort, also gleich unter der Brotkrume, und
       braucht dort Luft — sonst liest sich das Wort darunter als ihre Bildunterschrift.
   EN: A sign's video area. It sits before the gloss, right under the breadcrumb, and needs air there —
       otherwise the word below reads as its caption. */
.sign-video { margin-block: var(--sp-md, 1rem) var(--sp-lg, 1.5rem); }

/* DE: KEIN erzwungenes Seitenverhältnis. Der Entwurf nennt 4:3, weil eine gebärdende Person aufrecht und mit
       Raum neben den Händen im Bild steht — das ist die richtige Empfehlung für den Dreh. Es dem fertigen
       Video aufzuzwingen ist etwas anderes: die ersten Aufnahmen sind 16:9, und in einem 4:3-Rahmen wurden
       daraus schwarze Balken und ein kleines Bild in einer großen Fläche. An echten Daten gesehen, nicht am
       Entwurf. Ein Format gehört in die Aufnahmeregeln des Prüfkreises, nicht ins Stilblatt der Anzeige.
   EN: NO forced aspect ratio. The handoff names 4:3 because a signing person stands upright with room beside
       the hands — the right recommendation for the shoot. Forcing it on a finished video is another matter:
       the first recordings are 16:9, and inside a 4:3 frame that became black bars and a small picture in
       a large area. Seen against real data, not against the design. A format belongs in the circle's
       recording rules, not in the display's stylesheet. */
.sign-video__player {
  inline-size: 100%; max-inline-size: 40rem;
  border-radius: var(--radius-md, 1rem); background: var(--surface-2, #f2f2f2);
}

.sign-video__angles { margin-block-start: var(--sp-sm, .75rem); }
.sign-video__angles-label { margin: 0 0 .35rem; font-weight: 600; }
.sign-video__angles ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }

/* DE: 48 px Mindesthöhe (WCAG 2.2 AA, Zielgröße) — das hier bedient ein Kind, oft auf einem Telefon. */
.sign-video__angle {
  display: inline-flex; align-items: center; min-block-size: 48px; padding-inline: 1rem;
  border: 1px solid var(--border, #ccc); border-radius: 999px; text-decoration: none;
}
/* DE: Der laufende Winkel ist nicht nur farblich markiert (WCAG 1.4.1) — er trägt zusätzlich einen
       kräftigeren Rahmen und Fettung, und `aria-current` sagt es der Vorlesesoftware. */
.sign-video__angle[aria-current] {
  border-width: 2px; border-color: var(--text, #222); font-weight: 700;
  background: var(--brand-surface, #eaf5ee);
}
.sign-video__hint { margin-block-start: .4rem; font-size: var(--step--1, .9rem); color: var(--text-muted, #666); }

/* DE: Ab einem breiten Bildschirm zwei Spalten: links die Gebärde, die stehen bleibt, rechts die
       Beschreibung, die daran vorbeiscrollt. Der Grund ist fachlich — wer „Handform: flache Hand" liest,
       will die Gebärde dabei sehen. Prüft man eine Beschreibung gegen die Erinnerung an ein Video, prüft man
       die Erinnerung.

       **`minmax(0, …)` an BEIDEN Spuren, und das ist kein Zierrat.** Eine Grid-Spur ist standardmäßig
       mindestens so breit wie ihr breitestes unteilbares Kind (`min-content`). Ein Videorahmen, ein langer
       Katalogschlüssel oder ein Wort ohne Trennmöglichkeit sprengt damit die 420 px und schiebt die rechte
       Spalte über den Rand — der Handoff warnt ausdrücklich davor. `minmax(0, …)` erlaubt der Spur zu
       schrumpfen; ohne das ist die Angabe eine Bitte, keine Grenze.

       Umbruch bei 900 px: darunter stapeln sich beide Spalten, Video zuerst — also genau die einspaltige
       Fassung, die ein Telefon ohnehin bekommt.
   EN: From a wide screen on, two columns: the sign on the left staying put, the description on the right
       scrolling past it. The reason is professional — reading "handshape: flat hand" you want to see the sign
       at the same time; checking a description against the memory of a video checks the memory.
       `minmax(0, …)` on BOTH tracks is not decoration: a grid track defaults to at least its widest
       unbreakable child (`min-content`), so a video frame or an unbreakable word blows the 420px and pushes
       the right column over the edge — the handoff warns about exactly this. `minmax(0, …)` lets the track
       shrink; without it the figure is a request, not a limit. Below 900px both columns stack, video first —
       the single-column version a phone gets anyway. */
@media (min-width: 900px) {
  /* DE: `:has(.sign-video__player)` — zwei Spalten NUR, wenn es wirklich einen Spieler gibt. Eine klebende
         420-px-Spalte neben einem einzeiligen „noch nicht aufgenommen" hat nichts zum Kleben; sie ließe eine
         große leere Fläche stehen, und die liest sich als kaputt. Die Regel folgt damit dem Inhalt statt
         einer Annahme über ihn — und sie schaltet sich von selbst ein, sobald die erste Aufnahme da ist.
     EN: `:has(.sign-video__player)` — two columns ONLY when a player really exists. A sticky 420px column
         beside a one-line "not filmed yet" has nothing to stick; it would leave a large empty area that
         reads as broken. The rule follows the content instead of an assumption about it, and switches
         itself on the day the first recording lands. */
  .word--sign:has(.sign-video__player) {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: var(--sp-lg, 1.5rem);
    align-items: start;
  }

  /* Die Brotkrume gehört über beides — sie beschreibt die ganze Seite, nicht eine Spalte. */
  .word--sign:has(.sign-video__player) > .breadcrumb { grid-column: 1 / -1; grid-row: 1; }

  /* DE: Die Videospalte muss über ALLE Zeilen reichen — erst dadurch hat `sticky` eine Strecke zum Kleben.
         `grid-row: 2 / -1` tut das NICHT: `-1` bezeichnet die letzte Linie des EXPLIZITEN Rasters, und ein
         solches gibt es hier nicht — alle Zeilen entstehen implizit. Im Browser gemessen war die Folge eine
         übergroße erste Zeile, der Eintrag rechts eine Zeile zu tief und daneben eine Lücke: genau das, was
         auf der Seite komisch aussah. Aufgefallen ist es dem Owner, nicht mir — ich hatte den Aufbau mit
         eingespeistem Spieler geprüft, aber nie mit einer echten Seite daneben.

         `span 60` reicht in die impliziten Zeilen. Die Zahl ist großzügig, und leere Zeilen sind durch
         `grid-auto-rows: min-content` null Pixel hoch — sie kostet also nichts. Eine Krücke bleibt es: die
         saubere Lösung wäre ein Umschlag um den Eintrag, und der gehört zu 4b, sobald dessen übrige Inhalte
         dazukommen.
     EN: The video column must reach across ALL rows or `sticky` has no travel. `grid-row: 2 / -1` does not:
         `-1` names the last line of the EXPLICIT grid, and there is none here — every row is implicit.
         Measured in the browser: an oversized first row, the record one row too low, and a gap beside it —
         exactly what looked odd. The owner spotted it, not me: I had checked the layout with an injected
         player but never against a real page. `span 60` reaches into the implicit rows; empty rows are
         zero-height via `grid-auto-rows: min-content`, so it costs nothing. Still a crutch — the clean answer
         is a wrapper around the record, and that belongs with 4b's remaining content. */
  .word--sign:has(.sign-video__player) { grid-auto-rows: min-content; }

  /* DE: Im Raster macht `gap` die Abstände. Alles, was seine eigenen Außenabstände aus dem einspaltigen
         Fließ-Layout mitbringt, addiert sie dazu — gemessen wurden so aus 24 px Rasterabstand rund 55 px
         Lücke, und „Merken" und „Ich wünsche mir ein Bild" schwammen allein im Weißraum.
     EN: In the grid, `gap` makes the spacing. Anything carrying its own margins over from the single-column
         flow layout adds them on top — measured, a 24px gap became roughly 55px, leaving „keep" and „I'd like
         a picture" floating alone in white space. */
  .word--sign:has(.sign-video__player) > * { margin-block: 0; }
  /* Diese (0,2,0) genügt seit die Kartenregel Optik und Abstand trennt: der Abstand wiegt nur noch
     (0,0,2). Vorher stand hier ein Nachbau ihrer Ausschlussliste mit (0,5,2).
     EN: (0,2,0) suffices since the card rule split look from spacing; the spacing now weighs (0,0,2).
     A rebuild of its exclusion list at (0,5,2) used to stand here. */


  .word--sign:has(.sign-video__player) > .sign-video {
    grid-column: 1;
    grid-row: 2 / span 60;
    position: sticky;
    /* DE: Die Kopfleiste klebt selbst oben (z-index 200). Ohne ihren Platz klebte das Video 1 rem unter der
           Fensterkante — also unter ihr, und beim Scrollen wäre sein oberer Rand abgeschnitten. Genau so sah
           es aus. `--header-offset` steht in `base.css` neben der Leiste, die den Platz einnimmt.
       EN: The header sticks at the top itself (z-index 200). Without its room the video stuck 1rem below the
           viewport edge — i.e. underneath it, its top clipped while scrolling. That is exactly how it looked.
           `--header-offset` lives in `base.css` next to the bar that takes the room. */
    top: calc(var(--header-offset, 5rem) + var(--sp-md, 1rem));
  }

  .word--sign:has(.sign-video__player) > *:not(.breadcrumb):not(.sign-video) { grid-column: 2; }
}

/* DE: Der reservierte Block. Warnfarbe, aber KEIN Alarm-Ton: er meldet keinen Fehler, sondern eine
       Zuständigkeit. Deshalb ein ruhiger Rahmen statt eines Schreis — und nicht nur farblich unterschieden
       (WCAG 1.4.1), sondern mit eigener Überschrift und eigenem Satz. */
.reserved-circle {
  margin-block: var(--sp-lg, 1.5rem);
  padding: var(--sp-md, 1rem);
  /* DE: `--warn` und `--warn-surface` sind die Token, die es WIRKLICH gibt — und die Textfarbe ist `--text`,
         damit sie dem Thema folgt. Erste Fassung erfand `--warn-bg`/`--warn-text`/`--warn-border`; im
         Browser gemessen ergab das im dunklen Modus Kontrast **1.09**: dunkelbrauner Rückfallwert auf
         dunklem Grund, praktisch unlesbar. Ein erfundener Token-Name fällt nicht auf — er fällt zurück.
     EN: `--warn` and `--warn-surface` are the tokens that really exist, and the text colour is `--text` so it
         follows the theme. The first version invented `--warn-bg`/`--warn-text`/`--warn-border`; measured in
         the browser that gave contrast 1.09 in dark mode — a dark brown fallback on a dark ground, all but
         unreadable. An invented token name does not fail loudly; it falls back. */
  border: 1px solid var(--warn, #c9a227);
  border-radius: var(--radius-md, 1rem);
  background: var(--warn-surface, #fdf6e0);
  color: var(--text, #222);
}
.reserved-circle__title { margin: 0 0 .5rem; font-size: var(--step-0, 1rem); }
/* DE: Die Aussage der Gemeinschaft — sie steht ÜBER der Liste dessen, was noch aussteht, und trägt darum
       mehr Gewicht als der Hinweistext darunter. */
.reserved-circle__note { margin: 0 0 .6rem; }
.reserved-circle__list { margin: 0 0 .6rem; padding-inline-start: 1.2rem; }
.reserved-circle__item { margin-block: .15rem; }
.reserved-circle__whose { margin: 0; font-size: var(--step--1, .9rem); }

/* DE: „Nochmal zeigen" und „Wiederholen". Das erste ist die Haupthandlung — eine Gebärde dauert eine Sekunde,
       und ein Kind drückt fünfmal —, deshalb trägt es die Markenfarbe und die volle Zielgröße (52 px, über
       den 44 px aus WCAG 2.5.8, weil es oft und schnell getroffen wird). Der Schalter daneben ist ruhiger.
   EN: „Show again" and „repeat". The first is the primary action — a sign lasts a second and a child presses
       five times — so it carries the brand colour and the full target size (52px, above the 44px of WCAG
       2.5.8, because it is hit often and fast). The switch beside it is quieter. */
.sign-video__replay {
  display: flex; flex-wrap: wrap; gap: var(--sp-sm, .75rem);
  margin-block: var(--sp-sm, .75rem) 0;
}
.sign-video__again, .sign-video__repeat {
  display: inline-flex; align-items: center; gap: .4rem;
  min-block-size: 52px; padding-inline: var(--sp-md, 1rem);
  border-radius: var(--radius-pill, 999px); text-decoration: none;
  font-weight: 700;
}
.sign-video__again { background: var(--brand-strong); color: var(--text-on-brand); }
.sign-video__repeat { border: 1px solid var(--text); color: var(--text); }

/* DE: Die Stellung des Schalters trägt der Text plus `aria-pressed` — die Farbe kommt dazu, nie allein
       (WCAG 1.4.1).
   EN: The switch's position is carried by the text plus `aria-pressed`; colour is added, never alone. */
.sign-video__repeat[aria-pressed="true"] { background: var(--brand-surface); }

/* DE: Woher die Aufnahme kommt. Gedämpft und klein, weil sie nicht die Gebärde überstrahlen soll — aber nicht
       versteckt: für die Person im Video ist das die einzige Stelle, an der ihr Recht überhaupt vorkommt.
   EN: Where the recording comes from. Muted and small, so it does not outshine the sign — but not hidden: for
       the person in the video this is the only place their right appears at all. */
.sign-video__provenance {
  margin-block-start: var(--sp-sm, .75rem); color: var(--text-muted);
  font-size: var(--step--1, .9rem); max-inline-size: 44ch;
}
.sign-video__licence { font-weight: 700; margin-inline-start: .35rem; }

/* DE: Der Weg zur eigenen Einwilligung steht auf einer eigenen Zeile und trägt die Zielgröße einer Aktion —
       er ist eine, auch wenn er wie ein Nachsatz aussieht.
   EN: The way to one's own consent sits on its own line and carries an action's target size — it is one, even
       though it reads like an afterthought. */
.sign-video__consent-link {
  display: inline-flex; align-items: center; min-block-size: 44px; margin-block-start: .35rem;
  font-weight: 700;
}

/* DE: „Andere Formen, andere Orte". Zwei Karten nebeneinander ab einem breiten Schirm, untereinander auf dem
       Telefon — der Vergleich ist der Punkt, aber nur, wenn beide lesbar sind.
   EN: „Other forms, other places". Two cards side by side on a wide screen, stacked on a phone — comparison
       is the point, but only while both stay readable. */
.sign-variants { margin-block-start: var(--sp-lg, 1.5rem); }
.sign-variants__lead { color: var(--text-muted); margin-block: 0 var(--sp-sm, .75rem); }
.sign-variants__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--sp-md, 1rem);
}
.sign-variants__form {
  border: 1px solid var(--border); border-radius: var(--radius-md, 1rem);
  padding: var(--sp-sm, .75rem); display: grid; gap: var(--sp-xs, .5rem);
}
.sign-variants__video { inline-size: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-sm, .6rem); background: var(--surface-2); }
.sign-variants__meta { margin: 0; display: grid; gap: .15rem; }

/* DE: Der Ort trägt Gewicht, die Rolle erklärt ihn — nicht umgekehrt: „Rundu" ist die Auskunft, „wird dort so
       gebärdet" der Nebensatz.
   EN: The place carries weight, the role explains it: „Rundu" is the information, „signed this way there" the
       clause. */
.sign-variants__place { font-weight: 800; }
.sign-variants__role { color: var(--text-muted); font-size: var(--step--1, .9rem); }

/* DE: Die Gebrauchsangabe. Zwischen Video und Formen, weil sie die Frage beantwortet, die nach dem Sehen
       kommt: „wann sagt man das?" Die Beschriftung davor, damit der Satz nicht als Bildunterschrift gelesen
       wird.
   EN: The usage note. Between video and forms, because it answers the question that comes after watching:
       „when do you say this?" The label in front, so the sentence does not read as a caption. */
.sign-usage {
  margin-block-start: var(--sp-sm, .75rem);
  background: var(--surface-2); border-radius: var(--radius-md, 1rem);
  padding: var(--sp-sm, .75rem) var(--sp-md, 1rem); max-inline-size: 44ch;
}
.sign-usage__label { display: block; font-weight: 700; font-size: var(--step--1, .9rem); color: var(--text-muted); }