/*
* Theme „DI.DAY × luise“ für reveal.js – GETEILTE DATEI, nur zentral ändern.
* Farbwelt nach di.day und luise Oranienburg: Lila + Orange, Pixelmuster,
* Skizzen-Grafiken. Folienraster: 1920 × 1080 (siehe js/deck.js).
*
* Aufbau
* 1. Schriften 2. Tokens 3. reveal-Grundlagen 4. Pixelband, Seitenzahl
* 5. Bausteine (bestehend) 6. Grundgerüst .inhalt + Töne
* 7. Komponenten 8. Layouts (l-…) 9. Stufenleiter 10. Fragmente 11. Druck/PDF
* Anleitung mit HTML-Schnipseln: entwuerfe/GESTALTUNG.md
*/
/* ========== 1. Schriften (lokal, offline) ========== */
@font-face {
font-family: 'Atkinson Hyperlegible Next';
src: url('../assets/fonts/atkinson-hyperlegible-next-latin-400-normal.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Atkinson Hyperlegible Next';
src: url('../assets/fonts/atkinson-hyperlegible-next-latin-400-italic.woff2') format('woff2');
font-weight: 400;
font-style: italic;
font-display: block;
}
@font-face {
font-family: 'Atkinson Hyperlegible Next';
src: url('../assets/fonts/atkinson-hyperlegible-next-latin-700-normal.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Atkinson Hyperlegible Next';
src: url('../assets/fonts/atkinson-hyperlegible-next-latin-800-normal.woff2') format('woff2');
font-weight: 800;
font-style: normal;
font-display: block;
}
@font-face {
font-family: 'Atkinson Hyperlegible Mono';
src: url('../assets/fonts/atkinson-hyperlegible-mono-latin-400-normal.woff2') format('woff2');
font-weight: 400;
font-display: block;
}
@font-face {
font-family: 'Atkinson Hyperlegible Mono';
src: url('../assets/fonts/atkinson-hyperlegible-mono-latin-700-normal.woff2') format('woff2');
font-weight: 700;
font-display: block;
}
@font-face {
font-family: 'Silkscreen';
src: url('../assets/fonts/silkscreen-latin-400-normal.woff2') format('woff2');
font-weight: 400;
font-display: block;
}
@font-face {
font-family: 'Silkscreen';
src: url('../assets/fonts/silkscreen-latin-700-normal.woff2') format('woff2');
font-weight: 700;
font-display: block;
}
@font-face {
font-family: 'Caveat';
src: url('../assets/fonts/caveat-latin-700-normal.woff2') format('woff2');
font-weight: 700;
font-display: block;
}
@font-face {
font-family: 'Caveat';
src: url('../assets/fonts/caveat-latin-400-normal.woff2') format('woff2');
font-weight: 400;
font-display: block;
}
/* ========== 2. Tokens ========== */
:root {
--lila: #74157d;
--lila-dunkel: #4a0d50;
--lila-hell: #f3e6f5;
--lila-mittel: #dcb8e2;
--orange: #fea300;
--orange-dunkel: #c77c00;
--orange-hell: #ffe6b3;
--papier: #fffaf3;
--tinte: #23122a;
--grau: #6b5f70;
--linie: #e4d9e6;
--postit: #ffe14d;
--warnung: #d6402b;
--sicher: #2f8f46;
/* Skizzen-Palette (wie in den Grafiken) */
--gelb: #ffd84d;
--gelb-dunkel: #f2b705;
--rot: #e5533d;
--rot-hell: #f7b9ad;
--gruen-hell: #bfe3c6;
--neutral: #d9d4c7;
--neutral-hell: #ece7da;
--blau: #cfe3f7;
--kuli: #1d2a6b;
/* auf dunklem Grund (ton-lila / ton-nacht) */
--hell-text: #ffffff;
--hell-leise: #ecd9f0;
--schrift: 'Atkinson Hyperlegible Next', 'Segoe UI', system-ui, sans-serif;
--schrift-mono: 'Atkinson Hyperlegible Mono', ui-monospace, monospace;
--schrift-pixel: 'Silkscreen', var(--schrift-mono);
--schrift-hand: 'Caveat', 'Segoe Print', cursive;
--rand: 96px; /* Seitenrand links/rechts */
--band-hoehe: 36px; /* Pixelband */
--oben: calc(var(--band-hoehe) + 60px); /* Abstand oben bis Inhalt */
--unten: 76px; /* Abstand unten (Platz für Quelle) */
--luecke: 64px; /* Standard-Spaltenabstand */
--kontur: 5px; /* Skizzen-Kontur */
--skizzen-radius: 18px 28px 20px 26px / 26px 18px 28px 20px;
--schatten: var(--lila-mittel); /* versetzter Marker-Schatten */
}
/* ========== 3. reveal.js Grundlagen ========== */
.reveal-viewport {
background: var(--papier);
}
.reveal {
font-family: var(--schrift);
font-size: 44px;
font-weight: 400;
line-height: 1.35;
color: var(--tinte);
}
.reveal .slides {
text-align: left;
}
.reveal .slides section {
box-sizing: border-box;
width: 100%;
height: 100%;
padding: calc(var(--band-hoehe) + 64px) var(--rand) 72px;
}
.reveal h1,
.reveal h2,
.reveal h3 {
margin: 0 0 0.4em;
font-family: var(--schrift);
font-weight: 800;
line-height: 1.08;
letter-spacing: -0.01em;
color: var(--lila);
text-transform: none;
text-wrap: balance;
}
.reveal h1 { font-size: 120px; }
.reveal h2 { font-size: 84px; }
.reveal h3 { font-size: 56px; }
.reveal p { margin: 0 0 0.6em; }
.reveal strong { font-weight: 800; }
.reveal em { font-style: italic; }
.reveal a { color: var(--lila); text-decoration: underline; text-decoration-thickness: 3px; }
.reveal ul,
.reveal ol {
margin: 0;
padding-left: 1.1em;
}
.reveal li { margin: 0.25em 0; }
.reveal li::marker { color: var(--orange-dunkel); }
.reveal .controls { color: var(--lila); }
.reveal .progress { color: var(--orange); height: 6px; }
.reveal.has-dark-background .controls { color: var(--orange); }
.reveal img,
.reveal object,
.reveal svg { max-width: 100%; }
/* reveal-Helfer .r-stack (Elemente übereinander): Spalte darf schrumpfen */
.reveal .r-stack { grid-template-columns: minmax(0, 1fr); }
/* ========== 4. Pixelband und Seitenzahl ========== */
.pixelband {
position: absolute;
left: 0;
right: 0;
z-index: 1;
height: var(--band-hoehe);
background: var(--orange) url('../assets/deko/pixelband.svg') center / cover no-repeat;
pointer-events: none;
}
.pixelband.oben { top: 0; }
.pixelband.unten {
bottom: 0;
background-image: url('../assets/deko/pixelband-unten.svg');
}
.reveal .slide-number,
.reveal .slide-number-pdf {
left: 30px;
right: auto;
bottom: 18px;
padding: 0;
background: none;
font-family: var(--schrift-pixel);
font-size: 22px;
line-height: 1;
color: var(--grau);
}
.reveal.has-dark-background .slide-number { color: var(--hell-leise); }
.reveal .slide-number a { color: inherit; text-decoration: none; }
.reveal-viewport.ohne-nummer .slide-number { display: none; }
.reveal-viewport:has(section.present[data-band='beide']) .slide-number,
.reveal-viewport:has(section.present[data-band='unten']) .slide-number { bottom: calc(var(--band-hoehe) + 12px); }
/* ========== 5. Bausteine (bestehend) ========== */
.stufe-badge,
.etikett {
display: inline-block;
padding: 10px 22px 8px;
font-family: var(--schrift-pixel);
font-size: 36px;
line-height: 1;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #fff;
background: var(--lila);
}
.stufe-badge.orange,
.etikett.orange {
color: var(--tinte);
background: var(--orange);
}
.pixel { font-family: var(--schrift-pixel); }
.hand { font-family: var(--schrift-hand); font-weight: 700; }
.leise { color: var(--grau); }
.quelle {
position: absolute;
right: 150px; /* frei für die reveal-Pfeile */
bottom: 22px;
z-index: 2;
max-width: 58%;
font-size: 22px;
line-height: 1.3;
color: var(--grau);
text-align: right;
}
.bildnachweis {
position: absolute;
left: var(--rand);
bottom: 18px;
z-index: 3;
max-width: 70%;
padding: 4px 10px;
font-size: 22px;
line-height: 1.3;
color: #fff;
background: rgba(35, 18, 42, 0.62);
}
/* Layout: Vollbild-Foto (bleibt für Fotos erhalten) */
.reveal .slides section.vollbild-foto {
padding: 0;
}
.vollbild-foto .foto {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.vollbild-foto .titelkasten,
.l-buehne .titelkasten {
position: absolute;
left: var(--rand);
bottom: 110px;
z-index: 2;
max-width: 860px;
padding: 36px 44px 30px;
background: var(--papier);
box-shadow: 14px 14px 0 var(--lila);
}
.vollbild-foto .titelkasten h2,
.l-buehne .titelkasten h2 {
margin: 18px 0 0;
font-size: 76px;
}
.vollbild-foto .titelkasten p,
.l-buehne .titelkasten p {
margin: 16px 0 0;
font-size: 40px;
}
/* Handschrift als Überlagerung (Post-it, Passwortbuch) */
.handnotiz {
position: absolute;
z-index: 2;
font-family: var(--schrift-hand);
font-weight: 700;
color: var(--kuli);
line-height: 1.05;
white-space: nowrap;
transform-origin: left top;
}
/* Layout: Illustration + Text (alte Form, siehe auch .l-illu) */
.illu-folie {
display: grid;
grid-template-columns: 0.8fr 1.2fr;
gap: 48px;
align-items: center;
height: 100%;
}
.illu-folie .illu {
width: 100%;
height: auto;
max-height: 820px;
}
/* ========== 6. Grundgerüst und Töne ========== */
/*
* Jede Folie:
* .inhalt füllt die Folie (absolut), hat die Seitenränder und ist eine
* Flex-Spalte. Absolut platzierte Helfer (.quelle, .bildnachweis,
* .stufenleiter.ecke, aside.notes) stehen AUSSERHALB von .inhalt.
*/
/* :where() hält die Spezifität niedrig, damit .l-… > .inhalt gewinnt */
:where(.reveal .slides section) > .inhalt {
position: absolute;
inset: 0;
box-sizing: border-box;
padding: var(--oben) var(--rand) var(--unten);
display: flex;
flex-direction: column;
text-align: left;
}
.inhalt > * { flex: none; }
.inhalt > .fuellen,
.inhalt > .raster { flex: 1 1 auto; min-height: 0; }
.inhalt > h2 { margin: 0 0 40px; }
.inhalt > :last-child { margin-bottom: 0; }
/* Dachzeile über der Überschrift („STUFE 4“, „ZUTATEN“) */
.dachzeile {
display: block;
margin: 0 0 18px;
font-family: var(--schrift-pixel);
font-size: 36px;
line-height: 1;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--orange-dunkel);
}
.akzent { color: var(--orange-dunkel); }
.lila { color: var(--lila); }
.gross { font-size: 56px; line-height: 1.25; }
.klein { font-size: 40px; }
.zentriert { text-align: center; }
.unten-raus { margin-top: auto !important; }
/* Töne: deck.js setzt passend data-background-color */
.reveal .ton-lila,
.reveal .ton-nacht { color: var(--hell-text); --schatten: var(--lila-dunkel); }
.reveal .ton-lila :is(h1, h2, h3),
.reveal .ton-nacht :is(h1, h2, h3) { color: var(--hell-text); }
.reveal .ton-lila :is(.akzent, .dachzeile),
.reveal .ton-nacht :is(.akzent, .dachzeile) { color: var(--orange); }
.reveal .ton-lila :is(.leise, .quelle),
.reveal .ton-nacht :is(.leise, .quelle) { color: var(--hell-leise); }
.reveal .ton-lila a,
.reveal .ton-nacht a { color: var(--orange-hell); }
.reveal .ton-lila li::marker,
.reveal .ton-nacht li::marker { color: var(--orange); }
.reveal .ton-lila .lila,
.reveal .ton-nacht .lila { color: var(--lila-mittel); }
.reveal .ton-nacht { --schatten: #2a0630; }
.reveal .ton-orange :is(h1, h2, h3) { color: var(--tinte); }
.reveal .ton-orange :is(.akzent, .dachzeile) { color: var(--lila); }
.reveal .ton-orange { --schatten: var(--orange-dunkel); }
.reveal .ton-hell { --schatten: var(--lila-mittel); }
/* ========== 7. Komponenten ========== */
/* --- Skizzen-Ikonen aus dem Sprite (deck.js) --- */
.skizzen-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ikon {
--ikon: 1.6em;
display: inline-flex;
align-items: center;
gap: 0.35em;
vertical-align: middle;
line-height: 1.15;
}
.ikon .ikon-svg { width: var(--ikon); height: var(--ikon); flex: none; overflow: visible; }
.ikon.mittel { --ikon: 2.6em; }
.ikon.gross { --ikon: 4.4em; }
.ikon.riesig { --ikon: 8em; }
.ikon.senkrecht { flex-direction: column; text-align: center; }
/* --- Textmarker, Stempel, Sprechblase --- */
.marker {
padding: 0 0.12em;
background: linear-gradient(176deg, transparent 52%, var(--orange-hell) 52%, var(--orange-hell) 90%, transparent 90%);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.ton-lila .marker,
.ton-nacht .marker {
background: linear-gradient(176deg, transparent 54%, rgba(254, 163, 0, 0.55) 54%, rgba(254, 163, 0, 0.55) 92%, transparent 92%);
}
.stempel {
--dreh: -7deg;
display: inline-block;
padding: 0.18em 0.5em 0.12em;
border: 7px solid currentColor;
border-radius: 14px 10px 16px 12px;
font-family: var(--schrift-pixel);
font-size: 48px;
font-weight: 700;
line-height: 1.05;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--warnung);
background: rgba(255, 250, 243, 0.86);
box-shadow: inset 0 0 0 4px rgba(255, 250, 243, 0.86), inset 0 0 0 7px currentColor;
transform: rotate(var(--dreh));
text-align: center;
max-width: 90%;
}
.stempel.gruen { color: var(--sicher); }
.stempel.lila { color: var(--lila); }
.stempel.klein { font-size: 40px; border-width: 5px; }
.sprechblase {
position: relative;
display: inline-block;
padding: 0.32em 0.75em 0.36em;
border: var(--kontur) solid var(--tinte);
border-radius: 34px 40px 36px 30px / 30px 36px 40px 34px;
font-weight: 700;
line-height: 1.15;
color: var(--tinte);
background: #fff;
box-shadow: 8px 7px 0 var(--schatten);
}
/* Zipfel: ::before = Kontur-Dreieck in Tinte mit Schatten wie die Blase,
::after = Füllung in Blasenfarbe (5px eingerückt = --kontur), öffnet die Unterkante */
.sprechblase::before,
.sprechblase::after {
content: '';
position: absolute;
left: 26px;
top: calc(100% - 2px);
width: 48px;
height: 38px;
}
.sprechblase::before {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 38'%3E%3Cpath d='M8 2L46 2L2 36Z' fill='%2323122a' stroke='%2323122a' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
filter: drop-shadow(8px 7px 0 var(--schatten));
}
.sprechblase::after {
background: inherit;
clip-path: polygon(13.4px 0, 40.4px 0, 9.2px 24.1px);
}
.sprechblase.rechts::before,
.sprechblase.rechts::after { left: auto; right: 26px; }
.sprechblase.rechts::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 38'%3E%3Cpath d='M40 2L2 2L46 36Z' fill='%2323122a' stroke='%2323122a' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.sprechblase.rechts::after { clip-path: polygon(34.6px 0, 7.6px 0, 38.8px 24.1px); }
.sprechblase.pixel {
font-family: var(--schrift-pixel);
font-weight: 700;
background: var(--orange);
border-radius: 0;
box-shadow: 8px 8px 0 var(--tinte);
}
/* Zipfel als Pixeltreppe: Füllung öffnet die Unterkante, Kontur 5px und Schatten 8px wie die Blase */
.sprechblase.pixel::before { content: none; }
.sprechblase.pixel::after {
left: 30px;
width: 60px;
height: 62px;
clip-path: none;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -2 60 62' shape-rendering='crispEdges'%3E%3Cpath fill='%2323122a' d='M8 8H60V32H46V46H32V60H8Z'/%3E%3Cpath fill='%2323122a' d='M0 0H52V24H38V38H24V52H0Z'/%3E%3Cpath fill='%23fea300' d='M5 -2H47V19H33V33H19V47H5Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
/* --- Handzeichen-Frage ans Publikum --- */
.handzeichen {
display: inline-flex;
align-items: center;
gap: 0.5em;
margin: 0 0 24px;
padding: 0.3em 0.9em 0.3em 0.4em;
border: var(--kontur) solid var(--tinte);
border-radius: var(--skizzen-radius);
font-weight: 700;
line-height: 1.2;
color: var(--tinte);
background: var(--orange-hell);
box-shadow: 10px 8px 0 var(--orange);
}
.handzeichen .ikon { --ikon: 1.9em; }
.ton-lila .handzeichen,
.ton-nacht .handzeichen { box-shadow: 10px 8px 0 var(--lila-dunkel); }
/* --- Kasten / Hinweis --- */
.kasten {
padding: 30px 40px;
border-left: 12px solid var(--lila);
border-radius: 0 20px 20px 0;
background: var(--lila-hell);
}
.kasten.orange { border-color: var(--orange); background: var(--orange-hell); }
.ton-lila .kasten,
.ton-nacht .kasten { border-color: var(--orange); background: rgba(255, 255, 255, 0.12); }
/* --- Aufkleber: weißer Grund für Bilder auf Lila (Biege-Illustration, luise) --- */
.aufkleber {
--dreh: 2deg;
margin: 0;
padding: 22px 22px 16px;
border-radius: 22px;
background: #fff;
box-shadow: 14px 14px 0 var(--schatten);
transform: rotate(var(--dreh));
}
.aufkleber img,
.aufkleber object { display: block; width: 100%; height: auto; }
.aufkleber .bildnachweis,
.aufkleber figcaption {
position: static;
max-width: none;
padding: 10px 4px 0;
background: none;
font-size: 22px;
color: var(--grau);
}
/* --- Logos --- */
.logo-diday { display: block; height: 116px; width: auto; }
.logo-luise {
display: grid;
place-items: center;
width: 168px;
height: 168px;
border-radius: 50%;
background: #fff;
box-shadow: 8px 8px 0 var(--schatten);
}
.logo-luise img { width: 92%; height: auto; }
.logos {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
}
/* --- QR-Codes --- */
.qr-reihe { display: flex; gap: 48px; align-items: flex-start; }
.qr {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
margin: 0;
max-width: 360px;
text-align: center;
}
.qr img {
display: block;
width: 300px;
height: 300px;
padding: 12px;
border-radius: 18px;
background: #fff;
box-shadow: 10px 10px 0 var(--schatten);
}
.qr figcaption { font-size: 32px; font-weight: 700; line-height: 1.2; }
.qr.klein img { width: 200px; height: 200px; padding: 8px; }
.qr.klein figcaption { font-size: 24px; }
/* --- Illustration (Skizzen-SVG per