/* EDN Website – Grundgerüst (Prototyp)
Farben aus dem Markenkern v4, Schrift Inter als Platzhalter (selbst gehostet). */
@font-face { font-family: "Inter"; src: url("fonts/Inter-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root {
--paper: #f1e9d8; /* warmes Papier */
--paper-2: #e9dfca; /* Papier, eine Stufe dunkler (Flächen) */
--ink: #2b2116; /* Tusche */
--ink-soft: #4f3f2e; /* Fließtext zweiter Ordnung */
--line: #d9ccb4; /* feine Trennlinien */
--gold: #d6a63a; /* SAJA, Licht – nur als Akzent, nie für Text */
--sage: #7a9b6e; /* Wachstum – sparsam */
--petrol: #0f2b2e; /* Nacht, Video */
--petrol-ink: #e8e0cf; /* Text auf Petrol */
--panel: #fbf7ef;
--paper-dark: #e5d8bd; /* dunklere Pergamentbahn */
--paper-night: #13302f;/* Nacht-Papier für SAJA.JU */
/* Papierkorn: Vorlage ist dieses SVG-Rauschen (--korn-svg). Benutzt wird es als fertige Kachel in der passenden Dichte
(werkzeug/papierkanten.py --korn), weil das Rauschen im Browser beim ersten Erscheinen bis 90 ms kostete. Rückfall: --korn: var(--korn-svg) */
--korn-svg: url("data:image/svg+xml;utf8,Der Moment, den du kennst .
Gold als Schrift braucht Kontrast: auf Papier ein dunkles Gold (#8c6418, gut 4:1 auf #f1e9d8), auf Nacht das helle Gold. */
@font-face { font-family: "Source Serif 4"; src: url("fonts/SourceSerif4-Variable.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("fonts/SourceSerif4-Variable-Italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }
:root { --gold-text: #8c6418; }
:is(h1, h2, h3) em { font-family: "Source Serif 4", Georgia, serif; font-style: italic; font-weight: 420; color: var(--gold-text); letter-spacing: -.01em; }
:is(.night, .bahn--nacht, .hero-night) :is(h1, h2, h3) em { color: var(--gold); }
/* f5 · Source Serif (laut Briefing) zum Vergleich mit Fraunces: ?schrift=5 */
html.f5 :is(h1, h2, h3, .signature) { font-family: "Source Serif 4", Georgia, serif; font-weight: 480; letter-spacing: -.015em; }
html.f5 h1 { font-size: clamp(40px, 5.2vw, 78px); }
/* Offene Stellen für Hendrik bleiben sichtbar: [Hendrik: …] */
.offen { display: inline; background: #fff2c2; color: #3b2a10; border: 1px dashed #b4862a; border-radius: 5px; padding: .05em .35em; font: 500 .9em/1.5 "Inter", system-ui, sans-serif; letter-spacing: 0; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.bahn--nacht .offen, .night .offen { background: #3a3a7a; color: #fff2c2; border-color: #d6a63a; }
/* =================== Prägewand 4: ein Licht, jede Figur mit eigener Zeichenfläche =================== */
/* Pergament liegt fest im Papier (papier.jpg, oben bei main); das Licht trifft nur die Figuren */
canvas.p4 { position: absolute; pointer-events: none; display: block; }
html.gl4 .slot { visibility: visible; z-index: 0; }
html.gl4 .praegung.p4-ok svg { visibility: hidden; }
html.gl4 .section > .wrap, html.gl4 .page-head > .wrap, html.gl4 .bahn-wrap, html.gl4 .site-footer > .wrap, html.gl4 .bahn > .wrap { position: relative; z-index: 1; }
/* Riss am Nacht-Kopf: das Korn von .tear-paper legt praegewand4.js (unten, "Papier-Naht") genau auf das Korn von main,
sonst entsteht an der Unterkante des Risses eine gerade Naht im Muster. */
/* =================== Handy-Korrekturen 21.10. abends (Hendriks Handy-Fotos) =================== */
/* Kopf-Video am Handy hochkant: über die ganze Breite. Die Breitenregel des Indigo-Kopfs (min(1500px, 72vw)) galt sonst
auch hier, das Video endete links mit harter Kante und verdeckte den Riss unten rechts. */
@media (max-aspect-ratio: 1/1) {
.hero-night .loop { width: 100%; left: 0; right: 0; }
}
/* Aufgeklapptes Menü über der Nacht: dunkle Schrift auf dem hellen Feld (vorher hell auf hell, kaum lesbar) */
.site-header.over-night .nav.is-open ul a { color: var(--ink); }
.site-header.over-night .nav.is-open ul a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.site-header.over-night .nav.is-open .nur-mobil a { color: #fbf7ef; }
/* =================== Kopf-Sequenz 21.10. spät: Fäden → Netz → Logo (media/sterne-netz.mp4, läuft einmal) =================== */
/* Ersetzt die Lage der alten Schleife. Im Endbild steht der goldene Ring genau in der Bildmitte, sein Lichtkreis ist 65,8 % der
Bildhöhe groß (oben reicht er bis an den Bildrand). Darum wird das Bild nicht mehr beschnitten, sondern ganz gezeigt (16:9):
– waagrecht: Bildmitte (also der Ring) genau in der Mitte zwischen Textende und rechtem Rand. Textende = linker Rand von .wrap
plus die längste Zeile, und das ist immer die erste Zeile der Einleitung ("… Gebaut für die Kinder- und"): gemessen 29,1 em
ihrer Schriftgröße (19 bis 22 px) von 844 bis 3440 px Breite; die Überschrift ist überall kürzer. Gerechnet wird mit 29,4 em.
(Vorher stand hier pauschal min(640px, 42vw). Das war unter etwa 1280 px Breite zu knapp, z. B. iPad quer 1024x768 oder
Handy quer: Dort lag "Kinder- und" mitten im hellen Lichtkreis und war nicht lesbar. Wer die Einleitung ändert, prüft diese Zahl.)
Rechts darf das Bild über den Rand laufen (der Kopf schneidet es ab).
– Höhe: 92 % des Kopfs (oben bleibt die Kopfleiste frei), höchstens 1000 px (sonst wird das Logo auf großen Bildschirmen
riesig neben der Schrift), und so klein, dass der Lichtkreis mit je 40 px Luft zwischen Text und rechten Rand passt.
– senkrecht: mittig im Kopf, aber nie höher als 8 % (Kopfleiste). Unten läuft das Bild hinter dem Riss aus.
– Maske: links von kurz vor dem Textende bis zum linken Rand des Lichtkreises (31,5 % der Bildbreite) weich einblenden,
oben und unten weich (oben nur 9 %, damit der Ring oben nicht verblasst). Hinter dem Text bleibt das Netz unsichtbar. */
.hero-night { --text-r: calc(max(6vw, 50vw - 600px) + 29.4 * clamp(19px, 1.45vw, 22px));
--halb: calc((100vw - var(--text-r)) / 2);
--kv-h: min(92%, 1000px, calc((100vw - var(--text-r) - 80px) * 1.52)); }
.hero-night .loop { top: max(8%, calc((100% - var(--kv-h)) / 2)); bottom: auto; right: auto; left: calc(100vw - var(--halb));
width: auto; height: var(--kv-h); aspect-ratio: 16 / 9; transform: translateX(-50%);
object-fit: cover; object-position: 50% 50%;
-webkit-mask-image: linear-gradient(to right, transparent calc(50% - var(--halb) - 40px), #000 31.5%),
linear-gradient(to bottom, transparent 0, #000 9%, #000 93%, transparent 100%);
mask-image: linear-gradient(to right, transparent calc(50% - var(--halb) - 40px), #000 31.5%),
linear-gradient(to bottom, transparent 0, #000 9%, #000 93%, transparent 100%);
-webkit-mask-composite: source-in; mask-composite: intersect; }
/* Hochkant (Handy, Tablet): dieselbe Sequenz unter dem Text, volle Breite, Ring in der Mitte. Höhe = Breite (quadratischer
Ausschnitt aus der Bildmitte), höchstens 55 % der Fensterhöhe. Der Kopf wächst um diese Höhe, damit nichts hinter dem Text liegt;
oben weich aus der Nacht (12 %), unten verschwindet der Boden hinter dem Riss. */
@media (max-aspect-ratio: 1/1) {
.hero-night { --kv-h: min(100vw, 55vh); }
.hero-night .loop { top: auto; bottom: 0; left: 0; right: 0; width: 100%; height: var(--kv-h); aspect-ratio: auto; transform: none;
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%); mask-image: linear-gradient(to bottom, transparent 0, #000 12%); }
.hero-night .night-inner { padding-bottom: calc(var(--kv-h) + 10px); }
}
/* Quer und niedrig (Handy quer, kleine Fenster): 16vh Abstand oben sind dort weniger als die Kopfleiste (96 px),
die Überschrift rutschte unter das Logo der Kopfleiste. Mindestens 112 px; ab 700 px Fensterhöhe ändert sich nichts. */
@media (min-aspect-ratio: 1001/1000) { .night-inner { padding-top: max(16vh, 112px); } }
/* iPhone im Stromsparmodus legt sonst einen Wiedergabeknopf über das stumme Video (site.js zeigt dann ohnehin das Endbild) */
.hero-night .loop::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
/* =================== Kopf-Clips von Hendrik (22.10.2026): media/hero-16x9.mp4 (quer) und media/hero-4x5.mp4 (hochkant) =================== */
/* Hendrik hat die Clips eigens für den Kopf gerendert: durchgehend Nacht, an allen Rändern genau #181c5b (gemessen), zur Mitte heller,
keine eigene Randabdunklung, Netz und Logo im rechten Teil (16:9) bzw. mittig (4:5), am Ende 2 s Standbild auf dem Logo.
Damit nichts "eingesetzt" wirkt (Hendrik am 21.10. zum Papier-Ende), bekommt der Kopf genau die Randfarbe der Clips;
die weichen Masken an den Kanten fallen dann nicht auf. Die Abdunklung oben und links (::before) bleibt für Menü und Text. */
.hero-night { background: #181c5b; }
.hero-night .sky { display: none; } /* die Clips bringen ihre eigenen Lichter; die Sterne der Seite lägen sonst über Netz und Logo */
/* Quer. Gemessen im 16:9-Bild: Netz (größte Ausdehnung, bei 8 s) x 44,7 bis 95,3 % der Breite, Mitte 70 %; Logo am Ende x 50,5 bis 80,6 %,
y 28,5 bis 78,4 %. Die Netz-Mitte steht genau in der Mitte zwischen Textende (--text-r, siehe Block davor) und rechtem Rand
(left = Mitte, translateX(-70 %)). Höhe: Das Netz ist 50,6 % der Bildbreite = 0,9 x Bildhöhe breit und soll mit je 30 px Luft
in diesen Raum passen; höchstens 92 % des Kopfs und 1000 px. Masken: links bis 40 % (dort ist der Clip leer), rechts nur die letzten 3 %. */
.hero-night { --kv-h: min(92%, 1000px, calc((100vw - var(--text-r) - 120px) / .9)); } /* 120 px: links etwa 70 px Luft zur Einleitung, rechts 50 px (erste Fassung mit 60 px reichte bei 1366 bis an „Kinder- und“) */
.hero-night .loop { top: max(8%, calc((100% - var(--kv-h)) / 2)); left: calc(100vw - var(--halb) + 10px); right: auto; bottom: auto;
width: auto; height: var(--kv-h); aspect-ratio: 16 / 9; transform: translateX(-70%); object-fit: cover; object-position: 50% 50%;
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 40%, #000 97%, transparent 100%),
linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 40%, #000 97%, transparent 100%),
linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
-webkit-mask-composite: source-in; mask-composite: intersect; }
/* Volle Deckkraft: Mit .92 würde das Logo matter als in Hendriks Clip (der Grund ist ohnehin dieselbe Farbe) */
@keyframes loopEinVoll { from { opacity: 0; } to { opacity: 1; } }
.hero-night .loop.is-on { opacity: 1; animation-name: loopEinVoll; }
@media (prefers-reduced-motion: reduce) { .hero-night .loop.is-on { animation: none; opacity: 1; } }
/* Hochkant (Handy, Tablet): der 4:5-Clip (site.js tauscht die Quelle) unter dem Text, mittig. Volle Breite, aber höchstens so hoch,
dass der Clip 62 % der Fensterhöhe nicht übersteigt (Tablet hoch: dann schmaler und mittig). Oben weich aus der Nacht, seitlich die
letzten 6 % weich (fällt bei voller Breite mit dem Bildschirmrand zusammen), unten liegt der Riss darüber. */
@media (max-aspect-ratio: 1/1) {
.hero-night { --kv-h: min(125vw, 62vh); }
.hero-night .loop { top: auto; bottom: 0; left: 50%; right: auto; width: auto; height: var(--kv-h); aspect-ratio: 4 / 5; transform: translateX(-50%);
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10%), linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0, #000 10%), linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
-webkit-mask-composite: source-in; mask-composite: intersect; }
.hero-night .night-inner { padding-bottom: calc(var(--kv-h) + 10px); }
}
/* Hochkant (Hendrik 22.10.: "bei mobil könnte das Video etwas höher sein"): der Text beginnt näher an der Kopfleiste (vorher 18vh,
auf dem Handy 152 px), so rückt der Clip rund 50 px nach oben und das Logo steht am Ende weiter im ersten Bildschirm. */
@media (max-aspect-ratio: 1/1) { .hero-night .night-inner { padding-top: max(11vh, 100px); } }
/* Startseite, Goldener Ring auf der Nachtbahn (22.10.): Signatur und Fließtext hell wie die übrigen Nacht-Texte */
.bahn--nacht .signature { color: #f4ecdb; margin: 6px 0 14px; }
.bahn--nacht .ix-ring-text { color: #cfcbe0; }
/* Hochkant, noch höher (Hendrik 22.10.: "Die Sterne können hinter den Buttons liegen. Nur das Logo nicht."): Der Clip schiebt sich mit
seinem oberen Viertel unter die Knöpfe. Im 4:5-Endbild beginnt der Schein des Rings bei 24 % der Clip-Höhe (gemessen), darum liegt
unter dem Text nur 76 % der Clip-Höhe plus 16 px Luft. Netz und Sterne laufen während des Clips hinter den Knöpfen durch, das Logo am Ende nie. */
@media (max-aspect-ratio: 1/1) { .hero-night .night-inner { padding-bottom: calc(var(--kv-h) * .76 + 16px); } }
/* Startseite, Der Nerv (22.10.): "Ich auch." antwortet auf die Überschrift "Du bist angetreten, um etwas zu verändern.", darum groß wie eine Zwischenüberschrift */
.nerv .lines .ix-ichauch { font-size: clamp(30px, 3.2vw, 48px); line-height: 1.1; color: var(--ink); margin-top: clamp(22px, 3vh, 34px); }
/* =================== Nacht mit Detail (Hendrik 22.10.2026: "dieses Blau braucht wieder diese kleinen Sterne … ein bisschen Detailfreude ins Blau") ===================
nacht-kachel.webp (werkzeug: scratchpad/nacht_detail.py, 600 px, nahtlos): schräge Bleistiftschraffur wie im Himmel der Kopf-Clips und ein paar ruhige
kleine Sterne, durchsichtig, liegt über dem Nachtblau. Im Kopf funkeln dazu wieder die Sterne der Seite (.sky); sie liegen jetzt HINTER dem Clip,
so stehen sie links über dem Text und im Rand, aber nie im Netz oder im Logo. */
.hero-night { background: #181c5b image-set(url(nacht-kachel.webp) type("image/webp"), url(nacht-kachel.png) type("image/png")) 0 0 / 600px 600px; }
.hero-night .sky { display: block; z-index: 0; }
.hero-night .loop { z-index: 1; }
.bahn-wrap > .bahn.bahn--nacht { background-image: image-set(url(nacht-kachel.webp) type("image/webp"), url(nacht-kachel.png) type("image/png")), url(pergament.jpg), var(--korn) !important;
background-size: 600px 600px, 512px 512px, auto !important; background-blend-mode: normal, multiply, normal !important; }
/* =================== Scharfe Schrift auf Zetteln (22.10.2026) ===================
Ein gedrehter Zettel (transform: rotate auf .zettel-wrap) wird mit Rissmaske und Schatten erst gerade gezeichnet und dann als Bild gedreht:
Die Schrift wird weich (gemessen rund 30 % weniger Schärfe; Hendrik: "leicht verschwommen"). Darum stehen Zettel mit Text gerade.
Den handgemachten Knick trägt nur der weiße Papierrand dahinter (.zettel-wrap::before), gedreht um --rim. */
.zettel-wrap::before { transform: rotate(var(--rim, 0deg)); }
.talk .sie { transform: none; --rim: .7deg; }
.quotes .zettel-wrap:nth-child(2n) { transform: none; --rim: .8deg; }
.quotes .zettel-wrap:nth-child(2n+1) { transform: none; --rim: -.7deg; }