dogfather-universe/workspace/assets/css/crew-haus.css

/* =====================================================================
   crew-haus.css — das Haus von Team Dogi (10.09.2026)

   Filipe: "die leiste da und alles andere was noch rot ist auf team
   dogi seite soll lila werden. richtig geiles lila und babyblau
   mischung überall."

   Diese Datei wird NUR auf crew.dogfather-universe.com ausgeliefert.
   `crewWeiche()` biegt dafuer `haus.css` hierher um; auf der
   Agenturadresse kommt weiterhin die leere Fassung an. Beide Haeuser
   liegen damit im selben Programm, auf denselben Daten -- und sehen
   trotzdem nicht mehr wie dasselbe aus.

   ---------------------------------------------------------------------
   WARUM NUR VARIABLEN UND FAST KEINE REGELN

   Das ganze Haus haengt an zwei Dutzend Farbwerten in gate.css. Wer
   die tauscht, tauscht jede Kachel, jeden Rand, jeden Knopf und jedes
   Leuchten auf einmal -- und zwar an Stellen, die man beim Nachbauen
   uebersehen wuerde. Eine Datei, die stattdessen Regel fuer Regel
   umfaerbt, waere beim naechsten neuen Bauteil sofort unvollstaendig,
   ohne dass es jemandem auffiele.

   Ausnahmen stehen unten und sind einzeln begruendet: Es sind die
   Stellen, an denen eine Farbe NICHT aus einer Variablen kommt.

   ---------------------------------------------------------------------
   DIE MISCHUNG

   Babyblau traegt, Lila akzentuiert. Nicht umgekehrt: Lila ist die
   kraeftigere Farbe, und eine Flaeche, die ganz darin steht, wird nach
   zwanzig Minuten anstrengend. Also grosse ruhige Flaechen kuehl,
   Lila fuer das, was hervorstechen soll.

   ALLE WERTE SIND ENTSAETTIGT gegenueber dem, was ein Farbwaehler
   ausspuckt. "Richtig geiles Lila" heisst nicht Neonlila: #a98bff
   liest sich auf Dunkel kraeftig, #b46bff waere nach einer Stunde
   Arbeit eine Zumutung. Die Hausregel "augenschonend" gilt auch fuer
   eine Lieblingsfarbe.
   ===================================================================== */

