# Gestaltungssystem „DI.DAY × luise“: Anleitung für die Foliensätze Gilt für die drei Varianten A „Alltagsgeschichte“, B „Mitmachen“, C „Wechselrezept“. Jedes Layout und jeden Baustein siehst du mit Beispielinhalt in **`entwuerfe/muster.html`** (30 Folien, mit Notizen). Wenn du unsicher bist: Schnipsel dort abschauen. ## Regeln 1. **Geteilte Dateien NICHT ändern:** `css/theme.css`, `js/deck.js`, `js/skizzen-daten.js`, `assets/illustrationen/skizze/*`, `assets/logos/*`, `assets/deko/*`, `assets/fonts/*`, `vendor/*`, `werkzeuge/*`. Fehlt dir etwas Gemeinsames, melde es, statt es selbst einzubauen. 2. **Variantenspezifisches CSS** nur in `css/variante-.css` (x = a, b, c), eingebunden NACH `theme.css`. 3. **Variantenspezifische Grafiken** nur in `assets/illustrationen/variante-/` (z. B. Erika als Pixelfigur, Schnickschnack-o-Meter, Highscore-Deko). 4. **Foliensatz-Datei:** `variante-.html` im Projektwurzelordner (`/home/matthias/GIT/merlina-minds/di-day-passwort-manager/variante-.html`). 5. **Offline:** keine externen Ressourcen (kein CDN, keine Webfonts aus dem Netz, keine Bilder von URLs). Alles muss per Doppelklick über `file://` laufen. 6. **SVGs mit eigener Schrift** (alle Skizzen) per `` einbinden, nie per ``, sonst fehlt die Handschrift. 7. **Keine Fotos** (`assets/img/` wird nicht verwendet), keine Fremdlogos von Tools oder Browsern: Namen nur als Text. 8. **Bildnachweis Pflicht** überall, wo die Biege-Illustration steht: „Illustration: Florian Biege für di.day“. 9. **Lesbarkeit:** Text auf Folien mindestens 40 px (die Klassen halten das ein), Quellen und Bildnachweise mindestens 22 px. Schriftgrößen nicht kleiner überschreiben. Lieber Text kürzen oder auf zwei Folien verteilen. 10. Fakten nur aus `recherche/faktenblatt.md` und `recherche/stufenleiter.md`, Abschnitte „Nicht behaupten / Vorsicht“ beachten. ## Dateigerüst eines Foliensatzes ```html Passwortmanager – Schutz oder Schnickschnack? (Variante A)
…
``` Die Pfade gelten für `variante-.html` im Wurzelordner (die Musterseite liegt in `entwuerfe/` und nutzt deshalb `../`). **`js/deck.js`** startet reveal (1920 × 1080, margin 0, center false, hash, transition fade, controls, progress, Seitenzahl, Notizen-Plugin, `pdfSeparateFragments: false`, `pdfMaxPagesPerSlide: 1`) und erledigt vorher: - Pixelband oben auf jede Folie. Abschalten mit `data-band="aus"` (oder `data-ohne-band`), unten bzw. beidseitig mit `data-band="unten"` / `data-band="beide"`. - Ton-Klassen setzen die Hintergrundfarbe (siehe unten). - Baut Ikonen, Stufenleitern und Quiz-Kästchen aus `js/skizzen-daten.js`. - Seitenzahl unten links, ausgeblendet auf `l-titel` und auf Folien mit `data-ohne-nummer`. - Eigene reveal-Optionen: `window.DECK_OPTIONEN = {…}` VOR `deck.js` setzen. ## Grundgerüst jeder Folie ```html
… sichtbarer Inhalt …

Quelle: …

