/* Werkstatt - Oberflaeche. Vorgabe von Kevin: soll aussehen wie CONSTRUCT. Die Anmutung dort steckt nicht in der Farbe, sondern in der Bauweise: alles steht in Panels mit 1px-Kante, Monospace durchgehend, kleine Schrift, wenig Luft zwischen den Zeilen, viel Information pro Flaeche. Danach ist hier gebaut. Die drei Regeln, an denen es kippt: 1. Der Zeichenregen liegt HINTER der Buehne und ist ausserhalb von ihr sichtbar - nie hinter Text. Deshalb ist die Buehne deckend, hat feste Kanten und der Regen darf kraeftiger sein als vorher. 2. Flaechen, auf denen Bilder liegen, bleiben ruhig und dunkel: kein Gruenstich, kein Overlay, kein Filter. Ein Foto bleibt ein Foto. 3. Kein Kasten ohne Inhalt. Fehlt ein Bild, tritt ein Schild aus dem Titel an seine Stelle (.plakat) - keine leere Flaeche mit Schraffur. */ :root { /* Flaechen und Schrift - CONSTRUCT-Matrix, gemessene Kontraste im Kommentar */ --grund: #000600; /* CONSTRUCT --bg */ --flaeche: #05120a; /* Panelgrund, deckend */ --flaeche-hoch: #0b1c11; /* eine Stufe heller: Kopf, aktive Zeilen */ --rand: #16351f; /* Deko-Trennlinien */ --rand-stark: #00a82b; /* CONSTRUCT --green-dim, 6.5:1 auf --grund (WCAG 1.4.11) */ --schrift: #c8f5d4; /* 17.0:1 - Fliesstext. Reines #00ff41 waere als Textmasse zu grell, das bleibt der Signalfarbe. */ --schrift-leise: #7dd398; /* CONSTRUCT --soft, 11.3:1 */ --signal: #00ff41; /* CONSTRUCT --green, 15.0:1 */ --auf-signal: #001b06; /* Schrift auf Signalflaeche, 13.3:1 */ --gefahr: #ff5f57; /* CONSTRUCT-Thema "blut", 6.9:1 auf --grund */ /* rgba() kann keine Hex-Variable mit Deckkraft mischen - darum die Zahlen. */ --signal-rgb: 0, 255, 65; /* Terminal heisst Monospace, auch im Fliesstext. Bewusst kein Webfont: die Werkstatt soll ohne Netz genauso aussehen. */ --schriftfamilie: ui-monospace, "JetBrains Mono", "Fira Code", "DejaVu Sans Mono", Consolas, monospace; --mono: var(--schriftfamilie); /* Abstandsskala - jeder Abstand auf der Seite kommt aus dieser Liste */ --r1: 0.25rem; --r2: 0.5rem; --r3: 0.75rem; --r4: 1rem; --r5: 1.5rem; --r6: 2rem; --r7: 3rem; --r8: 4.5rem; --buehne: 1180px; /* die Flaeche, auf der alles steht */ --lesebreite: 68ch; /* Damit Scrollbalken, Zahlenfeld-Pfeile, Dateidialog und aufgeklappte Selects vom Browser dunkel gezeichnet werden. */ color-scheme: dark; } * { box-sizing: border-box; } /* Der Grundton haengt am , nicht am : nur so liegt der Regen-Canvas (z-index:-1) sicher darueber statt darunter. */ html { background: var(--grund); color-scheme: dark; accent-color: var(--signal); } body { margin: 0; background: transparent; color: var(--schrift); font-family: var(--schriftfamilie); /* Kleiner als der Browser-Standard: Monospace baut breiter, und die Dichte ist genau das, was die Terminal-Anmutung ausmacht. */ font-size: 0.95rem; line-height: 1.5; -webkit-text-size-adjust: 100%; /* Kein eingetippter Text sprengt die Flaeche, in der er steht - auch nicht ein aus Versehen eingefuegter Block ohne ein einziges Leerzeichen. */ overflow-wrap: break-word; } /* Titel stehen in Flex- und Rasterzellen: dort reicht break-word nicht, weil die Zelle sonst so breit wird wie das laengste Wort. anywhere laesst sie schrumpfen. */ .kachel__titel, .kachel__material, .werkliste__titel, .stueck__titel, .werk__titel, .werk__material, .medium__name, .rueckfrage__titel, .brotkrume__hier { overflow-wrap: anywhere; } img { max-width: 100%; height: auto; display: block; } a { color: var(--signal); } a:hover { text-decoration: none; } h1, h2, h3 { line-height: 1.2; text-wrap: balance; } h1 { text-shadow: 0 0 12px rgba(var(--signal-rgb), 0.25); } /* Sichtbarer Fokus auf allem Bedienbaren. Der Versatz laesst den dunklen Grund durchscheinen, dadurch traegt der Ring auch auf hellen Bildern. */ :focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; } /* Auf gruener Flaeche waere ein gruener Ring unsichtbar. */ .knopf--haupt:focus-visible, .sprungmarke:focus-visible { outline-color: var(--schrift); } /* --- Buehne --------------------------------------------------------------- Der deckende Streifen in der Mitte, auf dem die ganze Seite steht. Er ist der Grund, warum der Regen nie hinter Text geraet: daneben laeuft er, hier drin nicht. Die Kanten sind sichtbar - sie machen aus dem Effekt Absicht. */ .buehne { max-width: var(--buehne); min-height: 100vh; margin: 0 auto; background: var(--grund); border-left: 1px solid var(--rand); border-right: 1px solid var(--rand); /* Trennt Buehne und Regen auch dort, wo der Rand auf dunklen Regen trifft. */ box-shadow: 0 0 40px rgba(0, 0, 0, 0.9); position: relative; z-index: 1; /* Kopf, Inhalt, Fuss untereinander; der Inhalt nimmt den Rest. Sonst haengt der Fuss auf kurzen Seiten (ein Musikstueck mit nur einem Notenblatt, die Fehlerseite) in der Mitte der Buehne. */ display: flex; flex-direction: column; } .inhalt { flex: 1 0 auto; } /* --- Zeichenregen --------------------------------------------------------- Deko und sonst nichts: hinter allem, ohne Klicks zu fangen, und nur in den Raendern neben der Buehne zu sehen. Der Umschalter sitzt im Kopf, der Wunsch haengt als Attribut am - dort ueberlebt er den Seitenwechsel ohne Neuladen. Das Canvas steht ausserhalb von

und wird nie angefasst, der Regen laeuft also durch wie die Musik. */ .regen { position: fixed; inset: 0; width: 100%; /* ein