DogFatherGitandClaude Opus 5
d694e34fcb
Filipe hat eine Sci-Fi-Uhr geschickt (1250 px) und gesagt "so wie die".
Unsere ist 164 px gross -- Faktor 7,6. Was uebernehmbar ist, entscheidet
damit nicht der Geschmack, sondern die Groesse:
UEBERNOMMEN der blaue LED-Punktkranz aussen (das auffaelligste
Merkmal des Vorbilds), die vier Anker bei 12/3/6/9,
der rote Grundton der Digitalanzeige.
NICHT MOEGLICH die Minutenzahlen 00/05/…/55 und die Stundenzahlen
1-12. Im Vorbild sind sie rund 30 px hoch; hier waeren
es VIER. Zahlen, die man nicht lesen kann, sind kein
Zifferblatt, sondern Rauschen -- und sie wuerden die
drei Boegen zudecken, die die eigentliche Anzeige sind.
Der Kranz ist ein `repeating-conic-gradient` mit 6-Grad-Takt, aus dem
eine Maske einen schmalen Ring schneidet: 60 Punkte, einer je Sekunde,
in EINER Ebene. Sechzig <span> waeren sechzig Elemente fuer eine Zierde.
Die vier Anker ebenso, mit 90-Grad-Takt.
EINE FALSCHE BEGRUENDUNG, VON DER EIGENEN RECHNUNG WIDERLEGT: Ich hatte
in den Kommentar geschrieben, reines Neonrot wie im Vorbild "reisse den
Kontrast" und liege bei 4,0:1. Nachgerechnet sind es 5,27:1 -- es haelt
die Grenze von 4,5. Die schoenere Begruendung war die falsche.
Die Entscheidung bleibt trotzdem, nur mit dem echten Grund: Diese Uhr
steht DAUERHAFT im Bild einer Seite, an der gearbeitet wird. Reines
gesaettigtes Rot auf Schwarz ermuedet bei stundenlangem
Nebenherschauen, auch wenn es messbar lesbar ist -- genau das meint die
Hausregel "augenschonend", und das deckt keine Kontrastzahl ab. Die
Ziffern sind deshalb ein sehr helles Rotweiss (15,9:1), das seinen
roten Charakter aus dem Schein im Textschatten bekommt. Man liest
"rote Digitalanzeige", ohne stundenlang in eine Leuchtreklame zu sehen.
Aus demselben Grund liegt das Blau der LEDs bei rund 53 % Deckkraft:
Die Anmutung kommt vom Aufbau, nicht von der Grellheit.
pruef-start-ansicht EXIT=0 (140), pruef-css-klassen EXIT=0 (28).
Co-Authored-By: Claude Opus 5 <[email protected]>
1818 lines
82 KiB
CSS
1818 lines
82 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. */
|
|
background:
|
|
linear-gradient(96deg,
|
|
#1a0509 0%,
|
|
#ff5f6d 4%,
|
|
#ffe1e4 8%,
|
|
#7a1620 12%,
|
|
#08090e 18%,
|
|
#8b9aad 24%,
|
|
#f6fbff 28%,
|
|
#0a0d14 35%,
|
|
#4d5c72 42%,
|
|
#e8f1fb 47%,
|
|
#06080d 54%,
|
|
#5d7a92 61%,
|
|
#8fd8ff 67%,
|
|
#e6f6ff 71%,
|
|
#123043 76%,
|
|
#070a10 82%,
|
|
#6f8298 88%,
|
|
#f2f8ff 92%,
|
|
#1a0509 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. */
|
|
.willkommen::before {
|
|
content: ""; position: absolute; inset: var(--k-rand);
|
|
z-index: 0; pointer-events: none;
|
|
clip-path: 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)));
|
|
/* 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. */
|
|
.willkommen > *:not(.licht) { 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 { width: 46px; height: 46px; flex: none; }
|
|
|
|
/* ---------- Die Uhr --------------------------------------------------
|
|
ROT x BABYBLAU (07.09.2026, zweiter Entwurf).
|
|
|
|
Filipe: "die uhr rechts soll auch viel viel viel viel viel viel viel
|
|
spezieller noch sein und soll eine mischung von rot und babyblau
|
|
haben."
|
|
|
|
WAS EINE UHR TEUER AUSSEHEN LAESST, IST NICHT DIE FARBE, SONDERN DAS
|
|
GEHAEUSE. Bei einer echten Uhr sieht man drei Dinge übereinander:
|
|
einen METALLRAND, der das Licht von oben fängt; eine VERTIEFTE
|
|
Scheibe darin; und ein GLAS darüber, das spiegelt. Genau diese drei
|
|
Schichten sind hier gebaut -- und sie sind der Grund, warum das Ding
|
|
jetzt wie ein Gegenstand aussieht und nicht wie ein Kreis mit Zahlen.
|
|
|
|
Die Farben kommen aus dem Haus, nicht aus dem Farbkasten: Rot ist
|
|
Spicy Media, Babyblau ist DogFather. Dieselben zwei stehen im Kopf
|
|
der Anmeldekarte nebeneinander und bilden im Motiv den Neonrahmen.
|
|
|
|
Beide Verlaeufe stehen im SVG (siehe start.html) und laufen
|
|
GEGENEINANDER -- der Stundenring rot -> blau, der Sekundenring blau
|
|
-> rot. Wo der eine warm ist, ist der andere kuehl; so bleiben sie
|
|
auseinanderzuhalten, wo sie sich ueberlagern.
|
|
-------------------------------------------------------------------- */
|
|
/* =====================================================================
|
|
DIE UHR — ein Instrument, keine Anzeige (07.09.2026, zweiter Anlauf)
|
|
|
|
Filipe: "AUCH MIT DER UHR RECHTS; DAS IST VIEL ZU EINFACH; ICH WILL
|
|
SIE NOCH VIEEEEEEL KRASSER; WIE IN DER BUISNESS HUB SEITE VON VANVAN,
|
|
WIE DIE UHR BEI IHR ABER NOCH KRASSER UND SPEZIELLER."
|
|
|
|
NACHGESEHEN, NICHT GERATEN. Auf VanVans Business-Hub gibt es keine
|
|
Uhr -- gemeint ist das `gate-medaillon` auf der Anmeldeseite: ein
|
|
runder Kegelverlauf, der wie gebuerstetes Metall aussieht, gefasst in
|
|
zwei eingelassenen Ringen. Genau diese Bauart steht jetzt hier, in
|
|
drei Punkten weitergetrieben:
|
|
|
|
1. FASSUNG STATT RAND. Der Kegelverlauf laeuft rundherum durch
|
|
hell/dunkel/hell -- deshalb sieht die Fassung gedreht aus und
|
|
nicht bemalt. Sie ist 5 px breit statt 3; darunter liegt ein
|
|
zweiter, dunkler Ring, der sie einlaesst.
|
|
2. AUFGESETZTE STUNDENMARKEN. Zwoelf kraeftige Striche aus einem
|
|
einzigen sich wiederholenden Kegelverlauf, dazu sechzig feine.
|
|
Sechzig Elemente im HTML waeren dieselbe Optik mit sechzig
|
|
Elementen mehr im Baum.
|
|
3. GLASKUPPE. Eine Spiegelung von oben links plus ein heller Bogen
|
|
an der Oberkante. Ohne den Bogen wirkt jede runde Flaeche flach.
|
|
|
|
UND SIE IST GROESSER: 164 statt 124 px. Das ist kein Detail --
|
|
"krasser" heisst bei einem Instrument zuerst "lesbar". Auf dem Handy
|
|
bleibt sie bei 118 px, dort steht sie unter dem Text statt daneben.
|
|
===================================================================== */
|
|
.uhr {
|
|
position: relative;
|
|
width: 164px; height: 164px; flex: none;
|
|
display: grid; place-items: center;
|
|
border-radius: 50%;
|
|
padding: 10px;
|
|
/* SCHICHT 1: DIE LUENETTE. Zehn Pixel breit und DECKEND.
|
|
Halbdurchsichtig war der Fehler des ersten Anlaufs: Metall, durch
|
|
das der Hintergrund scheint, sieht nicht nach Metall aus, sondern
|
|
nach grauem Glas -- im Bildschirmfoto gemessen, es las sich als
|
|
flacher grauer Ring. Echtes Metall ist undurchsichtig; sein
|
|
Aussehen entsteht allein daraus, WIE es das Licht zurueckwirft.
|
|
Deshalb hier volle Farben und ein harter Wechsel hell/dunkel. */
|
|
background:
|
|
conic-gradient(from 208deg,
|
|
#eaf2fb 0deg,
|
|
#8fa3bd 26deg,
|
|
#f6fbff 52deg,
|
|
#6f8299 84deg,
|
|
#dfe9f5 116deg,
|
|
#ff8a94 150deg,
|
|
#f4f9ff 176deg,
|
|
#5d6f87 214deg,
|
|
#e6eff9 246deg,
|
|
#8fd8ff 282deg,
|
|
#f8fcff 312deg,
|
|
#7c8ea6 340deg,
|
|
#eaf2fb 360deg);
|
|
box-shadow:
|
|
/* Der zweifarbige Schein nach aussen, weit unter der Blendschwelle. */
|
|
-4px -4px 26px -13px rgba(255, 95, 109, .6),
|
|
4px 4px 26px -13px rgba(143, 216, 255, .6),
|
|
0 14px 30px -14px rgba(0, 0, 0, .95),
|
|
/* DIE MULDE. Zwei Ringe aus Schatten mit Ausdehnung: aussen die
|
|
Fraesung selbst (dunkel, 11 px breit), darauf eine haarfeine
|
|
helle Kante -- dort trifft das Licht die gegenueberliegende Wand
|
|
der Vertiefung. Zusammen macht das aus "davor" ein "darin", und
|
|
zwar konzentrisch bei jeder Groesse. */
|
|
0 0 0 11px rgba(0, 0, 0, .5),
|
|
0 0 0 12px rgba(190, 208, 230, .12),
|
|
0 6px 14px 6px rgba(0, 0, 0, .45),
|
|
/* Und der dunkle Ring, der die Fassung einlaesst -- ohne ihn liegt
|
|
sie auf dem Zifferblatt statt darin. */
|
|
inset 0 0 0 1px rgba(6, 10, 18, .85);
|
|
}
|
|
/* SCHICHT 2: die vertiefte Scheibe. */
|
|
.uhr::before {
|
|
content: ""; position: absolute; inset: 10px; border-radius: 50%;
|
|
/* DAS GUILLOCHIERTE ZIFFERBLATT.
|
|
|
|
Guillochieren ist das Verfahren, mit dem seit zweihundert Jahren
|
|
hochwertige Zifferblaetter gemacht werden: Eine Maschine schneidet
|
|
ein feines, regelmaessiges Muster in das Metall, und weil jede
|
|
Rille das Licht in einem anderen Winkel zurueckwirft, LEBT die
|
|
Flaeche, wenn man den Kopf bewegt. Es ist der Unterschied zwischen
|
|
einem lackierten und einem bearbeiteten Blatt -- und der Grund,
|
|
warum ein teures Zifferblatt teuer AUSSIEHT, ohne dass eine
|
|
einzige Farbe daran teuer waere.
|
|
|
|
Hier aus zwei Ebenen: STRAHLEN vom Mittelpunkt (der Kegelverlauf,
|
|
240 Rillen) und RINGE um den Mittelpunkt (der wiederholte
|
|
Radialverlauf, alle 3 px). Beide extrem leise -- bei 4 Prozent
|
|
Deckkraft sieht man kein Muster, man sieht eine Oberflaeche. Wer
|
|
sie einzeln erkennt, hat sie zu laut gemacht.
|
|
|
|
`closest-side`, damit die Ringe im Radius rechnen und nicht in der
|
|
weitesten Ecke -- derselbe Fehler, der heute die Skala unsichtbar
|
|
gemacht hat. */
|
|
background:
|
|
repeating-conic-gradient(from 0deg,
|
|
rgba(255, 255, 255, .045) 0deg 0.75deg,
|
|
rgba(0, 0, 0, .05) 0.75deg 1.5deg),
|
|
repeating-radial-gradient(circle closest-side at 50% 50%,
|
|
rgba(255, 255, 255, .035) 0 1px,
|
|
rgba(0, 0, 0, .045) 1px 3px),
|
|
radial-gradient(circle at 50% 26%, rgba(255, 255, 255, .06), transparent 56%),
|
|
radial-gradient(circle at 50% 50%, #0c121e 56%, #04070d 100%);
|
|
box-shadow:
|
|
inset 0 2px 7px -2px rgba(0, 0, 0, .95),
|
|
inset 0 0 0 1px rgba(190, 205, 225, .16),
|
|
inset 0 -1px 0 rgba(255, 255, 255, .05);
|
|
}
|
|
/* DIE SKALA LIEGT AUF DER LUENETTE, NICHT AUF DEM ZIFFERBLATT.
|
|
|
|
Im ersten Anlauf lag sie bei 90 bis 99 Prozent des Radius -- und
|
|
genau dort laeuft der Sekundenring. Sie war vollstaendig verdeckt,
|
|
und zwar so, dass man es nicht merkt: Eine unsichtbare Skala sieht
|
|
aus wie gar keine, nicht wie ein Fehler. Im Bildschirmfoto gesehen,
|
|
nicht im Kopf ausgerechnet.
|
|
|
|
Jetzt sitzt sie dort, wo sie bei einer echten Uhr sitzt: eingraviert
|
|
in den Metallring. Deshalb sind die Striche DUNKEL -- eine Gravur ist
|
|
eine Vertiefung, in der Schatten steht, kein aufgemalter heller
|
|
Strich. Zwoelf kraeftige fuer die Stunden, sechzig feine dazwischen,
|
|
beide aus je EINEM sich wiederholenden Kegelverlauf. */
|
|
.uhr__skala {
|
|
position: absolute; inset: 0; border-radius: 50%;
|
|
/* NUR die zwoelf Stundenmarken -- lang und kraeftig. Die sechzig
|
|
feinen Minutenstriche liegen auf einer eigenen Ebene (.uhr::after),
|
|
weil sie eine ANDERE Laenge brauchen: Auf einer echten Luenette
|
|
reichen Stundenmarken durch den ganzen Ring, Minutenstriche nur
|
|
ein Stueck vom Rand herein. Zwei Laengen heissen zwei Masken, und
|
|
zwei Masken heissen zwei Ebenen -- eine Ebene kann nur eine haben.
|
|
|
|
Beim ersten Anlauf lagen beide hier, gleich lang: Aus der Skala
|
|
wurde ein Zahnkranz. Im Bildschirmfoto gesehen. */
|
|
background:
|
|
/* AUFGESETZTE INDIZES bei 3, 6 und 9 Uhr. Auf einer guten Luenette
|
|
sind die Viertelstunden keine Striche wie die anderen, sondern
|
|
eigene Marken -- breiter und HELL statt graviert, weil sie
|
|
aufgesetzt sind und deshalb Licht fangen statt Schatten zu
|
|
halten. Ein Kegelverlauf mit 90-Grad-Takt, um 90 Grad gedreht:
|
|
So trifft er 3, 6 und 9 und laesst die 12 der roten Marke. */
|
|
repeating-conic-gradient(from 88.6deg,
|
|
rgba(244, 250, 255, .92) 0deg 2.8deg,
|
|
transparent 2.8deg 90deg),
|
|
repeating-conic-gradient(from 0deg,
|
|
rgba(6, 10, 18, .85) 0deg 1.5deg,
|
|
transparent 1.5deg 30deg);
|
|
/* `closest-side` IST HIER PFLICHT, NICHT GESCHMACK.
|
|
|
|
Ohne Angabe rechnet ein `radial-gradient` seine Prozente auf die
|
|
WEITESTE ECKE des Kastens -- bei 164 px Kantenlaenge sind das
|
|
116 px, nicht die 82 px des Radius. "89 % bis 99,5 %" lag damit
|
|
bei 103 bis 115 px und komplett AUSSERHALB der runden Uhr: Die
|
|
Skala war unsichtbar, und zwar seit es sie gibt. Eine unsichtbare
|
|
Verzierung sieht aus wie gar keine, nicht wie ein Fehler -- genau
|
|
deshalb ist sie nie aufgefallen.
|
|
|
|
Mit `closest-side` sind 100 % der Radius, und die Prozente
|
|
bedeuten das, wonach sie aussehen. */
|
|
-webkit-mask: radial-gradient(circle closest-side, transparent 0 88%, #000 88% 99.5%, transparent 99.5%);
|
|
mask: radial-gradient(circle closest-side, transparent 0 88%, #000 88% 99.5%, transparent 99.5%);
|
|
pointer-events: none; z-index: 4;
|
|
}
|
|
/* Die sechzig feinen Minutenstriche -- kurz, vom Aussenrand herein,
|
|
und deutlich leiser als die Stundenmarken. Das Verhaeltnis der beiden
|
|
ist der ganze Unterschied zwischen "Skala" und "Zahnkranz". */
|
|
.uhr::after {
|
|
content: ""; position: absolute; inset: 0; border-radius: 50%;
|
|
z-index: 4; pointer-events: none;
|
|
background:
|
|
repeating-conic-gradient(from 0deg,
|
|
rgba(6, 10, 18, .42) 0deg 0.4deg,
|
|
transparent 0.4deg 6deg);
|
|
-webkit-mask: radial-gradient(circle closest-side, transparent 0 94%, #000 94% 99.5%, transparent 99.5%);
|
|
mask: radial-gradient(circle closest-side, transparent 0 94%, #000 94% 99.5%, transparent 99.5%);
|
|
}
|
|
|
|
/* DER AUFGESETZTE ZWOELF-INDEX. Ein Keil in Hausrot mit heller
|
|
Oberkante, gesetzt auf die Luenette. Er beantwortet die Frage "wo ist
|
|
oben" ohne eine einzige Ziffer -- und er ist der einzige farbige
|
|
Punkt auf dem Metall, also auch der Blickfang. */
|
|
.uhr__zwoelf {
|
|
position: absolute; top: 3px; left: 50%;
|
|
width: 7px; height: 13px; margin-left: -3.5px;
|
|
z-index: 5; pointer-events: none;
|
|
clip-path: polygon(50% 0, 100% 100%, 0 100%);
|
|
background: linear-gradient(180deg, #ffd9dc 0%, #ff5f6d 34%, #b3323e 100%);
|
|
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .8));
|
|
}
|
|
|
|
/* DIE PERLE. Ein Kasten in voller Groesse, der sich dreht -- die Perle
|
|
selbst sitzt oben auf dem Radius des Sekundenbogens. So braucht die
|
|
Drehung keine Rechnung mit Winkelfunktionen: Der Kasten dreht sich,
|
|
die Perle wird mitgenommen. */
|
|
.uhr__perle {
|
|
position: absolute; inset: 10px;
|
|
z-index: 5; pointer-events: none;
|
|
transform: rotate(0deg);
|
|
transition: transform .12s cubic-bezier(.34, 1.56, .64, 1);
|
|
}
|
|
.uhr__perle::before {
|
|
content: "";
|
|
position: absolute; top: 4.2%; left: 50%;
|
|
width: 7px; height: 7px; margin-left: -3.5px;
|
|
border-radius: 50%;
|
|
background:
|
|
radial-gradient(circle at 36% 32%, #fff 0%, #ff9aa2 38%, #ff2f42 72%, #8e1b26 100%);
|
|
box-shadow:
|
|
0 0 6px 1px rgba(255, 70, 90, .75),
|
|
0 0 14px 3px rgba(255, 70, 90, .35),
|
|
inset 0 0 0 .5px rgba(255, 255, 255, .5);
|
|
}
|
|
/* Die Kappen der beiden anderen Ringe. Sie sitzen auf DEREN Bahn --
|
|
der Abstand von der Mitte ist der einzige Unterschied, alles andere
|
|
erbt von der Perle. Die Farbe folgt dem Ring: Minute babyblau,
|
|
Stunde poliertes Silber. */
|
|
.uhr__perle--minute::before {
|
|
top: 12.6%;
|
|
width: 6px; height: 6px; margin-left: -3px;
|
|
background: radial-gradient(circle at 36% 32%, #fff 0%, #cfe9ff 36%, #4aa8f0 72%, #17527f 100%);
|
|
box-shadow:
|
|
0 0 5px 1px rgba(90, 180, 255, .7),
|
|
inset 0 0 0 .5px rgba(255, 255, 255, .55);
|
|
}
|
|
.uhr__perle--stunde::before {
|
|
top: 21.4%;
|
|
width: 5.4px; height: 5.4px; margin-left: -2.7px;
|
|
background: radial-gradient(circle at 34% 30%, #ffffff 0%, #dfe8f2 34%, #8b98a8 70%, #3d4653 100%);
|
|
box-shadow:
|
|
0 0 4px 1px rgba(220, 235, 255, .45),
|
|
inset 0 0 0 .5px rgba(255, 255, 255, .6);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
/* Kein Nachfedern -- der Sprung bleibt, das Schwingen geht. */
|
|
.uhr__perle { transition: none; }
|
|
}
|
|
@media (forced-colors: active) {
|
|
.uhr__zwoelf, .uhr__perle { display: none; }
|
|
.uhr__schatten, .uhr__kante { display: none; }
|
|
}
|
|
|
|
/* SCHICHT 3: DAS GLAS -- ENTSPIEGELTES SAPHIRGLAS (07.09.2026)
|
|
|
|
Nachgelesen statt geraten. Eine Entspiegelung (Anti-Reflex) wird im
|
|
Vakuum aufgedampft und senkt die Spiegelung auf unter ein Prozent;
|
|
das Zifferblatt wirkt dadurch SCHAERFER, nicht milchiger. Und das
|
|
Erkennungszeichen einer guten Beschichtung ist kein weisser Schleier,
|
|
sondern ein **topasblauer Schimmer**, der je nach Lichteinfall ueber
|
|
das Glas laeuft -- daran sieht ein Kenner sofort, dass da Saphirglas
|
|
sitzt und kein Mineralglas.
|
|
|
|
Vorher lag hier genau das Gegenteil: ein breiter weisser Verlauf
|
|
ueber ein Fuenftel der Scheibe. Das ist die Spiegelung eines
|
|
UNBESCHICHTETEN Glases -- also ausgerechnet das Merkmal des
|
|
billigeren Materials.
|
|
|
|
Jetzt drei Dinge, jedes davon aus der Sache begruendet:
|
|
1. ein SCHMALER, harter Reflexbogen oben links -- die Kante der
|
|
Woelbung, das Einzige, was auch entspiegelt stehen bleibt
|
|
2. der topasblaue Schimmer, diagonal, sehr leise
|
|
3. die haarfeine helle Linie an der Oberkante -- die Schnittkante
|
|
des Glases selbst
|
|
|
|
Quellen zur Beschichtung: reservoir-watch.com und botta-design.de
|
|
(siehe Antwort im Verlauf). */
|
|
.uhr__glas {
|
|
position: absolute; inset: 10px; border-radius: 50%;
|
|
background:
|
|
linear-gradient(142deg,
|
|
rgba(255, 255, 255, .16) 0%,
|
|
rgba(255, 255, 255, .05) 7%,
|
|
transparent 15%),
|
|
linear-gradient(128deg,
|
|
transparent 30%,
|
|
rgba(120, 190, 255, .10) 44%,
|
|
rgba(150, 130, 255, .07) 52%,
|
|
transparent 64%);
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
|
|
pointer-events: none; z-index: 3;
|
|
}
|
|
|
|
.uhr__ring {
|
|
position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px);
|
|
/* Bei Null soll der Ring OBEN beginnen, nicht rechts. */
|
|
transform: rotate(-90deg);
|
|
z-index: 2;
|
|
overflow: visible;
|
|
}
|
|
/* DREI RINGE, ALLE SCHARF (07.09.2026).
|
|
|
|
Filipe: "die minuten blau, [die stunden] schwarzsilber glaenzend und
|
|
die sekunden rot ... soll null unscharf sein, sehr schoen praezise."
|
|
|
|
KEIN blur(), KEIN drop-shadow auf den Boegen. Ein Weichzeichner auf
|
|
einer Linie macht sie nicht edler, sondern unscharf -- genau das war
|
|
der Vorwurf, und er stimmte: An der alten Uhr lag ein blur(1.2px) auf
|
|
dem Schein und ein drop-shadow auf dem Sekundenbogen.
|
|
|
|
Der GLANZ entsteht stattdessen aus dem Verlauf selbst. Echtes Metall
|
|
glaenzt nicht, weil es leuchtet, sondern weil es das Licht an
|
|
verschiedenen Stellen verschieden zurueckwirft: hell, dunkel, hell,
|
|
dunkel. Genau das machen die fuenf Stopps des Silberverlaufs im SVG.
|
|
Ein zweifarbiger Verlauf waere ein Farbverlauf; erst der Wechsel ist
|
|
Metall.
|
|
|
|
Die Kappen sind BUTT und nicht rund. Eine runde Kappe steht ueber das
|
|
Ende hinaus -- bei "null Sekunden" saehe man dann trotzdem einen
|
|
Punkt, und die Anzeige waere um zwei Grad falsch. Praezise heisst
|
|
auch: nichts anzeigen, wo nichts ist. */
|
|
.uhr__bahn, .uhr__stunde, .uhr__minute, .uhr__sekunde {
|
|
fill: none;
|
|
stroke-linecap: butt;
|
|
}
|
|
/* DIE BAHN IST EINE GEFRAESTE RILLE, kein blasser Kreis.
|
|
|
|
Ein Zeiger laeuft bei einem guten Instrument IN einer Vertiefung,
|
|
nicht auf einer Flaeche. Eine Rille erkennt man an zweierlei: Sie ist
|
|
dunkler als ihre Umgebung, und an ihrer unteren Wand steht eine helle
|
|
Kante, wo das Licht von oben auftrifft. Beides steht hier -- die
|
|
Kante als zweiter, um ein Drittel nach unten versetzter Kreis.
|
|
|
|
Die Breite folgt dem Ring, der darin laeuft: aussen 3,4 fuer die
|
|
Sekunde, in der Mitte 3,8, innen 4,4. Eine Rille, die schmaler ist
|
|
als ihr Zeiger, ist keine. */
|
|
.uhr__bahn { stroke: rgba(4, 7, 13, .78); stroke-width: 4.4; }
|
|
.uhr__bahn:nth-of-type(1) { stroke-width: 3.6; }
|
|
.uhr__bahn:nth-of-type(2) { stroke-width: 4; }
|
|
.uhr__rillenkante circle {
|
|
fill: none;
|
|
stroke: rgba(190, 215, 245, .16);
|
|
stroke-width: 1;
|
|
}
|
|
|
|
/* AUSSEN: die SEKUNDE in Rot, auf der laengsten Bahn (07.09.2026
|
|
gedreht, Wunsch Filipe: "die minuten in der mitte und sekunden
|
|
aussen").
|
|
|
|
Das ist die Anordnung eines Chronographen und nicht die eines
|
|
Fortschrittsbalkens: Der schnellste Zeiger laeuft aussen, weil man
|
|
Bewegung dort am besten sieht -- und der langsamste innen, wo eine
|
|
kleine Drehung schon viel bedeutet.
|
|
|
|
DIE ZAHLEN GEHOEREN ZUM RADIUS. Ein vertauschter Ring ohne
|
|
vertauschte Umfaenge sieht aus wie eine haengende Uhr: Der Bogen
|
|
endet dann nie dort, wo er soll. U = 2 * pi * r, ausgerechnet und
|
|
nicht geschaetzt. */
|
|
.uhr__sekunde {
|
|
stroke: url(#uhr-rot);
|
|
stroke-width: 2.6;
|
|
stroke-dasharray: 285.88; /* r = 45.5 */
|
|
stroke-dashoffset: 285.88;
|
|
}
|
|
/* MITTE: die Minute in Blau. */
|
|
.uhr__minute {
|
|
stroke: url(#uhr-blau);
|
|
stroke-width: 3;
|
|
stroke-dasharray: 241.90; /* r = 38.5 */
|
|
stroke-dashoffset: 241.90;
|
|
}
|
|
/* INNEN: die STUNDE in Schwarzsilber. Am breitesten und am ruhigsten --
|
|
sie bewegt sich in fuenf Minuten um ein halbes Grad. */
|
|
.uhr__stunde {
|
|
stroke: url(#uhr-silber);
|
|
stroke-width: 3.6;
|
|
stroke-dasharray: 197.92; /* r = 31.5 */
|
|
stroke-dashoffset: 197.92;
|
|
}
|
|
|
|
/* DER SCHLAGSCHATTEN JEDES BOGENS. Dieselbe Bahn, schwarz, ein wenig
|
|
breiter -- und um ein halbes Rastermass nach unten geschoben (im
|
|
HTML). Er macht aus einem aufgemalten Strich einen Koerper, der
|
|
ueber dem Zifferblatt liegt. */
|
|
.uhr__schatten circle {
|
|
stroke: rgba(0, 0, 0, .62) !important;
|
|
stroke-width: 4.6;
|
|
}
|
|
.uhr__schatten .uhr__sekunde { stroke-width: 3.8; }
|
|
.uhr__schatten .uhr__minute { stroke-width: 4.2; }
|
|
|
|
/* DIE BELEUCHTETE OBERKANTE. Duenner, hell, nach oben versetzt: Sie
|
|
schaut oben hervor und verschwindet unten -- genau das tut eine
|
|
gewoelbte Kante bei Licht von oben. Das ist der ganze Unterschied
|
|
zwischen einem Strich und einem Ring aus Material. */
|
|
.uhr__kante circle {
|
|
stroke: rgba(255, 255, 255, .72) !important;
|
|
stroke-width: .9;
|
|
}
|
|
.uhr__kante .uhr__stunde { stroke: rgba(255, 255, 255, .5) !important; }
|
|
|
|
/* DIE ZIFFERNINSEL (07.09.2026).
|
|
|
|
Seit der Stundenring eine beleuchtete Oberkante hat, laeuft ein
|
|
heller Bogen hinter den Ziffern durch. pruef-buehne hat es sofort
|
|
gemeldet: schlechtester Kontrast 2,98:1 gegen rgb(125,147,165) --
|
|
knapp unter der Grenze von 3:1, und zwar genau bei der Uhrzeit, also
|
|
der wichtigsten Angabe der ganzen Flaeche.
|
|
|
|
Das ist kein Grund, die Kante wieder wegzunehmen. Auf einer echten
|
|
Uhr steht eine Anzeige, die ueber Zeigern liegt, auf einer eigenen
|
|
Flaeche -- einer vertieften Insel im Zifferblatt. Genau die steht
|
|
jetzt hier: dunkel in der Mitte, nach aussen weich auslaufend, damit
|
|
sie keine sichtbare Kante bekommt. Der Kontrast ist damit
|
|
unabhaengig davon, was hinter ihr vorbeilaeuft.
|
|
|
|
Die Lehre allgemein: Wenn eine neue Schicht einen Text unlesbar
|
|
macht, ist die Antwort selten "Schicht weg" -- meistens fehlt dem
|
|
Text sein Untergrund. */
|
|
.uhr__mitte {
|
|
position: relative; z-index: 4;
|
|
display: grid; justify-items: center; gap: 2px; line-height: 1;
|
|
padding: 6px 14px;
|
|
}
|
|
.uhr__mitte::before {
|
|
content: ""; position: absolute; inset: -6px -10px;
|
|
z-index: -1; pointer-events: none;
|
|
border-radius: 50%;
|
|
background:
|
|
radial-gradient(closest-side, rgba(4, 7, 13, .93) 0%,
|
|
rgba(4, 7, 13, .88) 52%, rgba(4, 7, 13, .55) 78%, transparent 100%);
|
|
}
|
|
.uhr__zeit {
|
|
font-size: 1.86rem; font-weight: 700; letter-spacing: -.015em;
|
|
/* Gleiche Zifferbreite: Ohne sie zappelt die Anzeige bei jedem
|
|
Minutenwechsel, weil die 1 schmaler ist als die 8. */
|
|
font-variant-numeric: tabular-nums;
|
|
color: #f2f8ff;
|
|
/* DIE MISCHUNG IM TEXT, ohne Verlaufsschrift: zwei Schatten, einer
|
|
rot von links, einer babyblau von rechts. Ein Verlauf IN der
|
|
Schrift (background-clip: text) wuerde im Windows-Kontrastmodus zu
|
|
unsichtbarer Schrift -- derselbe Grund, aus dem die Ueberschrift
|
|
daneben eine feste Farbe traegt. */
|
|
/* GRAVIERT STATT GEDRUCKT. Zwei zusaetzliche Schatten mit einem
|
|
halben Pixel Versatz: einer dunkel nach oben, einer hell nach
|
|
unten. Das ist genau das Lichtverhalten einer Vertiefung -- oben
|
|
faellt Schatten hinein, unten trifft das Licht die
|
|
gegenueberliegende Wand. Zusammen mit den beiden farbigen Scheinen
|
|
stehen die Ziffern damit IM Blatt statt darauf. */
|
|
text-shadow:
|
|
0 -.5px 0 rgba(0, 0, 0, .85),
|
|
0 .5px 0 rgba(255, 255, 255, .22),
|
|
-6px 0 16px rgba(255, 95, 109, .38),
|
|
6px 0 16px rgba(143, 216, 255, .42);
|
|
}
|
|
.uhr__sek {
|
|
/* .74rem = 11,84 px. Bei .68rem waren es 10,88 -- unter der Grenze von
|
|
11,5, die pruef-css-klassen zieht, und sie hat recht: Diese Ziffern
|
|
stehen gesperrt und in Versalhöhe, dadurch wirken sie noch kleiner
|
|
als die Zahl sagt. */
|
|
font-size: .74rem; font-weight: 700;
|
|
font-variant-numeric: tabular-nums;
|
|
letter-spacing: .18em; text-indent: .18em;
|
|
/* EIN EINGELASSENES FENSTER, kein Etikett.
|
|
|
|
Auf einer Uhr sitzt eine Zusatzanzeige in einer AUSSPARUNG des
|
|
Zifferblatts -- man sieht durch das Blatt hindurch auf die Scheibe
|
|
darunter. Das erkennt man an zwei Dingen: der Schatten faellt oben
|
|
hinein, und unten steht eine helle Kante, wo das Licht die
|
|
gegenueberliegende Wand trifft. Genau diese beiden Schatten stehen
|
|
hier. Die abgeschnittene Ecke nimmt die Sprache der Kacheln auf. */
|
|
padding: 1px 7px 1px 8px;
|
|
border-radius: 0;
|
|
clip-path: polygon(4px 0, 100% 0, 100% 100%, 0 100%, 0 4px);
|
|
color: #d8ecfb;
|
|
background:
|
|
linear-gradient(180deg, #05080e 0%, #0a1018 100%);
|
|
box-shadow:
|
|
inset 0 2px 3px -1px rgba(0, 0, 0, .95),
|
|
inset 0 -1px 0 rgba(190, 215, 240, .28),
|
|
0 1px 0 rgba(255, 255, 255, .05);
|
|
box-shadow: inset 0 0 0 1px rgba(143, 216, 255, .16);
|
|
}
|
|
|
|
/* Die Glocke in der Kachel wird in start.css gestaltet und nicht hier.
|
|
|
|
Grund (07.09.2026, gefunden von pruef-css-klassen): `glocke.js` laeuft
|
|
auf ALLEN siebzehn Seiten und setzt die Klasse `glocke--kachel`,
|
|
sobald es einen Platz dafuer gibt. Heute gibt es den nur hier -- aber
|
|
die Regel gehoert dorthin, wo das Skript sie brauchen KANN, nicht
|
|
dorthin, wo es sie heute zufaellig braucht. Sonst sieht die Glocke
|
|
auf der naechsten Seite, die einen Platz bekommt, falsch aus, und
|
|
niemand sucht den Fehler in der Aufteilung der Stildateien.
|
|
|
|
Die Pruefung hat genau das gemeldet: "gestaltet, aber nicht auf ihrer
|
|
Seite -- fehlt auf 17 Seiten". */
|
|
|
|
@media (max-width: 620px) {
|
|
/* Die Nut trennt Text von Instrumenten -- nebeneinander. Untereinander
|
|
traennte sie nichts und stuende quer im Bild. */
|
|
.willkommen__rechts::before { display: none; }
|
|
/* Auf dem Handy rückt die Gruppe unter den Gruß und die Uhr wird
|
|
kleiner -- 108 px neben einer Überschrift lassen für den Namen
|
|
keine Zeile mehr übrig. */
|
|
.willkommen { padding: 18px 16px; }
|
|
.willkommen__rechts { margin-left: 0; width: 100%; justify-content: flex-start; }
|
|
/* DER STAND RICHTET SICH NACH DER UHR, NICHT NACH DEM RAND.
|
|
|
|
Am Rechner sitzt er rechts, weil dort auch die Uhr rechts sitzt.
|
|
Auf dem Handy rutscht die Uhr nach LINKS (Zeile darueber) -- der
|
|
Stand blieb dabei rechtsbuendig und stand als einziges Bauteil auf
|
|
der falschen Seite. Im Bildschirmfoto bei 412 px gesehen, nicht
|
|
hergeleitet.
|
|
|
|
`align-self` statt `margin-left: 0`: Der Kasten soll auf die volle
|
|
Breite gehen duerfen, wenn drei Felder nebeneinander nicht mehr
|
|
passen -- dann verteilen sie sich, statt sich zu stauchen. */
|
|
.willkommen__stand {
|
|
/* `margin-left: 0` steht hier nicht mehr: Der `auto`-Rand, den es
|
|
zuruecknehmen musste, ist seit dem 08.09.2026 aus der Grundregel
|
|
verschwunden. Eine Zeile, die nichts mehr aufhebt, sieht aus wie
|
|
eine Absicht und wird beim naechsten Mal mitgeschleppt. */
|
|
width: 100%;
|
|
justify-content: space-around;
|
|
}
|
|
.stand { min-width: 0; flex: 1 1 0; padding: 10px 8px 9px; }
|
|
.uhr { width: 118px; height: 118px; padding: 4px; }
|
|
.uhr__zeit { font-size: 1.3rem; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
/* Die Uhr springt ohnehin -- hier gibt es nichts abzuschalten. Die
|
|
Zeile steht trotzdem da, damit der nächste, der einen weichen
|
|
Zeiger einbaut, sie findet. */
|
|
.uhr__stunde, .uhr__minute, .uhr__sekunde { transition: none; }
|
|
}
|
|
@media (forced-colors: active) {
|
|
.uhr { background: Canvas; box-shadow: none; border: 1px solid CanvasText; }
|
|
.uhr__skala, .uhr__glas { display: none; }
|
|
}
|
|
|
|
/* =====================================================================
|
|
GRUPPEN LASSEN SICH ZUKLAPPEN (07.09.2026)
|
|
|
|
Wunsch Filipe: "diese kategorien soll man auch zu und aufmachen
|
|
koennen so wie es einem lieb ist gerade."
|
|
|
|
DIE UEBERSCHRIFT IST DER SCHALTER. Ein kleines Dreieck daneben waere
|
|
ein Ziel von 14 Pixeln; die ganze Zeile ist eines von 40. Deshalb ist
|
|
der Kopf ein <button> und nicht ein <div> mit einem Knopf darin --
|
|
damit kommt auch die Tastaturbedienung geschenkt.
|
|
|
|
Ein Knopf bringt allerdings die Vorgaben des Browsers mit (eigene
|
|
Schrift, eigener Rand, zentrierter Text). Die muessen alle
|
|
zurueckgesetzt werden, sonst sieht die Ueberschrift wie eine
|
|
Schaltflaeche aus -- und genau das soll sie NICHT: Sie soll aussehen
|
|
wie vorher und sich nur anders anfuehlen.
|
|
===================================================================== */
|
|
.gruppe__kopf {
|
|
/* Alles, was ein <button> mitbringt, wieder aus. */
|
|
appearance: none; -webkit-appearance: none;
|
|
width: 100%;
|
|
font: inherit; color: inherit; text-align: left;
|
|
border: 0; background: none;
|
|
cursor: pointer;
|
|
/* Und der Aufbau von vorher. */
|
|
position: relative;
|
|
display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
|
|
margin-bottom: 14px; padding: 6px 4px 10px;
|
|
border-radius: 10px;
|
|
transition: background var(--tempo);
|
|
}
|
|
.gruppe__kopf:hover { background: rgba(255, 255, 255, .035); }
|
|
.gruppe__kopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
|
|
|
|
/* Die Zahl sagt, was hinter einer zugeklappten Gruppe steckt. Sie steht
|
|
ganz rechts, direkt vor dem Pfeil -- dort sucht man sie. */
|
|
.gruppe__zahl {
|
|
margin-left: auto;
|
|
min-width: 22px; padding: 1px 8px;
|
|
border-radius: 999px;
|
|
background: rgba(255, 255, 255, .06);
|
|
color: var(--text-still);
|
|
font-size: .74rem; font-weight: 700;
|
|
font-variant-numeric: tabular-nums;
|
|
text-align: center;
|
|
}
|
|
.gruppe__pfeil {
|
|
width: 16px; height: 16px; flex: none;
|
|
color: var(--text-still);
|
|
transition: transform var(--tempo), color var(--tempo);
|
|
}
|
|
.gruppe__kopf:hover .gruppe__pfeil { color: var(--text); }
|
|
/* Zugeklappt zeigt der Pfeil nach rechts -- die Richtung, in die es
|
|
geht, wenn man drueckt. */
|
|
.gruppe[data-zu="ja"] .gruppe__pfeil { transform: rotate(-90deg); }
|
|
|
|
/* Eine zugeklappte Gruppe rueckt zusammen: Der Abstand, den die Kacheln
|
|
gebraucht haben, gehoert ihnen und nicht der Ueberschrift. */
|
|
.gruppe[data-zu="ja"] { margin-bottom: 10px; }
|
|
.gruppe[data-zu="ja"] .gruppe__kopf { margin-bottom: 0; }
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.gruppe__kopf, .gruppe__pfeil { transition: none; }
|
|
}
|
|
@media (forced-colors: active) {
|
|
.gruppe__kopf { border: 1px solid CanvasText; }
|
|
}
|
|
|
|
/* ===================================================================
|
|
DER HUSKY RECHTS IN DER KOPFLEISTE (08.09.2026)
|
|
|
|
Filipe: "wo der husky ist soll eine geile rot grüne peperoni sein …
|
|
und der husky von links soll rechts sein."
|
|
|
|
Zusammen mit der Chili links (start.css) ergibt das eine Klammer um
|
|
den Schriftzug: Spicy links, Dogi rechts -- genau die Reihenfolge des
|
|
Namens "Spicy & Dogi", und die Farben laufen zwischen beiden über den
|
|
Text aufeinander zu.
|
|
|
|
WARUM DIESE REGEL HIER STEHT UND NICHT IN start.css: heim.css wird
|
|
ausschliesslich von der Startseite geladen. Auf den Unterseiten traegt
|
|
`.marke` den Rueckweg statt des Markennamens -- dort hat der Husky
|
|
nicht nur nichts zu suchen, er hat auch Schaden angerichtet: Seine
|
|
22 px plus Abstand nahmen dem Text so viel Platz, dass "Creator
|
|
Workspace" zu "CREAT…" abgeschnitten wurde.
|
|
|
|
Der naheliegende Weg, ein `body.start` davorzusetzen, funktioniert
|
|
NICHT: Diese Klasse tragen alle 18 Seiten -- sie kennzeichnet den
|
|
Grundstil, nicht die Startseite. Der Selektor las sich richtig und
|
|
war es nicht; gesehen erst im Bildschirmfoto der Unterseite.
|
|
|
|
Als MASKE und nicht als Bild: Der Husky ist schwarzweiss gezeichnet
|
|
und waere auf dunklem Grund ein dunkler Fleck. Von einer Maske zaehlt
|
|
nur die Silhouette, und die wird hier mit Silber und Babyblau
|
|
gefuellt -- seine beiden Farben aus dem Rollenschema. Die Augenfarbe
|
|
klingt im Verlauf an, ohne dass man bei 22 px Augen zeichnen muesste.
|
|
=================================================================== */
|
|
.kopfleiste .marke::after {
|
|
content: "";
|
|
flex: none; width: 22px; height: 22px;
|
|
background: linear-gradient(160deg, #eaf1f8 8%, #b9c6d6 46%, var(--dogi-haupt) 100%);
|
|
-webkit-mask: url("../img/marke-husky.webp") center / contain no-repeat;
|
|
mask: url("../img/marke-husky.webp") center / contain no-repeat;
|
|
transition: filter var(--tempo);
|
|
}
|
|
.kopfleiste:hover .marke::after { filter: brightness(1.2); }
|
|
|
|
/* ===================================================================
|
|
DIE BEGRUESSUNG SOLL MOTIVIEREN (08.09.2026)
|
|
|
|
Filipe, screen35: "die begrüßungen sollen auch viel krasser und geiler
|
|
sein, so richtig auffällig. so dass die leute motivation bekommen weil
|
|
es so geil aussieht."
|
|
|
|
NICHT UEBER DIE GROESSE. Genau die habe ich heute frueh von 88 auf
|
|
56 px zurueckgenommen, weil in der Pille ein <h1> mit Titelgroesse
|
|
steckte und damit ZWEI Ueberschriften uebereinander standen. Das
|
|
wieder aufzublasen hiesse, denselben Fehler noch einmal zu machen --
|
|
und "auffaellig" heisst ohnehin nicht "gross", sondern "hebt sich ab".
|
|
|
|
Der Name hebt sich jetzt ueber die FARBE ab: Er traegt einen Verlauf
|
|
in der Farbe der eigenen Rolle (`--r-haupt`, gesetzt am <html>). Jeder
|
|
sieht dadurch seinen eigenen Namen in seiner eigenen Farbe -- Spicy
|
|
rot, Dogi babyblau, ein Manager lila, ein Scout gruen, ein Creator
|
|
bronze. Das ist der Unterschied zwischen "da steht mein Name" und "das
|
|
hier ist meins".
|
|
|
|
Der Gruss davor bleibt bewusst leise und ohne Farbe. Wenn beides
|
|
leuchtet, leuchtet nichts -- die Betonung liegt auf dem Namen, nicht
|
|
auf der Uhrzeit.
|
|
|
|
MIT SICHERUNG, wie beim Schriftzug in der Kopfleiste: `color` steht
|
|
zuerst und sichtbar da, der Verlauf kommt nur im @supports-Block dazu,
|
|
und im Kontrastmodus wird alles zurueckgenommen. Durchsichtige Schrift
|
|
ohne Rueckfallwert waere ein Ausfall, kein Schoenheitsfehler. */
|
|
.zgruss .gruss__wort {
|
|
color: rgba(190, 210, 232, .82);
|
|
font-weight: 500;
|
|
}
|
|
.zgruss .gruss__name {
|
|
color: #eaf3fc;
|
|
font-weight: 800;
|
|
letter-spacing: -.01em;
|
|
}
|
|
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
|
|
.zgruss .gruss__name {
|
|
background: linear-gradient(96deg,
|
|
color-mix(in srgb, var(--r-haupt) 34%, #ffffff) 0%,
|
|
var(--r-haupt) 52%,
|
|
color-mix(in srgb, var(--r-haupt) 62%, #ffffff) 100%);
|
|
-webkit-background-clip: text; background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
/* Das Leuchten liegt HINTER der Schrift und wird vom Zuschnitt
|
|
nicht erfasst -- es gibt dem Namen Tiefe, ohne ihn zu vergroessern. */
|
|
filter: drop-shadow(0 0 10px color-mix(in srgb, var(--r-haupt) 45%, transparent));
|
|
}
|
|
}
|
|
@media (forced-colors: active) {
|
|
.zgruss .gruss__name {
|
|
background: none; -webkit-text-fill-color: currentColor;
|
|
color: CanvasText; filter: none;
|
|
}
|
|
}
|
|
|
|
/* ===================================================================
|
|
DIE DREI BAHNEN DER UHR GLUEHEN VON INNEN (08.09.2026)
|
|
|
|
Filipe: "die minuten sekunden und stunden soll viel spezieller,
|
|
krasser und geiler sein, noch vieeeel mehr."
|
|
|
|
Die Bahnen waren flache Striche in einem Verlauf -- sauber gebaut,
|
|
aber ohne Koerper. Drei Dinge geben ihnen Tiefe, und alle drei
|
|
arbeiten mit LICHT statt mit mehr Farbe:
|
|
|
|
1. EIGENLEUCHTEN. Jede Bahn wirft einen Schein in ihrer eigenen
|
|
Farbe. Das ist nicht Deko: Auf einem schwarzen Zifferblatt kann
|
|
man einen Strich entweder heller machen (dann blendet er) oder
|
|
leuchten lassen (dann wirkt er wie eine Anzeige, die Licht
|
|
abgibt). Zwei Schatten je Bahn, ein enger und ein weiter -- der
|
|
enge gibt die Kante, der weite die Aura.
|
|
|
|
2. DIE SPITZE IST HELLER ALS DER REST. `stroke-linecap: round` plus
|
|
ein zweiter, kuerzerer Bogen darueber gibt es hier nicht -- statt
|
|
dessen leuchtet die PERLE am Ende staerker (siehe unten). Das
|
|
Auge sucht bei einer Uhr die Spitze, nicht den Anfang.
|
|
|
|
3. DIE STUNDE WIRD WARM. Sie lief in Schwarzsilber und war damit
|
|
dem Zifferblatt am aehnlichsten -- ausgerechnet die Bahn, die man
|
|
am haeufigsten abliest. Sie bekommt jetzt einen Bronzeschimmer:
|
|
warm gegen das kalte Blau der Minute und das Rot der Sekunde, und
|
|
damit sind alle drei auf einen Blick zu trennen.
|
|
|
|
AUGENSCHONEND BLEIBT PFLICHT. Die Uhr steht dauerhaft im Bild. Der
|
|
Schein liegt deshalb bei 45 bis 55 Prozent Deckkraft und wird NICHT
|
|
animiert -- ein pulsierendes Leuchten am Bildrand ist genau das, was
|
|
die Hausregel verbietet. */
|
|
/* DIE SEKUNDE GLUEHT SCHWAECHER ALS DIE ANDEREN BEIDEN, und das ist
|
|
Absicht: Sie ist die laengste Bahn, die hellste Farbe und die
|
|
einzige, die sich sichtbar bewegt. Mit demselben Schein wie Minute
|
|
und Stunde zog sie im Bildschirmfoto den ganzen Blick auf sich --
|
|
ein roter Reifen, neben dem die Uhrzeit selbst zurueckstand.
|
|
Nachgesehen, nicht gerechnet. */
|
|
.uhr__sekunde {
|
|
stroke-width: 3;
|
|
filter:
|
|
drop-shadow(0 0 1.5px rgba(255, 118, 132, .8))
|
|
drop-shadow(0 0 6px rgba(255, 70, 90, .3));
|
|
}
|
|
.uhr__minute {
|
|
stroke-width: 3.4;
|
|
filter:
|
|
drop-shadow(0 0 2px rgba(120, 200, 255, .95))
|
|
drop-shadow(0 0 8px rgba(70, 165, 245, .48));
|
|
}
|
|
.uhr__stunde {
|
|
stroke-width: 4;
|
|
filter:
|
|
drop-shadow(0 0 2px rgba(255, 214, 160, .9))
|
|
drop-shadow(0 0 9px rgba(214, 154, 82, .45));
|
|
}
|
|
|
|
/* Die Perle am Ende jeder Bahn ist die Spitze -- dort schaut man hin.
|
|
Sie bekommt denselben Schein wie ihre Bahn, nur staerker, und einen
|
|
weissen Kern: Das ist der Unterschied zwischen einem farbigen Punkt
|
|
und einem Licht. */
|
|
.uhr__perle::before {
|
|
box-shadow:
|
|
0 0 0 1px rgba(255, 255, 255, .5),
|
|
0 0 6px 1px currentColor,
|
|
0 0 14px 2px currentColor;
|
|
}
|
|
.uhr__perle--minute::before { color: rgba(99, 184, 245, .85); }
|
|
.uhr__perle--stunde::before { color: rgba(226, 176, 108, .8); }
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
/* Kein Leuchten ohne Not: Wer weniger Bewegung will, will meist auch
|
|
weniger Reiz. Die Bahnen bleiben in voller Farbe stehen. */
|
|
.uhr__sekunde, .uhr__minute, .uhr__stunde { filter: none; }
|
|
}
|
|
|
|
/* ===================================================================
|
|
DER KOMETENSCHWEIF (08.09.2026)
|
|
|
|
Filipe: "auch die lichter von sekunden, minuten und stunden perfekt
|
|
anpassen, wie die läuft und aussieht soll wirklich mega perfekt sein
|
|
... überrasch mich."
|
|
|
|
WAS ER LEISTET: Ein Bogen in gleichmaessiger Farbe zeigt einen
|
|
STAND. Ein Bogen, der zur Spitze hin heller wird, zeigt eine
|
|
RICHTUNG -- man sieht ohne Nachdenken, wo "jetzt" ist und wohin es
|
|
laeuft. Bei drei Ringen uebereinander ist das der Unterschied
|
|
zwischen Ablesen und Erkennen.
|
|
|
|
WARUM ZWEI LAGEN UND KEIN VERLAUF: Ein Farbverlauf ENTLANG einer
|
|
Kreisbahn geht in SVG nicht -- `linearGradient` folgt einer Geraden,
|
|
`radialGradient` einem Radius, keiner einer Bahn. Der ehrliche Weg
|
|
ist ein zweites, kuerzeres Segment ueber dem ersten. Es liegt vor
|
|
der Oberkante, damit die helle Kante auch auf dem Schweif sitzt.
|
|
|
|
`stroke-linecap: round` nur hier, nicht am Hauptbogen: Die runde
|
|
Kappe markiert die Spitze. Am Hauptbogen wuerde sie auch den ANFANG
|
|
runden -- und der liegt bei zwoelf Uhr, wo eine runde Kappe wie ein
|
|
Fehler aussieht.
|
|
|
|
AUGENSCHONEND: Der Schweif ist heller als der Bogen, aber nicht
|
|
greller -- er bleibt in derselben Farbfamilie und wird nicht
|
|
animiert. Was hier leuchtet, leuchtet ruhig. */
|
|
/* KEINE EIGENE DREHUNG (Korrektur nach dem Bildschirmfoto).
|
|
|
|
Ich hatte hier `transform: rotate(-90deg)` gesetzt, damit der
|
|
Schweif wie die Bahnen bei zwoelf Uhr beginnt. Das war doppelt: Das
|
|
ganze SVG `.uhr__ring` ist bereits um -90 Grad gedreht (siehe dort,
|
|
"Bei Null soll der Ring OBEN beginnen"). Die Schweife standen
|
|
dadurch exakt eine Vierteldrehung neben ihren Boegen -- im Bild oben
|
|
links, waehrend die Boegen oben rechts endeten. Die Rechnung war
|
|
richtig, die Drehung eine zu viel. */
|
|
.uhr__spur-bahn {
|
|
fill: none;
|
|
stroke-linecap: round;
|
|
opacity: .95;
|
|
}
|
|
.uhr__spur-bahn[data-spur="sekunde"] {
|
|
stroke: #ffd2d6; stroke-width: 3;
|
|
filter: drop-shadow(0 0 3px rgba(255, 120, 134, .85));
|
|
}
|
|
.uhr__spur-bahn[data-spur="minute"] {
|
|
stroke: #d8efff; stroke-width: 3.4;
|
|
filter: drop-shadow(0 0 3px rgba(130, 205, 255, .8));
|
|
}
|
|
.uhr__spur-bahn[data-spur="stunde"] {
|
|
stroke: #ffe9c9; stroke-width: 4;
|
|
filter: drop-shadow(0 0 3px rgba(233, 190, 130, .75));
|
|
}
|
|
|
|
/* DIE KOEPFE GLEITEN, STATT ZU SPRINGEN.
|
|
|
|
Die Anzeige selbst rechnet weiterhin nur EINMAL je Sekunde -- das
|
|
war eine bewusste Entscheidung (sechzig Bildberechnungen je Sekunde
|
|
halten auf einer stundenlang offenen Seite den Rechner warm). Die
|
|
Bewegung dazwischen uebernimmt der Browser: eine Ueberblendung von
|
|
knapp einer Sekunde, die genau bis zum naechsten Takt laeuft.
|
|
|
|
Damit sieht die Perle aus wie ein gleitender Zeiger und kostet
|
|
trotzdem nichts. Voraussetzung ist, dass der Winkel WEITERZAEHLT
|
|
statt bei 360 Grad zurueckzuspringen -- sonst liefe die Ueberblendung
|
|
einmal je Minute rueckwaerts durch das ganze Zifferblatt. Genau das
|
|
macht start.js jetzt (fortlaufende Sekunden statt sk % 60). */
|
|
.uhr__perle {
|
|
transition: transform .92s cubic-bezier(.33, 0, .2, 1);
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.uhr__perle { transition: none; }
|
|
}
|
|
|
|
/* ===================================================================
|
|
NACH FILIPES VORBILD: LED-KRANZ, ANKER, ROTE ANZEIGE (08.09.2026)
|
|
|
|
Er hat eine Sci-Fi-Uhr geschickt (1250 px) und gesagt: "so wie die".
|
|
Unsere ist 164 px gross -- Faktor 7,6. Was davon uebernehmbar ist,
|
|
entscheidet nicht der Geschmack, sondern die Groesse:
|
|
|
|
UEBERNOMMEN der blaue LED-Punktkranz aussen (das auffaelligste
|
|
Merkmal), die vier Anker bei 12/3/6/9, der rote
|
|
Grundton der Digitalanzeige.
|
|
NICHT MOEGLICH die Minutenzahlen 00/05/…/55 und die Stundenzahlen
|
|
1-12. Im Vorbild sind sie rund 30 px hoch; hier
|
|
waeren es VIER. Zahlen, die man nicht lesen kann,
|
|
sind kein Zifferblatt, sondern Rauschen -- und sie
|
|
wuerden die drei Boegen zudecken, die die eigentliche
|
|
Anzeige sind.
|
|
|
|
AUGENSCHONEND BLEIBT PFLICHT, und das Vorbild ist es nicht: Es lebt
|
|
von reinem Neonrot auf Schwarz. Diese Uhr steht dauerhaft im Bild
|
|
einer Seite, an der gearbeitet wird. Die Toene sind deshalb
|
|
gedaempft: das Blau der LEDs bei rund 60 % Deckkraft, das Rot der
|
|
Ziffern als heller Ton MIT rotem Schein statt als reines Rot. Die
|
|
Anmutung kommt vom Aufbau, nicht von der Grellheit. */
|
|
|
|
/* Der Punktkranz. 60 Punkte -- einer je Sekunde, wie im Vorbild.
|
|
`repeating-conic-gradient` statt sechzig Elementen: Ein Kegelverlauf
|
|
mit 6-Grad-Takt zeichnet sie in einer Ebene, und die Maske schneidet
|
|
daraus einen schmalen Ring. Sechzig <span> waeren sechzig Elemente
|
|
fuer eine Zierde. */
|
|
.uhr__leds {
|
|
position: absolute; inset: -7px; border-radius: 50%;
|
|
pointer-events: none; z-index: 1;
|
|
background: repeating-conic-gradient(from -1.5deg,
|
|
rgba(96, 200, 255, .62) 0deg 3deg, transparent 3deg 6deg);
|
|
-webkit-mask: radial-gradient(closest-side, transparent 0 93.5%, #000 94% 97.5%, transparent 98%);
|
|
mask: radial-gradient(closest-side, transparent 0 93.5%, #000 94% 97.5%, transparent 98%);
|
|
filter: drop-shadow(0 0 2px rgba(80, 190, 255, .5));
|
|
opacity: .85;
|
|
}
|
|
|
|
/* Die vier Anker bei 12, 3, 6 und 9 Uhr. Im Vorbild sitzen dort
|
|
Fassungen mit einem blauen Licht darin -- sie geben dem Ring Halt
|
|
und sagen dem Auge, wo oben ist. Ein Kegelverlauf mit 90-Grad-Takt
|
|
trifft genau diese vier Stellen. */
|
|
.uhr__anker {
|
|
position: absolute; inset: -9px; border-radius: 50%;
|
|
pointer-events: none; z-index: 1;
|
|
background: repeating-conic-gradient(from -3deg,
|
|
rgba(150, 225, 255, .95) 0deg 6deg, transparent 6deg 90deg);
|
|
-webkit-mask: radial-gradient(closest-side, transparent 0 92%, #000 92.5% 99%, transparent 99.5%);
|
|
mask: radial-gradient(closest-side, transparent 0 92%, #000 92.5% 99%, transparent 99.5%);
|
|
filter: drop-shadow(0 0 3px rgba(110, 210, 255, .85));
|
|
}
|
|
|
|
/* DIE ANZEIGE BEKOMMT DAS ROT -- aber als Schein, nicht als Farbe.
|
|
|
|
Im Vorbild sind die Ziffern reines Neonrot. Ich hatte hier zuerst
|
|
geschrieben, das reisse den Kontrast -- nachgerechnet stimmt das
|
|
NICHT: #ff2b2b auf dem fast schwarzen Zifferblatt liegt bei 5,27:1
|
|
und haelt die Grenze von 4,5. Die schoenere Begruendung war die
|
|
falsche, also steht hier die echte:
|
|
|
|
Diese Uhr steht DAUERHAFT im Bild einer Seite, an der gearbeitet
|
|
wird. Reines gesaettigtes Rot auf Schwarz ermuedet bei stundenlangem
|
|
Nebenherschauen, auch wenn es messbar lesbar ist -- das ist der Punkt
|
|
der Hausregel "augenschonend", und der ist von einer Kontrastzahl
|
|
nicht abgedeckt. Der Ton hier ist deshalb ein sehr helles Rotweiss
|
|
(15,9:1), das seinen ROTEN CHARAKTER aus dem Schein im Textschatten
|
|
bekommt. Man liest "rote Digitalanzeige", ohne stundenlang in eine
|
|
Leuchtreklame zu sehen. */
|
|
.uhr__zeit {
|
|
color: #ffe0df;
|
|
text-shadow:
|
|
0 0 6px rgba(255, 90, 86, .75),
|
|
0 0 16px rgba(255, 60, 56, .45),
|
|
0 1px 0 rgba(0, 0, 0, .6);
|
|
}
|
|
.uhr__sek {
|
|
color: #ffd2d0;
|
|
text-shadow: 0 0 7px rgba(255, 80, 76, .6);
|
|
}
|