``` - **Alles Sichtbare kommt in `
`.** `.inhalt` füllt die Folie, hält die Ränder (oben 96 px unter dem Band, seitlich 96 px, unten 76 px) und ist eine Spalte von oben nach unten. Die Layout-Klasse am `
` macht daraus das jeweilige Raster. - **Außerhalb von `.inhalt`** stehen nur absolut platzierte Helfer: `.quelle`, `.bildnachweis`, `.stufenleiter.ecke`, `.qr.ecke`, `aside.notes`. - `.raster` oder `.fuellen` an einem Kind von `.inhalt` lässt es den Restplatz füllen. - Ohne Layout-Klasse geht es auch: Dann stapelt `.inhalt` einfach Überschrift, Text, Raster. ### Töne (Hintergrund) | Klasse | Hintergrund | Text | |---|---|---| | (keine) | Papier `#fffaf3` | Tinte, Überschriften Lila | | `ton-lila` | Lila `#74157d` | Weiß, Akzente Orange | | `ton-nacht` | Dunkellila `#4a0d50` | Weiß, Akzente Orange (gut für Quiz) | | `ton-hell` | Hell-Lila `#f3e6f5` | wie Papier | | `ton-orange` | Orange `#fea300` | Tinte, Akzente Lila | Logos und Biege-Illustration haben dunkle Linien: Auf Lila immer in `.aufkleber` bzw. `.logo-luise` setzen (weißer Grund). Das DI.DAY-Logo `diday.svg` funktioniert auf beiden Gründen. ### Text-Helfer | Klasse | Wirkung | |---|---| | `h1` 120 px, `h2` 84 px, `h3` 56 px | Überschriften (Lila; auf Lila weiß) | | `.dachzeile` | Pixelschrift-Zeile über der Überschrift („STUFE 4“, „ZUTATEN“) | | `.stufe-badge`, `.etikett` (+ `.orange`) | Pixel-Etikett auf Lila bzw. Orange | | `.akzent` | Orange (auf Papier dunkles Orange) | | `.marker` | Textmarker in Hell-Orange | | `.gross` 56 px, `.klein` 40 px | Textgrößen | | `.leise` | Grau (auf Lila hell) | | `.pixel`, `.hand` | Silkscreen bzw. Caveat | | `.durch` | dauerhaft durchgestrichen | | `.zentriert`, `.unten-raus` | zentrieren; Element an den unteren Rand schieben | ## Layouts ### `l-titel` ```html
DI.DAY luise Oranienburg

Impulsvortrag · DI.DAY

Passwortmanager –Schutz oder Schnickschnack?

Matthias Kerk · 1. November 2026

luise Oranienburg · Oranienwerk, Kreativ Oase

Ein lachendes Smartphone hat seine Kabel abgerissen
Illustration: Florian Biege für di.day
``` Seitenzahl ist hier automatisch aus. Die Illustration darf auch fehlen (dann bleibt die rechte Spalte leer) oder durch eine eigene Grafik ersetzt werden. ### `l-abschnitt` (Kapiteltrenner) ```html

Zubereitung

Sechs Stufen bis zum eigenen Tresor

Jede Stufe hat was für sich. Und jede hat einen Haken.

``` ### `l-illu` (Illustration + Text) ```html
Stufe 1

Ein Schlüssel für alles

Bequem, kein Werkzeug, kostet nichts.

…

Quelle: …

``` `bild-gross`: Grafik bekommt zwei Drittel der Breite. `bild-links`: Grafik links. Mehrere Ebenen übereinander (Grafik + Stempel, Grafik A wird zu Grafik B): `
… `. ### `l-buehne` (Grafik über die ganze Folie, Text im Kasten) ```html
Stufe 2

Der Zettel am Bildschirm

Sicher vor dem Internet. Nicht vor Besuch.

``` Passt zu Grafiken mit freier Fläche links: Stufe 1, 2, 4, 5, tresor-weggerollt. Overlays (Handschrift auf dem Zettel o. Ä.) mit `.handnotiz` und `style="left:…; top:…"` absolut in `.inhalt` setzen. ### `l-zahl` (große Zahl) ```html

„Niemand kann sich Dutzende von Zugangsdaten merken.“ – Bitkom

10 %

nutzen einen eigenständigen Passwortmanager.

Quelle: BSI, Cybersicherheitsmonitor 2025

``` Auf Papier ist die Zahl Lila, auf Lila Orange. `l-zahl mit-bild` = Zahl links, `.bild` rechts (Muster-Folie 5). `.zahl.mittel` (200 px) passt in andere Layouts, `.zahl.pixel` in Pixelschrift. Zwei Zahlen nebeneinander: `
…zahl…
…
`. ### `l-zweispalter` ```html

