diff --git a/workspace/assets/css/module.css b/workspace/assets/css/module.css
index 9f556115..7d89ffb2 100644
--- a/workspace/assets/css/module.css
+++ b/workspace/assets/css/module.css
@@ -94,7 +94,20 @@
clip-path: polygon(var(--fase) 0, 100% 0, 100% 100%, 0 100%, 0 var(--fase));
border-radius: 0;
border: 0;
- box-shadow: none;
+ /* STUFE 1: DIE SCHRAEGE WIRD EINE ECHTE FASE.
+
+ Bisher war die abgeschnittene Ecke ein Loch -- Material, das fehlt.
+ Eine gefraeste Fase ist etwas anderes: Sie hat eine FLAECHE, und
+ auf der liegt Schatten, weil sie schraeg zum Licht steht. Genau
+ das macht dieser Innenschatten aus der Richtung der Schraege. Der
+ Unterschied ist klein zu beschreiben und gross zu sehen: Aus einer
+ weggeschnittenen Ecke wird ein bearbeitetes Werkstueck.
+
+ `inset` und nicht aussen: Ein aeusserer Schatten liegt hier im
+ `filter` (siehe unten), weil `clip-path` einen `box-shadow` nach
+ der Form abschneiden wuerde. Ein INNERER Schatten wird von
+ derselben Form sauber begrenzt -- er soll ja hineinreichen. */
+ box-shadow: inset 7px 7px 14px -10px rgba(0, 0, 0, .95);
filter:
drop-shadow(0 2px 3px rgba(0, 0, 0, .55))
drop-shadow(0 12px 22px rgba(0, 0, 0, .55));
@@ -132,12 +145,37 @@
position: absolute; inset: 0;
pointer-events: none;
z-index: 0;
+ /* STUFE 2: ECKWINKEL AN DREI ECKEN STATT AN EINER.
+
+ Eine einzelne Ecke unten rechts liest sich als Verzierung. Drei
+ Ecken lesen sich als RAHMUNG -- das Auge schliesst sie zu einem
+ Ausschnitt, und genau diese Sprache benutzen Peilung, Zielmarke
+ und Messgeraet.
+
+ Die vierte Ecke bleibt frei, und das ist Absicht: Dort sitzt die
+ Fase. Ein Winkel auf einer abgeschnittenen Ecke waere ein Winkel,
+ der ins Leere zeigt.
+
+ Sechs Verlaufsebenen fuer sechs Striche. Jede Ebene ist eine
+ einfarbige Flaeche, die durch `background-size` auf einen Strich
+ zusammenschrumpft -- billiger als sechs Elemente im Baum, und sie
+ wandern beim Groessenwechsel automatisch mit. */
+ --winkel: linear-gradient(var(--ton, var(--akzent)), var(--ton, var(--akzent))) no-repeat;
background:
- linear-gradient(var(--ton, var(--akzent)), var(--ton, var(--akzent))) no-repeat,
- linear-gradient(var(--ton, var(--akzent)), var(--ton, var(--akzent))) no-repeat,
+ var(--winkel), var(--winkel), /* unten rechts */
+ var(--winkel), var(--winkel), /* oben rechts */
+ var(--winkel), var(--winkel), /* unten links */
var(--raster);
- background-size: 18px 1.5px, 1.5px 18px, 26px 26px, 26px 26px;
- background-position: right 10px bottom 10px, right 10px bottom 10px, 0 0, 0 0;
+ background-size:
+ 18px 1.5px, 1.5px 18px,
+ 18px 1.5px, 1.5px 18px,
+ 18px 1.5px, 1.5px 18px,
+ 26px 26px, 26px 26px;
+ background-position:
+ right 10px bottom 10px, right 10px bottom 10px,
+ right 10px top 10px, right 10px top 10px,
+ left 10px bottom 10px, left 10px bottom 10px,
+ 0 0, 0 0;
/* .3 war zu laut: Das Raster soll man nicht LESEN, sondern spueren.
Bei 26 px Abstand und einem Viertel Deckkraft bleibt der Eindruck
"Messgeraet", ohne dass die Linien mit dem Text konkurrieren. */
@@ -212,3 +250,107 @@
display: none;
}
}
+
+
+/* =====================================================================
+ STUFE 3: DAS ZEICHEN BEKOMMT EINE METALLFASSUNG (07.09.2026)
+
+ Filipe: "perfektionier alle kacheln die du vorhin gewechselt hast auf
+ der ganzen website, mach sie alle noch geiler und geiler und noch
+ spezieller. sie gehen aber in eine gute richtung schon."
+
+ Die Plakette war ein abgerundetes Quadrat mit einem Farbschleier --
+ also dieselbe Form wie ueberall sonst im Netz. Sie wird jetzt zu
+ einem GEFASSTEN Schild:
+
+ * dieselbe abgeschnittene Ecke wie die Karte, nur kleiner. Ein
+ Bauteil, das zu seinem Gehaeuse passt.
+ * ein 2 px breiter Ring aus gebuerstetem Metall -- dieselbe
+ Handschrift wie die Luenette der Uhr und die Fassung der
+ Konsole. Damit spricht die ganze Anwendung EINE Materialsprache
+ statt drei.
+ * die Farbe der Kategorie liegt INNEN, im Schild, nicht im Ring.
+ So bleibt der Ring ueberall gleich und das Schild verschieden --
+ genau die Aufteilung, die ein Typenschild auf einem Geraet hat.
+
+ Diese Regeln stehen HIER und nicht in start.css: module.css wird
+ zuletzt geladen und ist der Ort fuer die FORM. In start.css
+ beschriebe man dieselbe Sache noch einmal an zweiter Stelle, und die
+ beiden liefen beim naechsten Mal auseinander.
+ ===================================================================== */
+.kachel__zeichen {
+ --z-fase: 9px;
+ position: relative;
+ border: 0;
+ border-radius: 0;
+ padding: 2px;
+ overflow: visible;
+ clip-path: polygon(
+ var(--z-fase) 0, 100% 0, 100% 100%, 0 100%, 0 var(--z-fase));
+ /* Gebuerstetes Metall, rund gedreht -- rund heisst conic. Die Lehre
+ von heute Nachmittag: Die Verlaufsart muss zur FORM passen. */
+ /* GEDAEMPFT, aber mit demselben Wechsel. Der erste Anlauf war fast
+ weiss -- auf 2 px Breite las sich das als greller Rahmen, und die
+ Fassung zog mehr Aufmerksamkeit als das Zeichen darin. Eine
+ Fassung ist Beiwerk; sie soll das Schild halten, nicht mit ihm
+ konkurrieren. Also dieselben Stopps, nur eine Blende dunkler --
+ der Wechsel hell/dunkel bleibt, und mit ihm das Metall. */
+ background:
+ conic-gradient(from 210deg,
+ #b9c8da 0deg, #5a6b80 44deg, #d6e2ef 88deg, #44536a 140deg,
+ #aebdd0 196deg, #64758c 244deg, #cddaea 296deg, #4e5d73 340deg,
+ #b9c8da 360deg);
+ box-shadow:
+ 0 6px 16px -8px rgba(0, 0, 0, .9),
+ 0 0 0 1px rgba(6, 10, 18, .55);
+}
+/* Das Schild IM Ring -- hier liegt die Farbe der Kategorie. */
+.kachel__zeichen::before {
+ content: "";
+ position: absolute; inset: 2px;
+ z-index: 0;
+ pointer-events: none;
+ clip-path: polygon(
+ calc(var(--z-fase) - 2px) 0, 100% 0, 100% 100%, 0 100%,
+ 0 calc(var(--z-fase) - 2px));
+ background:
+ linear-gradient(150deg, rgba(255, 255, 255, .20) 0%, rgba(255, 255, 255, .04) 26%, transparent 52%),
+ radial-gradient(120% 100% at 22% 8%,
+ color-mix(in srgb, var(--ton, var(--akzent)) 58%, transparent) 0%,
+ color-mix(in srgb, var(--ton, var(--akzent)) 26%, transparent) 48%,
+ color-mix(in srgb, var(--ton, var(--akzent)) 10%, transparent) 100%),
+ linear-gradient(#0a0f18, #0a0f18);
+}
+/* Beim Anfassen hebt sich das Schild leicht -- kein Leuchten, nur
+ Naehe. Dieselbe Sprache wie bei der Karte selbst. */
+.kachel:hover .kachel__zeichen {
+ transform: translateY(-1px);
+ border-color: transparent;
+ box-shadow:
+ 0 10px 22px -9px rgba(0, 0, 0, .95),
+ 0 0 0 1px rgba(6, 10, 18, .55),
+ 0 0 14px -4px color-mix(in srgb, var(--ton, var(--akzent)) 55%, transparent);
+}
+/* DIE GROSSE KACHEL FUEHRT IHRE EIGENE RUNDUNG -- zweimal sogar
+ (start.css, 21 px und 18 px), und beide sind mit `.kachel[…] .x`
+ staerker als eine einzelne Klasse. Gemessen: `border-radius: 18px`,
+ obwohl module.css `0` setzt und zuletzt geladen wird. Die Fase kam
+ durch (die setzt sonst niemand), die Rundung blieb -- heraus kam ein
+ Schild mit abgeschnittener Ecke UND runden Ecken.
+
+ Dieselbe Falle wie heute schon zweimal: `:where()` war zu schwach,
+ `body.start .willkommen` zu stark, und hier ist es die Verschachtelung.
+ Deshalb steht die Antwort hier mit derselben Gewichtung wie die
+ Rundung, die sie ersetzt. */
+.kachel[data-gross="ja"] .kachel__zeichen,
+.kachel .kachel__zeichen {
+ --z-fase: 11px;
+ border-radius: 0;
+}
+
+@media (forced-colors: active) {
+ /* Im Kontrastmodus zaehlt die Kante. Die Fase bleibt -- sie ist
+ Geometrie, keine Farbe. */
+ .kachel__zeichen { background: Canvas; border: 1px solid CanvasText; box-shadow: none; }
+ .kachel__zeichen::before { display: none; }
+}
diff --git a/workspace/aufgaben.html b/workspace/aufgaben.html
index 78ad5931..4075a7a7 100644
--- a/workspace/aufgaben.html
+++ b/workspace/aufgaben.html
@@ -9,10 +9,10 @@
-
-
-
-
+
+
+
+
@@ -212,10 +212,10 @@
-
-
-
-
-
+
+
+
+
+