dogfather-universe/workspace/assets/css/heim.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;
  padding: 26px 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: gebuerstetes Metall, LAENGS gerichtet.

     ZWEI FEHLER LAGEN HIER HINTEREINANDER, beide im Bildschirmfoto
     gesehen und nicht im Kopf:

     (1) HALBDURCHSICHTIG. Metall, durch das der Hintergrund scheint,
         ist kein Metall -- es las sich als graue Linie. Derselbe
         Fehler stand gleichzeitig an der Uhr. Jetzt deckende Farben.

     (2) KEGELVERLAUF AUF EINER BREITEN FLAECHE. Bei der runden Uhr ist
         `conic-gradient` genau richtig: Jede Stelle des Rings liegt in
         einem anderen Winkel, also wandert das Licht rundherum. Bei
         einem 1200 px breiten Balken liegt die GANZE Oberkante in
         einem Winkelausschnitt von wenigen Grad -- der Verlauf
         passiert dort fast nichts, und die Fassung sah wieder flach
         aus. Ein gebuersteter Metallbalken glaenzt der LAENGE nach:
         helle und dunkle Zonen wandern von links nach rechts. Deshalb
         hier ein linearer Verlauf mit zwoelf Stopps, und nur an den
         beiden Stellen, an denen das Haus seine Farben hat, eine
         warme und eine kuehle Spiegelung.

     Die Lehre gilt allgemein: Die Verlaufsart muss zur FORM passen,
     nicht zum Material. Rund -> conic, lang -> linear. */
  background:
    linear-gradient(96deg,
      #cfdcec 0%,
      #f6fbff 4%,
      #64768d 9%,
      #e3ecf7 15%,
      #7d8fa6 22%,
      #ff8a94 27%,
      #f8fcff 31%,
      #55677e 38%,
      #dbe6f3 46%,
      #6b7d94 55%,
      #f2f8ff 63%,
      #8fd8ff 70%,
      #5d6f87 77%,
      #e9f1fb 85%,
      #7a8ca3 92%,
      #f4f9ff 97%,
      #cfdcec 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)));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .11) 0 1px, transparent 1px),
    repeating-linear-gradient(0deg, rgba(150, 186, 220, .085) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(90deg, rgba(150, 186, 220, .085) 0 1px, transparent 1px 16px),
    radial-gradient(120% 90% at 4% 108%, rgba(255, 95, 109, .16), transparent 52%),
    radial-gradient(120% 90% at 96% 108%, rgba(143, 216, 255, .17), transparent 52%),
    linear-gradient(168deg, #131a27 0%, #0a0e17 62%, #06090f 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%);
}

.willkommen__reihe {
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap;
}
.willkommen__text { min-width: 0; flex: 1 1 260px; }

/* 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. */

.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:
    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);
}
@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; }
}

/* SCHICHT 3: die Glaskuppe. */
.uhr__glas {
  position: absolute; inset: 10px; border-radius: 50%;
  background:
    linear-gradient(146deg,
      rgba(255, 255, 255, .15) 0%,
      rgba(255, 255, 255, .035) 19%,
      transparent 42%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
  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;
}
.uhr__bahn { stroke: rgba(150, 186, 220, .09); stroke-width: 3; }

/* 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;
}

.uhr__mitte {
  position: relative; z-index: 4;
  display: grid; justify-items: center; gap: 2px; line-height: 1;
}
.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;
  padding: 1px 6px 1px 7px;
  border-radius: 999px;
  color: #cfe9fb;
  background: rgba(143, 216, 255, .10);
  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; }
  .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; }
}