/* mausemaus — der Brief. Warm und hell, wie der Name es verspricht. */
/* Der leise Ton fuer die kleinen Etiketten (Kicker, Rolle, Eckdaten-Titel,
Werkzeugnamen). Er stand vorher als #A8A79C fest im Text und
erreichte auf dem Untergrund #FBFAF6 nur 2,32:1 -- WCAG AA verlangt fuer
Text dieser Groesse 4,5:1. Gemessen, nicht geschaetzt:
#A8A79C 2,32:1 (vorher)
#6E7873 4,37:1 (--muted, verfehlt die Grenze knapp)
#6D7571 4,54:1 (jetzt)
Bewusst NICHT --muted genommen, obwohl es fast passt: der Token wird auch
auf anderen Untergruenden benutzt (inhalt.css, admin.css), und er
verfehlt hier die Grenze. Bewusst auch nicht dunkler als noetig -- diese
Etiketten sollen leise bleiben, nur eben lesbar. */
:root { --br-leise:#6D7571; }
.br-buehne { display:flex; min-height:100vh; }
.br-scroller { flex:1; min-width:0; overflow-y:auto; height:100vh;
background:#FBFAF6; scroll-behavior:smooth;
/* position:relative ist hier KEINE Kosmetik, sondern die Reparatur des
doppelten Scrollens: Ein absolut positioniertes Kind sucht sich seinen
Bezugsrahmen beim naechsten POSITIONIERTEN Vorfahren. Ohne diese Zeile
war das der -- das versteckte Spamfallen-Feld des Formulars
landete dadurch bei Dokumenthoehe 9303px, obwohl es im Scroller sitzt,
und zog das ganze FENSTER auf. Ergebnis: zwei Rollbalken, und man
konnte hinter das Seitenende weiterscrollen. */
position:relative; }
/* Schneidet die Deko-Blumen an den Seitenrändern ab. Warum ein eigener
Kasten und nicht einfach "overflow-x:clip" am Scroller: Steht "clip" auf
der einen Achse und ein scrollender Wert auf der anderen, macht der
Browser daraus "hidden". Die x-Achse wäre dann zwar ohne Rollbalken, aber
weiterhin ein Scrollbereich -- messbar an scrollWidth, und per Skript
sogar verschiebbar. Hier bleibt die y-Achse "visible", und die Paarung
(clip, visible) bleibt echtes Abschneiden ohne jeden Scrollbereich. */
.br-rand { overflow-x:clip; }
/* 380px Auslauf unten sind kein Zierrat: Ein Element ganz am Seitenende
hat nur so viel Scrollweg vor sich, wie hinter ihm Platz ist. Ohne den
Auslauf käme der letzte Absatz nie am Ende seiner Einblendung an und
bliebe halb durchsichtig stehen. Der Wert gehört zu den Bereichslängen in
assets/bewegung.css -- dort steht die Rechnung. */
.br-spalte { max-width:560px; margin:0 auto; padding:64px 26px 380px; }
/* Der Ueberzieh-Bereich beim Weiterscrollen an den Enden zeigt den Untergrund
des DOKUMENTS, nicht den des Scroll-Kastens. Ohne diese Zeile blitzt dort
das gruenlichere --paper auf, obwohl der Brief auf #FBFAF6 steht. */
html, body { background:#FBFAF6; }
.br-abschnitt { scroll-margin-top:20px; }
.br-gruss { font-family:'TropiWeb','Manrope',sans-serif; font-weight:400; font-size:clamp(38px,6vw,52px);
line-height:1.04; color:#0D1821; margin:0 0 10px; }
.br-gruss em { display:block; font-style:normal; color:#BFCC94; }
.br-kicker { font-family:'Space Mono',monospace; font-size:10.5px; letter-spacing:.16em;
text-transform:uppercase; color:var(--br-leise); margin:0 0 28px; }
.br-text { font-family:'Manrope',sans-serif; font-size:16.5px; line-height:1.8; color:#232c31; }
.br-text p { margin:0 0 20px; }
.br-rolle { font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.16em;
text-transform:uppercase; color:var(--br-leise); margin:44px 0 6px; }
.br-titel { font-family:'TropiWeb','Manrope',sans-serif; font-weight:400; font-size:30px; line-height:1.1;
color:#0D1821; margin:0 0 14px; display:flex; align-items:center; gap:11px; flex-wrap:wrap; }
.br-laeuft { font-family:'Space Mono',monospace; font-size:9px; letter-spacing:.14em;
text-transform:uppercase; color:#0D1821; background:#BFCC94;
padding:5px 9px; border-radius:99px; }
.br-film, .br-bild { margin:24px 0; border-radius:8px; overflow:hidden;
box-shadow:0 9px 26px rgba(13,24,33,.14); }
.br-film iframe { display:block; width:100%; aspect-ratio:16/9; border:0; }
.br-bild { position:relative; margin:24px 0; }
.br-bild img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
.br-bild.br-klein { max-width:260px; }
/* Bilder INNERHALB von Fließtext (renderMarkdown() in .br-text, z. B. mitten
im Projekttext). site.css begrenzt sowas nur unter .prose (dem alten
Detail-Fenster) — .md-gallery selbst gilt zwar global, aber figure/img/
figcaption und {klein}/{mittel} nicht. Ohne diese Regeln laufen eingebettete
Bilder in Originalgröße über den Seitenrand hinaus. */
.br-text figure { margin:24px 0; border-radius:8px; overflow:hidden;
box-shadow:0 9px 26px rgba(13,24,33,.14); }
/* loading="lazy" bleibt richtig — Bilder sollen erst beim Hinscrollen laden.
min-height hält den Platz frei, solange das noch nicht passiert ist, sonst
springt der Text beim Nachladen und die Zeitleiste rechnet mit falschen Höhen.
height:auto ist PFLICHT, seit neu hochgeladene Bilder ihre echten Maße als
width/height am tragen (siehe masseVon() in shared.js): Ohne diese
Zeile gilt für die Breite das CSS (100 %), für die Höhe aber weiter das
Attribut -- das Bild wäre gestaucht oder gezerrt. Mit height:auto rechnet
der Browser die Höhe aus dem Seitenverhältnis und hält den Platz von
Anfang an in der RICHTIGEN Größe frei, statt nur 120px zu raten. */
.br-text img { display:block; width:100%; height:auto; border-radius:8px;
min-height:120px; background:#F2EFE6; }
.br-text figcaption { font-family:'Space Mono',monospace; font-size:10.5px;
letter-spacing:.05em; color:#6E7873; margin-top:7px; text-align:center; }
.br-text figure.mm-klein { max-width:260px; margin-inline:auto; }
.br-text figure.mm-mittel { max-width:460px; margin-inline:auto; }
/* Einbettbare Videos: Coverbild als Vorschau, Abspieler erst beim Klick.
Sonst holt die Startseite fünf fremde Abspieler auf einmal. */
.br-spielbar { cursor:pointer; }
.br-spielbar img { transition:transform .5s var(--mm-kurve); }
.br-spielbar:hover img { transform:scale(1.02); }
.br-play { position:absolute; inset:0; margin:0; width:100%; height:100%;
display:flex; align-items:center; justify-content:center;
border:0; background:rgba(13,24,33,.22); color:#FBFAF6; font-size:30px;
cursor:pointer; transition:background .2s; }
.br-play:hover { background:rgba(13,24,33,.36); }
@media (prefers-reduced-motion: reduce) { .br-spielbar:hover img { transform:none; } }
.br-raus { position:absolute; right:12px; bottom:12px; background:#FBFAF6; color:#0D1821;
text-decoration:none; border-radius:99px; padding:9px 15px;
font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.13em; text-transform:uppercase; }
.br-marken { display:flex; flex-wrap:wrap; gap:7px; margin:16px 0 0; }
.br-marken span { font-family:'Space Mono',monospace; font-size:9px; letter-spacing:.13em;
text-transform:uppercase; color:#6E7873; border:1px solid #E2DFD3;
border-radius:99px; padding:6px 11px; }
/* Eckdaten, Werkzeuge, Kunden — alles, was von der alten Startseite mitkommt. */
.br-infos, .br-werkzeuge { display:grid; gap:0; margin:26px 0 0; border-top:1px solid #E7E3D6; }
.br-infos > div, .br-werkzeuge > div { display:flex; justify-content:space-between;
align-items:baseline; gap:16px; padding:11px 0; border-bottom:1px solid #E7E3D6; }
.br-infos dt { font-family:'Space Mono',monospace; font-size:9.5px;
letter-spacing:.15em; text-transform:uppercase; color:var(--br-leise); }
.br-werkzeuge dt { font-family:'Manrope',sans-serif; font-size:14.5px; color:#232c31; }
.br-infos dd { font-family:'Manrope',sans-serif; font-size:14.5px; color:#232c31; text-align:right; }
.br-werkzeuge dd { font-family:'Space Mono',monospace; font-size:9.5px;
letter-spacing:.14em; text-transform:uppercase; color:var(--br-leise); }
.br-infos dd span { display:block; font-size:12.5px; color:var(--br-leise); }
.br-punkt dd { position:relative; padding-left:15px; }
.br-punkt dd:before { content:''; position:absolute; left:0; top:7px; width:7px; height:7px;
border-radius:50%; background:#BFCC94; }
.br-kunden { display:flex; flex-wrap:wrap; gap:7px; margin:22px 0 0; }
/* Kein text-transform:uppercase hier — anders als bei den Etiketten (.br-marken,
.br-kicker usw.) STEHT der Kundenname selbst hier, nicht nur ein Label daneben.
Grossschreibung würde den tatsächlichen Namen ("Joyn / ProSieben") verfälscht
anzeigen — das verstößt gegen "kein Wort wird verändert". */
.br-kunden span { font-family:'Space Mono',monospace; font-size:9px; letter-spacing:.14em;
color:#6E7873; }
.br-kunden span + span:before { content:'·'; margin-right:8px; color:#CFCBBC; }
.br-mehr { margin:18px 0 0; font-family:'Manrope',sans-serif; font-size:15px; }
.br-kontakt { display:flex; flex-direction:column; gap:6px; margin:18px 0 0; }
.br-kontakt a { font-family:'Manrope',sans-serif; font-size:17px; color:#0D1821; }
/* Das Anfrageformular bleibt fest im HTML — Netlify durchsucht die
hochgeladenen Dateien und findet nur, was dort wirklich steht. */
.br-formular { margin:26px 0 0; display:grid; gap:12px; max-width:440px; }
.br-formular input, .br-formular textarea { font:400 15px/1.5 'Manrope',sans-serif;
padding:12px 14px; border:1px solid #E2DFD3; border-radius:8px; background:#fff;
color:#0D1821; width:100%; }
/* Rueckmeldung des Anfrageformulars. Leer und ohne Klasse ist sie
unsichtbar -- kein Platzhalter, der Luft frisst, solange nichts passiert
ist. Die Farben liegen bewusst ueber 4.5:1 Kontrast, wie der Rest. */
.br-formular-antwort { margin:0; font-size:14px; line-height:1.5;
color:var(--br-leise); min-height:0; }
.br-formular-antwort:empty { display:none; }
.br-formular-antwort.gut { color:#3F6B45; }
.br-formular-antwort.schlecht { color:#96341F; }
.br-formular button[disabled] { opacity:.55; cursor:progress; }
.br-formular button { font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.14em;
text-transform:uppercase; padding:14px 20px; border:0; border-radius:99px;
background:#0D1821; color:#F0F4EF; cursor:pointer; justify-self:start; }
/* Spamfalle: muss ein echtes, ausfuellbares Feld bleiben (Netlify erkennt
Bots daran, dass sie es ausfuellen), darf aber weder sichtbar sein noch
irgendwo Platz beanspruchen. "left:-9999px" allein reichte nicht -- es
erzeugte Layout ausserhalb des Sichtfelds und zwang body zu
overflow-x:hidden. Die Ausschnitt-Variante nimmt garantiert null Raum. */
.versteckt {
position:absolute; width:1px; height:1px; overflow:hidden;
clip-path:inset(50%); white-space:nowrap; margin:-1px; padding:0; border:0;
}
/* Die Sprungmarke ganz am Anfang der Seite. Sie liegt genau so versteckt wie
.versteckt -- aber nur, SOLANGE sie keinen Fokus hat. Wer sie ertabbt,
soll sie sehen; alle anderen sollen von ihr nichts merken. */
.br-sprung {
position:absolute; left:-9999px; top:0; z-index:100;
font-family:'Manrope',sans-serif; font-size:14px;
background:#0D1821; color:#F0F4EF; padding:11px 17px; text-decoration:none;
border-radius:0 0 8px 0;
}
.br-sprung:focus { left:0; }
@media (prefers-reduced-motion: reduce) { .br-scroller { scroll-behavior:auto; } }
/* Türchen: zarte Unterlegung, kleines Blümchen, Zeiger wird zum Blümchen. */
.mm-tuer { color:#0D1821; text-decoration:none;
background:linear-gradient(transparent 62%, #E4EBCF 62%);
cursor:url("data:image/svg+xml;utf8,") 6 6, pointer; }
.mm-tuer:after { content:'❀'; font-size:9px; color:#BFCC94; vertical-align:super; margin-left:2px; }
/* Schon durchgegangen: das Blümchen verblasst. */
.mm-tuer-besucht:after { color:#D6D3C4; }
.mm-tuer-besucht { background:linear-gradient(transparent 62%, #EFEFE6 62%); }
/* Die unmarkierte Tür: kein Blümchen, leuchtet nur beim Darüberfahren auf. */
.mm-tuer-geheim { background:none; }
.mm-tuer-geheim:after { content:none; }
.mm-tuer-geheim:hover { background:linear-gradient(transparent 62%, #E4EBCF 62%); }
.mm-vorschau { position:fixed; z-index:60; width:214px; background:#0D1821; color:#F0F4EF;
border-radius:8px; padding:11px 13px; box-shadow:0 10px 28px rgba(13,24,33,.34);
pointer-events:none; }
.mm-vorschau i { display:block; font-family:'Space Mono',monospace; font-size:8px;
letter-spacing:.16em; text-transform:uppercase; color:#BFCC94; font-style:normal; }
.mm-vorschau b { display:block; font-family:'TropiWeb','Manrope',sans-serif; font-weight:400;
font-size:16px; line-height:1.15; margin:6px 0 4px; }
/* Kippt sie nach unten, gehört der Schatten nach oben — sonst sieht sie
aus, als schwebe sie über dem Wort statt darunter zu hängen. */
.mm-vorschau-unten { box-shadow:0 -10px 28px rgba(13,24,33,.34); }
.mm-vorschau span { font-family:'Manrope',sans-serif; font-size:10.5px;
line-height:1.45; color:#AEB6B2; }
/* ===== Ladeschirm =====
Die Blume dreht sich, bis der Brief steht. Beim Abgang hoert sie auf zu
drehen, wird kurz groesser und schrumpft dann schnell weg -- im selben Zug
blendet die Seite von 0 auf 100 ein.
Der Sicherheitsgedanke steckt in der Verschachtelung: ALLES Versteckende
haengt an html.mm-laedt, und diese Klasse setzt nur JavaScript. Ohne
JavaScript (oder wenn ein Skript abbricht) gibt es keinen Ladeschirm und
die Seite ist von Anfang an sichtbar. */
#mm-laden { display: none; }
html.mm-laedt #mm-laden {
display: grid; place-items: center;
position: fixed; inset: 0; z-index: 200;
background: #FBFAF6;
}
html.mm-laedt .br-buehne { opacity: 0; }
#mm-laden svg { fill: #0D1821; animation: mm-dreh 1.15s linear infinite; }
@keyframes mm-dreh { to { rotate: 360deg; } }
/* Der Abgang. Erst kurz groesser (32% der Zeit), dann schnell auf null. */
html.mm-laedt.mm-fertig #mm-laden svg {
animation: mm-blume-weg .46s var(--mm-kurve) forwards;
}
@keyframes mm-blume-weg {
0% { scale: 1; rotate: 0deg; }
32% { scale: 1.18; rotate: 0deg; }
100% { scale: 0; rotate: 0deg; }
}
html.mm-laedt.mm-fertig #mm-laden {
animation: mm-schirm-weg .46s var(--mm-kurve) forwards;
}
@keyframes mm-schirm-weg { to { opacity: 0; } }
html.mm-laedt.mm-fertig .br-buehne {
opacity: 1; transition: opacity .42s var(--mm-kurve);
}
/* Wer Bewegung reduziert hat, bekommt keinen Kreisel und kein Schrumpfen --
der Schirm ist dann einfach da und dann weg. Doppelt abgesichert: das
JavaScript entfernt ihn ohnehin, hier faellt zusaetzlich jede Animation
weg, damit nichts haengen bleiben KANN. */
@media (prefers-reduced-motion: reduce) {
#mm-laden svg,
html.mm-laedt.mm-fertig #mm-laden svg,
html.mm-laedt.mm-fertig #mm-laden { animation: none; }
html.mm-laedt.mm-fertig #mm-laden { opacity: 0; }
html.mm-laedt.mm-fertig .br-buehne { transition: none; }
}