DogFatherGitandClaude Opus 5
7673c12136
Filipe: "jede kiste soll seine eigene farbe haben. und die kacheln sollen viel spezieller, viel spezieller sein." BEIM ERSTEN MAL HATTE ICH ABGELEHNT, und das war zu bequem. Mein Einwand stimmte zwar -- ein Versuch mit frei gewaehlten Farben ergab Paare mit 1,4 Grad Abstand, also praktisch dieselbe Farbe -- aber daraus "geht nicht" zu machen, war falsch. Es geht, man muss nur rechnen. Der Denkfehler war die Annahme, alle 17 muessten sich voneinander unterscheiden. Das Auge vergleicht aber nur, was NEBENEINANDER liegt. Also: 1. 17 Toene, gleichmaessig um den Farbkreis (je 21 Grad), gerechnet in OKLCH -- dort sind gleiche Abstaende auch fuer das Auge gleich. Helligkeit und Farbstaerke konstant, damit keine sich vordraengt. Wo die Farbstaerke den darstellbaren Bereich verliesse (Gelb und Gruen frueher als der Rest), wird sie gesenkt, bis sie hineinpasst. 2. Die ZUORDNUNG ist eine Suche ueber die tatsaechlichen Nachbarschaften im Raster (nebeneinander UND untereinander). Gesucht: die Anordnung mit dem groesstmoeglichen kleinsten Nachbarabstand. Ergebnis: mindestens 105,9 Grad zwischen allen Nachbarn. 3. Unter allen Anordnungen, die eine harte Untergrenze schaffen, gewinnt die passendste: LIVE rot, Technik gelb, Reports gruen, Personen rot-gold, Schutz stahlblau. Steht als tools/kachel-farben.mjs im Repo, mit festem Zufallsstartwert -- derselbe Lauf ergibt dieselben Farben. Wer Kacheln umsortiert, aendert die Nachbarschaften und muss es neu laufen lassen; das steht auch in start.js. Geprueft: Helligkeitsband, Farbstaerke und Kontrast bestehen fuer alle siebzehn gegen genau diesen Hintergrund. VIEL SPEZIELLER -- das WASSERZEICHEN: Jede Kachel traegt ihr eigenes Zeichen noch einmal, riesig, angeschnitten und fast unsichtbar (7 % Deckung) in der Ecke. Das ist der Grund, warum siebzehn Kacheln nicht mehr wie siebzehn Kaesten aussehen: Jede bekommt eine eigene grosse Form, ohne dass ein einziges zusaetzliches Bild geladen wird -- es ist derselbe Pfad, nur groesser. Bewusst so schwach, dass man es nicht liest, sondern nur spuert. Beim Ueberfahren wird es etwas deutlicher und wandert zwei Pixel. Dazu: Zeichenfeld 46 auf 52 px mit farbigem Schein darunter, Name auf 1,06 rem, mehr Polsterung. Alles mit prefers-reduced-motion abgesichert. 44 Pruefungen. Neu: dass jede Kachel eine EIGENE Farbe hat (17 Farben auf 17 Kacheln, gemessen an der berechneten Strichfarbe) und dass das Wasserzeichen da und schwach genug ist. Co-Authored-By: Claude Opus 5 <[email protected]>
611 lines
24 KiB
CSS
611 lines
24 KiB
CSS
/* ===================================================================
|
|
Startseite nach dem Anmelden. Baut auf den Farben und Bausteinen von
|
|
gate.css auf, damit beides wie eine Anwendung wirkt und nicht wie zwei
|
|
verschiedene Seiten.
|
|
=================================================================== */
|
|
|
|
/* Grundschrift und Grundfarbe stehen in gate.css auf `body.gate` und
|
|
greifen hier deshalb NICHT. Ohne diese Wiederholung fällt die Seite auf
|
|
die Browservorgaben zurück: schwarze Serifenschrift auf dunklem Grund,
|
|
praktisch unlesbar. */
|
|
body.start {
|
|
display: block;
|
|
min-height: 100svh;
|
|
margin: 0;
|
|
padding: 0;
|
|
color: var(--text);
|
|
font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
|
|
font-size: 16px;
|
|
line-height: 1.55;
|
|
letter-spacing: .01em;
|
|
background:
|
|
radial-gradient(120% 80% at 12% -10%, rgba(63, 189, 245, .10), transparent 58%),
|
|
radial-gradient(100% 70% at 92% 8%, rgba(138, 118, 255, .10), transparent 60%),
|
|
var(--tinte);
|
|
}
|
|
|
|
/* ---------- Kopfleiste ------------------------------------------------ */
|
|
|
|
.kopfleiste {
|
|
position: sticky; top: 0; z-index: 5;
|
|
display: flex; align-items: center; justify-content: space-between; gap: 16px;
|
|
padding: 14px clamp(16px, 4vw, 40px);
|
|
background: rgba(6, 9, 16, .82);
|
|
backdrop-filter: blur(18px);
|
|
-webkit-backdrop-filter: blur(18px);
|
|
border-bottom: 1px solid var(--rand);
|
|
}
|
|
|
|
/* Damit in einer Flex-Zeile ueberhaupt etwas schrumpfen KANN, braucht es
|
|
min-width: 0. Ohne diese eine Zeile behielt jedes Teil seine volle
|
|
Wunschbreite -- Zurueck (118) + Marke (141) + rechte Gruppe (297)
|
|
ergaben 556 px auf einem 390 px breiten Handy. Die Kopfleiste schob
|
|
214 px aus dem Bild und der Abmelden-Knopf war dort nicht mehr zu
|
|
erreichen. Auf JEDER Seite, seit es die Kopfleiste gibt; aufgefallen
|
|
erst beim Messen, weil man am Rechner nie danebengreift. */
|
|
.kopfleiste > * { min-width: 0; }
|
|
|
|
.kopfleiste .marke {
|
|
margin: 0; font-size: .72rem;
|
|
/* Die Marke gibt als Erstes nach: Ihr Inhalt steht direkt darunter
|
|
noch einmal als Ueberschrift, der Abmelden-Knopf dagegen nirgends. */
|
|
flex: 1 1 auto;
|
|
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
|
}
|
|
|
|
/* Zurück-Knopf. Steht ganz links, weil dort jeder ihn erwartet -- gleiche
|
|
Stelle wie im Browser. Auf der Startseite gibt es ihn gar nicht: Dort
|
|
ist kein "davor", und ein Knopf, der nichts tut, ist schlimmer als
|
|
keiner. Auf den übrigen Seiten entscheidet kopf.js, ob er erscheint. */
|
|
/* Entwurf "Neon-Kante": Der senkrechte Lichtstrich links ist dasselbe
|
|
Motiv wie die Kante der Anmelde-Tafel (.tafel__kante in gate.css).
|
|
Dadurch wirkt der Workspace wie ein Stück und nicht wie zusammen-
|
|
gesetzte Teile. */
|
|
.zurueck-knopf {
|
|
position: relative;
|
|
flex: 0 0 auto;
|
|
display: inline-flex; align-items: center; gap: 10px;
|
|
padding: 9px 18px 9px 17px;
|
|
border: 0;
|
|
/* Links flach, rechts rund: Die gerade Kante gehört dem Lichtstrich,
|
|
nach rechts läuft der Knopf weich aus. */
|
|
border-radius: 4px 999px 999px 4px;
|
|
background: linear-gradient(100deg,
|
|
rgba(63, 189, 245, .10), rgba(138, 118, 255, .05) 60%, transparent);
|
|
color: var(--text-leise);
|
|
font: inherit; font-size: .84rem; font-weight: 600;
|
|
cursor: pointer; white-space: nowrap;
|
|
transition: color var(--tempo), background var(--tempo);
|
|
}
|
|
|
|
/* Der Lichtstrich. Ruht etwas kürzer als der Knopf und wächst beim
|
|
Überfahren auf volle Höhe -- die Bewegung ersetzt jedes Aufblitzen. */
|
|
.zurueck-knopf::before {
|
|
content: "";
|
|
position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px;
|
|
border-radius: 2px;
|
|
background: linear-gradient(180deg, var(--akzent), var(--violett));
|
|
box-shadow: 0 0 8px -1px rgba(63, 189, 245, .55);
|
|
transition: top var(--tempo), bottom var(--tempo), box-shadow var(--tempo);
|
|
}
|
|
|
|
.zurueck-knopf__pfeil {
|
|
width: 15px; height: 15px; flex: 0 0 auto;
|
|
fill: none; stroke: currentColor;
|
|
stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
|
|
transition: transform var(--tempo);
|
|
}
|
|
|
|
.zurueck-knopf:hover {
|
|
color: #fff;
|
|
background: linear-gradient(100deg,
|
|
rgba(63, 189, 245, .18), rgba(138, 118, 255, .09) 60%, transparent);
|
|
}
|
|
.zurueck-knopf:hover::before {
|
|
top: 0; bottom: 0;
|
|
box-shadow: 0 0 14px 0 rgba(63, 189, 245, .75);
|
|
}
|
|
/* Der Pfeil rückt nach links -- sagt die Richtung ohne zusätzlichen Text. */
|
|
.zurueck-knopf:hover .zurueck-knopf__pfeil { transform: translateX(-3px); }
|
|
|
|
.zurueck-knopf:active { transform: translateY(1px); }
|
|
|
|
.zurueck-knopf:focus-visible {
|
|
outline: 2px solid var(--akzent);
|
|
outline-offset: 3px;
|
|
border-radius: 4px 999px 999px 4px;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.zurueck-knopf, .zurueck-knopf::before, .zurueck-knopf__pfeil { transition: none; }
|
|
.zurueck-knopf:hover .zurueck-knopf__pfeil { transform: none; }
|
|
}
|
|
|
|
.kopfleiste__rechts { display: flex; align-items: center; gap: 12px; flex: 0 1 auto; min-width: 0; }
|
|
.kopfleiste__rechts > * { flex: 0 0 auto; }
|
|
|
|
.wer {
|
|
font-size: .86rem; color: var(--text-leise);
|
|
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw;
|
|
/* Der Name darf kuerzer werden -- der Knopf daneben nicht. */
|
|
flex: 0 1 auto; min-width: 0;
|
|
}
|
|
|
|
|
|
/* ---------- Inhalt ---------------------------------------------------- */
|
|
|
|
.inhalt {
|
|
max-width: 880px;
|
|
margin: 0 auto;
|
|
padding: clamp(28px, 5vw, 56px) clamp(16px, 4vw, 40px) 64px;
|
|
}
|
|
|
|
/* Diese vier standen bis zum 31.08.2026 in aufgaben.css -- also in einer
|
|
Datei, die eine neue Seite gar nicht laden muss. Genau dadurch war das
|
|
Dashboard beim ersten Aufbau schmal und ohne Kopfzeilen-Layout: die
|
|
Klassen im HTML gab es, die Regeln dazu nicht. Derselbe Fehler ist
|
|
vorher schon zweimal passiert (.knopf-still, .schalter). Was auf
|
|
mehreren Seiten benutzt wird, gehoert hierher, wo jede Seite es hat. */
|
|
.inhalt--breit { max-width: 1240px; }
|
|
|
|
.zurueck { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
|
|
.zurueck:hover { border-bottom-color: currentColor; }
|
|
|
|
.kopf-zeile {
|
|
display: flex; align-items: flex-end; justify-content: space-between;
|
|
gap: 20px; flex-wrap: wrap; margin-bottom: 24px;
|
|
}
|
|
.kopf-zeile .titel { margin: 0; font-size: clamp(1.4rem, 2.2vw, 1.85rem); }
|
|
|
|
.leise { color: var(--text-still); font-weight: 400; }
|
|
|
|
/* ---------- Auf- und Zuklappen ------------------------------------------
|
|
Lange Listen (Protokoll, Verlauf) stehen zugeklappt da und zeigen nur
|
|
die neuesten Zeilen. Der Pfeil dreht sich beim Aufklappen -- er zeigt
|
|
die Richtung, der Text daneben sagt, was der Knopf TUT.
|
|
|
|
Steht hier und nicht in einer Seiten-Datei: Er wird an mehreren
|
|
Stellen gebraucht, und genau so sind schon dreimal Regeln dort
|
|
gelandet, wo eine Seite sie gar nicht laedt. */
|
|
|
|
.klapp-kopf {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
gap: 12px; flex-wrap: wrap; margin-bottom: 8px;
|
|
}
|
|
.klapp-kopf > .feldschild, .klapp-kopf > .block__titel { margin: 0; }
|
|
|
|
.klapp-pfeil {
|
|
width: 14px; height: 14px; flex: 0 0 auto;
|
|
fill: none; stroke: currentColor;
|
|
stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
|
|
transition: transform var(--tempo);
|
|
}
|
|
[aria-expanded="true"] > .klapp-pfeil { transform: rotate(180deg); }
|
|
|
|
/* Zugeklappt bleiben die vier neuesten Zeilen stehen. Bewusst ueber CSS
|
|
statt ueber das Entfernen von Zeilen: Das Aufklappen braucht dann
|
|
weder einen neuen Aufbau noch eine zweite Abfrage. */
|
|
[data-klapp="zu"] > *:nth-child(n+5) { display: none; }
|
|
|
|
.willkommen { margin-bottom: 38px; }
|
|
.willkommen .titel { margin-bottom: 6px; }
|
|
|
|
/* ---------- Zahlen ---------------------------------------------------- */
|
|
|
|
.zahlen-block { margin-bottom: 34px; }
|
|
|
|
.zahlen {
|
|
list-style: none; margin: 0; padding: 0;
|
|
display: grid; gap: 10px;
|
|
grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
|
|
}
|
|
|
|
.zahl {
|
|
padding: 14px 16px;
|
|
background: rgba(255, 255, 255, .03);
|
|
border: 1px solid var(--rand);
|
|
border-radius: var(--radius-klein);
|
|
}
|
|
.zahl__wert { display: block; font-size: 1.7rem; font-weight: 700; line-height: 1.1; }
|
|
.zahl__name { display: block; margin-top: 2px; font-size: .78rem; color: var(--text-still); }
|
|
|
|
/* Nur wenn wirklich etwas überfällig ist, wird die Kachel hervorgehoben --
|
|
sonst stumpft die Farbe ab und man übersieht sie im Ernstfall. */
|
|
.zahl[data-warn="ja"] { border-color: rgba(255, 154, 162, .42); background: rgba(255, 154, 162, .07); }
|
|
.zahl[data-warn="ja"] .zahl__wert { color: var(--warn); }
|
|
|
|
/* ---------- Bereiche: Gruppen und Kacheln --------------------------------
|
|
|
|
Vorher: siebzehn gleiche Rechtecke mit "ÖFFNEN" darauf. Wenn alles
|
|
gleich aussieht, ist alles gleich wichtig -- also nichts.
|
|
|
|
Drei Dinge tragen jetzt die Gestaltung:
|
|
|
|
1. Die Kachel ist ruhig, bis man sie ansieht. Der Farbton sitzt im
|
|
Zeichen und in einer schmalen Kante -- nicht als Fläche. Siebzehn
|
|
farbige Flächen wären ein Bonbonglas, kein Werkzeug.
|
|
|
|
2. Beim Überfahren geht ein sehr weicher Schimmer aus der oberen
|
|
linken Ecke an. Kein Blitzen, kein Springen: Alphawerte unter 0.25,
|
|
Bewegung unter einem Pixel.
|
|
|
|
3. Der Einlauf ist gestaffelt -- genau EINE Bewegung beim Aufbau,
|
|
danach Ruhe. Bei "weniger Bewegung" fällt sie ersatzlos weg.
|
|
|
|
Die acht Farbtöne sind gegen genau diesen Hintergrund gerechnet:
|
|
Helligkeitsband, Farbstärke, Abstand bei Farbfehlsichtigkeit
|
|
(schlechtestes Paar dE 8.4), Normalsicht-Abstand (19.3) und Kontrast
|
|
-- alle Prüfungen bestanden. Warum acht und nicht siebzehn: Siebzehn
|
|
unterscheidbare Farben gibt es nicht; ein Versuch mit einer eigenen
|
|
Farbe je Kachel ergab Paare mit Abstand 1.4, also praktisch dieselbe
|
|
Farbe. Sie stützen nur -- WAS eine Kachel ist, sagen Zeichen und Name.
|
|
------------------------------------------------------------------------- */
|
|
|
|
.gruppe { margin-bottom: 34px; }
|
|
.gruppe:last-child { margin-bottom: 0; }
|
|
|
|
.gruppe__kopf {
|
|
position: relative;
|
|
display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
|
|
margin-bottom: 14px; padding-bottom: 10px;
|
|
/* Die Trennlinie läuft nach rechts aus, statt hart abzubrechen --
|
|
eine durchgezogene Linie über die ganze Breite zerschneidet die
|
|
Seite, eine auslaufende gliedert sie nur. */
|
|
border-bottom: 1px solid transparent;
|
|
border-image: linear-gradient(90deg, var(--rand-hell), transparent 70%) 1;
|
|
}
|
|
.gruppe__name {
|
|
margin: 0; font-size: .76rem; font-weight: 700;
|
|
letter-spacing: .1em; text-transform: uppercase; color: var(--text-leise);
|
|
}
|
|
.gruppe__unter { font-size: .78rem; color: var(--text-still); }
|
|
|
|
.kacheln {
|
|
list-style: none; margin: 0; padding: 0;
|
|
display: grid; gap: 12px;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
/* Siebzehn eigene Töne -- einer je Kachel. Nicht gewählt, sondern
|
|
gerechnet: gleichmäßig um den Farbkreis verteilt, in OKLCH bei
|
|
konstanter Helligkeit und Farbstärke, damit keine sich vordrängt.
|
|
Erzeugt von tools/kachel-farben.mjs; dort steht auch, warum.
|
|
|
|
Die ZUORDNUNG ist ebenfalls gerechnet. Das Auge vergleicht nur, was
|
|
NEBENEINANDER liegt -- gesucht wurde deshalb die Anordnung mit dem
|
|
größtmöglichen kleinsten Abstand zweier Nachbarn im Raster. Ergebnis:
|
|
mindestens 105,9 Grad zwischen allen Nachbarn. Zum Vergleich: Der
|
|
erste Versuch mit frei gewählten Farben hatte Paare bei 1,4 Grad.
|
|
|
|
Unter allen Anordnungen, die das schaffen, wurde die passendste
|
|
genommen -- LIVE rot, Technik gelb, Reports grün, Personen rot-gold.
|
|
|
|
Geprüft gegen genau diesen Hintergrund: Helligkeitsband, Farbstärke
|
|
und Kontrast bestehen für alle siebzehn. */
|
|
.kachel[data-ton="1"] { --ton: #3e95e7; } /* 250° */
|
|
.kachel[data-ton="2"] { --ton: #7089ea; } /* 271° */
|
|
.kachel[data-ton="3"] { --ton: #947de2; } /* 292° */
|
|
.kachel[data-ton="4"] { --ton: #b173d0; } /* 314° */
|
|
.kachel[data-ton="5"] { --ton: #c66ab5; } /* 335° */
|
|
.kachel[data-ton="6"] { --ton: #d56694; } /* 356° */
|
|
.kachel[data-ton="7"] { --ton: #dc666f; } /* 17° */
|
|
.kachel[data-ton="8"] { --ton: #db6c48; } /* 38° */
|
|
.kachel[data-ton="9"] { --ton: #d17717; } /* 59° */
|
|
.kachel[data-ton="10"] { --ton: #ba8610; } /* 81° */
|
|
.kachel[data-ton="11"] { --ton: #a29205; } /* 102° */
|
|
.kachel[data-ton="12"] { --ton: #809e23; } /* 123° */
|
|
.kachel[data-ton="13"] { --ton: #50a752; } /* 144° */
|
|
.kachel[data-ton="14"] { --ton: #07aa7c; } /* 165° */
|
|
.kachel[data-ton="15"] { --ton: #12a69b; } /* 186° */
|
|
.kachel[data-ton="16"] { --ton: #04a3b4; } /* 208° */
|
|
.kachel[data-ton="17"] { --ton: #059ece; } /* 229° */
|
|
|
|
.kachel {
|
|
--ton: var(--akzent);
|
|
/* Wo der Zeiger steht. Wird von start.js gesetzt; die Mitte ist der
|
|
Rückfallwert, damit ohne Zeiger nichts springt. */
|
|
--mx: 50%;
|
|
--my: 0%;
|
|
position: relative;
|
|
border-radius: 18px;
|
|
background:
|
|
linear-gradient(155deg,
|
|
color-mix(in srgb, var(--ton) 10%, transparent),
|
|
rgba(255, 255, 255, .022) 48%);
|
|
border: 1px solid var(--rand);
|
|
/* Die feine helle Linie an der Oberkante. Ein Pixel, kaum sichtbar --
|
|
aber die Kachel wirkt dadurch von oben beleuchtet statt aufgeklebt.
|
|
Das ist der Unterschied zwischen "Kasten" und "Objekt". */
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055);
|
|
overflow: hidden;
|
|
transition: border-color var(--tempo), transform var(--tempo), box-shadow var(--tempo);
|
|
}
|
|
.kachel[data-gross="ja"] { grid-column: span 2; }
|
|
|
|
/* Die farbige Kante links. Sie ist das Einzige, was den Ton kräftig
|
|
zeigt -- drei Pixel reichen, um eine Kachel wiederzuerkennen. */
|
|
.kachel::before {
|
|
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
|
|
background: linear-gradient(180deg, var(--ton), transparent 92%);
|
|
opacity: .55;
|
|
transition: opacity var(--tempo), width var(--tempo);
|
|
}
|
|
|
|
/* Das Licht. Es liegt schwach auf der Kachel und FOLGT beim Überfahren
|
|
dem Zeiger -- das ist die Kleinigkeit, die man nicht sieht, sondern
|
|
erst beim Benutzen merkt. Kein Blinken, keine Bewegung des Inhalts:
|
|
Es wird nur an einer anderen Stelle heller.
|
|
|
|
Ruhend sitzt es in der oberen linken Ecke (--my: 0%), damit die
|
|
Kacheln auch ohne Zeiger von einer Seite beleuchtet wirken. */
|
|
.kachel::after {
|
|
content: ""; position: absolute; inset: 0; pointer-events: none;
|
|
background: radial-gradient(130% 150% at var(--mx) var(--my),
|
|
color-mix(in srgb, var(--ton) 20%, transparent), transparent 60%);
|
|
opacity: .38;
|
|
transition: opacity var(--tempo);
|
|
}
|
|
|
|
.kachel:hover {
|
|
border-color: color-mix(in srgb, var(--ton) 45%, var(--rand));
|
|
transform: translateY(-2px);
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255, 255, 255, .09),
|
|
0 10px 26px -14px color-mix(in srgb, var(--ton) 55%, transparent);
|
|
}
|
|
.kachel:hover::before { opacity: 1; width: 4px; }
|
|
.kachel:hover::after { opacity: 1; }
|
|
.kachel:has(:focus-visible) { border-color: var(--ton); }
|
|
|
|
.kachel__link {
|
|
position: relative; z-index: 1;
|
|
display: flex; align-items: center; gap: 15px;
|
|
padding: 21px 20px 21px 23px;
|
|
color: inherit; text-decoration: none;
|
|
}
|
|
|
|
/* Das Wasserzeichen. Dasselbe Zeichen wie im Feld links, aber riesig,
|
|
angeschnitten und fast unsichtbar in der rechten unteren Ecke.
|
|
|
|
Es ist der Grund, warum siebzehn Kacheln nicht mehr wie siebzehn
|
|
Kästen aussehen: Jede bekommt eine eigene große Form, ohne dass ein
|
|
einziges zusätzliches Bild geladen wird. Bewusst so schwach, dass man
|
|
es nicht liest, sondern nur spürt -- eine Kachel soll ihren Namen
|
|
tragen, nicht ihr Zeichen. */
|
|
.kachel__wasserzeichen {
|
|
position: absolute; right: -14px; bottom: -26px;
|
|
width: 132px; height: 132px;
|
|
pointer-events: none; z-index: 0;
|
|
opacity: .07;
|
|
transform: rotate(-8deg);
|
|
transition: opacity var(--tempo), transform var(--tempo);
|
|
}
|
|
.kachel__wasserzeichen svg {
|
|
width: 100%; height: 100%;
|
|
fill: none; stroke: var(--ton);
|
|
stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round;
|
|
}
|
|
.kachel:hover .kachel__wasserzeichen {
|
|
opacity: .13;
|
|
transform: rotate(-8deg) translate(-4px, -4px) scale(1.04);
|
|
}
|
|
.kachel[data-gross="ja"] .kachel__wasserzeichen {
|
|
width: 168px; height: 168px; right: -18px; bottom: -34px;
|
|
}
|
|
.kachel__link:focus-visible {
|
|
outline: 2px solid var(--ton); outline-offset: -4px; border-radius: 15px;
|
|
}
|
|
|
|
/* Das Zeichen sitzt in einem eigenen Feld -- dadurch bekommt der Ton
|
|
eine Fläche, ohne dass die ganze Kachel farbig wird. Der Verlauf und
|
|
der innere Lichtrand darin lassen es geprägt statt gemalt wirken. */
|
|
.kachel__zeichen {
|
|
position: relative; z-index: 1;
|
|
flex: none;
|
|
display: grid; place-items: center;
|
|
width: 52px; height: 52px; border-radius: 15px;
|
|
background:
|
|
linear-gradient(160deg,
|
|
color-mix(in srgb, var(--ton) 30%, transparent),
|
|
color-mix(in srgb, var(--ton) 10%, transparent));
|
|
border: 1px solid color-mix(in srgb, var(--ton) 32%, transparent);
|
|
/* Lichtkante innen oben, weicher Schein nach aussen -- dadurch wirkt
|
|
das Feld geprägt statt gemalt. Der Schein bleibt schwach; ein
|
|
leuchtender Kasten wäre in einer dunklen Oberfläche eine Lampe. */
|
|
box-shadow:
|
|
inset 0 1px 0 color-mix(in srgb, var(--ton) 38%, transparent),
|
|
0 4px 14px -8px color-mix(in srgb, var(--ton) 60%, transparent);
|
|
transition: background var(--tempo), border-color var(--tempo),
|
|
transform var(--tempo), box-shadow var(--tempo);
|
|
}
|
|
.kachel:hover .kachel__zeichen {
|
|
background:
|
|
linear-gradient(160deg,
|
|
color-mix(in srgb, var(--ton) 46%, transparent),
|
|
color-mix(in srgb, var(--ton) 16%, transparent));
|
|
border-color: color-mix(in srgb, var(--ton) 62%, transparent);
|
|
transform: scale(1.05);
|
|
box-shadow:
|
|
inset 0 1px 0 color-mix(in srgb, var(--ton) 55%, transparent),
|
|
0 6px 20px -8px color-mix(in srgb, var(--ton) 85%, transparent);
|
|
}
|
|
.kachel[data-gross="ja"] .kachel__zeichen { width: 62px; height: 62px; border-radius: 18px; }
|
|
|
|
.kachel__svg {
|
|
width: 25px; height: 25px;
|
|
fill: none; stroke: var(--ton);
|
|
stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
|
|
}
|
|
.kachel[data-gross="ja"] .kachel__svg { width: 31px; height: 31px; }
|
|
|
|
.kachel__text { position: relative; z-index: 1; display: grid; gap: 3px; min-width: 0; }
|
|
.kachel__name {
|
|
font-size: 1.06rem; font-weight: 650; letter-spacing: -.014em; line-height: 1.25;
|
|
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
|
}
|
|
.kachel[data-gross="ja"] .kachel__name { font-size: 1.24rem; }
|
|
.kachel__unter {
|
|
font-size: .78rem; color: var(--text-still); line-height: 1.3;
|
|
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
|
}
|
|
.kachel[data-gross="ja"] .kachel__unter { font-size: .83rem; }
|
|
|
|
/* Die Zahl auf der Kachel. Sie ersetzt den Pfeil, wenn dort Arbeit
|
|
liegt -- eine Kachel, die "3" sagt, ist zehnmal mehr wert als eine,
|
|
die "öffnen" sagt. */
|
|
.kachel__zahl {
|
|
position: relative; z-index: 1;
|
|
flex: none; margin-left: auto;
|
|
min-width: 32px; padding: 5px 11px;
|
|
text-align: center; font-size: .9rem; font-weight: 700;
|
|
font-variant-numeric: tabular-nums;
|
|
color: var(--ton);
|
|
background: color-mix(in srgb, var(--ton) 15%, transparent);
|
|
border: 1px solid color-mix(in srgb, var(--ton) 36%, transparent);
|
|
box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ton) 26%, transparent);
|
|
border-radius: 999px;
|
|
transition: background var(--tempo), border-color var(--tempo);
|
|
}
|
|
.kachel:hover .kachel__zahl {
|
|
background: color-mix(in srgb, var(--ton) 24%, transparent);
|
|
border-color: color-mix(in srgb, var(--ton) 55%, transparent);
|
|
}
|
|
.kachel__zahl[data-warn="ja"] {
|
|
color: var(--warn);
|
|
background: rgba(255, 154, 162, .13);
|
|
border-color: rgba(255, 154, 162, .44);
|
|
box-shadow: inset 0 1px 0 rgba(255, 154, 162, .28);
|
|
}
|
|
.kachel:hover .kachel__zahl[data-warn="ja"] {
|
|
background: rgba(255, 154, 162, .2); border-color: rgba(255, 154, 162, .62);
|
|
}
|
|
|
|
.kachel__pfeil {
|
|
position: relative; z-index: 1;
|
|
flex: none; margin-left: auto;
|
|
color: var(--text-still); font-size: 1rem;
|
|
transition: color var(--tempo), transform var(--tempo);
|
|
}
|
|
.kachel:hover .kachel__pfeil { color: var(--ton); transform: translateX(4px); }
|
|
|
|
/* Gestaffelter Einlauf. Die Verzögerung kommt aus --nr, das start.js je
|
|
Kachel setzt. Steht in einer no-preference-Abfrage, damit bei
|
|
"weniger Bewegung" gar keine Animation entsteht -- nicht nur eine
|
|
ohne Dauer. */
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.kachel {
|
|
animation: kachel-ein .38s cubic-bezier(.32, 0, .2, 1) backwards;
|
|
animation-delay: calc(var(--nr, 0) * 26ms);
|
|
}
|
|
@keyframes kachel-ein {
|
|
from { opacity: 0; transform: translateY(6px); }
|
|
to { opacity: 1; transform: none; }
|
|
}
|
|
}
|
|
|
|
.zahlen-leer {
|
|
margin: 0; padding: 15px 17px;
|
|
font-size: .88rem; color: var(--text-still);
|
|
border: 1px dashed var(--rand); border-radius: var(--radius-klein);
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
.kachel[data-gross="ja"] { grid-column: span 2; }
|
|
}
|
|
@media (max-width: 560px) {
|
|
.kacheln { grid-template-columns: 1fr; }
|
|
.kachel[data-gross="ja"] { grid-column: span 1; }
|
|
.gruppe__kopf { gap: 4px; }
|
|
.gruppe__unter { flex-basis: 100%; }
|
|
}
|
|
|
|
.inhalt .fuss { margin-top: 40px; text-align: left; }
|
|
|
|
@media (max-width: 520px) {
|
|
.kopfleiste { padding: 12px 16px; gap: 10px; }
|
|
/* Die Marke wich zwar zurueck, nahm aber immer noch so viel Platz,
|
|
dass vom Namen nur noch drei Pixel uebrig blieben. Auf dem Handy
|
|
verschwindet sie deshalb -- genau derselbe Text steht zwei Zeilen
|
|
tiefer als Ueberschrift, der Name des Angemeldeten dagegen
|
|
nirgends sonst.
|
|
|
|
Aber nur dort, wo der Zurueck-Knopf sichtbar ist: Auf der
|
|
Startseite gibt es ihn nicht, dort waere die linke Haelfte sonst
|
|
leer und die Leiste saehe kaputt aus. */
|
|
.kopfleiste:has(.zurueck-knopf:not([hidden])) .marke { display: none; }
|
|
.kopfleiste__rechts { margin-left: auto; }
|
|
.wer { max-width: none; }
|
|
/* Der Pfeil allein sagt "zurueck" -- das Wort daneben kostet auf dem
|
|
Handy 65 px, die dem Abmelden-Knopf fehlen. Vorlesende Programme
|
|
verlieren nichts: Der Text bleibt im Dokument und wird nur
|
|
unsichtbar gerechnet. */
|
|
.zurueck-knopf { padding: 9px 12px 9px 11px; }
|
|
.zurueck-knopf__text {
|
|
position: absolute; width: 1px; height: 1px;
|
|
margin: -1px; padding: 0; overflow: hidden;
|
|
clip-path: inset(50%); white-space: nowrap;
|
|
}
|
|
.zurueck-knopf { gap: 0; }
|
|
}
|
|
|
|
/* Zurueckhaltender Zweitknopf. Gehoert bewusst hierher und nicht in eine
|
|
einzelne Seite: Er wird ueberall gebraucht, und als Seiten-CSS fehlte er
|
|
prompt dort, wo die Datei nicht geladen war -- dann standen nackte
|
|
Systemknoepfe in der Oberflaeche. */
|
|
|
|
/* ---------- Was ist dran ------------------------------------------------
|
|
Steht vor den Zahlen. Zahlen sagen, WIE VIEL anliegt -- diese Liste
|
|
sagt, WAS zu tun ist. Nur drei Stufen, und nur die oberste ist farbig:
|
|
Waere alles hervorgehoben, waere nichts hervorgehoben. */
|
|
/* Die Seite ist breit, damit die Kacheln Platz haben. Eine Zeile Text
|
|
ueber 1240 px zu ziehen macht sie aber nicht lesbarer, sondern
|
|
anstrengender -- Hinweise und Begruessung behalten deshalb ihr Mass. */
|
|
.willkommen, .dran__liste, .inhalt .fuss { max-width: 940px; }
|
|
|
|
.dran { margin-bottom: 30px; }
|
|
.dran__liste { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
|
|
|
|
.dran__punkt {
|
|
position: relative;
|
|
border: 1px solid var(--rand);
|
|
border-radius: var(--radius-klein);
|
|
background: rgba(255, 255, 255, .028);
|
|
transition: border-color .18s ease, background .18s ease;
|
|
}
|
|
.dran__punkt::before {
|
|
content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 2px;
|
|
border-radius: 0 2px 2px 0;
|
|
background: var(--rand);
|
|
}
|
|
.dran__punkt[data-stufe="warnung"] {
|
|
border-color: rgba(255, 154, 162, .3);
|
|
background: rgba(255, 154, 162, .055);
|
|
}
|
|
.dran__punkt[data-stufe="warnung"]::before { background: var(--warn); }
|
|
.dran__punkt[data-stufe="offen"]::before { background: var(--akzent); opacity: .7; }
|
|
.dran__punkt[data-stufe="ruhig"] { opacity: .78; }
|
|
.dran__punkt:hover { border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .05); }
|
|
.dran__punkt[data-stufe="ruhig"]:hover { opacity: 1; }
|
|
|
|
.dran__link {
|
|
display: flex; align-items: center; justify-content: space-between; gap: 14px;
|
|
padding: 12px 15px 12px 18px;
|
|
color: var(--text); text-decoration: none; font-size: .9rem;
|
|
}
|
|
.dran__punkt[data-stufe="warnung"] .dran__text { font-weight: 600; }
|
|
.dran__pfeil {
|
|
color: var(--text-still); font-size: .95rem;
|
|
transition: transform .18s ease, color .18s ease;
|
|
}
|
|
.dran__link:hover .dran__pfeil { color: var(--akzent); transform: translateX(3px); }
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.kachel__wasserzeichen, .kachel__zeichen { transition: none; }
|
|
.kachel:hover .kachel__wasserzeichen { transform: rotate(-8deg); }
|
|
.kachel:hover .kachel__zeichen { transform: none; }
|
|
|
|
.dran__punkt, .dran__pfeil { transition: none; }
|
|
.dran__link:hover .dran__pfeil { transform: none; }
|
|
}
|