diff --git a/assets/css/main.css b/assets/css/main.css index f5c633ee..4c594957 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -2144,16 +2144,71 @@ body.modal-offen { overflow: hidden; } .jahres-event-modal-link[hidden] { display: none; } /* ---------- Cards ---------- */ +/* ---------- Die Kachel (überarbeitet 03.09.2026) ------------------------- + + Sie war eine Fläche mit einem Rand. Jetzt ist sie ein Gegenstand mit + einer Oberkante -- und das ist der ganze Unterschied. + + Drei Dinge, die zusammen wirken: + + 1. LICHTKANTE OBEN. Ein einzelner heller Strich an der oberen + Kante, so wie Licht auf die Kante einer Glasplatte fällt. Es ist + die billigste und wirksamste Art, aus einem Rechteck einen + Körper zu machen -- eine Kachel ohne sie wirkt wie ein Loch in + der Seite, eine mit ihr wie ein Ding darauf. + + 2. VERLAUF STATT FLÄCHE. Oben eine Spur heller als unten. Kaum zu + sehen, aber ohne ihn bleibt die Fläche tot. + + 3. TIEFE. Ein Schatten nach unten -- nicht mittig, sondern versetzt, + so wie ein Gegenstand seinen Schatten wirft. + + Beim Überfahren hebt sie sich, der Schatten wird länger und die + Lichtkante heller: als käme sie einem entgegen. Alles gedeckt, nichts + leuchtet -- diese Kacheln stehen zu Dutzenden auf einer Seite. */ .card { - background: var(--card-bg); + position: relative; + background: + linear-gradient(180deg, + color-mix(in srgb, #fff 3.5%, var(--card-bg)), + var(--card-bg) 46%); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.6rem; - box-shadow: var(--shadow); + box-shadow: + var(--shadow), + inset 0 1px 0 rgba(255, 255, 255, .07); height: 100%; - transition: border-color .15s ease, transform .15s ease; + transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; +} +/* Die Lichtkante. Als eigenes Element, damit sie den runden Ecken folgt + und in der Mitte am hellsten ist -- eine durchgehend gleich helle + Linie sieht aus wie ein Strich, nicht wie Licht. */ +.card::before { + content: ""; + position: absolute; top: 0; left: 12%; right: 12%; height: 1px; + background: linear-gradient(90deg, + transparent, rgba(255, 255, 255, .5), transparent); + pointer-events: none; + opacity: .85; + transition: opacity .15s ease; +} +.card:hover { + border-color: var(--accent); + transform: translateY(-3px); + box-shadow: + var(--shadow), + inset 0 1px 0 rgba(255, 255, 255, .1), + 0 16px 34px -20px color-mix(in srgb, var(--accent) 70%, transparent); +} +.card:hover::before { opacity: 1; } + +@media (prefers-reduced-motion: reduce) { + .card, .card:hover { transition: none; transform: none; } +} +@media (forced-colors: active) { + .card::before { display: none; } } -.card:hover { border-color: var(--accent); transform: translateY(-3px); } /* Kachel-Überschriften: gleiche Optik für h2 UND h3. Manche Kacheln sind semantisch

(eigenständige Abschnitte direkt unter der Seiten-h1, z.B. die Werte auf werte.html), sollen aber so kompakt diff --git a/server/pruef-buehne.png b/server/pruef-buehne.png index ac2fb5f4..727ab207 100644 Binary files a/server/pruef-buehne.png and b/server/pruef-buehne.png differ diff --git a/server/pruef-handy.png b/server/pruef-handy.png index dcdb116e..528e9602 100644 Binary files a/server/pruef-handy.png and b/server/pruef-handy.png differ diff --git a/server/pruef-lesbarkeit-scouting.png b/server/pruef-lesbarkeit-scouting.png index c06ca73d..446cb2f2 100644 Binary files a/server/pruef-lesbarkeit-scouting.png and b/server/pruef-lesbarkeit-scouting.png differ diff --git a/server/pruef-lesbarkeit-wissen.png b/server/pruef-lesbarkeit-wissen.png index aa9993f3..c97ee79f 100644 Binary files a/server/pruef-lesbarkeit-wissen.png and b/server/pruef-lesbarkeit-wissen.png differ diff --git a/server/pruef-rollen-admin.png b/server/pruef-rollen-admin.png index bdff4468..10390586 100644 Binary files a/server/pruef-rollen-admin.png and b/server/pruef-rollen-admin.png differ diff --git a/server/pruef-rollen-creator.png b/server/pruef-rollen-creator.png index 3321135c..7cf8b56e 100644 Binary files a/server/pruef-rollen-creator.png and b/server/pruef-rollen-creator.png differ diff --git a/server/pruef-rollen-manager.png b/server/pruef-rollen-manager.png index a6cd1157..cdf8651e 100644 Binary files a/server/pruef-rollen-manager.png and b/server/pruef-rollen-manager.png differ diff --git a/server/pruef-rollen-scout.png b/server/pruef-rollen-scout.png index 01f04055..125fc1e7 100644 Binary files a/server/pruef-rollen-scout.png and b/server/pruef-rollen-scout.png differ diff --git a/server/pruef-start-computer.png b/server/pruef-start-computer.png index 1ca1d23e..c50ae9a7 100644 Binary files a/server/pruef-start-computer.png and b/server/pruef-start-computer.png differ diff --git a/server/pruef-start-creator.png b/server/pruef-start-creator.png index 3227c57e..e5873409 100644 Binary files a/server/pruef-start-creator.png and b/server/pruef-start-creator.png differ diff --git a/server/pruef-start-handy.png b/server/pruef-start-handy.png index 3dba29bb..e74af16f 100644 Binary files a/server/pruef-start-handy.png and b/server/pruef-start-handy.png differ diff --git a/workspace/assets/css/start.css b/workspace/assets/css/start.css index 97742fdb..cec0be5a 100644 --- a/workspace/assets/css/start.css +++ b/workspace/assets/css/start.css @@ -2888,3 +2888,96 @@ body[data-fremde-sicht="ja"]::after { .kachel__svg .zeichen__fuellung, .kachel__svg .zeichen__glanz { display: none; } } + +/* ---------- Material statt Zeichnung (03.09.2026, zweite Stufe) ---------- + + Der Eigenschatten des Zeichens: eine dunkle Lage auf dem Körper, die + von unten hereinkriecht. Zusammen mit dem Streulicht in der Kontur + ergibt das die Beleuchtung, die man aus der Wirklichkeit kennt -- + Hauptlicht oben, Schatten unten, Aufheller an der Unterkante. */ +.kachel__svg .zeichen__eigenschatten { + fill: url(#zeichen-schatten); + stroke: none; + mix-blend-mode: multiply; +} + +/* Der Schlagschatten AUF die Plakette. Er ist der eigentliche Grund, + warum das Zeichen über der Fläche zu schweben scheint statt darauf zu + liegen: Er sitzt versetzt nach unten, nicht mittig. Dazu der farbige + Hof von vorher -- Schatten UND Licht, wie bei jedem Gegenstand, der + auf etwas liegt. */ +.kachel__svg { + filter: + drop-shadow(0 1.5px 1.5px rgba(0, 0, 0, .55)) + drop-shadow(0 1px 4px color-mix(in srgb, var(--ton) 50%, transparent)); +} +.kachel:hover .kachel__svg { + filter: + drop-shadow(0 2px 2px rgba(0, 0, 0, .6)) + drop-shadow(0 2px 8px color-mix(in srgb, var(--ton) 70%, transparent)); +} + +/* ---------- Die Körnung --------------------------------------------------- + + Eine sehr feine, unregelmäßige Struktur auf der Plakette. Sie ist der + Unterschied zwischen "am Rechner gemacht" und "Gegenstand": Eine + makellos glatte Farbfläche gibt es in der Wirklichkeit nicht, und das + Auge erkennt das sofort -- auch wenn niemand sagen könnte, woran es + liegt. + + Als eingebettetes Rauschen, keine Bilddatei: kostet nichts zu laden + und kann nicht fehlen. */ +.kachel__zeichen::after { + content: ""; + position: absolute; inset: 0; + pointer-events: none; + opacity: .5; + mix-blend-mode: overlay; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23k)' opacity='0.35'/%3E%3C/svg%3E"); +} + +@media (forced-colors: active) { + .kachel__svg .zeichen__eigenschatten, + .kachel__zeichen::after { display: none; } + .kachel__svg { filter: none; } +} + +/* ---------- Die Kachel als Gegenstand (03.09.2026, zweite Stufe) --------- + + Die Kachel hatte schon eine Lichtkante -- aber eine durchgehend + gleich helle, über die volle Breite. Das ist ein Strich, kein Licht. + Echtes Licht auf einer Kante ist in der Mitte am stärksten und läuft + nach aussen aus. + + Dazu kommt, was einer Kachel bisher ganz fehlte: TIEFE nach unten. + Ein Gegenstand, der auf etwas liegt, wirft einen Schatten -- ohne ihn + klebt die Kachel auf dem Hintergrund, statt darauf zu liegen. */ +.kachel { + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, .04), + 0 10px 26px -18px rgba(0, 0, 0, .9), + 0 2px 6px -4px rgba(0, 0, 0, .5); +} +.kachel::after { + content: ""; + position: absolute; top: 0; left: 14%; right: 14%; height: 1px; + background: linear-gradient(90deg, + transparent, + color-mix(in srgb, var(--ton) 75%, #fff) 50%, + transparent); + opacity: .5; + pointer-events: none; + z-index: 2; + transition: opacity var(--tempo); +} +.kachel:hover { + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, .07), + 0 18px 40px -20px rgba(0, 0, 0, .95), + 0 3px 10px -5px color-mix(in srgb, var(--ton) 45%, transparent); +} +.kachel:hover::after { opacity: .95; } + +@media (forced-colors: active) { + .kachel::after { display: none; } +} diff --git a/workspace/assets/js/bereiche.js b/workspace/assets/js/bereiche.js index 6adb0c86..6ea8c0df 100644 --- a/workspace/assets/js/bereiche.js +++ b/workspace/assets/js/bereiche.js @@ -383,17 +383,37 @@ /* Der Körper: oben satt, unten fast durchsichtig. */ bauen('zeichen-flaeche', [ - ['0', 'currentColor', '0.62'], - ['0.5', 'currentColor', '0.34'], - ['1', 'currentColor', '0.1'], + ['0', 'currentColor', '0.68'], + ['0.45', 'currentColor', '0.38'], + ['1', 'currentColor', '0.12'], + ]); + /* Der Eigenschatten: eine zweite Fuellung, die von unten dunkel + hereinkriecht. Ein Koerper ist unten dunkler als oben -- ohne das + bleibt jede Flaeche eine Farbflaeche. */ + bauen('zeichen-schatten', [ + ['0', '#000000', '0'], + ['0.55', '#000000', '0'], + ['1', '#000000', '0.45'], ]); /* Die Kontur: Licht von oben. Oben fast weiss, unten im Farbton -- das ist der Trick, der die Zeichen aus der Fläche hebt. */ + /* Die Kontur bekommt ZWEI Lichtquellen -- so wie ein echter + Gegenstand auf einem Tisch: + + oben das Hauptlicht, fast weiss + Mitte der Eigenton des Gegenstands + unten STREULICHT, das vom Untergrund zurueckgeworfen wird + + Der letzte Stopp ist der Unterschied zwischen "Zeichnung" und + "Ding". Ohne ihn laeuft jede Form nach unten ins Dunkle aus und + sieht aus wie gemalt; mit ihm bekommt sie unten eine Kante, und + das Auge liest sie als Koerper im Raum. */ bauen('zeichen-linie', [ - ['0', '#ffffff', '0.96'], - ['0.42', '#ffffff', '0.72'], - ['1', 'currentColor', '0.9'], + ['0', '#ffffff', '0.98'], + ['0.38', '#ffffff', '0.78'], + ['0.78', 'currentColor', '0.95'], + ['1', '#ffffff', '0.42'], ]); /* Die Spiegelung, diagonal von links oben nach rechts unten. */ @@ -424,6 +444,7 @@ const teile = Array.isArray(eintrag) ? [['zeichen__linie', eintrag]] : [['zeichen__fuellung', eintrag.fuellung || []], + ['zeichen__eigenschatten', eintrag.fuellung || []], ['zeichen__glanz', eintrag.fuellung || []], ['zeichen__linie', eintrag.linien || []]]; diff --git a/workspace/aufgaben.html b/workspace/aufgaben.html index 0f68d96a..65494ce9 100644 --- a/workspace/aufgaben.html +++ b/workspace/aufgaben.html @@ -7,9 +7,9 @@ - - - + + + @@ -152,9 +152,9 @@ - - - - + + + + diff --git a/workspace/automation.html b/workspace/automation.html index 4c397b09..a11645dc 100644 --- a/workspace/automation.html +++ b/workspace/automation.html @@ -7,10 +7,10 @@ - - - - + + + + @@ -132,9 +132,9 @@ - - - - + + + + diff --git a/workspace/bereich.html b/workspace/bereich.html index e4dabfc3..b9aec270 100644 --- a/workspace/bereich.html +++ b/workspace/bereich.html @@ -7,10 +7,10 @@ - - - - + + + + @@ -115,13 +115,13 @@ - - - - - - - - + + + + + + + + diff --git a/workspace/calls.html b/workspace/calls.html index f0975c7e..79b0bf02 100644 --- a/workspace/calls.html +++ b/workspace/calls.html @@ -7,10 +7,10 @@ - - - - + + + + @@ -74,10 +74,10 @@ - - - - - + + + + + diff --git a/workspace/content.html b/workspace/content.html index 0249e6f1..17d22fae 100644 --- a/workspace/content.html +++ b/workspace/content.html @@ -7,10 +7,10 @@ - - - - + + + + @@ -164,11 +164,11 @@ - - - - - - + + + + + + diff --git a/workspace/dateien.html b/workspace/dateien.html index 8e4d1543..f3b21f8d 100644 --- a/workspace/dateien.html +++ b/workspace/dateien.html @@ -7,10 +7,10 @@ - - - - + + + + @@ -93,9 +93,9 @@ - - - - + + + + diff --git a/workspace/index.html b/workspace/index.html index d4b5cd41..59e97b9d 100644 --- a/workspace/index.html +++ b/workspace/index.html @@ -25,7 +25,7 @@ type="image/webp" media="(max-width: 899px)" /> - + @@ -143,6 +143,6 @@

- + diff --git a/workspace/kalender.html b/workspace/kalender.html index 1f94de52..c24bfc60 100644 --- a/workspace/kalender.html +++ b/workspace/kalender.html @@ -7,10 +7,10 @@ - - - - + + + + @@ -178,9 +178,9 @@ - - - - + + + + diff --git a/workspace/personen.html b/workspace/personen.html index 2d5d170d..9ef0694e 100644 --- a/workspace/personen.html +++ b/workspace/personen.html @@ -7,10 +7,10 @@ - - - - + + + + @@ -121,9 +121,9 @@ - - - - + + + + diff --git a/workspace/profil.html b/workspace/profil.html index 238c5407..5ce87b8c 100644 --- a/workspace/profil.html +++ b/workspace/profil.html @@ -7,10 +7,10 @@ - - - - + + + + @@ -193,10 +193,10 @@ - - - - - + + + + + diff --git a/workspace/report.html b/workspace/report.html index 1cd186e6..217c0f29 100644 --- a/workspace/report.html +++ b/workspace/report.html @@ -7,10 +7,10 @@ - - - - + + + + @@ -91,10 +91,10 @@ - - - - - + + + + + diff --git a/workspace/scouting.html b/workspace/scouting.html index bf50825b..bb00b0c4 100644 --- a/workspace/scouting.html +++ b/workspace/scouting.html @@ -7,10 +7,10 @@ - - - - + + + + @@ -124,9 +124,9 @@ - - - - + + + + diff --git a/workspace/start.html b/workspace/start.html index 766f0551..37235472 100644 --- a/workspace/start.html +++ b/workspace/start.html @@ -7,8 +7,8 @@ - - + + @@ -99,9 +99,9 @@

- - - - + + + + diff --git a/workspace/startcheck.html b/workspace/startcheck.html index 0502c3ae..2d6bcb62 100644 --- a/workspace/startcheck.html +++ b/workspace/startcheck.html @@ -7,10 +7,10 @@ - - - - + + + + @@ -70,10 +70,10 @@ - - - - - + + + + + diff --git a/workspace/steckbrief.html b/workspace/steckbrief.html index 2d0e724e..5f63aa28 100644 --- a/workspace/steckbrief.html +++ b/workspace/steckbrief.html @@ -7,10 +7,10 @@ - - - - + + + + @@ -111,9 +111,9 @@ - - - - + + + + diff --git a/workspace/uebersicht.html b/workspace/uebersicht.html index db291a14..3bd9eef0 100644 --- a/workspace/uebersicht.html +++ b/workspace/uebersicht.html @@ -7,9 +7,9 @@ - - - + + + @@ -57,9 +57,9 @@ - + - - + + diff --git a/workspace/wissen.html b/workspace/wissen.html index 0cbb7d5e..a06ae841 100644 --- a/workspace/wissen.html +++ b/workspace/wissen.html @@ -7,10 +7,10 @@ - - - - + + + + @@ -175,9 +175,9 @@ - - - - + + + +