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 Kachel selbst: dasselbe Material wie die Bereichskacheln, damit
   nicht zwei Oberflächen nebeneinanderliegen. Sie hat KEINE eigene
   Farbschiene -- sie gehört zu keiner Kategorie, sie ist der Anfang. */
.willkommen {
  position: relative;
  padding: 22px 24px;
  border: 1px solid var(--rand);
  border-radius: 4px 20px 20px 4px;
  background:
    linear-gradient(90deg,
      rgba(63, 189, 245, .10) 0%,
      rgba(63, 189, 245, .03) 14%,
      transparent 40%),
    linear-gradient(163deg,
      rgba(23, 31, 45, .95) 0%,
      rgba(11, 15, 24, .95) 58%,
      rgba(8, 11, 18, .95) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    inset 0 -1px 0 rgba(0, 0, 0, .50),
    inset 2px 0 0 -1px color-mix(in srgb, var(--akzent) 34%, transparent),
    0 2px 5px -2px rgba(0, 0, 0, .55),
    0 16px 34px -20px rgba(0, 0, 0, .88);
  overflow: hidden;
}
/* Die Leuchtschiene links -- dieselbe Sprache wie überall, hier im
   Hausakzent statt in einer Kategoriefarbe. */
.willkommen::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  border-radius: 4px 0 0 4px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--akzent) 55%, #fff) 0%,
    var(--akzent) 26%,
    color-mix(in srgb, var(--akzent) 50%, transparent) 100%);
  box-shadow:
    0 0 9px 0 color-mix(in srgb, var(--akzent) 55%, transparent),
    3px 0 20px -3px color-mix(in srgb, var(--akzent) 42%, transparent);
  opacity: .9;
  z-index: 2;
}
/* Körnung und ein fester Glanz. Kein wandernder wie bei den Kacheln:
   Diese Fläche wird nicht angeklickt, also gibt es nichts zu quittieren. */
.willkommen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(104deg,
      transparent 26%,
      rgba(255, 255, 255, .05) 40%,
      rgba(255, 255, 255, .085) 47%,
      rgba(255, 255, 255, .03) 55%,
      transparent 70%);
  /* KEINE Körnung auf DIESER Ebene (07.09.2026, gemessen).

     Sie stand hier als zweite Schicht und hat die Deckkraft der
     Spiegelung geerbt -- 50 % eines mittelgrauen Rauschens heben jeden
     Bildpunkt um rund 30 Stufen an. Gemessen: rgb(56,44,58) statt der
     berechneten rgb(20,26,38), und über einer hellen Stelle des
     Motivs rgb(85,83,81). Die Karte sah dadurch durchsichtig aus,
     obwohl sie zu 95 % deckt.

     Derselbe Fehler wie an der Anmeldekarte heute Nachmittag, und
     genau derselbe Grund: Körnung gehört auf eine EIGENE Ebene mit
     `mix-blend-mode: overlay` und 3 bis 4 Prozent -- so wie bei den
     Kacheln der Startseite. Auf einer geteilten Ebene ist sie kein
     Material, sondern ein grauer Schleier. */
  opacity: .5;
}
.willkommen > * { position: relative; z-index: 1; }

.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. */
.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.
   -------------------------------------------------------------------- */
.uhr {
  position: relative;
  width: 124px; height: 124px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  /* SCHICHT 1: der Metallrand. Ein Verlauf von hell (oben links, wo das
     Licht herkommt) nach dunkel und wieder etwas heller unten rechts --
     so sieht eine gedrehte Metallfassung aus. Als `padding` gebaut,
     damit die Scheibe darin sitzt statt daneben. */
  padding: 3px;
  background:
    linear-gradient(150deg,
      rgba(255, 255, 255, .20) 0%,
      rgba(255, 120, 132, .16) 26%,
      rgba(8, 12, 20, .9) 52%,
      rgba(143, 216, 255, .16) 78%,
      rgba(255, 255, 255, .10) 100%);
  box-shadow:
    /* Der Rand wirft nach aussen einen sehr weichen zweifarbigen
       Schein -- rot oben links, blau unten rechts, wie der Rahmen im
       Motiv. Beides weit unter der Schwelle, an der es blendet. */
    -3px -3px 22px -12px rgba(255, 95, 109, .55),
     3px  3px 22px -12px rgba(143, 216, 255, .55),
     0 12px 26px -14px rgba(0, 0, 0, .95);
}
/* SCHICHT 2: die vertiefte Scheibe. Eigene Ebene, damit der Metallrand
   darum stehen bleibt. */
.uhr::before {
  content: ""; position: absolute; inset: 3px; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 255, 255, .055), transparent 58%),
    radial-gradient(circle at 50% 50%, #0c121e 58%, #05080e 100%);
  box-shadow:
    inset 0 2px 6px -2px rgba(0, 0, 0, .95),
    inset 0 -1px 0 rgba(255, 255, 255, .05);
}
/* Die Skala: sechzig feine Striche, aus EINEM sich wiederholenden
   Kegelverlauf. Sechzig Elemente im HTML waeren dieselbe Optik mit
   sechzig Elementen mehr im Baum. Jeder fuenfte Strich ist kraeftiger
   -- das ist der Unterschied zwischen "Punkte im Kreis" und "Skala". */
.uhr__skala {
  /* Die Skala liegt GANZ AUSSEN, jenseits des Stundenrings -- zwischen
     den Ringen waere sie ein vierter Kreis und der Grund, warum das
     Zifferblatt unruhig wirkt. Zwoelf kraeftige Striche fuer die
     Stunden, sechzig feine dazwischen. */
  position: absolute; inset: 1px; border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg,
      rgba(226, 234, 244, .70) 0deg 0.8deg,
      transparent 0.8deg 30deg),
    repeating-conic-gradient(from 0deg,
      rgba(150, 186, 220, .22) 0deg 0.4deg,
      transparent 0.4deg 6deg);
  -webkit-mask: radial-gradient(circle, transparent 0 92%, #000 92% 99%, transparent 99%);
  mask: radial-gradient(circle, transparent 0 92%, #000 92% 99%, transparent 99%);
  opacity: .8;
  pointer-events: none; z-index: 1;
}
/* SCHICHT 3: das Glas. Eine Spiegelung von oben links ueber die Kuppe,
   dazu ein hauchfeiner heller Bogen am oberen Rand -- die Kante der
   Scheibe. Ohne diesen Bogen wirkt die Uhr flach. */
.uhr__glas {
  position: absolute; inset: 3px; border-radius: 50%;
  background:
    linear-gradient(146deg,
      rgba(255, 255, 255, .13) 0%,
      rgba(255, 255, 255, .03) 20%,
      transparent 44%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
  pointer-events: none; z-index: 3;
}
.uhr__ring {
  position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px);
  /* 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.46rem; 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. */
  text-shadow:
    -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) {
  /* 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: 96px; height: 96px; }
  .uhr__zeit { font-size: 1.18rem; }
}

@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; }
}