:root {
  /* ---- Der Grund ---------------------------------------------------
     Die dunklen Flaechen bekommen einen Stich ins Violette statt ins
     Blaugraue. Der Unterschied ist einzeln kaum zu sehen und im
     Ganzen deutlich -- er sorgt dafuer, dass auch die RUHIGEN Teile
     der Seite zum Haus gehoeren und nicht nur die bunten. */
  --tinte:        #07060f;
  --glas:         rgba(15, 12, 27, 0.74);
  --glas-tief:    rgba(10, 8, 19, 0.86);
  --flaeche:      rgba(15, 12, 27, 0.89);

  /* Raender im Lilaton statt im Blaugrau. Dieselben Deckkraefte wie im
     Agenturhaus -- an denen ist nichts falsch, nur an der Farbe. */
  --rand:         rgba(176, 166, 236, 0.17);
  --rand-hell:    rgba(176, 166, 236, 0.32);

  /* ---- Die Schrift -------------------------------------------------
     Ein Hauch Violett, kein reines Weiss (Hausregel). Die Helligkeit
     ist gegenueber dem Agenturhaus NICHT gesenkt: Der leiseste Ton
     dort war bis auf 4,50:1 heruntergemessen, also genau auf die
     Grenze -- diese Werte liegen darueber und werden am fertigen
     Bildschirmfoto nachgemessen, nicht an der Farbangabe. */
  --text:         #e4e0f4;
  --text-leise:   #a9a2ca;
  --text-still:   #8f88b2;

  /* ---- Die Mischung ------------------------------------------------
     `--akzent` ist das Babyblau: Es traegt Knoepfe, Umrandungen und
     jeden Fokusrahmen, also die grosse Menge.
     `--violett` ist das Lila und steht ueberall dort, wo im Haus schon
     eine ZWEITE Farbe vorgesehen war -- in Verlaeufen, im Leuchten,
     an der zweiten Haelfte jeder Fassung. Dadurch entsteht die
     Mischung von selbst, an genau den Stellen, an denen das Haus
     ohnehin zwei Farben nebeneinanderstellt. */
  --akzent:       #8ec9ff;
  --akzent-tief:  #4b3fa8;
  --violett:      #a98bff;

  /* ---- Was hier rot WAR --------------------------------------------
     Diese drei Werte gehoeren der Agentur (Spicy Media). Auf dieser
     Adresse gibt es sie als Rolle gar nicht -- ihre Farben tauchten
     trotzdem auf, weil mehrere Bauteile "die zweite Marke" damit
     zeichnen: das Leuchten der Kopfzeile, Verlaeufe, Fassungen. Genau
     das war der rote Schimmer in der Leiste.

     Sie werden nicht geloescht, sondern umgestellt: Ein geloeschter
     Wert waere `unset` und faerbte die betroffenen Stellen schwarz
     oder unsichtbar. Umgestellt tragen dieselben Bauteile jetzt Lila
     und Babyblau -- ohne dass eine einzige Regel umgeschrieben werden
     musste. */
  --spicy-haupt:   #a98bff;
  --spicy-zweit:   #8ec9ff;
  --spicy-tief:    #3a2f7a;

  /* ---- DogFather ---------------------------------------------------
     Bleibt die tragende Farbe des Hauses, wandert aber vom kraeftigen
     Blau ins Babyblau und bekommt Lila als Begleitton. Damit laeuft
     jede Rollenschiene, jedes Namensschild und jeder Kachelrand in der
     neuen Mischung -- ohne Sonderregel. */
  --dogi-haupt:    #8ec9ff;
  --dogi-zweit:    #a98bff;
  --dogi-tief:     #33296b;

  /* Die rechte Hand und Team Dogi teilen sich dieses Haus. Sie haben
     im Agenturschema keine eigenen Toene (dort gibt es sie nicht) --
     hier bekommen sie welche, gespiegelt zu DogFather: Bei ihm fuehrt
     Babyblau, bei ihnen Lila. Gleiche Familie, andere Betonung; keine
     Rangordnung. */
  --hand-haupt:    #a98bff;
  --hand-zweit:    #8ec9ff;
  --hand-tief:     #33296b;

  /* WARN BLEIBT WARM -- und das ist Absicht.
     Eine Warnung ist keine Verzierung, sondern eine Bedeutung. Faerbt
     man sie ins Lila der Seite, sieht "etwas stimmt nicht" aus wie
     alles andere, und dann sagt sie nichts mehr. Sie wird nur leicht
     ins Rosa gezogen, damit sie neben Lila nicht wie ein Fremdkoerper
     wirkt. Wenn Filipe auch das lila haben will, ist es diese eine
     Zeile -- aber es waere seine Entscheidung, nicht meine. */
  --warn:         #ff9ab4;
}

/* =====================================================================
   DIE VIER STELLEN, AN DENEN KEINE VARIABLE STAND
   ===================================================================== */

/* 1. DAS LEUCHTEN UNTER DEM ZEICHEN IN DER KOPFLEISTE.
      In start.css steht dort ein fest hingeschriebenes
      `rgba(255, 92, 68, .62)` -- ein warmes Rot. Es liegt genau an der
      Stelle, auf die Filipe im Bildschirmfoto gezeigt hat, und es kam
      aus keiner Variablen; ein Tausch der Toene oben haette es nicht
      erwischt. */
.kopfleiste:hover .marke::before {
  filter: saturate(1.1) brightness(1.16)
          drop-shadow(0 0 9px rgba(169, 139, 255, .62));
}

/* 2. DIE FARBE DER BROWSERLEISTE am Handy. Sie steht als
      <meta name="theme-color"> im HTML und laesst sich von CSS nicht
      erreichen -- deshalb setzt sie kopf.js auf dieser Adresse um.
      Der Wert steht hier, damit beide Stellen eine Quelle haben. */
