/* ========================================================================== Theorietrainer — admin (Slice) Eigentuemer: Worker B. Kein anderer Worker schreibt in diese Datei. Inhalt: Admin-Dichte, Registerleiste, Admin-Tabellen und -Formulare. Regeln (Umsetzungsplan 5.2): 1 Fehlt ein Baustein, wird er beim Design-Lead angefordert. Er wandert nach 10-bausteine.css, nicht hierher. 2 Diese Datei darf am Ende einen eigenen @media print-Block fuehren. Die seitenweiten Druckregeln stehen in 00-basis.css. 3 Keine Erhoehung der Spezifitaet, um eine Basisregel zu uebersteuern. Wird das noetig, ist die Basisregel falsch — beim Design-Lead melden. 4 Keine style-Attribute in den Vorlagen. Verbindliche Quelle fuer alle Werte: DESIGN.md. Dichte nach Admin-Konzept Abschnitt 8: Tabellenzeilen 36px statt 44px, Grundschrift 15px. Fragetext und Antworten im Editor bleiben bei 16 bis 17px, weil dort gelesen wird. ========================================================================== */ /* == Registerleiste ====================================================== Die zweite Ebene sitzt optisch unmittelbar unter der Kopfleiste. Da base.html keinen Block dafuer fuehrt, rendert sie aus dem Inhaltsblock heraus und wird hier an die Kanten von main gezogen. Ein {% block unterleiste %} in base.html waere sauberer; das ist eine Anforderung an den Design-Lead fuer P3. ======================================================================== */ /* == Seitenaufbau ======================================================== */ .admin-bloecke { display: grid; gap: var(--a6); } /* Abschnitt ohne Rahmen: ersetzt den Feldblock dort, wo der Inhalt schon eine eigene Kante mitbringt — eine Tabelle (Uebersicht, Nutzerlisten) oder die Antwortfeldliste (Editor). design-spec-v2 5.1, Regel 2: Rang C wird nie um Inhalt gelegt, der schon eine Kante hat. Eine Rang-A-Linie unter der Ueberschrift traegt die Gliederung stattdessen. Steht immer in einem Grid mit eigenem Abstand (.admin-bloecke, .admin-formular) und braucht deshalb keinen eigenen Aussenabstand. */ .admin-abschnitt > .kopf { font-family: var(--schrift-eng); font-weight: 600; font-size: var(--t-md); border-bottom: var(--rang-a); padding-bottom: var(--a2); margin: 0 0 var(--a4); } .admin-abschnitt > .koerper { display: grid; gap: var(--a4); } .kpi-abschnitt > .koerper { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); padding-bottom: var(--a3); border-bottom: var(--rang-b); } .kpi-abschnitt > .koerper > .legende { grid-column: 1 / -1; } /* Die Kennzahlen im Admin. Der 48px-Punktstand bleibt der Auswertung vorbehalten (DESIGN.md, Schriftskala). */ .kennzahl { display: flex; flex-direction: column; gap: var(--a1); margin: 0; padding: var(--a3); background: var(--papier-rand); border: 1px solid var(--linie); border-bottom: 2px solid var(--tinte); } .kennzahl a { font-family: var(--schrift-zahl); font-size: var(--t-xl); font-variant-numeric: tabular-nums; line-height: 1; text-decoration: none; color: var(--tinte); border-bottom: 1px solid var(--linie-stark); } .kennzahl a:hover { color: var(--messing-text); border-bottom-color: var(--tinte); } .kennzahl .einheit { font-family: var(--schrift-eng); font-size: var(--t-sm); color: var(--tinte-schwach); } /* Verteilungstabellen im Uebersichtsblock */ .buch .balken { width: 55%; min-width: 5rem; } .buch td.q a { font-family: var(--schrift-zahl); font-variant-numeric: tabular-nums; text-decoration: none; border-bottom: 1px solid var(--linie-stark); } .buch td.q a:hover { border-bottom-color: var(--tinte); } /* == Admin-Tabellen: hoehere Dichte ====================================== 36px Zeilenhoehe statt 44px. Die Trefferflaeche der Aktionen bleibt davon unberuehrt — sie sind eigene Knoepfe mit eigener Mindesthoehe. ======================================================================== */ .tab-admin th, .tab-admin td { padding-top: var(--a2); padding-bottom: var(--a2); vertical-align: middle; } .tab-admin td { height: 36px; } /* 9rem statt 11rem seit W1-6. Die Mindestbreite ist der Boden, auf den die Fragespalte faellt, wenn alle uebrigen Spalten ihren Platz genommen haben — und in einer Vorschlagszeile mit vier Aktionen fehlten damit genau 26px, um den Loeschknopf im Bild zu halten. Im Normalfall bleibt die Spalte unveraendert: das automatische Tabellenlayout gibt ihr den freien Rest, im gefilterten Katalog gemessene 215px. */ .tab-admin .fragetext { min-width: 9rem; } /* Maschinenbezeichner stehen in Mono, damit sie sich vom Fliesstext abheben: Fragetyp in beiden Tabellen, Benutzername in der Kontenliste. */ .typ, .tab-admin .benutzername { font-family: var(--schrift-zahl); white-space: nowrap; } /* color ist hier ausdruecklich gesetzt, obwohl --tinte ohnehin die geerbte Farbe ist: der Benutzername ist seit W4-5 ein th scope="row", und der Baustein .tab tbody th traegt color: var(--tinte-schwach). Ohne diese Zeile verblasste die identifizierende Spalte beim Wechsel von td auf th. Die Regel ist mit zwei Klassen spezifischer als der Baustein (0,2,0 gegen 0,1,2) und gewinnt deshalb. Bewusst hier und nicht im Baustein: der Katalog braucht den blassen Zeilenkopf weiter, seine Kennung stand schon immer in --tinte-schwach. */ .tab-admin .benutzername { font-size: var(--t-sm); font-weight: 500; color: var(--tinte); } /* Klein gesetzt, damit die acht Spalten des Katalogs bei 1440px in die Dokumentspalte passen und der Loeschknopf ohne waagerechtes Rollen sichtbar bleibt. */ .typ { font-size: var(--t-xs); } /* Zwei Zeichen duerfen untereinander stehen, statt die Spalte breit zu ziehen. */ .tab-admin .zustand .mrk { margin: 1px var(--a1) 1px 0; } /* Der Moderationszustand (W1-6). Ein Zeichen je Zeile, und es bleibt in seiner Zeile: umbrochen laesse "Vorschlag" die Spalte doppelt so hoch werden wie die uebrigen acht. */ .tab-admin .status { white-space: nowrap; } /* Zeilenaktionen sind eine eigene Klasse, nicht der Baustein .aktionen: der ist fuer Aktionsreihen im Seitenfluss gebaut und bricht um. In einer Tabellenzelle darf nichts umbrechen, sonst laeuft der zweite Knopf aus der Zeile heraus. */ .tab-admin .zeilenaktionen { display: flex; flex-wrap: nowrap; gap: var(--a2); align-items: center; } .tab-admin .zeilenaktionen form { margin: 0; } .tab-admin th.spalte-aktionen, .tab-admin td.zeilenaktionen { width: 1%; white-space: nowrap; } /* Ein Datum ist kein Fliesstext: die Spalte bleibt so schmal wie ihr Inhalt, sonst reisst sie den Wert an den rechten Rand einer halb leeren Zelle. */ .tab-admin .spalte-datum { width: 1%; white-space: nowrap; } /* W4-3, Meldeliste. Vier Spalten, aber eine davon traegt echten Fliesstext — bis zu MAX_MELDUNG_LAENGE (1000) Zeichen, die jemand von Hand geschrieben hat. Das ist die einzige Admin-Tabelle mit dieser Eigenschaft, deshalb eine eigene Klasse statt einer Aenderung an .tab-admin. pre-wrap, damit die Absaetze des Melders erhalten bleiben: wer zwei Punkte untereinander schreibt, meint zwei Punkte. Zusammengezogen zu einem Block ist genau die Gliederung weg, die eine Meldung lesbar macht. 36rem statt der 66rem des Katalogs: vier Spalten, keine Zeile mit vier Aktionen. Die Tabelle rollt im eigenen Rahmen, die Seite nie (9.2). */ .tab-meldungen { min-width: 36rem; } .tab-meldungen .meldetext { min-width: 16rem; white-space: pre-wrap; /* Kein Zeilenhoehen-Wert: die Zelle erbt den Fliesstextabstand. Nur die Ausrichtung muss zurueck nach oben — .tab-admin td zentriert senkrecht, und ein sechszeiliger Meldetext neben einem einzeiligen Datum saehe dadurch aus, als gehoerten sie nicht zusammen. */ vertical-align: top; } .tab-meldungen .fragetext, .tab-meldungen .spalte-datum, .tab-meldungen .zeilenaktionen { vertical-align: top; } /* Die Kennung unter dem Fragetext, nicht dahinter: sie ist die Zuordnung zur Frage und soll die Spalte nicht breiter machen als der Text selbst. */ .tab-meldungen .fragetext .typ { display: block; color: var(--tinte-schwach); } /* Zehn Spalten seit W4-4 (Status kam in W1-6 dazu, der Pruefstand jetzt), und in einer Vorschlagszeile stehen sechs Aktionen nebeneinander. Die Tabelle rollt dafuer in ihrem eigenen Rahmen, die Seite nie (9.2). 66rem seit der Layout-Ueberarbeitung (2026-08-21): .fragetext bekam ein max-width von 22rem, das die bis dahin unbegrenzte Spalte deckelt und den Platzbedarf senkt. Vorher stand hier 77rem (P8e: die Auswahlspalte kam dazu, ohne sie fiel die Aktionsspalte aus dem Bild) bzw. 74rem davor (P8d). Die 77/74rem-Werte waren bei 1440px nachgemessen; die Reduktion auf 66rem ist es nicht — vor einer Aenderung an dieser Zahl bei 1440px pruefen, ob "Bearbeiten"/"Loeschen" noch vollstaendig im Bild stehen. */ .tab-katalog { min-width: 66rem; width: 100%; } .tab-katalog .fragetext { max-width: 22rem; } /* == Sortierbare Spaltenkoepfe (P8d) ===================================== Der Kopf bleibt ein Kopf: dieselbe Schrift, dieselbe Farbe, dieselbe Flaeche. Nur beim Ueberfahren zeigt die Grundlinie, dass hier etwas anklickbar ist — ein blauer Verweistext in jedem Kopf machte aus der Kopfzeile eine Verweisleiste (DESIGN.md: Kopf in --papier-rand, sonst nichts). Der Kopf traegt keinen eigenen Umbruchschutz: .tab thead th bringt ihn bereits mit; hier stuende er ein zweites Mal. ======================================================================== */ .tab-admin thead a { display: inline-flex; align-items: center; gap: var(--a1); color: inherit; text-decoration: none; border-bottom: 1px solid transparent; } .tab-admin thead a:hover { border-bottom-color: var(--linie-stark); } /* Feste Breite, auch leer. Ohne sie waere der sortierte Kopf um ein Zeichen breiter als die uebrigen, und beim Wechsel der Spalte spraenge die halbe Tabelle. Ein reines Anzeigezeichen — die Aussage steht in aria-sort am th, deshalb ist es in der Vorlage aria-hidden. */ .tab-admin thead .sortzeichen { display: inline-block; width: .75rem; text-align: center; font-size: var(--t-xs); color: var(--tinte-schwach); } /* == Aenderungsprotokoll (M10) =========================================== Fuenf Spalten, aber nur eine davon traegt mehrzeiligen Inhalt: die Aenderungsliste. Eigene Klasse statt einer Aenderung an .tab-admin, aus demselben Grund wie bei .tab-meldungen daneben. 40rem: fuenf Spalten ohne Aktionen. Die Tabelle rollt im eigenen Rahmen, die Seite nie (9.2). ======================================================================== */ .tab-protokoll { min-width: 40rem; } /* Oben ausgerichtet wie in der Meldeliste: eine Bearbeitung mit fuenf geaenderten Feldern neben einem einzeiligen Zeitstempel saehe sonst aus, als gehoerten sie nicht zusammen. */ .tab-protokoll th, .tab-protokoll td { vertical-align: top; } /* Der Zeitstempel steht sekundengenau in UTC und ist eine Maschinenangabe — Ziffernschrift wie die uebrigen .q-Zellen, aber ohne Umbruch. */ .tab-protokoll .spalte-datum { white-space: nowrap; } .tab-protokoll .protokolldetails { min-width: 14rem; } /* Feldname ueber dem Wechsel, nicht daneben: die Namen sind unterschiedlich lang (von "typ" bis "meta.vorbehalt_notiz"), und nebeneinander gesetzt zoege der laengste die ganze Spalte auseinander. */ .aenderung { margin: 0; display: grid; gap: 2px; } .aenderung dt { font-family: var(--schrift-eng); font-size: var(--t-xs); color: var(--tinte-schwach); } .aenderung dd { margin: 0 0 var(--a2) 0; font-size: var(--t-sm); } .aenderung dd:last-child { margin-bottom: 0; } /* Der alte Wert tritt zurueck, der neue steht. Der Pfeil dazwischen ist Zeichnung, keine Auskunft — er traegt aria-hidden und daneben steht "wird zu" fuer den Screenreader. */ .aenderung .vorher { color: var(--tinte-schwach); } .aenderung .pfeil { color: var(--tinte-schwach); margin: 0 var(--a1); } /* == Pruefstand (M4) ===================================================== Eigene Spalte, weil der Pruefstand der Arbeitsvorrat der Redaktion ist und nicht eine Nebenangabe des Zustands. Das Zeichen selbst bringt .mrk mit; hier steht nur, was der Katalog dazu braucht. ======================================================================== */ /* Wie .status daneben: umbrochen liesse „Vorbehalt" die Zeile doppelt so hoch werden wie die uebrigen Spalten. Die Spur darunter darf umbrechen — sie ist bereits gekuerzt und steht in einer eigenen Zeile. */ .tab-admin .pruefstand { white-space: nowrap; } /* Die Spur unter dem Zeichen: das Pruefdatum oder der Anfang der Vorbehaltsnotiz. Sie beantwortet die Frage, die das Zeichen aufwirft („warum Vorbehalt?"), ohne dass man die Frage oeffnen muss — deshalb ueberhaupt sichtbar, und deshalb blass und klein, damit sie das Zeichen nicht ueberstimmt. */ .tab-admin .pruefspur { display: block; max-width: 14rem; margin-top: 1px; font-size: var(--t-xs); color: var(--tinte-schwach); white-space: normal; } /* Die Pflichtnotiz des Vorbehalts, aufklappbar in der Zeile. */ .tab-admin .vorbehaltsfeld > summary { cursor: pointer; white-space: nowrap; } /* Aufklappzeichen wie beim Meldeformular (.melden in 10-bausteine.css): das native Dreieck aus, dafuer dasselbe +/- aus dem Zeichensatz. Zwei aufklappbare Bloecke derselben Anwendung sollen sich gleich oeffnen — sonst sieht der eine aus wie ein Systemelement und der andere wie ein gestalteter. Die Beschriftung traegt bereits .leise (Aktionsstufe 3). */ .tab-admin .vorbehaltsfeld > summary { list-style: none; } .tab-admin .vorbehaltsfeld > summary::-webkit-details-marker { display: none; } .tab-admin .vorbehaltsfeld > summary::after { content: "+"; margin-left: var(--a2); font-family: var(--schrift-zahl); font-weight: 700; } .tab-admin .vorbehaltsfeld[open] > summary::after { content: "\2212"; } /* Der geoeffnete Block darf die Zeile hoeher machen — er darf nur nicht in die Waagerechte ausbrechen, denn .zeilenaktionen ist eine nowrap-Flexreihe. Deshalb eine feste Breite und white-space: normal ab hier; ohne beides stuende die Beschriftung in einer einzigen langen Zeile und schoebe alle Knoepfe rechts aus dem Bild. Kein Ueberlagern (position: absolute): .rollbar rollt waagerecht und beschnitte einen herausragenden Block an seiner Kante. Eine hoehere Zeile ist die ehrlichere Loesung — sie zeigt, dass hier gerade etwas offen ist. */ .tab-admin .vorbehaltsfeld { position: relative; z-index: 2; } .tab-admin .vorbehaltsfeld[open] { z-index: 10; } .tab-admin .vorbehaltsfeld > form { width: 18rem; margin-top: var(--a2); white-space: normal; padding: var(--a3); background: var(--papier-rand); border: 1px solid var(--linie-stark); } .tab-admin .vorbehaltsfeld textarea { width: 100%; margin-bottom: var(--a2); font-size: var(--t-sm); background: var(--papier); } /* Knapperer Seitenabstand, damit die Tabelle inklusive aller Aktionsknöpfe vollständig im Desktop-Raster steht und "Bearbeiten" sowie "Löschen" nicht abgeschnitten werden. */ .tab-katalog thead th, .tab-katalog tbody th, .tab-katalog td { padding-left: var(--a2); padding-right: var(--a2); } .tab-admin .zeilenaktionen .tun.klein, .tab-admin .zeilenaktionen button.klein { padding: 2px var(--a3); min-height: 1.85rem; font-size: var(--t-xs); gap: var(--a1); } .tab-admin .vorbehaltsfeld > summary { font-size: var(--t-xs); } /* == Filterleiste des Katalogs =========================================== Vier Auswahlfelder statt der zwei beim Nachschlagen. Bei den 14rem des Bausteins braeche die Leiste schon auf dem Schreibtisch in drei Zeilen um. Bewusst eine eigene Klasse mit derselben Spezifitaet wie .werkzeug select (0,1,1) statt einer spezifischeren Regel: 30-admin.css laedt nach 10-bausteine.css und gewinnt dadurch, ohne den Baustein zu uebersteuern (Regel 3 am Kopf dieser Datei). ======================================================================== */ .admin-werkzeug select { width: 10rem; } /* Das Suchfeld (P8d) steht neben fuenf Auswahlfeldern und darf die Leiste nicht allein in die naechste Zeile schieben: 12rem statt der 14rem des Bausteins. Gleiche Spezifitaet wie .werkzeug input (0,1,1) — 30-admin.css laedt spaeter und gewinnt dadurch den Gleichstand (Regel 3 am Kopf). */ .admin-werkzeug input { width: 12rem; } /* == Admin-Formulare ===================================================== */ .admin-formular { display: grid; gap: var(--a6); margin: 0 0 var(--a6); } .admin-formular-schmal { max-width: 34rem; } .admin-formular .koerper > div { min-width: 0; } /* Hinweis unter einem Feld. Traegt Inhalt, deshalb kleiner, aber nicht schwaecher als die uebrige Hilfstypografie. */ .feldhinweis { font-size: var(--t-sm); color: var(--tinte-schwach); margin: var(--a1) 0 0; max-width: var(--spalte); } /* Kaestchen mit Beschriftung dahinter, nicht darueber */ .schalterreihe { display: grid; gap: var(--a4); border-top: 1px solid var(--linie); padding-top: var(--a4); } .schalter { display: grid; grid-template-columns: auto 1fr; gap: var(--a4); align-items: start; font-size: var(--t-txt); cursor: pointer; min-height: 24px; } .schalter input { margin-top: 3px; } /* == Antwortzeilen im Editor ============================================= Derselbe Rasterlook wie die Antwortzeile des Bogens: Buchstabenzelle, Text, Ankreuzfeld. Hier aber mit Eingabefeldern, deshalb eine eigene Klasse statt einer Uebersteuerung von .antwortzeile. ======================================================================== */ .antwortfelder { border: 1px solid var(--linie-stark); } .antwortfeldzeile { display: grid; grid-template-columns: 1.75rem 1fr 2.5rem; align-items: stretch; border-bottom: 1px solid var(--linie); } .antwortfeldzeile:last-child { border-bottom: 0; } .antwortfeldzeile .b { font-family: var(--schrift-zahl); font-size: var(--t-sm); display: flex; align-items: center; justify-content: center; background: var(--papier-rand); border-right: 1px solid var(--linie); color: var(--tinte-schwach); margin: 0; cursor: pointer; } /* Der Fragetext und die Antworten bleiben Lesegroesse, auch im Editor. */ .antwortfeldzeile .t { font-size: var(--t-txt); border: 0; min-height: 2.25rem; background: transparent; } .antwortfeldzeile .t:focus-visible { outline-offset: -2px; } .antwortfeldzeile .k { display: flex; align-items: center; justify-content: center; border-left: 1px solid var(--linie); } .admin-formular textarea { font-size: var(--t-txt); } /* == Papierkorb (F6) ===================================================== Sieben Spalten, aber ohne Filterleiste und ohne die sechs Zeilenaktionen des Katalogs — die Tabelle kommt deshalb mit deutlich weniger aus als .tab-katalog. 52rem: fuenf schmale Spalten, ein Fragetext, zwei Aktionen. Eigene Klasse statt einer Aenderung an .tab-admin, aus demselben Grund wie bei .tab-meldungen und .tab-protokoll. ======================================================================== */ .tab-papierkorb { min-width: 52rem; } /* Der Zeitpunkt traegt den Namen darunter und ist damit zweizeilig, die Nachbarzellen sind es nicht — oben ausgerichtet wie in der Meldeliste, sonst saehe es aus, als gehoerten sie nicht zusammen. */ .tab-papierkorb th, .tab-papierkorb td { vertical-align: top; } /* Sekundengenaue UTC-Angabe: Maschinenangabe, kein Fliesstext. Wie in .tab-protokoll bleibt sie in einer Zeile. */ .tab-papierkorb .spalte-datum { white-space: nowrap; } /* Der Name unter dem Zeitpunkt, nicht dahinter — dieselbe Setzung wie die Kennung unter dem Fragetext in der Meldeliste. */ .tab-papierkorb .spalte-datum .typ { display: block; color: var(--tinte-schwach); white-space: normal; } /* Zwei Zeichen (Zustand und "stillgelegt") duerfen untereinander stehen, statt die Spalte breit zu ziehen — wie .tab-admin .zustand .mrk. */ .tab-papierkorb .status { white-space: normal; } .tab-papierkorb .status .mrk { margin: 1px var(--a1) 1px 0; } /* Zwei Aktionen mit langen Beschriftungen ("Wiederherstellen", "Endgültig entfernen"). Nebeneinander sprengen sie die Spalte; untereinander bleibt die gefaehrliche Aktion sichtbar unter der harmlosen und wird nicht im Vorbeiziehen getroffen. */ .tab-papierkorb .zeilenaktionen { flex-direction: column; align-items: stretch; } /* == Massenvorgaenge (P8e) =============================================== Der Baustein .massen (10-bausteine.css) bringt Flaeche, Abstaende und die Zahl mit. Hier steht nur, was er nicht wissen kann: wo die Leiste sitzt und wie das Formular um sie herum aussieht. Das
ist die Huelle, nicht die Leiste — es traegt bewusst KEIN eigenes display, damit das hidden-Attribut aus static/js/admin.js greift (die Browservorgabe [hidden] { display: none } wuerde von jeder Autorenregel geschlagen). Der fehlende Zustand `.massen[hidden]` ist beim Design-Lead gemeldet; er gehoert in den Reset in 00-basis.css. ======================================================================== */ .massenformular { margin: 0 0 var(--a5); } /* Das Kaestchen und seine Beschriftung bleiben zusammen — in einer Leiste mit umbrechendem Inhalt stuende "alle" sonst am Zeilenende und "175 Treffer" am naechsten Anfang. */ .massen .alletreffer { display: flex; align-items: center; gap: var(--a2); white-space: nowrap; } /* Die Leiste liegt in Tinte; ein Kaestchen mit Tintenrahmen verschwaende darin. Rahmen aus --papier, nie eine gefuellte Flaeche (Druckregel des Systems fuer Ankreuzfelder, siehe 00-basis.css). */ .massen input[type="checkbox"] { border-color: var(--papier); } /* == Rueckfrage vor dem Massenvorgang ==================================== Eine schmale Seite mit genau einer Entscheidung. Kein .schmalform: dort steht ein Feld je Zeile, hier steht ein Feldblock mit Aufzaehlung, und der braucht mehr als 26rem. ======================================================================== */ .massenrueckfrage { max-width: 46rem; } /* Die Pflichteingabe (Tag bzw. Vorbehaltsnotiz) traegt die Beschriftungsrolle aus DESIGN.md — 13px Condensed, gedaempft. Dieselbe Setzung wie .schmalform label in 10-bausteine.css; sie steht hier noch einmal, weil der Feldblock keine Formularspalte ist und die Beschriftung sonst als Fliesstext im Absatz daneben laege (Befund C-13, gleiche Ursache). .koerper > label statt .massenrueckfrage label: die Aufzaehlung darueber fuehrt keine Beschriftungen, und eine weitere kaeme so nicht ungewollt dazu. */ .massenrueckfrage .koerper > label { font-family: var(--schrift-eng); font-size: var(--t-sm); color: var(--tinte-schwach); } .massenrueckfrage .koerper > input, .massenrueckfrage .koerper > textarea { width: 100%; } /* Die Aufzaehlung der betroffenen Fragen: eine Liste zum Ueberfliegen, keine zweite Tabelle. Kennung in Fira Mono (.typ), Fragetext daneben. */ .massenliste { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--a1); font-size: var(--t-sm); } .massenliste li { display: flex; gap: var(--a3); align-items: baseline; border-bottom: 1px solid var(--linie); padding-bottom: var(--a1); } .massenliste li:last-child { border-bottom: 0; } .massenliste .typ { flex: none; } /* == Bogen-Werkstatt (W4-6/P17b) ========================================= Entscheidung D6: hier steht ausschliesslich, was Formular und Bogenliste angeht. Die Druckansichten gehoeren Slice A (20-pruefung.css), geteilte Druckbausteine dem Design-Lead (10-bausteine.css). ======================================================================== */ /* Das Zusammenstellungsformular liegt in einem
, damit es die Liste der vorhandenen Boegen nicht zudeckt. Der Aufklapper sieht aus wie eine Aktion der Stufe 2 (Papier, 1px Rahmen), ist aber keine — deshalb kein .tun-Baustein, sondern eine eigene Regel: er schickt nichts ab, er zeigt nur mehr. Muster wie .vorbehaltsfeld > summary weiter oben, aber ueber die volle Breite: der Inhalt darunter ist ein ganzes Formular, kein Feld. */ .bogenwerkstatt { margin: 0 0 var(--a6); } .bogenwerkstatt > summary { font-family: var(--schrift-eng); font-weight: 600; font-size: var(--t-md); padding: var(--a3) var(--a5); border: 1px solid var(--linie-stark); background: var(--papier-rand); cursor: pointer; position: relative; padding-right: var(--a8); } .bogenwerkstatt > summary { list-style: none; } .bogenwerkstatt > summary::-webkit-details-marker { display: none; } .bogenwerkstatt > summary::after { content: "+"; position: absolute; right: var(--a5); font-family: var(--schrift-zahl); color: var(--tinte-schwach); } .bogenwerkstatt[open] > summary::after { content: "\2212"; } /* Der offene Aufklapper und der Feldblock darunter sind eine Flaeche: die doppelte Linie dazwischen liesse sie wie zwei Kaesten aussehen. */ .bogenwerkstatt[open] > summary { border-bottom: 0; } .bogenformular { margin: 0; } /* Ein einziger Feldblock (Rang C) mit drei Bandzeilen darin — nicht drei gestapelte Bloecke. Die Felder werden zusammen abgeschickt, also sind sie eine Feldgruppe; drei Rahmen dafuer waeren die Kastenreihe, die DESIGN.md ausschliesst. Die zweite und dritte Bandzeile brauchen eine Oberkante, .feldblock > .kopf bringt nur die untere mit. */ .bogenformular .feldblock > .koerper + .kopf { border-top: 1px solid var(--linie-stark); } /* fieldset/legend tragen Browservorgaben (Rahmen, Innenabstand, eingerueckte Legende), die dem System widersprechen. Zurueckgesetzt statt vermieden: die Kaestchengruppen sind semantisch Feldgruppen, und ein
mit einem

davor sagt einem Screenreader nicht, dass die fuenf Typen zusammen eine Wahl sind. */ .bogenfeldgruppe { border: 0; margin: 0; padding: 0; min-width: 0; } .bogenfeldgruppe > legend { padding: 0; } /* Die Zeichen "braucht die Druckbausteine aus P17c" (Pruefer-Hinweis A3) stehen hinter dem Typnamen und duerfen umbrechen, statt die Reihe zu sprengen. */ .bogenformular .schalter .mrk { margin-left: var(--a2); } /* Kategorie-Verteilung: je Zeile ein Name, ein schmales Zahlenfeld und im Fehlerfall der Fehlbetrag darunter. Ein Raster statt einer Tabelle — es sind Eingabefelder, keine Daten. */ .verteilungsraster { display: grid; gap: var(--a2) var(--a6); /* Schmale Spalten mit Absicht: je breiter die Spalte, desto weiter stehen Name und Zahlenfeld auseinander, und das Paar zerfaellt optisch. */ grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); } /* Der Name traegt die Spalte, das Zahlenfeld bleibt schmal und steht direkt dahinter: was zusammengehoert, soll auch nebeneinander stehen. Die Rang-B-Linie unter jeder Zeile haelt die Paare auseinander, wenn mehrere Spalten nebeneinander laufen. */ .verteilungszeile { display: grid; grid-template-columns: minmax(0, 1fr) 4rem; gap: var(--a3); align-items: center; border-bottom: 1px solid var(--linie); padding-bottom: var(--a2); } .verteilungszeile > label { margin: 0; } /* Der Fehlbetrag laeuft ueber beide Spalten, sonst quetschte er sich in die Feldspalte und stuende einzeilig nicht mehr lesbar da. */ .verteilungszeile > .fehlbetrag { grid-column: 1 / -1; } /* Der Fehlbetrag einer unerfuellbaren Verteilung, am betroffenen Feld. Text in --falsch wie jede andere Fehleraussage des Systems; kein Kasten — die Meldung oben traegt bereits den Balken. */ .fehlbetrag { margin: var(--a1) 0 0; font-size: var(--t-sm); color: var(--falsch); } /* Die Bogenliste. 56rem: Kennung, Turnier, Datum, Anzahl, Abzug, Zeitpunkt mit Namen darunter, eine Aktion. Eigene Klasse statt einer Aenderung an .tab-admin, aus demselben Grund wie bei .tab-meldungen und .tab-papierkorb. */ .tab-boegen { min-width: 56rem; } /* Der Zeitpunkt traegt den Namen darunter und ist damit zweizeilig, die Nachbarzellen sind es nicht — oben ausgerichtet wie im Papierkorb. */ .tab-boegen th, .tab-boegen td { vertical-align: top; } .tab-boegen .spalte-datum { white-space: nowrap; } .tab-boegen .spalte-datum .typ { display: block; color: var(--tinte-schwach); white-space: normal; } /* Zwei Zeichen ("n geaendert", "m entfernt") duerfen untereinander stehen, statt die Spalte breit zu ziehen — wie .tab-admin .zustand .mrk. */ .tab-boegen .abzug { white-space: normal; } .tab-boegen .abzug .mrk { margin: 1px var(--a1) 1px 0; } /* == Werkstattansicht eines Bogens ======================================= */ /* Der Abzugszustand im Detail. Kein Feldblock: der Inhalt ist keine Feldgruppe, sondern eine Auskunft — DESIGN.md legt Rang C ausdruecklich nur um Eingabefelder. Getrennt wird deshalb ueber Rang B. */ .abzugsstand { border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); padding: var(--a4) 0; margin: var(--a5) 0; display: grid; gap: var(--a3); } .abzugsstand p { margin: 0; } .abzugsstand .mrk { margin-right: var(--a2); } /* Die Fragenvorschau: eine Liste zum Ueberfliegen, keine zweite Tabelle — Muster wie .massenliste. Die laufende Nummer ist dieselbe, die auf dem gedruckten Bogen stehen wird, und sie steht deshalb sichtbar davor. Ueber einen Zaehler und nicht ueber den Listenpunkt: eine Zeile mit display:flex ist kein list-item mehr, ihr ::marker faellt ersatzlos weg — und die Zeile braucht flex, weil Kennung, Text und Marken in einer Reihe stehen. Der Zaehler ueberlebt das und laesst sich obendrein setzen wie eine Zahl (Fira Mono, tabellarisch). */ .bogenvorschau { margin: 0 0 var(--a6); padding: 0; list-style: none; counter-reset: bogenfrage; display: grid; gap: var(--a1); font-size: var(--t-sm); } .bogenvorschau li { display: flex; flex-wrap: wrap; gap: var(--a3); align-items: baseline; counter-increment: bogenfrage; border-bottom: 1px solid var(--linie); padding-bottom: var(--a1); } .bogenvorschau li:last-child { border-bottom: 0; } .bogenvorschau li::before { content: counter(bogenfrage) "."; flex: none; min-width: 2rem; text-align: right; font-family: var(--schrift-zahl); font-variant-numeric: tabular-nums; color: var(--tinte-schwach); } .bogenvorschau .vtext { flex: 1 1 18rem; font-size: var(--t-txt); } .bogenvorschau .vmarken { margin-left: auto; white-space: nowrap; } .bogenvorschau .vmarken .mrk { margin-left: var(--a1); } /* Die Loeschung steht am Fuss der Ansicht, nach allem, was man vorher gesehen haben soll. Rang-A-Linie darueber (Tinte, waagerecht): es ist der Schnitt zwischen "diesen Bogen ansehen" und "diesen Bogen wegwerfen". */ .bogenloeschen { border-top: var(--rang-a); padding-top: var(--a5); margin: var(--a7) 0 0; max-width: var(--spalte); } /* == Umbrueche =========================================================== Harte Regel aus 9.2: die Seite rollt nie waagerecht. Nur die Tabelle rollt, und zwar in ihrem eigenen Rahmen. ======================================================================== */ @media (max-width: 62rem) { /* 63rem: erst die Pruefstandsspalte (W4-4), dann die Auswahlspalte (P8e). */ .tab-katalog { min-width: 63rem; } } @media (max-width: 36rem) { .admin-werkzeug label { width: 100%; max-width: 100%; } .admin-werkzeug select, .admin-werkzeug input { width: 100%; max-width: 100%; } .admin-werkzeug button { width: 100%; } .admin-werkzeug .treffer { width: 100%; text-align: right; margin-left: 0; } .buch { table-layout: fixed; width: 100%; } .buch th:first-child, .buch td:first-child { width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .buch .balken { width: 43%; min-width: 3rem; } .buch th.q, .buch td.q { width: 15%; text-align: right; } .kennzahl { flex-wrap: wrap; gap: var(--a2); } /* Zwei Spalten fuer Name und Zahl bleiben; das Raster darum faellt auf eine Spalte, sonst stehen zwei Zahlenfelder nebeneinander im Nichts. */ .verteilungsraster { grid-template-columns: 1fr; } .tab-admin .zeilenaktionen { gap: var(--a2); } /* B-7: das starre Raster 1.75rem 1fr 2.5rem quetscht das einzeilige so schmal, dass lange Antworttexte abgeschnitten erscheinen. Das Ankreuzfeld raeumt in eine eigene Zeile, das Textfeld bekommt die volle zweite Spalte. Kein