/* --- Gebärde nachschlagen (SignSearchController, S7b) ------------------------------------------------------ DE: Beschreiben statt tippen. Die Auswahl-Gruppen sind dieselbe Komponente wie im Redaktions-Editor, also erbt diese Fläche deren Bedienbarkeit ohne JavaScript und deren Bild-plus-Text-Regel. Hier steht nur, was die SUCHE zusätzlich braucht: die Gruppen nebeneinander statt untereinander, damit man mehrere Angaben im Blick behält, und die Trefferzahl je Ergebnis. EN: Describe rather than type. The groups are the editor's component, so this surface inherits its no-JavaScript operation and its picture-plus-text rule. Only what the SEARCH needs extra is here. */ .sign-search { max-inline-size: 60rem; } .sign-search__form { display: grid; gap: 1rem; margin-block-end: var(--sp-lg, 2rem); } @media (min-width: 55rem) { .sign-search__form > .sign-picker { break-inside: avoid; } .sign-search__form { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); align-items: start; } .sign-search__form > .facet-field, .sign-search__form > input[type="submit"] { grid-column: 1 / -1; } /* DE: Der Knopf spannt die Zeile, füllt sie aber nicht — dieselbe Falle wie in #1212, wo `inline-size: 100%` auf einem Absende-Knopf das Feld daneben auf einen Stummel drückte. Hier steht er allein, würde aber über die volle Breite trotzdem wie ein Banner aussehen statt wie ein Knopf. EN: The button spans the row without filling it — the same trap as #1212. */ .sign-search__form > input[type="submit"] { justify-self: start; } } .sign-search__prompt { color: var(--text-muted, #555); font-size: var(--step-1, 1.1rem); } .sign-search__results { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; } .sign-search__hit { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; padding: .7rem .9rem; border: 1px solid var(--border, #ddd); border-radius: .6rem; background: var(--surface, #fff); } .sign-search__lemma { font-family: var(--font-lexical, inherit); font-weight: 700; font-size: var(--step-1, 1.1rem); } /* Die Trefferzahl offen zeigen: „2 von 3" erklärt, warum ein Eintrag dasteht — und dass man weitersuchen darf. */ .sign-search__score { font-size: var(--step--1, .9rem); color: var(--text-muted, #555); } /* --- Der Weg durch fünf Schritte (Entwurf 5a/5b) -------------------------------------------------------- DE: Alle fünf sind zu sehen, damit die Entfernung klar ist — aber nur einer ist dran. Der Zustand steht als Text am Schritt (`.vh`), nie nur als Farbe: „aktueller Schritt", „beantwortet", „noch offen" (WCAG 1.4.1). Wer die Farben nicht sieht, liest sie. EN: All five are visible so the distance is clear, only one is active. The state is carried by text, never by colour alone — read aloud as „current step", „answered", „still open". */ .sign-search__step-rail { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--sp-2xs); flex-wrap: wrap; } .sign-search__step { display: flex; align-items: center; gap: .5rem; padding: 6px 12px; border-radius: var(--radius-pill); border: 1px solid transparent; font-size: .9rem; } .sign-search__step-n { font-weight: 900; font-variant-numeric: tabular-nums; } /* DE: Die Gruppenfarbe als MARKIERUNG, nie als Schriftfarbe: gemessen 3,7–4,4 : 1 — genug für eine Markierung (1.4.11), zu wenig für Text (1.4.3). Herleitung im Test. EN: The group colour as a MARKING, never as text: measured 3.7–4.4:1 — enough for a marking, not for text. */ .sign-search__step-n::before { content: ""; display: inline-block; inline-size: .5rem; block-size: .5rem; border-radius: 50%; background: var(--sign-param-hue, transparent); margin-inline-end: .4rem; vertical-align: middle; } /* DE: Nicht im AKTUELLEN Schritt. Dessen Pille steht auf fast schwarzem Grund; die fünf Töne kämen dort auf rund 2,5 : 1 und lägen unter den 3 : 1, die WCAG 1.4.11 für eine Markierung verlangt. Ein Punkt, den man nicht sicher sieht, ist keine Auskunft — und wo man gerade steht, sagt die Pille ohnehin. EN: Not on the CURRENT step: its pill sits on a near-black ground where the five hues land around 2.5:1, below the 3:1 WCAG 1.4.11 asks for a marking. A dot you cannot reliably see is no information — and the pill already says where you are. */ .sign-search__step--current .sign-search__step-n::before { display: none; } /* DE: Beantwortet trägt ein HÄKCHEN, keine Farbe: die Fläche kann nicht Zustand UND Gruppe bedeuten. Ein ruhiger Grund bleibt, damit die Pille sich vom Offenen abhebt — er kodiert aber nichts mehr. EN: Answered carries a CHECKMARK, not a colour: the surface cannot mean state AND group. A quiet ground remains so the pill stands out from the untouched ones, but it encodes nothing any more. */ .sign-search__step--done { background: var(--surface-2, #eef0ea); color: var(--text); } .sign-search__step-done { font-weight: 900; } .sign-search__step--current { background: var(--text); color: var(--bg); } .sign-search__step--todo { border-color: var(--border); color: var(--text-muted); } .sign-search__step-of { color: var(--text-faint); font-size: .9rem; margin: 0; } /* Die laufende Trefferzahl beantwortet beim Auswählen die Frage „bringt das noch etwas?" — sie steht deshalb nahe an den Knöpfen und nicht am Seitenende. EN: The running count answers „is this getting me anywhere?" while choosing, so it sits near the actions. */ .sign-search__running { margin: 0; padding: var(--sp-sm) var(--sp-md); background: var(--surface-2); border-radius: var(--radius-md); color: var(--text-muted); } .sign-search__actions { display: flex; gap: var(--sp-sm); flex-wrap: wrap; align-items: center; } /* Zielgrößen: die Hauptaktion 52 px, die Nebenaktionen 48 px (WCAG 2.5.8 mit Reserve). Eine Suche, die auf einem Telefon danebentrifft, ist für ein Kind keine Suche. EN: 52 px for the primary action, 48 px for the secondary ones. */ .sign-search__next { min-height: 52px; padding-inline: var(--sp-lg); font-size: 1.05rem; } .sign-search__skip, .sign-search__show { min-height: 48px; border: 1px solid var(--text); background: transparent; color: var(--text); border-radius: var(--radius-pill); display: inline-flex; align-items: center; } /* --- Telefon (5b) --------------------------------------------------------------------------------------- DE: Zwei Symbole je Reihe statt drei — bei drei werden die Bewegungssymbole auf 390 px so klein, dass sie sich nicht mehr unterscheiden lassen, und dann ist die Auswahl wertlos. Die Aktionen kleben unten, damit „Weiter" erreichbar bleibt, ohne an einem langen Raster vorbeizuscrollen. EN: Two symbols per row rather than three — at 390 px three make the movement symbols indistinguishable, and then the chooser is worthless. The actions stick to the bottom so „Next" stays reachable. */ @media (max-width: 760px) { .sign-search__step { padding: 4px 10px; font-size: .85rem; } .sign-search__actions { position: sticky; bottom: 0; z-index: 1; background: var(--surface-2); border-top: 1px solid var(--border); padding: var(--sp-sm); margin-inline: calc(-1 * var(--sp-sm)); /* `auto-fit` statt `1fr 1fr`: solange nichts passt, gibt es nur „überspringen" — und ein halbbreiter Knopf neben einer Lücke sieht aus wie ein fehlender zweiter. Mit auto-fit füllt der eine die Reihe. Die Mindestbreite ist ECHT und nicht 0: `minmax(0, 1fr)` ließ beliebig viele Spalten passen, und im Browser waren es 54 zu je 0,52 px — „Weiß ich nicht · überspringen" brach senkrecht um und die Leiste fraß 28 % des Telefonschirms. ZWEI feste Spalten, nicht `auto-fit`: mit `auto-fit` hing die Spaltenzahl an der Fensterbreite, und bei 500 px waren es drei — zwei Knöpfe, eine Lücke, also genau das Bild, das vermieden werden sollte. Hier ist `minmax(0, 1fr)` richtig: bei FESTER Spaltenzahl hält es lange Beschriftungen davon ab, die Spalte aufzublähen. Der Fehler war die Null unter `auto-fit`, nicht die Null an sich. EN: TWO fixed columns, not `auto-fit`: with auto-fit the column count followed the window width, and at 500px there were three — two buttons and a gap, exactly the picture to avoid. Here `minmax(0, 1fr)` is right: with a FIXED count it stops long labels from inflating a column. The mistake was the zero under auto-fit, not the zero itself. */ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-xs); } /* DE: Ist „überspringen" der letzte Knopf — es passt noch nichts, also gibt es kein „jetzt zeigen" —, füllt es die Reihe. Sonst stünde ein halbbreiter Knopf neben einer Lücke und sähe aus wie ein fehlender zweiter. EN: When „skip" is the last button — nothing matches yet, so there is no „show now" — it fills the row. Otherwise a half-width button beside a gap looks like a missing second one. */ .sign-search__skip:last-child { grid-column: 1 / -1; } .sign-search__next { grid-column: 1 / -1; width: 100%; } .sign-search__skip, .sign-search__show { justify-content: center; } } /* DE: Der Schritt als Link — er soll aussehen wie die Pille, nicht wie ein Link im Fließtext. Die Pille selbst trägt Rahmen und Farbe; der Link füllt sie aus, damit die ganze Fläche klickbar ist und nicht nur das Wort (Zielgröße, WCAG 2.5.8). EN: A step as a link — it should look like the pill, not like a link in running text. The pill carries the border and colour; the link fills it so the whole area is clickable rather than just the word. */ .sign-search__step-link { display: flex; align-items: center; gap: .4rem; color: inherit; text-decoration: none; margin: calc(var(--sp-xs, .5rem) * -1) calc(var(--sp-sm, .75rem) * -1); padding: var(--sp-xs, .5rem) var(--sp-sm, .75rem); border-radius: inherit; } .sign-search__step-link:hover { text-decoration: underline; } /* DE: Das Video (oder Bild) im Treffer. Klein und fest, damit die Zeilen nicht springen und vier Treffer auch auf dem Telefon nebeneinander lesbar bleiben. `object-fit: cover`, weil eine Gebärde mittig steht und der Rand nichts trägt. EN: The video (or picture) in a hit. Small and fixed so rows do not jump and four hits stay readable on a phone. `object-fit: cover`, because a sign sits centred and the edges carry nothing. */ .sign-search__hit-media { inline-size: 4rem; block-size: 4rem; object-fit: cover; border-radius: var(--radius-sm, .6rem); background: var(--surface-2); flex: 0 0 auto; } /* DE: Der Hinweis steht auf der GEWÖHNLICHEN Suchseite, die Regel aber hier: sie gehört zur Gebärdensuche, und `search.css` stand mit ihr bei 255 Zeilen über dem Größen-Tor. Eine Datei, die alles aufnimmt, was irgendwo auf einer Suchseite steht, ist kein Ort, sondern ein Haufen. EN: The hint sits on the ORDINARY search page, its rule here: it belongs to the sign search, and `search.css` stood at 255 lines, over the size gate. A file taking in everything that appears on some search page is not a place but a pile. */ /* DE: Der Weg für eine Sprache, die man nicht tippen kann. Er steht sichtbar über den Ergebnissen und nicht am Seitenende: für eine Gebärdensprache ist er nicht die Alternative zur Suche, sondern DIE Suche — tippen kann man eine Gebärde nicht. Die Markenfläche hebt ihn heraus, der Text trägt die Aussage (nie die Farbe allein, WCAG 1.4.1). EN: The way in for a language you cannot type. Above the results rather than at the foot: for a signed language this is not the alternative to search but THE search. The brand surface lifts it out; the text carries the statement, never the colour alone. */ .search-describe { background: var(--brand-surface); border-radius: var(--radius-md, 1rem); padding: var(--sp-sm, .75rem) var(--sp-md, 1rem); margin: 0 0 var(--sp-md, 1rem); display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; } .search-describe__link { font-weight: 700; min-block-size: 44px; display: inline-flex; align-items: center; } /* DE: Zwei Spalten ab einem breiten Schirm: links wird gewählt, rechts steht, was das gerade bewirkt hat. „Noch 2 Gebärden passen" beantwortet die Frage, die man sich beim WÄHLEN stellt — unter dem Wähler, mit 195 Bewegungszeichen darüber, ist sie außer Sicht. Die Vorschau bleibt beim Scrollen stehen, weil sie zum Wählen gehört und nicht zum Lesen. Auf schmalen Schirmen bleibt es untereinander — das ist derselbe Entwurf und kein Kompromiss: ein Telefon hat für eine zweite Spalte keinen Platz, und der Wähler ist das, woran gearbeitet wird. EN: Two columns from a wide screen: choosing on the left, what it just did on the right. „2 signs still match" answers the question one asks WHILE choosing, and under the chooser with 195 marks above it, it is out of sight. The preview stays put while scrolling, because it belongs to the choosing rather than to the reading. Narrow screens stay stacked — the same design, not a compromise. */ @media (min-width: 62rem) { .sign-search__body { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--sp-lg, 1.5rem); align-items: start; } .sign-search__body > .sign-search__preview { position: sticky; top: var(--header-offset, 0); } } /* DE: Die vier Zugänge. Als Pillen wie die Schrittleiste, aber mit deutlichem Abstand darunter: sie gehören zum Kopf der Seite („womit fange ich an"), nicht zum Weg („wo bin ich"). Zeilenumbruch statt Scrollen, damit auf dem Telefon alle vier sichtbar bleiben — ein waagerecht scrollender Streifen versteckt genau den Zugang, den jemand sucht. EN: The four entrances. Pills like the step rail, but clearly set off below: they belong to the page's head („where do I start") rather than to the path („where am I"). Wrapping rather than scrolling, so all four stay visible on a phone — a horizontally scrolling strip hides the very entrance somebody wants. */ .sign-search__entries { display: flex; flex-wrap: wrap; gap: var(--sp-2xs, .25rem); margin-block-end: var(--sp-md, 1rem); } .sign-search__entry { min-block-size: 48px; display: inline-flex; align-items: center; padding-inline: var(--sp-md, 1rem); border-radius: var(--radius-pill, 999px); border: 1px solid var(--border); color: var(--text); text-decoration: none; } .sign-search__entry:hover { border-color: var(--brand-strong); } /* DE: Der aktuelle Zugang trägt Rahmen UND Fläche, nicht nur Farbe — dieselbe Regel wie überall (WCAG 1.4.1), und `aria-current` sagt es zusätzlich in Worten. EN: The current entrance carries border AND surface, not colour alone; `aria-current` says it in words. */ .sign-search__entry--current { background: var(--brand-surface); border-color: var(--text); font-weight: 800; }