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