diff --git a/workspace/assets/css/heim.css b/workspace/assets/css/heim.css
index ca2e533c..238ee9b7 100644
--- a/workspace/assets/css/heim.css
+++ b/workspace/assets/css/heim.css
@@ -162,27 +162,54 @@
und laeuft der Laenge nach (ein Kegelverlauf trifft auf einem
1200 px breiten Balken die ganze Oberkante mit wenigen Grad und
bewirkt nichts). Rund -> conic, lang -> linear. */
+ /* NACHGERECHNET, NICHT NACH GEFUEHL VERTEILT (08.09.2026).
+
+ Filipe: "der rand ... soll rot schwarz silber und babyblau sein,
+ rot und babyblau soll man am meisten sehen."
+
+ Die alte Fassung hatte alle vier Farben -- aber in der falschen
+ Gewichtung. Jeden Stopp mit der Haelfte des Abstands zu seinen
+ Nachbarn gewichtet ergab: Schwarz 37,5 %, Babyblau 27,5 %, Silber
+ 22 %, ROT 13 %. Genau die beiden Farben, die man am meisten sehen
+ sollte, kamen zusammen auf 40,5 % -- Silber allein hatte mehr
+ Platz als Rot. Im Quelltext faellt das nicht auf: Man sieht neun
+ silberne Stopps und denkt an Spitzlichter, nicht an ein Fuenftel
+ der Flaeche.
+
+ Jetzt: Babyblau 41,5 %, Rot 33 %, Schwarz 21,5 %, Silber 4 %.
+ Rot und Babyblau zusammen 74,5 %, und sie liegen nur 8,5 Punkte
+ auseinander. Silber ist auf das zurueckgenommen, was es sein soll:
+ der Treffpunkt in der Mitte -- dieselbe Stelle, an der sich im
+ Schriftzug oben Chili und Husky treffen. Dass Babyblau etwas
+ vorne liegt, ist Absicht und keine Ungenauigkeit: Es ist der
+ ruhigere der beiden Toene, und der Rand steht dauerhaft im Bild.
+
+ Links Rot, rechts Babyblau -- wie beim Schriftzug. Deckend, nicht
+ halbdurchsichtig (halbdurchsichtiges Metall ist graues Glas), und
+ LINEAR laengs statt conic (ein Kegelverlauf trifft eine 1200 px
+ breite Oberkante mit wenigen Grad und bewirkt nichts). */
background:
linear-gradient(96deg,
- #1a0509 0%,
- #ff5f6d 4%,
- #ffe1e4 8%,
- #7a1620 12%,
- #08090e 18%,
- #8b9aad 24%,
- #f6fbff 28%,
- #0a0d14 35%,
- #4d5c72 42%,
- #e8f1fb 47%,
- #06080d 54%,
- #5d7a92 61%,
- #8fd8ff 67%,
- #e6f6ff 71%,
- #123043 76%,
- #070a10 82%,
- #6f8298 88%,
- #f2f8ff 92%,
- #1a0509 100%);
+ #20060b 0%,
+ #c8323f 3%,
+ #ff5f6d 10%,
+ #ffd9dd 16%, /* Spitzlicht im Rot */
+ #ff5461 23%,
+ #b3242f 31%,
+ #4a0c13 38%,
+ #0a0c12 43%, /* schwarze Fuge */
+ #8fa0b4 47%,
+ #f4faff 51%, /* der silberne Treffpunkt -- Mitte der Kachel */
+ #8fa0b4 55%,
+ #0a0c12 59%, /* schwarze Fuge */
+ #1d4a63 64%,
+ #4f95bd 70%,
+ #8fd8ff 76%,
+ #dff2ff 81%, /* Spitzlicht im Babyblau */
+ #7ecdf5 87%,
+ #3f7fa3 93%,
+ #10222e 97%,
+ #06080f 100%);
clip-path: polygon(
var(--k-fase) 0, calc(100% - var(--k-fase)) 0,
100% var(--k-fase), 100% calc(100% - var(--k-fase)),
@@ -210,14 +237,24 @@
Nieten sind es nicht. Derselbe Fehler wie mit der Koernung im
August: Wer zwei Dinge auf eine Ebene legt, gibt ihnen dieselbe
Lautstaerke. */
-.willkommen::before {
- content: ""; position: absolute; inset: var(--k-rand);
- z-index: 0; pointer-events: none;
- clip-path: polygon(
+/* DIE INNENFORM STEHT EINMAL, NICHT ZWEIMAL.
+
+ Sie wird von zwei Ebenen gebraucht (dem Innenglas hier und dem
+ Universum darunter). Zwei getippte Polygone waeren zwei
+ Gelegenheiten, dass eine Fase einen halben Pixel danebenliegt --
+ und genau diese Sorte Doppelung hat mich in dieser Datei heute
+ schon zweimal Zeit gekostet. Ein Polygon passt in eine Variable,
+ also gehoert es in eine. */
+.willkommen { --k-innenform: polygon(
calc(var(--k-fase) - var(--k-rand)) 0, calc(100% - var(--k-fase) + var(--k-rand)) 0,
100% calc(var(--k-fase) - var(--k-rand)), 100% calc(100% - var(--k-fase) + var(--k-rand)),
calc(100% - var(--k-fase) + var(--k-rand)) 100%, calc(var(--k-fase) - var(--k-rand)) 100%,
- 0 calc(100% - var(--k-fase) + var(--k-rand)), 0 calc(var(--k-fase) - var(--k-rand)));
+ 0 calc(100% - var(--k-fase) + var(--k-rand)), 0 calc(var(--k-fase) - var(--k-rand))); }
+
+.willkommen::before {
+ content: ""; position: absolute; inset: var(--k-rand);
+ z-index: 0; pointer-events: none;
+ clip-path: var(--k-innenform);
/* DER HINTERGRUND -- SECHS SCHICHTEN, VON OBEN NACH UNTEN GELESEN.
Wunsch Filipe: "die kachel selbst soll einen uebertrieben krank
@@ -323,7 +360,11 @@
macht aus einer Flaeche ueber der ganzen Konsole einen leeren
Inline-Span. Eine Regel auf `> *` trifft eben auch das, was gar kein
Inhalt ist. */
-.willkommen > *:not(.licht) { position: relative; z-index: 1; }
+/* Alles ausser den beiden HINTERGRUND-Ebenen kommt ueber das Glas.
+ `.zuniversum` gehoert dazu -- ohne die Ausnahme laege es mit
+ z-index 1 UEBER dem Text, und die Anrede staende hinter fuenf
+ Chilis. */
+.willkommen > *:not(.licht, .zuniversum) { position: relative; z-index: 1; }
/* =====================================================================
DAS LICHT AUF DER KONSOLE IST EINE SPIEGELUNG, KEIN FARBSCHLEIER
@@ -1923,3 +1964,143 @@
rgba(120, 150, 185, .34) 12deg 15deg, transparent 15deg 18deg);
filter: drop-shadow(0 0 2px rgba(150, 170, 210, .4));
}
+
+/* =====================================================================
+ DAS UNIVERSUM HINTER DER KONSOLE (screen21, 08.09.2026)
+
+ Filipe: "ich will dass du im hintergrund dieser kachel das logo von
+ spicy media machst. es soll mega speziell sein, es soll sogar paar
+ mal zu sehen sein, es soll sich bewegen, schweben ... der ganze
+ hintergrund soll wie ein universum aussehen bitte."
+
+ DIE SCHWIERIGKEIT IST NICHT DAS UNIVERSUM, SONDERN DER TEXT DARAUF.
+ Auf dieser Kachel stehen Anrede, Titel, drei Zahlen und ein
+ Lagesatz. Ein Hintergrund, der auffaellt, macht genau das kaputt,
+ wofuer die Kachel da ist. Deshalb liegt hier alles zwischen 6 und
+ 10 Prozent Deckkraft -- man SIEHT die Chilis, man LIEST sie nicht.
+ Wer sie sucht, findet fuenf; wer die Uhrzeit sucht, findet die
+ Uhrzeit.
+
+ AUGENSCHONEND HEISST HIER VOR ALLEM: LANGSAM. Die Bahnen dauern 71
+ bis 118 Sekunden, die Sterne 240. Bei einer Kachel, die stundenlang
+ im Bild steht, ist eine Bewegung, die man BEMERKT, eine Bewegung,
+ die stoert. Nichts blinkt, nichts pulsiert, nichts wechselt die
+ Helligkeit -- es driftet.
+
+ NUR `transform` UND `opacity` WERDEN BEWEGT. Beide laufen auf der
+ Grafikkarte; ein animiertes `background-position` oder `left`
+ zwingt den Browser bei jedem Bild zum Neuzeichnen der ganzen
+ Kachel, und diese Kachel hat vierzehn Hintergrundebenen.
+ ===================================================================== */
+.willkommen > .zuniversum {
+ position: absolute; inset: var(--k-rand);
+ z-index: 0; pointer-events: none; overflow: hidden;
+ clip-path: var(--k-innenform);
+
+ /* DIE NEBEL. Drei Wolken in den Hausfarben: Rot unten links,
+ Babyblau oben rechts, dazwischen ein Hauch Lila als Uebergang --
+ dieselbe Anordnung wie in der Fassung ringsum, damit Rand und
+ Flaeche dieselbe Richtung haben. Ohne den Lila-Hauch stossen Rot
+ und Blau in der Mitte hart aneinander und sehen aus wie zwei
+ Scheinwerfer, nicht wie ein Raum. */
+ background:
+ radial-gradient(125% 95% at 10% 88%, rgba(255, 74, 92, .115), transparent 62%),
+ radial-gradient(115% 90% at 90% 12%, rgba(126, 200, 242, .105), transparent 60%),
+ radial-gradient( 70% 62% at 52% 50%, rgba(167, 139, 250, .055), transparent 68%);
+}
+
+/* DAS STERNENFELD. Vier Verlaufsebenen, gekachelt -- keine Elemente.
+
+ Sechzig Sterne waeren sechzig Knoten im Baum; vier Ebenen mit
+ unterschiedlicher Kachelgroesse ergeben ein Feld, in dem sich kein
+ Muster wiederholt, das man sieht (137 / 191 / 223 / 89 Pixel haben
+ kein gemeinsames Vielfaches unter 1200 -- die Kachel ist breiter
+ als jede Wiederholung, die auffallen wuerde).
+
+ Die Sterne tragen die drei Hausfarben, nicht nur Weiss: ein paar
+ rote, ein paar babyblaue, der Rest silbrig. */
+.willkommen > .zuniversum::before {
+ content: ""; position: absolute; inset: -8%;
+ /* HELLER UND DICHTER ALS IM ERSTEN ANLAUF. Mit .34 bis .50 Deckkraft
+ und einem Stern je 137 px waren sie da -- aber unter dem
+ Kohlefasergewebe der Kachel nicht mehr zu sehen. Ein Sternenfeld,
+ das man nur im Quelltext findet, ist keines. Jetzt zwei Sterne je
+ Kachel (der zweite versetzt) und .55 bis .8 Deckkraft. Sie
+ leuchten nicht, sie stehen -- Bewegung kommt allein aus der
+ langsamen Drift. */
+ background-image:
+ radial-gradient(1.4px 1.4px at 22px 31px, rgba(255, 255, 255, .80), transparent 100%),
+ radial-gradient(1.0px 1.0px at 104px 96px, rgba(226, 240, 255, .55), transparent 100%),
+ radial-gradient(1.2px 1.2px at 96px 12px, rgba(214, 234, 255, .66), transparent 100%),
+ radial-gradient(1.0px 1.0px at 31px 140px, rgba(190, 220, 250, .50), transparent 100%),
+ radial-gradient(1.7px 1.7px at 47px 118px, rgba(255, 150, 162, .62), transparent 100%),
+ radial-gradient(1.1px 1.1px at 168px 44px, rgba(255, 176, 186, .46), transparent 100%),
+ radial-gradient(1.3px 1.3px at 133px 74px, rgba(150, 210, 245, .64), transparent 100%),
+ radial-gradient(1.0px 1.0px at 38px 22px, rgba(126, 200, 242, .48), transparent 100%);
+ background-size:
+ 137px 137px, 137px 137px, 191px 191px, 191px 191px,
+ 223px 223px, 223px 223px, 89px 89px, 89px 89px;
+ /* Sehr langsames Wandern des ganzen Feldes -- 240 s fuer 4 Prozent
+ Weg. Das ist unter der Schwelle, an der man Bewegung bemerkt, und
+ genau darueber, an der ein Standbild tot wirkt. */
+ animation: zuni-sterne 240s linear infinite;
+ will-change: transform;
+}
+
+/* DIE CHILIS. Jeder bekommt Ort, Groesse, Tiefe, Dauer, Startversatz
+ und Neigung vom Element (siehe start.html) -- diese Regel weiss von
+ keinem einzelnen.
+
+ `--tief` steuert Deckkraft UND Unschaerfe zugleich: Was weiter weg
+ ist, ist blasser und weicher. Das ist der Unterschied zwischen
+ fuenf Aufklebern und einem Raum mit Tiefe. Die Unschaerfe ist hier
+ ausdruecklich richtig (Entfernung), waehrend sie an der Uhr
+ ausdruecklich falsch war (dort ist alles gleich nah). */
+.willkommen > .zuniversum .zuniversum__chili {
+ position: absolute;
+ left: var(--x); top: var(--y);
+ width: var(--gr); height: var(--gr);
+ margin: calc(var(--gr) / -2);
+ background: url("../img/marke-spicy.webp") center / contain no-repeat;
+ opacity: var(--tief);
+ filter: blur(calc((.11 - var(--tief)) * 22px));
+ animation: zuni-schweben var(--dauer) ease-in-out var(--ver) infinite;
+ will-change: transform;
+}
+
+/* Die Bahn: eine langgezogene Acht statt eines Kreises. Ein Kreis
+ sieht nach Karussell aus, sobald man ihn zweimal gesehen hat; eine
+ Acht kommt nie an derselben Stelle mit derselben Richtung vorbei.
+ Die Neigung `--kipp` kommt oben drauf, damit nicht alle fuenf
+ dieselbe Lage haben. */
+@keyframes zuni-schweben {
+ 0% { transform: translate(0, 0) rotate(var(--kipp)) scale(1); }
+ 25% { transform: translate(14px, -11px) rotate(calc(var(--kipp) + 5deg)) scale(1.05); }
+ 50% { transform: translate(-6px, -20px) rotate(calc(var(--kipp) - 3deg)) scale(.97); }
+ 75% { transform: translate(-16px, -7px) rotate(calc(var(--kipp) + 2deg)) scale(1.03); }
+ 100% { transform: translate(0, 0) rotate(var(--kipp)) scale(1); }
+}
+@keyframes zuni-sterne {
+ 0% { transform: translate(0, 0); }
+ 100% { transform: translate(-3.2%, 2.4%); }
+}
+
+/* WER WENIGER BEWEGUNG WILL, BEKOMMT EIN STANDBILD -- kein leeres
+ Feld. Die Chilis bleiben stehen, wo sie stehen; der Raum bleibt,
+ nur die Drift geht weg. Ein `display: none` waere hier die bequeme
+ und die falsche Antwort: Die Einstellung heisst "weniger Bewegung",
+ nicht "weniger Gestaltung". */
+@media (prefers-reduced-motion: reduce) {
+ .willkommen > .zuniversum::before,
+ .willkommen > .zuniversum .zuniversum__chili { animation: none; }
+}
+
+/* Auf schmalen Bildschirmen wird die Kachel hoch und schmal. Fuenf
+ Chilis draengen sich dann auf einer Flaeche, auf der auch der Text
+ steht -- die beiden groessten gehen deshalb. Nicht "weil es besser
+ aussieht", sondern weil bei 380 px Breite der 122-px-Chili ein
+ Drittel der Kachel einnimmt und hinter dem Titel steht. */
+@media (max-width: 700px) {
+ .willkommen > .zuniversum .zuniversum__chili:nth-child(1),
+ .willkommen > .zuniversum .zuniversum__chili:nth-child(3) { display: none; }
+}
diff --git a/workspace/aufgaben.html b/workspace/aufgaben.html
index e0f8ad39..43d0f128 100644
--- a/workspace/aufgaben.html
+++ b/workspace/aufgaben.html
@@ -14,10 +14,10 @@
-
-
-
-
+
+
+
+
@@ -217,10 +217,10 @@
-
-
-
-
-
+
+
+
+
+