DogFatherGitandClaude Opus 5
bd21062d29
Filipe: "die seiten sollen bei jedem aussehen wie bei mir, bei patrick
zumbeispiel sieht sehr viel noch nach dem alten muster aus ... alles was
sie sehen soll dan auch nach der neuen struktur aufgebaut sein."
GEMESSEN STATT GESCHAUT. Das "alte Muster" ist praezise benennbar: runde
Ecken (border-radius 18px) statt der gefraesten Fase (clip-path polygon
mit 18px). Damit laesst es sich SUCHEN, nicht nur ahnen -- ein Durchlauf
ueber alle 18 Seiten in allen fuenf Rollen, der jedes Element ab
260x90 px meldet, das eine eigene Flaeche und runde Ecken hat.
vorher 5 Klassen im alten Muster, 90 Seitenaufrufe
jetzt 0 Klassen
DER GROESSTE EINZELPOSTEN war der Seitenkopf. `.kopf-zeile` trug runde
Ecken -- auf VIERZEHN Seiten das erste, was man sieht, direkt neben
Kacheln mit Fase. Dazu `.k-kopf` (Kalender), `.steckbrief`,
`.k-anlasskarte`, `.k-raster`, `.entscheidung` und die
Formulargruppen auf der Profilseite.
ZWEI SELEKTOREN MIT BEDACHT, weil derselbe Klassenname zweierlei meint:
`.gruppe[data-gruppe]` nur die Reiter auf der Calls-Seite. Auf der
Startseite heissen die Bereichsgruppen ebenso,
sind aber BEHAELTER fuer Kacheln und duerfen
selbst keine sein. `data-gruppe` setzt
ausschliesslich calls.js -- nachgeprueft.
`fieldset.gruppe` nur die Formularbloecke auf profil.html. Die
Startseite baut `section.gruppe`. Das Element
unterscheidet sie sauber, die Klasse nicht.
BEINAHE FALSCH GEMACHT: Ich war sicher, `.steckbrief` und
`.k-anlasskarte` staenden bereits in der Modulliste, und wollte
weitersuchen, warum die Regel bei ihnen nicht greift. Nachgesehen: Sie
standen gar nicht drin -- ich hatte sie mit `.k-listentag` und einer
Liste aus kopf.js verwechselt. Eine plausible Erinnerung ersetzt keinen
Blick in die Datei.
DIE MODULLISTE STEHT SIEBENMAL WORTGLEICH. Alle sieben ergaenzt;
pruef-css-klassen prueft "alle sieben Kopien sind Zeichen fuer Zeichen
gleich" und zaehlt jetzt 43 Klassen statt 36.
GEPRUEFT:
90 Seitenaufrufe (18 Seiten x 5 Rollen) -> 0 Bausteine im alten Muster
36 Seitenaufrufe auf 360/390/412 px -> 0 px waagerechter Ueberstand
pruef-css-klassen EXIT=0, pruef-start-ansicht EXIT=0 (140),
pruef-rollen EXIT=0 (97), pruef-abbrechen-optik EXIT=0 (27)
Die Handy-Messung gezielt selbst gefahren statt pruef-handy zu starten:
Die eine Frage, die diese Aenderung aufwirft, ist der Ueberstand -- in
40 Sekunden beantwortet statt in drei Minuten.
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, .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-raster, .entscheidung, fieldset.gruppe) {
|
|
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-raster, .entscheidung, fieldset.gruppe)::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-raster, .entscheidung, fieldset.gruppe)::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-raster, .entscheidung, fieldset.gruppe) {
|
|
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-raster, .entscheidung, fieldset.gruppe) {
|
|
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-raster, .entscheidung, fieldset.gruppe)::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-raster, .entscheidung, fieldset.gruppe)::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; }
|
|
}
|