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