/* ===================================================================== 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; /* ==== DIE BEIDEN INSTRUMENTE SIND GLEICH GROSS ================== (09.09.2026, Wunsch Filipe: "die uhr und der [ring] sollen noch bissl groesser sein und ... dan auch am ende die selbe groesse haben bitte. sehr wichtig.") WARUM SIE ES VORHER NICHT WAREN: Der Ring stand in heim.css (232 / 220 / 190), die Uhr in start.css (164 / 118) -- zwei Dateien, zwei Zahlensaetze, und keine Stelle, an der jemand beide zugleich gesehen haette. Nachgemessen lagen sie am Rechner 68 px auseinander. Das war kein Versehen an einer Zahl, sondern die zwangslaeufige Folge davon, dass es zwei gab. Jetzt entscheidet EINE Variable ueber beide -- und ueber die Spalten des Rasters, in denen sie sitzen. Wer sie aendert, aendert alles drei gleichzeitig, und ein Auseinanderlaufen ist nicht mehr moeglich, sondern muesste absichtlich geschrieben werden. 248 statt 232: "bissl groesser" am oberen Ende, gemessen gegen die Kachelhoehe. Mehr geht nicht, ohne dass die Kachel waechst und die erste Kachelreihe darunter aus dem Bild rutscht -- genau die Rechnung, die weiter unten bei der Polsterung steht. */ --instrument: 248px; /* DIE SPALTE IST BREITER ALS DAS INSTRUMENT DARIN, und zwar genau um das, was daneben steht: die Knopfreihe (48 px) und der Abstand dazu (14 px). Nachgemessen, nachdem ich es zuerst falsch hatte: Mit einer Spalte von 248 px brauchte die rechte Seite 310 und die Uhr hing 32 px UEBER die Kachelkante hinaus. Die Seite liess sich trotzdem nicht seitlich schieben -- der Ueberstand lag innerhalb der Kachel, also hat keine der vorhandenen Pruefungen angeschlagen. Man sah es nur im Bild. BEIDE Aussenspalten bekommen dieselbe Breite, obwohl links keine Knoepfe stehen: Sonst saesse der Titel in der Mitte nicht mehr mittig. Der Ring wird in seiner Spalte zentriert. */ --instrument-knoepfe: 62px; --spalte: calc(var(--instrument) + var(--instrument-knoepfe)); 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, var(--spalte)) minmax(0, 1fr) minmax(180px, var(--spalte)); 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: var(--instrument); 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 `

`, 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 { --instrument: 224px; } .willkommen__reihe { grid-template-columns: minmax(170px, var(--spalte)) minmax(0, 1fr); } .willkommen__rechts { grid-column: 1 / -1; justify-content: center; margin-left: 0; } /* EINE NUT TRENNT NUR, SOLANGE SIE ZWISCHEN ETWAS STEHT (09.09.2026). Hier faellt die dritte Spalte weg: Die Uhr rutscht in eine eigene Zeile darunter. Ihre Nut haengt aber weiter 18 px links von ihr -- und stand damit als senkrechter Strich mitten im Bild. Nachgemessen bei 700 px: Die Nut lag bei x = 391 und trennte dort gar nichts. Sie WAR ausgeschaltet, aber erst bei 620 px, und die Regel dafuer stand 3000 Zeilen entfernt in start.css. Zwei Zahlen fuer dieselbe Sache an zwei Orten -- der haeufigste Fehler in diesem Haus. Jetzt steht das Ausschalten dort, wo die Spalte verschwindet, die es begruendet. Wer die Spalten wieder anfasst, sieht es. */ .willkommen__rechts::before { display: none; } /* ==== DIE UHR STEHT IN DER MITTE, NICHT DIE REIHE ==================== Filipe, mit Bildschirmfoto vom Handy: "ich will dass auf dem handy die uhr und der kreis ganz oben mit den erledigten aufgaben, schoen mittig, zentriert sind. die stehen sehr verzogen von der mitte." Gemessen bei 390 und 412 px, in ALLEN fuenf Rollen, immer dieselbe Zahl: Ring 31 px nach links, Uhr 31 px nach rechts. Gleicher Betrag, entgegengesetzte Richtung -- das ist eine Ursache, nicht zwei. `justify-content: center` zentriert den INHALT der Reihe, und in der Reihe steht neben dem Instrument noch der Knopf. Zentriert wird also [Knopf + Abstand + Uhr] als Block; die Uhr rutscht dabei um die halbe Knopfbreite zur Seite. Die Knopfbreite steht seit jeher als `--instrument-knoepfe: 62px` in dieser Datei -- 62 / 2 = 31. Die gemessene Zahl war also von Anfang an aufgeschrieben, nur an einer anderen Stelle. Der Knopf zaehlt deshalb nicht mehr mit: Er wird aus dem Fluss genommen und neben die zentrierte Uhr gehaengt. Kein Verschieben um 31 px -- das waere dieselbe Zahl ein zweites Mal, und beim naechsten Knopf waere sie falsch. So folgt seine Lage der Uhr, wie gross die auch ist. */ .willkommen__rechts > .glocke-platz { position: absolute; top: 50%; transform: translateY(-50%); right: calc(50% + var(--instrument) / 2 + 14px); } .willkommen__rechts > .uhr { margin-inline: auto; } } @media (max-width: 780px) { .willkommen { --instrument: 196px; } /* Und dasselbe fuer den Ring: Erst HIER faellt die zweite Spalte weg, vorher steht er neben dem Text und soll gar nicht mittig sein. */ .willkommen__links > .glocke-platz--links { position: absolute; top: 50%; transform: translateY(-50%); left: calc(50% + var(--instrument) / 2 + 14px); } .willkommen__links > .zring { margin-inline: auto; } .willkommen__reihe { grid-template-columns: minmax(0, 1fr); gap: 20px; } /* Jetzt faellt auch die zweite Spalte weg -- ab hier trennt die linke Nut ebenfalls nichts mehr. Bis hierher blieb sie richtig: Ring und Text standen ja noch nebeneinander. */ .willkommen__links::before { display: none; } .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; } .willkommen__links { position: relative; } /* Die Nut -- ZWEIMAL, links und rechts vom Text (09.09.2026, screen2). Filipe: "mach diesen strich der nach oben geht auch links bitte. genau gleich." Die Konsole hat drei Felder: Ring links, Text in der Mitte, Uhr rechts. Eine Nut trennte bisher nur das rechte ab -- damit sass der Text nicht ZWISCHEN zwei Instrumenten, sondern klebte am linken. "GENAU GLEICH" HEISST HIER WIRKLICH GLEICH, nicht gespiegelt. Eine Nut ist eine Fraesung in ein und dieselbe Platte, und das Licht faellt im ganzen Haus von links oben. Also hat jede Nut dieselbe Flanke: dunkel auf der Lichtseite, hell auf der Schattenseite. Eine gespiegelte zweite Nut waere ein zweites Licht -- derselbe Fehler, der heute schon an der Uhr steckte, wo die Lichtkante seitlich statt von oben kam. Beide teilen sich deshalb einen Regelsatz. Wer die eine aendert, aendert die andere zwangslaeufig mit. */ .willkommen__rechts::before, .willkommen__links::before { content: ""; position: absolute; 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; } /* Jede sitzt in der Fuge NEBEN ihrem Feld: die rechte links von der Uhr, die linke rechts vom Ring. Die 26 px Fuge kommen aus dem `gap` der Reihe; 18 px Versatz setzen die Nut mittig hinein. */ .willkommen__rechts::before { left: -18px; } .willkommen__links::before { right: -18px; } /* Auch links liegen die Instrumente ueber der Nut -- gleiche Begruendung wie rechts, siehe unten. */ .willkommen__links > * { position: relative; z-index: 1; } /* 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. */ /* DIE UHR IST GENAU SO GROSS WIE DER RING -- aus derselben Variablen. Ihre Groesse stand bis zum 09.09.2026 in start.css (164 px, auf dem Handy 118). Sie steht jetzt HIER, direkt neben dem Ring, und beide lesen `--instrument`. Der Grund ist nicht Ordnungsliebe: Solange die beiden Zahlen in zwei Dateien standen, konnte niemand sie nebeneinander sehen, und sie sind auf 232 gegen 164 auseinandergelaufen. heim.css laedt NACH start.css und gewinnt damit bei gleicher Spezifitaet. Die alte Angabe dort ist trotzdem entfernt worden statt ueberschrieben -- eine wirkungslose Zahl, die richtig aussieht, ist genau die Falle, in die ich in dieser Datei schon zweimal gelaufen bin. `aspect-ratio` statt einer zweiten Zahl fuer die Hoehe: Ein Kreis, dessen Breite und Hoehe getrennt gepflegt werden, ist irgendwann ein Ei. */ .uhr { width: var(--instrument); height: auto; aspect-ratio: 1; } /* DIE ZIFFERN WACHSEN MIT. Sie standen in `rem` -- in einer Uhr von 164 px war das richtig, in einer von 248 sahen sie verloren aus (gemessen 29,76 px in einem 248-px-Zifferblatt). Eine feste Zahl neben einer veraenderlichen ist wieder genau die Doppelung, die hier gerade beseitigt wurde: Wer `--instrument` aendert, muesste sonst daran denken, auch die Schrift nachzuziehen. DER FAKTOR IST NACHGESEHEN, NICHT GERECHNET. Bei 164 px stand die Uhrzeit auf 29,76 px, das sind 0,1815. Mit 0,145 wirkten die Ziffern im 248er Zifferblatt verloren -- die Mitte war eine grosse leere Flaeche. Mit 0,168 fuellen sie sie, ohne an die innerste Bahn zu stossen: 248 x 0,168 = 41,7 px, und die Stundenbalken liegen bei Radius 31,5 von 50, also 156 px Durchmesser. Der Abstand bleibt. Auf dem Handy ergibt es 32,9 px statt der frueheren 20,8 -- dort war die Uhr aber auch nur 118 px gross und ist jetzt 196. */ .uhr__zeit { font-size: calc(var(--instrument) * .168); } .uhr__sek { font-size: calc(var(--instrument) * .068); } /* LINKS: KNOPF UND RING, spiegelbildlich zur Uhr rechts (screen2, 09.09.2026). Dieselben 14 px Abstand, dieselben 48 px Knopfbreite -- deshalb geht `--spalte` auf beiden Seiten genau auf. Die Zentrierung des Rings ist damit WEG, und das ist kein Versehen: Sie war noetig, solange er allein in einer Spalte stand, die fuer Instrument PLUS Knopf bemessen ist. Jetzt fuellt er sie mit seinem Knopf zusammen aus -- eine zusaetzliche Zentrierung wuerde ihn wieder verschieben. */ .willkommen__links { display: flex; align-items: center; gap: 14px; min-width: 0; } .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. */ /* EIN KNOPF JE SEITE, nicht mehr zwei uebereinander. Bis zum 09.09.2026 standen Glocke und Tagesruf beide rechts, und der Platz war 104 px hoch reserviert (2 x 48 + 8 Abstand). Seit die Glocke nach links gewandert ist, traegt jede Seite einen -- also 48 px. Die Begruendung fuer das RESERVIEREN bleibt unveraendert gueltig: Beide Knoepfe haengen an einer Abfrage, und ein Platz, der erst mit der Antwort entsteht, laesst die Zeile springen. Man zielt auf etwas, und im Moment des Klicks rutscht es weg. */ width: 48px; height: 48px; flex: none; display: flex; flex-direction: column; align-items: center; position: relative; }