DogFatherGitandClaude Opus 5
9c7952b5a3
Filipe: "die symbole und der text dadrin sollen groesser und noch
spezieller sein, und die symbole sollen auch 2-3 farben haben ... sollen
mehr leben haben, auch viel realistischere effekte."
NICHT DREI AUSGEDACHTE FARBEN, SONDERN DIE DREI EINES ECHTEN AUFBAUS
So wird jedes Produktfoto ausgeleuchtet, und aus demselben Grund sieht
es plastisch aus:
1 FUEHRUNGSLICHT, kalt, von oben links. Ein Spitzlicht ist nie
reinweiss -- es traegt die Farbe der Lampe, und die ist kuehl.
2 EIGENFARBE des Gegenstands: der Ton seiner Kachel.
3 STREULICHT, warm, von unten. Licht, das vom Untergrund
zurueckkommt, ist waermer als das Hauptlicht. Genau dieser warme
Saum ist der Grund, warum ein Gegenstand im Bild STEHT statt zu
schweben.
Dazu die aelteste Regel der Malerei: warmes Licht, KUEHLE Schatten. Die
Seitenwaende der Zeichen kippen jetzt ins Blaue statt nur dunkler zu
werden. Und ein RANDLICHT auf der Lichtseite -- der schmale Streifen,
in dem das Fuehrungslicht die Kante streift. Ein Gegenstand ohne diese
Kante sieht immer ein wenig flach aus, und man kann meist nicht sagen,
warum.
ZWEI FEHLER DABEI, BEIDE ERST BEI FUENFFACHER VERGROESSERUNG SICHTBAR
* DAS WARME LICHT LAG UNTER DER FORM. Die Verlaeufe spannten ueber das
ganze 24er-Raster (y 2 bis 22); die Sprechblase des Chats reicht
aber nur von 5,5 bis 20,5. Der warme Stopp bei y 22 war damit
ausserhalb -- von den drei Lichtern kam genau eines an.
`objectBoundingBox` spannt den Verlauf jetzt ueber JEDES Teil
einzeln: Der Kalenderkorpus bekommt sein volles Licht, seine Fuesse
ebenfalls. So verhaelt sich ein echter Aufbau -- jedes Teil liegt im
selben Licht, nicht im selben Ausschnitt.
* DAS RANDLICHT WAR SCHMALER ALS DIE KONTUR DARUEBER und lag deshalb
vollstaendig darunter: gebaut, gezeichnet, unsichtbar. Jetzt 2,7
gegen 1,9 -- so schaut es oben links hervor.
GROESSER, WIE GEWUENSCHT
Plakette 58 -> 64 px (grosse Kachel 62 -> 70), Zeichen 29 -> 35 px
(gross 32 -> 39), Wasserzeichen 132 -> 156 px (gross 168 -> 196),
Name 1,06 -> 1,15 rem (gross 1,24 -> 1,38), Unterzeile 0,78 -> 0,845.
Auf dem Dashboard entsprechend.
UND DAS SCHILD WIRFT LICHT AUF SEINE KACHEL
Ein beleuchteter Gegenstand faerbt seine Umgebung. Ohne diesen Abfall
sieht selbst ein gut gebautes Schild aufgeklebt aus. Weit gestreut und
weit unter der Blendschwelle: Man soll ihn nicht sehen, man soll ihn
vermissen, wenn er fehlt.
Zehn Pruefungen gelaufen, alle gruen -- darunter Handy und Breiten,
weil groesserer Text der schnellste Weg zu einem Ueberlauf ist.
Co-Authored-By: Claude Opus 5 <[email protected]>
451 lines
22 KiB
CSS
451 lines
22 KiB
CSS
/* =====================================================================
|
|
module.css — DIE FORM ALLER MODULE
|
|
|
|
Herausgeloest aus start.css am 07.09.2026. Diese Datei beschreibt die
|
|
SILHOUETTE der ganzen Anwendung: die abgeschnittene Ecke, das
|
|
Kantenlicht, die Eckwinkel und das Raster.
|
|
|
|
Sie wird von JEDER Seite geladen -- ausser von der Anmeldeseite
|
|
(index.html), die unangetastet bleibt.
|
|
|
|
SIE WIRD ALS LETZTE GELADEN, und das ist keine Kosmetik. Bis zum
|
|
07.09.2026 stand sie an dritter Stelle, VOR den Seitendateien. Dort
|
|
hat sie auf vier Seiten schlicht nichts bewirkt: `.call` in
|
|
calls.css, `.regel`/`.zustand`/`.ki-kasten` in automation.css,
|
|
`.unterweisung` in bereich.css und `.fortschritt` in dateien.css
|
|
setzen alle selbst `border-radius` und `box-shadow` -- gleiche
|
|
Spezifitaet, spaeter im Ladeweg, also gewinnen sie. Ergebnis war
|
|
genau das, was Filipe zu Recht bemaengelt hat: die neue Form auf
|
|
manchen Seiten, die alte auf anderen, "ueberall ein bisschen".
|
|
Als letzte Datei gewinnt die Form ueberall.
|
|
|
|
WER EINE NEUE KARTE BAUT, traegt ihren Klassennamen in die Listen
|
|
unten ein. Die Liste steht siebenmal in dieser Datei (Grundform,
|
|
Kantenlicht, Raster, Handy und dreimal Kontrastmodus) -- das ist die
|
|
schwache Stelle dieser Bauart, denn eine vergessene Kopie faellt
|
|
niemandem auf. Deshalb steht vor jeder Kopie die Marke
|
|
MODULLISTE, und `pruef-css-klassen.mjs` vergleicht alle sieben
|
|
Vorkommen miteinander: Weicht eines ab, wird die Pruefung rot.
|
|
===================================================================== */
|
|
|
|
/* =====================================================================
|
|
HUD-MODULE — die FORM ändert sich, nicht der Lack (07.09.2026)
|
|
|
|
Filipe: "DU HAST WIEDER EINE KLEINE ÄNDERUNG ÜBERALL GEMACHT ANSTATT
|
|
EINE RIESEN ÄNDERUNG."
|
|
|
|
---------------------------------------------------------------------
|
|
ER HAT RECHT, UND DER GRUND WAR IMMER DERSELBE
|
|
|
|
Ich habe dreimal das MATERIAL getauscht -- Mattglas, Leuchtschiene,
|
|
Verlauf mit Schatten -- und dreimal die FORM gelassen. Ein
|
|
abgerundetes Rechteck bleibt ein abgerundetes Rechteck. Die
|
|
Silhouette ist aber das Einzige, was man aus fünf Metern erkennt;
|
|
deshalb sah jede Änderung "wie vorher" aus.
|
|
|
|
DIE NEUE FORM:
|
|
|
|
1. DIE ECKE OBEN LINKS IST ABGESCHNITTEN. Eine Schräge statt einer
|
|
Rundung -- eine andere geometrische Klasse, und genau deshalb
|
|
fällt sie auf. Gebaut mit `clip-path`, also eine echte
|
|
Silhouette und kein aufgemalter Fleck.
|
|
2. EIN LICHT LÄUFT AUF DER KANTE, oben und über die Schräge, in der
|
|
Farbe der Kategorie -- nicht ein Rahmen rundherum (das wäre
|
|
wieder ein Kasten), sondern eine beleuchtete Oberkante.
|
|
3. ECKWINKEL UNTEN RECHTS. Zwei kurze Striche, die eine Ecke
|
|
andeuten, ohne sie zu zeichnen -- die Sprache von Peilung und
|
|
Zielmarke.
|
|
4. EIN FEINES RASTER statt Körnung. Körnung sagt "Papier", ein
|
|
Raster sagt "Messgerät".
|
|
|
|
---------------------------------------------------------------------
|
|
DREI DINGE, DIE BEIM ERSTEN ANLAUF SCHIEFGINGEN
|
|
|
|
`clip-path` SCHNEIDET DEN SCHLAGSCHATTEN AB. Deshalb liegt die Höhe
|
|
hier in `filter: drop-shadow()` und nicht in `box-shadow`: drop-shadow
|
|
folgt der WIRKLICHEN Form, box-shadow immer dem Rechteck -- er würde
|
|
einen Schatten für eine Ecke zeichnen, die es nicht mehr gibt.
|
|
|
|
DIE REGELN STANDEN IN `:where()`. Das hat Spezifität NULL, also
|
|
gewann jede ältere `.kachel::before`-Regel. Die Silhouette kam durch
|
|
(die setzt sonst niemand), das Kantenlicht nicht -- heraus kam ein
|
|
Zwitter aus neuer Form und alter Kante. Jetzt steht hier `:is()`:
|
|
Das übernimmt die Spezifität seines stärksten Arguments, also die
|
|
einer einzelnen Klasse. Damit liegt die Form gleichauf mit
|
|
`.kachel` und gewinnt über den Ladeweg -- deshalb muss diese Datei
|
|
zuletzt kommen (siehe oben).
|
|
|
|
UND SIE STAND ZU FRÜH IM LADEWEG. Siehe der Absatz ganz oben; das
|
|
war derselbe Fehler noch einmal, nur eine Ebene höher.
|
|
===================================================================== */
|
|
|
|
:root {
|
|
/* Die Schräge steht als Größe da, damit Silhouette, Kantenlicht und
|
|
Eckwinkel garantiert dieselbe benutzen. */
|
|
--fase: 18px;
|
|
--raster:
|
|
repeating-linear-gradient(0deg, rgba(150, 186, 220, .26) 0 1px, transparent 1px 26px),
|
|
repeating-linear-gradient(90deg, rgba(150, 186, 220, .26) 0 1px, transparent 1px 26px);
|
|
}
|
|
|
|
/* MODULLISTE */
|
|
:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .k-ansicht, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu) {
|
|
position: relative;
|
|
clip-path: polygon(var(--fase) 0, 100% 0, 100% 100%, 0 100%, 0 var(--fase));
|
|
border-radius: 0;
|
|
border: 0;
|
|
/* 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));
|
|
}
|
|
|
|
/* DAS KANTENLICHT. Ein Layer mit derselben Silhouette, 1,6 px kleiner --
|
|
was übrig bleibt, ist eine Linie, die exakt der Form folgt, Schräge
|
|
inklusive. Ein `border` könnte das nicht: Er folgt dem Rechteck. */
|
|
/* MODULLISTE */
|
|
:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .k-ansicht, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu)::before {
|
|
content: "";
|
|
position: absolute; inset: 0;
|
|
pointer-events: none;
|
|
z-index: 2;
|
|
width: auto; height: auto;
|
|
opacity: 1;
|
|
background: linear-gradient(158deg,
|
|
color-mix(in srgb, var(--ton, var(--akzent)) 90%, #ffffff) 0%,
|
|
color-mix(in srgb, var(--ton, var(--akzent)) 60%, transparent) 15%,
|
|
rgba(150, 186, 220, .20) 45%,
|
|
rgba(150, 186, 220, .07) 100%);
|
|
clip-path: polygon(
|
|
var(--fase) 0, 100% 0, 100% 100%, 0 100%, 0 var(--fase),
|
|
1.6px calc(var(--fase) + 0.7px), 1.6px calc(100% - 1.6px),
|
|
calc(100% - 1.6px) calc(100% - 1.6px), calc(100% - 1.6px) 1.6px,
|
|
calc(var(--fase) + 0.7px) 1.6px, 1.6px calc(var(--fase) + 0.7px),
|
|
0 var(--fase));
|
|
}
|
|
|
|
/* RASTER UND ECKWINKEL. Beides auf ::after -- ein drittes Element gibt
|
|
es nicht, und beides ist reine Optik ohne Klicks. */
|
|
/* MODULLISTE */
|
|
:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .k-ansicht, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu)::after {
|
|
content: "";
|
|
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:
|
|
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,
|
|
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. */
|
|
opacity: .26;
|
|
transform: none;
|
|
}
|
|
|
|
/* Der Inhalt gehört ÜBER Raster und Kantenlicht. Ohne diese Zeile
|
|
liegt bei Karten ohne eigenen Stapelwert der Text unter dem Raster
|
|
und wird von ihm überzeichnet.
|
|
|
|
`:not(.licht)` IST KEINE FEINHEIT, SONDERN DIE REPARATUR EINES
|
|
FEHLERS, DEN DIESE ZEILE SELBST VERURSACHT HAT (07.09.2026).
|
|
|
|
Das Licht, das dem Zeiger folgt, ist ein <span class="licht"> und
|
|
damit ein direktes Kind jeder Karte. `position: relative` hat ihm
|
|
sein `position: absolute` genommen: Aus einer Fläche über der ganzen
|
|
Karte wurde ein leerer Inline-Span ohne Ausdehnung. Im Browser
|
|
gemessen -- `display: inline`, obwohl in start.css `absolute`
|
|
steht -- und genau deshalb war das Licht weg, das Filipe
|
|
zurückhaben wollte.
|
|
|
|
Merksatz: Eine Regel auf `> *` trifft auch das, was gar kein Inhalt
|
|
ist. Wer sie schreibt, muss wissen, was sonst noch als Kind in
|
|
diesen Karten liegt. */
|
|
:is(.eintrag-karte, .call, .datei, .kachel, .leer-hinweis,
|
|
.team-karte, .zahl, .k-listentag, .person, .creator) > *:not(.licht) {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Beim Anfassen kommt das Modul NÄHER, es leuchtet nicht auf. */
|
|
:is(.kachel, .datei, .pdf, .creator, .person, .kk, .call, .team-karte):hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: none;
|
|
filter:
|
|
drop-shadow(0 4px 6px rgba(0, 0, 0, .6))
|
|
drop-shadow(0 20px 34px rgba(0, 0, 0, .6))
|
|
drop-shadow(0 0 14px color-mix(in srgb, var(--ton, var(--akzent)) 30%, transparent));
|
|
}
|
|
:is(.kachel, .datei, .pdf, .creator, .person, .kk, .call, .team-karte) {
|
|
transition: transform var(--tempo), filter var(--tempo);
|
|
}
|
|
|
|
@media (max-width: 620px) {
|
|
/* Dieselbe Form, kleiner -- keine zweite Gestaltung. */
|
|
:root { --fase: 12px; }
|
|
/* MODULLISTE */
|
|
:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .k-ansicht, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu) {
|
|
filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .7));
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
:is(.kachel, .datei, .pdf, .creator, .person, .kk, .call, .team-karte):hover {
|
|
transform: none;
|
|
}
|
|
}
|
|
@media (forced-colors: active) {
|
|
/* Im Kontrastmodus zählt die Kante, und die muss ein echter `border`
|
|
sein. Die Schräge bleibt: Sie ist Geometrie, keine Farbe. */
|
|
/* MODULLISTE */
|
|
:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .k-ansicht, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu) {
|
|
filter: none; border: 1px solid CanvasText;
|
|
}
|
|
/* MODULLISTE */
|
|
:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .k-ansicht, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu)::after {
|
|
display: none;
|
|
}
|
|
/* MODULLISTE */
|
|
:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .k-ansicht, .spalte, .balance, .saeulen-kasten, .neu, .call-raum, .creator, .summe, .pdf, .pdf-ablage, .suchleiste, .person, .kk, .fortschritt, .punkt, .dran__punkt, .unterweisung, .warnkarte, .kachel, .tagesblick, .leer-hinweis, .team-karte, .zahl, .k-listentag, .import-vorschau, .code-fenster, .schulung__neu)::before {
|
|
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 LICHT DES SCHILDES FAELLT AUF DIE KACHEL. Ein beleuchteter
|
|
Gegenstand wirft Farbe auf seine Umgebung -- ohne diesen Abfall
|
|
sieht selbst ein gut gebautes Schild aufgeklebt aus. Sehr weit
|
|
gestreut und weit unter der Blendschwelle: Man soll ihn nicht
|
|
sehen, man soll ihn vermissen, wenn er fehlt. */
|
|
0 10px 42px -14px color-mix(in srgb, var(--ton, var(--akzent)) 75%, transparent);
|
|
}
|
|
/* 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; }
|
|
}
|
|
|
|
|
|
/* =====================================================================
|
|
DIE TAGESKACHEL "WAS IST DRAN" (07.09.2026)
|
|
|
|
Filipe: "soll auch besser und auffaelliger aussehen bitte."
|
|
|
|
Sie bestand aus drei abgerundeten Zeilen mit einem Farbstreifen
|
|
links -- also aus der Form, die es hier bis heute Frueh ueberall
|
|
gab. Sie bekommt jetzt dieselbe Behandlung wie alles andere, und
|
|
zwar konsequent:
|
|
|
|
* Die drei Zeilen sind MODULE. `.dran__punkt` steht seit heute in
|
|
der Modulliste oben: abgeschnittene Ecke, Kantenlicht in der
|
|
Farbe des Bereichs, Eckwinkel, Fase. Damit sind sie kleine
|
|
Ausgaben derselben Bauteile, zu denen sie fuehren -- was sie ja
|
|
auch sind.
|
|
* Die ZAHL wird zum gefassten Schild, wie das Zeichen auf den
|
|
Kacheln. Sie ist die eigentliche Aussage der Zeile ("EINS
|
|
wartet"), und sie stand bisher als blosse Ziffer daneben.
|
|
* Zwischen den beiden Haelften laeuft eine gefraeste Nut statt
|
|
einer Linie -- dieselbe Sprache wie auf der Konsole.
|
|
===================================================================== */
|
|
|
|
/* Der Farbstreifen links entfaellt: Die Zeile hat jetzt ein
|
|
Kantenlicht, und beides zusammen waeren zwei Kanten fuer dieselbe
|
|
Aussage. */
|
|
.dran__punkt::before { width: 0; }
|
|
|
|
.dran__zahl {
|
|
--z-fase: 7px;
|
|
display: grid; place-items: center;
|
|
min-width: 30px; min-height: 26px;
|
|
padding: 2px;
|
|
font-size: 1.02rem;
|
|
/* DIE FARBE BLEIBT IN DER ZIFFER, nicht im Schild.
|
|
|
|
Im ersten Anlauf stand hier Weiss, weil das auf Metall gut
|
|
aussieht. Damit war die Aussage weg: Die Zahl traegt die Farbe des
|
|
Bereichs, zu dem die Zeile fuehrt -- und bei etwas Ueberfaelligem
|
|
die Warnfarbe. Das ist kein Schmuck, sondern die schnellste
|
|
Auskunft der ganzen Kachel. pruef-start-ansicht hat es sofort
|
|
gemeldet ("ueberfaellige Zeilen sind rot": weiss statt rot), und
|
|
die Pruefung hatte recht.
|
|
|
|
Das Schild darunter bleibt deshalb fast neutral -- nur eine Spur
|
|
Farbton, damit die Ziffer nicht auf Grau steht. */
|
|
color: var(--ton, var(--akzent));
|
|
text-align: center;
|
|
clip-path: polygon(var(--z-fase) 0, 100% 0, 100% 100%, 0 100%, 0 var(--z-fase));
|
|
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 4px 12px -7px rgba(0, 0, 0, .9), 0 0 0 1px rgba(6, 10, 18, .5);
|
|
}
|
|
/* Das Schild IM Ring traegt die Farbe des Bereichs -- wie bei den
|
|
Kacheln liegt die Farbe innen, das Metall bleibt ueberall gleich. */
|
|
.dran__zahl::before {
|
|
content: ""; position: absolute; inset: 2px; z-index: -1;
|
|
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, .10) 0%, transparent 48%),
|
|
linear-gradient(color-mix(in srgb, var(--ton, var(--akzent)) 14%, #080d15),
|
|
color-mix(in srgb, var(--ton, var(--akzent)) 6%, #080d15));
|
|
}
|
|
.dran__zahl { position: relative; isolation: isolate; }
|
|
|
|
/* Die Nut zwischen "Was ist dran" und "Heute". Dunkel auf der
|
|
Lichtseite, hell auf der Schattenseite -- so liest sich eine
|
|
Vertiefung. Eine aufgemalte Linie kann das nicht. */
|
|
.tagesblick__seite--heute::before {
|
|
content: ""; position: absolute;
|
|
left: -21px; top: -6px; bottom: -6px; width: 2px;
|
|
pointer-events: none;
|
|
background: linear-gradient(90deg,
|
|
rgba(0, 0, 0, .75) 0 1px,
|
|
rgba(255, 255, 255, .12) 1px 2px);
|
|
}
|
|
|
|
@media (forced-colors: active) {
|
|
.dran__zahl { background: Canvas; box-shadow: none; border: 1px solid CanvasText; }
|
|
.dran__zahl::before { display: none; }
|
|
.tagesblick__seite--heute::before { background: CanvasText; }
|
|
}
|