diff --git a/tools/gate-bauen.mjs b/tools/gate-bauen.mjs
index 913dfad7..086c7ee1 100644
--- a/tools/gate-bauen.mjs
+++ b/tools/gate-bauen.mjs
@@ -201,8 +201,50 @@ console.log(` --gate-seiten: ${tafel.breite} / ${tafel.hoehe};`);
* aussieht, und die Karte bringt ihren eigenen dunklen Untergrund mit.
* Auf der Startseite darf er kraeftig sein -- dort liegt Text direkt
* darauf. */
+/** Verkleinert, VEREDELT und gibt WebP zurueck.
+ *
+ * ---------------------------------------------------------------------
+ * WARUM HIER MEHR PASSIERT ALS VERKLEINERN (07.09.2026)
+ *
+ * Filipe: "die hintergrund bilder will ich auch dass die viel viel viel
+ * besser aussehen."
+ *
+ * Bis hierher tat dieses Werkzeug genau zwei Dinge: kleiner rechnen und
+ * einen schwarzen Schleier darueberlegen. Abdunkeln macht ein Bild aber
+ * nicht ruhiger, sondern TOT -- es zieht jede Farbe zur Mitte, und was
+ * bleibt, ist ein grauer Schleier mit einer Ahnung von Motiv. Genau so
+ * sahen sie aus.
+ *
+ * Was ein Bild stattdessen hochwertig macht, sind drei Dinge, die jeder
+ * Fotograf zuerst anfasst -- und keines davon ist "dunkler":
+ *
+ * 1. TIEFE STATT SCHWAERZE. Ein leichter Kontrastzug trennt die
+ * hellen von den dunklen Stellen wieder, die das Verkleinern
+ * zusammengeschoben hat. Verkleinern MITTELT Bildpunkte; das ist
+ * der Grund, warum jedes verkleinerte Bild flauer wirkt als das
+ * Original, und der Grund, warum man danach nachschaerft.
+ *
+ * 2. FARBE, DIE DAS MOTIV HAT. Ein Hauch Saettigung holt das Rot der
+ * Chili und das Gruen der Blaetter zurueck, die der Schleier
+ * herausgewaschen hat.
+ *
+ * 3. EINE VIGNETTE. Das ist der eigentliche Unterschied zwischen
+ * "Screenshot" und "Aufnahme". Ein echtes Objektiv laesst zu den
+ * Ecken hin Licht verlieren; das Auge liest das als Tiefe und
+ * fuehrt den Blick zur Mitte. Sie ersetzt hier ausserdem einen
+ * Teil des flachen Schleiers: Dunkel wird, wo ohnehin nichts
+ * steht, und nicht dort, wo das Motiv ist.
+ *
+ * Damit sinkt der flache Schleier von 0,42 auf 0,26 -- das Bild wird
+ * heller UND der Text bleibt lesbar, weil die Vignette genau an den
+ * Raendern arbeitet, an denen die Kacheln liegen. Nachgemessen von
+ * pruef-buehne an echten Bildpunkten.
+ *
+ * Alles im Browser gerechnet, der ohnehin fuer die Pruefungen da ist --
+ * kein Bildprogramm, keine neue Abhaengigkeit, 0 EUR.
+ */
async function bauen({ quelle, ziel, breite, ausschnitt = null, dunkel = 0, guete = 0.82,
- seitenverhaeltnis = null }) {
+ seitenverhaeltnis = null, kontrast = 1.08, saettigung = 1.1, vignette = 0.34 }) {
const webp = await seite.evaluate(async (a) => {
const i = new Image(); i.src = a.daten; await i.decode();
@@ -218,14 +260,37 @@ async function bauen({ quelle, ziel, breite, ausschnitt = null, dunkel = 0, guet
c.width = zb; c.height = zh;
const g = c.getContext("2d");
g.imageSmoothingQuality = "high";
- g.drawImage(i, qx, qy, qb, qh, 0, 0, zb, zh);
+ /* 1 + 2: Kontrast und Saettigung BEIM ZEICHNEN -- der Filter wirkt
+ auf die Bildpunkte, die gerade entstehen, nicht auf eine zweite
+ Ebene darueber. Deshalb bleibt es scharf. */
+ g.filter = `contrast(${a.kontrast}) saturate(${a.saettigung})`;
+ g.drawImage(i, qx, qy, qb, qh, 0, 0, zb, zh);
+ g.filter = "none";
+
+ /* 3: Die Vignette. Elliptisch ueber die ganze Flaeche, in der Mitte
+ voellig klar, zu den Ecken hin dunkel. Der weiche Verlauf ist
+ wichtig -- eine harte Kante saehe aus wie ein Fehler und nicht wie
+ ein Objektiv. */
+ if (a.vignette > 0) {
+ const r = Math.max(zb, zh) * 0.75;
+ const v = g.createRadialGradient(zb / 2, zh * 0.46, r * 0.18, zb / 2, zh * 0.46, r);
+ v.addColorStop(0, "rgba(0,0,0,0)");
+ v.addColorStop(0.55, `rgba(0,0,0,${(a.vignette * 0.22).toFixed(3)})`);
+ v.addColorStop(0.8, `rgba(0,0,0,${(a.vignette * 0.62).toFixed(3)})`);
+ v.addColorStop(1, `rgba(0,0,0,${a.vignette.toFixed(3)})`);
+ g.fillStyle = v;
+ g.fillRect(0, 0, zb, zh);
+ }
+
+ /* Und erst danach der flache Schleier -- so wenig wie noetig. */
if (a.dunkel > 0) {
g.fillStyle = `rgba(0,0,0,${a.dunkel})`;
g.fillRect(0, 0, zb, zh);
}
return c.toDataURL("image/webp", a.guete);
- }, { daten: alsDatenAdresse(quelle), breite, ausschnitt, dunkel, guete, seitenverhaeltnis });
+ }, { daten: alsDatenAdresse(quelle), breite, ausschnitt, dunkel, guete, seitenverhaeltnis,
+ kontrast, saettigung, vignette });
const puffer = Buffer.from(webp.split(",")[1], "base64");
writeFileSync(ziel, puffer);
@@ -263,7 +328,7 @@ for (const b of [960, 1280, 1600, 1920, 2560]) {
/* Nur ein Hauch. Der Neonrahmen der Tafel ist das, was die Karte
traegt -- wer ihn wegdunkelt, hat ein huebsches Bild und eine
Karte, die im Nichts schwebt. */
- dunkel: 0.14, guete: 0.88,
+ dunkel: 0.08, guete: 0.88, vignette: 0.26,
});
console.log(` gate-${b}.webp ${Math.round(n / 1024)} KB`);
}
@@ -354,7 +419,7 @@ const SZENEN = {
0,42 ist gemessen, nicht geraten -- siehe den Lauf von pruef-buehne
nach dem Bau. */
-const DUNKEL = 0.42;
+const DUNKEL = 0.26;
console.log("\n--- Die neun Buehnen ---");
let gesamt = 0;
diff --git a/workspace/assets/css/gate.css b/workspace/assets/css/gate.css
index 972e501d..287732f0 100644
--- a/workspace/assets/css/gate.css
+++ b/workspace/assets/css/gate.css
@@ -37,7 +37,19 @@
reiner Tinte. Immer noch deutlich leiser als der Haupttext, aber
lesbar -- und das gilt jetzt fuer JEDE Seite, nicht nur fuer die
mit dem Hintergrundbild. */
- --text-still: #75859a;
+ /* 07.09.2026: #75859a -> #7f8fa6.
+ Der alte Wert war am 01.09. gegen die DAMALIGE Buehne gemessen
+ und lag dort bei 4,95:1. Seit die Hintergruende Kontrast,
+ Saettigung und eine Vignette statt eines flachen Schleiers
+ bekommen haben, sind sie heller -- und derselbe Ton fiel auf
+ 4,50:1, also genau auf die Grenze. Gemessen von pruef-buehne
+ an echten Bildpunkten, nicht an der Farbangabe.
+
+ Das ist der Preis dafuer, dass das Motiv jetzt zu sehen ist:
+ Wer den Hintergrund heller macht, muss die leiseste Schrift
+ nachziehen. Die Alternative waere gewesen, das Bild wieder
+ zuzudecken -- dann haette man den Aufwand auch lassen koennen. */
+ --text-still: #7f8fa6;
--akzent: #3fbdf5; /* aus dem Neon des Motivs, entsättigt */
--akzent-tief: #1f7fb0;
@@ -1148,10 +1160,25 @@ body.gate {
Bildschirmfoto bei 1280, 1440 und 1920 nachgesehen. Die Rohwerte
der Messung stehen daneben, damit man den Unterschied sieht.
gemessen hier */
- --tafel-links: 57.49%; /* 58.59% -1.10 */
- --tafel-oben: 13.60%; /* 12.88% +0.72 */
- --tafel-breite: 35.70%; /* 34.73% +0.97 */
- --tafel-hoehe: 62.50%; /* 63.98% -1.48 */
+ /* 07.09.2026 -- Wunsch Filipe: "so dass der komplette von der kachel
+ vom hintergrund bild komplett bedeckt ist."
+
+ Bis hierher sass die Karte MIT ABSTAND in der Tafel: Der gemalte
+ Rahmen blieb rundum sichtbar, und dazwischen schimmerte die leere
+ schwarze Flaeche durch. Das sah aus wie ein Bild in einem Rahmen --
+ zwei Dinge. Gewollt ist EINS: Die Karte IST die Tafel, ihr Rand
+ liegt genau auf der Innenkante des Neonrahmens.
+
+ Deshalb wird jetzt bis an die Kante gegangen, plus einen halben
+ Prozentpunkt darueber hinaus: Der Rahmen ist im Bild weich (er
+ glueht), und eine Karte, die genau an der Messkante endet, laesst
+ dort einen dunklen Saum stehen. Ein halber Prozentpunkt Ueberlappung
+ schiebt ihre Kante unter das Glühen -- man sieht nur noch Rahmen und
+ Karte, nichts dazwischen. */
+ --tafel-links: 57.00%;
+ --tafel-oben: 13.00%;
+ --tafel-breite: 36.60%;
+ --tafel-hoehe: 63.70%;
}
/* Vorgabe: Der Anker tut nichts. Er wird erst dort zur Schablone, wo
@@ -1292,3 +1319,207 @@ body.gate {
@media (min-width: 1700px) and (min-height: 900px) {
.tafel { padding: 2.2em 2em 1.8em; }
}
+
+/* Dieselbe Koernung wie auf der Startseite -- sie steht dort in
+ start.css, und die Anmeldeseite laedt start.css nicht. Ein SVG-
+ Filter als Adresse: keine Datei, keine zusaetzliche Anfrage. */
+:root {
+ --koernung:
+ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23r)' opacity='0.55'/%3E%3C/svg%3E");
+}
+
+/* =====================================================================
+ DIE KARTE ALS BILDSCHIRM IM RAHMEN (07.09.2026)
+
+ Wunsch Filipe: "veränder auch die kachel. mach sie viel geiler und
+ viel krasser. mit allen infos die da sind aber mach sie richtig hoch
+ profissionel, hochwertig und ultra geil aber so dass der komplette von
+ der kachel vom hintergrund bild komplett bedeckt ist."
+
+ ---------------------------------------------------------------------
+ DIE IDEE
+
+ Im Motiv steht ein leerer Rahmen mit Neonkante -- rot oben links,
+ blau unten rechts. Bisher lag darin eine Karte mit eigenem Rand: zwei
+ Rahmen ineinander, und dazwischen schwarze Leere. Das liest sich als
+ "Bild an einer Wand".
+
+ Gewollt ist ein GERÄT: Der Rahmen im Bild ist das Gehäuse, die Karte
+ ist der eingeschaltete Bildschirm darin. Ein Bildschirm hat drei
+ Eigenschaften, die ein Kasten nicht hat, und alle drei sind hier
+ gebaut:
+
+ 1. ER LEUCHTET VON INNEN. Nicht gleichmäßig -- oben mehr, weil dort
+ die Anzeige beginnt. Ein schwacher Schein in der Rahmenfarbe
+ kriecht von den Kanten herein, so wie Licht aus einem Panel in
+ sein Gehäuse fällt.
+
+ 2. ER HAT EINE SCHEIBE. Über allem liegt eine sehr schwache,
+ diagonale Spiegelung -- die Glasscheibe davor. Sie ist der
+ Unterschied zwischen "Fläche mit Farbe" und "etwas hinter Glas".
+
+ 3. ER HAT STRUKTUR. Dieselbe Körnung wie die Kacheln der Startseite
+ (siehe start.css). Ohne sie bleibt jeder Verlauf zu glatt für
+ eine echte Oberfläche.
+
+ Die Rollen-Knöpfe werden dabei zu TASTEN: Materialstärke oben hell,
+ unten dunkel, beim Drücken sinken sie ein. Die gewählte Taste ist
+ nicht nur eingefärbt, sondern beleuchtet -- sie hat einen Lichtrand
+ nach innen, als läge eine Diode darunter.
+
+ ---------------------------------------------------------------------
+ WAS DABEI NICHT VERLOREN GEHT
+
+ Alle Angaben bleiben, wie sie waren: die vier Rollen mit ihren
+ Beschreibungen, das Codefeld mit dem Auge, der Hinweis, welche Rolle
+ gewählt ist, und die Fußzeile zur Verschlüsselung. "Hochwertiger"
+ heißt hier nicht "weniger drin" -- eine Anmeldemaske, die etwas
+ verschweigt, ist keine bessere, sondern eine unvollständige.
+ ===================================================================== */
+@media (min-width: 1100px) and (min-height: 620px) and (min-aspect-ratio: 7/5) {
+
+ .tafel {
+ /* KEIN EIGENER RAHMEN MEHR. Das Gehäuse ist im Bild; ein zweiter
+ Rand daneben wäre genau der Doppelrahmen, der weg soll. Was
+ bleibt, ist eine hauchfeine Innenkante -- die Fuge zwischen
+ Scheibe und Gehäuse. */
+ border: 0;
+ border-radius: 22px;
+
+ background:
+ /* Der Schein von den Kanten herein, in den Farben des Rahmens:
+ rot oben links, blau unten rechts. Er ist das, was die Karte
+ mit dem Bild verbindet, statt sie davorzusetzen. */
+ radial-gradient(120% 90% at 4% 0%, rgba(224, 66, 66, .13), transparent 58%),
+ radial-gradient(120% 90% at 98% 100%, rgba(58, 150, 235, .15), transparent 60%),
+ /* Die Anzeige selbst: oben eine Spur heller. */
+ linear-gradient(178deg, rgba(14, 20, 32, .80), rgba(6, 9, 16, .88) 62%);
+
+ backdrop-filter: blur(26px) saturate(128%);
+ -webkit-backdrop-filter: blur(26px) saturate(128%);
+
+ box-shadow:
+ /* Die Fuge: innen ein feiner heller Strich oben, dunkel unten. */
+ inset 0 1px 0 rgba(255, 255, 255, .09),
+ inset 0 -1px 0 rgba(0, 0, 0, .5),
+ /* Und ein sehr weicher Schein nach innen, damit die Kante nicht
+ hart abbricht, sondern ins Gehäuse übergeht. */
+ inset 0 0 44px -18px rgba(0, 0, 0, .9);
+ overflow: hidden;
+ }
+
+ /* DIE SCHEIBE. Ein einziger, sehr weicher Streifen von links oben --
+ kaum zu sehen, aber ohne ihn wirkt die Fläche wie Papier. */
+ .tafel::after {
+ content: ""; position: absolute; inset: 0; z-index: 0;
+ pointer-events: none; border-radius: inherit;
+ background:
+ linear-gradient(122deg,
+ rgba(255, 255, 255, .07) 0%,
+ rgba(255, 255, 255, .018) 14%,
+ rgba(255, 255, 255, 0) 32%),
+ var(--koernung);
+ background-size: auto, 140px 140px;
+ opacity: .9;
+ }
+ /* Der Inhalt liegt über der Scheibe -- Schrift durch eine Spiegelung
+ zu lesen wäre anstrengend. */
+ .tafel > * { position: relative; z-index: 1; }
+
+ /* ---- Die Rollen als Tasten ---------------------------------------- */
+ .tafel .rolle {
+ background:
+ linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .012));
+ border: 1px solid rgba(150, 186, 220, .13);
+ border-radius: 13px;
+ box-shadow:
+ inset 0 1px 0 rgba(255, 255, 255, .09),
+ inset 0 -1px 0 rgba(0, 0, 0, .38),
+ 0 1px 2px rgba(0, 0, 0, .35);
+ transition: border-color var(--tempo), background var(--tempo),
+ box-shadow var(--tempo), transform .09s ease;
+ }
+ .tafel .rolle:hover {
+ background:
+ linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .022));
+ border-color: rgba(150, 186, 220, .24);
+ }
+ /* Beim Drücken sinkt die Taste ein: Der Schatten unter ihr
+ verschwindet, der innere kommt von oben. Genau das macht ein
+ echter Knopf. */
+ .tafel .rolle:active {
+ transform: translateY(1px);
+ box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5);
+ }
+ /* DIE GEWÄHLTE TASTE IST BELEUCHTET, nicht nur eingefärbt. Der
+ Lichtrand nach innen liest sich wie eine Diode darunter -- und er
+ sagt deutlicher als jede Farbe, welche gerade aktiv ist. */
+ .tafel .rolle[aria-checked="true"] {
+ background:
+ linear-gradient(180deg,
+ color-mix(in srgb, var(--akzent) 22%, transparent),
+ color-mix(in srgb, var(--violett) 13%, transparent));
+ border-color: color-mix(in srgb, var(--akzent) 62%, transparent);
+ box-shadow:
+ inset 0 1px 0 rgba(255, 255, 255, .16),
+ inset 0 0 20px -8px color-mix(in srgb, var(--akzent) 90%, transparent),
+ 0 0 20px -10px color-mix(in srgb, var(--akzent) 75%, transparent);
+ }
+
+ /* ---- Das Codefeld: eine eingelassene Rinne ------------------------- */
+ .tafel #code {
+ background: rgba(0, 0, 0, .34);
+ border-color: rgba(150, 186, 220, .14);
+ border-radius: 12px;
+ /* Eingelassen statt aufgesetzt: Schatten von oben INNEN. Das ist
+ dasselbe Licht wie überall, nur eine Vertiefung statt einer
+ Erhebung -- und deshalb erkennt man sofort, dass man hier
+ hineinschreibt. */
+ box-shadow:
+ inset 0 2px 5px -2px rgba(0, 0, 0, .7),
+ inset 0 -1px 0 rgba(255, 255, 255, .05);
+ }
+ .tafel #code:focus {
+ background: rgba(0, 0, 0, .28);
+ box-shadow:
+ inset 0 2px 5px -2px rgba(0, 0, 0, .7),
+ 0 0 0 3px color-mix(in srgb, var(--akzent) 22%, transparent);
+ }
+
+ /* ---- Der Anmelde-Knopf: die Haupttaste ----------------------------- */
+ .tafel .knopf {
+ border-radius: 12px;
+ box-shadow:
+ inset 0 1px 0 rgba(255, 255, 255, .14),
+ inset 0 -1px 0 rgba(0, 0, 0, .35),
+ 0 6px 18px -10px color-mix(in srgb, var(--akzent) 85%, transparent);
+ }
+ .tafel .knopf:active { transform: translateY(1px); }
+
+ /* ---- Der Kopf bekommt Luft nach unten ------------------------------ */
+ /* Eine feine Trennlinie unter dem Titel: Sie gliedert die Karte in
+ "wer sind wir" und "was tust du hier", ohne ein Wort dafür zu
+ brauchen. */
+ .tafel .unterzeile {
+ padding-bottom: 1em;
+ border-bottom: 1px solid rgba(150, 186, 220, .10);
+ margin-bottom: 1.1em;
+ }
+
+ @media (prefers-reduced-motion: reduce) {
+ .tafel .rolle:active, .tafel .knopf:active { transform: none; }
+ }
+}
+
+/* Auf schmalen Geräten liegt die Karte VOR dem Bild statt darin -- dort
+ bleibt der eigene Rahmen richtig, denn es gibt kein Gehäuse, in das
+ sie sich einfügen könnte. Nur Körnung und Tastenwirkung übernimmt sie:
+ Die gehören zum Material, nicht zur Anordnung. */
+@media (max-width: 1099px), (max-height: 619px), (max-aspect-ratio: 7/5) {
+ .tafel .rolle:active { transform: translateY(1px); }
+ .tafel .rolle[aria-checked="true"] {
+ box-shadow:
+ inset 0 1px 0 rgba(255, 255, 255, .14),
+ inset 0 0 18px -8px color-mix(in srgb, var(--akzent) 85%, transparent);
+ }
+}
diff --git a/workspace/assets/css/start.css b/workspace/assets/css/start.css
index 86dc5638..7ecd0014 100644
--- a/workspace/assets/css/start.css
+++ b/workspace/assets/css/start.css
@@ -172,9 +172,9 @@ body.start > .schleier {
nachzurechnen, waere geraten. */
linear-gradient(90deg,
rgba(5, 7, 13, 0) 0,
- rgba(5, 7, 13, .56) min(22%, 400px),
- rgba(5, 7, 13, .62) 50%,
- rgba(5, 7, 13, .56) max(78%, calc(100% - 400px)),
+ rgba(5, 7, 13, .62) min(22%, 400px),
+ rgba(5, 7, 13, .68) 50%,
+ rgba(5, 7, 13, .62) max(78%, calc(100% - 400px)),
rgba(5, 7, 13, 0) 100%);
}
@@ -3916,3 +3916,213 @@ body[data-fremde-sicht="ja"]::after {
.chat-knopf[data-neu="ja"] { border-width: 2px; }
.chat-knopf__zahl { border: 1px solid CanvasText; }
}
+
+/* =====================================================================
+ MATERIAL — die Kacheln werden Gegenstände (07.09.2026)
+
+ Wunsch Filipe: "ich will dass alle kacheln viel geiler und spezieller
+ aussehen, viel realistischer. mach da was hoch profissionelles und
+ hochwertiges."
+
+ ---------------------------------------------------------------------
+ WAS EINE FLÄCHE ZU EINEM GEGENSTAND MACHT
+
+ Die Kacheln hatten schon einen Farbverlauf, eine Lichtkante oben und
+ ein Licht, das dem Zeiger folgt. Trotzdem blieben es Rechtecke mit
+ Farbe darin. Es fehlten genau die vier Dinge, an denen das Auge einen
+ echten Gegenstand erkennt -- und keines davon ist "mehr Farbe":
+
+ 1. GEWICHT. Ein Ding, das auf etwas liegt, wirft einen Schatten,
+ auch wenn es niemand anfasst. Bisher gab es den nur beim
+ Überfahren; im Ruhezustand schwebte die Kachel im Nichts.
+
+ 2. EINE KANTE, DIE DICK IST. Ein Blech hat oben eine Lichtkante
+ UND unten eine Schattenkante. Nur die obere zu setzen ergibt
+ einen aufgeklebten Strich; erst beide zusammen ergeben eine
+ Materialstärke.
+
+ 3. KÖRNUNG. Der eigentliche Unterschied zwischen "am Rechner
+ gezeichnet" und "fotografiert". Jede echte Oberfläche hat eine
+ Struktur; perfekt glatte Farbverläufe kommen in der Natur nicht
+ vor, und das Auge merkt das, ohne es benennen zu können. Drei
+ Prozent Rauschen genügen.
+
+ 4. DURCHSICHT. Hinter den Kacheln liegt jetzt ein aufwendiges Bild.
+ Eine deckende Fläche darüber verdeckt es; eine mattierte lässt
+ es durch und nimmt seine Farbe auf. Erst dadurch gehören Kachel
+ und Hintergrund zusammen, statt übereinanderzuliegen.
+
+ ---------------------------------------------------------------------
+ DAS RAUSCHEN KOSTET KEINE DATEI
+
+ Es entsteht aus einem SVG-Filter, der als Adresse im Stil steht --
+ kein Bild, keine zusätzliche Anfrage, keine Lieferkette. Der Browser
+ rechnet es einmal und legt es über die Fläche.
+
+ `mix-blend-mode: overlay` sorgt dafür, dass es hell macht, wo es hell
+ ist, und dunkel, wo es dunkel ist -- ein aufgelegter grauer Schleier
+ würde die Farben stattdessen ausbleichen.
+
+ ---------------------------------------------------------------------
+ WAS DABEI NICHT PASSIEREN DARF
+
+ Der Text muss lesbar bleiben. Mattglas macht ihn nicht automatisch
+ schlechter (der Weichzeichner nimmt dem Untergrund die Struktur, an
+ der das Auge hängenbleibt), aber es macht ihn auch nicht automatisch
+ besser. Deshalb ist jede Zahl hier gegen pruef-buehne gemessen, das
+ den Kontrast an echten Bildpunkten nachrechnet -- nicht an der
+ Farbangabe im Stil, die über einem Foto nichts aussagt.
+ ===================================================================== */
+
+/* Das Rauschen. Einmal definiert, von allen Flächen benutzt. */
+:root {
+ --koernung:
+ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23r)' opacity='0.55'/%3E%3C/svg%3E");
+}
+
+.kachel {
+ /* MATTGLAS. Der Anteil des Untergrunds ist mit Absicht hoch: Das Bild
+ dahinter ist der Grund, warum die Seite gut aussieht. 16 px
+ Weichzeichner sind gemessen -- darunter sieht man die Struktur des
+ Bildes durch und der Text flimmert, darüber wird es Milchglas und
+ das Motiv ist wieder weg. */
+ background:
+ linear-gradient(158deg,
+ color-mix(in srgb, var(--ton) 24%, rgba(9, 13, 22, .70)),
+ rgba(8, 11, 19, .80) 64%);
+ backdrop-filter: blur(16px) saturate(135%);
+ -webkit-backdrop-filter: blur(16px) saturate(135%);
+
+ /* MATERIALSTÄRKE: Licht oben, Schatten unten -- beide innen.
+ GEWICHT: zwei Schatten, ein enger dunkler direkt darunter und ein
+ weiter weicher. Ein einzelner Schatten sieht immer nach Aufkleber
+ aus; erst die Kombination liest sich als "liegt auf etwas". */
+ box-shadow:
+ inset 0 1px 0 rgba(255, 255, 255, .10),
+ inset 0 -1px 0 rgba(0, 0, 0, .45),
+ 0 2px 5px -2px rgba(0, 0, 0, .55),
+ 0 14px 30px -18px rgba(0, 0, 0, .85);
+
+ border-color: color-mix(in srgb, var(--ton) 16%, rgba(150, 186, 220, .14));
+}
+
+/* Die Körnung. Sie liegt über der Fläche, aber UNTER dem Inhalt --
+ Schrift durch ein Rauschen zu lesen wäre anstrengend. */
+.kachel > .kachel__link::before {
+ content: ""; position: absolute; inset: 0; z-index: -1;
+ background-image: var(--koernung);
+ background-size: 140px 140px;
+ opacity: .035;
+ mix-blend-mode: overlay;
+ pointer-events: none;
+ border-radius: inherit;
+}
+
+/* DER GLANZ. Ein schmaler, sehr weicher Streifen quer über die obere
+ linke Ecke -- die Spiegelung einer Lichtquelle, die außerhalb des
+ Bildes liegt. Das ist der Unterschied zwischen einer matten und einer
+ lackierten Oberfläche, und er ist bewusst so schwach, dass man ihn
+ nicht als Streifen sieht, sondern nur als "die glänzt". */
+.kachel::after {
+ background:
+ linear-gradient(128deg,
+ rgba(255, 255, 255, .085) 0%,
+ rgba(255, 255, 255, .022) 16%,
+ rgba(255, 255, 255, 0) 34%),
+ radial-gradient(130% 150% at var(--mx) var(--my),
+ color-mix(in srgb, var(--ton) 22%, transparent), transparent 60%);
+ opacity: .46;
+}
+
+/* Die farbige Kante bekommt Tiefe: oben satt, unten auslaufend, und
+ ein Hauch Leuchten nach innen. */
+.kachel::before {
+ width: 3px;
+ background:
+ linear-gradient(180deg,
+ color-mix(in srgb, var(--ton) 100%, transparent) 0%,
+ color-mix(in srgb, var(--ton) 72%, transparent) 42%,
+ transparent 94%);
+ box-shadow: 1px 0 8px -2px color-mix(in srgb, var(--ton) 55%, transparent);
+ opacity: .62;
+}
+
+/* ANHEBEN STATT AUFLEUCHTEN. Beim Überfahren wird die Kachel nicht
+ heller, sondern sie kommt näher: Sie steigt zwei Pixel, ihr Schatten
+ wird größer und weicher (weil der Abstand zum Untergrund wächst) und
+ die Kante wird kräftiger. Genau so verhält sich ein Gegenstand, den
+ man anhebt -- und deshalb wirkt es echt, ohne dass etwas blinkt. */
+.kachel:hover {
+ transform: translateY(-3px);
+ border-color: color-mix(in srgb, var(--ton) 42%, rgba(150, 186, 220, .18));
+ box-shadow:
+ inset 0 1px 0 rgba(255, 255, 255, .14),
+ inset 0 -1px 0 rgba(0, 0, 0, .45),
+ 0 4px 10px -4px rgba(0, 0, 0, .6),
+ 0 22px 44px -22px rgba(0, 0, 0, .9),
+ 0 0 26px -12px color-mix(in srgb, var(--ton) 60%, transparent);
+}
+.kachel:hover::before { opacity: 1; width: 3px; }
+
+/* Beim Drücken sinkt sie zurück -- ohne diesen Gegenweg fühlt sich ein
+ Knopf an wie ein Bild von einem Knopf. */
+.kachel:active {
+ transform: translateY(-1px);
+ transition-duration: .07s;
+}
+
+/* Die Plakette bekommt dieselbe Behandlung: Körnung und ein tieferer
+ Schatten, damit sie auf der Kachel LIEGT statt in sie gemalt zu sein. */
+.kachel__zeichen::after {
+ content: ""; position: absolute; inset: 0;
+ background-image: var(--koernung);
+ background-size: 140px 140px;
+ opacity: .05;
+ mix-blend-mode: overlay;
+ pointer-events: none;
+}
+.kachel:hover .kachel__zeichen {
+ transform: translateY(-1px) scale(1.03);
+ box-shadow:
+ inset 0 1.5px 0 color-mix(in srgb, #fff 34%, transparent),
+ inset 0 -2px 6px -3px color-mix(in srgb, #000 55%, transparent),
+ 0 10px 24px -10px color-mix(in srgb, var(--ton) 95%, transparent),
+ 0 0 0 1px color-mix(in srgb, var(--ton) 16%, transparent);
+}
+
+/* Auch die übrigen Flächen der Seite bekommen Mattglas und Körnung --
+ sonst sähen die Kacheln aus wie aus einer anderen Anwendung als der
+ Kasten daneben. Eine Oberfläche, in der zwei Materialien nebeneinander
+ liegen, wirkt zusammengesucht. */
+.tagesblick,
+.zahlkarte,
+.zielbalken__zeile,
+.tagzeile,
+.creator,
+.warnkarte,
+.summe {
+ backdrop-filter: blur(13px) saturate(125%);
+ -webkit-backdrop-filter: blur(13px) saturate(125%);
+ box-shadow:
+ inset 0 1px 0 rgba(255, 255, 255, .07),
+ inset 0 -1px 0 rgba(0, 0, 0, .35),
+ 0 2px 4px -2px rgba(0, 0, 0, .45),
+ 0 12px 26px -18px rgba(0, 0, 0, .8);
+}
+
+/* WENIGER BEWEGUNG HEISST: KEINE BEWEGUNG.
+ Der Glanz, die Körnung und die Schatten bleiben -- die sind Aussehen,
+ nicht Bewegung. Was wegfällt, ist das Anheben. */
+@media (prefers-reduced-motion: reduce) {
+ .kachel, .kachel:hover, .kachel:active { transform: none; }
+ .kachel:hover .kachel__zeichen { transform: none; }
+}
+
+/* Bei erzwungenen Farben (Windows-Kontrastmodus) sind Mattglas und
+ Körnung nicht nur wirkungslos, sondern schädlich -- dort zählt
+ ausschliesslich die Kante. */
+@media (forced-colors: active) {
+ .kachel { backdrop-filter: none; box-shadow: none; border: 1px solid CanvasText; }
+ .kachel > .kachel__link::before,
+ .kachel__zeichen::after { display: none; }
+}
diff --git a/workspace/assets/img/buehne-arena-breit.webp b/workspace/assets/img/buehne-arena-breit.webp
index adfc991b..41e502ec 100644
Binary files a/workspace/assets/img/buehne-arena-breit.webp and b/workspace/assets/img/buehne-arena-breit.webp differ
diff --git a/workspace/assets/img/buehne-arena-schmal.webp b/workspace/assets/img/buehne-arena-schmal.webp
index 3b41a13d..61813a33 100644
Binary files a/workspace/assets/img/buehne-arena-schmal.webp and b/workspace/assets/img/buehne-arena-schmal.webp differ
diff --git a/workspace/assets/img/buehne-arena-uhd.webp b/workspace/assets/img/buehne-arena-uhd.webp
index 2552734e..2262ac2e 100644
Binary files a/workspace/assets/img/buehne-arena-uhd.webp and b/workspace/assets/img/buehne-arena-uhd.webp differ
diff --git a/workspace/assets/img/buehne-garage-breit.webp b/workspace/assets/img/buehne-garage-breit.webp
index e0ccf4dd..aef43b6f 100644
Binary files a/workspace/assets/img/buehne-garage-breit.webp and b/workspace/assets/img/buehne-garage-breit.webp differ
diff --git a/workspace/assets/img/buehne-garage-schmal.webp b/workspace/assets/img/buehne-garage-schmal.webp
index 11b3c6a9..cd4a1d54 100644
Binary files a/workspace/assets/img/buehne-garage-schmal.webp and b/workspace/assets/img/buehne-garage-schmal.webp differ
diff --git a/workspace/assets/img/buehne-garage-uhd.webp b/workspace/assets/img/buehne-garage-uhd.webp
index 63965ffe..a689e8dc 100644
Binary files a/workspace/assets/img/buehne-garage-uhd.webp and b/workspace/assets/img/buehne-garage-uhd.webp differ
diff --git a/workspace/assets/img/buehne-halle-breit.webp b/workspace/assets/img/buehne-halle-breit.webp
index adfc991b..41e502ec 100644
Binary files a/workspace/assets/img/buehne-halle-breit.webp and b/workspace/assets/img/buehne-halle-breit.webp differ
diff --git a/workspace/assets/img/buehne-halle-schmal.webp b/workspace/assets/img/buehne-halle-schmal.webp
index 3b41a13d..61813a33 100644
Binary files a/workspace/assets/img/buehne-halle-schmal.webp and b/workspace/assets/img/buehne-halle-schmal.webp differ
diff --git a/workspace/assets/img/buehne-halle-uhd.webp b/workspace/assets/img/buehne-halle-uhd.webp
index 2552734e..2262ac2e 100644
Binary files a/workspace/assets/img/buehne-halle-uhd.webp and b/workspace/assets/img/buehne-halle-uhd.webp differ
diff --git a/workspace/assets/img/buehne-lounge-breit.webp b/workspace/assets/img/buehne-lounge-breit.webp
index 01e2d054..34063136 100644
Binary files a/workspace/assets/img/buehne-lounge-breit.webp and b/workspace/assets/img/buehne-lounge-breit.webp differ
diff --git a/workspace/assets/img/buehne-lounge-schmal.webp b/workspace/assets/img/buehne-lounge-schmal.webp
index 0efbe0d6..036416a3 100644
Binary files a/workspace/assets/img/buehne-lounge-schmal.webp and b/workspace/assets/img/buehne-lounge-schmal.webp differ
diff --git a/workspace/assets/img/buehne-lounge-uhd.webp b/workspace/assets/img/buehne-lounge-uhd.webp
index 4a27e1e5..440c9934 100644
Binary files a/workspace/assets/img/buehne-lounge-uhd.webp and b/workspace/assets/img/buehne-lounge-uhd.webp differ
diff --git a/workspace/assets/img/buehne-portal-breit.webp b/workspace/assets/img/buehne-portal-breit.webp
index f2c03c2e..ea2830a5 100644
Binary files a/workspace/assets/img/buehne-portal-breit.webp and b/workspace/assets/img/buehne-portal-breit.webp differ
diff --git a/workspace/assets/img/buehne-portal-schmal.webp b/workspace/assets/img/buehne-portal-schmal.webp
index a7bf0768..0b5ca480 100644
Binary files a/workspace/assets/img/buehne-portal-schmal.webp and b/workspace/assets/img/buehne-portal-schmal.webp differ
diff --git a/workspace/assets/img/buehne-portal-uhd.webp b/workspace/assets/img/buehne-portal-uhd.webp
index d5387de8..70e7cb3d 100644
Binary files a/workspace/assets/img/buehne-portal-uhd.webp and b/workspace/assets/img/buehne-portal-uhd.webp differ
diff --git a/workspace/assets/img/buehne-showbuehne-breit.webp b/workspace/assets/img/buehne-showbuehne-breit.webp
index 5a7cbdcd..0666ea41 100644
Binary files a/workspace/assets/img/buehne-showbuehne-breit.webp and b/workspace/assets/img/buehne-showbuehne-breit.webp differ
diff --git a/workspace/assets/img/buehne-showbuehne-schmal.webp b/workspace/assets/img/buehne-showbuehne-schmal.webp
index 315b7ef4..9a857995 100644
Binary files a/workspace/assets/img/buehne-showbuehne-schmal.webp and b/workspace/assets/img/buehne-showbuehne-schmal.webp differ
diff --git a/workspace/assets/img/buehne-showbuehne-uhd.webp b/workspace/assets/img/buehne-showbuehne-uhd.webp
index c99e2ef5..e792024b 100644
Binary files a/workspace/assets/img/buehne-showbuehne-uhd.webp and b/workspace/assets/img/buehne-showbuehne-uhd.webp differ
diff --git a/workspace/assets/img/buehne-skyline-breit.webp b/workspace/assets/img/buehne-skyline-breit.webp
index 01e2d054..34063136 100644
Binary files a/workspace/assets/img/buehne-skyline-breit.webp and b/workspace/assets/img/buehne-skyline-breit.webp differ
diff --git a/workspace/assets/img/buehne-skyline-schmal.webp b/workspace/assets/img/buehne-skyline-schmal.webp
index 0efbe0d6..036416a3 100644
Binary files a/workspace/assets/img/buehne-skyline-schmal.webp and b/workspace/assets/img/buehne-skyline-schmal.webp differ
diff --git a/workspace/assets/img/buehne-skyline-uhd.webp b/workspace/assets/img/buehne-skyline-uhd.webp
index 4a27e1e5..440c9934 100644
Binary files a/workspace/assets/img/buehne-skyline-uhd.webp and b/workspace/assets/img/buehne-skyline-uhd.webp differ
diff --git a/workspace/assets/img/buehne-studio-breit.webp b/workspace/assets/img/buehne-studio-breit.webp
index 4db82def..0b5ee7d6 100644
Binary files a/workspace/assets/img/buehne-studio-breit.webp and b/workspace/assets/img/buehne-studio-breit.webp differ
diff --git a/workspace/assets/img/buehne-studio-schmal.webp b/workspace/assets/img/buehne-studio-schmal.webp
index 51eaa274..0963b1c9 100644
Binary files a/workspace/assets/img/buehne-studio-schmal.webp and b/workspace/assets/img/buehne-studio-schmal.webp differ
diff --git a/workspace/assets/img/buehne-studio-uhd.webp b/workspace/assets/img/buehne-studio-uhd.webp
index 730cbc19..c313443d 100644
Binary files a/workspace/assets/img/buehne-studio-uhd.webp and b/workspace/assets/img/buehne-studio-uhd.webp differ
diff --git a/workspace/assets/img/buehne-wald-breit.webp b/workspace/assets/img/buehne-wald-breit.webp
index 79d28153..6dad778f 100644
Binary files a/workspace/assets/img/buehne-wald-breit.webp and b/workspace/assets/img/buehne-wald-breit.webp differ
diff --git a/workspace/assets/img/buehne-wald-schmal.webp b/workspace/assets/img/buehne-wald-schmal.webp
index f345401f..b558ffe4 100644
Binary files a/workspace/assets/img/buehne-wald-schmal.webp and b/workspace/assets/img/buehne-wald-schmal.webp differ
diff --git a/workspace/assets/img/buehne-wald-uhd.webp b/workspace/assets/img/buehne-wald-uhd.webp
index b45da83b..bd928eba 100644
Binary files a/workspace/assets/img/buehne-wald-uhd.webp and b/workspace/assets/img/buehne-wald-uhd.webp differ
diff --git a/workspace/assets/img/buehne/gate-1280.webp b/workspace/assets/img/buehne/gate-1280.webp
index 82d477f3..edb7dbe0 100644
Binary files a/workspace/assets/img/buehne/gate-1280.webp and b/workspace/assets/img/buehne/gate-1280.webp differ
diff --git a/workspace/assets/img/buehne/gate-1600.webp b/workspace/assets/img/buehne/gate-1600.webp
index 33a95f9c..26630338 100644
Binary files a/workspace/assets/img/buehne/gate-1600.webp and b/workspace/assets/img/buehne/gate-1600.webp differ
diff --git a/workspace/assets/img/buehne/gate-1920.webp b/workspace/assets/img/buehne/gate-1920.webp
index 13f8a776..b3437e6a 100644
Binary files a/workspace/assets/img/buehne/gate-1920.webp and b/workspace/assets/img/buehne/gate-1920.webp differ
diff --git a/workspace/assets/img/buehne/gate-2560.webp b/workspace/assets/img/buehne/gate-2560.webp
index c5d68edb..8f976655 100644
Binary files a/workspace/assets/img/buehne/gate-2560.webp and b/workspace/assets/img/buehne/gate-2560.webp differ
diff --git a/workspace/assets/img/buehne/gate-960.webp b/workspace/assets/img/buehne/gate-960.webp
index 7bd342cf..6ae15137 100644
Binary files a/workspace/assets/img/buehne/gate-960.webp and b/workspace/assets/img/buehne/gate-960.webp differ
diff --git a/workspace/assets/img/buehne/gate-hoch-440.webp b/workspace/assets/img/buehne/gate-hoch-440.webp
index 30be651f..12e61e90 100644
Binary files a/workspace/assets/img/buehne/gate-hoch-440.webp and b/workspace/assets/img/buehne/gate-hoch-440.webp differ
diff --git a/workspace/assets/img/buehne/gate-hoch-580.webp b/workspace/assets/img/buehne/gate-hoch-580.webp
index cef28534..8716aa68 100644
Binary files a/workspace/assets/img/buehne/gate-hoch-580.webp and b/workspace/assets/img/buehne/gate-hoch-580.webp differ
diff --git a/workspace/assets/img/buehne/gate-hoch-900.webp b/workspace/assets/img/buehne/gate-hoch-900.webp
index cd5585fa..2a3d8356 100644
Binary files a/workspace/assets/img/buehne/gate-hoch-900.webp and b/workspace/assets/img/buehne/gate-hoch-900.webp differ
diff --git a/workspace/aufgaben.html b/workspace/aufgaben.html
index eed933ec..332fd2e7 100644
--- a/workspace/aufgaben.html
+++ b/workspace/aufgaben.html
@@ -9,9 +9,9 @@
-
-
-
+
+
+
@@ -211,10 +211,10 @@
-
-
-
-
-
+
+
+
+
+