Stufe 5

Der Profi-Tresor im Abo

Fair ist

  • …

Der Haken

  • …
``` ### `l-stufenleiter` ```html

Sechs Stufen, von „au weia“ bis „richtig gut“

Und du?
``` Text in der freien Fläche oben links statt Überschrift darüber: `

…

    …
` als erstes Kind von `.inhalt` (Muster-Folie 7). Details zur Leiter siehe unten. ### `l-vergleich` (Tabelle) ```html

Wem gehört der Tresor?

BrowserAbo-TresorDein Tresor
Code offen?teilsneinja
``` Höchstens 4 Zeilen × 3 Spalten. `.ja` / `.nein` / `.teils` setzen ein farbiges Zeichen davor, `.hervor` färbt eine Spalte. ### `l-karten` (Tool-Karten) ```html

Stufe 6

Unsere drei Favoriten

lokal bei dir

KeePassXC-Familie

Datei bei dir, kein Konto

  • kostenlos, ohne Cloud
  • Abgleich selbst
Erste Wahl
…
``` Statt Grafik geht auch eine Ikone: ``. Pro Karte höchstens: Weg, Name, eine Zeile, zwei Plus/Minus. ### `l-liste` und `l-checkliste` ```html

Drei Dinge bis heute Abend

  • Passwortmanager installieren
  • ohne Ikone: oranges Pixel als Punkt

Was du nicht mehr musst

  • Alle paar Monate ändern
  • Länge vor Sonderzeichen
Länge schlägt Komplexität
``` `li.erledigt` = grüner Haken, `li.nein` = rotes Kreuz, `.abhaken.fragment` = Zeichen kommt per Klick. ### `l-zitat` ```html

Ein Passwortmanager funktioniert ähnlich wie ein Notizbuch, das in einer Schublade eingeschlossen ist.

BSI
``` ### `l-frage` (Titelfrage / Urteil) ```html

Passwortmanager – Schutz oder Schnickschnack?

Schutz.

„Aus Sicht des BSI überwiegt der Nutzen bei weitem.“

``` ### `l-zeitleiste` ```html

2025

Der Passwortmanager, der verschwand

  1. Junikein Speichern
    2. …

Umzug nach fremdem Zeitplan

``` `li.weg` legt ein rotes Kreuz über die Ikone. 3 bis 4 Punkte. ### `l-quiz` (Rangliste im Retro-Look) ```html

Quiz

Meistgeleakte Passwörter 2025

  1. 1123456
    2. …
  2. 6

11 Buchstaben?

Hasso-Plattner-Institut, Januar 2026 · gezählt in Datenlecks

``` `.kaestchen data-loesung="…"` wird zu leeren Kästchen; als Fragment drehen sich die Buchstaben nacheinander um. ### Handzeichen (in jedem Layout) ```html

Wer hat mehr als zehn Online-Konten?

``` ### `l-rezept` (Rezeptkarte) ```html

Wechselrezept

Passwörter in Deiner Hand

30 Min.Schwierigkeit: mittel

  1. Zutaten · warum überhaupt
    2. …
rechte Spalte frei (z. B. Messgerät)
``` ### `l-wegweiser` (Entscheidungshilfe) ```html

Welcher passt zu dir?

  • Ein Hauptrechner, Lust auf KontrolleKeePassXC
    • …
QR-Code zum DI.DAY-Rezept
DI.DAY-Rezept
``` Der Pfeil zwischen „wenn“ und „dann“ kommt automatisch. ### `l-schluss` ```html

Los geht's! #DIDit

  • Erster Schritt: dein E-Mail-Konto
  • Gleich: Live-Demo & Umzugshilfe
QR-Code: di.day/de/wechselrezepte/passwords
DI.DAY-Rezept: Passwörter in Deiner Hand
QR-Code: luise-oranienburg.de
luise-oranienburg.de
…
Illustration: Florian Biege für di.day
DI.DAYluise Oranienburg
``` QR-Codes nicht verkleinern (300 px, damit sie aus dem Saal scannbar sind). `.qr.klein` (200 px) nur für die Bildnachweise-Folie oder als Zusatz in einer Ecke. ### `l-nachweise` (Bildnachweise, bleibt während des Umbaus stehen) ```html

