diff --git a/workspace/assets/css/heim.css b/workspace/assets/css/heim.css
index 3bc61e9f..b164cb44 100644
--- a/workspace/assets/css/heim.css
+++ b/workspace/assets/css/heim.css
@@ -129,48 +129,46 @@
geschliffenes Metall. Dieselbe Bauart wie das Medaillon auf
VanVans Business-Hub, nur rechteckig gefasst und mit den beiden
Hausfarben statt reinem Silber. */
- /* DIE FASSUNG: gebuerstetes Metall, LAENGS gerichtet.
+ /* DIE FASSUNG: ROT, SCHWARZ, BABYBLAU -- laengs gebuerstet.
- ZWEI FEHLER LAGEN HIER HINTEREINANDER, beide im Bildschirmfoto
- gesehen und nicht im Kopf:
+ Wunsch Filipe: "der rand soll auch eine mischung von rot schwarz
+ und babyblau haben."
- (1) HALBDURCHSICHTIG. Metall, durch das der Hintergrund scheint,
- ist kein Metall -- es las sich als graue Linie. Derselbe
- Fehler stand gleichzeitig an der Uhr. Jetzt deckende Farben.
+ Vorher war sie Stahl mit je einem roten und blauen Tupfer. Jetzt
+ sind die drei Farben die Fassung SELBST: links die rote Haelfte,
+ rechts die babyblaue, dazwischen und an den Raendern Schwarz --
+ und ueberall dort, wo Metall das Licht bricht, die hellen
+ Spitzlichter. Es sind dieselben zwei Farben wie im Motiv und auf
+ der Anmeldekarte; die Konsole traegt damit die Handschrift des
+ Hauses statt einer dritten.
- (2) KEGELVERLAUF AUF EINER BREITEN FLAECHE. Bei der runden Uhr ist
- `conic-gradient` genau richtig: Jede Stelle des Rings liegt in
- einem anderen Winkel, also wandert das Licht rundherum. Bei
- einem 1200 px breiten Balken liegt die GANZE Oberkante in
- einem Winkelausschnitt von wenigen Grad -- der Verlauf
- passiert dort fast nichts, und die Fassung sah wieder flach
- aus. Ein gebuersteter Metallbalken glaenzt der LAENGE nach:
- helle und dunkle Zonen wandern von links nach rechts. Deshalb
- hier ein linearer Verlauf mit zwoelf Stopps, und nur an den
- beiden Stellen, an denen das Haus seine Farben hat, eine
- warme und eine kuehle Spiegelung.
-
- Die Lehre gilt allgemein: Die Verlaufsart muss zur FORM passen,
- nicht zum Material. Rund -> conic, lang -> linear. */
+ ZWEI FEHLER, DIE ICH HIER SCHON GEMACHT HABE und die deshalb im
+ Aufbau stecken: Die Farben sind DECKEND (halbdurchsichtiges Metall
+ ist kein Metall, es ist graues Glas), und der Verlauf ist LINEAR
+ 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. */
background:
linear-gradient(96deg,
- #cfdcec 0%,
- #f6fbff 4%,
- #64768d 9%,
- #e3ecf7 15%,
- #7d8fa6 22%,
- #ff8a94 27%,
- #f8fcff 31%,
- #55677e 38%,
- #dbe6f3 46%,
- #6b7d94 55%,
- #f2f8ff 63%,
- #8fd8ff 70%,
- #5d6f87 77%,
- #e9f1fb 85%,
- #7a8ca3 92%,
- #f4f9ff 97%,
- #cfdcec 100%);
+ #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%);
clip-path: polygon(
var(--k-fase) 0, calc(100% - var(--k-fase)) 0,
100% var(--k-fase), 100% calc(100% - var(--k-fase)),
@@ -206,13 +204,44 @@
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)));
+ /* DER HINTERGRUND -- SECHS SCHICHTEN, VON OBEN NACH UNTEN GELESEN.
+
+ Wunsch Filipe: "die kachel selbst soll einen uebertrieben krank
+ geilen hintergrund haben ... die einzige kachel, die komplett aus
+ dem rudel faellt."
+
+ 1 die Lichtkante ganz oben -- die Innenseite der Fassung
+ 2 das KOHLEFASERGEWEBE: zwei gegenlaeufige Schraegen, die sich
+ zu einem Geflecht kreuzen. Bei drei Prozent sieht man kein
+ Muster, man sieht ein MATERIAL -- und genau darum geht es.
+ Ein Gewebe sagt "gebaut", ein Raster sagt "gezeichnet".
+ 3 das feine Messraster (bleibt, es gehoert zur Sprache des Hauses)
+ 4 DER HORIZONT: ein heller Strich im unteren Drittel mit einem
+ Schein darueber. Er gibt der Flaeche eine Tiefe, die kein
+ Verlauf allein herstellt -- das Auge liest ihn als Kante
+ zwischen "vorn" und "hinten".
+ 5 die beiden Farbbecken: Rot links unten, Babyblau rechts unten
+ -- kraeftiger als bisher, weil sie jetzt gegen ein Material
+ arbeiten und nicht gegen eine leere Flaeche
+ 6 der Grund: fast schwarz, mit einem Blauschimmer oben
+
+ ALLES WEIT UNTER DER BLENDSCHWELLE. Die Regel des Hauses gilt auch
+ fuer "krank geil": Es darf beeindrucken, es darf nicht blenden. */
background:
- linear-gradient(180deg, rgba(255, 255, 255, .11) 0 1px, transparent 1px),
- repeating-linear-gradient(0deg, rgba(150, 186, 220, .085) 0 1px, transparent 1px 16px),
- repeating-linear-gradient(90deg, rgba(150, 186, 220, .085) 0 1px, transparent 1px 16px),
- radial-gradient(120% 90% at 4% 108%, rgba(255, 95, 109, .16), transparent 52%),
- radial-gradient(120% 90% at 96% 108%, rgba(143, 216, 255, .17), transparent 52%),
- linear-gradient(168deg, #131a27 0%, #0a0e17 62%, #06090f 100%);
+ linear-gradient(180deg, rgba(255, 255, 255, .13) 0 1px, transparent 1px),
+ repeating-linear-gradient(58deg,
+ rgba(190, 215, 245, .030) 0 1px, transparent 1px 7px),
+ repeating-linear-gradient(-58deg,
+ rgba(190, 215, 245, .030) 0 1px, transparent 1px 7px),
+ repeating-linear-gradient(0deg, rgba(150, 186, 220, .075) 0 1px, transparent 1px 16px),
+ repeating-linear-gradient(90deg, rgba(150, 186, 220, .075) 0 1px, transparent 1px 16px),
+ linear-gradient(180deg, transparent 0 71%,
+ rgba(190, 220, 255, .16) 71% calc(71% + 1px), transparent calc(71% + 1px)),
+ radial-gradient(90% 34% at 50% 71%, rgba(150, 200, 255, .10), transparent 70%),
+ radial-gradient(120% 95% at 2% 112%, rgba(255, 78, 94, .26), transparent 54%),
+ radial-gradient(120% 95% at 98% 112%, rgba(120, 205, 255, .26), transparent 54%),
+ radial-gradient(140% 120% at 50% -30%, rgba(96, 140, 200, .16), transparent 62%),
+ linear-gradient(168deg, #0f1522 0%, #080c14 58%, #04060b 100%);
}
/* =====================================================================
@@ -563,6 +592,15 @@
Beim ersten Anlauf lagen beide hier, gleich lang: Aus der Skala
wurde ein Zahnkranz. Im Bildschirmfoto gesehen. */
background:
+ /* AUFGESETZTE INDIZES bei 3, 6 und 9 Uhr. Auf einer guten Luenette
+ sind die Viertelstunden keine Striche wie die anderen, sondern
+ eigene Marken -- breiter und HELL statt graviert, weil sie
+ aufgesetzt sind und deshalb Licht fangen statt Schatten zu
+ halten. Ein Kegelverlauf mit 90-Grad-Takt, um 90 Grad gedreht:
+ So trifft er 3, 6 und 9 und laesst die 12 der roten Marke. */
+ repeating-conic-gradient(from 88.6deg,
+ rgba(244, 250, 255, .92) 0deg 2.8deg,
+ transparent 2.8deg 90deg),
repeating-conic-gradient(from 0deg,
rgba(6, 10, 18, .85) 0deg 1.5deg,
transparent 1.5deg 30deg);
@@ -639,17 +677,46 @@
.uhr__zwoelf, .uhr__perle { display: none; }
}
-/* SCHICHT 3: die Glaskuppe. */
+/* SCHICHT 3: DAS GLAS -- ENTSPIEGELTES SAPHIRGLAS (07.09.2026)
+
+ Nachgelesen statt geraten. Eine Entspiegelung (Anti-Reflex) wird im
+ Vakuum aufgedampft und senkt die Spiegelung auf unter ein Prozent;
+ das Zifferblatt wirkt dadurch SCHAERFER, nicht milchiger. Und das
+ Erkennungszeichen einer guten Beschichtung ist kein weisser Schleier,
+ sondern ein **topasblauer Schimmer**, der je nach Lichteinfall ueber
+ das Glas laeuft -- daran sieht ein Kenner sofort, dass da Saphirglas
+ sitzt und kein Mineralglas.
+
+ Vorher lag hier genau das Gegenteil: ein breiter weisser Verlauf
+ ueber ein Fuenftel der Scheibe. Das ist die Spiegelung eines
+ UNBESCHICHTETEN Glases -- also ausgerechnet das Merkmal des
+ billigeren Materials.
+
+ Jetzt drei Dinge, jedes davon aus der Sache begruendet:
+ 1. ein SCHMALER, harter Reflexbogen oben links -- die Kante der
+ Woelbung, das Einzige, was auch entspiegelt stehen bleibt
+ 2. der topasblaue Schimmer, diagonal, sehr leise
+ 3. die haarfeine helle Linie an der Oberkante -- die Schnittkante
+ des Glases selbst
+
+ Quellen zur Beschichtung: reservoir-watch.com und botta-design.de
+ (siehe Antwort im Verlauf). */
.uhr__glas {
position: absolute; inset: 10px; border-radius: 50%;
background:
- linear-gradient(146deg,
- rgba(255, 255, 255, .15) 0%,
- rgba(255, 255, 255, .035) 19%,
- transparent 42%);
- box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
+ linear-gradient(142deg,
+ rgba(255, 255, 255, .16) 0%,
+ rgba(255, 255, 255, .05) 7%,
+ transparent 15%),
+ linear-gradient(128deg,
+ transparent 30%,
+ rgba(120, 190, 255, .10) 44%,
+ rgba(150, 130, 255, .07) 52%,
+ transparent 64%);
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
pointer-events: none; z-index: 3;
}
+
.uhr__ring {
position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px);
/* Bei Null soll der Ring OBEN beginnen, nicht rechts. */
@@ -754,10 +821,24 @@
font-size: .74rem; font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: .18em; text-indent: .18em;
- padding: 1px 6px 1px 7px;
- border-radius: 999px;
- color: #cfe9fb;
- background: rgba(143, 216, 255, .10);
+ /* EIN EINGELASSENES FENSTER, kein Etikett.
+
+ Auf einer Uhr sitzt eine Zusatzanzeige in einer AUSSPARUNG des
+ Zifferblatts -- man sieht durch das Blatt hindurch auf die Scheibe
+ darunter. Das erkennt man an zwei Dingen: der Schatten faellt oben
+ hinein, und unten steht eine helle Kante, wo das Licht die
+ gegenueberliegende Wand trifft. Genau diese beiden Schatten stehen
+ hier. Die abgeschnittene Ecke nimmt die Sprache der Kacheln auf. */
+ padding: 1px 7px 1px 8px;
+ border-radius: 0;
+ clip-path: polygon(4px 0, 100% 0, 100% 100%, 0 100%, 0 4px);
+ color: #d8ecfb;
+ background:
+ linear-gradient(180deg, #05080e 0%, #0a1018 100%);
+ box-shadow:
+ inset 0 2px 3px -1px rgba(0, 0, 0, .95),
+ inset 0 -1px 0 rgba(190, 215, 240, .28),
+ 0 1px 0 rgba(255, 255, 255, .05);
box-shadow: inset 0 0 0 1px rgba(143, 216, 255, .16);
}
diff --git a/workspace/aufgaben.html b/workspace/aufgaben.html
index c86b393d..177d1e4d 100644
--- a/workspace/aufgaben.html
+++ b/workspace/aufgaben.html
@@ -9,10 +9,10 @@
-
-
-
-
+
+
+
+
@@ -212,10 +212,10 @@
-
-
-
-
-
+
+
+
+
+