:root { --haus-leiste: #0b0918; }

/* 3. DER RAND EINER AUSGEWAEHLTEN KACHEL. Er nimmt `--akzent` mit
      einer Beimischung -- die Beimischung ist im Agenturhaus kuehl
      gerechnet. Hier bekommt sie Lila, damit die Auswahl in der
      Mischung steht statt daneben. */
.kachel[aria-current="page"],
.kachel:focus-visible {
  border-color: color-mix(in srgb, var(--violett) 46%, transparent);
}

/* 4. PRUEFT SICH SELBST.
      Diese Regel tut nichts Sichtbares. Sie ist der Beweis, dass die
      Datei ueberhaupt angekommen ist: Eine Pruefung liest
      `--haus-name` aus und weiss dadurch, ob auf dieser Adresse das
      richtige Haus ausgeliefert wurde. Ohne so einen Griff koennte
      man nur die Farben vergleichen -- und die stimmen zufaellig auch
      dann, wenn gar nichts geladen wurde. */
:root { --haus-name: "crew"; }

/* =====================================================================
   DIE FASSUNG DER ZENTRALE — die Stelle, auf die Filipe gezeigt hat
   =====================================================================

   Der Rahmen der grossen Kachel auf der Startseite laeuft im
   Agenturhaus von ROT ueber Silber nach Babyblau. Das ist dort
   richtig: Er nimmt die beiden Marken auf, Spicy Media und DogFather.
   Hier gibt es Spicy Media nicht.

   DIE PROZENTZAHLEN BLEIBEN AUF DEN PUNKT GLEICH. Sie sind am
   08.09.2026 nachgerechnet worden, nicht nach Gefuehl verteilt --
   Filipe wollte, dass man die beiden FARBEN am meisten sieht, und die
   Gewichtung wurde damals dafuer eigens umgestellt. Wer sie hier
   antastet, wirft diese Rechnung weg. Getauscht wird also
   ausschliesslich die linke Haelfte: Rot wird Lila, Stufe fuer Stufe
   in derselben Helligkeitsfolge (dunkel, mittel, hell, Spitzlicht,
   mittel, tief, sehr dunkel).

   Silber und Babyblau bleiben unangetastet -- das ist die zweite
   Haelfte der Mischung, und sie war nie das Problem.

   WARUM DIE GANZE LISTE NOCH EINMAL DASTEHT: `background` ist eine
   Kurzschreibweise. Eine einzelne Stufe eines Verlaufs laesst sich
   nicht ersetzen, ohne den ganzen Verlauf zu schreiben. Dieselbe
   Ueberlegung steht schon bei `body.gate--crew .rollen` in gate.css.
   ===================================================================== */
.willkommen {
  background:
    linear-gradient(96deg,
      #150625  0%,
      #6d47c4  3%,
      #a98bff 10%,
      #e6dcff 16%,   /* Spitzlicht im Lila */
      #9d7bff 23%,
      #5b3fa8 31%,
      #2a1a52 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%);
}

/* =====================================================================
   DIE UHR — dieselbe Mischung, andere linke Farbe
   =====================================================================

   Die Uhr in der Zentrale ist bewusst zweifarbig gebaut: links warm,
   rechts babyblau, an vier Stellen. Im Agenturhaus sind das die zwei
   Marken. Hier wird aus der warmen Seite Lila -- die Bauweise bleibt
   Stueck fuer Stueck dieselbe, damit man beide Fassungen nebeneinander
   lesen kann.

   Gefunden wurden die vier Stellen nicht durch Suchen im Quelltext,
   sondern durch MESSEN am fertigen Bildschirm: Jedes Element der Uhr
   wurde nach Farben abgefragt, bei denen der Rotkanal deutlich ueber
   den anderen liegt. Zwei davon (die Textschatten) haetten in 6000
   Zeilen start.css niemand gefunden. */

/* Der Zeiger auf 12: heller Kopf, kraeftige Mitte, dunkler Fuss. */
.uhr__zwoelf {
  background: linear-gradient(180deg, #e6dcff 0%, #a98bff 34%, #5b3fa8 100%);
}

/* Der Leuchtring: Lila, Babyblau, Grau im Wechsel -- gleiche Winkel,
   gleiche Deckkraft, nur die erste Farbe wechselt. */
.uhr__leds {
  background: repeating-conic-gradient(from -1.5deg,
    rgba(169, 139, 255, .70) 0deg 3deg, transparent 3deg 6deg,
    rgba(126, 200, 242, .70) 6deg 9deg, transparent 9deg 12deg,
    rgba(120, 150, 185, .34) 12deg 15deg, transparent 15deg 18deg);
  filter: drop-shadow(0 0 2px rgba(160, 165, 215, .4));
}

/* Die Uhrzeit selbst: Der Schein links war rot. Die zwei Schatten
   davor (Gravur) bleiben Zeile fuer Zeile gleich -- `text-shadow` ist
   eine Liste, sie laesst sich nicht teilweise ersetzen. */
.uhr__zeit {
  text-shadow:
    0 -.5px 0 rgba(0, 0, 0, .85),
    0  .5px 0 rgba(255, 255, 255, .22),
    -6px 0 16px rgba(169, 139, 255, .40),
     6px 0 16px rgba(143, 216, 255, .42);
}

/* Die Digitalanzeige. Im Agenturhaus liest man "rote Digitalanzeige":
   ein sehr helles Rotweiss, dessen Charakter allein aus dem Schein im
   Textschatten kommt -- gesaettigtes Rot waere bei einer Uhr, die
   dauerhaft im Bild steht, nach zwei Stunden eine Zumutung (die
   Begruendung steht ausfuehrlich in start.css und gilt hier
   unveraendert). Genau dieselbe Bauweise, nur in Lila: heller Kern,
   Farbe im Schein. */
.uhr__zeit {
  color: #ece0ff;
  text-shadow:
    0 0 6px rgba(160, 120, 255, .75),
    0 0 16px rgba(130, 90, 255, .45),
    0 1px 0 rgba(0, 0, 0, .6);
}
.uhr__sek {
  color: #e2d2ff;
  text-shadow: 0 0 7px rgba(150, 110, 255, .6);
}

/* =====================================================================
   DIE LEISTE — genau die Stelle aus Filipes Bildschirmfoto
   =====================================================================

   Im Agenturhaus glimmt die Kopfleiste rot. Das ist dort sein
   ausdruecklicher Wunsch (screen36: "eine richtig geile mischung von
   rot schwarz, wie wenn es brennen würde") und bleibt dort auch so.

   Hier wird aus der Glut ein Lila-Schimmer. DIE BAUWEISE BLEIBT
   IDENTISCH -- unten waermer, nach oben dunkel, in der Mitte kraeftiger
   als an den Raendern, alles unter 30 % Deckkraft. Der Grund dafuer
   steht ausfuehrlich in start.css und gilt hier genauso: Die Leiste
   steht auf JEDER Seite und liegt beim Lesen immer im Bild. Sie darf
   nicht leuchten, nur schimmern.
   ===================================================================== */
/* =====================================================================
   DIE LEISTE ALS UNIVERSUM (11.09.2026)

   Filipe: "der hintergrund dieser leiste soll extrem speziell aussehen
   wie ein universum und soll von lila auf babyblau wechseln, von links
   nach rechts. mach das uebertrieben geil."

   DIE RICHTUNG IST DIE EIGENTLICHE AENDERUNG. Vorher lief der Schein
   von UNTEN nach oben (die Glut der Agenturseite, nur in Lila). Jetzt
   laeuft er von LINKS nach rechts: Lila am Anfang, Babyblau am Ende --
   dieselbe Diagonale, die im ganzen Haus gilt, nur waagerecht gelegt,
   weil eine Leiste breit ist und nicht hoch.

   DAS STERNENFELD SIND SIEBEN VERLAEUFE UND KEINE ELEMENTE. Sieben
   Punkte waeren sieben Knoten im Baum, auf jeder der zwanzig Seiten,
   nur fuer Zierde. Als Verlaufslagen kosten sie nichts und lassen sich
   nicht anklicken.

   "UEBERTRIEBEN GEIL" HAT EINE GRENZE, und sie steht nicht zur
   Verhandlung: Diese Leiste liegt auf JEDER Seite dauerhaft im Bild.
   Die kraeftigste Lage bleibt bei 34 %, die Sterne bei 55 % auf
   anderthalb Bildpunkten. Was darueber liegt, ist keine Stimmung mehr,
   sondern ein Flimmern am oberen Bildrand -- und die Schrift davor muss
   lesbar bleiben. */
.kopfleiste {
  background:
    /* 1. das Sternenfeld -- unregelmaessig gesetzt, nicht im Raster:
          gleichmaessige Punkte lesen sich als Muster, nicht als Himmel */
    radial-gradient(1.4px 1.4px at 9% 66%, rgba(255, 255, 255, .55), transparent),
    radial-gradient(1px 1px at 21% 28%, rgba(214, 226, 255, .45), transparent),
    radial-gradient(1.2px 1.2px at 34% 74%, rgba(226, 216, 255, .40), transparent),
    radial-gradient(1px 1px at 52% 22%, rgba(255, 255, 255, .38), transparent),
    radial-gradient(1.5px 1.5px at 67% 60%, rgba(198, 226, 255, .48), transparent),
    radial-gradient(1px 1px at 81% 32%, rgba(255, 255, 255, .34), transparent),
    radial-gradient(1.2px 1.2px at 93% 70%, rgba(186, 220, 255, .42), transparent),
    /* 2. zwei Nebel, einer je Seite -- sie geben dem Verlauf Tiefe,
          statt ihn flach durchlaufen zu lassen */
    radial-gradient(70% 220% at 8% 120%, rgba(150, 110, 255, .44), transparent 70%),
    radial-gradient(70% 220% at 92% 120%, rgba(126, 200, 242, .38), transparent 70%),
    /* 3. der Verlauf selbst: links Lila, rechts Babyblau.

          DIE WERTE SIND NACHGEMESSEN, NICHT GEWAEHLT. Beim ersten
          Anlauf lagen sie bei .30/.26 -- der Verlauf war zu ahnen und
          nicht zu sehen. Gemessen am fertigen Bildschirmfoto hielt die
          Leiste dabei 5,26:1 an ihrer schlechtesten Stelle, bei einer
          Grenze von 4,5. Da war Luft, und die ist jetzt genutzt: Die
          Lagen sind kraeftiger, die schlechteste Stelle bleibt ueber
          der Grenze. Wer sie weiter aufdreht, misst wieder nach --
          diese Leiste steht auf JEDER Seite dauerhaft im Bild. */
    linear-gradient(90deg,
      rgba(132, 96, 240, .40) 0%,
      /* Die MITTE bleibt zurueckhaltender als die Enden -- dort stand
         im Bildschirmfoto der schlechteste Kontrast (4,79:1 bei einer
         Grenze von 4,5, also zu knapp). Die Farbe liest das Auge
         ohnehin an den Enden; in der Mitte gewinnt die Lesbarkeit. */
      rgba(124, 112, 236, .22) 34%,
      rgba(110, 158, 244, .20) 64%,
      rgba(126, 200, 242, .36) 100%),
    /* 4. der dunkle Grund darunter -- er traegt die Lesbarkeit */
    rgba(8, 7, 18, .9);
}
/* Die Naht zum Inhalt schimmert mit -- sonst endet das Licht an einer
   grauen Linie. */
/* Die Naht unten laeuft mit -- links Lila, rechts Babyblau, an beiden
   Enden auslaufend. Eine Kante, die in der Mitte am hellsten ist, waere
   ein Strich; eine, die die Richtung des Verlaufs aufnimmt, ist sein
   Abschluss. */
.kopfleiste::after {
  background: linear-gradient(90deg,
    transparent, rgba(150, 122, 255, .70) 18%, rgba(150, 150, 250, .62) 50%,
    rgba(126, 200, 242, .70) 82%, transparent);
}

/* ---- Die beiden Zeichen ---------------------------------------------
   Filipe: "der husky links soll auch babyblau strahlen und nicht rot
   und der rechts lila."

   Links stand ein warmes Rot (`rgba(255, 92, 68, .5)`) -- die Farbe
   der Agentur, fest hingeschrieben in start.css. Rechts strahlte der
   zweite Husky babyblau. Die beiden tauschen jetzt die Seiten: Der
   Verlauf der Leiste beginnt links in Lila und endet rechts in
   Babyblau, die Zeichen setzen den Gegenakzent -- so hat jede Seite
   beide Farben, statt dass jede nur eine hat. */
.kopfleiste .marke::before {
  filter: saturate(1.06) brightness(1.06)
          drop-shadow(0 0 7px rgba(143, 216, 255, .62));
}
.kopfleiste:hover .marke::before {
  filter: saturate(1.1) brightness(1.16)
          drop-shadow(0 0 9px rgba(143, 216, 255, .75));
}
/* Der rechte Husky ist eine MASKE mit einem Verlauf darin -- seine
   Fuellung wird mitgetauscht, nicht nur der Schein. Ein lila Schein um
   ein blaues Zeichen waere ein Rand, keine Farbe. */
.kopfleiste .marke::after {
  background-image:
    url("../img/marke-husky.webp"),
    linear-gradient(162deg, #9a7ee8 0%, #6a4bc0 44%, #33236b 100%);
  filter: brightness(.9) drop-shadow(0 0 6px rgba(169, 139, 255, .55));
}
.kopfleiste:hover .marke::after {
  filter: brightness(1.04) drop-shadow(0 0 8px rgba(169, 139, 255, .68));
}

/* Der Schriftzug selbst. Links stand die Chili in Rot, rechts das
   Silber der Zentrale -- hier links Lila, rechts unveraendert. */
/* GENAUSO SPEZIFISCH WIE DAS ORIGINAL, und beides gemessen statt
   geraten: Beim ersten Anlauf stand hier nur `.marke__haupt` -- die
   Regel wurde geladen, tat nichts, und im Bildschirmfoto blieb der
   Schriftzug rot. Das Original steht in einem @supports-Block unter
   `.kopfleiste .marke__haupt`; wer nur die halbe Kette schreibt,
   verliert gegen zwei Klassen. Dasselbe beim Universum darunter. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .kopfleiste .marke__haupt {
    /* `background-image` UND NICHT `background`. Die Kurzschreibweise
       setzt jede Lage der Eigenschaft zurueck, die sie nicht nennt --
       auch `background-clip`. Genau das ist hier passiert: Der Schriftzug
       wird ueber `background-clip: text` in den Buchstaben ausgestanzt;
       nach meinem ersten Anlauf stand oben links statt "Spicy & Dogi" ein
       ausgefuellter heller Balken. Im Quelltext sah die Zeile voellig
       richtig aus -- gesehen habe ich es erst im Bildschirmfoto. */
    background-image: linear-gradient(95deg,
      #b79aff 0%,
      #d3c2ff 22%,
      #eaf1f8 50%,
      #c6d8ea 72%,
      #9fc4e4 100%);
  }
}

/* Das Universum hinter der Zentrale: unten links glueht es rot,
   oben rechts babyblau, in der Mitte ein Hauch Lila. Jetzt zweimal
   kalt -- die Anordnung bleibt, damit Rand und Flaeche weiter in
   dieselbe Richtung laufen. */
.willkommen > .zuniversum {
  background:
    radial-gradient(125% 95% at 10% 88%, rgba(169, 139, 255, .13), transparent 62%),
    radial-gradient(115% 90% at 90% 12%, rgba(126, 200, 242, .105), transparent 60%),
    radial-gradient( 70% 62% at 52% 50%, rgba(200, 180, 255, .05), transparent 68%);
}

/* Glocke und Tagesruf tragen dieselbe zweifarbige Fassung wie alles
   andere: eine Kante warm, die andere babyblau. Beide Stellen stehen
   hier, weil beide dieselbe Mischung zeigen und sonst eine davon
   uebrig bliebe -- genau die faellt dann als einziger roter Punkt auf. */
.glocke--kachel,
.tagesruf {
  background:
    linear-gradient(150deg,
      rgba(255, 255, 255, .16) 0%,
      rgba(169, 139, 255, .15) 28%,
      rgba(9, 8, 19, .9) 54%,
      rgba(143, 216, 255, .13) 80%,
      rgba(255, 255, 255, .08) 100%);
  box-shadow:
    -2px -2px 16px -11px rgba(150, 122, 255, .55),
     2px  2px 16px -11px rgba(143, 216, 255, .5),
     0 8px 20px -12px rgba(0, 0, 0, .9);
}


/* =====================================================================
   DER GRUND JEDER KACHEL: EIN STERNENFELD
   =====================================================================

   Filipe: "veraender die kacheln und den hintergrund, ich will dass
   die hintergrunde von den kacheln immer unviersum artig ist, es muss
   richtig geil sein aber immer so dass man alles noch gut erkkent.
   und das IN DER GANZEN WEBSITE VON TEAM DOGI. nur die kacheln. [...]
   wichtig ist die form der kacheln soll gleich bleiben."

   ---------------------------------------------------------------------
   WARUM HIER NUR VIER WERTE STEHEN UND KEINE EINZIGE KACHELREGEL

   Das Haus hat eine kanonische KACHELLISTE -- 48 Klassen, von der
   grossen Startkachel bis zur Personenzeile. Sie steht in module.css
   SIEBENMAL, und pruef-css-klassen vergleicht die sieben Vorkommen
   miteinander. Eine achte Abschrift an dieser Stelle waere die Sorte
   Fehler, die nicht auffaellt: Sie ginge heute auf und waere bei der
   naechsten neuen Kachel unvollstaendig -- lautlos, denn niemand
   vermisst einen Hintergrund, den er nie gesehen hat.

   Deshalb faerbt diese Datei keine Kachel. Sie setzt die Werte um, aus
   denen module.css den Grund JEDER Kachel baut. Was danach dazukommt,
   bekommt das Sternenfeld von selbst. pruef-kachel-universum haelt
   fest, dass hier keine Kachelklasse auftaucht.

   DIE FORM BLEIBT UNANGETASTET. Fase, Kantenlicht und die drei
   Eckwinkel stehen an anderen Stellen und werden hier nicht erwaehnt;
   die Pruefung vergleicht Silhouette, Fase und Eckwinkel vor und nach
   dem Hauswechsel Zeichen fuer Zeichen. Diese Datei aendert Farbe,
   nicht Geometrie.

   ---------------------------------------------------------------------
   WARUM DIE NEBEL OBEN RECHTS UND UNTEN LINKS STEHEN

   Das ist die wichtigste Zeile dieses Abschnitts, und sie stammt nicht
   aus dem Geschmack, sondern aus einer Messung.

   Zuerst standen sie oben links -- die naheliegende Ecke, weil dort in
   jedem Bild der Blick anfaengt. Gemessen wurde danach etwas anderes:
   Hinter der leisesten Textzeile einer Personenkarte lagen
   ZWEI PROZENT aller Bildpunkte unter der Lesbarkeitsgrenze. Im
   Agenturhaus sind es an derselben Stelle 0,1 Prozent.

   Der Grund: JEDE Kachel dieses Hauses hat bereits einen eigenen
   Lichtverlauf, und der laeuft bei allen aus derselben Richtung --
   155 Grad bei den Startkacheln, 150 bei den Teamkacheln, 158 beim
   Kantenlicht. Oben links ist damit ueberall schon die hellste Stelle
   der Kachel, und genau dort stehen ueberall die Ueberschriften. Ein
   Nebel obendrauf addiert Licht auf Licht, ausgerechnet unter dem Text.

   Nach dem Umzug in die beiden GEGENUEBERLIEGENDEN Ecken: 0,22 Prozent.
   Derselbe Nebel, an einer anderen Stelle -- und er durfte dabei sogar
   KRAEFTIGER werden (.80 statt .62), weil er nicht mehr auf dem
   hellsten Punkt der Kachel liegt. Besser lesbar UND deutlicher zu
   sehen; das ist selten und war hier umsonst zu haben.

   ---------------------------------------------------------------------
   WARUM ES LESBAR BLEIBT -- die Zahlen dahinter

   Alles unten ist an echten Bildpunkten gemessen, nicht gerechnet, und
   gegen dieselbe Stelle im Agenturhaus gehalten. Drei Regeln haben die
   Werte bestimmt:

   1. DIE FLAECHE ZAEHLT, NICHT DER PUNKT. Ein Sternenfeld ist kein
      Hintergrund, sondern viele. Gemessen wird deshalb, welcher ANTEIL
      der Punkte hinter einer Textzeile unter 4,5:1 faellt. Im
      Agenturhaus sind das im schlechtesten Fall 0,115 Prozent, hier
      0,253 Prozent -- beides ein paar hundert Punkte von 17 000, und
      es sind die Sternkerne. Der Mittelwert, also das, was ein
      Buchstabe wirklich sieht, liegt ueberall bei 6,4:1 oder besser.

   2. STERNE SIND PUNKTE UND BLEIBEN LEISE. Ihre Deckkraft ist die
      einzige Zahl, die den hellsten Punkt hinter einem Buchstaben
      bestimmt. Bei .58 mal dem Schleier von .30 kommt der Kern auf gut
      ein Sechstel Weiss; auf dem dunklen Grund dieses Hauses steht die
      Schrift selbst DORT noch bei 3,6:1. Ein Versuch mit kleineren,
      dafuer helleren Kernen war der falsche Weg: Der hellste Punkt
      blieb fast gleich, der Stern wurde nur unschaerfer.

   3. KEIN KARO. Die Sternebenen wiederholen sich in Abstaenden ohne
      gemeinsamen Teiler (89/77, 59/51, 167/139). Gleiche Zahlen
      ergaeben ein Muster, und ein Muster sieht man sofort als Tapete.
      Ungleiche ergeben ein Feld, das sich erst nach Hunderten von
      Pixeln wiederholt -- laenger, als eine Kachel breit ist.

   Der Nebel nimmt zu knapp einem Fuenftel den Ton der jeweiligen
   Kachel auf. Dadurch hat jede Kategorie ihren eigenen Himmel, ohne
   dass eine Kachel aus der Mischung faellt: Vier Fuenftel bleiben
   Lila beziehungsweise Babyblau. */
:root {
  --sternenfeld:
    /* feine weisse Sterne */
    radial-gradient(circle at 22% 28%, rgba(255, 255, 255, .58) 0 .9px, transparent 2px),
    /* babyblaue Sterne, dichter gesaet */
    radial-gradient(circle at 68% 71%, rgba(142, 201, 255, .52) 0 .8px, transparent 1.8px),
    /* wenige groessere in Lila */
    radial-gradient(circle at 47% 15%, rgba(169, 139, 255, .60) 0 1.3px, transparent 3px),
    /* Nebel oben RECHTS, Lila -- die Ecke, an der keine Kachel schon
       von sich aus hell ist (siehe oben) */
    radial-gradient(ellipse 74% 64% at 90% 16%,
      color-mix(in srgb, var(--ton, var(--violett)) 18%, rgba(125, 92, 224, .80)) 0%,
      transparent 68%),
    /* Nebel unten LINKS, Babyblau -- die gegenueberliegende Ecke,
       damit der Verlauf quer durch die Kachel laeuft */
    radial-gradient(ellipse 66% 52% at 10% 104%,
      color-mix(in srgb, var(--ton, var(--akzent)) 18%, rgba(90, 162, 232, .70)) 0%,
      transparent 70%);

  --sternenfeld-mass:
    89px 77px,
    59px 51px,
    167px 139px,
    100% 100%,
    100% 100%;

  /* Die Versaetze sorgen dafuer, dass die drei Sternebenen nicht in
     derselben Ecke anfangen -- sonst stuenden an jedem Rasterpunkt
     drei Sterne uebereinander und dazwischen keiner. */
  --sternenfeld-lage:
    0 0,
    11px 19px,
    5px 7px,
    0 0,
    0 0;

  /* Der Schleier daempft Raster, Eckwinkel UND Sternenfeld gemeinsam
     -- eine Ebene, eine Deckkraft. Im Agenturhaus steht er auf .26,
     dort traegt er nur ein Raster. Hier traegt er einen Himmel; .30
     ist der Wert, bei dem die Sternkerne die Messung oben halten. Die
     Eckwinkel werden dadurch um einen Hauch mitgehoben, was recht ist:
     Sie sind die Form, und die soll vor dem Himmel nicht verschwinden. */
  --modul-schleier: .30;
}

/* Der Schriftzug von Team Dogi trägt denselben Verlauf wie die
   Überschrift der Zentrale — und brauchte denselben Rückfall. Ohne ihn
   steht im Windows-Kontrastmodus oben links nichts. Diese Datei liegt
   auf allen 21 Seiten der Team-Dogi-Adresse. */
@media (forced-colors: active) {
  .kopfleiste .marke__haupt {
    background: none;
    -webkit-text-fill-color: CanvasText;
    color: CanvasText;
  }
}