Danke! Bildnachweise

  • Illustration Titel und Schluss: Florian Biege für di.day
  • DI.DAY-Logo und Schriftzug: di.day, mit Freigabe · luise-Logo: luise Oranienburg
  • Skizzen und Ikonen: eigene Zeichnungen
  • Schriften: Atkinson Hyperlegible (Braille Institute), Silkscreen, Caveat – SIL Open Font License
QR-Code zum DI.DAY-Rezept
DI.DAY-Rezept
QR-Code zu luise-oranienburg.de
luise-oranienburg.de
``` Fotonachweise entfallen (keine Fotos). Eigene variantenspezifische Grafiken als „eigene Zeichnungen“ führen. ## Weitere Bausteine | Baustein | HTML | Hinweis | |---|---|---| | Stempel | `Beispiel – niemals selbst verwenden!` | Farben: Standard Rot, `.gruen`, `.lila`; `.klein`; Drehung per `style="--dreh:-4deg"` | | Sprechblase | `

…

` | `.rechts` (Zipfel rechts), `.pixel` (Orange, Pixelschrift) | | Kasten | `
…
` | `.orange`; auf Lila halbtransparent | | Aufkleber | `
img + figcaption
` | weißer Grund für Bilder auf Lila; `style="--dreh:-2deg"` | | Ikonen-Raster | `
  • E-Mail
    • …
` | Konten, Geräte | | Mini-Treppe | `
  1. SMS
  2. App
  3. Passkey
` | Farben per `style="--t1:…; --t2:…; --t3:…"` (Standard: hell- bis kräftig Orange) | | Längen-Balken | `
Länge schlägt Komplexität
` | wächst pixelweise | | Plus/Minus | `
  • …
  • …
