/*
* Thema für die HTML-Fassung der Folien (bauen.mjs bettet es ein).
*
* Zwei Fassungen derselben Folien: hell für den Bildschirm, schwarz für den Beamer.
* Umgeschaltet wird mit der Taste D oder über die Klasse `dunkel` am .
* Die Maße (Schriftgröße, Ränder) folgen dem Nimbalyst-Theme „executive“, damit die
* Folien in Nimbalyst und im Browser gleich umbrechen.
*
* Die Klassen aus der Foliendatei (.shot, .klein, .kette, .zitat, .ablauf) lesen ihre Farben
* aus den Variablen --mittel, --leise, --bildrand, --bildschatten, --bildfilter,
* --schritt-rand und --schritt-an-text.
*/
:root {
--r-background-color: #ffffff;
--r-main-color: #10233f;
--r-heading-color: #0f2747;
--r-link-color: #2457d6;
--r-link-color-hover: #1a44ad;
--r-selection-background-color: rgba(36, 87, 214, 0.2);
--r-selection-color: inherit;
--r-main-font: Inter, 'Segoe UI', system-ui, -apple-system, sans-serif;
--r-heading-font: Inter, 'Segoe UI', system-ui, -apple-system, sans-serif;
--r-main-font-size: 34px;
--r-block-margin: 22px;
--r-heading-text-transform: none;
--r-heading-letter-spacing: -0.02em;
--r-heading-font-weight: 600;
--akzent: #2457d6;
--mittel: #45524f;
--leise: #6b7a77;
--bildrand: #d6dcda;
--bildschatten: 0 8px 24px rgba(15, 39, 71, 0.12);
--tabelle-kopf: #0f2747;
--tabelle-kopf-text: #ffffff;
--tabelle-linie: rgba(15, 39, 71, 0.14);
--bildfilter: none;
--schritt-rand: #c9d1ce;
--schritt-an-text: #ffffff;
}
:root.dunkel {
--r-background-color: #000000;
--r-main-color: #e6ecf3;
--r-heading-color: #ffffff;
--r-link-color: #8ab4ff;
--r-link-color-hover: #b8d0ff;
--r-selection-background-color: rgba(138, 180, 255, 0.3);
--akzent: #6ea0ff;
--mittel: #b9c4cf;
--leise: #8f9ba7;
/* Helle Bildschirmfotos auf Schwarz: eine sichtbare graue Kante fasst sie, leicht gedimmt
überstrahlen sie am Beamer weniger (Weiß wird #ebebeb). */
--bildrand: #4a525c;
--bildschatten: 0 0 0 4px rgba(255, 255, 255, 0.06);
--bildfilter: brightness(0.92);
--tabelle-kopf: #1d2b42;
--tabelle-kopf-text: #ffffff;
--tabelle-linie: rgba(255, 255, 255, 0.16);
--schritt-rand: #5a6470;
--schritt-an-text: #000000;
}
html,
body,
.reveal-viewport {
background: var(--r-background-color);
}
.reveal .slides {
text-align: left;
}
.reveal .slides section {
padding: 2.3rem 2.7rem 2.1rem;
/* Innenabstand in die Folienbreite rechnen, sonst ragen breite Bilder, Tabellen und die
Schrittleiste oben rechts über den Rand. */
box-sizing: border-box;
}
.reveal h1,
.reveal h2,
.reveal h3 {
text-transform: none;
letter-spacing: -0.02em;
}
/* Der kurze Balken unter Titel und Folienüberschrift */
.reveal h1::after,
.reveal h2::after {
content: '';
display: block;
width: 88px;
height: 6px;
margin-top: 18px;
border-radius: 999px;
background: var(--akzent);
}
.reveal table {
border-collapse: collapse;
}
.reveal table th {
background: var(--tabelle-kopf);
color: var(--tabelle-kopf-text);
}
.reveal table th,
.reveal table td {
border-bottom: 1px solid var(--tabelle-linie);
padding: 0.3em 0.6em;
}
.reveal .progress {
color: var(--akzent);
height: 4px;
}
/* Die HTML-Fassung ist 16:9 (1280 × 720) und hat mehr Höhe übrig als die Nimbalyst-Vorschau
(960 × 700): Bilder größer. `html` davor, damit das die Angaben aus der Foliendatei schlägt. */
html .reveal .shot {
height: 500px;
}
html .reveal .shot.gross {
height: 570px;
}
/* Bild der aktuellen Folie im Vollbild (Taste X oder Enter, Klick aufs Bild) */
.bild-vollbild {
position: fixed;
inset: 0;
z-index: 200;
display: none;
align-items: center;
justify-content: center;
background: var(--r-background-color);
cursor: zoom-out;
}
.bild-vollbild.offen {
display: flex;
}
.bild-vollbild img {
width: 98vw;
height: 98vh;
object-fit: contain;
}
/* Kurzer Hinweis beim Umschalten, verschwindet von selbst */
.umschalt-hinweis {
position: fixed;
right: 1.2rem;
bottom: 1.2rem;
z-index: 100;
padding: 0.4rem 0.8rem;
border-radius: 6px;
font: 14px/1.2 'Segoe UI', system-ui, sans-serif;
color: var(--r-main-color);
background: color-mix(in srgb, var(--r-background-color) 80%, var(--r-main-color));
opacity: 0;
transition: opacity 0.4s;
pointer-events: none;
}
.umschalt-hinweis.sichtbar {
opacity: 1;
}