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;

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

  /* ---- UND DAS ZEITFELD DES WECKERS MUSS MITWANDERN (09.09.2026) ----

     Filipe: "wenn ich am handy auf den wecker drücke dan sieht man
     nichts."

     Er hat recht, und zwar wörtlich. Das Feld öffnet sich, es steht nur
     nicht im Bild. `.tagesruf__feld` ist in start.css mit
     `right: 56px` gesetzt -- "56 px nach links vom Knopf". Am Rechner
     ist das richtig: Dort sitzt der Knopf am rechten Rand einer breiten
     Kachel, und links davon ist die Lücke zwischen Text und Uhr.

     Auf dem Handy ist der Knopf drei Zeilen weiter oben aus dem Fluss
     genommen und neben die zentrierte Uhr gehängt -- er steht damit
     ganz LINKS. 56 px weiter links ist dort kein Raum mehr, sondern der
     Bildschirmrand. Gemessen, aufgeklappt, an fünf Breiten:

       320 px  Feld bei -127 .. -8    komplett draußen
       360 px  Feld bei -107 .. 12
       390 px  Feld bei  -92 .. 27    (Filipes Größenordnung)
       412 px  Feld bei  -81 .. 38
       430 px  Feld bei  -72 .. 47

     Dieselbe Sorte Fehler wie schon mehrfach im Haus: ein fester
     Abstand, der für EINE Anordnung ausgerechnet wurde, und der Anker
     ist inzwischen woandershin gewandert. Der Abstand stimmte noch, der
     Bezugspunkt nicht mehr.

     Es öffnet jetzt nach RECHTS statt nach links -- also in die
     Richtung, in der auf dem Handy der Platz ist. Das ist keine zweite
     Zahl, sondern die Umkehrung derselben Regel ("ins Freie öffnen").
     Der linke Rand des Knopfes ist nie kleiner als 0, das Feld ist
     119 px breit, der schmalste Bildschirm 320 -- damit liegt es auf
     jeder Breite im Bild, ohne dass eine Schwelle stimmen muss.

     `max-width` als Gurt zum Hosenträger: Sollte das Feld je breiter
     werden (längere Beschriftung, größere Schrift), schneidet es sich
     lieber selbst zurecht, als wieder hinauszulaufen. */
  .willkommen__rechts > .glocke-platz > .tagesruf__feld {
    right: auto; left: 0;
    max-width: calc(100vw - 24px);
  }
}
@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;
}



/* =====================================================================
   DIE ÜBERSCHRIFT MUSS AUCH IM KONTRASTMODUS DA SEIN (19.09.2026)

   `.ztitel` ist mit `background-clip: text` gesetzt — der Schriftzug ist
   also ein Farbverlauf, der durch die Buchstaben scheint, und die
   Buchstaben selbst sind durchsichtig.

   Zwei Sicherungen fehlten, die das Haus sonst überall setzt:

     1. KEIN @supports. Wo `background-clip: text` nicht greift, wirkt
        `-webkit-text-fill-color: transparent` trotzdem — der Text ist
        dann einfach weg. Alle anderen Stellen im Haus (gate.css,
        leistung.css, crew-haus.css) kapseln denselben Griff.

     2. KEIN forced-colors-RÜCKFALL. Im Windows-Kontrastmodus wird der
        Verlauf verworfen, `-webkit-text-fill-color` aber nicht
        zurückgesetzt. Übrig bleibt durchsichtiger Text — die Seite hat
        dann keine Überschrift.

   Dasselbe gilt für den Schriftzug von Team Dogi in crew-haus.css.
   ===================================================================== */
@media (forced-colors: active) {
  .ztitel {
    background: none;
    -webkit-text-fill-color: CanvasText;
    color: CanvasText;
    filter: none;
  }
}