DogFatherGitandClaude Opus 5
bec46ed991
Filipe, mit Bildschirmfoto: "perfektionnir das in einer kachel in der
farbe von der kategorie bitte. und die kacheln unten in der seite auch
perfektionnieren und geil machen bitte."
--- DER KOPF ---
Er war eine freistehende Ueberschrift auf dem Buehnenbild. Jetzt ist er
eine Kachel wie jede andere im Haus: gefraeste Fase, Kantenlicht,
Eckwinkel, Raster -- alles aus der Modulliste in module.css, wo
`.t-kachel` seit diesem Commit steht.
DIE FARBE IST NICHT ABGESCHRIEBEN. Die Kachel traegt `data-ton="22"`,
und die Regel dazu steht in start.css -- dieselbe, aus der die Kachel
auf der Startseite ihre Farbe zieht (#ffd166). Es gibt weiterhin genau
EINE Stelle, an der die Farbe dieser Kategorie steht; wer sie dort
aendert, aendert beides. Eine zweite Hexzahl in team.css waere die
naechste gewesen, die auseinanderlaeuft.
Der Grenzsatz ("Termine, Chats und Dateien kommen hier nicht vor")
wechselt von Gruen in denselben Ton: In einer Kachel, die schon eine
Farbe hat, ist eine zweite Farbe daneben eine zweite Aussage.
--- DIE KARTEN UNTEN ---
`.tperson` und `.tl` stehen ebenfalls in der Modulliste. Ein
Manager-Kasten leuchtet damit lila, ein Scout-Kasten gruen, ein
Lueckenkasten rot -- ueber `--ton`, ohne dass eine einzige Farbe hier
ausgeschrieben stehen muss.
DER STREIFEN LINKS IST DAFUER WEG, und das ist kein Verlust: module.css
belegt ::before und ::after selbst (Kantenlicht und Eckwinkel) und
laedt NACH team.css -- ein eigenes ::after waere ohnehin wirkungslos
gewesen. Das Kantenlicht traegt die Rollenfarbe jetzt rund um die ganze
Karte statt auf drei Pixeln links.
DIE KENNZAHLEN BLEIBEN SCHLICHT, und das ist eine Entscheidung: Sie
stehen zu acht in einer Karte. Jede davon mit Fase, Kantenlicht und
Eckwinkel waere ein Schaufenster voller Rahmen und keine Auskunft mehr
-- eine Kachel in der Kachel in der Kachel liest niemand. Sie bekommen
nur die abgeschnittene Ecke aus derselben Formel, damit sie erkennbar
zur Familie gehoeren.
--- EIN FEHLER, DEN NUR DAS HANDY GEZEIGT HAT ---
Der Grenzsatz-Kasten hat `flex: 1 1 300px`. Am Rechner ist das richtig:
Dort ist die Hauptachse waagerecht, und er teilt sich die Breite mit
dem Titel. Am Handy dreht die Reihe auf eine SPALTE -- und derselbe
Wert liess ihn in die HOEHE wachsen. Auf dem Bildschirmfoto stand
danach die halbe Kachel leer.
Ein Flexwert gilt fuer eine Richtung, nicht fuer ein Element. Wer die
Richtung dreht, muss ihn mitdrehen.
--- Pruefung ---
pruef-css-klassen: die Modulliste steht weiterhin siebenmal und
Zeichen fuer Zeichen gleich (jetzt 48 Klassen).
pruef-team, 51 Pruefungen: darunter acht Kontrastmessungen an der
WIRKLICHEN Flaeche -- die Hintergruende haben sich durch den Umbau
geaendert, und eine Kachel mit Raster und Verlauf ist etwas anderes als
ein flacher Kasten. Gemessen jetzt 6,71 bis 15,12:1.
Ausserdem gruen: pruef-handy, pruef-lesbarkeit, pruef-buehne.
Co-Authored-By: Claude Opus 5 <[email protected]>
471 lines
24 KiB
CSS
471 lines
24 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;
|
|
/* DAS RASTER TRITT ZURUECK (09.09.2026, screen3).
|
|
|
|
Filipe: "die hintergrunde sollen ueberall so sein dass die sich
|
|
nicht in den vordergrund draengeln."
|
|
|
|
Es stand auf .26 Deckkraft. Das ist auf einer dunklen Flaeche kein
|
|
Hauch mehr, sondern ein gezeichnetes Gitter -- im Tagdialog lief es
|
|
sichtbar durch die Ueberschrift, in den Sammelkacheln stand es vor
|
|
den Karten darin. Ein Hintergrund, den man LIEST, ist kein
|
|
Hintergrund.
|
|
|
|
Jetzt .09. Das ist der Wert, bei dem man aus einem Meter Abstand
|
|
eine Struktur SIEHT, aber keine Linien ZAEHLT -- und genau das ist
|
|
der Unterschied zwischen Material und Muster. Dieselbe Ueberlegung
|
|
wie beim Kohlefasergewebe der Zentrale, das bei drei Prozent liegt.
|
|
|
|
EINE ZAHL FUER DAS GANZE HAUS: `--raster` steht hier einmal und
|
|
wird an 20 Stellen benutzt. Wer es leiser will, aendert diese eine
|
|
Zeile -- deshalb war es auch richtig, es nicht an jeder Kachel
|
|
einzeln nachzuziehen. */
|
|
--raster:
|
|
repeating-linear-gradient(0deg, rgba(150, 186, 220, .09) 0 1px, transparent 1px 26px),
|
|
repeating-linear-gradient(90deg, rgba(150, 186, 220, .09) 0 1px, transparent 1px 26px);
|
|
}
|
|
|
|
/* MODULLISTE */
|
|
:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .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, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe, .t-kachel, .tperson, .tl) {
|
|
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, .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, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe, .t-kachel, .tperson, .tl)::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, .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, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe, .t-kachel, .tperson, .tl)::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, .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, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe, .t-kachel, .tperson, .tl) {
|
|
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, .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, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe, .t-kachel, .tperson, .tl) {
|
|
filter: none; border: 1px solid CanvasText;
|
|
}
|
|
/* MODULLISTE */
|
|
:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .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, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe, .t-kachel, .tperson, .tl)::after {
|
|
display: none;
|
|
}
|
|
/* MODULLISTE */
|
|
:is(.eintrag-karte, .call, .chat, .datei, .ablage, .zahlkarte, .regel, .zustand, .ki-kasten, .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, .gruppe[data-gruppe], .kopf-zeile, .k-kopf, .steckbrief, .k-anlasskarte, .k-anlasskachel, .k-raster, .entscheidung, .liste-kachel, fieldset.gruppe, .t-kachel, .tperson, .tl)::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; }
|
|
}
|