/* Berührung — die eine Stelle für das angemeldete Portal. WARUM EINE EIGENE DATEI UND NICHT EIN BLOCK IN app/style.css: style.css laedt als ERSTE Stildatei (app/layout.php). Jede Moduldatei kommt danach — und bei GLEICHER Spezifitaet gewinnt die spaetere Datei. Am 08.10.2026 im Browser gemessen: `.bk .einst textarea` steht in app/style.css und in app/baukasten.css mit je (0,2,1); die Felder blieben deshalb bei 13,5px, obwohl die Regel auf 16px da war. Dasselbe bei `.tb-btn` (0,1,0) gegen app/tiptap_editor.css: 30x28px statt 44x44px. Eine halbe Stunde Suche, und ohne Browser waere es nicht aufgefallen — die Quelltext-Waechter sahen die Regel ja. Diese Datei bindet app/layout_footer.php ein, also NACH jeder Moduldatei. Damit entscheidet die Reihenfolge fuer sie, nicht gegen sie, und es braucht kein !important (DESIGN.md verbietet es zum Ueberfaerben). Die oeffentlichen Seiten haben ihren eigenen Block in app/public/public_basis.css: elf der vierzehn laden app/style.css nicht, und diese Datei bekommen sie auch nicht. Die „eine Stelle" gilt je Stilwelt. DESIGN.md, „Die Berührung-gehört-an-eine-Stelle-Regel". Seit dem 13.10.2026 any-pointer statt pointer: Ein iPad mit Tastaturhuelle meldet „Maus" und wird trotzdem mit dem Finger bedient. Der Preis: Laptops mit Touchscreen bekommen die grossen Ziele auch. Die Farben stehen als Token, nicht als Zahl. */ /* ================================================================ BERUEHRUNG — DIE EINE STELLE Bis zum 08.10.2026 gab es vier dieser Bloecke, jeden von einem anderen Modul erfunden: style.css, schulsuche.css, project_pages.css und public_basis.css. Dieselbe Frage, vier Antworten — und die Werkzeugleiste, mit der das Protokoll geschrieben wird, hatte gar keine. Wo eine Rubrik etwas nachbaut, fehlt die gemeinsame Entscheidung; die steht jetzt hier. DESIGN.md, „Die Berührung-gehört-an-eine-Stelle-Regel". Am Finger bekommt der Textknopf die volle Hoehe; an der Maus bleibt er schlank, weil er dort haeufig in einer Textzeile sitzt. ================================================================ */ @media (any-pointer: coarse) { .button-link { min-height: 44px; box-sizing: border-box; } /* Die Rubrik-Knoepfe im Hilfe-Center (und die Schnellzugriffe der Startseite) waren am Telefon 36px hoch — gemessen am 09.10.2026. */ .quick-action { min-height: 44px; box-sizing: border-box; } /* Die kleinen Knoepfe der Sitzung (Ändern, Entfernen, Punkt entfernen) hatten am Tablet keine Mindestgroesse — gefunden am 10.10.2026. */ .bk.gm .klein { min-height: 44px; padding: 0 10px; } .task-griff { width: 44px; height: 44px; } /* Die Glieder der Brotkrume waren am Telefon 35x14px (gemessen als Schultraeger, 10.10.2026). Die Tippflaeche waechst ueber Innenabstand und gleich grossen negativen Aussenabstand — das Bild bleibt gleich. */ .page-hero-crumb a { display: inline-block; padding: 15px 6px; margin: -15px -6px; } /* Optionsfelder in einer Knopfgruppe (Status Aktiv/Inaktiv u. a.): Ihre Beschriftung war 28px hoch. */ .cluster > label:has(> input[type="radio"]), .cluster > label:has(> input[type="checkbox"]) { display: inline-flex; align-items: center; min-height: 44px; } /* ── Gesamtmessung aller sechs Rollen, 10.10.2026 ─────────────────── Einzelne Symbolknoepfe OHNE Nachbarn in einer Reihe — die Ausnahme aus DESIGN.md (Symbolreihen in Listenzeilen und auf Aufgabenkarten, 26px nach WCAG 2.5.8) trifft sie nicht. Die Kanban-Symbolreihe bleibt deshalb bewusst bei 26px. */ /* Kopfleiste: Hilfe und Glocke waren 36px. */ .topbar-icon-btn { width: 44px; height: 44px; } /* „Öffentliche Seite öffnen" und „Link kopieren" in der Kopfzone (26px): Sie stehen nebeneinander, deshalb waechst die Flaeche nur in der Hoehe unsichtbar, in der Breite nimmt sie echten Platz. */ .hero-kopierknopf, .hero-symbollink { padding: 15px; margin: -15px 0; } /* Die Pfeile neben dem Monat im Kalender (30px). */ #calendarPage .cal-view-nav a { padding: 11px; } /* Daneben die Abo-Leiste (iPhone, Google, Outlook, kopieren, abgleichen): eine Werkzeugleiste, keine Listenzeile — 32px gemessen. */ #calendarPage .calendar-nav-arrow { width: 44px; height: 44px; } /* Tag/Woche/Monat/Jahr sind am Telefon wieder da (10.10.2026). */ #calendarPage .cal-view-switcher a { min-height: 44px; display: inline-flex; align-items: center; } /* Kategorie und Notiz im Treffpunkt entfernen (26px). Beide fragen nach. */ .tp-blankknopf { padding: 13px; margin: -13px 0; } /* Das Dreipunktmenue einer Konzeptkarte (32px). */ #schulprogrammModul .sp-card-more { width: 44px; height: 44px; top: 2px; right: 2px; } /* Die Liste der Fassungen eines Konzepts (14.10.2026, vorher eine Lade). */ #cfFassung .fassungen-wahl a { min-height: 44px; box-sizing: border-box; } /* Ein Haken allein in einer Tabellenzelle (18px): Die Beschriftung um ihn herum ist die Tippflaeche. */ .haken-flaeche { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; cursor: pointer; } /* ── Der iOS-Zoom (08.10.2026) ────────────────────────────────────── 16px ist die Grenze, unter der Safari auf iOS beim Antippen eines Feldes HINEINZOOMT und nicht zurueckkehrt. Beim Protokollschreiben traf das jeden Tastendruck. DIE BAUKAESTEN GEHEN UEBER EIN TOKEN, nicht ueber einen Waehler. Der erste Versuch setzte hier `.bk .einst input { font-size: 16px }` und wirkte nicht: `.bk .einst input[type=text]` in app/baukasten.css hat durch den Attributwaehler (0,3,1), `.bk.gm .einst input[type=datetime-local]` sogar (0,4,1). Im Browser gemessen — der Quelltext-Waechter sah die Regel und war gruen. `--bk-feld` wird geerbt und kennt diesen Streit nicht. */ .bk { --bk-feld: 16px; --bk-feld-blatt: 16px; } /* Felder, die an der Maus bewusst kleiner sind (Stimmen, Aufgabenstand, Mitgliederrolle, Zustaendigkeit), schreiben `max(12px, var(--bk-feld-min))` und wachsen hier mit. Am 08.10.2026 bei 744px gemessen: Sie standen als `font-size: 12px` und der Waechter sah nur die Kurzform `font:`. */ .bk { --bk-feld-min: 16px; } /* Felder ausserhalb des Baukastens (13.10.2026): Einreichung, Kommentare, Export-Profile, Prioritaet der Startseite, Kategorien u. a. standen auf 11,2–14,5px, weil ihre Rubrik sie spezifischer setzt als diese Datei. Jede solche Regel schreibt max(var(--feld-mindest, 0px), …). */ :root { --feld-mindest: 16px; } /* Testbibliothek und Auswertung hatten bis zum 11.10.2026 eine eigene Wurzel (.tb) und brauchten hier eine eigene Zeile — sieben Felder zoomten dort (09.10.2026). Seitdem ist die Wurzel `.bk tb`; die Zeile darueber gilt fuer sie mit. */ /* Der Protokolleditor erbte 0.92rem von .tiptap-editor (app/tiptap_editor.css): 14,72px, iOS zoomte bei jedem Antippen. Gilt fuer jeden TipTap-Editor im Portal. */ .tiptap-editor { font-size: 16px; } /* Die Portalfelder brauchen kein Token: hier gibt es keine Moduldatei, die sie spezifischer setzt. */ .form-input, .form-select, input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="search"], input[type="password"], input[type="date"], input[type="time"], input[type="datetime-local"], textarea, select { font-size: 16px; } /* ── Die Werkzeugleiste des Protokolls ────────────────────────────── .tb-btn war 30x28px. Die 44er-Regel nimmt Symbolreihen IN LISTENZEILEN aus (DESIGN.md, Nachtrag vom 28.09.2026) — eine Werkzeugleiste ist keine Listenzeile, und mit ihr wird geschrieben. */ .tiptap-toolbar { gap: 6px; } .tb-btn { width: 44px; height: 44px; } .tb-btn.tb-wort, .tb-btn.tb-media-btn { width: auto; min-width: 44px; padding: 0 0.75rem; } /* Der kleine Editor (Baukasten.editor, app/editor.css): Lehrplan- Sequenzen, Rasterfelder, Notizen, Textblock im Test, Text in der Auswertung. Am 09.10.2026 bei 744px gemessen: Schreibfeld 13,5px (iOS zoomt), Knoepfe 26x21px. Gleich spezifisch wie app/editor.css, durch die Ladereihenfolge staerker. */ .editor { font-size: 16px; } .editor-leiste { gap: 6px; flex-wrap: wrap; } .editor-leiste button { min-height: 44px; min-width: 44px; } .tb-sep { height: 1.6rem; } /* Dieselben Masse fuer die beiden anderen Symbolreihen der Baukaesten, die keine Listenzeilen sind: die Werkzeugleiste ueber einem Baustein und die Knoepfe an einer Auswahlmoeglichkeit. */ .bk .werkzeug button { width: 44px; height: 44px; } /* Gilt seit dem 11.10.2026 auch im Test- und Auswertungs-Baukasten: Ihre Leiste ist keine eigene Kopie (.tb-werkzeug, am 09.10.2026 mit 28x26px gemessen) mehr, sondern diese. */ .bk .moeglichkeit { grid-template-columns: 1fr 44px 44px 44px; } .bk .moeglichkeit button { height: 44px; } /* Knoepfe mit Text im Baukasten: an der Maus schlank (sie stehen dicht in der Werkbank), am Finger 44px. DESIGN.md, die 44er-Regel. Ueber ein Token, nicht ueber `.bk .knopf { … }`: Diese Datei reicht WERTE durch und definiert keine gemeinsame Komponente neu — sonst stuende die Knopfform an zwei Stellen (test_komponenten_nicht_ nachgebaut.php). Dieselbe Loesung wie bei --bk-feld. */ .bk { --bk-knopf: 44px; } /* ── Ziehgriffe ───────────────────────────────────────────────────── `.bk .block .griff` steht auf opacity 0 und erscheint erst bei Hover — auf einem Geraet ohne Zeiger also nie. Umsortieren per Finger kann app/baukasten.js seit dem 18.09.2026 (delayOnTouchOnly); es fehlte nur der sichtbare Griff. */ .bk .block .griff { opacity: 1; width: 44px; height: 44px; left: 0; top: 4px; display: flex; align-items: center; justify-content: center; } /* Der Hilfe-Link in der Kopfzone war 47x18 px — auf jeder Portalseite, in jeder Rolle. Am 04.10.2026 bei der Messung als Schüler:in mit echter Geräte-Emulation gefunden; im normalen Messrahmen fiel er nicht auf, weil dort `pointer: coarse` gar nicht greift. */ /* Die Kopfzeile der oeffentlichen Seiten war 22px hoch (02.10.2026); seit dem 10.10.2026 tragen sie die Navigation der Startseite, deren Links 44px hoch sind (.fw-nav-links a in app/landing_faecher.css). */ /* ── 04.10.2026, Messung als Lehrkraft ────────────────────────────── Drei Stellen nach demselben Muster: ein Link, der als TITEL dient und auf dem Handy der Weg hinein ist — 21 bis 22 px hoch. Der Name einer Karte ist kein Fließtext; wer ihn antippt, will hinein, nicht lesen. `min-height` allein genügt nicht, sonst klebt die Schrift oben — die Fläche muss mitwachsen und den Text mittig halten. */ .home-projekt-name, #pmPage .pm-card-title a, .hilfe-rubrikkarte h2 a { min-height: 44px; display: flex; align-items: center; } /* ── Eingezogen am 08.10.2026 ─────────────────────────────────────── Aus app/schulsuche.css: Auf Tippgeraeten braucht jede Trefferzeile eine Flaeche, die ein Finger trifft. */ .sv-treffer { padding: 14px; min-height: 44px; } /* Aus app/project/project_pages.css: Die Symbolreihe steht mit 2px Abstand; eine unsichtbar vergroesserte Trefferflaeche wuerde die Nachbarn ueberlappen. Deshalb wachsen die Knoepfe dort, wo mit dem Finger gezielt wird, und bleiben dicht, wo eine Maus zielt. */ #pmPage .pm-card-actions { gap: 0.35rem; } #pmPage .pm-icon-btn { width: 44px; height: 44px; } /* Dasselbe für die Symbolreihe der Kanban-Karte (app/project/project_view.css, 15.10.2026): Mit der Maus bleibt sie 26px dicht (DESIGN.md, 44er-Regel, Nachtrag 28.09.), unter dem Finger wächst sie samt Lücke — die Reihe bricht um. */ .task-actions { gap: 0.35rem; } .kanban-icon-btn { width: 44px; height: 44px; } /* Die eine Filterform über Listen (14.10.2026): Startseite, Projekte, … */ .filter-zeile .chip { min-height: 44px; box-sizing: border-box; align-items: center; } /* ── Etappe E, 13.10.2026 (Bestandsaufnahme iPad, Touch) ───────────── Alles, was hier steht, war unter 44px und ist kein Symbol in einer Listenzeile — die Ausnahme der 44er-Regel trifft es also nicht. */ /* Das Schliessen jedes Dialogs (30×30 gemessen) — ueber ein Token, denn die Komponente steht in app/style.css und wird hier nicht nachgebaut. */ :root { --schliessen-mass: 44px; } /* Genehmigen, Ablehnen, Zurücknehmen, Endgültig löschen: Textknöpfe mit Folgen. Ein Fehlgriff kostet hier am meisten. */ .gw-knoepfe button, .ev-knopf { min-height: 44px; box-sizing: border-box; } /* Die Fußzeilenlinks wachsen unsichtbar — wie die Brotkrume. */ .footer a { display: inline-block; padding: 13px 4px; margin: -13px -4px; } #calendarPage .cal-tag-plus { width: 44px; height: 44px; } /* Der Termin bleibt ein Block (Leerzeichen nach der Uhrzeit, „…" bei langen Titeln): 3px + 38px Zeile + 3px Polster = 44px. */ #calendarPage .cal-event-chip { min-height: 44px; box-sizing: border-box; line-height: 38px; } /* Ziehgriffe ausserhalb des Baukastens. Der Griff im Baukasten steht oben (.bk .block .griff). */ #schulprogrammModul .karte .griff, #schulprogrammModul .kapitel > .kopf > .kgriff, .fg-griff, .ex-griff { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; } .fg-knopf.klein { min-height: 44px; box-sizing: border-box; } #tplLibPage .tl-card-link, .sp-card-link { min-height: 44px; display: flex; align-items: center; } /* ── Messung nach dem Ausliefern, 13.10.2026 (docs/tests/mess_ipad.js) ─ Die gemeinsamen Knoepfe waren am Finger 41–43px hoch — auf fast jeder Seite, in jeder Rolle. Sie stehen in app/style.css und lesen das Token. */ :root { --knopf-mindest: 44px; } /* „Neue Aufgabe" auf der Startseite (28px) und die Knoepfe der Freigaben (Hinzufuegen 29–37px, Entfernen 26px). */ .todo-manual-toggle { min-height: 44px; } .fg-dazu { min-height: 44px; box-sizing: border-box; } .fg-weg-x { width: 44px; height: 44px; } }