/* * survey_overlay.css — die Skalentabellen aufgeräumt, ohne survey.css anzufassen. * * Auftrag A32. Die Datei wird auf derselben Seitenliste geladen wie survey.css * (Configuration/TypoScript/setup.typoscript, Schlüssel 128899515 direkt hinter * der 128899510 von survey.css) und wirkt ausschliesslich auf die Tabellen, die * in der Selektorliste stehen. Alles andere bleibt, wie es ist. * * --------------------------------------------------------------------------- * DIE SELEKTORLISTE IST DER REGLER * * Jede Regel beginnt mit derselben `:is(…)`-Klammer. Wer ein Instrument * dazunimmt oder herausnimmt, ersetzt diese eine Zeichenfolge überall. * * Freigegeben von Peter am 11.09.2026, und am selben Tag am lebenden DOM auf * dev-hslu-1 nachgemessen (`claude_workspace/run_a32.ps1 vermessen`): * * Klasse Instrument Skala Seite * questions-maslach Burnout-Indikator 0..6 348 * dito für Jugendliche 0..6 707 * questions-oxhap Zufriedenheitsindikator 1..6 350 * dito für Jugendliche 1..6 709 * questions-appreciation AWE-Indikator 0..3 520 * questions-boundary Boundary-Indikator Ja/Teilw./Nein 347 * questions-workplace-resilience Persönliche Resilienz 1..7 346 * questions-psysecteam Psychologische Sicherheit 1..10 344 * * Zwei Dinge, die man dieser Liste nicht ansieht: * * - **Die Jugendfassungen brauchen keinen eigenen Eintrag.** Fragebogen 23 * und 24 laufen durch denselben Template-Zweig wie 2 und 13 und tragen * dieselbe Tabellenklasse; gemessen, nicht angenommen. * - **Persönliche Resilienz heisst im Markup `workplace-resilience`.** Das * ist ein historischer Name, kein Irrtum — Fragebogen 9 heisst * "Persönliche-Resilienz-Indikator" und der Template-Zweig trägt den * Kommentar "Persönliche Resilienz neu". Der alte RS-13-Zweig * (`questions-personal-resilience`, questionnaireType 8) steht bewusst * NICHT in der Liste: zu Fragebogen 8 gibt es weder auf DEV noch auf PROD * einen Datensatz, der Zweig ist tot. * * NICHT in der Liste, und das ist ein Entscheid, kein Vergessen: * `questions-interview-resilience` (Organisationsresilienz, Fragebogen 7). * Peter hat sie als "OPTIONAL, sonst weglassen" bezeichnet, falls sie eine * Neuvermessung braucht. Sie braucht eine: die Tabelle hat drei Kopfzeilen * statt einer, vier Spalten mit der Skala in der MITTE zwischen zwei Aussagen, * und ihre Antwortfelder sind `div.range-box` statt `label.rq-option-box`. * Gemessen am 11.09.2026: NULL Zeilen mit `tr.rangequestion.rq-tablerow`. * Keine einzige Regel dieser Datei würde dort greifen. Dazu tragen ihre * Skalenbänder Farbe mit Bedeutung, die nicht eingeebnet werden darf. * * In die Klammer gehört NUR `table.questions-` und nichts anderes. Die * Spezifität einer :is()-Klammer ist die ihres stärksten Arguments; solange * alle Argumente gleich gebaut sind, ist sie (0,1,1) und die Rechnungen weiter * unten stimmen. Ein einzelnes stärkeres Argument verschöbe sie für alle. * * Kennt ein Browser :is() nicht, verwirft er die betreffende Regel. Dann sieht * der Fragebogen aus wie heute — das ist der harmlose Ausgang, nicht der * gefährliche. * --------------------------------------------------------------------------- * DER PREIS DES OVERLAYS, KENNTLICH GEMACHT * * Ein Overlay muss sich gegen survey.css durchsetzen, das an den entscheidenden * Stellen mit !important und mit langen Selektoren arbeitet. Zwischen zwei * !important-Regeln entscheidet nicht die Ladereihenfolge, sondern die * Spezifität — eine kurze Regel verlöre hier lautlos. * * Jede Stelle, die NUR aus diesem Grund länger oder lauter ist als nötig, ist * markiert und wäre bei einer Übernahme nach survey.css (Etappe 3) wieder * wegzustreichen: * * SPEZ-IMPORTANT !important, das nur gegen survey.css steht * SPEZ-SELEKTOR Selektor, der nur wegen der Spezifität aufgebläht ist * * Zählen mit: grep -c "SPEZ-IMPORTANT" survey_overlay.css * --------------------------------------------------------------------------- * WAS AUS midcareer.css NICHT MITKOMMT * * Das BOLD-Gelb, der nackte h2-Selektor und die Umdefinition der beiden * Hinweisbox-Tokens. Die sind dort tragbar, weil die Datei genau zwei Seiten * sieht; diese hier sieht rund sechzig. * * Gemessen am 10.09.2026: --rcc-color-bg-paper existiert nur in style_hslu.css, * und --rcc-color-font-1 / --rcc-color-font-2 sind im ausgelieferten Stylesheet * überhaupt nicht definiert (das Haus schreibt selbst `var(--rcc-color-font-2, * #333)`). Deshalb steht hier hinter jedem Token ein Rückfallwert. Ohne ihn * fiele die Eigenschaft ersatzlos aus — ohne Fehlermeldung. * ========================================================================== */ /* ========================================================================== * Die Masse * * Bewusst am Tabellenelement und nicht in :root: so verlässt nichts davon die * Tabellen der Selektorliste. Die Telefonansicht weiter unten setzt dieselben * Werte auf demselben Selektor neu. * ========================================================================== */ :is(table.questions-maslach, table.questions-oxhap, table.questions-appreciation, table.questions-boundary, table.questions-workplace-resilience, table.questions-psysecteam) { --so-option-size: 22px; /* der gezeichnete Kreis */ --so-option-border: 2px; --so-option-column: 46px; /* Breite einer Antwortspalte */ --so-hit: var(--rcc-target-size-min, 44px); /* Trefferfläche, WCAG 2.5.5 (AAA) */ --so-pad: var(--rcc-spacing-content-xs, 0.8rem); --so-number-column: 3.5rem; --so-ink: var(--rcc-color-font-2, #333); /* Text */ --so-rim: var(--rcc-color-teal-1, #122d39); /* Rand des Antwortkreises */ --so-fill: var(--rcc-color-bg-action, #449dc2); /* Affordance-Blau, 3.07:1 auf Weiss */ --so-rule: var(--rcc-color-bg-1-medium, #d9e5ea); /* Haarlinie zwischen den Fragen */ --so-row-hover: var(--rcc-color-bg-1-light, #f2f9fb); /* Zeile unter dem Zeiger */ --so-head: var(--rcc-color-bg-paper, #edeae1); /* Kopfzeile, warmes Grau */ --so-surface: var(--rcc-color-bg-main, #fff); border-collapse: collapse; width: 100%; } /* ========================================================================== * Die Kopfzeile * * Wie sie ausgeliefert wird, nachgelesen am 10.09.2026 in * Templates/Participation/ShowByForm.html :867 und Show.html :1374: * * Fragen: 0 … 6 * * Acht Zellen über neun Spalten — die Ziffern stehen also über ihren * Antwortspalten, und die Aussagespalte bekommt keine Breitenvorgabe. Alle * Instrumente sind so gebaut; boundary und die Resilienz-Tabellen zusätzlich * mit einem , was für die Regeln hier keinen Unterschied macht. * * Deshalb genügt hier Farbe, Polsterung und eine Kante. Was die Kopfzeile * NICHT mehr tun soll, ist Spaltenbreiten vorgeben: survey.css :167 setzt * `width: 22px` auf jedes th ausser dem ersten. Bei 46px breiten Antwortspalten * gewinnt zwar die Zelle darunter — aber die Vorgabe stehen zu lassen hiesse, * sich darauf zu verlassen. `width: auto` nimmt sie weg. * * NEBENFUND, nicht Gegenstand dieser Karte: zwei alte Inhaltselemente * (tt_content 184 und 225) tragen dieselbe Kopfzeile OHNE colspan. Dort sitzt * die "0" über der Aussage, die letzte Antwortspalte bleibt unbeschriftet, und * weil das zweite th damit in der Aussagespalte landet, drückt dessen * `width: 22px` diese Spalte auf ihre Minimalbreite — gemessen 106px Aussage * bei 485px Tabelle in einem 900px-Rahmen. Zu sehen ist das nirgends: beide * Elemente liegen auf versteckten Seiten (135 und 161, auf DEV wie auf PROD). * Die Reparatur wären zwei Zeichen im Inhaltselement. * ========================================================================== */ /* SPEZ-SELEKTOR: `tr:first-child > th` statt `th` — survey.css :167 erreicht `table.questions-maslach th:not(:nth-child(1))` mit (0,2,2). Der Papierton steht auf der Zeile UND auf den Zellen. Eine Tabellenzeile malt ihren Hintergrund nur hinter ihren Zellen; deckt die Kopfzeile einmal nicht alle Spalten ab, bliebe das Band sonst in Stücken. Zwei Angaben derselben Farbe sind der billigere Weg als die Annahme, dass die Kopfzeile immer vollständig ist. */ :is(table.questions-maslach, table.questions-oxhap, table.questions-appreciation, table.questions-boundary, table.questions-workplace-resilience, table.questions-psysecteam) tr:first-child > th { background-color: var(--so-head); border: 0; /* siehe Notiz zum Hausraster bei den Fragezeilen */ color: var(--so-ink); font-size: var(--rcc-font-size-smaller, 1.5rem); font-weight: 700; line-height: 1.45; padding: var(--so-pad) 0; text-align: center; vertical-align: middle; width: auto; } /* "Fragen:" ist kein Wert der Skala und steht deshalb ruhiger. */ :is(table.questions-maslach, table.questions-oxhap, table.questions-appreciation, table.questions-boundary, table.questions-workplace-resilience, table.questions-psysecteam) tr:first-child > th:first-child { font-weight: 400; padding-left: var(--so-pad); text-align: left; } /* Der Papierton liegt auf der ZEILE, nicht nur auf den Zellen: zwischen "Fragen:" und den Ziffern liegt die Aussagespalte, die gar keine Kopfzelle hat. Auf den Zellen allein bliebe das Band in zwei Stücken. WARUM HIER NICHT `tr:first-child` STEHT. Boundary — und die beiden Resilienz-Tabellen — legen ihre Kopfzeile in ein ``. `:first-child` zählt innerhalb des ELTERNELEMENTS, also trifft `tr:first-child` dann ZWEI Zeilen: die Kopfzeile im thead und die erste FRAGE im tbody. Gemessen am 11.09.2026 auf Seite 347 — die erste Frage trug das Papierband und die Trennkante. Die zwei Selektoren unten benennen genau eine Zeile: die im thead, wenn es eines gibt, sonst die erste im tbody, das ohne thead das erste Kind der Tabelle ist. Papier gegen Weiss ist 1.20:1 — sehr leise. Die Kopfzeile liest sich als Kopf über ihre Kante und ihre fetten Ziffern, nicht über ihre Helligkeit. Das ist die Rückfallregel aus der Karte (Etappe 1, Punkt 2b), gleich mitgebaut: nachgedunkelt wird nicht. */ :is(table.questions-maslach, table.questions-oxhap, table.questions-appreciation, table.questions-boundary, table.questions-workplace-resilience, table.questions-psysecteam) > thead > tr:first-child, :is(table.questions-maslach, table.questions-oxhap, table.questions-appreciation, table.questions-boundary, table.questions-workplace-resilience, table.questions-psysecteam) > tbody:first-child > tr:first-child { background-color: var(--so-head); border-bottom: 2px solid var(--so-rim); } /* ========================================================================== * Die Fragezeilen * ========================================================================== */ /* SPEZ-SELEKTOR: `tr.rangequestion.rq-tablerow > td` statt `td` — survey.css :200 setzt `table.questions-maslach td { padding-top:2px; padding-bottom:5px; vertical-align:top }` mit (0,1,2). Zwei Dinge, die von ausserhalb von survey.css kommen und hier abgeräumt werden, gemessen am 10.09.2026 in style_hslu.css :2204: - Das Haus legt auf JEDE Tabellenzelle ein Raster aus 1px #EFEFEF, oben, unten und aussen. Das ist das blasse Gitter, das man heute sieht. Statt dessen die eine Haarlinie unter der Frage. - Dasselbe Regelwerk setzt `line-height: 15px` — bei 17px Schrift kleben zweizeilige Aussagen aneinander. Deshalb hier eine eigene Zeilenhöhe. Beides steht auf (0,0,4) und wird von dieser Regel (0,3,3) geschlagen. Ohne `color`: survey.css :256 setzt auf unvollständigen Zeilen weisse Schrift auf Pink, mit (0,2,2). Eine Farbe an dieser Stelle überschriebe sie und drückte den Kontrast auf dem Pink von 7.98:1 auf 2.3:1. */ :is(table.questions-maslach, table.questions-oxhap, table.questions-appreciation, table.questions-boundary, table.questions-workplace-resilience, table.questions-psysecteam) tr.rangequestion.rq-tablerow > td { border: 0; border-bottom: 1px solid var(--so-rule); /* an einer Tabellenzelle wirkt height als Mindesthöhe. `border-box` zieht die Polsterung mit hinein: ohne das wäre die Zeile 44 + 2 × 8 = 60px hoch, und die Nummer oben stünde zehn Pixel über einer einzeiligen Aussage. Gemessen am 11.09.2026. */ box-sizing: border-box; /* plus zwei Pixel: bei border-box zählt die Haarlinie zur Höhe, und das Label — die eigentliche Trefferfläche — füllt nur den Bereich innerhalb des Rahmens. Mit `+ 1px` misst sie je nach Zeile 43.5 oder 44.0, weil sich benachbarte Rahmen bei border-collapse einen halben Pixel teilen. Zwei Pixel halten sie sicher über 44. Gemessen am 11.09.2026. */ height: calc(var(--so-hit) + 2px); line-height: 1.45; padding: var(--so-pad) 0; vertical-align: middle; } /* Die Aussage braucht Luft zu den Antwortspalten. */ :is(table.questions-maslach, table.questions-oxhap, table.questions-appreciation, table.questions-boundary, table.questions-workplace-resilience, table.questions-psysecteam) tr.rangequestion.rq-tablerow > td:nth-child(2) { padding-right: var(--rcc-spacing-element-md, 1.5rem); } /* SPEZ-IMPORTANT: survey.css :215 schreibt `table.questions-psysecteam td { padding-top: 2px !important }` — nur für dieses eine Instrument. Gegen !important hilft keine Spezifität, sondern nur !important zurück. Deshalb diese eine Eigenschaft, für dieses eine Instrument, statt die Polsterung aller Instrumente laut zu stellen. WICHTIG beim Ausbauen: nimmt jemand psysecteam aus der Selektorliste, gehört diese Regel mit heraus — sie hängt nicht an der Liste, sondern am Namen. */ :is(table.questions-psysecteam) tr.rangequestion.rq-tablerow > td { padding-top: var(--so-pad) !important; } /* Die Kennzeichnung unvollständiger Fragen bleibt in Etappe 1 unangetastet — sie ist Gegenstand von Etappe 2. Das `border: 0` oben steht auf (0,3,3) und ist damit stärker als survey.css :253 (0,3,2); ohne diese Zeile verlöre die erste Antwortzelle einer unvollständigen Frage ihren weissen Rand, und das wäre eine Änderung, die niemand beauftragt hat. SPEZ-SELEKTOR: die volle Kette allein aus diesem Grund. */ :is(table.questions-maslach, table.questions-oxhap, table.questions-appreciation, table.questions-boundary, table.questions-workplace-resilience, table.questions-psysecteam) tr.rangequestion.unfinished > td:nth-child(3) { border: 2px solid var(--so-surface); } /* Lesehilfe über viele Zeilen. Bewusst Hover statt Streifen: zwischen den Aussagen liegen ausgeblendete Inhaltszeilen, an denen ein Streifenmuster kippen würde. Unvollständige Zeilen sind ausgenommen — ihr Pink ist eine Aussage und darf vom Zeiger nicht überstrichen werden. */ :is(table.questions-maslach, table.questions-oxhap, table.questions-appreciation, table.questions-boundary, table.questions-workplace-resilience, table.questions-psysecteam) tr.rangequestion.rq-tablerow:not(.unfinished):hover > td { background-color: var(--so-row-hover); } /* ENTSCHEID Peter, 11.09.2026: die Nummer steht oben und mittig, nicht mittig und rechts. Neben einer zweizeiligen Aussage sieht eine senkrecht zentrierte Nummer falsch aus — sie gehört zur ersten Zeile, nicht in die Mitte des Blocks. Waagrecht zentriert, weil die Spalte ihre eigene ist und nicht an den Text herangeschoben werden muss. Damit das auch bei EINZEILIGEN Aussagen aufgeht, rechnet `--so-hit` seit demselben Tag über die Aussenkante (siehe box-sizing oben). Sonst wäre die Zeile 60px hoch, die Nummer stünde oben und die einzeilige Aussage in der Mitte — zehn Pixel auseinander. */ :is(table.questions-maslach, table.questions-oxhap, table.questions-appreciation, table.questions-boundary, table.questions-workplace-resilience, table.questions-psysecteam) tr.rangequestion.rq-tablerow > td.rq-questionnumber { font-weight: 700; padding-left: var(--so-pad); padding-right: var(--so-pad); text-align: center; vertical-align: top; white-space: nowrap; width: var(--so-number-column); } /* Die Aussage steht an derselben Oberkante wie ihre Nummer. */ :is(table.questions-maslach, table.questions-oxhap, table.questions-appreciation, table.questions-boundary, table.questions-workplace-resilience, table.questions-psysecteam) tr.rangequestion.rq-tablerow > td:nth-child(2) { vertical-align: top; } /* SPEZ-SELEKTOR: die volle Kette bis `td.option` — survey.css :166 erreicht `table.questions-maslach td:not(:nth-child(1)):not(:nth-child(2))` mit (0,3,2) und schreibt dort `width: 22px`. */ :is(table.questions-maslach, table.questions-oxhap, table.questions-appreciation, table.questions-boundary, table.questions-workplace-resilience, table.questions-psysecteam) tr.rangequestion.rq-tablerow > td.option { position: relative; text-align: center; width: var(--so-option-column); } /* ========================================================================== * Der Antwortkreis * * Gezeichnet statt aus zwei Font-Awesome-Glyphen: ein Rand und eine Füllung * sind zwei Schichten, eine Glyphe ist eine. * * OHNE den dunklen Innenring, den midcareer.css trägt. Dort war er nötig, weil * das BOLD-Gelb auf Weiss nur 1.11:1 erreicht und die Information nicht allein * tragen konnte. Das Affordance-Blau #449dc2 erreicht 3.07:1 und liegt damit * über der Schwelle, die WCAG 1.4.11 für ein Bedienelement verlangt. Der Rand * bleibt: er ist die Kante, die den Kreis vom Papier trennt. * ========================================================================== */ /* SPEZ-IMPORTANT: survey.css :1440-1470 schaltet die beiden Glyphen über vier Regelblöcke mit (0,3,2) um. Dieser Selektor ist kürzer, das !important ist der Hebel. */ :is(table.questions-maslach, table.questions-oxhap, table.questions-appreciation, table.questions-boundary, table.questions-workplace-resilience, table.questions-psysecteam) .rq-option-box-inner > i { display: none !important; } /* SPEZ-IMPORTANT + SPEZ-SELEKTOR: survey.css :1390 und :1396 malen diese Fläche mit `background-color: … !important` auf (0,3,1) beziehungsweise (0,4,1). Zwischen !important-Regeln entscheidet die Spezifität — eine kürzere Regel verlöre lautlos und liesse ein gefülltes Rechteck hinter dem Kreis stehen. Die beiden Regeln hier sind auf (0,3,2) und (0,4,2) zugeschnitten. Dasselbe gilt für justify-content, das survey.css :1367 auf space-around setzt. */ :is(table.questions-maslach, table.questions-oxhap, table.questions-appreciation, table.questions-boundary, table.questions-workplace-resilience, table.questions-psysecteam) .rq-option-box input + .rq-option-box-inner { align-items: center; background-color: transparent !important; display: flex !important; justify-content: center; } :is(table.questions-maslach, table.questions-oxhap, table.questions-appreciation, table.questions-boundary, table.questions-workplace-resilience, table.questions-psysecteam) .rq-option-box:hover input + .rq-option-box-inner { background-color: transparent !important; } /* SPEZ-SELEKTOR: `tr.rq-tablerow label.rq-option-box` — survey.css :1328 deckelt das Label bei `max-height: 25px` mit (0,2,1). Das Label ist die Trefferfläche, nicht der Kreis; solange der Deckel steht, ist das Ziel 25px hoch. */ :is(table.questions-maslach, table.questions-oxhap, table.questions-appreciation, table.questions-boundary, table.questions-workplace-resilience, table.questions-psysecteam) tr.rq-tablerow label.rq-option-box { max-height: none; } :is(table.questions-maslach, table.questions-oxhap, table.questions-appreciation, table.questions-boundary, table.questions-workplace-resilience, table.questions-psysecteam) .rq-option-box-inner::after { background-color: var(--so-surface); border: var(--so-option-border) solid var(--so-rim); border-radius: var(--rcc-border-radius-full, 50%); /* border-box mit Absicht: sonst liegt der Rand ausserhalb der 22px und die Kreise laufen gegenüber den Spaltenziffern aus der Flucht. */ box-sizing: border-box; content: ""; display: block; height: var(--so-option-size); transition: background-color 0.12s ease-in-out; width: var(--so-option-size); } :is(table.questions-maslach, table.questions-oxhap, table.questions-appreciation, table.questions-boundary, table.questions-workplace-resilience, table.questions-psysecteam) .rq-option-box input:checked + .rq-option-box-inner::after { background-color: var(--so-fill); } :is(table.questions-maslach, table.questions-oxhap, table.questions-appreciation, table.questions-boundary, table.questions-workplace-resilience, table.questions-psysecteam) .rq-option-box:hover input:not(:checked) + .rq-option-box-inner::after { background-color: var(--so-row-hover); } /* survey.css :1322 versteckt den Radio mit `visibility: hidden`. Das nimmt ihn auch aus der Tabulatorfolge — die Instrumente sind heute nicht mit der Tastatur auszufüllen. Hier bleibt er in der Folge und wird nur durchsichtig. SPEZ-SELEKTOR: survey.css erreicht `.rq-option-box input` mit (0,1,1). */ :is(table.questions-maslach, table.questions-oxhap, table.questions-appreciation, table.questions-boundary, table.questions-workplace-resilience, table.questions-psysecteam) .rq-option-box input { cursor: pointer; height: 100%; left: 0; margin: 0; opacity: 0; position: absolute; top: 0; visibility: visible; width: 100%; z-index: 1; } :is(table.questions-maslach, table.questions-oxhap, table.questions-appreciation, table.questions-boundary, table.questions-workplace-resilience, table.questions-psysecteam) .rq-option-box input:focus-visible + .rq-option-box-inner::after { box-shadow: 0 0 0 2px var(--so-surface), 0 0 0 5px var(--so-fill); } /* ========================================================================== * Das Telefon, unter 576px * * Für die Skalentabellen gibt es im Bestand keine einzige Medienabfrage — * gemessen: survey.css hat neun @media-Blöcke, keiner davon betrifft sie. Eine * siebenspaltige Tabelle mit 22px Spaltenbreite trifft das Telefon also * unverändert. * * Unter 576px hört die Tabelle auf, eine Tabelle zu sein: Nummer, Aussage und * darunter die Optionen als eigene Zeile. Die Kopfzeile fällt weg, deshalb * trägt jede Option ihre Ziffer selbst. * * Die Optionen liegen in einem Flex-Streifen und teilen sich die Breite. Das * ist mit Absicht nicht auf sieben Spalten festgelegt: so trägt derselbe Block * jedes Instrument, unabhängig von der Skalenbreite. * * Zur Trefferfläche, ehrlich gerechnet: 56px in der Höhe wie in der Karte. In * der Breite teilen sich sieben Optionen die Zeile — bei 390px Gerätebreite * sind das rund 53px je Option. Sieben mal 56px nebeneinander gehen auf einem * Telefon nicht auf; 44px ist die Untergrenze, unterhalb derer umbrochen wird. * * ZWEI INSTRUMENTE FALLEN HIER AUS DER REIHE, beide mit Grund: * * - **Boundary bleibt eine Tabelle.** Seine drei Spalten heissen "Ja", * "Teil-weise" und "Nein" — Wörter, keine Ziffern. Die Ziffern unter den * Kreisen könnten sie nicht ersetzen, ohne dass Text ins Stylesheet * wandert. Drei Spalten zu 46px passen auf ein Telefon, also darf die * Kopfzeile stehenbleiben und beschriften. Die Liste in dieser * Medienabfrage ist deshalb um `questions-boundary` kürzer als oben. * - **Psychologische Sicherheit hat zehn Stufen.** Zehn mal 44px sind 440px * und passen nicht; die Untergrenze steht dort deshalb auf 32px. Das ist * unter WCAG 2.5.5 (AAA, 44px), aber klar über 2.5.8 (AA, 24px). Eine * zehnstufige Skala auf 390px ist nicht beides gleichzeitig. * ========================================================================== */ @media (max-width: 575.98px) { :is(table.questions-maslach, table.questions-oxhap, table.questions-appreciation, table.questions-workplace-resilience, table.questions-psysecteam) { --so-hit: 56px; --so-option-min: 44px; } /* zehn Stufen passen bei 44px nicht nebeneinander — siehe Notiz oben */ :is(table.questions-psysecteam) { --so-option-min: 32px; } /* die Kopfzeile — ihre Ziffern wandern an die Kreise */ :is(table.questions-maslach, table.questions-oxhap, table.questions-appreciation, table.questions-workplace-resilience, table.questions-psysecteam) > thead > tr:first-child, :is(table.questions-maslach, table.questions-oxhap, table.questions-appreciation, table.questions-workplace-resilience, table.questions-psysecteam) > tbody:first-child > tr:first-child { display: none; } :is(table.questions-maslach, table.questions-oxhap, table.questions-appreciation, table.questions-workplace-resilience, table.questions-psysecteam) tr.rangequestion.rq-tablerow { border-bottom: 1px solid var(--so-rule); display: flex; flex-wrap: wrap; padding: var(--rcc-spacing-element-md, 1.5rem) 0; } :is(table.questions-maslach, table.questions-oxhap, table.questions-appreciation, table.questions-workplace-resilience, table.questions-psysecteam) tr.rangequestion.rq-tablerow > td { border-bottom: 0; display: block; height: auto; padding: 0; } /* Nummer und Aussage je eine volle Zeile, die Aussage über den Optionen */ :is(table.questions-maslach, table.questions-oxhap, table.questions-appreciation, table.questions-workplace-resilience, table.questions-psysecteam) tr.rangequestion.rq-tablerow > td.rq-questionnumber { flex: 0 0 100%; padding: 0 0 var(--so-pad) 0; text-align: left; width: auto; } :is(table.questions-maslach, table.questions-oxhap, table.questions-appreciation, table.questions-workplace-resilience, table.questions-psysecteam) tr.rangequestion.rq-tablerow > td:nth-child(2) { flex: 0 0 100%; } /* Die Optionen als Zeile darunter. Das Label behält die absolute Lage aus survey.css und wird nur unten verkürzt, damit die Ziffer unter dem Kreis Platz hat — ohne ein zweites Layoutmodell. */ :is(table.questions-maslach, table.questions-oxhap, table.questions-appreciation, table.questions-workplace-resilience, table.questions-psysecteam) tr.rangequestion.rq-tablerow > td.option { flex: 1 1 0; height: calc(var(--so-hit) + 2rem); margin-top: var(--so-pad); min-width: var(--so-option-min, 44px); width: auto; } :is(table.questions-maslach, table.questions-oxhap, table.questions-appreciation, table.questions-workplace-resilience, table.questions-psysecteam) tr.rangequestion.rq-tablerow > td.option .rq-option-box { bottom: 2rem; } :is(table.questions-maslach, table.questions-oxhap, table.questions-appreciation, table.questions-workplace-resilience, table.questions-psysecteam) tr.rangequestion.rq-tablerow > td.option::after { bottom: 0; color: var(--so-ink); display: block; font-size: var(--rcc-font-size-smaller, 1.5rem); left: 0; line-height: 2rem; position: absolute; right: 0; text-align: center; } /* Die Ziffern der Skala. Question.js vergibt `option-` aus rangeLow bis rangeHigh — der Klassenname IST der angezeigte Wert. Deshalb genügt ein Satz Regeln für alle Instrumente: 0 bis 10 deckt jede Skala ab, die heute in der Liste steht (0..6, 1..6, 0..3, 1..7, 1..10). Zeilen, die auf ein Instrument nicht passen, greifen dort einfach ins Leere. */ :is(table.questions-maslach, table.questions-oxhap, table.questions-appreciation, table.questions-workplace-resilience, table.questions-psysecteam) td.option.option-0::after { content: "0"; } :is(table.questions-maslach, table.questions-oxhap, table.questions-appreciation, table.questions-workplace-resilience, table.questions-psysecteam) td.option.option-1::after { content: "1"; } :is(table.questions-maslach, table.questions-oxhap, table.questions-appreciation, table.questions-workplace-resilience, table.questions-psysecteam) td.option.option-2::after { content: "2"; } :is(table.questions-maslach, table.questions-oxhap, table.questions-appreciation, table.questions-workplace-resilience, table.questions-psysecteam) td.option.option-3::after { content: "3"; } :is(table.questions-maslach, table.questions-oxhap, table.questions-appreciation, table.questions-workplace-resilience, table.questions-psysecteam) td.option.option-4::after { content: "4"; } :is(table.questions-maslach, table.questions-oxhap, table.questions-appreciation, table.questions-workplace-resilience, table.questions-psysecteam) td.option.option-5::after { content: "5"; } :is(table.questions-maslach, table.questions-oxhap, table.questions-appreciation, table.questions-workplace-resilience, table.questions-psysecteam) td.option.option-6::after { content: "6"; } :is(table.questions-maslach, table.questions-oxhap, table.questions-appreciation, table.questions-workplace-resilience, table.questions-psysecteam) td.option.option-7::after { content: "7"; } :is(table.questions-maslach, table.questions-oxhap, table.questions-appreciation, table.questions-workplace-resilience, table.questions-psysecteam) td.option.option-8::after { content: "8"; } :is(table.questions-maslach, table.questions-oxhap, table.questions-appreciation, table.questions-workplace-resilience, table.questions-psysecteam) td.option.option-9::after { content: "9"; } :is(table.questions-maslach, table.questions-oxhap, table.questions-appreciation, table.questions-workplace-resilience, table.questions-psysecteam) td.option.option-10::after { content: "10"; } }