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.
   ===================================================================== */
.kopfleiste {
  background:
    /* der Schimmer an der Unterkante */
    linear-gradient(180deg,
      transparent 34%,
      rgba(74, 46, 150, .15) 72%,
      rgba(116, 78, 214, .28) 100%),
    /* in der Mitte kraeftiger als an den Raendern */
    radial-gradient(120% 190% at 50% 118%,
      rgba(169, 139, 255, .30) 0%,
      rgba(88, 56, 168, .18) 38%,
      transparent 72%),
    rgba(8, 7, 18, .88);
}
/* Die Naht zum Inhalt schimmert mit -- sonst endet das Licht an einer
   grauen Linie. */
.kopfleiste::after {
  background: linear-gradient(90deg,
    transparent, rgba(150, 122, 255, .55) 22%, rgba(178, 150, 255, .75) 50%,
    rgba(150, 122, 255, .55) 78%, transparent);
}

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