` | | | QR | `
img + figcaption
` | `.klein`, `.ecke` (unten rechts, außerhalb `.inhalt`) | | Handnotiz | `
Passwort: kaffeetasse
` | Kuli-Blau, Caveat | ## Ikonen (Skizzen-Sprite) ```html E-Mail ``` Größen: Standard 1,6 em, `.mittel` 2,6 em, `.gross` 4,4 em, `.riesig` 8 em, oder `style="--ikon:220px"`. `.senkrecht` setzt den Text unter die Ikone. Verfügbare Namen (Übersicht mit Bild: Musterseite, vorletzte Folie): `schluessel zettel buch browser abo-tresor stern tresor mail bank bahn gesundheit shop streaming chor social wolke handy laptop haus server schloss schloss-offen haken kreuz kaffee wuerfel finger umschlag kalender kette hand diskette stift auge tuer code lupe paragraph preis wegweiser familie werkzeug herz datei pfeil fragezeichen glanz` Farben einer Ikone lassen sich in der Varianten-CSS über `--ik-a`, `--ik-b`, `--ik-c` (Füllfarben) und `--sk-tinte` (Kontur) ändern. ## Geteilte Grafiken (`assets/illustrationen/skizze/`) Alle im Stil „Skizze“ (Marker-Konturen, versetzte Farbflächen, Caveat-Beschriftung), transparent. Immer per `` einbinden. | Datei | Format | Inhalt | Klasse | |---|---|---|---| | `stufe1-ein-schluessel.svg` | 1600×1000 | ein Schlüssel „passt überall!“, fünf offene Schlösser, Elster mit „Kopie!“ (links frei) | `illu` | | `stufe2-postit.svg` | 1600×1000 | Monitor mit Zettel „Passwort: kaffeetasse“, „Bank: hallo123“, Handy „klick!“ (links frei) | `illu` | | `stufe3-passwortbuch.svg` | 1600×1000 | Buch „Meine Passwörter“ mit Einträgen, „offline ✓“, Handy „???“ | `illu` | | `stufe4-browser.svg` | 1600×1000 | Browser „Passwort speichern?“ mit Schlüsselbrett, Kette zur „Konzern-Cloud“ | `illu` | | `stufe5-abo-tresor.svg` | 1600×1000 | glänzender Tresor mit Abo-Preisschild, Bauplan hinter Schloss „Code: zu“, Schild „USA / Kanada“ | `illu` | | `stufe6-favoriten.svg` | 1600×1000 | die drei Wege nebeneinander mit Namen (oben frei) | `illu` | | `favorit-lokal.svg` | 800×600 | Haus + Laptop mit Datei-Schloss (KeePassXC) | `illu quer43` / `karte-bild` | | `favorit-cloud.svg` | 800×600 | Wolke mit Schloss über Bergen „Schweiz“, Handy, Laptop (Proton Pass) | `illu quer43` / `karte-bild` | | `favorit-selbst.svg` | 800×600 | Server im Vereinskeller, Checkliste, Schraubenschlüssel (Vaultwarden) | `illu quer43` / `karte-bild` | | `passphrase.svg` | 1600×1000 | Würfel, Wortliste „7.776 Wörter“, Kärtchen Kaktus Laterne Hafen Gurke Orbit, „nur ein Beispiel!“ | `illu` | | `zwei-faktor.svg` | 1600×1000 | Schlüssel „1. Passwort“ + Handy mit Code „2. Code“ und Fingerabdruck „Passkey“ | `illu` | | `passkey.svg` | 1600×1000 | Handy mit Fingerabdruck „Schlüssel bleibt auf dem Handy“; echte Seite „kennt nur das Schloss“ ✓, falsche Seite „passt nicht!“ | `illu` | | `leck-tueren.svg` | 1600×1000 | Shop mit Riss, Roboter probiert den Schlüssel an Mail, Bank, Bahn, Chor, Video: „probiert’s überall!“ | `illu` | | `tresor-weggerollt.svg` | 1600×1000 | Tresor auf Sackkarre, Zettel „URLs“, Pfeil „Master-Passwort“ (LastPass) | `illu` | | `notfallumschlag.svg` | 800×600 | Umschlag „Notfallblatt“ mit Siegel | `illu quer43` | | `kaffeetasse.svg` | 600×600 | dampfende Tasse mit Herz | `illu quadrat` | Die Grafiken erzeugt `werkzeuge/skizzen.py` (stufe1–3 sind handgezeichnet). Nur die zentrale Instanz ändert sie. ## Stufenleiter **Entscheidung:** Die Leiter ist EIN inline-SVG (Daten in `js/skizzen-daten.js`), das `deck.js` in jedes `
` einsetzt. Zustände sind nur CSS-Klassen, die Farben stehen in `theme.css`. Dadurch reicht eine Definition für alle Zustände, die Schriften aus `theme.css` gelten, und reveal kann die Leiter per Auto-Animate von groß nach klein bewegen. ```html
``` | Attribut | Werte | Wirkung | |---|---|---| | `data-stufe` | `0` | alle Stufen neutral (Überblick am Anfang) | | | `1` … `6` | erledigte Stufen gedämpft Lila, aktuelle Orange, kommende neutral | | | `alle` | alle farbig: Lila von hell nach dunkel, Stufe 6 Orange | | `data-marke` | `1` … `6` | Stufe für die `.leiter-marke`-Kinder (Standard: aktuelle Stufe) | | `data-labels` | `"A\|B\|C\|D\|E\|F"` | eigene Beschriftungen (Standard: Ein Passwort, Zettel, Buch, Browser, Abo-Tresor, Dein Tresor) | | `data-beschriftung="aus"` | | Beschriftung weg (in `.ecke` immer weg) | | `data-nummern="aus"` | | Nummern weg | Symbole auf den Stufen: Schlüssel, Zettel, Buch, Browser, Tresor mit Preisschild, Stern. **Marken** (Figur, Sprechblase, Fähnchen) stehen als Kinder in der Leiter und werden auf die Oberkante einer Stufe gesetzt (unten mittig verankert): ```html
Erika Und du?
``` In der Mini-Leiter Marken relativ zur Leiterbreite bemessen (z. B. `width: 12%`). **Von groß nach klein (Auto-Animate):** beide Folien bekommen `data-auto-animate`, beide Leitern `data-id="leiter"`: ```html
…
…
…
``` Auf Folien mit Mini-Leiter rücken `h2`, `.dachzeile` und `.stufe-badge` direkt in `.inhalt` automatisch von der Leiter weg; anderen Inhalt oben rechts frei lassen (Bereich ca. 340 × 240 px). ## Fragmente (Klicks) Standard ist ein dezentes Einblenden. Nur diese Arten verwenden: | Klasse | Wirkung | |---|---| | `fragment` | einblenden | | `fragment fade-up` / `fade-left` | einblenden mit kleiner Bewegung | | `fragment aufblitzen` | erscheint und blinkt einmal pixelig („Heute: deine Passwörter“, „Schutz.“) | | `fragment streichen` | Text steht schon da, eine Linie zieht durch | | `fragment stempeln` | Stempel fällt mit Schwung auf die Folie | | `fragment hervorheben` | Text steht schon da und bekommt den Textmarker | | `li … abhaken fragment` | in `.checkliste`: Haken bzw. Kreuz kommt per Klick | | `fragment wachsen` | Balken wächst pixelweise | | `kaestchen fragment` | Quiz-Buchstaben drehen sich um | Reihenfolge bei Bedarf mit `data-fragment-index="1"`. Mehrere Zustände an einer Stelle: reveal-Klasse `r-stack` mit `fragment` / `fragment fade-out`. ## Notizen ```html ``` Taste **S** öffnet die Referentenansicht (Notizen, nächste Folie, Uhr). Den kompletten Sprechtext aus dem Drehbuch hineinschreiben, Regieanweisungen wie (Klick) dürfen stehen bleiben. ## Rendern und prüfen Arbeitsdateien nach `/home/matthias/.cache/claude-tmp/claude-1000/-home-matthias-GIT-merlina-minds-di-day-passwort-manager/1866b7a0-a53a-4598-9f57-8669b2a9b894/scratchpad/decks//`. **Überläufe finden** (meldet Folien, deren Inhalt über den Rand ragt): ```sh chromium --headless=new --disable-gpu --no-sandbox --virtual-time-budget=8000 \ --dump-dom "file:///home/matthias/GIT/merlina-minds/di-day-passwort-manager/variante-a.html?pruefen" 2>/dev/null \ | grep -o 'data-ueberlauf="[^"]*"' ``` Ergebnis muss `data-ueberlauf="keiner"` sein. **Konsolenfehler:** ```sh chromium --headless=new --disable-gpu --no-sandbox --enable-logging=stderr --v=0 --virtual-time-budget=6000 \ --dump-dom "file:///…/variante-a.html" 2>&1 >/dev/null | grep -i -E "console|uncaught|failed" | grep -v -i -E "dbus|gpu|sqlite" ``` `deck.js` warnt dort z. B. bei unbekannten Ikonen-Namen. **Alle Folien auf einmal** (eine PDF-Seite je Folie): ```sh chromium --headless=new --no-sandbox --disable-gpu --no-pdf-header-footer --virtual-time-budget=20000 \ --print-to-pdf="$OUT/deck.pdf" "file:///…/variante-a.html?print-pdf" pdfinfo "$OUT/deck.pdf" | grep Pages # muss der Folienzahl entsprechen pdftoppm -png -r 40 "$OUT/deck.pdf" "$OUT/s" ``` Achtung: Mit kleinerem Zeitbudget druckt Chromium manchmal nur EINE Seite (reveal baut die Druckansicht asynchron). Dann einfach wiederholen. Übersicht: `magick montage "$OUT"/s-*.png -tile 4x -geometry +6+6 "$OUT/uebersicht.png"`. **Einzelne Folie, alle Fragmente sichtbar** (`?fragments=false` wirkt, getestet): ```sh chromium --headless=new --disable-gpu --no-sandbox --hide-scrollbars --virtual-time-budget=4000 \ --window-size=1920,1080 --screenshot="$OUT/folie-05.png" "file:///…/variante-a.html?fragments=false#/5" ``` Index ab 0. „Letzte Reihe“: zusätzlich `--window-size=640,360` – Text muss dann noch lesbar sein. Screenshots immer ansehen (Read-Tool). Typische Probleme: Überschrift läuft in die Mini-Leiter, zu viel Text in Karten, Grafik zu klein, weil sie viel freie Fläche hat (dann `bild-gross` oder `l-buehne`).