Ein gelungenes Update erkennt man daran, dass sich niemand neu orientieren muss. Bei saferinternet.at war das die Vorgabe: Eltern, Lehrende, Jugendarbeit und Jugendliche finden Materialien, Suche und Menü weiterhin an gewohnter Stelle. Unter der Oberfläche wurden der TYPO3 Core, PHP, der Großteil der Extensions, das Datenmodell der Inhaltselemente und die Suche erneuert.
Dieser Beitrag zeigt, was technisch passiert ist, und dokumentiert knapp 50 Änderungen, wo vorhanden mit Vorher-Nachher-Screenshots. Außerdem geht es um den Styleguide und darum, wie wir unseren Upgrade-Skill mit den Erfahrungen aus diesem Projekt weiterentwickelt haben.
Ausgangslage: von TYPO3 12 auf TYPO3 14.3
saferinternet.at lief auf TYPO3 12.4 mit PHP 8.2. Ziel waren die aktuelle Langzeitversion TYPO3 14 LTS und PHP 8.5 . Alle Abhängigkeiten, Dienste und Konfigurationen wurden umgestellt; Powermail, News, Shop, SEO und Scheduler verhalten sich wie bisher.
- Seiten
- 1.914
- Inhaltselemente
- 16.335
- News
- 1.412
- FAL-Dateien
- 9.688
- Seitenadressen vor und nach dem Umbau verglichen
- 1.357
- Screenshots im Pixelvergleich
- 360
Was technisch passiert ist
Core, PHP und Werkzeuge
Zwischen TYPO3 12 und 14 liegen zwei Hauptversionen. Einen großen Teil der mechanischen Arbeit haben Werkzeuge erledigt: Rector migrierte den PHP-Code, Fractor die übrigen Dateien wie TypoScript, FlexForms und Fluid, und PHPStan prüfte das Ergebnis statisch. Was sich nicht automatisch lösen ließ, haben wir von Hand auf die Schnittstellen von TYPO3 14 umgestellt: Page- und User-TSconfig, Fluid-Templates, TCA, Middleware, Dependency Injection und die projekteigenen Extensions.
Extensions im Vergleich
| Feature | Vorher (TYPO3 12) | Nachher (TYPO3 14) |
|---|---|---|
| TYPO3 Core | ^12.4 | 14.3.7 |
| EXT:solr / EXT:tika | ^12.0 | 14.0.1 / 14.0.0 |
| news | ^11.4 | 14.1.1 |
| powermail | ^12.4 | TYPO3-14-Branch (siehe unten) |
| Inhaltselemente | Mask ^8.3 | Content Blocks 2.4.9 |
| container | 3.1 | 4.1.0 |
| vhs | 7 | 8.0.0 |
| typo3-console | 8.1 | 9.0.1 |
| plan2net/webp | 5.1 | 14.8.3 |
| Yoast SEO | 10 | 12.1.2 |
| solr-file-indexer | 3 | 5.0.1 |
| friendlycaptcha | 0.1.3 | 2.3.0 |
| Datei-Bereinigung | wv_file_cleanup | webcon-file-cleanup |
Entfernt wurden typoscript-rendering sowie die in TYPO3 14 entfallenen Pakete
cms-recordlist und cms-t3editor. Neu sind webcon-glossary für das A–Z-Glossar,
cweagans/composer-patches für dokumentierte Patches an Fremd-Extensions und ein
Font-Awesome-Provider für Inline-SVG-Icons.
Die Suche läuft auf Solr 10 mit EXT:solr 14 ; den Text aus PDF-Dateien liest Tika aus. Zum Go-live standen 1.408 Dokumente in der Indexierungswarteschlange: 714 Seiten, 567 News und 127 Dateien.
Mask wird zu Content Blocks
Die eigenen Inhaltselemente waren mit Mask gebaut.
Sie sind jetzt native Content Blocks : Jedes
Element ist ein Ordner mit einer config.yaml, aus der TYPO3 TCA, Datenbankfelder und
Backend-Formular ableitet. Die bestehenden CType-Bezeichner blieben erhalten, damit alle
16.335 Inhaltselemente ohne Neuanlage weiterlaufen. Im Backend zeigen alle Blöcke ihre
Vorschau nach demselben Muster: Symbol und Name des Elements.
Aufräumen hinter den Kulissen
Ein großer Teil der Arbeit bestand darin, Altlasten zu entfernen:
sys_templatedurch Site Sets ersetzt. Die TypoScript-Datensätze im Seitenbaum sind jetzt versionierte Dateien in Site Sets .- Ungenutzter Webpack-Build entfernt, samt der mit eingecheckten
node_modules. - Font-Awesome-Webfont entfernt. Icons stehen als Inline-SVG direkt im HTML, statt erst im Browser per JavaScript ausgetauscht zu werden.
- AVIF für verarbeitete Bilder, WebP für Browser ohne AVIF-Unterstützung.
- Skripte nur bei Bedarf: Die Formularprüfung von Powermail und das JavaScript der Suche werden nur auf Seiten geladen, die tatsächlich ein Formular oder eine Suche enthalten.
- Security-Header: Vor dem Go-live haben wir lokal 100 zufällig gewählte Seiten mit insgesamt 4.096 Browser-Anfragen geprüft: keine CSP-Verletzung, keine blockierte Ressource.
Bootstrap: vorerst bei Version 4.6
Um Probleme zu vermeiden, sind wir vorerst bei Bootstrap 4.6.x geblieben .
Ein Wechsel auf Bootstrap 5 hätte Markup, Data-Attribute und JavaScript in vielen
Templates verändert, also genau das, was der Invarianz-Beweis unverändert halten soll.
Die sichtbaren Verbesserungen stecken stattdessen in einer eigenen Designsystem-Schicht
über dem bestehenden Bundle: tokens.css, base.css und components.css.
Zuerst belegen wir, dass das Upgrade nichts verändert. Erst danach verbessern wir gezielt. Wer beides vermischt, weiß bei einer Abweichung nicht mehr, ob sie vom Core-Update oder von der Designänderung stammt.
Evolution statt Revolution
Der Relaunch räumt auf, statt die Website neu zu erfinden. Die Navigation ist dafür das deutlichste Beispiel: Das Hauptmenü öffnet an derselben Stelle wie bisher, mit derselben Gliederung. Neu sind größere, besser lesbare Zeilen und ein klarer Kopfbereich, in dem „Menü“ und „Schließen“ nebeneinanderstehen.
Den Vorher-Nachher-Vergleich dazu finden Sie unten unter Punkt 4.
Alles bleibt an seinem Platz, die Bedienung wird besser. Menü, Suche, Warenkorb und Zielgruppen sitzen weiterhin im Seitenkopf. Verbessert wurden Lesbarkeit, Klickflächen, Fokusmarkierung und Rückmeldungen.
Die Inhalte bleiben, die Orientierung wird besser. Kein Artikel wurde für das Design umgeschrieben. Suchtreffer bekommen Textauszüge und ein Datum. Ältere News bekommen einen Hinweis zur Aktualität, und KI-Bilder sind direkt am Motiv gekennzeichnet.
Die Markenfarbe bleibt, der Kontrast stimmt. Das Orange #F39200 bleibt die
Markenfarbe. Als Textfarbe auf Weiß erreicht es aber nur ein Kontrastverhältnis von
2,35:1. Textlinks verwenden deshalb den dunkleren Ton #A65E00 mit 4,97:1, auf orangen
Flächen steht dunkler Text mit 6,55:1. WCAG verlangt für normalen Text mindestens 4,5:1
.
Alle Änderungen im Detail
Die versteckte Relaunch-News auf saferinternet.at dokumentiert die Vergleiche zwischen der bisherigen und der neuen Version. Hier sind alle vollständig wiedergegeben, jeweils mit Problem, Lösung, Grund und beiden Screenshots.
Zugeklappt zeigt jeder Eintrag eine Kurzfassung. Lange Seitenaufnahmen sind in der Vorschau abgeschnitten; per Klick sehen Sie das ganze Bild.
49 Änderungen · Eintrag anklicken für Problem, Lösung und Screenshots
1. Startseite: Platz für alle Angebote
Ganze Breite statt schmaler Seitenspalte; klar getrennte Bereiche für News, Angebote, Ratgeber und Hilfe.ÖffnenSchließen
Problem: Nachrichten, Ratgeber und Aktionen mussten sich den Platz mit einer schmalen rechten Spalte teilen. Die Angebote standen in unterschiedlichen Formaten nebeneinander.
Lösung: Die Startseite nutzt jetzt die ganze Breite und ist in klar getrennte Bereiche gegliedert: News, Angebote, Social-Media-Ratgeber, Rat & Hilfe, Newsletter und Broschüren.
Warum: Die Seite lässt sich Bereich für Bereich erfassen, ohne zwischen Hauptspalte und Seitenleiste zu springen.
2. Zielgruppen direkt im Seitenkopf
Vier Zielgruppen mit Aufklappmenüs; Unterseiten ohne Umweg über die Übersicht.ÖffnenSchließen
Problem: Die Zielgruppenleiste verlinkte nur auf vier Übersichtsseiten. Zu einzelnen Angeboten ging es erst über diese Übersicht oder über das Hauptmenü.
Lösung: Schulen, Eltern, Jugendarbeit und Jugendliche sind direkt im Seitenkopf erreichbar. Aufklappmenüs führen auch zu Unterseiten, zum Beispiel direkt zu den Unterrichtsbeispielen.
Warum: Bis zum passenden Angebot braucht es einen Zwischenschritt weniger.
3. Suche und Zielgruppen am Handy
Eigene Zeile für Suche und Zielgruppenauswahl; Menü, Logo und Warenkorb darüber.ÖffnenSchließen
Problem: Am Handy lagen die Zielgruppenlinks unter dem Kopfbereich. Auf dem schmalen Bildschirm brauchen sie eine andere Anordnung als am Desktop.
Lösung: Suche und eine aufklappbare Zielgruppenauswahl stehen in einer eigenen Zeile. Menü, Logo und Warenkorb bleiben darüber erreichbar, eine feine Linie trennt den Kopf vom Inhalt.
Warum: Die wichtigsten Einstiege sind auch am Handy sofort griffbereit.
4. Hauptmenü: klarer Kopf, größere Zeilen
Größere weiße Menüzeilen; dunkler Kopf mit „Menü“ und „Schließen“; Gliederung unverändert.ÖffnenSchließen
Problem: Das Hauptmenü bestand aus kompakten grauen Zeilen, der Schließen-Button stand für sich. Die Menüübersicht hob sich kaum von ihrem Kopf ab.
Lösung: Größere weiße Menüzeilen mit kräftigeren Linktexten. Ein dunkler Kopf fasst „Menü“ und „Schließen“ zusammen. Gliederung und Pfeile zu den Untermenüs bleiben gleich.
Warum: Größere Zeilen sind leichter zu lesen und zu treffen. Wer das Menü kennt, findet sich trotzdem sofort zurecht.
5. Nachrichten leichter überfliegen
News-Marke im Bild, Datum über dem Titel; breitere Karten, bündige Buttons.ÖffnenSchließen
Problem: Die Nachrichtenkarten hatten eine eigene Kopfzeile für „News“ und Datum. Im schmalen Textbereich brachen längere Titel oft um.
Lösung: „News“ steht als kleine Marke im Bild, das Datum direkt über dem Titel. Die Karten sind breiter, die Texte kompakter, die Weiterlesen-Buttons bündig. Größere Pfeile und deutlichere Punkte führen durch die Nachrichten.
Warum: Die Nachrichten lassen sich schneller überfliegen.
6. Aktionen neben den Workshops
Safer Internet Day mit eigener Karte; Bild, Kurztext und klarer Button.ÖffnenSchließen
Problem: Der Safer Internet Day stand als schmales Motiv in der rechten Spalte. Für einen erklärenden Text blieb kaum Platz.
Lösung: Der Safer Internet Day hat eine eigene Karte neben den Workshops und einer aktuellen FAQ, mit Bild, Kurztext und eindeutigem Button.
Warum: Das Angebot erklärt sich direkt auf der Startseite.
7. Social-Media-Ratgeber im eigenen Band
Eigenes orangefarbenes Band für die Ratgeber; alle neun Plattformen bleiben.ÖffnenSchließen
Problem: Die neun Plattform-Symbole steckten in einer schmalen Karte zwischen anderen Angeboten.
Lösung: Die Ratgeber haben ein eigenes orangefarbenes Band. Am Desktop stehen Einführung und Symbole nebeneinander, auf kleineren Bildschirmen passt sich das Raster an. Alle neun Zugänge bleiben erhalten.
Warum: Die Plattformen sind auf einen Blick zu finden.
8. Rat & Hilfe mit festem Platz
A1 digital.campus, Rat auf Draht und Stopline gemeinsam unter „Rat & Hilfe“.ÖffnenSchließen
Problem: A1 digital.campus, Rat auf Draht und Stopline standen als unauffällige Logos in der rechten Seitenleiste, ohne gemeinsame Überschrift.
Lösung: Die drei Angebote stehen gemeinsam unter „Rat & Hilfe“, mit farbigen Logos in eigenen Feldern und einer kurzen Einführung.
Warum: Wer Hilfe sucht, erkennt den Bereich sofort als Zugang zu Anlaufstellen und Partnerangeboten.
9. Newsletter: vorher wissen, was kommt
Themen, Versandhäufigkeit und Abbestellen schon vor der Anmeldung sichtbar.ÖffnenSchließen
Problem: Das Newsletterband forderte vor allem zum Abonnieren auf. Was im Newsletter steht, erfuhr man dort nicht.
Lösung: Das Band nennt Themen, Materialien und Veranstaltungstipps, die ungefähre Versandhäufigkeit und „Kostenlos und jederzeit abbestellbar“.
Warum: Wer weiß, was kommt, kann besser entscheiden, ob sich die Anmeldung lohnt.
10. Broschüren schon auf der Startseite erkennen
Größere Cover über die volle Breite; deutliche Pfeile; direkter Weg zu allen Broschüren.ÖffnenSchließen
Problem: Im Broschürenband waren die Cover klein, auch Pfeile und Punkte nahmen wenig Platz ein.
Lösung: Größere Cover über die volle Breite, gut erkennbare Pfeile und Punkte und ein klarer Zugang zu allen Broschüren.
Warum: Die Cover sind erkennbar, und das Blättern durch die Broschüren fällt leichter.
11. Mehr Orientierung im Footer
Kurzbeschreibung und Links in drei Gruppen statt einer einzelnen Linkzeile.ÖffnenSchließen
Problem: Unter den Partnerlogos stand nur eine Zeile mit Links wie Kontakt, Impressum, Datenschutz und Glossar. Viele Angebote fehlten dort.
Lösung: Eine kurze Beschreibung von Saferinternet.at, darunter Links in drei Gruppen: „Themen & Angebote“, „Services“ und „Rechtliches“. Die unterstützenden Organisationen stehen darüber mit gleichmäßig verteilten Logos.
Warum: Wer am Seitenende ankommt, findet von dort aus weiter.
12. EU-Förderhinweis auch am Handy
EU-Logo mit Förderhinweis jetzt auch im mobilen Footer.ÖffnenSchließen
Problem: Am Handy war das EU-Logo aus dem Desktop-Kopf ausgeblendet, und auch im Footer fehlte der Förderhinweis.
Lösung: Das EU-Logo mit Förderhinweis steht in einer kompakten, dezent umrahmten Fläche im mobilen Footer und ist verlinkt.
Warum: Der Förderhinweis ist auf allen Bildschirmgrößen sichtbar.
13. Suchtreffer mit mehr Kontext
Suchfeld über den Ergebnissen; Textauszug, Typ und Datum je Treffer; Filter als Checkboxen.ÖffnenSchließen
Problem: Die allgemeine Suche lief nur über das Feld im Seitenkopf. Manche Treffer bestanden fast nur aus Titel und Symbol, ihr Inhalt war schwer einzuschätzen.
Lösung: Ein Suchfeld steht direkt über den Ergebnissen. Typ, Textauszug, hervorgehobene Suchwörter und das Aktualisierungsdatum helfen bei der Auswahl. Checkboxen machen die Filter nach Typ, Thema und Zielgruppe deutlich. Aktuelle Artikel werden stärker gewichtet und stehen weiter oben.
Warum: Schon in der Trefferliste ist erkennbar, welcher Beitrag passt, und aktuelle Inhalte sind schneller gefunden.
14. Ansicht und Trefferzahl selbst wählen
Liste oder Kacheln; 10 bis 100 Treffer pro Seite; Suchbegriff und Filter bleiben.ÖffnenSchließen
Problem: Die allgemeine Suche zeigte immer eine Liste mit zehn Treffern pro Seite.
Lösung: Zusätzlich gibt es eine Kachelansicht und die Wahl zwischen 10, 20, 50 oder 100 Treffern pro Seite. Die Liste aktualisiert sich sofort und behält Suchbegriff und Filter.
Warum: Wer viele Treffer vergleichen will, muss weniger blättern.
15. Unterrichtsbeispiele gezielt filtern
Themen und Schulstufen als kombinierbare Checkboxen mit Trefferzahlen.ÖffnenSchließen
Problem: Themen und Schulstufen waren unterstrichene Links mit kleinen Trefferzahlen. Als Auswahl waren sie schwerer zu erkennen als ein Formularfeld.
Lösung: Checkboxen mit klar zugeordneten Trefferzahlen. Themen und Schulstufen lassen sich kombinieren, die Trefferzahl pro Seite ist wählbar. Suche und Schnellfilter bleiben direkt erreichbar.
Warum: Lehrende sehen sofort, was gewählt ist, und können Filter gezielt kombinieren.
16. Broschüren durchsuchen
Neue Suche im Broschürenservice; „Bestellbar“ als eigener Filter ganz oben.ÖffnenSchließen
Problem: Der Broschürenservice ließ sich nach Themen, Zielgruppen und Bestellbarkeit filtern, aber nicht durchsuchen.
Lösung: Eine Suche nach Thema oder Stichwort, Trefferzahlen und eine wählbare Seitengröße. „Bestellbar“ steht als eigener Filter ganz oben, Suchbegriff und Kategorien lassen sich kombinieren.
Warum: Wer einen Titel oder ein Thema kennt, findet das Material direkt, statt die lange Liste durchzugehen.
17. Cover, Kategorien und Aktionen auf einen Blick
Größere Cover, Kategorien beim Titel; Aktionen immer in derselben Reihenfolge.ÖffnenSchließen
Problem: Die Materialzeilen zeigten kleine Cover, Beschreibung und Datum. Themen und Zielgruppen waren am Eintrag nicht ablesbar.
Lösung: Größere, vollständig sichtbare Cover und Kategorien direkt beim Titel. Beschreibung, Datum und Aktionen stehen immer in derselben Reihenfolge. Neben „Download“ und gegebenenfalls „Bestellen“ gibt es jetzt „Lesen“.
Warum: Schon am Eintrag ist erkennbar, für wen und zu welchem Thema ein Material gedacht ist, und es lässt sich sofort online lesen.
18. Materialdetails übersichtlich
Größeres Cover, „Lesen“ neben „Download“; Plus- und Minus-Tasten für die Menge.ÖffnenSchließen
Problem: Der Bestelldialog zeigte ein kleines Cover mit Download-Link, die Menge kam in ein einfaches Zahlenfeld.
Lösung: Ein größeres Cover, „Lesen“ neben „Download“, Plus- und Minus-Tasten für die Menge und die Höchstmenge direkt beim Feld. Ein farbig abgesetzter Hinweis hebt die Lieferinformation hervor.
Warum: Die Mengenwahl ist einfacher, und die wichtigen Informationen stehen dort, wo man sie braucht.
19. Materialdetails am Handy
Cover und Aktionen passen sich der Breite an; beschriftete Felder, klar abgegrenzte Buttons.ÖffnenSchließen
Problem: Am Handy mussten Cover, langer Text und Bestellfelder auf engem Raum Platz finden. Das ergab kleine Elemente und eine lange Textfolge.
Lösung: Cover und Aktionsleiste passen sich der Breite an. Beschriftete Felder und klar abgegrenzte Buttons führen durch den Dialog, der Text lässt sich im geöffneten Fenster lesen.
Warum: Auch am Handy lässt sich ein Material bequem ansehen und bestellen.
20. Warenkorb-Bestätigung
Kurztext und größeres Cover; grüne Bestätigung; klare nächste Schritte.ÖffnenSchließen
Problem: Die Bestätigung zeigte ein kleines Cover, den Titel und die Anzahl. Eine kurze Erinnerung an den Inhalt fehlte.
Lösung: Kurztext und größeres Cover. Eine grüne Rückmeldung bestätigt, dass das Material im Warenkorb liegt. „Weiterstöbern“ und „Zum Warenkorb“ zeigen die nächsten Schritte.
Warum: Man sieht sofort, dass es geklappt hat und wie es weitergeht.
21. Newsletter-Einwilligung ankreuzen
Leere Pflichtcheckbox für die Einwilligung; E-Mail als Pflichtfeld gekennzeichnet.ÖffnenSchließen
Problem: Das Anmeldeformular zeigte den Einwilligungstext, aber keine eigene Checkbox.
Lösung: Eine zunächst leere Pflichtcheckbox mit verständlicher Beschriftung. Auch die E-Mail-Adresse ist als Pflichtfeld gekennzeichnet. Der Text zu Versand, Datenverarbeitung und Widerruf bleibt lesbar.
Warum: Die Einwilligung wird zu einer bewussten Entscheidung statt zu einem Text, an dem man vorbeiliest.
22. Statistik-Auswahl in der Seite
Statistik-Auswahl im Stil der Website statt in einem eigenen Rahmen.ÖffnenSchließen
Problem: Die Auswahl zur Webstatistik steckte in einem eigenen Rahmen mit fester Höhe. Schrift und Platzbedarf passten nicht zum übrigen Inhalt.
Lösung: Die Auswahl erscheint im Stil der Website, passt sich dem Text an und bleibt auch auf kleinen Bildschirmen lesbar.
Warum: Die Datenschutzseite wirkt aus einem Guss, und die Auswahl ist auf jedem Gerät bedienbar.
23. Verwandte Seiten direkt erreichen
Seitenpfad über der Überschrift; Leiste „In diesem Bereich“, inzwischen ausgeblendet.ÖffnenSchließen
Problem: Auf der Workshop-Kostenseite führte die Pfadnavigation nur zurück zur übergeordneten Seite. Andere Seiten desselben Bereichs waren dort nicht aufgelistet.
Lösung: Der Seitenpfad steht über der Überschrift. Dazu kam die Leiste „In diesem Bereich“, die zum Beispiel von den Kosten direkt zu Ablauf, Zielgruppen oder Anfrage führt.
Warum: Zwischen zusammengehörigen Seiten sollte man schneller wechseln können.
Nachtrag: Kurz nach dem Go-live wurde die Leiste „In diesem Bereich“ standardmäßig ausgeblendet. Sie lässt sich zentral über eine Einstellung wieder einschalten. Mehr dazu unten bei Nummer 32.
24. Den aktuellen Abschnitt erkennen
Aktiver Abschnitt hell hinterlegt; haftende Leiste mit orangefarbener Unterkante.ÖffnenSchließen
Problem: Die Abschnittsleiste bot Sprunglinks, zeigte beim Scrollen aber kaum, wo man gerade ist.
Lösung: Der aktive Abschnitt ist hell hinterlegt. Die oben haftende Leiste hat eine orangefarbene Unterkante und einen Schatten.
Warum: Auch weit unten auf einer langen Seite bleibt klar, wo man sich befindet.
25. Abschnitte am Handy
Kompakte waagrechte Leiste statt langer Liste; Pfeile zu weiteren Abschnitten.ÖffnenSchließen
Problem: Am Handy standen die Abschnittslinks untereinander und nahmen vor dem Inhalt viel Höhe ein.
Lösung: Die Abschnitte stehen in einer kompakten, waagrechten Leiste. Pfeile führen zu Einträgen außerhalb des sichtbaren Bereichs, der aktive Abschnitt ist markiert.
Warum: Der Inhalt beginnt früher, und die Abschnitte bleiben trotzdem erreichbar.
26. Glossar: der aktuelle Buchstabe
Aktiver Buchstabe mit orangefarbener Linie; Pfeile am Handy.ÖffnenSchließen
Problem: In der Buchstabenleiste sahen alle Buchstaben gleich aus. Welcher Abschnitt gerade gelesen wird, war nicht erkennbar.
Lösung: Der aktive Buchstabe hat eine orangefarbene Linie und kräftigere Schrift. Die breite Leiste bleibt, am Handy helfen Pfeile zu weiteren Buchstaben.
Warum: Im langen Glossar bleibt die Orientierung erhalten.
27. Ältere Nachrichten kennzeichnen
Eigene Box „Hinweis zur Aktualität“ mit Uhr-Symbol statt gelber Zeile.ÖffnenSchließen
Problem: Der Altershinweis war eine einzelne gelbe Zeile zwischen Kategorien und Datum.
Lösung: Eine eigene Box mit Uhr-Symbol und der Überschrift „Hinweis zur Aktualität“, unter der Zeile mit Datum und Kategorien und vor der Überschrift.
Warum: Dass ein Artikel älter ist, fällt auf, bevor man zu lesen beginnt.
28. Linklisten und Textlisten einheitlich
Gleiche Aufzählungspunkte, Einzüge und Abstände für alle Listen.ÖffnenSchließen
Problem: Die Inhaltsübersicht im WhatsApp-Ratgeber hatte eine eigene Listendarstellung. Punkte und Einzüge wichen von normalen Aufzählungen ab.
Lösung: Linklisten und Textlisten haben dieselben Aufzählungspunkte, Einzüge und Zeilenabstände.
Warum: Der Wechsel zwischen Übersicht und Text wirkt ruhiger.
29. Tipps und Hinweise einheitlich
Einheitlich orangefarbene Symbole auf hellorangen Kreisen.ÖffnenSchließen
Problem: Der Hinweis im WhatsApp-Ratgeber hatte ein graues Symbol in einem weißen Kreis mit grauer Kontur, andere Hinweise bereits orangefarbene Akzente.
Lösung: Alle diese Elemente haben orangefarbene Symbole auf hellorangen Kreisen, Text und Links stehen daneben.
Warum: Tipps und Zusatzinformationen sind auf allen Seiten als dieselbe Art von Inhalt erkennbar.
30. Die Suche lässt sich leichter treffen
Bedienfläche von 30 auf 44 Pixel vergrößert; Optik unverändert.ÖffnenSchließen
Problem: Die Lupe im Seitenkopf lag in einer nur 30 × 30 Pixel großen Schaltfläche.
Lösung: Die anklickbare Fläche ist jetzt 44 × 44 Pixel groß. Das orange Feld und die Lupe sehen gleich aus wie vorher; der zusätzliche Rand ist unsichtbar.
Warum: Die Suche ist eine der wichtigsten Funktionen. Mit dem Finger oder einer unruhigen Hand trifft man eine größere Fläche zuverlässiger, ohne dass sich der Seitenkopf verändert.
31. Text und Bilder stehen auf einer Linie
Text, Bilder und Bildunterschriften in einer gemeinsamen Spaltenbreite.ÖffnenSchließen
Problem: Einleitung, Fließtext, Bilder und Bildunterschriften hatten teilweise unterschiedliche Breiten. Auf Newsseiten waren die Kanten sichtbar versetzt.
Lösung: Normale Inhalte folgen jetzt derselben Spaltenbreite. Ausdrücklich breite Bilder, etwa der Beratungsbanner, behalten ihr Format.
Warum: Gemeinsame Kanten machen eine Seite ruhiger und leichter zu lesen. Geprüft wurde das an 21 typischen Seiten in mehreren Bildschirmbreiten.
32. Direkt zum Inhalt statt zuerst zur Bereichsleiste
Leiste „In diesem Bereich“ standardmäßig aus; zentral wieder einschaltbar.ÖffnenSchließen
Problem: Über dem Inhalt stand die zusätzliche Leiste „In diesem Bereich“ mit allen Unterseiten. Sie schob den eigentlichen Text nach unten.
Lösung: Die Leiste ist standardmäßig ausgeblendet. Eine zentrale Einstellung blendet sie bei Bedarf wieder ein.
Warum: Leser:innen kommen schneller zum Inhalt. Die Funktion bleibt erhalten, falls das Team sie später wieder nutzen möchte.
33. Hinweise mit Symbol lassen sich formatieren
Rich-Text-Editor für Hinweise mit Symbol; 5 Pixel mehr Abstand; 1.251 Elemente.ÖffnenSchließen
Problem: Beim Textelement mit Symbol fehlte im Backend der Editor für formatierten Text. Zwischen Symbol und Text war wenig Abstand.
Lösung: Der Text lässt sich jetzt mit dem Rich-Text-Editor bearbeiten, der Abstand zum Symbol ist um 5 Pixel größer. Vorhandene Texte und Links bleiben erhalten. Die einheitlichen Farben dieser Hinweise kamen schon mit dem Relaunch (Nummer 29).
Warum: Redakteur:innen können Hinweise so formatieren wie jeden anderen Text. Betroffen sind 1.251 Elemente; ein Umbau der Inhalte war dafür nicht nötig.
34. Die Abschnittsleiste bleibt beim angeklickten Ziel
Markierung bleibt beim angeklickten Ziel statt zu springen; ohne Screenshot.ÖffnenSchließen
Problem: Auf Seiten wie „Schulen“ markierte die Abschnittsleiste nach einem Klick beim weichen Scrollen nacheinander alle Zwischenabschnitte und sprang teils auf den vorherigen Abschnitt zurück. Auf schmalen Bildschirmen lief die Leiste diesen Sprüngen hinterher.
Lösung: Der angeklickte Abschnitt bleibt markiert, bis das Scrollen endet. Wer selbst mit Mausrad, Finger oder Tastatur scrollt, übernimmt sofort wieder.
Warum: Die Markierung soll zeigen, wohin man wollte, statt zu flackern. Einen Vorher-Nachher-Screenshot gibt es nicht, weil der Fehler nur in der Bewegung sichtbar ist. Ein Browsertest prüft deshalb neun Abläufe in drei Bildschirmbreiten, in Chromium und WebKit.
35. Permalink für alle, keine pauschale Lieferwarnung
Permalink für alle sichtbar; pauschale Lieferwarnung entfernt.ÖffnenSchließen
Problem: Den Permalink zu einem Material sahen nur Administrator:innen. Gleichzeitig warnten Materialfenster und Bestellbestätigung pauschal vor mehreren Wochen Lieferzeit.
Lösung: Der Permalink steht wieder allen Besucher:innen zur Verfügung. Die pauschale Lieferwarnung ist aus beiden Ansichten entfernt.
Warum: Materialien lassen sich so direkt weitergeben, etwa per E-Mail an eine Schule. Und eine pauschale Warnung schreckt vom Bestellen ab, auch wenn sie im Einzelfall nicht zutrifft.
36. Vorschaubilder zeigen die ganze erste Seite
Ganze erste PDF-Seite als Vorschau; Drehen jetzt im Backend.ÖffnenSchließen
Problem: Bei der Broschüre „Mama, darf ich dein Handy?“ schnitt und drehte eine fest programmierte Sonderregel die Vorschau. Nach dem Austausch der PDF war das Ergebnis falsch. Für andere Cover gab es keine Möglichkeit, die Ausrichtung zu korrigieren.
Lösung: Die Sonderregel ist entfernt; die Vorschau zeigt die ganze erste PDF-Seite. Im Backend gibt es jetzt das Feld „Vorschaubild drehen“ mit 0, 90, 180 oder 270 Grad.
Warum: Die Vorschau soll aussehen wie die echte Broschüre. Die Redaktion kann die Ausrichtung jetzt selbst korrigieren, ohne dass jemand Code ändern muss. Die Original-PDF bleibt dabei unverändert.
37. Details-Knopf mit Symbol, Mengenlimit als Hinweis
Informationssymbol am Details-Knopf; Mengenlimit als grauer Hinweis.ÖffnenSchließen
Problem: Der Knopf „Details“ hatte kein Symbol und ging neben „Lesen“ und „Download“ unter. Das Mengenlimit stand als umrandete Fläche neben dem Zähler und sah aus wie ein weiterer Knopf.
Lösung: „Details“ hat ein Informationssymbol. Im Bestellfenster steht „Maximal 50 Stück“ als kleiner grauer Hinweis unter dem Zähler. Die Zahl hängt vom Material ab; 50 ist das gezeigte Beispiel.
Warum: Was man anklicken kann, soll wie ein Knopf aussehen, und was nur informiert, nicht.
38. Materialkarten wie im Katalog, schärfere Vorschauen
Gleiche Karten wie im Katalog; schärfere PDF-Vorschauen.ÖffnenSchließen
Problem: Materialkarten auf normalen Inhaltsseiten sahen anders aus als im Broschürenkatalog: andere Covermaße, Schatten, Überschriften und Knöpfe. Manche Vorschauen waren unnötig unscharf.
Lösung: Die Karten folgen jetzt dem Katalog. Die PDF-Vorschau wird höher aufgelöst erzeugt und sauberer verkleinert, auch die WebP-Qualität ist besser.
Warum: Dasselbe Material soll überall gleich aussehen. Eine Grenze bleibt: Was im Originalfoto unscharf ist, kann auch die neue Vorschau nicht scharf machen.
39. Fehler im Bestellformular auf einen Blick
Fehlerübersicht mit Links zu jedem Feld; für Screenreader vorbereitet; mobil vereinfacht.ÖffnenSchließen
Problem: Wer das Bestellformular unvollständig abschickte, bekam keine verständliche Gesamtmeldung. Dazu kamen Schwächen bei der Eingabetaste, der Mengenprüfung und der mobilen Ansicht.
Lösung: Nach dem Absenden springt der Fokus zu einer Fehlerübersicht am Anfang; jeder Eintrag führt direkt zum Feld. Screenreader lesen Fehler und Meldung am Feld vor. Eingaben bleiben erhalten. Fehlertexte sind dunkelgrau, Rot bleibt auf Rahmen und kleine Symbole beschränkt.
Warum: Ein Bestellformular darf niemanden ratlos zurücklassen, auch nicht mit Tastatur oder Screenreader. Auf dem Live-System liefen danach 76 Prüfungen und fünf automatische Barrierefreiheitsscans ohne Befund. Einen vollständigen manuellen Screenreader-Test ersetzt das nicht.
Mobil wurde die Übersicht nach dem ersten Entwurf noch einmal vereinfacht: eine Spalte, mehr Abstand, heller Hintergrund statt roter Fläche.
40. Eine Bestätigungsmail, die wirklich kommt und lesbar ist
Eigene Kundenbestätigung mit allen Angaben; lesbar gesetzt, mit Artikeltabelle.ÖffnenSchließen
Problem: Die Dankeseite versprach eine Bestätigung an die bestellende Person, verschickt wurde aber nur eine Mail an die Abwicklung. Die erste Kundenmail kam dann in Schreibmaschinenschrift, mit engen Abständen und aneinandergerückten Mengen.
Lösung: Eine eigene Kundenbestätigung enthält Materialien, Mengen, Lieferadresse und Anmerkung. Sie ist in Arial gesetzt, mit klaren Abständen, einer einfachen Artikeltabelle und zusätzlich einer reinen Textfassung. Ein Mailproblem verwirft keine bereits angenommene Bestellung.
Warum: Wer etwas bestellt, will schwarz auf weiß sehen, was ankommt und wohin.
41. Der nächste Schritt nach der Bestellung ist sichtbar
Orange statt grau; mindestens 44 Pixel hoch; Kontrast 6,55:1.ÖffnenSchließen
Problem: Die Schaltfläche „Weitere Broschüren entdecken“ auf der Bestellbestätigung war grau und ging neben dem Text unter.
Lösung: Sie ist jetzt orange mit dunkler Schrift, mindestens 44 Pixel hoch und hat einen gut sichtbaren Tastaturfokus. Der Textkontrast liegt bei 6,55:1, beim Darüberfahren mit der Maus bei 5,33:1.
Warum: Nach der Bestellung ist das Stöbern in weiteren Materialien der naheliegende nächste Schritt. Die Farbe folgt dem Orange der Marke und bleibt trotzdem gut lesbar.
42. Formulare: Korrekturen aus einer Prüfung aller Live-Formulare
Nur Ziffern bei Teilnehmerzahlen; Mengenfehler direkt im Fenster; echter Datenschutzlink.ÖffnenSchließen
Problem: Eine Prüfung der Formulare auf der Live-Website fand mehrere kleine Fehler: Bei Teilnehmerzahlen ließ sich alles Mögliche eintippen, ungültige Broschürenmengen wurden nicht direkt im Bestellfenster gemeldet, und in der Newsletter-Einwilligung des Kontaktformulars stand Code statt eines Links zur Datenschutzerklärung.
Lösung: Teilnehmerzahlen nehmen nur Ziffern an; am Handy erscheint die Zifferntastatur, dazu eine verständliche Fehlermeldung. Ungültige Mengen werden abgewiesen, bevor sich der Warenkorb ändert, und direkt im Fenster gemeldet. Die Einwilligung enthält einen echten Link zur Datenschutzerklärung.
Warum: Jede Anmeldung und Bestellung soll vollständig und richtig ankommen. Einen Vorher-Nachher-Screenshot gibt es dafür nicht; die Fehler wurden vor der Korrektur in automatischen Tests nachgestellt.
43. Kurzlinks führen wieder ans Ziel
Kurzlinks behalten ihren Pfad; 13 geprüfte Ersatzziele.ÖffnenSchließen
Problem: Kurzlinks wie /681 landeten durch die Umschreibung von Domain und Pfad auf einer Fehlerseite. Dazu kamen Weiterleitungen auf veraltete oder nicht mehr veröffentlichte Seiten.
Lösung: Die Weiterleitung von si.or.at auf www.si.or.at behält jetzt den ursprünglichen Pfad. Eine geprüfte Reparaturliste ergänzt 13 Ersatzziele.
Warum: Ein Kurzlink, der auf einer Fehlerseite endet, ist ein toter Link. Im abschließenden Vergleich funktionierten 60 zuvor fehlgeschlagene Prüfungen wieder. Ohne Screenshot, weil es um Adressen geht, nicht um Oberflächen.
44. Kartenlabels direkt im Backend
Textfeld „Label auf dem Bild“; Vorschau aller Karten im Backend.ÖffnenSchließen
Problem: Karten auf Übersichtsseiten tragen ein kurzes Label auf dem Bild, etwa „Quiz“ oder „Infoblätter“. Dafür war bisher ein Pflicht-Icon nötig.
Lösung: Es gibt das Textfeld „Label auf dem Bild“; bleibt es leer, erscheint kein Label. Die Backend-Vorschau zeigt alle Karten in der gespeicherten Reihenfolge, und „Label bearbeiten“ öffnet direkt das passende Feld.
Warum: Die Redaktion soll Labels ohne Umweg pflegen können. Getestet haben wir das an 24 Inhaltselementen mit insgesamt 163 Karten. Ein Vorher-Bild des Backends gibt es nicht; das Bild zeigt den neuen Stand.
45. Die Unterrichtssuche sortiert nach Relevanz
Mit Suchbegriff zählt die Relevanz; ohne Suchbegriff das Neueste zuerst.ÖffnenSchließen
Problem: Mit Suchbegriff sortierte die Unterrichtssuche nach dem Änderungsdatum. Wie gut ein Treffer zum Suchbegriff passt, spielte für die Reihenfolge keine Rolle.
Lösung: Mit Suchbegriff zählt jetzt zuerst die Relevanz, dann das Datum und zuletzt die bisherige Reihenfolge. Ohne Suchbegriff sind Unterrichtsbeispiele und Broschüren nach Datum sortiert, das Neueste zuerst.
Warum: Die passendsten Unterrichtsbeispiele sollen oben stehen. Bei gleicher Relevanz springt die Reihenfolge außerdem nicht mehr zufällig hin und her.
46. Priorisierte Suchbegriffe
Bis zu fünf Begriffe pro Seite, News oder Datei; höhere Platzierung bei Treffern.ÖffnenSchließen
Problem: Die Redaktion konnte nicht steuern, bei welchen Suchbegriffen eine bestimmte Seite, News oder Datei weit oben erscheinen soll.
Lösung: Bei Seiten, News und Dateien lassen sich bis zu fünf priorisierte Suchbegriffe hinterlegen. Trifft eine Suche genau einen davon, stuft die Suche das Ergebnis höher ein. Die Obergrenze prüft der TYPO3 DataHandler beim Speichern, also auch ohne JavaScript im Formular.
Warum: Die Redaktion kennt die Fragen der Besucher:innen und kann wichtige Inhalte gezielt auffindbar machen.
47. Newsletter: klare Rückmeldungen
Genaue Rückmeldung je Fall; gemeinsamer Dienst mit Double-Opt-in.ÖffnenSchließen
Problem: Die Rückmeldung nach einer Newsletter-Anmeldung war allgemein gehalten. Sie konnte eine neue Bestätigungsmail ankündigen, obwohl die Adresse schon angemeldet war.
Lösung: Alle Anmeldewege nutzen einen gemeinsamen Dienst mit Double-Opt-in. Nutzer:innen erfahren, was tatsächlich passiert ist: bereits angemeldet, Bestätigung ausstehend, Bestätigungsmail versendet, gesperrt oder Fehler. Höchstens 30 Versuche pro IP-Adresse in 15 Minuten schützen vor Missbrauch.
Warum: Wer sich anmeldet, soll wissen, ob noch etwas zu tun ist. Ohne Screenshot, weil sich der Unterschied in den Meldungen je nach Fall zeigt.
48. Suchfeld im Backend immer sichtbar
Suchfeld im Modul Datensätze nie mehr zugeklappt.ÖffnenSchließen
Problem: Im Modul Inhalt → Datensätze konnte das Suchfeld zugeklappt sein, wenn es in einer früheren Sitzung zugeklappt wurde. Wer es suchte, fand es nicht.
Lösung: Das Suchfeld bleibt immer eingeblendet. Ein automatischer Test deckt 27 Fälle ab.
Warum: Die Suche ist im Backend das schnellste Werkzeug, um einen Datensatz zu finden. Das Bild zeigt den neuen Stand.
49. Weiterleitungen aufräumen (lokal fertig)
Doppel ausblenden, Ketten sicher verkürzen, Vorschau vor dem Speichern; noch nicht live.ÖffnenSchließen
Problem: Im Datenstand vom Oktober gab es 1.522 Weiterleitungen, darunter 90 identische Doppel und 33 mögliche Weiterleitungsketten.
Lösung: Ein neues Backend-Modul blendet Doppel aus, verkürzt Ketten nur dort, wo das gefahrlos möglich ist, und zeigt jede Änderung vor dem Speichern als Vorschau.
Warum: Weniger Doppel und kürzere Ketten machen den Bestand übersichtlicher. Das Modul ist lokal fertig und getestet, aber noch nicht live.
Eine weitere Änderung seit dem Go-live betrifft KI-Bilder. Sie steht mit eigenem Vorher-Nachher-Vergleich im nächsten Abschnitt.
KI: Kennzeichnung am Bild und KI-gestützte Arbeit
KI-Bilder direkt am Motiv kennzeichnen
saferinternet.at verwendet einzelne KI-generierte Illustrationen. Bisher stand das nur im Bildtext. Jetzt gibt es in der Dateiverwaltung die Checkbox „Mit KI erstellt oder bearbeitet“. Ist sie gesetzt, erscheint das offizielle EU-Symbol für KI-generierte Inhalte rechts unten am Bild, mit der für Screenreader lesbaren Beschriftung „Mit künstlicher Intelligenz erstellt oder bearbeitet“.
Die Kennzeichnung hängt an der Datei, nicht an einzelnen Templates. Sie gilt in allen Sprachen und in allen Bildvarianten. Die Entscheidung trifft die Redaktion; es gibt keine automatische Einstufung nach Dateiname oder Bildinhalt. Den rechtlichen Rahmen für Transparenz bei KI-Inhalten setzt Artikel 50 der KI-Verordnung .
KI arbeitet zu, Menschen entscheiden
Einen großen Teil der technischen Arbeit an diesem Update haben KI-Agents mit unseren TYPO3 Agent Skills erledigt: Migrationen, Tests, Screenshots, Vergleiche und Dokumentation. Entschieden haben Menschen: welche Abweichung akzeptiert wird, welche Inhalte sich ändern dürfen und wann etwas live geht. Der Upgrade-Skill selbst spielt nie etwas auf das Live-System. Wie Skills funktionieren, erklärt unser Agent Skills FAQ.
Der Upgrade-Skill: von der Schleife zum Ablaufplan
Was der Skill macht
Für das Upgrade haben wir typo3-upgrade-run verwendet. Ein Skill ist eine ausführliche
Arbeitsanleitung, nach der ein KI-Agent ein TYPO3-Upgrade Schritt für Schritt durchführt.
Das Ziel ist einfach: Nach dem Upgrade sieht die Website genauso aus und funktioniert genauso
wie vorher. Für Spezialaufgaben wie Content Blocks, Vite, Solr, Rector und Fractor gibt es
eigene, kleinere Skills.
Früher: eine Schleife
Bei saferinternet arbeitete der Skill noch in einer Schleife: planen, umsetzen, prüfen, korrigieren und wieder von vorne, bis Vorher und Nachher übereinstimmten. Das hat funktioniert, war aber langsam. Egal ob ein Fehler in der Gestaltung, in den Daten oder in der Messung selbst lag: Jedes Problem schickte den ganzen Ablauf zurück an den Anfang.
Heute: ein Ablaufplan
Heute arbeitet der Skill eher wie ein Navi. Bei einer Baustelle berechnet es nur die Umleitung, statt die ganze Fahrt neu zu starten. Jeder Schritt hat ein klares Ziel und liefert einen Nachweis, dass er erledigt ist. Je nach Ergebnis geht es auf einem festgelegten Weg weiter. Ein CSS-Fehler wird dort behoben, wo er entstanden ist, und danach werden nur die betroffenen Seiten neu verglichen.
Der Ablauf in sechs Schritten
- Bestand aufnehmen. Welche TYPO3-Version, welche Erweiterungen und welche Seiten gibt es?
- Vorher messen. Vor dem Umbau wird jede Seite in zwei getrennten Durchläufen erfasst. Erst wenn beide identisch sind, gilt dieser Stand als verbindliche Vergleichsbasis. So lassen sich spätere Abweichungen eindeutig dem Umbau zuordnen.
- Umbauen. TYPO3 geht zuerst auf 13.4, dann auf 14.3. Rector und Fractor passen den Code automatisch an, den Rest erledigen wir von Hand, etwa den Wechsel von Mask zu Content Blocks.
- Spezialaufgaben parallel erledigen. Inhaltselemente, Frontend-Build, Suche, Rechte und Editor werden gleichzeitig bearbeitet. Sperren sorgen dafür, dass sich die Arbeiten nicht gegenseitig stören.
- Nachher vergleichen. Dieselben Seiten werden noch einmal aufgenommen. Weicht etwas ab, bestimmt der Skill zuerst die Ursache und behebt dann genau diese.
- Ein Mensch gibt frei. Erst wenn alles übereinstimmt, bestätigt eine verantwortliche Person das Ergebnis. Danach kommen die gewollten Verbesserungen, etwa strukturierte Daten.
Feste Grenzen
- Jeder Schritt darf höchstens dreimal starten. Im ganzen Lauf sind höchstens zwölf Wiederholungen erlaubt.
- Eine Reparatur darf höchstens zehn Dateien oder 400 Zeilen ändern. Für mehr braucht es eine dokumentierte Freigabe.
- Umgebaut und geprüft wird in einer lokalen DDEV-Kopie der Website. Daten von der Live-Website übernimmt der Skill nur mit Freigabe und nur lesend. Veröffentlicht wird höchstens auf Staging, nie auf der Live-Website.
Wann ist das Upgrade fertig? Erst wenn alle sechs Prüfungen erledigt sind. Offene Punkte werden gezielt behoben und neu geprüft.
Warum am Ende ein Mensch freigibt
Bestandene Tests allein sind noch keine Freigabe. Der Skill kontrolliert, ob alle Nachweise zum aktuellen Stand von Code und Daten gehören. Für jeden offenen Punkt gibt es einen eigenen Lösungsweg: Sieht eine Seite anders aus, wird die Ursache gesucht. Hakt es im Backend, werden die Rechte repariert. Fehlt nur die Freigabe, muss nichts neu gemessen werden. Den Abschluss bestätigt immer eine verantwortliche Person.
Wann sich der Aufwand lohnt
Ein Ablaufplan ist aufwendiger als eine Schleife. Schritte, Wege und Grenzen müssen zueinander passen, und Projekte mit anderem Aufbau brauchen neue Wege. Für Minor- und Patch-Updates ist das zu viel. Die laufen über unsere zentrale GitLab-Pipeline: Live-Daten nach Staging kopieren, Pakete aktualisieren, Screenshots vergleichen, Freigabe auf Knopfdruck. Bei einem Sprung über zwei Hauptversionen, bei dem sich auch Daten ändern, lohnt sich der Aufwand.
powermail für TYPO3 14: Early Access statt Warten
powermail ist auf saferinternet.at die Grundlage für Kontakt-, Anfrage- und Bestellformulare. Als das Upgrade lief, gab es powermail für TYPO3 14 noch nicht öffentlich im TYPO3 Extension Repository.
in2code bietet dafür das Early Access Programm an: Gegen einen Kostenbeitrag gibt es frühzeitigen Zugang zu den TYPO3-14-Versionen der in2code-Extensions über ein privates GitHub-Repository . Die öffentliche TER-Version von powermail für TYPO3 14 ist laut in2code ab Januar 2027 geplant. Diesen Zugang haben wir gekauft.
Warum wir das für richtig halten: in2code beschreibt powermail als funktional abgeschlossen („feature complete“) und das Early Access Programm als zumindest teilweise Refinanzierung der Entwicklungsarbeit . Wer eine Open-Source-Extension produktiv nutzt und früh auf eine neue TYPO3-Version will, finanziert damit genau die Arbeit, die diesen frühen Umstieg möglich macht: Anpassung an neue Core-Versionen, Wartungsreleases und Fehlerbehebung. Das ist fairer und nachhaltiger, als auf die öffentliche Version zu warten oder einen eigenen, ungewarteten Fork dauerhaft zu betreiben.
Details und Konditionen stehen auf der Seite des in2code Early Access Programms. Zur Extension selbst: powermail bei in2code .
Im Projekt ist powermail derzeit über den Branch typo3-v14 eingebunden
, der die Sicherheitskorrekturen der offiziellen
Entwicklung übernimmt. Sobald die öffentliche Version erscheint, wechselt das Projekt darauf.
Ein Styleguide, der mit der Website mitwächst
Zum Relaunch gehört ein Styleguide, der nicht als PDF in einer Schublade liegt, sondern
aus dem produktiven CSS erzeugt wird. Grundlage ist eine Datei design.md mit den
redaktionellen Regeln. Ein Build-Skript übernimmt daraus Version und Prüfdatum, liest
alle CSS-Variablen aus tokens.css und erzeugt drei Ausgaben, die immer zusammenpassen: tokens.json, die Styleguide-Seite in TYPO3 und eine einseitige PDF-Übersicht.
Im Prüfmodus bricht das Skript ab, sobald eine Ausgabe nicht mehr zum CSS passt.
- CSS-Variablen --si-*
- 70
- berechnete Kontrastnachweise
- 16
- Content Blocks im Inventar
- 27
- Abstandsmodul
- 4 px
Die Typografie bleibt bei Roboto in den Schnitten 400, 500 und 700 . Eine zusätzliche Schrift für Überschriften würde das Erscheinungsbild verändern und kommt deshalb nicht dazu. Die Grundform ist kantig, ohne abgerundete Ecken. Schaltflächen sind auf 44 × 44 px ausgelegt; die Untergrenze von 24 × 24 px stammt aus WCAG 2.5.8 , und kleinere Ausnahmen sind mit ihren tatsächlichen Maßen dokumentiert.
Die Design-Tokens aus tokens.json
Die folgende Übersicht liest tokens.json direkt ein, ohne Abschrift: Farbrollen,
Graustufen, Zielgruppenfarben, alle 16 Kontrastnachweise mit einer Probe in den echten
Farben, die Typografie in Roboto aus den Schriftdateien des Projekts, Abstände und Maße.
Die Liste aller CSS-Variablen und das Content-Block-Inventar lassen sich aufklappen.
tokens.json · Version 2026.10.24 · geprüft am 24.10.2026 · TYPO3 14.3.7 · Content Blocks 2.4.9
Farbrollen
Markenorange
--si-orange · #F39200
Orange · Hover
--si-orange-hover · #DB8300
Orange für Text
--si-orange-text · #A65E00
Link / Fokus
--si-blue · #106CAB
Link · Hover
--si-blue-dark · #0B4E7D
Überschrift / Label
--si-ink · #212529
Fließtext
--si-body · #333333
Sekundär auf Weiß
--si-gray-600 · #6C757D
Sekundär auf Hellgrau
--si-gray-700 · #495057
Grundfläche
--si-white · #FFFFFF
Neutrale Fläche
--si-gray-100 · #F8F9FA
Neutrale Aktion
--si-gray-200 · #E9ECEF
Dekorative Kontur
--si-gray-300 · #DEE2E6
Orange · Fläche
--si-orange-tint · #FDF0DC
Erfolg
--si-success · #28711F
Fehler
--si-danger · #B02A37
Neutrale Stufen 50 bis 950
Elf bereits vorhandene Grautöne, nach Helligkeit geordnet. Die Stufen sind Dokumentationsindizes, keine neuen CSS-Variablen.
50
#FFFFFF
100
#F8F9FA
200
#E9ECEF
300
#DEE2E6
400
#CED4DA
500
#ADB5BD
600
#6C757D
700
#495057
800
#343A40
900
#333333
950
#212529
Zielgruppenfarben
Nur dekorativ und immer zusammen mit dem Namen der Zielgruppe. Das Gelb für Jugendliche ist keine Textfarbe.
Eltern
#F19805
Jugendliche
#F1FF14
Schulen
#22AFDF
Jugendarbeit
#E36AA7
Ältere Menschen
#9FC225
Kontrastnachweise
Alle 16 Farbpaare mit berechnetem Kontrastverhältnis. Die Probe links zeigt das Paar in den echten Farben.
| Probe | Verwendung | Kontrast | Minimum | Ergebnis |
|---|---|---|---|---|
| Aa | Markenorange als Text auf WeißMarkenorange auf Grundfläche | 2,35:1 | 4,5:1 | nicht erlaubt |
| Aa | Weiße Beschriftung auf OrangeGrundfläche auf Markenorange | 2,35:1 | 4,5:1 | nicht erlaubt |
| Aa | Orange als alleinige UI-Kontur auf WeißMarkenorange auf Grundfläche | 2,35:1 | 3:1 | nicht erlaubt |
| Aa | Dunkle Beschriftung auf OrangeÜberschrift / Label auf Markenorange | 6,55:1 | 4,5:1 | erlaubt |
| Aa | Dunkle Beschriftung beim Orange-HoverÜberschrift / Label auf Orange · Hover | 5,33:1 | 4,5:1 | erlaubt |
| Aa | Orangefarbener Text auf WeißOrange für Text auf Grundfläche | 4,97:1 | 4,5:1 | erlaubt |
| Aa | Regulärer Link auf WeißLink / Fokus auf Grundfläche | 5,59:1 | 4,5:1 | erlaubt |
| Aa | Link-Hover auf WeißLink · Hover auf Grundfläche | 8,75:1 | 4,5:1 | erlaubt |
| Aa | Fließtext auf WeißFließtext auf Grundfläche | 12,63:1 | 4,5:1 | erlaubt |
| Aa | Sekundärtext auf WeißSekundär auf Weiß auf Grundfläche | 4,69:1 | 4,5:1 | erlaubt |
| Aa | Sekundärtext gray-600 auf HellgrauSekundär auf Weiß auf Neutrale Fläche | 4,45:1 | 4,5:1 | nicht erlaubt |
| Aa | Sekundärtext gray-700 auf HellgrauSekundär auf Hellgrau auf Neutrale Fläche | 7,76:1 | 4,5:1 | erlaubt |
| Aa | Erfolgstext auf ErfolgsflächeErfolg auf Erfolg · Fläche | 5,33:1 | 4,5:1 | erlaubt |
| Aa | Fehlertext auf FehlerflächeFehler auf Fehler · Fläche | 5,44:1 | 4,5:1 | erlaubt |
| Aa | Informationstext auf InfoflächeLink · Hover auf Info · Fläche | 7,76:1 | 4,5:1 | erlaubt |
| Aa | Neu-/Tipp-Beschriftung auf zarter OrangeflächeÜberschrift / Label auf Orange · Fläche | 13,72:1 | 4,5:1 | erlaubt |
Typografie
H1Das Internet sicher nutzen.
H2Das Internet sicher nutzen.
H3Das Internet sicher nutzen.
H4Das Internet sicher nutzen.
H5Das Internet sicher nutzen.
H6Das Internet sicher nutzen.
Fließtext in Roboto mit 16 px und Zeilenhöhe 1,65. Antworten nennen zuerst den nächsten sinnvollen Schritt, Fachbegriffe werden erklärt.
Roboto 400Roboto 500Roboto 700Kursiv
- 40 · 28 · 20 · 17 · 16 · 14
- Überschriften H1 bis H6 in px, Gewicht 500
- 28 · 24 · 20 · 17 · 16 · 14
- dieselben Stufen unter 576 px
- Tahoma, Helvetica Neue
- Ersatzschriften, danach Helvetica, Arial, sans-serif
Abstände
- --si-space-14 px
- --si-space-28 px
- --si-space-316 px
- --si-space-424 px
- --si-space-532 px
- --si-space-648 px
Raster und Maße
- 576 · 768 · 992 · 1200
- Breakpoints in px
- 1140 px
- maximale Containerbreite
- 70ch
- maximale Zeilenlänge im Fließtext
- 0 px
- Eckenradius, Chips 2 px
- 44 × 44 px
- Komfortziel für Bedienelemente
- 24 × 24 px
- Untergrenze nach WCAG 2.5.8
- 3 px
- Fokusrahmen in Blau, 2 px Abstand
- 176 / 80 px
- Coverspalte Desktop / mobil
Alle 70 CSS-Variablen
| Variable | Wert | Aufgelöst |
|---|---|---|
| --si-orange | #F39200 | #F39200 |
| --si-orange-hover | #DB8300 | #DB8300 |
| --si-orange-text | #A65E00 | #A65E00 |
| --si-orange-tint | #FDF0DC | #FDF0DC |
| --si-orange-tint-2 | #FEF5E8 | #FEF5E8 |
| --si-orange-tint-3 | #FEFAF0 | #FEFAF0 |
| --si-orange-tint-4 | #FFFCF7 | #FFFCF7 |
| --si-ink | #212529 | #212529 |
| --si-body | #333333 | #333333 |
| --si-blue | #106CAB | #106CAB |
| --si-blue-dark | #0B4E7D | #0B4E7D |
| --si-white | #FFFFFF | #FFFFFF |
| --si-nav-path-bg | var(--si-orange-tint) | #FDF0DC |
| --si-nav-current-bg | var(--si-orange) | #F39200 |
| --si-nav-hover-bg | var(--si-gray-100) | #F8F9FA |
| --si-nav-hairline | var(--si-gray-200) | #E9ECEF |
| --si-gray-100 | #F8F9FA | #F8F9FA |
| --si-gray-200 | #E9ECEF | #E9ECEF |
| --si-gray-300 | #DEE2E6 | #DEE2E6 |
| --si-gray-400 | #CED4DA | #CED4DA |
| --si-gray-500 | #ADB5BD | #ADB5BD |
| --si-gray-600 | #6C757D | #6C757D |
| --si-gray-700 | #495057 | #495057 |
| --si-gray-800 | #343A40 | #343A40 |
| --si-gray-900 | #212529 | #212529 |
| --si-success | #28711F | #28711F |
| --si-success-tint | #E8F4E5 | #E8F4E5 |
| --si-danger | #B02A37 | #B02A37 |
| --si-danger-tint | #F8E7E9 | #F8E7E9 |
| --si-info-tint | #E8F3F9 | #E8F3F9 |
| --si-warning-tint | #FDF0DC | #FDF0DC |
| --si-type-news | #106CAB | #106CAB |
| --si-type-page | #6C757D | #6C757D |
| --si-type-material | #F39200 | #F39200 |
| --si-type-topic | #28711F | #28711F |
| --si-audience-eltern | #F19805 | #F19805 |
| --si-audience-jugendliche | #F1FF14 | #F1FF14 |
| --si-audience-lehrende | #22AFDF | #22AFDF |
| --si-audience-jugendarbeit | #E36AA7 | #E36AA7 |
| --si-audience-senioren | #9FC225 | #9FC225 |
| --si-focus-ring | 0 0 0 3px var(--si-white), 0 0 0 6px var(--si-blue) | 0 0 0 3px #FFFFFF, 0 0 0 6px #106CAB |
| --si-focus-outline-color | var(--si-blue) | #106CAB |
| --si-focus-outline | 3px solid var(--si-blue) | 3px solid #106CAB |
| --si-focus-outline-offset | 2px | 2px |
| --si-leading-tight | 1.2 | 1.2 |
| --si-leading-snug | 1.35 | 1.35 |
| --si-leading-normal | 1.5 | 1.5 |
| --si-leading-relaxed | 1.65 | 1.65 |
| --si-content-width | 44.22rem | 44.22rem |
| --si-measure | 70ch | 70ch |
| --si-measure-head | 40rem | 40rem |
| --si-space-1 | .25rem | .25rem |
| --si-space-2 | .5rem | .5rem |
| --si-space-3 | 1rem | 1rem |
| --si-space-4 | 1.5rem | 1.5rem |
| --si-space-5 | 2rem | 2rem |
| --si-space-6 | 3rem | 3rem |
| --si-box-floor | .5rem | .5rem |
| --si-tap-target | 44px | 44px |
| --si-tap-minimum | 24px | 24px |
| --si-transition | .2s ease | .2s ease |
| --si-radius | 0 | 0 |
| --si-radius-sm | 2px | 2px |
| --si-shadow-sm | 0 1px 3px rgba(33, 37, 41, .08) | 0 1px 3px rgba(33, 37, 41, .08) |
| --si-shadow-md | 0 4px 16px rgba(33, 37, 41, .12) | 0 4px 16px rgba(33, 37, 41, .12) |
| --si-shadow-paper | 0 1px 2px rgba(33, 37, 41, .10), 0 4px 12px rgba(33, 37, 41, .08) | 0 1px 2px rgba(33, 37, 41, .10), 0 4px 12px rgba(33, 37, 41, .08) |
| --si-shadow-cover | 0 1px 2px rgba(33, 37, 41, .10), 1px 4px 8px -2px rgba(33, 37, 41, .18) | 0 1px 2px rgba(33, 37, 41, .10), 1px 4px 8px -2px rgba(33, 37, 41, .18) |
| --si-shadow-cover-on-blue | 0 2px 4px rgba(0, 0, 0, .38), 2px 7px 12px -1px rgba(0, 0, 0, .60) | 0 2px 4px rgba(0, 0, 0, .38), 2px 7px 12px -1px rgba(0, 0, 0, .60) |
| --si-shadow-orange | 0 1px 3px rgba(33, 37, 41, .05), 0 5px 16px -3px rgba(243, 146, 0, .20), 0 10px 32px -8px rgba(243, 146, 0, .12) | 0 1px 3px rgba(33, 37, 41, .05), 0 5px 16px -3px rgba(243, 146, 0, .20), 0 10px 32px -8px rgba(243, 146, 0, .12) |
| --si-sticky-offset | 4.5rem | 4.5rem |
Alle 27 Content Blocks
- mask/alert
- mask/card-grid
- mask/card-guidelines
- mask/card-single
- siat/cta-band
- mask/download
- mask/footer-partner
- mask/gallery
- mask/guideline
- mask/list-links
- mask/list-ordered
- mask/modal
- mask/nav-audience
- mask/nav-faq
- mask/nav-guidelines
- mask/nav-teaser
- siat/newsletter-signup
- mask/newsletterbanner
- mask/overview-guidelines
- mask/quiz
- siat/sid-teaser
- mask/slider-guideline
- mask/slideshow
- mask/sponsor
- mask/stream
- saferinternet/styleguide
- mask/text-icon
Die Regeln aus design.md
design.md ist die redaktionelle Quelle des Styleguides. Hier steht sie im Volltext,
in Version 2026.10.24, aufgeteilt in ihre zwölf Abschnitte. Links zu Inhalten führen
auf www.saferinternet.at.
Markenhaltung
Das Internet sicher nutzen. Saferinternet.at macht digitale Themen verständlich und hilft Menschen, im Alltag selbstbestimmt zu handeln. Das System unterstützt Eltern, Jugendliche, Schulen, die Jugendarbeit und ältere Menschen mit klarer Orientierung, konkreten Antworten und nutzbaren Materialien.
Die Sprache ist sachlich, freundlich, inklusiv und handlungsorientiert. Fragen beginnen beim Anliegen der Leser:innen; Antworten nennen zuerst den nächsten sinnvollen Schritt. Fachbegriffe werden erklärt. Aussagen zur Sicherheit brauchen Kontext und belegbare Quellen. Absolute Sicherheitsversprechen, Angstkommunikation und austauschbare Werbeslogans passen nicht dazu. Diese Formulierung beschreibt die beobachtete redaktionelle Richtung und ist keine neue Kampagnenfreigabe.
Logo
Das unveränderte Master-Asset ist EXT:site_package/Resources/Public/Images/brand-saferinternet.svg, mit einer ViewBox von 205 × 53. Die vorhandene inverse Variante heißt brand-saferinternet-invert.svg. Beide Originale werden im Styleguide gezeigt; die helle Variante steht auf einer dunklen Fläche.
Die Wortmarke inklusive Claim bleibt zusammen. Nicht verzerren, neu setzen, umfärben, beschneiden oder mit Schatten versehen. Orange und das im SVG enthaltene Markengrau sind geschützte Bestandteile des vorhandenen Assets. Das Markengrau ist keine zusätzliche funktionale Textfarbe.
Ein verbindlicher numerischer Schutzraum, eine Mindestgröße für Print sowie CMYK- und Sonderfarbwerte sind im Projekt nicht belegt. Im Browser gemessen: 205 × 53 px am Desktop und 140 × 36,2 px bei 320 px Viewport. Diese Headergrößen sind Implementierungsreferenzen, keine erfundene Mindestgrößenregel. Neue Printgrößen und Farbumsetzungen brauchen einen Proof und die Markenfreigabe durch Saferinternet.at.
Farbe und Kontrast
Orange #F39200 trägt die Marke, ausgewählte Aktionen und inhaltliche Akzente. Auf orangefarbenen Flächen steht dunkler Ink-Text #212529. Orange selbst und weiße Schrift auf Orange bestehen den erforderlichen Textkontrast nicht. Orangefarbene Textlinks auf Weiß verwenden deshalb #A65E00. Der reguläre Linkton ist Blau #106CAB, sein Hover-Ton #0B4E7D.
Weiß und neutrale Graustufen strukturieren die Inhalte. Fließtext nutzt #333333; Überschriften und Beschriftungen nutzen Ink. #6C757D besteht normalen Textkontrast auf Weiß, aber knapp nicht auf #F8F9FA. Auf dieser hellgrauen Fläche eignet sich das bereits vorhandene #495057. Dünne helle Kartenkonturen sind dekorative Gruppierung, keine alleinigen Zustands- oder Fokusindikatoren.
Die Zielgruppenfarben kennzeichnen zusätzlich zu lesbaren Namen eine Gruppe. Besonders das Gelb für Jugendliche ist weder Textfarbe noch alleiniger Zustandsnachweis. Gleiches gilt für die in der Token-Datei vorhandenen Inhaltstypfarben: Die aktuelle allgemeine Suche zeigt den Typ als Text ohne vorgeschaltetes Typ-Icon.
tokens.json enthält exakt berechnete Kontrastnachweise, die semantischen Rollen und sämtliche --si-*-Variablen aus tokens.css. Die Helligkeitsfolge 50–950 ordnet elf bereits vorhandene neutrale Farben. Ihre Stufen sind Dokumentationsindizes, keine neu eingeführten CSS-Variablen und keine erfundene Orange-Rampe. Status: audited_existing.
Typografie
Roboto trägt Überschriften, Fließtext und Bedienelemente. Ein zusätzlicher Display-Font würde die bestehende Identität verändern und wird nicht eingeführt. Die selbst gehosteten Dateien umfassen Regular 400, Medium 500 und Bold 700, jeweils normal und kursiv. font-display: swap hält Inhalte während des Ladens lesbar. Fallback: Tahoma, Helvetica Neue, Helvetica, Arial, sans-serif. Daten und Quelltext verwenden System-Monospace.
Die Hierarchie im bestehenden CSS lautet: H1 40 px, H2 28 px, H3 20 px, H4 17 px, H5 16 px und H6 14 px bei einer 16-px-Basis. Unter 576 px sinken H1 auf 28 px und H2 auf 24 px. Überschriften verwenden Gewicht 500. H1/H2 haben Zeilenhöhe 1,2, H3–H6 1,35. UI und Karten nutzen 1,5; längere redaktionelle Texte 1,65. Das Langtextmaß beträgt maximal 70ch, der Überschriftenblock maximal 40rem.
Die Roboto-v18-TTF-Dateien nennen Copyright 2011 Google Inc. und Apache License 2.0 in ihren Metadaten. Diese Lizenz erlaubt Webnutzung, Druck und PDF-Einbettung unter ihren Bedingungen. Der öffentliche Nachweis liegt als FONT-LICENSE-Roboto.txt bei. Bold und Bold Italic stammen aus derselben Version 2.137 wie Regular und Medium; Quellen und Prüfsummen stehen in Fonts/README.md. Die Webfonts liegen als WOFF2 und WOFF vor, das PDF bettet die TTF-Schnitte ein. Gewicht 700 verwendet einen echten Bold-Schnitt; kursives Bold verwendet Bold Italic. Überschriften behalten Medium 500.
Raster und Grundlagen
Das Abstandsmodul ist 4 px. Die vorhandene Skala umfasst 4, 8, 16, 24, 32 und 48 px. Die September-Startseite verwendet 24 px zwischen ihren Inhaltsbereichen. Die bestehende Bootstrap-Containerlogik und die responsiven Inhaltsrahmen bleiben maßgeblich; der Styleguide verwendet den normalen Seitencontainer und ein innerhalb davon reagierendes Raster.
Die üblichen Breakpoints liegen bei 576, 768, 992 und 1200 px. Inhaltsbreiten, Einzüge und Spalten dürfen nicht aus einem Screenshot in absolute Seitenkoordinaten übersetzt werden. Lange deutsche Begriffe müssen umbrechen können. Tabellen und Quelltext erhalten bei Bedarf einen lokal begrenzten Scrollbereich.
Die Grundform ist kantig: Radius 0. Kleine Chips können 2 px verwenden. Einzelne Bestandskomponenten haben ausdrücklich eigene Formen, etwa runde Plattform-Icons, Pillen und der Aktualitätshinweis mit 8 px Radius. Schatten gliedern Karten und zeigen Papier bei Broschüren; sie sind kein allgemeiner Schmuck.
Komfortziel für Bedienelemente: mindestens 44 × 44 px; untere Zielgröße 24 × 24 px gemäß den Bedingungen von WCAG 2.5.8. Der aktuelle Bestand enthält bewusst kompakte Ausnahmen: Suche und Warenkorb im Header sind 30 × 30 px groß, die Trefferzahlwahl 32 px hoch und der Zielgruppen-Auslöser mindestens 36 px hoch. Diese Maße sind keine pauschale 44-px-Zusage für alle Aktionen. Fokus verwendet 3 px Blau mit 2 px Abstand beziehungsweise einen zweifarbigen weißen und blauen Ring. Fokus darf nicht allein orange sein. Die Standardtransition beträgt 200 ms mit ease; reduzierte Bewegung wird berücksichtigt. Neue Beispiele benötigen keinen automatischen Wechsel.
Komponenten
Die Buttons und Karten verwenden die produktiven CSS-Klassen und ihre tatsächliche Struktur. Standardaktionen orientieren sich am 44-px-Komfortziel; kompakte Ausnahmen sind unter den Grundlagen mit ihren realen Maßen dokumentiert. Fokus bleibt sichtbar. Statusproben verbinden semantische Farben mit einer ausdrücklichen Beschriftung. Der Styleguide erzeugt keine zweite Button- oder Kartenbibliothek.
- Die hervorgehobene Aktion
.si-btn-ctaist Orange mit dunkler Beschriftung; Hover dunkelt die Fläche ab. .btn-primaryist im aktuellen System ein neutraler grauer RTE-Button. Sein historischer Klassenname bedeutet nicht, dass er orange ist..btn-outline-primaryund.btn-outline-secondarysind ruhige Utility-Buttons, etwa für Lesen, Download und Bestellen. Kartenziele verwenden.card-morebeziehungsweise.link-moremit einem einzelnen Richtungsakzent.- Formulare haben sichtbare Labels, Hilfe und verständliche Fehlermeldungen. Ein Fehler wird durch Text und Zustand vermittelt. Die Einwilligung in Newsletter ist eine zunächst leere Pflichtcheckbox. Die Styleguide-Demo verarbeitet und versendet keine Daten.
- Karten gliedern Titel, Inhalt und Aktion. Auf der aktuellen Startseite sind News-Titel maximal 18 px und Service-Titel maximal 17 px; die Weiterlesen-Aktionen stehen unten bündig.
- Text mit Icon verwendet die orange Bestandsvariante. Ein einzelner Link ohne Überschrift erhält die kompakte Variante
.card-info-link; normaler Text und mehrere Links behalten die Hinweisgestaltung. Der Aktualitätshinweis hat eine weiße Fläche, orange Kontur, rundes Uhrsymbol und eine eigene kurze Beschriftung. - Broschüren zeigen Originalcover vollständig und proportional auf einer neutralen Fläche mit Papierschatten. Die Desktop-Coverspalte beträgt 176 px, mobil 80 px. Die Vorschau folgt der natürlichen Coverhöhe ohne Mindest- oder Füllhöhe; hohe Cover sind auf 240 px, unter 576 px auf 104 px begrenzt. Ein Format darf nicht aus ästhetischen Gründen abgeschnitten werden. Titel stehen am Desktop am oberen Coverrand; mobil folgen Titel, Cover mit Kategorien, Beschreibung und Aktionen in klarer Lesereihenfolge.
- Die allgemeine Suche ist textorientiert. Broschürensuche, Kategorien und Bestellbarkeit haben ihre eigene Materialansicht. Ein allgemeines Suchergebnis darf nicht stillschweigend als bestellbar dargestellt werden.
- Die Navigation unterscheidet aktuellen Eintrag und aktive Vorfahren. Der aktuelle reguläre Eintrag trägt
aria-current="page"; Shortcuts bekommen keinen zweiten aktuellen Zustand. - Im mobilen Header belegen Zielgruppen-Auslöser und geöffnetes Panel dieselbe volle Inhaltsbreite. Auf breiten Ansichten werden die Zielgruppen bei genügend Platz direkt als Reihe angezeigt. Eine Bereichsnavigation ohne weitere Seiten erzeugt keine zusätzliche Linkliste. Die angeheftete Abschnittsnavigation reserviert ihre Höhe und markiert den aktiven Abschnitt ohne Übergangsanimation; die Glossarleiste verteilt ihre Buchstaben über die verfügbare Breite.
- Akkordeons, Glossar, Zielgruppenmenü und Dialoge brauchen Tastaturzugang. Dialoge halten den Fokus, schließen mit Escape und geben ihn an den Auslöser zurück.
- Karten können ein redaktionell gepflegtes „Label auf dem Bild“ tragen (
tx_sitepackage_card_label)..si-card-badgeist eine weiße Pille oben links mit Ink-Text, 14 px und Gewicht 600; lange Labels werden mit Auslassungspunkten gekürzt. Schwarz statt Blau ist eine Kundenentscheidung: Die Pille ist Kennzeichnung, kein Link. In der Startseiten-Newsliste steht sie statisch neben dem Datum. - Bilder mit dem Metadatenfeld „Mit KI erstellt oder bearbeitet“ (
tx_sitepackage_ai_generated) erhalten zentral.si-ai-image__badge: das offizielle EU-Symbol für KI-generierte Inhalte auf einer runden weißen Fläche von 2,2 rem unten rechts. Die Kennzeichnung entsteht aus den Dateimetadaten, nicht aus einzelnen Templates. - Listenansichten von Materialien unterstreichen den Titel bei Hover und Tastaturfokus. Die Unterstreichung ergänzt den Farbwechsel, damit das Ziel nicht allein über Farbe erkennbar ist.
- Die angeheftete Abschnittsnavigation behält den gewählten Abschnitt auch während des weichen Scrollens; der aktive Eintrag trägt eine 3-px-Linie.
- Die Broschürenbestellung nennt die Höchstmenge als ruhigen Hilfetext
.si-order-max-hint(14 px, Grau 700, Gewicht 400). Bei Fehlern erscheint oberhalb des Formulars die fokussierbare Fehlerzusammenfassung.si-order-errorsauf Grau 100 mit Danger-Icon; die Felder verweisen überaria-describedbyauf ihre Meldung und tragenaria-invalid. - Newsletter-Anmeldungen melden ihren Zustand in Textform: bereits angemeldet, Bestätigung ausstehend, Bestätigungs-E-Mail versendet, gesperrt oder Fehler. Gesperrt und Fehler verwenden die Fehlerdarstellung; die anderen Zustände sind Hinweise.
Das dedizierte TYPO3 Content Block saferinternet/styleguide fasst die Übersicht zusammen. Die vorhandenen Content Blocks für Quiz, Text mit Icon, Newsletter, Linkliste, Zielgruppenmenü und Karten bleiben die Grundlage der jeweiligen Fachinhalte. Schemas werden in config.yaml gepflegt; Designfakten kommen aus den versionierten Quellen.
Aktuelle Such- und Materialansichten
Die Einleitungen im Broschürenservice und bei den Unterrichtsbeispielen stehen oberhalb von Suche und Filtern. Sie verwenden Hellgrau #F8F9FA, eine 2-px-Orange-Kante und Grautext #495057. Der Text ist 15 px groß. Die Unterrichtsüberschrift nutzt 16 px mit Gewicht 600; der Broschürenkopf 17 px mit Gewicht 700 und nennt die dynamische Gesamtzahl kostenloser Materialien. Der Broschürentext bildet einen zusammenhängenden Absatz. Die Katalogzahl bleibt unabhängig von Suchbegriff und Filtern; die gefilterte Trefferzahl steht im Ergebniskopf. Für diese stärkeren Gewichte steht der echte Bold-700-Schnitt zur Verfügung.
„Neu“ und „Tipp“ stehen als gleich gestaltete, unbewegte Textlabels neben dem Titel: 11 px, Medium 500, Ink auf zartem Orange #FDF0DC, 2-px-Orange-Kante. Die Beschriftung trägt die Information; die Farbe ergänzt sie. Broschürentitel verwenden 20 px am Desktop und 18 px unter 576 px. Originalcover behalten ihr Format und den gemeinsamen Papierschatten.
PDF-Deckblätter verwenden in der Suche, als einzelne Datei und in kurzen redaktionellen Listen den kompakten Schatten --si-shadow-cover: eine kurze Kontaktkante (0 1px 2px, 10 % Deckkraft) und einen weichen Schatten nach rechts unten (1px 4px 8px -2px, 18 %). Im blauen Startseitenbereich erhält --si-shadow-cover-on-blue dieses zweistufige Prinzip mit mehr Tiefe: schwarze Kontaktkante (0 2px 4px, 38 %) und weiter versetzter Schlagschatten (2px 7px 12px -1px, 60 %). Dadurch bleibt der Effekt auch auf dem dunkleren Verlauf sichtbar. Bei Hover bleibt der Papierschatten dunkel. Der bestehende leichte Lift und ein sichtbarer Tastaturfokus vermitteln die Interaktion. Der Styleguide zeigt echte Hoch- und Querformatcover auf beiden Hintergründen mit den produktiven Klassen.
Filter sind beschriftete native Checkboxen mit rechts ausgerichteten Trefferzahlen. Innerhalb einer Gruppe gilt ODER, zwischen den Gruppen UND. Nicht gewählte Zähler sind hellgrau; gewählte Zähler orange mit Ink-Text. Im Broschürenservice stehen „Bestellbar“ und Suchfeld am Desktop auf gleicher Höhe. Suchbegriff, Filter und Ergebnisbereich bleiben zusammenhängend; der mobile Ergebniskopf bricht ohne seitlichen Überlauf um.
„Ergebnisse pro Seite“ aktualisiert bei aktivem JavaScript unmittelbar den Ergebnisbereich und setzt auf Seite 1 zurück. Suchbegriff und Filter bleiben erhalten; der Fokus kehrt zur Auswahl zurück und eine Statusmeldung nennt die Treffer. Ohne JavaScript bleibt ein nativer Bestätigungsbutton. Schnellauswahlen für Unterrichtsthemen stehen direkt unter dem Suchfeld. Die allgemeine Suche zeigt den Inhaltstyp als Text; die spezialisierte Unterrichtsliste verzichtet auf diese wiederholte Typzeile.
Bildwelt
Redaktionelle Bilder konkretisieren ein digitales Alltagsthema: Menschen beim Lernen und Beraten, Materialien, nachvollziehbare Gerätesituationen und tatsächliche Anwendungsschritte. Quellen, Rechte, Alternativtexte und die Kennzeichnung von KI-Bildern über das Metadatenfeld gehören zur Auswahl. Screenshots in Anleitungen müssen den beschriebenen realen Stand zeigen; eine generierte Oberfläche ist dafür kein Nachweis.
Die unterstützende Styleguide-Illustration zeigt ein Smartphone, ein Notizbuch und einen orangefarbenen Lesehinweis auf hellem Grund. Sie ist ausdrücklich als KI-generierte Symbolillustration gekennzeichnet und begründet keine neue redaktionelle Bildpflicht. Ihr genauer Prompt liegt als image-prompt.txt bei.
Ein Hauptmotiv, weiches Licht und ruhiger Kontext lassen der Information Raum. Keine Cyber-Neon-Kulissen, vermummten Hacker, Angstsymbolik, schwebenden Fantasieoberflächen oder Bildüberschriften. Keine verfälschten UI-Screenshots. Responsive Bilder reservieren ihre Abmessungen und erhalten einen kontextbezogenen Alternativtext; dekorative Bilder erhalten einen leeren Alternativtext. Das charakteristische Gestaltungsmittel bleibt der gezielte orange Akzent innerhalb einer klaren, hellen Informationsfläche.
Barrierefreiheit und Medien
Das Ziel ist WCAG 2.2 AA. Der Styleguide dokumentiert belastbare Kontrastpaare und prüft seine eigenen Komponenten auf schmale Ansichten, Tastatur, Fokus, Umbruch und reduzierte Bewegung. Das ist keine pauschale Konformitätserklärung für die gesamte Website.
Ein H1 kommt vom regulären TYPO3-Seitenkopf. Die Übersicht setzt die Hierarchie mit H2/H3 fort; Schriftproben sind Absätze, keine zusätzlichen falschen Überschriften. Alle Token haben Namen und Werte in Textform. Dokumente bleiben ohne JavaScript lesbar; die zusätzlich aktivierten Tabs unterstützen Pfeiltasten, Home und End.
Die aktuelle Startseite wechselt weiterhin automatisch zwischen News, während die Pause-Schaltfläche laut Kundenfeedback ausgeblendet ist. Das ist eine vorhandene, ausdrücklich dokumentierte Entscheidung mit offenem Prüfpunkt zu WCAG 2.2.2. Dieser Auftrag ändert dieses Verhalten nicht. Eine umfassende Prüfung mit assistiven Technologien und eine Entscheidung zu dieser Bedienung bleiben gesonderte Arbeiten.
Das einseitige A4-PDF ist ein visueller Überblick mit eingebetteten Schriften. Es ist nicht PDF/UA-getaggt. Die HTML-Seite und die Text-/JSON-Dateien sind die zugänglichen Alternativen. CMYK, druckspezifische Farbprofile und PDF/UA-Freigabe sind offen.
Analyse des aktualisierten Auftritts
Die größte Stärke des neuen Standes ist die erkennbare Trennung von Marke und Funktion: Orange führt durch Inhalte, Blau kennzeichnet Links, ruhige graue Aktionen entlasten dichte Material- und Suchansichten. Die neue Typohierarchie, gemeinsame Abstände, vollständige Broschürencover und die deutlich benannten Hinweise machen die verschiedenen Inhaltsarten konsistenter.
Die Browser-Stichprobe vom 13.09.2026 umfasst Startseite, Broschürenservice, Unterrichtsbeispiele und allgemeine Suche bei 320 und 1440 px. Sie bestätigt die kompakte Einleitung mit Katalogzahl, proportionale Cover ohne Füllhöhe, gemeinsame Neu-/Tipp-Labels, die 32-px-Trefferzahlwahl und den mobilen Zielgruppen-Auslöser über die volle Breite. Die Styleguide-Seite ist zusätzlich in Chromium und WebKit bei 320, 768 und 1440 px auf Umbruch, Dokument-Tabs, Fokus, Kopieren und die lokale Formularprobe geprüft.
Quellen und Pflege
Implementierung: Resources/Public/Css/DesignSystem/tokens.css, base.css, components.css, Resources/Public/Css/solr-search.css, die zugehörigen JavaScript-Dateien, die aktuellen News-, Solr- und Navigations-Templates, die vorhandenen SVG-Logos und Roboto-Dateien. Kontext: docs/customer-feedback-2026-09-11.md, docs/homepage-header-footer-september.md, docs/text-icon-variant.md, docs/search-checkbox-filters.md, docs/mobile-section-overflow-2026-09-12.md und die aktuellen Content-Block-Templates.
Die öffentliche Quelle liegt in packages/site-package/Resources/Public/Documents/DesignSystem/. design.md ist die redaktionelle Policy-Quelle und liefert Version und Prüfdatum für JSON, HTML und PDF. tokens.json wird mit allen CSS-Variablen aus dem tatsächlichen Token-Bestand erzeugt; die installierten TYPO3- und Content-Blocks-Versionen stammen aus composer.lock. Die Übersicht und ihre formatierten Dokumente werden generiert; diese Ausgaben nicht von Hand ändern. Build/DesignSystem/build.py erzeugt Tokens, HTML-Partial und PDF synchron; --check erkennt veraltete Ausgaben einschließlich geänderter Such-CSS, JavaScript- und Komponenten-Templates über ihre Quellhashes. Die numerischen Layoutbefunde stehen mit Provenienz in der Build-Quelle, die reale Gestaltung bleibt im produktiven CSS.
Der Installer scripts/create-styleguide-page.php prüft Projekt und Site und verwaltet die separate Seite /styleguide mit TYPO3 DataHandler außerhalb der Navigation und Suche. Er unterstützt DDEV und ausdrücklich gewähltes Staging, läuft idempotent und verändert keine fremden Seiten. Produktion ist kein akzeptiertes Installer-Ziel. Eine bestehende Styleguide-Seite erhält neue Designfakten durch die generierten Dateien und eine Cache-Leerung; neue Seiten oder Inhaltsdatensätze sind dafür nicht nötig.
Bei Änderungen zuerst den produktiven Bestand prüfen, dann Policy und Build-Daten aktualisieren, Artefakte erzeugen und Version sowie Kontrastnachweise abgleichen. Die Freigabe von Markenregeln liegt bei Saferinternet.at. Webconsulting pflegt die technische Umsetzung.
Technische Referenzen: WCAG-Kontrast, WCAG Pause, Stop, Hide, Roboto-Originalprojekt, TYPO3 DataHandler.
Ersteller
Designsystem-Analyse, Dokumentation und TYPO3-Umsetzung: Webconsulting. Der Credit ist ein ruhiger eigener Abschluss vor dem normalen Website-Footer.
Alle Dateien des Styleguides
Die vollständige Styleguide-Seite als statisches HTML mit Schriften, CSS und Bildern. Version 2026.10.24.
Die redaktionelle Policy-Quelle mit allen Regeln zu Marke, Farbe, Typografie, Komponenten und Barrierefreiheit.
Alle 70 CSS-Variablen --si-* mit Werten und den 16 berechneten Kontrastnachweisen, maschinenlesbar.
Einseitige A4-Übersicht. Nicht PDF/UA-getaggt; HTML-Seite und design.md sind die zugänglichen Alternativen.
Sie planen ein Update von TYPO3 12 oder 13 auf 14.3? Sprechen Sie mit uns. Die verwendeten Skills sind offen auf GitHub verfügbar.