# Saferinternet.at – Styleguide

Version: 2026.10.24
Reviewed: 2026-10-24
Owner: Saferinternet.at; technische Pflege durch Webconsulting
Scope: aktualisiertes TYPO3-Frontend, Redaktion, Komponenten und digitale Downloads
Status: auditierter Implementierungsstand; offene Freigaben sind ausdrücklich benannt

## 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-cta` ist Orange mit dunkler Beschriftung; Hover dunkelt die Fläche ab.
- `.btn-primary` ist im aktuellen System ein neutraler grauer RTE-Button. Sein historischer Klassenname bedeutet nicht, dass er orange ist.
- `.btn-outline-primary` und `.btn-outline-secondary` sind ruhige Utility-Buttons, etwa für Lesen, Download und Bestellen. Kartenziele verwenden `.card-more` beziehungsweise `.link-more` mit 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-badge` ist 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-errors` auf Grau 100 mit Danger-Icon; die Felder verweisen über `aria-describedby` auf ihre Meldung und tragen `aria-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](/services/broschuerenservice) und bei den [Unterrichtsbeispielen](/zielgruppen/schulen/unterrichtsbeispiele) 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](/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](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html), [WCAG Pause, Stop, Hide](https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html), [Roboto-Originalprojekt](https://github.com/googlefonts/roboto-2), [TYPO3 DataHandler](https://docs.typo3.org/m/typo3/reference-coreapi/main/en-us/ApiOverview/DataHandler/Database/Index.html).

## Ersteller

Designsystem-Analyse, Dokumentation und TYPO3-Umsetzung: [Webconsulting](https://webconsulting.at/). Der Credit ist ein ruhiger eigener Abschluss vor dem normalen Website-Footer.