/* okto-darstellung.css — persönliche Darstellung (Schriftgröße, Bewegung) * =========================================================================== * WOZU: Barrierefreiheit gehört nicht in EINE Ansicht. Wer die Schrift * vergrößern muss, um den Chat zu lesen, muss auch den Stundenplan und die * Aufgabenliste lesen können. Diese Datei wird deshalb vom gemeinsamen * Seitenrahmen (page_shell.php) auf JEDER Seite geladen. * * WIE: includes/darstellung.php hängt die Einstellung als Attribut an das * -Element, bevor die Seite gezeichnet wird: * * * * Damit gibt es kein Aufblitzen der alten Größe, wie es bei einer Umstellung * per JavaScript unvermeidlich wäre. * * RECHTLICHER RAHMEN: Schulen sind öffentliche Stellen; für sie gelten BITV * 2.0 und EN 301 549 (für Web: WCAG 2.1 AA). Einschlägig sind hier 1.4.4 * (Text auf 200 % vergrößerbar) und 2.3.3 (Bewegung abschaltbar). * =========================================================================== */ /* --------------------------------------------------------------------------- * 1. SCHRIFTGRÖSSE * * Zwei Hebel, weil die Oberfläche beides mischt: * • font-size auf verändert die rem-Grundlage. Alles, was in rem * bemessen ist, wächst automatisch mit. * • --okto-schrift ist derselbe Faktor als Zahl. Ansichten mit festen * px-Werten (der Chat ist der größte Fall) rechnen damit: * font-size: calc(0.95rem * var(--okto-schrift)). * * Warum nicht einfach Browser-Zoom empfehlen? Der vergrößert auch Bilder und * Abstände; auf einem Handy bleibt dann kaum Platz. Hier wächst der Text. * ------------------------------------------------------------------------- */ :root { --okto-schrift: 1; } html[data-schrift="klein"] { font-size: 14.7px; --okto-schrift: 0.92; } html[data-schrift="normal"] { font-size: 16px; --okto-schrift: 1; } html[data-schrift="gross"] { font-size: 18.4px; --okto-schrift: 1.15; } html[data-schrift="sehr_gross"] { font-size: 20.8px; --okto-schrift: 1.3; } html[data-schrift="riesig"] { font-size: 24px; --okto-schrift: 1.5; } /* Bei sehr großer Schrift kippen enge Knopfreihen sonst aus dem Bild. Umbrechen ist die verträglichere Lösung als Abschneiden. */ html[data-schrift="sehr_gross"] .btn-row, html[data-schrift="riesig"] .btn-row, html[data-schrift="sehr_gross"] .form-actions, html[data-schrift="riesig"] .form-actions { flex-wrap: wrap; } /* Bildschirmleser-Hinweis: Die Einstellung ersetzt NICHT den Browser-Zoom. Beides zusammen muss weiterhin funktionieren — deshalb steht im Viewport der Seiten bewusst kein user-scalable=no. */ /* --------------------------------------------------------------------------- * 2. BEWEGUNG AUS (eigene Einstellung) * * okto-motion.css schaltet Animationen bereits ab, wenn das BETRIEBSSYSTEM * "Bewegung reduzieren" meldet. Das reicht in der Schule nicht: Auf einem * Leihgerät oder einem gemeinsam genutzten Rechner kann niemand mal eben die * Systemeinstellung ändern — und viele wissen nicht, dass es sie gibt. * Deshalb hier derselbe Regelsatz noch einmal, ausgelöst vom eigenen Schalter * im Profil. * * Die Wiederholung ist unvermeidbar: Eine @media-Abfrage und ein * Attributselektor lassen sich in CSS nicht mit ODER verbinden. * ------------------------------------------------------------------------- */ html[data-bewegung="reduziert"] *, html[data-bewegung="reduziert"] *::before, html[data-bewegung="reduziert"] *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } html[data-bewegung="reduziert"] .admin-nav-item:hover, html[data-bewegung="reduziert"] a.ok-card:hover, html[data-bewegung="reduziert"] .course-card:hover, html[data-bewegung="reduziert"] .clickable-card:hover, html[data-bewegung="reduziert"] .study-set-card:hover, html[data-bewegung="reduziert"] .btn-primary:active, html[data-bewegung="reduziert"] .btn-outline:active, html[data-bewegung="reduziert"] .btn-secondary:active, html[data-bewegung="reduziert"] .skbtn:active { transform: none; } /* Der Ladeplatzhalter behält seine Form (sie sagt, was gleich kommt), nur das Dauer-Schimmern hört auf — genau das stört bei vestibulären Beschwerden. */ html[data-bewegung="reduziert"] .okto-skel { animation: none !important; background: rgba(255,255,255,0.07); } /* Eintreffende Chat-Nachrichten fliegen nicht mehr ein, sie sind einfach da. Ohne diese Zeile bliebe der Anfangszustand der Animation stehen (0.94-fach verkleinert, durchsichtig), weil die Dauer zwar auf 1 ms sinkt, der Startwert aber trotzdem gesetzt wird. */ html[data-bewegung="reduziert"] .message, html[data-bewegung="reduziert"] .okto-neu-rein { animation: none !important; opacity: 1 !important; transform: none !important; } /* --------------------------------------------------------------------------- * 3. NUR FÜR BILDSCHIRMLESER * * Text, der vorgelesen, aber nicht gezeigt wird. Zwei Anwendungen: * • die Ansage-Stellen für Statusmeldungen (OW.ansagen in oktowise-ux.js) * • Beschriftungen, die für Sehende aus dem Zusammenhang hervorgehen * * WARUM NICHT display:none ODER visibility:hidden: Beides nimmt das Element * aus dem Barrierefreiheits-Baum - dann liest es auch niemand vor. Der Text * muss da sein, nur nicht zu sehen. * * WCAG 4.1.3 (Statusmeldungen) und 2.4.1 (Blöcke überspringen). * ------------------------------------------------------------------------- */ .okto-nur-vorlesen { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* --------------------------------------------------------------------------- * 4. SPRUNG ZUM INHALT * * Wer mit der Tastatur bedient, musste sich bisher auf JEDER Seite zuerst * durch die gesamte Navigation tabben, bevor der Inhalt kam - bei über * 30 Menüpunkten im Dashboard sind das über 30 Tastendrücke pro Seite. * * Der Sprung ist unsichtbar, bis er den Fokus bekommt. Dann steht er sichtbar * oben links. Genau so soll es sein: Für die Maus ändert sich nichts, für die * Tastatur wird es der erste erreichbare Punkt. * * WCAG 2.4.1 (Blöcke überspringen, Stufe A). * ------------------------------------------------------------------------- */ .okto-sprung { position: absolute; left: 8px; top: -60px; /* außerhalb des Bildes geparkt */ z-index: 2147483600; /* über allem, auch über Dialogen */ background: #4CAF50; color: #fff; font-weight: 700; padding: 10px 18px; border-radius: 0 0 10px 10px; text-decoration: none; transition: top 0.15s ease; } .okto-sprung:focus { top: 0; outline: 3px solid #fff; outline-offset: -6px; } /* Bei abgeschalteter Bewegung nicht hereinfahren, sondern da sein. */ html[data-bewegung="reduziert"] .okto-sprung { transition: none; } @media print { .okto-sprung { display: none; } } /* ========================================================================= * PROFILBILDER IN LEHRERLISTEN (01.10.2026) * * Grundlage fuer okto_avatar_bild() aus includes/darstellung.php. Hier steht * NUR, was fuer alle drei Spielarten gleich ist (Bild, Icon, Buchstabe): * mittig, nichts laeuft ueber, Bild sauber zugeschnitten. * * ABSICHTLICH OHNE width/height: Die Groesse gehoert der aufrufenden Seite * (.rs-av ist 38px, .todo-avatar 44px, .avatar in grading.php wieder anders). * Der eigene