DogFatherGitandClaude Opus 5
f701dae53e
Wunsch Filipe: "ich will das neben diesem kreis auch ein kleiner button
ist fuer den wecker von den aufgaben, oder quasi eine taetige meldung
einmal am tag zu aktivieren wenn noch aufgaben auf sind."
Ein Wecker-Knopf unter der Glocke, neben der Uhr. Eingeschaltet meldet
er sich einmal taeglich zur eingestellten Zeit -- aber nur, wenn
wirklich noch etwas offen ist. Der Satz nennt die Zahl und die
Ueberfaelligen: "3 Aufgaben sind noch offen / Davon eine ueberfaellig."
ALS EINZIGE ART MIT `vorgabe: false`, und das ist keine
Nachlaessigkeit. Alle anderen Benachrichtigungen antworten auf ein
Ereignis, das gerade passiert ist. Der Tagesruf kommt ungefragt zur
selben Zeit, ob es etwas Neues gibt oder nicht -- so etwas schaltet man
sich selbst ein, sonst ist es Werbung. Bei null offenen Aufgaben kommt
nichts: Eine taegliche Meldung "du hast nichts zu tun" ist der
schnellste Weg, dass man die naechste nicht mehr liest.
EIN FENSTER VON DREI STUNDEN. Der Takt laeuft alle fuenf Minuten; ein
einfaches "jetzt >= eingestellte Zeit" wuerde nach einem Serverausfall
den Ruf fuer neun Uhr um zwanzig Uhr zustellen. Wer eine Erinnerung an
einen vergangenen Tag bekommt, schaltet sie ab. Faellt der Tag aus, ist
das die ehrlichere Antwort.
VIER DINGE, DIE ERST DAS NACHMESSEN GEZEIGT HAT:
1. DER KNOPF VERSPRACH ETWAS, DAS ER NICHT HALTEN KONNTE. Chromium
meldet `Notification.permission === 'denied'` -- gemessen, nicht
vermutet. Der Knopf sah einladend aus ("Einmal am Tag melden…") und
sagte erst NACH dem Antippen ab. Ein Bedienelement, das den Grund
erst hinterher nennt, ist die schlechtere Haelfte einer
Fehlermeldung. Jetzt steht er im Titel, und der Knopf ist gedimmt.
2. EINE UHRZEIT IN DER RUHEZEIT WAERE EIN STILLES NICHTS. Der Server
laesst zwischen 22 und 7 Uhr nichts durch. Wer 23:00 einstellt,
bekaeme nie etwas und saehe nur einen Knopf auf "an". Jetzt steht
der Hinweis dort, wo man es einstellt -- mit den Grenzen VOM SERVER,
nicht mit hier getippten Zahlen.
3. `wert` UND `an` SIND ZWEI ENTSCHEIDUNGEN. Wer nur den Schalter
umlegt, schickt kein `wert` -- stumpf `req.body.wert` zu schreiben
haette bei jedem Aus- und Einschalten die Uhrzeit geloescht, und
beim naechsten Mal staende wieder neun Uhr da. Ein Datenverlust, den
niemand meldet, weil er wie eine Vorgabe aussieht. Genau dieser Weg
wird jetzt geprueft.
4. pruef-css-klassen HATTE ZWEIMAL RECHT. Der Stil lag in heim.css
(nur Startseite), die Zeichen entstehen aber in glocke.js (18
Seiten) -- auf 17 davon waere ein nackter Knopf gestanden. Und die
beiden neuen Schriftgroessen (10 und 11 px) haetten die Grundlinie
von 43 zu kleinen Stellen still auf 45 gehoben. Beides behoben:
Stil nach start.css, Schrift auf 12 px.
NEUE PRUEFUNG server/pruef-tagesruf.mjs, drei Schichten getrennt, weil
sie getrennt kaputtgehen: Oberflaeche im Browser, Schalten ueber die
Schnittstelle (aus der SEITE heraus, damit Sitzung und
Herkunftspruefung mitgehen), Zeitentscheidung als reine Rechnung. Die
Entscheidung wurde dafuer aus dem Rundgang herausgeloest -- dazwischen
steckend haette man zum Pruefen Datenbank und Push-Versand aufbauen
muessen, also haette man sie nicht geprueft.
Die Erwartung der ersten Schicht richtet sich nach der GEMESSENEN
Berechtigung statt sie vorauszusetzen: Erlaubt eine kuenftige
Chromium-Fassung Benachrichtigungen von sich aus, waere ein fest
verdrahtetes "muss blockiert sein" ein Fehlalarm ohne Fehler.
Gegenproben sind dabei: "99:99", "7:30" ohne fuehrende Null und ein
Wert an einer Art, die keinen kennt, muessen abgelehnt werden -- sonst
bewiese der Bereichstest nichts.
Der reservierte Platz waechst von 46 auf 104 px, damit der zweite Knopf
die Kachelreihe darunter nicht nach unten schiebt; das Zeitfeld schwebt
statt zu schieben. Beides derselbe Grund wie bei der Glocke: Ein
Sprung ist kein Schoenheitsfehler, sondern der Grund, warum man auf den
falschen Knopf drueckt.
Geprueft: pruef-tagesruf (neu, alles in Ordnung), pruef-push,
pruef-css-klassen, pruef-start-ansicht -- alle in Ordnung.
Co-Authored-By: Claude Opus 5 <[email protected]>
925 lines
44 KiB
CSS
925 lines
44 KiB
CSS
/* =====================================================================
|
|
heim.css — was NUR die Startseite braucht.
|
|
|
|
Herausgeloest aus start.css am 07.09.2026: Jene Datei wird von
|
|
dreizehn Seiten geladen und lief mit ueber 200 KB in die Grenze von
|
|
pruef-struktur. Die Begruessungskachel, die Uhr und die Glockenmulde
|
|
darin gibt es aber nur hier.
|
|
|
|
Wer etwas an der Startseite aendert, sucht ab jetzt zuerst in dieser
|
|
Datei -- und wer eine dieser Klassen auf einer ANDEREN Seite benutzen
|
|
will, muss diese Datei dort einbinden. pruef-css-klassen meldet es,
|
|
wenn er es vergisst.
|
|
===================================================================== */
|
|
|
|
/* =====================================================================
|
|
DIE BEGRÜSSUNGSKACHEL — mit Uhr und Glocke (07.09.2026)
|
|
|
|
Wunsch Filipe: "ich will dass diese kacheln da auch übertrieben geil
|
|
gemacht wird, wirklich seeeeeehr hochwertig mit einer runden
|
|
digitalen uhr rechts in der kachel ... und der benachrichtigungs
|
|
button soll auch von der leiste in diese kachel gesetzt werden."
|
|
|
|
---------------------------------------------------------------------
|
|
WARUM DIE UHR HIER RICHTIG IST UND NICHT NUR SCHÖN
|
|
|
|
Eine Uhr ist die einzige Angabe auf dieser Seite, die sich ändert,
|
|
während man hinsieht. Genau das macht sie wertvoll: Sie sagt ohne ein
|
|
Wort, dass die Seite LEBT -- dass die Zahlen daneben von jetzt sind
|
|
und nicht von gestern Nacht. Eine Oberfläche, bei der man das nicht
|
|
weiß, prüft man ständig nach.
|
|
|
|
Und sie steht neben dem Datum, das ohnehin dort steht. Zwei Angaben
|
|
zur selben Frage gehören zusammen; das Datum oben und die Uhrzeit in
|
|
der Fußzeile wären zwei halbe Antworten.
|
|
|
|
---------------------------------------------------------------------
|
|
ZWEI RINGE, NICHT EINER
|
|
|
|
Der innere Ring füllt sich in einer Minute, der äußere in einer
|
|
Stunde. Das ist der Unterschied zwischen "eine Uhr, die tickt" und
|
|
"eine Uhr, an der man den Stand der Stunde sieht" -- man erkennt aus
|
|
dem Augenwinkel, ob die Stunde jung ist oder gleich vorbei.
|
|
|
|
Der Sekundenring läuft NICHT weich. Ein weicher Zeiger sieht teurer
|
|
aus, kostet aber eine Bildberechnung pro Bild statt einer pro
|
|
Sekunde, und auf einer Seite, die stundenlang offen steht, ist das
|
|
der Unterschied zwischen einem warmen und einem kalten Rechner.
|
|
Der Sprung ist außerdem ehrlicher: Die Anzeige ist digital.
|
|
===================================================================== */
|
|
|
|
/* =====================================================================
|
|
DIE KONSOLE — sie gehoert absichtlich NICHT zu den Modulen
|
|
(07.09.2026)
|
|
|
|
Filipe: "diese hauptkachel muss komplett aus der rolle fliegen im
|
|
gegenzug zu den anderen, VIEL SPEZIELLER AUFFAELLIGER UND KRASSER."
|
|
|
|
Hier stand vorher woertlich: "dasselbe Material wie die
|
|
Bereichskacheln, damit nicht zwei Oberflaechen nebeneinanderliegen."
|
|
Das war eine vernuenftige Regel -- und genau sie war das Problem.
|
|
Eine Flaeche, die sich an alle anderen anpasst, kann nicht
|
|
herausstechen. Die Begruessung ist aber keine Kachel unter Kacheln,
|
|
sondern der Anfang der Seite.
|
|
|
|
DREI DINGE MACHEN SIE ZU ETWAS ANDEREM, und alle drei sind FORM,
|
|
nicht Farbe -- das ist die Lehre aus den drei Anlaeufen, die Filipe
|
|
zu Recht als "wieder nur eine kleine Aenderung" bezeichnet hat:
|
|
|
|
1. SIE IST BREITER ALS DIE SEITE. Sie tritt links und rechts ueber
|
|
die Spalte hinaus, in der alle Kacheln stehen. Das ist
|
|
"aus der Reihe fliegen", woertlich genommen: Ihre Kante liegt
|
|
dort, wo bei allem anderen keine mehr ist.
|
|
2. SIE IST EIN ACHTECK. Die Module haben EINE abgeschnittene Ecke
|
|
oben links. Diese Flaeche hat VIER -- eine andere geometrische
|
|
Klasse, erkennbar aus fuenf Metern, ohne ein Wort zu lesen.
|
|
3. SIE HAT EINE METALLFASSUNG. Ein Kegelverlauf mit acht Stopps,
|
|
wie ihn VanVans Business-Hub fuer sein Medaillon benutzt: Hell,
|
|
dunkel, hell, dunkel rundherum -- so wirft gebuerstetes Metall
|
|
das Licht zurueck. Kein Rahmen, sondern ein Werkstoff.
|
|
|
|
Deshalb steht `.willkommen` seit heute NICHT mehr in der Modulliste
|
|
von module.css. Stuende sie dort, bekaeme sie dieselbe Silhouette wie
|
|
siebzehn andere Flaechen -- und module.css laedt nach dieser Datei,
|
|
haette also das letzte Wort. Sie herauszunehmen ist keine Auslassung,
|
|
sondern die Voraussetzung.
|
|
===================================================================== */
|
|
|
|
.willkommen {
|
|
/* Zwei Groessen, ein Ort. Die Fase steht als Variable da, damit
|
|
Silhouette, Fassung und Innenglas garantiert dieselbe benutzen --
|
|
drei getippte Zahlen waeren drei Gelegenheiten, dass die Kante
|
|
einen halben Pixel danebenliegt. */
|
|
--k-fase: 26px;
|
|
--k-rand: 4px;
|
|
|
|
position: relative;
|
|
/* 20px oben/unten statt 26.
|
|
|
|
JEDER PIXEL HIER SCHIEBT DIE KACHELN DARUNTER NACH UNTEN, und das
|
|
ist keine Feinheit: Mit dem dreispaltigen Umbau wuchs diese Kachel
|
|
von 244 auf 404 px. Die erste Kachelreihe rutschte dadurch von
|
|
y=971 auf y=1131 -- auf einem 1200 px hohen Fenster war damit keine
|
|
einzige Kachel mehr zu sehen, ohne zu rollen. Die Startseite BESTEHT
|
|
aber aus diesen Kacheln.
|
|
|
|
Zusammen mit der kleineren Anrede (siehe `.zgruss .titel`), dem
|
|
engeren Zeilenabstand und der Titelgroesse sind es rund 60 px
|
|
weniger. Die Kachel bleibt dem Vorbild treu -- VanVans Werktisch
|
|
hat mit minmax(200px, 260px) sogar eine breitere Ringspalte als
|
|
unsere 180-232 --, steht der Seite darunter aber nicht mehr im Weg. */
|
|
padding: 20px 30px;
|
|
border: 0;
|
|
border-radius: 0;
|
|
|
|
/* SIE TRITT AUS DER SPALTE HERAUS -- ABER NIE UEBER DEN BILDRAND.
|
|
|
|
Der Wert ist an die Polsterung der Inhaltsspalte GEBUNDEN und
|
|
nicht danebengeschrieben: `.inhalt` hat
|
|
`padding: … clamp(16px, 4vw, 40px)`, also 40 px am Rechner und
|
|
nur 16 px auf dem Handy. Eine feste Zahl waere hier genau die
|
|
Sorte Fehler, die dieses Haus schon zweimal teuer bezahlt hat:
|
|
Bei 1600 px sieht 34 px gut aus, bei 412 px ragt die Flaeche
|
|
17 px aus dem Bildschirm und die Seite laesst sich seitlich
|
|
schieben.
|
|
|
|
`min(34px, 3.6vw)` bleibt an jeder Breite unter der Polsterung --
|
|
3,6 % sind immer weniger als 4 %, und bei den 13 px unter 380 px
|
|
Breite (eigene Regel in start.css) ebenfalls. Gedeckelt bei
|
|
34 px, weil der Ueberstand ein Hinweis sein soll und kein
|
|
Vorsprung.
|
|
|
|
Er steht in einer Variablen, weil ihn drei Regeln brauchen
|
|
(Breite, linker Rand, rechter Rand); drei getippte Zahlen waeren
|
|
drei Gelegenheiten, dass die Konsole schief steht. */
|
|
--k-ueber: min(34px, 3.6vw);
|
|
width: calc(100% + 2 * var(--k-ueber));
|
|
margin-left: calc(-1 * var(--k-ueber));
|
|
margin-right: calc(-1 * var(--k-ueber));
|
|
|
|
/* DIE FASSUNG: gebuerstetes Metall als Kegelverlauf. Acht Stopps,
|
|
nicht zwei -- ein Verlauf von hell nach dunkel ist eine Flaeche mit
|
|
Farbverlauf; erst der WECHSEL hell/dunkel/hell liest sich als
|
|
geschliffenes Metall. Dieselbe Bauart wie das Medaillon auf
|
|
VanVans Business-Hub, nur rechteckig gefasst und mit den beiden
|
|
Hausfarben statt reinem Silber. */
|
|
/* DIE FASSUNG: ROT, SCHWARZ, BABYBLAU -- laengs gebuerstet.
|
|
|
|
Wunsch Filipe: "der rand soll auch eine mischung von rot schwarz
|
|
und babyblau haben."
|
|
|
|
Vorher war sie Stahl mit je einem roten und blauen Tupfer. Jetzt
|
|
sind die drei Farben die Fassung SELBST: links die rote Haelfte,
|
|
rechts die babyblaue, dazwischen und an den Raendern Schwarz --
|
|
und ueberall dort, wo Metall das Licht bricht, die hellen
|
|
Spitzlichter. Es sind dieselben zwei Farben wie im Motiv und auf
|
|
der Anmeldekarte; die Konsole traegt damit die Handschrift des
|
|
Hauses statt einer dritten.
|
|
|
|
ZWEI FEHLER, DIE ICH HIER SCHON GEMACHT HABE und die deshalb im
|
|
Aufbau stecken: Die Farben sind DECKEND (halbdurchsichtiges Metall
|
|
ist kein Metall, es ist graues Glas), und der Verlauf ist LINEAR
|
|
und laeuft der Laenge nach (ein Kegelverlauf trifft auf einem
|
|
1200 px breiten Balken die ganze Oberkante mit wenigen Grad und
|
|
bewirkt nichts). Rund -> conic, lang -> linear. */
|
|
/* NACHGERECHNET, NICHT NACH GEFUEHL VERTEILT (08.09.2026).
|
|
|
|
Filipe: "der rand ... soll rot schwarz silber und babyblau sein,
|
|
rot und babyblau soll man am meisten sehen."
|
|
|
|
Die alte Fassung hatte alle vier Farben -- aber in der falschen
|
|
Gewichtung. Jeden Stopp mit der Haelfte des Abstands zu seinen
|
|
Nachbarn gewichtet ergab: Schwarz 37,5 %, Babyblau 27,5 %, Silber
|
|
22 %, ROT 13 %. Genau die beiden Farben, die man am meisten sehen
|
|
sollte, kamen zusammen auf 40,5 % -- Silber allein hatte mehr
|
|
Platz als Rot. Im Quelltext faellt das nicht auf: Man sieht neun
|
|
silberne Stopps und denkt an Spitzlichter, nicht an ein Fuenftel
|
|
der Flaeche.
|
|
|
|
Jetzt: Babyblau 41,5 %, Rot 33 %, Schwarz 21,5 %, Silber 4 %.
|
|
Rot und Babyblau zusammen 74,5 %, und sie liegen nur 8,5 Punkte
|
|
auseinander. Silber ist auf das zurueckgenommen, was es sein soll:
|
|
der Treffpunkt in der Mitte -- dieselbe Stelle, an der sich im
|
|
Schriftzug oben Chili und Husky treffen. Dass Babyblau etwas
|
|
vorne liegt, ist Absicht und keine Ungenauigkeit: Es ist der
|
|
ruhigere der beiden Toene, und der Rand steht dauerhaft im Bild.
|
|
|
|
Links Rot, rechts Babyblau -- wie beim Schriftzug. Deckend, nicht
|
|
halbdurchsichtig (halbdurchsichtiges Metall ist graues Glas), und
|
|
LINEAR laengs statt conic (ein Kegelverlauf trifft eine 1200 px
|
|
breite Oberkante mit wenigen Grad und bewirkt nichts). */
|
|
background:
|
|
linear-gradient(96deg,
|
|
#20060b 0%,
|
|
#c8323f 3%,
|
|
#ff5f6d 10%,
|
|
#ffd9dd 16%, /* Spitzlicht im Rot */
|
|
#ff5461 23%,
|
|
#b3242f 31%,
|
|
#4a0c13 38%,
|
|
#0a0c12 43%, /* schwarze Fuge */
|
|
#8fa0b4 47%,
|
|
#f4faff 51%, /* der silberne Treffpunkt -- Mitte der Kachel */
|
|
#8fa0b4 55%,
|
|
#0a0c12 59%, /* schwarze Fuge */
|
|
#1d4a63 64%,
|
|
#4f95bd 70%,
|
|
#8fd8ff 76%,
|
|
#dff2ff 81%, /* Spitzlicht im Babyblau */
|
|
#7ecdf5 87%,
|
|
#3f7fa3 93%,
|
|
#10222e 97%,
|
|
#06080f 100%);
|
|
clip-path: polygon(
|
|
var(--k-fase) 0, calc(100% - var(--k-fase)) 0,
|
|
100% var(--k-fase), 100% calc(100% - var(--k-fase)),
|
|
calc(100% - var(--k-fase)) 100%, var(--k-fase) 100%,
|
|
0 calc(100% - var(--k-fase)), 0 var(--k-fase));
|
|
|
|
/* Die Tiefe liegt im `filter`, nicht im `box-shadow`: Ein
|
|
box-shadow folgt immer dem Rechteck und zeichnete Schatten fuer
|
|
vier Ecken, die es nicht mehr gibt. */
|
|
filter:
|
|
drop-shadow(0 3px 5px rgba(0, 0, 0, .6))
|
|
drop-shadow(0 22px 44px rgba(0, 0, 0, .7));
|
|
}
|
|
|
|
/* DAS INNENGLAS mit dem Raster. Eigene Ebene, damit die Fassung
|
|
ringsum stehen bleibt -- genau wie bei der Uhr und beim Medaillon.
|
|
Der Horizont unten ist der einzige farbige Akzent: Rot links,
|
|
Babyblau rechts, beide weit unter der Blendschwelle.
|
|
|
|
DAS RASTER LIEGT SEIT DEM 07.09.2026 HIER und nicht mehr auf einer
|
|
eigenen halbdurchsichtigen Ebene. Grund: Auf dieser Ebene brauchen
|
|
die Nieten volle Deckkraft (siehe unten), und eine Ebene hat nur
|
|
EINE Deckkraft. Das Raster kommt deshalb als eigene Verlaufsschicht
|
|
mit eigener Alpha -- so ist es genauso leise wie vorher, aber die
|
|
Nieten sind es nicht. Derselbe Fehler wie mit der Koernung im
|
|
August: Wer zwei Dinge auf eine Ebene legt, gibt ihnen dieselbe
|
|
Lautstaerke. */
|
|
/* DIE INNENFORM STEHT EINMAL, NICHT ZWEIMAL.
|
|
|
|
Sie wird von zwei Ebenen gebraucht (dem Innenglas hier und dem
|
|
Universum darunter). Zwei getippte Polygone waeren zwei
|
|
Gelegenheiten, dass eine Fase einen halben Pixel danebenliegt --
|
|
und genau diese Sorte Doppelung hat mich in dieser Datei heute
|
|
schon zweimal Zeit gekostet. Ein Polygon passt in eine Variable,
|
|
also gehoert es in eine. */
|
|
.willkommen { --k-innenform: polygon(
|
|
calc(var(--k-fase) - var(--k-rand)) 0, calc(100% - var(--k-fase) + var(--k-rand)) 0,
|
|
100% calc(var(--k-fase) - var(--k-rand)), 100% calc(100% - var(--k-fase) + var(--k-rand)),
|
|
calc(100% - var(--k-fase) + var(--k-rand)) 100%, calc(var(--k-fase) - var(--k-rand)) 100%,
|
|
0 calc(100% - var(--k-fase) + var(--k-rand)), 0 calc(var(--k-fase) - var(--k-rand))); }
|
|
|
|
.willkommen::before {
|
|
content: ""; position: absolute; inset: var(--k-rand);
|
|
z-index: 0; pointer-events: none;
|
|
clip-path: var(--k-innenform);
|
|
/* DER HINTERGRUND -- SECHS SCHICHTEN, VON OBEN NACH UNTEN GELESEN.
|
|
|
|
Wunsch Filipe: "die kachel selbst soll einen uebertrieben krank
|
|
geilen hintergrund haben ... die einzige kachel, die komplett aus
|
|
dem rudel faellt."
|
|
|
|
1 die Lichtkante ganz oben -- die Innenseite der Fassung
|
|
2 das KOHLEFASERGEWEBE: zwei gegenlaeufige Schraegen, die sich
|
|
zu einem Geflecht kreuzen. Bei drei Prozent sieht man kein
|
|
Muster, man sieht ein MATERIAL -- und genau darum geht es.
|
|
Ein Gewebe sagt "gebaut", ein Raster sagt "gezeichnet".
|
|
3 das feine Messraster (bleibt, es gehoert zur Sprache des Hauses)
|
|
4 DER HORIZONT: ein heller Strich im unteren Drittel mit einem
|
|
Schein darueber. Er gibt der Flaeche eine Tiefe, die kein
|
|
Verlauf allein herstellt -- das Auge liest ihn als Kante
|
|
zwischen "vorn" und "hinten".
|
|
5 die beiden Farbbecken: Rot links unten, Babyblau rechts unten
|
|
-- kraeftiger als bisher, weil sie jetzt gegen ein Material
|
|
arbeiten und nicht gegen eine leere Flaeche
|
|
6 der Grund: fast schwarz, mit einem Blauschimmer oben
|
|
|
|
ALLES WEIT UNTER DER BLENDSCHWELLE. Die Regel des Hauses gilt auch
|
|
fuer "krank geil": Es darf beeindrucken, es darf nicht blenden. */
|
|
background:
|
|
linear-gradient(180deg, rgba(255, 255, 255, .13) 0 1px, transparent 1px),
|
|
repeating-linear-gradient(58deg,
|
|
rgba(190, 215, 245, .030) 0 1px, transparent 1px 7px),
|
|
repeating-linear-gradient(-58deg,
|
|
rgba(190, 215, 245, .030) 0 1px, transparent 1px 7px),
|
|
repeating-linear-gradient(0deg, rgba(150, 186, 220, .075) 0 1px, transparent 1px 16px),
|
|
repeating-linear-gradient(90deg, rgba(150, 186, 220, .075) 0 1px, transparent 1px 16px),
|
|
linear-gradient(180deg, transparent 0 71%,
|
|
rgba(190, 220, 255, .16) 71% calc(71% + 1px), transparent calc(71% + 1px)),
|
|
radial-gradient(90% 34% at 50% 71%, rgba(150, 200, 255, .10), transparent 70%),
|
|
radial-gradient(120% 95% at 2% 112%, rgba(255, 78, 94, .26), transparent 54%),
|
|
radial-gradient(120% 95% at 98% 112%, rgba(120, 205, 255, .26), transparent 54%),
|
|
radial-gradient(140% 120% at 50% -30%, rgba(96, 140, 200, .16), transparent 62%),
|
|
linear-gradient(168deg, #0f1522 0%, #080c14 58%, #04060b 100%);
|
|
}
|
|
|
|
/* =====================================================================
|
|
STUFE 1: VIER NIETEN -- die Konsole ist MONTIERT (07.09.2026)
|
|
|
|
Filipe: "noch viel viel viel spezieller, setz noch eine drauf, und
|
|
dan noch eine drauf und dan noch eine drauf."
|
|
|
|
Das Einzige, was eine Flaeche endgueltig von einem Bildschirmkasten
|
|
zu einem GEGENSTAND macht, ist die Frage, wie sie befestigt ist.
|
|
Ein Gehaeuse haengt nicht in der Luft -- es ist verschraubt. Vier
|
|
Nieten in den vier Fasen beantworten diese Frage, und sie
|
|
beantworten sie an genau den Stellen, an denen ein Konstrukteur
|
|
sie auch setzen wuerde: dort, wo das Material am dicksten ist.
|
|
|
|
Jede Niete ist EIN Kegelverlauf (das gedrehte Metall des Kopfes) und
|
|
ein Radialverlauf darueber (die Woelbung: Licht oben links, Schatten
|
|
unten rechts). Acht Ebenen fuer vier Nieten, kein einziges Element
|
|
mehr im Baum.
|
|
===================================================================== */
|
|
.willkommen::after {
|
|
content: ""; position: absolute; inset: var(--k-rand);
|
|
z-index: 0; pointer-events: none;
|
|
clip-path: inherit;
|
|
/* RUND, UND ZWAR AUS SICH SELBST HERAUS.
|
|
|
|
Der erste Anlauf nahm einen Kegelverlauf fuer das Metall und
|
|
schnitt ihn mit `background-size` auf 9x9 Pixel zurecht. Das
|
|
Ergebnis waren vier graue QUADRATE: Eine Hintergrundebene laesst
|
|
sich nicht runden -- `border-radius` gilt fuer das Element, nicht
|
|
fuer eine ihrer Ebenen, und eine Maske haette alle acht Ebenen
|
|
zugleich getroffen.
|
|
|
|
Ein Radialverlauf dagegen IST rund: Wo sein letzter Stopp
|
|
durchsichtig wird, hoert die Form auf. Deshalb bestehen die
|
|
Nieten jetzt aus zwei Radialverlaeufen -- einer fuer den Kopf mit
|
|
Rand, einer fuer die Woelbung. `closest-side` sorgt dafuer, dass
|
|
100 % der Radius sind und nicht die weiteste Ecke; genau der
|
|
Fehler, der heute die Skala der Uhr unsichtbar gemacht hat. */
|
|
--niete-metall: radial-gradient(circle closest-side,
|
|
#e6eff9 0%, #b6c6d9 38%, #64758c 74%,
|
|
#39465a 90%, rgba(6, 10, 18, .95) 97%, transparent 100%);
|
|
--niete-woelbung: radial-gradient(circle closest-side at 34% 30%,
|
|
rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, 0) 46%,
|
|
rgba(0, 0, 0, .45) 88%, transparent 100%);
|
|
background:
|
|
var(--niete-woelbung), var(--niete-metall),
|
|
var(--niete-woelbung), var(--niete-metall),
|
|
var(--niete-woelbung), var(--niete-metall),
|
|
var(--niete-woelbung), var(--niete-metall);
|
|
background-repeat: no-repeat;
|
|
background-size: 11px 11px, 11px 11px, 11px 11px, 11px 11px,
|
|
11px 11px, 11px 11px, 11px 11px, 11px 11px;
|
|
/* In der Fase, nicht in der Ecke: Die Ecke gibt es nicht mehr. */
|
|
background-position:
|
|
left 8px top 8px, left 8px top 8px,
|
|
right 8px top 8px, right 8px top 8px,
|
|
right 8px bottom 8px, right 8px bottom 8px,
|
|
left 8px bottom 8px, left 8px bottom 8px;
|
|
}
|
|
|
|
/* `:not(.licht)` -- dieselbe Falle wie in module.css, und ich bin
|
|
heute schon einmal hineingelaufen: Das Lichtelement ist ein direktes
|
|
KIND der Flaeche. `position: relative` nimmt ihm sein `absolute` und
|
|
macht aus einer Flaeche ueber der ganzen Konsole einen leeren
|
|
Inline-Span. Eine Regel auf `> *` trifft eben auch das, was gar kein
|
|
Inhalt ist. */
|
|
/* Alles ausser den beiden HINTERGRUND-Ebenen kommt ueber das Glas.
|
|
`.zuniversum` gehoert dazu -- ohne die Ausnahme laege es mit
|
|
z-index 1 UEBER dem Text, und die Anrede staende hinter fuenf
|
|
Chilis. */
|
|
.willkommen > *:not(.licht, .zuniversum) { position: relative; z-index: 1; }
|
|
|
|
/* =====================================================================
|
|
DAS LICHT AUF DER KONSOLE IST EINE SPIEGELUNG, KEIN FARBSCHLEIER
|
|
|
|
Auf den Kacheln leuchtet das Licht in der Farbe der Kategorie -- dort
|
|
ist es ein Hinweis. Hier waere dasselbe falsch: Die Konsole gehoert
|
|
zu keiner Kategorie, und ein farbiger Schleier auf gebuerstetem
|
|
Metall sieht aus wie eine Folie darauf.
|
|
|
|
Metall zeigt seine Form ueber die SPIEGELUNG. Deshalb ist das Licht
|
|
hier weiss, schmal und hart an der Kante -- es wandert ueber die
|
|
Fassung wie ein Fenster, an dem man vorbeigeht. Erst dadurch sieht
|
|
man, dass die Fassung gewoelbt ist; ein Standbild kann das nicht.
|
|
===================================================================== */
|
|
.willkommen > .licht {
|
|
z-index: 2; /* ueber Glas und Nieten, unter dem Text */
|
|
clip-path: inherit;
|
|
}
|
|
/* Der weiche Schein auf der Glasflaeche -- sehr leise, er soll den Text
|
|
nicht anheben. */
|
|
.willkommen > .licht::before {
|
|
background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%),
|
|
rgba(190, 220, 255, .085), transparent 62%);
|
|
}
|
|
/* Die eigentliche Spiegelung: ein enger, heller Fleck, den die Maske auf
|
|
die FASSUNG begrenzt -- also genau auf das Metall und nicht auf die
|
|
Flaeche daneben. */
|
|
.willkommen > .licht::after {
|
|
padding: var(--k-rand);
|
|
background: radial-gradient(230px circle at var(--mx, 50%) var(--my, 50%),
|
|
rgba(255, 255, 255, .95),
|
|
rgba(214, 232, 255, .42) 34%,
|
|
rgba(160, 190, 225, .12) 58%,
|
|
transparent 74%);
|
|
}
|
|
|
|
/* =====================================================================
|
|
DREI SPALTEN: RING — TEXT — UHR (08.09.2026)
|
|
|
|
Uebernommen von VanVans Werktisch im Business Hub, auf Wunsch Filipes
|
|
("das model da uebernehmen und es noch perfektionieren"). Vorher stand
|
|
hier eine FLEX-Zeile: Bild, Text, Zahlen, Uhr -- alles nebeneinander,
|
|
mit rund 300 px Leere in der Mitte. Das war eine Zeile mit einer
|
|
Luecke, keine Tafel.
|
|
|
|
`minmax(0, 1fr)` FUER DIE MITTE, nicht `1fr`. Das ist im Vorbild
|
|
ausdruecklich vermerkt, und der Grund ist nachlesenswert: `1fr` geht
|
|
nie unter die Mindestbreite seines Inhalts. Eine nicht umbrechende
|
|
Anrede und eine Zahlenreihe zwingen die Spalte damit auf 470 px -- auf
|
|
einem 390-px-Schirm. Die ganze Seite laesst sich dann seitlich
|
|
wegschieben. Mit `minmax(0, 1fr)` darf die Spalte schmaler werden als
|
|
ihr Inhalt, und der Inhalt bricht um, statt hinauszuragen.
|
|
|
|
Ich habe den Fehler nicht selbst gemacht, sondern die Begruendung
|
|
mituebernommen -- eine Loesung ohne ihren Grund haelt genau bis zum
|
|
naechsten Umbau. */
|
|
.willkommen__reihe {
|
|
display: grid;
|
|
grid-template-columns: minmax(180px, 232px) minmax(0, 1fr) minmax(180px, 232px);
|
|
gap: 26px; align-items: center;
|
|
}
|
|
.willkommen__text {
|
|
min-width: 0;
|
|
/* 7px statt 9: vier Luecken uebereinander, also 8 px weniger Hoehe.
|
|
Siehe die Rechnung ueber `.willkommen`, warum jeder Pixel hier
|
|
unten bei den Kacheln ankommt. */
|
|
display: flex; flex-direction: column; align-items: center; gap: 7px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* ---- Der Ring links ------------------------------------------------
|
|
Gleich gross wie die Uhr rechts. Im Vorbild steht dazu: "Beide Kreise
|
|
exakt gleich gross -- sie sind ein Paar, kein Haupt- und Nebenkreis."
|
|
Das ist der Grund, warum die Tafel ruhig wirkt: zwei gleiche Gewichte
|
|
links und rechts, dazwischen der Text. */
|
|
.zring {
|
|
position: relative; aspect-ratio: 1; width: 100%; max-width: 232px;
|
|
margin: 0 auto;
|
|
}
|
|
.zring__bild {
|
|
width: 100%; height: 100%; display: block;
|
|
/* Bei -90 Grad beginnt das erste Segment oben statt rechts -- so
|
|
liest man einen Fortschritt, seit es Uhren gibt. */
|
|
transform: rotate(-90deg);
|
|
}
|
|
.zring__mitte {
|
|
position: absolute; inset: 0;
|
|
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
|
gap: 2px; pointer-events: none;
|
|
}
|
|
/* IN DER MITTE STEHT SPICY MEDIA, NICHT DER DOGFATHER-KOPF.
|
|
|
|
Das ist keine Stilfrage, sondern eine inhaltliche. Dieser Ring zeigt
|
|
DAS TEAM -- ein Segment je Person. Der DogFather-Kopf in seiner Mitte
|
|
haette Filipe bildlich ins Zentrum seines eigenen Teams gesetzt, mit
|
|
allen anderen als Kranz darum herum. Genau das soll nicht sein
|
|
(Anweisung 18.08.2026: nie hierarchisch ueber das Team stellen). Das
|
|
Spicy-Media-Siegel steht fuer alle gleich -- es ist die Marke, unter
|
|
der das ganze Team arbeitet, Filipe eingeschlossen.
|
|
|
|
Optisch trifft es ausserdem genau, was ein Siegel hier braucht: Es
|
|
ist von sich aus rund, mit hellem Doppelring auf dunklem Kern. Auf
|
|
dem dunklen Untergrund des Workspace leuchtet der Ring ruhig, ohne zu
|
|
blenden -- der Kern bleibt dunkel und zieht den Blick nicht von der
|
|
Zahl darunter ab, um die es geht.
|
|
|
|
VORGESCHICHTE, damit sie niemand zweimal macht: Hier stand
|
|
`marke-husky.webp`, und in der Kopfleiste dieselbe Datei als Maske.
|
|
Die Datei hatte zwar einen Alphakanal, der war aber RECHTECKIG -- als
|
|
Maske ergab das einen Kasten mit einem Husky darin. Seit dem
|
|
08.09.2026 ist sie durch das echte, freigestellte Original ersetzt
|
|
(`tools/marken-freistellen.mjs`, Ecken-Alpha nachgemessen 0/0/0/0),
|
|
und die Kopfleiste ist damit ohne eine einzige geaenderte CSS-Zeile
|
|
mitrepariert.
|
|
|
|
`contain` statt der frueheren 128 %: Das Werkzeug gibt das Motiv
|
|
bereits quadratisch gerahmt aus, ein Nachskalieren wuerde den
|
|
Doppelring nur wieder anschneiden. */
|
|
.zring__siegel {
|
|
width: 44px; height: 44px; margin-bottom: 5px;
|
|
border-radius: 50%;
|
|
/* 74 % statt `contain`: Bei voller Breite stiess die Chili an den
|
|
Rand des Siegels und wirkte hineingezwaengt. Mit etwas Luft
|
|
ringsum sitzt sie im Kreis, statt ihn auszufuellen. */
|
|
background: url("../img/marke-spicy.webp") center / 74% no-repeat, #0b1420;
|
|
box-shadow:
|
|
0 0 0 1px rgba(180, 210, 240, .28),
|
|
inset 0 0 12px rgba(0, 0, 0, .55);
|
|
/* Nur leicht zurueckgenommen. Die alte Fassung stand auf
|
|
saturate(.55) brightness(.92) -- das war fuer den schwarzweissen
|
|
Husky gedacht. Dem Spicy-Siegel nimmt so viel Entsaettigung das
|
|
Rot der Chili, also bleibt es bei einem sanften Daempfer: ruhig
|
|
genug, um nicht mit der Zahl zu konkurrieren, farbig genug, um als
|
|
Marke erkennbar zu sein. */
|
|
filter: saturate(.86) brightness(.95);
|
|
}
|
|
.zring__prozent {
|
|
font-size: 1.85rem; font-weight: 700; line-height: 1;
|
|
font-variant-numeric: tabular-nums;
|
|
color: #dfeaf6;
|
|
text-shadow: 0 0 16px rgba(127, 196, 242, .3);
|
|
}
|
|
/* ZWEIZEILIG, UND DAS IST GEWOLLT.
|
|
|
|
Erst stand hier `max-width: 78%` bei .68rem. In der Nahaufnahme lief
|
|
"DES TEAMS VERSORGT" als eine Zeile quer ueber die Segmentbahn -- der
|
|
Ring war dahinter durchgestrichen.
|
|
|
|
Der innere Segmentring liegt bei Radius 106 von 150, also auf 71 % der
|
|
Breite. Alles darunter muss schmaler bleiben als das, sonst kreuzt es
|
|
ihn. 58 % lassen dem Text Luft und zwingen ihn in zwei Zeilen -- genau
|
|
wie im Vorbild, wo "DEINER PRODUKTAKTEN" ebenfalls umbricht.
|
|
|
|
.72rem statt .68rem, weil 10,9 px unter meiner eigenen Untergrenze von
|
|
11,5 px lagen. Die Regel gilt auch fuer Text, den man nur ueberfliegt. */
|
|
.zring__unter {
|
|
font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
|
|
color: rgba(168, 192, 218, .66);
|
|
max-width: 58%; text-align: center; line-height: 1.25;
|
|
text-wrap: balance; /* zwei gleich lange Zeilen statt 4+1 Woertern */
|
|
}
|
|
|
|
/* ---- Die Anrede in eigener Fassung -------------------------------- */
|
|
.zgruss {
|
|
display: inline-flex; align-items: center; gap: 11px;
|
|
padding: 7px 15px 7px 8px;
|
|
border-radius: 999px;
|
|
background: linear-gradient(178deg, rgba(10, 18, 30, .62), rgba(6, 12, 21, .48));
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(160, 195, 230, .13),
|
|
0 1px 10px rgba(0, 0, 0, .3);
|
|
max-width: 100%;
|
|
}
|
|
.zgruss__bild {
|
|
width: 42px; height: 42px; flex: 0 0 auto;
|
|
border-radius: 50%;
|
|
background-size: cover; background-position: center;
|
|
background-color: rgba(120, 160, 200, .16);
|
|
box-shadow: 0 0 0 1px rgba(180, 210, 240, .22), inset 0 0 14px rgba(0, 0, 0, .5);
|
|
display: grid; place-items: center;
|
|
font-weight: 700; color: #cfe2f5;
|
|
}
|
|
.zgruss__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; text-align: left; }
|
|
.zgruss__datum { font-size: .78rem; color: rgba(168, 192, 218, .72); }
|
|
|
|
/* DIE ANREDE IST EINE PILLE, KEINE ZWEITE UEBERSCHRIFT.
|
|
|
|
In der Pille steckt `<h1 class="titel" id="gruss">`, und
|
|
`.willkommen .titel` (start.css) ist mit clamp(1.9rem, 3.4vw, 2.6rem)
|
|
die grosse Seitenueberschrift. Nachgemessen war die Pille dadurch
|
|
88 px hoch -- der groesste Einzelposten der ganzen Kachel, fuer eine
|
|
Zeile "Guten Abend, Filipe".
|
|
|
|
Damit standen ZWEI Ueberschriften in Titelgroesse uebereinander: die
|
|
Anrede und "Die Zentrale" direkt darunter. Im Vorbild ist genau das
|
|
nicht so -- dort ist die Anrede klein und ruhig, und der Titel traegt
|
|
allein. Die Pille faellt damit von 88 auf rund 56 px, ohne dass
|
|
irgendwo Polsterung weggenommen werden musste.
|
|
|
|
Die Schriftgroesse aendert die Gliederung NICHT: `#gruss` bleibt das
|
|
h1 der Seite. Wie gross eine Ueberschrift gesetzt ist und welchen
|
|
Rang sie hat, sind zwei verschiedene Dinge. */
|
|
.zgruss .titel {
|
|
font-size: 1.05rem; font-weight: 700; line-height: 1.25;
|
|
letter-spacing: -.005em;
|
|
margin: 0;
|
|
/* Der Verlauf aus `.willkommen .titel` wuerde hier mitkommen und die
|
|
Anrede in dieselbe gefraeste Metalloptik setzen wie den Titel. Bei
|
|
17 px ist das nur unruhig -- also zurueck auf eine feste Farbe. */
|
|
background: none; -webkit-text-fill-color: currentColor;
|
|
color: #e8f1fa; text-shadow: none;
|
|
}
|
|
/* .72rem ist die Hausuntergrenze (11,52 px), nicht Geschmack: Darunter
|
|
liest auf einem Telefon niemand mehr mit. Hier stand .66rem = 10,6 px.
|
|
Beim Bau des Rings war dieselbe Regel bei `.zring__unter` schon
|
|
angewandt worden -- diese beiden Stellen sind dabei durchgerutscht,
|
|
weil sie in einem anderen Abschnitt der Datei stehen. */
|
|
.zgruss__rolle {
|
|
flex: 0 0 auto;
|
|
padding: 4px 11px; border-radius: 999px;
|
|
font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
|
|
color: #e6c88a;
|
|
border: 1px solid rgba(227, 179, 65, .34);
|
|
background: rgba(227, 179, 65, .09);
|
|
}
|
|
|
|
/* ---- Zierzeile und Titel ------------------------------------------ */
|
|
/* Ebenfalls auf die Hausuntergrenze gehoben (.68rem waren 10,9 px).
|
|
Das breite letter-spacing macht die Zeile dadurch etwas laenger --
|
|
sie steht in der mittleren Spalte, die mit `minmax(0, 1fr)` mitgeht,
|
|
und bricht daher um statt ueberzulaufen. */
|
|
.zmarke {
|
|
display: inline-flex; align-items: center; gap: 11px;
|
|
font-size: .72rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
|
|
color: rgba(196, 214, 234, .6);
|
|
margin-top: 3px;
|
|
}
|
|
/* Die Raute ist ein ELEMENT, kein Schriftzeichen. Ein ◆ aus der
|
|
Schriftart sitzt nie auf der Grundlinie und sieht auf jedem Geraet
|
|
anders aus -- im Vorbild steht dieselbe Ueberlegung. */
|
|
.zraute {
|
|
width: 5px; height: 5px; flex: 0 0 auto;
|
|
transform: rotate(45deg);
|
|
background: rgba(227, 179, 65, .62);
|
|
}
|
|
/* ZWEI STUFEN, wie im Vorbild -- nicht eine.
|
|
|
|
Bei mittlerer Breite fehlt zuerst der Platz fuer DREI Spalten, aber
|
|
noch lange nicht fuer zwei: Der Ring bleibt links neben dem Text, die
|
|
Uhr rutscht darunter und in die Mitte. Erst wenn auch das nicht mehr
|
|
reicht, steht alles untereinander.
|
|
|
|
Die Zahlen 1180 und 780 sind aus dem Vorbild uebernommen, wo sie an
|
|
echten Geraeten entstanden sind. Sie stehen hier zusammen mit dem,
|
|
was sie zaehlen -- wer eine vierte Spalte hinzufuegt, muss sie neu
|
|
messen. Genau das ist im September einmal vergessen worden, und der
|
|
Sicht-Umschalter lag danach ueber dem Chat-Knopf. */
|
|
@media (max-width: 1180px) {
|
|
.willkommen__reihe { grid-template-columns: minmax(170px, 220px) minmax(0, 1fr); }
|
|
.willkommen__rechts { grid-column: 1 / -1; justify-content: center; margin-left: 0; }
|
|
}
|
|
@media (max-width: 780px) {
|
|
.willkommen__reihe { grid-template-columns: minmax(0, 1fr); gap: 20px; }
|
|
.zring { max-width: 190px; }
|
|
.zgruss { flex-wrap: wrap; justify-content: center; }
|
|
.zgruss__text { text-align: center; align-items: center; }
|
|
}
|
|
|
|
/* Der Satz unter dem Titel bekommt Fliesstextgroesse und darf umbrechen.
|
|
|
|
Im Vorbild stehen dort drei Zeilen ("Ich habe deine 253 Produkte
|
|
durchgesehen und 1561 von 1720 Angaben schon eingetragen ..."), und
|
|
genau die machen aus einer Anzeigetafel eine Ansprache. Bei mir ist
|
|
der Satz kuerzer -- er kommt aus derselben Zaehlung wie die Hinweise
|
|
darunter und wird nicht zweimal gerechnet -- aber er soll denselben
|
|
Raum bekommen statt als Kleingedrucktes am Titel zu kleben.
|
|
|
|
`text-wrap: balance` verteilt die Zeilen gleichmaessig, statt die
|
|
letzte mit einem einzelnen Wort enden zu lassen. */
|
|
.willkommen__reihe .unterzeile {
|
|
font-size: 1rem; line-height: 1.55;
|
|
max-width: 46ch; margin: 2px auto 0;
|
|
text-wrap: balance;
|
|
|
|
/* `justify-content: center` -- und ohne das war die Zeile schief.
|
|
|
|
`.willkommen .unterzeile` (start.css) macht daraus einen FLEX-Kasten
|
|
mit Umbruch, damit die Lage hinter der Rolle stehen und auf dem
|
|
Handy in die zweite Zeile rutschen kann. Das ist richtig so. Nur:
|
|
In einem Flex-Kasten ordnet `text-align` die Elemente NICHT an --
|
|
es zentriert den Text INNERHALB jedes Elements, waehrend die
|
|
Elemente selbst links kleben bleiben (Vorgabe `flex-start`).
|
|
|
|
In der breiten alten Begruessung fiel das nie auf, weil beide in
|
|
eine Zeile passten. Die Spalte der Zentrale ist 397 px schmal, also
|
|
bricht es immer um -- und dann steht jede Zeile fuer sich links.
|
|
Gemessen bei 1920 px: der Rollentext 39,7 px und die Lage 58,6 px
|
|
links der Achse, auf jeder Fensterbreite gleich.
|
|
|
|
`align-items` waere hier das falsche Werkzeug: Die Richtung ist
|
|
`row` mit Umbruch, nicht `column`. Gezielt wird also die Verteilung
|
|
IN der Zeile, und die heisst `justify-content`. */
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Der Aufzaehlungspunkt der Lage haengt in einem `padding-left: 14px`
|
|
(start.css). Steht die Lage in einer eigenen Zeile -- in dieser
|
|
Spalte immer --, ist das Element dadurch 14 px breiter als sein Text,
|
|
und der Text sitzt 7 px rechts der Mitte. Ein Ausgleich auf der
|
|
anderen Seite macht das Element wieder symmetrisch; der Punkt bleibt,
|
|
wo er ist. Bewusst nur hier und nicht in start.css: Stehen Rolle und
|
|
Lage nebeneinander, waere ein rechter Rand ein zu grosser Abstand. */
|
|
.willkommen__reihe .willkommen__lage { padding-right: 14px; }
|
|
|
|
.ztitel {
|
|
margin: 0;
|
|
/* Obergrenze von 2.9 auf 2.45rem. Bei 1440 px lief der Titel vorher
|
|
auf 46 px hinaus und war damit fast so hoch wie die Anrede daneben.
|
|
Die untere Grenze bleibt, damit er auf dem Telefon nicht schrumpft
|
|
-- dort ist er die einzige Ueberschrift im Bild. */
|
|
font-size: clamp(1.9rem, 3.6vw, 2.45rem);
|
|
font-weight: 700; line-height: 1.06; letter-spacing: -.01em;
|
|
color: #dce9f6;
|
|
/* Ein Verlauf statt einer Volltonfarbe: Der Titel bekommt oben Licht
|
|
und unten Schatten, wie ein gefraester Schriftzug auf Metall. */
|
|
background: linear-gradient(178deg, #eef5fc 8%, #b9cee2 58%, #7f95ad 100%);
|
|
-webkit-background-clip: text; background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
/* Rechts: Glocke neben der Uhr, beide rechtsbündig. `margin-left: auto`
|
|
statt `justify-content: space-between` am Elternteil -- so bleibt die
|
|
Gruppe auch dann rechts, wenn der Text davor kurz ist. */
|
|
/* =====================================================================
|
|
STUFE 2: EINE GEFRAESTE NUT trennt Text von Instrumenten.
|
|
|
|
Auf einer echten Konsole liegen Anzeige und Beschriftung nicht auf
|
|
derselben Flaeche -- dazwischen laeuft eine Nut. Sie ist keine Linie,
|
|
sondern eine VERTIEFUNG, und daran erkennt man sie: dunkel auf der
|
|
Lichtseite, hell auf der Schattenseite. Genau umgekehrt zu einer
|
|
aufgemalten Trennlinie, und genau deshalb sieht sie nach Material
|
|
aus statt nach Dekoration.
|
|
|
|
STUFE 3: DIE UHR SITZT IN EINER MULDE.
|
|
|
|
Sie lag bisher AUF der Konsole. Ein Instrument wird aber in eine
|
|
Fraesung eingesetzt: eine runde Vertiefung, etwas groesser als das
|
|
Gehaeuse, mit Schatten oben (dort faellt kein Licht mehr hinein) und
|
|
einem hellen Bogen unten (dort trifft es die gegenueberliegende
|
|
Wand). Beides zusammen macht aus "davor" ein "darin".
|
|
===================================================================== */
|
|
.willkommen__rechts { position: relative; }
|
|
|
|
/* Die Nut. */
|
|
.willkommen__rechts::before {
|
|
content: ""; position: absolute;
|
|
left: -18px; top: -14px; bottom: -14px; width: 2px;
|
|
pointer-events: none; z-index: 0;
|
|
background: linear-gradient(90deg,
|
|
rgba(0, 0, 0, .75) 0 1px,
|
|
rgba(255, 255, 255, .13) 1px 2px);
|
|
border-radius: 1px;
|
|
}
|
|
|
|
/* DIE INSTRUMENTE LIEGEN UEBER DER MULDE -- und das muss ausdruecklich
|
|
dastehen. `::after` wird NACH allen Kindern gezeichnet; bei gleichem
|
|
Stapelwert gewinnt das spaetere Element. Die Mulde lag deshalb OBEN
|
|
und hat die Luenette der Uhr von poliertem Stahl zu mattem Grau
|
|
gedaempft -- im Bildschirmfoto gesehen, im Vergleich mit der Aufnahme
|
|
von vorhin. Ein Stapelwert von 1 stellt die Reihenfolge her, die der
|
|
Name schon behauptet. */
|
|
.willkommen__rechts > * { position: relative; z-index: 1; }
|
|
|
|
/* DIE MULDE HAENGT AN DER UHR, NICHT AM KASTEN DANEBEN.
|
|
|
|
Der erste Anlauf setzte sie als eigene Flaeche in die rechte Haelfte
|
|
der Konsole, ausgerichtet an deren rechtem Rand. Am Rechner passte
|
|
das; auf dem Handy steht die Uhr MITTIG, und die Mulde lag als
|
|
dunkle Scheibe daneben. Im Bildschirmfoto bei 412 px gesehen.
|
|
|
|
Jetzt entsteht sie aus zwei Schattenringen der Uhr selbst (siehe
|
|
`.uhr` weiter oben): Sie ist damit automatisch konzentrisch, bei
|
|
jeder Groesse und an jedem Ort. Das ist die bessere Bauart, nicht
|
|
nur die reparierte -- eine Fassung, die man ausrichten MUSS, richtet
|
|
irgendwann jemand falsch aus.
|
|
|
|
Die Nut daneben bleibt am Kasten: Sie trennt zwei BEREICHE, nicht
|
|
zwei Bauteile. Auf dem Handy gibt es diese Trennung nicht mehr
|
|
(dort steht alles untereinander), deshalb faellt sie dort weg. */
|
|
|
|
/* =====================================================================
|
|
DIE MITTE DER KONSOLE: DREI EINGELASSENE ABLESUNGEN
|
|
|
|
Gemessen, nicht geschaetzt: Auf 1440 px lagen zwischen dem Ende des
|
|
Textes und der Uhr rund 300 px Leere. Auf einer Konsole ist eine
|
|
leere Flaeche keine Ruhe, sondern ein fehlendes Bauteil.
|
|
|
|
Sie sind EINGELASSEN, nicht aufgesetzt -- dieselbe Bauart wie die
|
|
Uhrmulde daneben, damit die Kachel EIN Stueck bleibt und nicht in
|
|
zwei Stile zerfaellt:
|
|
- dunkler Grund (in einer Fraesung faellt weniger Licht an)
|
|
- Schatten oben INNEN, heller Bogen unten INNEN (die
|
|
gegenueberliegende Wand faengt das Licht)
|
|
- haarfeine helle Kante aussen unten (die Oberkante der Fraesung)
|
|
Ein `box-shadow: inset` allein reicht dafuer nicht: Es macht eine
|
|
Delle, aber keinen Rand. Erst die zweite, helle Kante macht daraus
|
|
ein Loch mit Wand.
|
|
|
|
`flex: 0 1 auto` und `flex-wrap` am Elternteil: Wird der Platz eng,
|
|
RUTSCHT die Gruppe unter den Text, statt sich zu quetschen. Das ist
|
|
Absicht und ersetzt eine feste Umbruchbreite -- eine Zahl, die zaehlt,
|
|
was daneben steht, wird beim naechsten hinzugefuegten Element falsch,
|
|
und zwar still. Genau so lag im September der Sicht-Umschalter ueber
|
|
dem Chat-Knopf. */
|
|
/* EINE FASSUNG, DREI FELDER -- nicht drei Kaestchen nebeneinander.
|
|
|
|
Der erste Anlauf gab jedem Wert eine eigene Fraesung. Im Bild sah das
|
|
aus wie drei aufgeklebte Plaettchen: Ein Instrumentenblock auf einer
|
|
Konsole ist EIN eingelassenes Feld, in dem STEGE die Ablesungen
|
|
trennen. Der Unterschied ist nicht Geschmack, sondern Bauweise -- und
|
|
man sieht ihn sofort, weil das Licht nur einmal ueber eine Kante
|
|
laeuft statt sechsmal.
|
|
|
|
Der Steg ist zwei Linien breit, nie eine: dunkel auf der Lichtseite,
|
|
hell auf der Schattenseite. Eine einzelne Linie ist ein Strich, zwei
|
|
sind eine Kante. Dieselbe Regel wie bei der Nut daneben. */
|
|
.willkommen__stand {
|
|
display: flex; align-items: stretch;
|
|
/* KEIN `margin-left: auto` (entfernt 08.09.2026).
|
|
|
|
Es stammte aus der Zeit, als die drei Ablesungen RECHTS zwischen
|
|
Text und Uhr standen -- dort hat es sie an den rechten Rand
|
|
geschoben. Seit sie unter dem Titel in der Mitte stehen, schlaegt
|
|
es das `align-items: center` der Spalte: In einer Flex-Spalte
|
|
gewinnt ein `auto`-Rand immer gegen die Ausrichtung des Elternteils.
|
|
|
|
Gemessen bei 1920 px: Anrede, Zierzeile, Titel und Unterzeile lagen
|
|
alle exakt auf Mitte 960 -- dieser Kasten allein auf 1129, also
|
|
169 px zu weit rechts. Genau das hat Filipe im Bildschirmfoto
|
|
gesehen.
|
|
|
|
Aufgefallen war es schon einmal: Weiter unten stand fuer 412 px
|
|
bereits `margin-left: 0`, mit dem Vermerk "im Bildschirmfoto
|
|
gesehen, nicht hergeleitet". Dort wurde das Symptom geflickt, die
|
|
Ursache blieb -- und auf dem grossen Bildschirm damit bestehen.
|
|
Deshalb hier weg statt dort noch einmal. */
|
|
flex: 0 1 auto;
|
|
padding: 3px;
|
|
border-radius: 13px;
|
|
background:
|
|
linear-gradient(178deg, rgba(3, 8, 15, .78), rgba(10, 18, 29, .54));
|
|
box-shadow:
|
|
inset 0 4px 9px rgba(0, 0, 0, .66), /* Schatten der Oberkante */
|
|
inset 0 -1px 0 rgba(150, 185, 220, .17), /* Licht auf der Gegenwand */
|
|
0 1px 0 rgba(170, 200, 235, .10); /* Kante der Fraesung */
|
|
}
|
|
.stand {
|
|
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
|
gap: 4px;
|
|
min-width: 86px; padding: 10px 15px 9px;
|
|
position: relative;
|
|
}
|
|
/* Der Steg zwischen zwei Feldern -- am zweiten und dritten, nicht am
|
|
ersten. `::before` statt `border-left`, weil eine Kante aus zwei
|
|
Farben besteht. */
|
|
.stand + .stand::before {
|
|
content: ""; position: absolute; left: 0; top: 14%; bottom: 14%;
|
|
width: 2px;
|
|
background: linear-gradient(90deg,
|
|
rgba(0, 0, 0, .5) 0 1px, rgba(160, 195, 230, .13) 1px 2px);
|
|
}
|
|
.stand__wert {
|
|
font-size: 1.55rem; font-weight: 700; line-height: 1;
|
|
font-variant-numeric: tabular-nums; /* springt nicht beim Zaehlen */
|
|
letter-spacing: .01em;
|
|
color: var(--stand-farbe, #cfe2f5);
|
|
/* Ein Hauch Eigenlicht -- so viel, dass die Ziffer in der Fraesung
|
|
leuchtet, so wenig, dass sie scharf bleibt. Kein blur() auf der
|
|
Schrift selbst; das war beim ersten Uhr-Anlauf der Vorwurf. */
|
|
text-shadow: 0 0 12px color-mix(in srgb, var(--stand-farbe, #cfe2f5) 34%, transparent);
|
|
}
|
|
/* 11,5 px IST DIE UNTERGRENZE, auch fuer ein Schildchen (08.09.2026).
|
|
|
|
Hier stand `.58rem` -- 9,3 px. pruef-css-klassen hat es gemeldet, und
|
|
zwar nicht als Geschmacksfrage: Die Zahl der Stellen unter 11,5 px war
|
|
um genau eine gestiegen. Gesperrte Grossbuchstaben in 9 px liest man
|
|
nicht, man erraet sie -- und "augenschonend" gilt ueberall, nicht nur
|
|
dort, wo es auffaellt.
|
|
|
|
Die Sperrung faellt dafuer etwas kleiner aus: Was groesser wird, darf
|
|
nicht auch noch breiter werden, sonst passen drei Schilder bei 320 px
|
|
nicht mehr nebeneinander. Nachgemessen, nicht geschaetzt. */
|
|
.stand__schild {
|
|
font-size: .72rem; font-weight: 600; letter-spacing: .09em;
|
|
text-transform: uppercase;
|
|
color: rgba(168, 192, 218, .62);
|
|
white-space: nowrap;
|
|
}
|
|
/* Eine Farbe je Ablesung -- dieselbe Idee wie bei den Terminarten:
|
|
Die Farbe gehoert zur Sache. Babyblau fuer den Tag, Bernstein fuer
|
|
das Naechste, und Offen wechselt mit der Lage. */
|
|
.stand[data-stand="heute"] { --stand-farbe: #7fc4f2; }
|
|
.stand[data-stand="naechster"] { --stand-farbe: #e3b341; }
|
|
.stand[data-stand="offen"] { --stand-farbe: #8fb3cf; }
|
|
.stand[data-stand="offen"][data-stufe="offen"] { --stand-farbe: #e3b341; }
|
|
.stand[data-stand="offen"][data-stufe="warnung"] { --stand-farbe: #ff6b74; }
|
|
/* Ruhig heisst ruhig: kein Grasgruen in einer Konsole, die sonst aus
|
|
Blau und Rot besteht -- ein gedaempftes Petrol sagt dasselbe, ohne
|
|
die Augen zu stechen (augenschonend gilt ueberall). */
|
|
.stand[data-stand="offen"][data-stufe="ruhig"] { --stand-farbe: #57b89b; }
|
|
|
|
/* `margin-left: auto` BLEIBT HIER, obwohl der Stand daneben es auch hat.
|
|
|
|
Beim Bauen hatte ich es weggenommen -- der Stand schiebe die Uhr ja
|
|
schon nach rechts. Er tut das nur, solange er DA ist: Bis die erste
|
|
Abfrage zurueck ist, steht er auf `hidden`, und in dieser Sekunde
|
|
waere die Uhr an den Text geklebt und dann sichtbar weggesprungen.
|
|
|
|
Zwei `auto` nebeneinander sind kein Widerspruch: Das erste nimmt den
|
|
freien Platz, das zweite bekommt keinen mehr. Ergebnis ist in BEIDEN
|
|
Faellen dasselbe -- Instrumente rechts, Text links. */
|
|
.willkommen__rechts {
|
|
display: flex; align-items: center; gap: 14px;
|
|
margin-left: auto; flex: 0 0 auto;
|
|
}
|
|
/* DER PLATZ WIRD RESERVIERT, NICHT NACHTRÄGLICH GENOMMEN.
|
|
|
|
Hier stand `:empty { display: none }` -- und das ist genau der Fehler,
|
|
den die Kachel darunter schon einmal gemacht hat: Die Glocke wird
|
|
erst nach der ersten Abfrage eingehängt, und bis dahin war der Platz
|
|
0 px breit. In dem Moment, in dem sie erscheint, wächst die Zeile,
|
|
und alles darunter rutscht.
|
|
|
|
Ein Sprung ist kein Schönheitsfehler, sondern der Grund, warum man
|
|
auf den falschen Knopf drückt: Man zielt auf etwas, und im Moment des
|
|
Klicks rutscht es weg. Gemessen von pruef-tempo-workspace.
|
|
|
|
Also 46 px, immer -- ob die Glocke kommt oder nicht. Auf Geräten, auf
|
|
denen es sie gar nicht gibt (iPhone im Browser), bleibt ein leerer
|
|
Streifen neben der Uhr; das ist der Preis, und er ist niedriger als
|
|
ein springendes Bild. */
|
|
.glocke-platz {
|
|
/* ZWEI KNOEPFE UEBEREINANDER, und der Platz gilt fuer beide.
|
|
|
|
Seit dem 08.09.2026 steht hier neben der Glocke der Tagesruf
|
|
(screen10). Die Begruendung oben aendert sich dadurch nicht, sie
|
|
wird nur groesser: 48 px je Knopf, 8 px dazwischen, macht 104 px --
|
|
reserviert, ob die Knoepfe kommen oder nicht. Haette ich die Hoehe
|
|
auf 46 stehen lassen, waere genau der Sprung zurueckgekommen, gegen
|
|
den der Absatz darueber geschrieben wurde: Der zweite Knopf haengt
|
|
an derselben Abfrage wie der erste. */
|
|
width: 48px; height: 104px; flex: none;
|
|
display: flex; flex-direction: column; align-items: center; gap: 8px;
|
|
position: relative;
|
|
}
|
|
|
|
|