DogFatherGitandClaude Opus 5
9c96612321
Auf der Befindens-Seite ueberlagerten sich bei 430 px zwei Absaetze um 18 Pixel. Betroffen war ausgerechnet "Deine Antworten liest niemand ausser dir" -- also der Satz, in dem das Vertrauen entsteht, das die ganze Seite braucht. Ursache war eine feste Zahl: -18px Abstand, gerechnet gegen die 26 px, die das Element darueber mitbringt. In einer Kopfzeile setzt start.css dieses margin-bottom aber auf 0. Aus 26 minus 18 wurde 0 minus 18. Zwei fuer sich richtige Regeln, und dazwischen ein Schaden, den keine von beiden verursacht. Die Lehre ist nicht "-18 auf -8 aendern" -- das waere dieselbe Zahl mit anderem Wert und beim naechsten Zusammentreffen wieder falsch. Jetzt bestimmt der Absatz davor seinen Abstand selbst, und nur dann, wenn der Zusatz wirklich folgt (:has). Acht Pixel, in jeder Umgebung. Gefunden hat es ein Bildschirmfoto, nicht das Lesen: Beide Regeln sehen einzeln vernuenftig aus. Die Messung steht jetzt fest in pruef-befinden.mjs (113/0), mit Gegenprobe: Mit dem alten Wert wird sie rot, ohne ihn gruen. Co-Authored-By: Claude Opus 5 <[email protected]>
3008 lines
128 KiB
CSS
3008 lines
128 KiB
CSS
/* ===================================================================
|
||
Creator Workspace - Anmeldeseite
|
||
-------------------------------------------------------------------
|
||
Grundsatz: dunkel und ruhig. Die Farben stammen aus dem Motiv, sind
|
||
aber bewusst entsättigt - Neon als Stimmung, nicht als Blendung.
|
||
Kein reines Weiss auf Schwarz, keine harten Kanten, keine Blinker.
|
||
=================================================================== */
|
||
|
||
:root {
|
||
--tinte: #05070d;
|
||
--glas: rgba(10, 14, 23, 0.74);
|
||
--glas-tief: rgba(6, 9, 16, 0.86);
|
||
|
||
/* Die Flaeche jeder Kachel, Karte und Spalte -- an EINER Stelle.
|
||
Vorher stand in jeder Datei ein eigener Wert zwischen .02 und .032
|
||
WEISS, also praktisch durchsichtig. Solange der Hintergrund fast
|
||
schwarz war, fiel das nicht auf. Seit die Buehnen hell sind, kam das
|
||
Bild mitten durch den Text.
|
||
|
||
Jetzt eine deckende dunkle Flaeche: Der Hintergrund bleibt sichtbar,
|
||
aber DAZWISCHEN -- nicht hinter der Schrift. Genau das macht den
|
||
Unterschied zwischen "hat einen Hintergrund" und "ist unlesbar".
|
||
Wer die Kacheln durchsichtiger oder dichter will, aendert nur diese
|
||
eine Zeile. */
|
||
/* 0,89 statt 0,78 (07.09.2026). Die Flächen der Seite lagen bisher
|
||
hinter einem Weichzeichner -- 22 % Durchsicht auf ein VERWISCHTES
|
||
Bild fallen nicht auf. Ohne ihn liegt dahinter jetzt ein scharfes,
|
||
kontrastreiches Motiv, und dieselben 22 % machen aus einer ruhigen
|
||
Fläche eine unruhige. Die Durchsicht bleibt (Filipe: "vielleicht
|
||
ganz ganz ganz leicht durch zu sehen sein"), aber als Andeutung,
|
||
nicht als Muster. */
|
||
--flaeche: rgba(9, 13, 22, 0.89);
|
||
--rand: rgba(150, 186, 220, 0.16);
|
||
--rand-hell: rgba(150, 186, 220, 0.30);
|
||
|
||
--text: #dbe4ef; /* kein reines Weiss - schont die Augen */
|
||
--text-leise: #94a5bb;
|
||
/* Von #6d7d92 auf #75859a angehoben (01.09.2026).
|
||
Aufgefallen erst, als die Buehne im Hintergrund dazukam und der
|
||
Kontrast an echten BILDPUNKTEN gemessen wurde statt an der
|
||
Farbangabe: Der leiseste Grauton lag bei 4,43:1 -- knapp unter den
|
||
geforderten 4,5:1. Das war schon vorher so, nur hatte es nie jemand
|
||
nachgerechnet. Jetzt 4,95:1 auf dem hellsten Untergrund, 5,35:1 auf
|
||
reiner Tinte. Immer noch deutlich leiser als der Haupttext, aber
|
||
lesbar -- und das gilt jetzt fuer JEDE Seite, nicht nur fuer die
|
||
mit dem Hintergrundbild. */
|
||
/* 07.09.2026: #75859a -> #7f8fa6.
|
||
Der alte Wert war am 01.09. gegen die DAMALIGE Buehne gemessen
|
||
und lag dort bei 4,95:1. Seit die Hintergruende Kontrast,
|
||
Saettigung und eine Vignette statt eines flachen Schleiers
|
||
bekommen haben, sind sie heller -- und derselbe Ton fiel auf
|
||
4,50:1, also genau auf die Grenze. Gemessen von pruef-buehne
|
||
an echten Bildpunkten, nicht an der Farbangabe.
|
||
|
||
Das ist der Preis dafuer, dass das Motiv jetzt zu sehen ist:
|
||
Wer den Hintergrund heller macht, muss die leiseste Schrift
|
||
nachziehen. Die Alternative waere gewesen, das Bild wieder
|
||
zuzudecken -- dann haette man den Aufwand auch lassen koennen. */
|
||
--text-still: #7f8fa6;
|
||
|
||
--akzent: #3fbdf5; /* aus dem Neon des Motivs, entsättigt */
|
||
--akzent-tief: #1f7fb0;
|
||
--violett: #8a76ff;
|
||
--warn: #ff9aa2; /* weiches Rot statt Signalrot */
|
||
|
||
--radius: 18px;
|
||
--radius-klein: 12px;
|
||
--schatten: 0 24px 60px -20px rgba(0, 0, 0, 0.75);
|
||
--tempo: .22s cubic-bezier(.4, 0, .2, 1);
|
||
|
||
/* ================================================================
|
||
DIE FARBEN DER FÜNF ROLLEN — an EINER Stelle (08.09.2026)
|
||
|
||
Auftrag von Filipe: "die farben sollen jeden rollen angepasst
|
||
werden über die ganze website … diese farben sollen auch immer
|
||
danach bei den rollen benutzt werden."
|
||
|
||
Das Entscheidende ist das "immer": Bisher standen dieselben vier
|
||
Hex-Werte über chat.css, personen.css und ein Dutzend weiterer
|
||
Dateien verstreut — allein in chat.css sechzehnmal. Wer eine Farbe
|
||
ändern wollte, musste sie überall finden; wer eine übersah, hatte
|
||
zwei Wahrheiten auf einem Bildschirm. Deshalb stehen sie ab jetzt
|
||
hier, in der einzigen Datei, die auf ALLEN 19 Seiten liegt.
|
||
|
||
Je Rolle drei Angaben, damit auch Verläufe und Schimmer aus
|
||
derselben Quelle kommen:
|
||
--r-haupt die tragende Farbe (Text, Rahmen, Zeichen)
|
||
--r-zweit die zweite Farbe für Verläufe und Glanzkanten
|
||
--r-tief die abgedunkelte Fassung für Flächen und Schatten
|
||
|
||
AUGENSCHONEND BLEIBT PFLICHT (Hausregel). "Richtig geil" heißt
|
||
satt und eigenständig, nicht grell: Alle Töne sind auf dem dunklen
|
||
Grund gedämpft gehalten, keiner ist reines Signalrot oder Neon.
|
||
Gegen #0a121e liegt jeder Haupt-Ton über 4,5:1. */
|
||
|
||
/* SPICY — rot. Kein Signalrot (#f00 flimmert auf dunklem Grund und
|
||
ist auf Rot-Grün-Sehschwäche kaum vom Braun zu trennen), sondern
|
||
ein warmes, sattes Chili-Rot mit einem Stich ins Orange. */
|
||
--spicy-haupt: #ef5f57;
|
||
--spicy-zweit: #ff8a6b;
|
||
--spicy-tief: #8c2f2b;
|
||
|
||
/* DOGFATHER (admin) — SILBER, mit Babyblau als Auge (09.09.2026).
|
||
|
||
Filipe: "die farbe von der rolle und die barre soll so richtig
|
||
geil silber sein. so wie mit sternen, also es soll nicht zu viel
|
||
sein aber geil sein und der husky soll eine geile babyblau
|
||
[Auge] haben ... es soll jetzt nicht viel mehr farbe haben."
|
||
|
||
Damit kehrt die Rolle zu dem zurueck, was im allerersten Auftrag
|
||
stand ("husky: silber und blaue augen") -- unterwegs war daraus
|
||
Babyblau als Traegerfarbe geworden.
|
||
|
||
NACHGERECHNET, WEIL SILBER GEFAEHRLICH IST: Es hat kaum Buntheit
|
||
und koennte deshalb neben einer anderen Rolle verschwinden. In
|
||
OKLab liegt #d8e0ec 0,1901 von seinem naechsten Nachbarn (Scout)
|
||
entfernt -- das BISHERIGE Babyblau lag bei 0,1349. Die fuenf
|
||
Rollen sind dadurch besser auseinanderzuhalten als vorher, nicht
|
||
schlechter. Kontrast auf dunklem Grund: 14,41:1.
|
||
|
||
Creators Silber ist nur sein ZWEITTON neben Bronze; sein Traeger
|
||
bleibt warm, dieser hier ist kuehl. Die beiden stossen sich
|
||
nicht.
|
||
|
||
"wie mit sternen" ist als GLANZ gebaut, nicht als Funken: ein
|
||
schmales Spitzlicht, das ueber das Silber laeuft (siehe
|
||
`.rolle[data-rolle="admin"]` weiter unten). Kein Blinken -- die
|
||
Anmeldeseite ist das Erste, was jemand sieht, und augenschonend
|
||
bleibt Vorgabe. */
|
||
/* SILBER MIT BABYBLAU GEMISCHT (09.09.2026, Wunsch Filipe: "ich
|
||
will dass diese farbe gemischt wird mit babyblau, es soll richtig
|
||
geil sein").
|
||
|
||
Das reine Silber von gestern (#d8e0ec) war kuehl, aber neutral --
|
||
es haette zu jeder Marke gepasst. Jetzt traegt es den Babyblau-
|
||
Stich von DogFather selbst: #c7dcf4 ist dieselbe Helligkeit,
|
||
nur mit einer Blaurichtung. Nachgerechnet bleibt der Abstand zur
|
||
naechsten Rolle bei 0,1790 -- immer noch deutlich weiter als das
|
||
frueher benutzte Babyblau (0,1349) und weit ueber der Grenze im
|
||
Satz (0,0973). Kontrast 13,66:1.
|
||
|
||
Gemischt ist es nicht nur im Farbwert, sondern SICHTBAR: Die
|
||
Schiene links laeuft von Silber nach Babyblau, und der Glanz auf
|
||
der Zeile traegt beide Toene. Eine Mischung, die man nur im
|
||
Hexwert findet, ist keine. */
|
||
/* NACHGESCHAERFT AM 09.09.2026 (screen1). Filipe: "da muss mehr
|
||
babyblau zu sehen sein. da ist ja fast nichts."
|
||
|
||
Er hatte recht, und es war messbar: In der DogFather-Zeile waren
|
||
nur 5,9 Prozent der hellen Bildpunkte babyblau. #c7dcf4 traegt
|
||
zwischen Rot- und Blaukanal nur 45 Stufen Unterschied -- im Hexwert
|
||
ist das ein Blau, auf dem Bildschirm ein Weiss.
|
||
|
||
#9ed3f4 hat 86 Stufen, also fast das Doppelte, und bleibt trotzdem
|
||
hell genug fuer Metall: Kontrast 12,41:1 auf dem Untergrund
|
||
(vorher 14,21:1), Abstand zur naechsten Rollenfarbe 0,1295 in
|
||
OKLab -- die Hausgrenze liegt bei 0,0973. Es ist also weiterhin
|
||
eindeutig DogFather und faellt nicht in Richtung Creator.
|
||
|
||
Silber bleibt es durch die HELLIGKEIT, blau wird es durch den
|
||
Kanalabstand. Beides zugleich geht nur so; ein saettigeres Blau
|
||
waere Farbe statt Material. */
|
||
/* ---------------------------------------------------------------
|
||
DRITTER SCHRITT, 09.09.2026. Filipe: "die rolle dogfather soll
|
||
eine uebertrieben geile babyblau haben."
|
||
|
||
Zweimal habe ich hier den ABSTAND zwischen Rot- und Blaukanal
|
||
erhoeht (45 Stufen -> 86) und zweimal war es zu wenig. Diesmal
|
||
erst gemessen, was am Bildschirm ankommt, statt den Hexwert
|
||
anzusehen:
|
||
|
||
Die DogFather-Zeile traegt 98,7 % farbige Bildpunkte -- MEHR als
|
||
jede andere Rolle. An der Menge lag es also nie.
|
||
Ihr Mittelwert war aber rgb(43,62,78): zwischen Rot und Blau
|
||
liegen 35 Stufen, und das ist Stahlgrau, kein Babyblau.
|
||
|
||
Die richtige Groesse ist die SAETTIGUNG, nicht der Kanalabstand im
|
||
Hexwert. In OKLab gemessen hatte #9ed3f4 eine Buntheit von 0,0718
|
||
-- der blasseste Wert aller fuenf Rollen. #5fbdff hat 0,1303, also
|
||
81 Prozent mehr, und die Zeile kommt damit auf rgb(28,55,76):
|
||
48 Stufen zwischen Rot und Blau statt 28.
|
||
|
||
Was dabei NICHT verlorengeht, nachgerechnet:
|
||
* Kontrast auf dem Grund 9,75:1 (vorher 12,49) -- weit ueber den
|
||
4,5, die fuer Text gelten, und ueber den 7 fuer AAA.
|
||
* Abstand zur naechsten Rollenfarbe (Scout) 0,1608 in OKLab,
|
||
vorher 0,1466. Die Hausgrenze liegt bei 0,0973 -- DogFather
|
||
ist also SICHERER unterscheidbar als vorher, nicht weniger.
|
||
|
||
Silber bleibt es durch die Helligkeit des Spitzlichts auf der
|
||
Schiene (#f2f8ff an ihrem oberen Ende) -- das ist die Stelle, an
|
||
der Metall entsteht. Die Flaeche darunter darf Farbe sein. */
|
||
--dogi-haupt: #5fbdff;
|
||
/* Der Begleitton geht mit: Er traegt die untere Haelfte der Schiene.
|
||
Bliebe er auf #6dc2f2, waere die Schiene oben satter als unten --
|
||
ein Verlauf, der in die falsche Richtung laeuft. */
|
||
--dogi-zweit: #2fa9f2;
|
||
/* Und die Tiefe wird ein echtes Blau statt eines Schiefergraus. */
|
||
--dogi-tief: #14496f;
|
||
|
||
/* MANAGER — lila, bleibt (Wunsch: "manager bleibt lila"). */
|
||
--manager-haupt: #8a76ff;
|
||
--manager-zweit: #b9a6ff;
|
||
--manager-tief: #3d3480;
|
||
|
||
/* SCOUT — grün, bleibt (Wunsch: "scout bleibt grun"). */
|
||
--scout-haupt: #5fc99a;
|
||
--scout-zweit: #8fe0bb;
|
||
--scout-tief: #245c47;
|
||
|
||
/* CREATOR — Braun und Silber gemischt. Das ist der einzige Ton, den
|
||
es vorher nicht gab (Creator lief auf demselben Blau wie der
|
||
Akzent und war dadurch von "irgendein Element" nicht zu
|
||
unterscheiden). Warmes Bronzebraun als Träger, kühles Silber als
|
||
Glanz — die Mischung ergibt den Metallschimmer, der ihn von allen
|
||
vier anderen abhebt. */
|
||
--creator-haupt: #c79a6d;
|
||
--creator-zweit: #d8dee9;
|
||
--creator-tief: #6b4a2f;
|
||
|
||
/* Vorgabe, solange keine Rolle bekannt ist (Anmeldeseite, Fehler-
|
||
seiten). Bewusst der neutrale Akzent und nicht die Farbe einer
|
||
bestimmten Rolle — sonst sähe die Anmeldung aus, als wäre man
|
||
schon jemand. */
|
||
--r-haupt: var(--akzent);
|
||
--r-zweit: var(--violett);
|
||
--r-tief: var(--akzent-tief);
|
||
|
||
/* ---- DER SICHERE BEREICH (09.09.2026) --------------------------
|
||
|
||
Jede der 20 Workspace-Seiten sagt `viewport-fit=cover` -- die Seite
|
||
wird also bis unter Statusleiste, Aussparung und Gestenleiste
|
||
gezeichnet. Das ist gewollt (randloser Hintergrund), verlangt aber,
|
||
dass man den belegten Rand wieder abzieht. Genau das fehlte hier:
|
||
im ganzen Workspace stand kein einziges `env(safe-area-inset-*)`,
|
||
waehrend die Webdesign-Seiten es laengst haben.
|
||
|
||
Im Browser faellt es nicht auf, weil die Adresszeile die Seite nach
|
||
unten schiebt. INSTALLIERT gibt es die nicht mehr -- dann liegt die
|
||
Kopfleiste auf einem iPhone hinter der Uhr, und von einem 36-px-Knopf
|
||
bleiben rechnerisch 5 px zum Antippen uebrig.
|
||
|
||
Filipes Android ist NICHT betroffen (nachgesehen im Bildschirmfoto,
|
||
die App beginnt dort sauber unter der Statusleiste) -- das hier ist
|
||
fuer die iPhones im Team.
|
||
|
||
Einmal zentral benannt statt an fuenfzehn Stellen einzeln
|
||
geschrieben: Wer sie einzeln schreibt, vergisst eine, und dann liegt
|
||
genau ein Knopf unter der Gestenleiste. Auf Geraeten ohne
|
||
Aussparung sind alle vier 0 -- dort aendert sich nichts. */
|
||
--ws-sicher-oben: env(safe-area-inset-top, 0px);
|
||
--ws-sicher-unten: env(safe-area-inset-bottom, 0px);
|
||
--ws-sicher-links: env(safe-area-inset-left, 0px);
|
||
--ws-sicher-rechts: env(safe-area-inset-right, 0px);
|
||
}
|
||
|
||
/* Die Rolle steht am <html> (gesetzt in kopf.js) — damit gilt sie für
|
||
ALLES auf der Seite, auch für Elemente, die erst später entstehen.
|
||
Ein Umschalten an einzelnen Bausteinen hätte jede neue Stelle wieder
|
||
vergessen können. */
|
||
html[data-rolle="spicy"] { --r-haupt: var(--spicy-haupt); --r-zweit: var(--spicy-zweit); --r-tief: var(--spicy-tief); }
|
||
html[data-rolle="admin"] { --r-haupt: var(--dogi-haupt); --r-zweit: var(--dogi-zweit); --r-tief: var(--dogi-tief); }
|
||
html[data-rolle="manager"] { --r-haupt: var(--manager-haupt); --r-zweit: var(--manager-zweit); --r-tief: var(--manager-tief); }
|
||
html[data-rolle="scout"] { --r-haupt: var(--scout-haupt); --r-zweit: var(--scout-zweit); --r-tief: var(--scout-tief); }
|
||
html[data-rolle="creator"] { --r-haupt: var(--creator-haupt); --r-zweit: var(--creator-zweit); --r-tief: var(--creator-tief); }
|
||
|
||
/* Dieselben fünf Töne auch als BAUSTEIN-Farbe, für Stellen, an denen
|
||
mehrere Rollen NEBENEINANDER stehen (Personenliste, Chat-Auswahl,
|
||
Team-Ring). Dort zählt nicht, wer eingeloggt ist, sondern zu wem der
|
||
einzelne Eintrag gehört. */
|
||
[data-rolle="spicy"] { --rolle-haupt: var(--spicy-haupt); --rolle-zweit: var(--spicy-zweit); --rolle-tief: var(--spicy-tief); }
|
||
[data-rolle="admin"] { --rolle-haupt: var(--dogi-haupt); --rolle-zweit: var(--dogi-zweit); --rolle-tief: var(--dogi-tief); }
|
||
[data-rolle="manager"] { --rolle-haupt: var(--manager-haupt); --rolle-zweit: var(--manager-zweit); --rolle-tief: var(--manager-tief); }
|
||
[data-rolle="scout"] { --rolle-haupt: var(--scout-haupt); --rolle-zweit: var(--scout-zweit); --rolle-tief: var(--scout-tief); }
|
||
[data-rolle="creator"] { --rolle-haupt: var(--creator-haupt); --rolle-zweit: var(--creator-zweit); --rolle-tief: var(--creator-tief); }
|
||
|
||
*, *::before, *::after { box-sizing: border-box; }
|
||
|
||
/* `color-scheme: dark` ist der eigentliche Schalter für alles, was der
|
||
Browser selbst zeichnet und was CSS nicht erreicht: die aufgeklappte
|
||
Liste eines <select>, den Kalender eines Datumsfeldes, Bildlaufleisten,
|
||
die Textmarkierung. Ohne diese Zeile geht der Browser von einer hellen
|
||
Seite aus und malt die Auswahlliste weiss -- die helle Schrift darauf
|
||
war dann praktisch unlesbar. */
|
||
html { -webkit-text-size-adjust: 100%; color-scheme: dark; }
|
||
|
||
/* Zusätzlich die Einträge selbst setzen. Ältere Browser und Linux-
|
||
Oberflächen ignorieren color-scheme teilweise; diese beiden Zeilen
|
||
wirken auch dort. */
|
||
option {
|
||
background-color: #0d131d;
|
||
color: var(--text);
|
||
}
|
||
|
||
/* WICHTIG. Das hidden-Attribut blendet ein Element nur über eine sehr
|
||
schwache Browserregel aus -- JEDE eigene display-Angabe schlägt sie.
|
||
Ohne diese Zeile blieben Elemente sichtbar, die per JavaScript
|
||
ausgeblendet wurden: das Ablegefeld für Dateien (display: grid) und
|
||
die Verwaltungsfelder im Creator-Profil (ebenfalls grid). Aufgefallen
|
||
erst im Screenshot -- eine Prüfung auf das Attribut allein hätte den
|
||
Fehler nie gezeigt, denn gesetzt war es ja. */
|
||
[hidden] { display: none !important; }
|
||
|
||
body.gate {
|
||
margin: 0;
|
||
min-height: 100svh;
|
||
display: flex;
|
||
align-items: center;
|
||
background: var(--tinte);
|
||
color: var(--text);
|
||
font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
|
||
font-size: 16px;
|
||
line-height: 1.55;
|
||
letter-spacing: .01em;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
/* ---------- Bühne ---------------------------------------------------- */
|
||
|
||
.buehne { position: fixed; inset: 0; z-index: 0; }
|
||
|
||
/* DAS <picture> BEKOMMT EINE EIGENE GRÖSSE (19.09.2026)
|
||
|
||
`<picture>` ist von Haus aus ein INLINE-Element ohne eigene Breite --
|
||
es richtet sich nach seinem Inhalt. Das `width: 100%` am Bild bezieht
|
||
sich damit auf etwas, das sich selbst nach dem Bild richtet. Als
|
||
Block mit `inset: 0` sitzt es dagegen sauber im Rahmen der Bühne,
|
||
und `object-fit: cover` schneidet den Ausschnitt zu, der gemeint ist.
|
||
|
||
---------------------------------------------------------------------
|
||
EHRLICHKEIT ZUR HERKUNFT DIESER REGEL
|
||
|
||
Hier stand zuerst eine lange Begründung mit einer Messung: „1647 px
|
||
breites Bild auf einem 390 px breiten Schirm". Diese Messung war
|
||
FALSCH -- sie stammte aus einem Prüflauf, in dem wegen einer
|
||
erzwungenen https-Umleitung überhaupt keine Stilvorlage geladen
|
||
wurde. Gemessen wurde eine Seite ganz ohne CSS.
|
||
|
||
Die Regel selbst bleibt trotzdem richtig, und sie bleibt deshalb
|
||
stehen. Aber die Begründung ist ausgetauscht: Ein Kommentar, der eine
|
||
Zahl nennt, die nie stimmte, ist schlimmer als keiner -- der Nächste
|
||
liest ihn und glaubt ihm. */
|
||
.buehne picture {
|
||
display: block;
|
||
position: absolute; inset: 0;
|
||
}
|
||
|
||
.buehne__bild {
|
||
width: 100%; height: 100%;
|
||
object-fit: cover;
|
||
object-position: center;
|
||
/* Minimal abgedunkelt und entsättigt, damit der Text darüber ruhig liegt. */
|
||
filter: saturate(.92) brightness(.9);
|
||
/* Die Reserve fuer die Parallaxe -- und die Bewegung selbst, die
|
||
gate.js als zwei Groessen am <body> setzt. Frueher schrieb das
|
||
Skript hier direkt `style.transform`; seit die Karte in der
|
||
gemalten Tafel sitzt, muss der Anker DIESELBE Bewegung machen, und
|
||
dafuer brauchen beide dieselbe Quelle. */
|
||
transform: scale(1.03)
|
||
translate3d(var(--parallax-x, 0px), var(--parallax-y, 0px), 0);
|
||
transition: transform 1.4s cubic-bezier(.2, .7, .2, 1);
|
||
will-change: transform;
|
||
}
|
||
|
||
/* Der Schleier macht die linke Seite lesbar, ohne das Motiv zu erschlagen.
|
||
Rechts bleibt er fast durchsichtig - dort stehen Dogfather und Hasi Dog. */
|
||
.buehne__schleier {
|
||
position: absolute; inset: 0;
|
||
/* Viele weiche Stufen statt weniger harter - sonst zeichnet sich die Kante
|
||
des Verlaufs als sichtbare Diagonale quer durchs Bild. */
|
||
background:
|
||
linear-gradient(96deg,
|
||
rgba(3, 5, 10, 0.93) 0%,
|
||
rgba(3, 5, 10, 0.90) 18%,
|
||
rgba(3, 5, 10, 0.82) 28%,
|
||
rgba(4, 6, 12, 0.68) 36%,
|
||
rgba(4, 6, 12, 0.50) 44%,
|
||
rgba(4, 6, 12, 0.33) 52%,
|
||
rgba(4, 6, 12, 0.19) 60%,
|
||
rgba(4, 6, 12, 0.09) 68%,
|
||
rgba(4, 6, 12, 0.03) 78%,
|
||
rgba(4, 6, 12, 0.00) 88%),
|
||
radial-gradient(120% 90% at 50% 120%, rgba(0, 0, 0, .42), transparent 62%);
|
||
}
|
||
|
||
/* ---------- Tafel ---------------------------------------------------- */
|
||
|
||
.tafel {
|
||
position: relative;
|
||
z-index: 1;
|
||
margin-left: clamp(24px, 7vw, 104px);
|
||
width: min(452px, 44vw);
|
||
padding: clamp(28px, 3vw, 40px) clamp(24px, 2.6vw, 36px) clamp(24px, 2.6vw, 32px);
|
||
background: var(--glas);
|
||
backdrop-filter: blur(22px) saturate(115%);
|
||
-webkit-backdrop-filter: blur(22px) saturate(115%);
|
||
border: 1px solid var(--rand);
|
||
border-radius: var(--radius);
|
||
box-shadow: var(--schatten);
|
||
animation: auftauchen .7s cubic-bezier(.2, .7, .2, 1) both;
|
||
}
|
||
|
||
/* Feine Lichtkante links - nimmt das Neon des Motivs auf, ohne zu leuchten. */
|
||
.tafel__kante {
|
||
position: absolute; left: -1px; top: 16%; bottom: 16%;
|
||
width: 2px; border-radius: 2px;
|
||
background: linear-gradient(180deg,
|
||
transparent, var(--akzent) 22%, var(--violett) 72%, transparent);
|
||
opacity: .55;
|
||
}
|
||
|
||
@keyframes auftauchen {
|
||
from { opacity: 0; transform: translateY(14px); }
|
||
to { opacity: 1; transform: none; }
|
||
}
|
||
|
||
/* ---------- Kopf ----------------------------------------------------- */
|
||
|
||
.marke {
|
||
margin: 0 0 6px;
|
||
font-size: .74rem; font-weight: 700;
|
||
letter-spacing: .18em; text-transform: uppercase;
|
||
color: var(--akzent);
|
||
}
|
||
|
||
.titel {
|
||
margin: 0 0 8px;
|
||
font-size: clamp(1.6rem, 2.5vw, 2rem);
|
||
font-weight: 700; line-height: 1.15;
|
||
letter-spacing: -.01em;
|
||
}
|
||
|
||
.unterzeile { margin: 0 0 26px; color: var(--text-leise); font-size: .94rem; }
|
||
|
||
/* DER NACHSATZ, DER EINE EINSCHRÄNKUNG TRÄGT (19.09.2026).
|
||
|
||
Eine Zeile unter der Unterzeile, ruhiger gesetzt und mit einem
|
||
Strich links: Sie widerspricht dem Satz darüber nicht, sie
|
||
vervollständigt ihn. Deshalb tritt sie zurück, statt zu warnen —
|
||
augenschonend heißt hier ausdrücklich auch: keine Signalfarbe für
|
||
etwas, das keine Warnung ist. */
|
||
/* ---- DER ABSTAND IST EINE REGEL, KEINE ZAHL (korrigiert 20.09.2026) --
|
||
|
||
Hier stand `margin: -18px 0 26px`. Die -18 waren gegen die 26 px
|
||
gerechnet, die `.unterzeile` darueber mitbringt -- Netto acht Pixel
|
||
Abstand, und auf der Torseite sah das richtig aus.
|
||
|
||
AUF DER BEFINDENS-SEITE UEBERLAGERTEN SICH DIE BEIDEN ABSAETZE UM
|
||
GENAU 18 PIXEL. Dort steht die Unterzeile in einer Kopfzeile, und
|
||
`start.css` setzt deren `margin-bottom` auf 0. Aus 26 minus 18 wurde
|
||
0 minus 18. Zwei fuer sich richtige Regeln, und dazwischen Text ueber
|
||
Text -- ausgerechnet im Satz „Deine Antworten liest niemand ausser
|
||
dir", also dort, wo Vertrauen entsteht.
|
||
|
||
Gefunden hat es ein Bildschirmfoto, nicht das Lesen: Beide Regeln
|
||
sehen einzeln vernuenftig aus.
|
||
|
||
DIE LEHRE IST NICHT „-18 auf -8 aendern" -- das waere dieselbe Zahl
|
||
mit einem anderen Wert und beim naechsten Zusammentreffen wieder
|
||
falsch. Stattdessen bestimmt der Absatz DAVOR seinen Abstand selbst,
|
||
und zwar nur dann, wenn der Zusatz wirklich folgt (`:has`). Damit
|
||
sind es IMMER acht Pixel, egal in welcher Umgebung.
|
||
|
||
Die Klasse steht doppelt (`.unterzeile.unterzeile`), um dieselbe
|
||
Staerke wie `.willkommen .unterzeile` zu uebertreffen -- sonst
|
||
entschiede die Ladereihenfolge, und gate.css laedt zuerst. */
|
||
.unterzeile.unterzeile:has(+ .unterzeile--zusatz) { margin-bottom: 8px; }
|
||
|
||
.unterzeile--zusatz {
|
||
margin: 0 0 26px;
|
||
padding-left: 11px;
|
||
border-left: 2px solid var(--rand);
|
||
max-width: 62ch;
|
||
font-size: .86rem;
|
||
line-height: 1.6;
|
||
color: var(--text-still);
|
||
}
|
||
.unterzeile--zusatz em { font-style: normal; color: var(--text-leise); font-weight: 600; }
|
||
|
||
/* ---------- Rollen --------------------------------------------------- */
|
||
|
||
.feldschild {
|
||
margin: 0 0 10px;
|
||
font-size: .78rem; font-weight: 600;
|
||
letter-spacing: .06em; text-transform: uppercase;
|
||
color: var(--text-still);
|
||
}
|
||
|
||
/* =====================================================================
|
||
DIE FUENF ROLLEN IN EINER KACHEL (screen20, 08.09.2026)
|
||
|
||
Filipe: "ich will dass die rollen auch alle in einer grossen kacheln
|
||
sind, die soll richtig krass sein, richtig speziell."
|
||
|
||
VORHER WAREN ES FUENF EINZELNE KAESTEN mit je eigenem Rand und
|
||
8 px Luft dazwischen -- und der Hintergrund des Motivs schien
|
||
ueberall durch. Das las sich als fuenf Dinge, die zufaellig
|
||
untereinander stehen. Es ist aber EINE Frage mit fuenf Antworten,
|
||
und genau so sieht es jetzt aus: ein Koerper, in den fuenf Felder
|
||
eingelassen sind.
|
||
|
||
DIE FUGE MACHT DIE KACHEL. Nicht der Rand aussen -- der ist Fassung
|
||
--, sondern die dunkle Linie ZWISCHEN den Feldern. Ein Spalt, durch
|
||
den der Untergrund scheint, trennt; eine dunkle Fuge verbindet, weil
|
||
sie zum selben Koerper gehoert. Deshalb `#05070c` und nicht
|
||
`transparent`. Dieselbe Entscheidung wie beim Kalender.
|
||
|
||
ABGESCHRAEGTE ECKEN wie ueberall im Haus. Auf dieser Seite gibt es
|
||
die Modulliste aus module.css nicht (die Anmeldeseite laedt
|
||
absichtlich nur gate.css -- sie ist die erste Seite, die jemand
|
||
sieht, und soll schnell da sein). Das Polygon steht deshalb hier,
|
||
einmal, in einer Variablen.
|
||
================================================================== */
|
||
.rollen {
|
||
--r-fase: 16px;
|
||
--r-rand: 2px;
|
||
--r-form: polygon(
|
||
var(--r-fase) 0, calc(100% - var(--r-fase)) 0,
|
||
100% var(--r-fase), 100% calc(100% - var(--r-fase)),
|
||
calc(100% - var(--r-fase)) 100%, var(--r-fase) 100%,
|
||
0 calc(100% - var(--r-fase)), 0 var(--r-fase));
|
||
|
||
position: relative;
|
||
margin-bottom: 22px;
|
||
padding: var(--r-rand);
|
||
clip-path: var(--r-form);
|
||
|
||
/* DIE FASSUNG: dieselben vier Farben wie am Rand der Zentrale --
|
||
links Rot, rechts Babyblau, Silber als Treffpunkt, Schwarz als
|
||
Fuge. Wer sich anmeldet, sieht damit schon hier die Handschrift
|
||
der Seite, die dahinter liegt. */
|
||
background: linear-gradient(96deg,
|
||
#20060b 0%, #c8323f 6%, #ff5f6d 14%, #ffd9dd 20%,
|
||
#b3242f 30%, #0a0c12 40%, #f4faff 50%, #0a0c12 60%,
|
||
#4f95bd 70%, #8fd8ff 78%, #dff2ff 84%, #3f7fa3 92%, #06080f 100%);
|
||
box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .9);
|
||
}
|
||
|
||
/* Das Innenglas. Eigene Ebene, damit die Fassung ringsum stehen
|
||
bleibt, mit dem feinen Messraster des Hauses darauf. */
|
||
.rollen::before {
|
||
content: ""; position: absolute; inset: var(--r-rand);
|
||
z-index: 0; pointer-events: none;
|
||
clip-path: var(--r-form);
|
||
background:
|
||
linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 34%),
|
||
repeating-linear-gradient(0deg, rgba(150, 186, 220, .05) 0 1px, transparent 1px 22px),
|
||
repeating-linear-gradient(90deg, rgba(150, 186, 220, .05) 0 1px, transparent 1px 22px),
|
||
radial-gradient(120% 80% at 12% 100%, rgba(255, 74, 92, .10), transparent 62%),
|
||
radial-gradient(110% 75% at 88% 0%, rgba(126, 200, 242, .09), transparent 60%),
|
||
linear-gradient(180deg, #0b111c, #070b13);
|
||
}
|
||
.rollen > * { position: relative; z-index: 1; }
|
||
|
||
/* Die Frage sitzt als Kopfzeile IN der Kachel, nicht darueber --
|
||
sonst waere die Kachel eine Liste ohne Titel und der Titel ein
|
||
Satz ohne Bezug. */
|
||
/* =====================================================================
|
||
DIE FRAGE UEBER DEN ROLLEN (09.09.2026, screen1 Punkt 4)
|
||
|
||
Filipe: "dieser text soll bitte bissl geiler sein."
|
||
|
||
"Womit meldest du dich an?" ist der einzige Satz auf dieser Seite,
|
||
der eine FRAGE stellt -- alles andere ist Marke, Titel oder
|
||
Antwort. Er stand als kleine graue Grossbuchstabenzeile da, wie ein
|
||
Feldname in einem Formular.
|
||
|
||
DREI SACHEN, DIESELBE SPRACHE WIE DIE TYPENSCHILDER IM WORKSPACE:
|
||
|
||
1. GEBUERSTETES METALL statt Grau -- oben hell, in der Mitte
|
||
dunkler, unten wieder hell. Ein Verlauf von hell nach dunkel
|
||
waere eine Faerbung; erst der WECHSEL liest sich als Material.
|
||
2. EIN ANSCHLAG LINKS aus drei Kerben, in den beiden Hausfarben
|
||
(rot oben, babyblau unten) -- dieselbe Richtung wie die
|
||
Fassung der Kachel und wie der Schriftzug im Kopf.
|
||
3. EINE AUSLAUFENDE LINIE nach rechts, die die Zeile gliedert,
|
||
ohne sie zu zerschneiden.
|
||
|
||
DER RUECKFALL IST VOLLWERTIG: `color` bleibt gesetzt, den Verlauf
|
||
schaltet erst ein `@supports` dazu. Faellt `background-clip: text`
|
||
aus, steht dort heller Text -- nicht unsichtbarer. Das ist die
|
||
erste Seite, die jemand sieht; sie darf an keiner Technik haengen.
|
||
===================================================================== */
|
||
.rollen .feldschild {
|
||
position: relative;
|
||
display: flex; align-items: center; gap: 11px;
|
||
margin: 0;
|
||
padding: 13px 34px 11px 15px;
|
||
border-bottom: 1px solid #05070c;
|
||
box-shadow: 0 1px 0 rgba(255, 255, 255, .045);
|
||
color: #e6eef8;
|
||
letter-spacing: .1em;
|
||
}
|
||
/* Der Anschlag: drei Kerben, oben rot, unten babyblau. */
|
||
.rollen .feldschild::before {
|
||
content: "";
|
||
width: 13px; height: 13px; flex: none;
|
||
background:
|
||
repeating-linear-gradient(180deg,
|
||
currentColor 0 2px, transparent 2px 5px);
|
||
color: transparent;
|
||
background-image: repeating-linear-gradient(180deg,
|
||
#ff5f6d 0 2px, transparent 2px 5px);
|
||
-webkit-mask: linear-gradient(180deg, #000 0 45%, rgba(0, 0, 0, .55) 100%);
|
||
mask: linear-gradient(180deg, #000 0 45%, rgba(0, 0, 0, .55) 100%);
|
||
}
|
||
/* Die untere Haelfte des Anschlags in Babyblau -- zwei Ebenen, damit
|
||
die Kerben oben rot und unten blau sind, ohne ein zweites Element. */
|
||
.rollen .feldschild::before {
|
||
background-image:
|
||
linear-gradient(180deg, transparent 0 46%, rgba(143, 216, 255, .95) 46%),
|
||
repeating-linear-gradient(180deg, #ff5f6d 0 2px, transparent 2px 5px);
|
||
background-blend-mode: multiply, normal;
|
||
}
|
||
.rollen .feldschild::after {
|
||
content: "";
|
||
position: absolute; right: 12px; top: 50%;
|
||
width: 16px; height: 1px;
|
||
transform: translateY(-.5px);
|
||
background: linear-gradient(90deg, rgba(143, 216, 255, .55), transparent);
|
||
}
|
||
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
|
||
.rollen .feldschild {
|
||
background: linear-gradient(178deg,
|
||
#ffffff 0%, #dfeaf6 32%, #93a8bf 60%, #d7e6f5 86%, #ffffff 100%) text;
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
color: transparent;
|
||
}
|
||
}
|
||
|
||
.rolle {
|
||
display: flex; align-items: center; gap: 13px;
|
||
width: 100%; margin: 0; padding: 12px 16px;
|
||
background: transparent;
|
||
border: 0;
|
||
/* Die Fuge nach unten, ausser beim letzten -- sonst laege eine
|
||
Linie auf der Fassung. */
|
||
border-bottom: 1px solid #05070c;
|
||
box-shadow: 0 1px 0 rgba(255, 255, 255, .035);
|
||
color: var(--text);
|
||
font: inherit; text-align: left; cursor: pointer;
|
||
transition: background var(--tempo), box-shadow var(--tempo), padding-left var(--tempo);
|
||
}
|
||
.rolle:last-child { border-bottom: 0; box-shadow: none; }
|
||
|
||
/* BEIM ZEIGEN RUECKT DAS FELD AUF, statt aufzuleuchten -- dieselbe
|
||
Sprache wie ueberall ("naeherkommen statt aufleuchten"). Der schmale
|
||
Streifen links traegt die Farbe DIESER Rolle. */
|
||
.rolle:hover {
|
||
background: linear-gradient(90deg,
|
||
color-mix(in srgb, var(--rf) 14%, transparent), transparent 46%);
|
||
padding-left: 20px;
|
||
}
|
||
.rolle:active { padding-left: 18px; }
|
||
|
||
/* AUSGEWAEHLT LEUCHTET IN DER FARBE DER ROLLE, nicht in Blau.
|
||
|
||
Hier stand fuer alle fuenf derselbe blau-violette Verlauf -- wer
|
||
"Scout" waehlte, bekam Blau, obwohl Scout gruen ist, und die
|
||
Rollenfarbe `--rf` direkt darueber wurde ignoriert. Die Farben sind
|
||
seit dem 08.09. zentral gesetzt und ueberall im Haus gueltig; genau
|
||
hier, bei der Wahl der Rolle, wurden sie nicht benutzt.
|
||
|
||
`color-mix` statt fuenf ausgeschriebener Verlaeufe: Die Farbe kommt
|
||
aus `--rf`, und `--rf` kommt aus den Hausfarben. Eine Aenderung
|
||
dort wirkt bis hierher. */
|
||
.rolle[aria-checked="true"] {
|
||
background: linear-gradient(96deg,
|
||
color-mix(in srgb, var(--rf) 26%, transparent),
|
||
color-mix(in srgb, var(--rf) 9%, transparent) 62%,
|
||
transparent);
|
||
padding-left: 20px;
|
||
box-shadow:
|
||
inset 3px 0 0 var(--rf),
|
||
0 1px 0 rgba(255, 255, 255, .035);
|
||
}
|
||
.rolle[aria-checked="true"]:last-child { box-shadow: inset 3px 0 0 var(--rf); }
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.rolle, .rolle:hover, .rolle:active { transition: none; padding-left: 16px; }
|
||
.rolle[aria-checked="true"] { padding-left: 16px; }
|
||
}
|
||
|
||
.rolle__zeichen {
|
||
flex: 0 0 auto; width: 21px; height: 21px;
|
||
fill: none; stroke: var(--text-still);
|
||
stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
|
||
transition: stroke var(--tempo);
|
||
}
|
||
.rolle__zeichen .strich { fill: none; }
|
||
|
||
/* =====================================================================
|
||
DIE ROLLENZEICHEN SIND KOERPER, KEINE UMRISSE (07.09.2026)
|
||
|
||
Filipe: "die symbole sollen doch alle viel krasser, geiler und
|
||
spezieller sein."
|
||
|
||
Sie waren feine Konturen in EINER Farbe -- und zwar in derselben fuer
|
||
alle fuenf. Jetzt tragen sie eine gefuellte Flaeche in der Farbe
|
||
IHRER Rolle, die Zeichnung hell darauf und einen leichten Schatten
|
||
darunter. Dieselbe Sprache wie die Rollenknoepfe auf der
|
||
Personenseite; wer die eine Seite kennt, erkennt die andere wieder.
|
||
|
||
`--rf` ist die Rollenfarbe. Sie steht hier und nicht im Zeichen,
|
||
damit die Farbe eines Tages nur an EINER Stelle geaendert werden
|
||
muss -- die Zeichen selbst wissen nichts von Rollen. */
|
||
.rolle { --rf: var(--text-still); }
|
||
/* Seit dem 08.09.2026 aus den zentralen Rollenfarben oben, nicht mehr
|
||
als eigene Hex-Werte. Zwei davon waren inhaltlich falsch geworden:
|
||
`admin` stand auf Gold (Filipe will Babyblau/Lila) und `creator` auf
|
||
demselben Blau wie der allgemeine Akzent -- die Rolle war dadurch
|
||
optisch nicht von "irgendein Bedienelement" zu unterscheiden. */
|
||
.rolle[data-rolle="spicy"] { --rf: var(--spicy-haupt); }
|
||
.rolle[data-rolle="admin"] { --rf: var(--dogi-haupt); }
|
||
.rolle[data-rolle="manager"] { --rf: var(--manager-haupt); }
|
||
.rolle[data-rolle="scout"] { --rf: var(--scout-haupt); }
|
||
.rolle[data-rolle="creator"] { --rf: var(--creator-haupt); }
|
||
|
||
.rolle__zeichen {
|
||
stroke: color-mix(in srgb, var(--rf) 88%, #ffffff);
|
||
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .65));
|
||
}
|
||
.rolle__zeichen .fuell {
|
||
stroke: none;
|
||
fill: color-mix(in srgb, var(--rf) 52%, transparent);
|
||
}
|
||
/* HIER STANDEN DREI REGELN FUER EIN ZEICHEN, DAS ES NICHT MEHR GIBT
|
||
(16.09.2026).
|
||
|
||
`.auge`, `.nase` und `.hell` gehoerten zu einem Rollenzeichen, das
|
||
aus SVG-Pfaden gezeichnet war. Heute ist es ein Bild plus drei
|
||
Kreise mit festen Farben (`#r-husky`) -- kein Element im Haus traegt
|
||
diese Klassen noch. Nachgemessen ueber alle HTML- und JS-Dateien:
|
||
als Klasse null Vorkommen.
|
||
|
||
`.fuell` BLEIBT: die wird an einer Stelle wirklich benutzt.
|
||
|
||
WARUM NUR EINE DAVON GEMELDET WURDE: Die Suche nach totem CSS
|
||
vergleicht den Klassennamen als Teilzeichenkette gegen den gesamten
|
||
Quelltext. „auge" steckt in „Auge", „hell" in „hell" und
|
||
„hellster" -- beide kamen im Fliesstext deutscher Kommentare
|
||
dutzendfach vor und galten damit als benutzt. Nur „nase" kam
|
||
nirgends vor. Die beiden anderen waren genauso tot, nur unsichtbar.
|
||
|
||
Das ist eine offene Schwaeche der Pruefung, kein Befund gegen das
|
||
Haus -- sie steht hier notiert, damit sie nicht wieder verlorengeht. */
|
||
/* Gewaehlt: mehr Licht auf demselben Gegenstand -- kein anderer
|
||
Gegenstand. */
|
||
.rolle[aria-checked="true"] .rolle__zeichen {
|
||
stroke: color-mix(in srgb, var(--rf) 40%, #ffffff);
|
||
}
|
||
.rolle[aria-checked="true"] .rolle__zeichen .fuell {
|
||
fill: color-mix(in srgb, var(--rf) 78%, transparent);
|
||
}
|
||
|
||
.rolle__text { display: flex; flex-direction: column; min-width: 0; }
|
||
.rolle__name { font-weight: 600; font-size: .95rem; }
|
||
.rolle__zusatz { font-size: .8rem; color: var(--text-still); }
|
||
|
||
/* ---------- Formular ------------------------------------------------- */
|
||
|
||
.fuer { color: var(--akzent); text-transform: none; letter-spacing: normal; }
|
||
|
||
.feld { position: relative; }
|
||
|
||
#code {
|
||
width: 100%; padding: 13px 46px 13px 15px;
|
||
background: rgba(255, 255, 255, .045);
|
||
border: 1px solid var(--rand);
|
||
border-radius: var(--radius-klein);
|
||
color: var(--text);
|
||
font: inherit; letter-spacing: .06em;
|
||
transition: border-color var(--tempo), background var(--tempo), box-shadow var(--tempo);
|
||
}
|
||
#code::placeholder { color: var(--text-still); letter-spacing: normal; }
|
||
#code:hover { border-color: var(--rand-hell); }
|
||
#code:focus {
|
||
outline: none;
|
||
border-color: rgba(63, 189, 245, .7);
|
||
background: rgba(255, 255, 255, .065);
|
||
box-shadow: 0 0 0 3px rgba(63, 189, 245, .16);
|
||
}
|
||
|
||
.feld__auge {
|
||
position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
|
||
width: 36px; height: 36px; padding: 8px;
|
||
background: none; border: 0; border-radius: 9px;
|
||
cursor: pointer; color: var(--text-still);
|
||
transition: color var(--tempo), background var(--tempo);
|
||
}
|
||
.feld__auge:hover { color: var(--text-leise); background: rgba(255, 255, 255, .06); }
|
||
.feld__auge svg { width: 100%; height: 100%; fill: none; stroke: currentColor;
|
||
stroke-width: 1.7; stroke-linecap: round; }
|
||
.feld__auge .durch { opacity: 0; transition: opacity var(--tempo); }
|
||
.feld__auge[aria-pressed="true"] .durch { opacity: 1; }
|
||
|
||
.hinweis, .fehler {
|
||
margin: 9px 2px 0; font-size: .84rem; min-height: 0;
|
||
}
|
||
.hinweis { color: var(--text-leise); }
|
||
.fehler { color: var(--warn); }
|
||
.fehler:empty { margin: 0; }
|
||
|
||
|
||
.knopf__laden {
|
||
position: absolute; right: 16px; top: 50%; margin-top: -8px;
|
||
width: 16px; height: 16px; border-radius: 50%;
|
||
border: 2px solid rgba(255, 255, 255, .35);
|
||
border-top-color: #fff;
|
||
opacity: 0;
|
||
animation: dreh .8s linear infinite;
|
||
}
|
||
.knopf[disabled] .knopf__laden { opacity: 1; }
|
||
@keyframes dreh { to { transform: rotate(360deg); } }
|
||
|
||
.fuss {
|
||
margin: 22px 0 0; padding-top: 16px;
|
||
border-top: 1px solid var(--rand);
|
||
font-size: .78rem; color: var(--text-still); text-align: center;
|
||
}
|
||
|
||
/* ---------- Übergang beim erfolgreichen Anmelden ---------------------
|
||
Die Tafel tritt zurück, das Motiv wird kurz frei - als würde sich das
|
||
Tor öffnen. Bewusst kurz und ohne Aufblitzen. */
|
||
|
||
body.oeffnet .tafel {
|
||
opacity: 0; transform: translateY(-8px) scale(.985);
|
||
transition: opacity .26s ease, transform .26s ease;
|
||
}
|
||
body.oeffnet .buehne__schleier { opacity: .35; transition: opacity .26s ease; }
|
||
body.oeffnet .buehne__bild { filter: saturate(1) brightness(1); transition: filter .26s ease; }
|
||
|
||
/* ---------- Tastatur-Bedienung --------------------------------------- */
|
||
|
||
:where(button, input):focus-visible {
|
||
outline: 2px solid var(--akzent);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
/* ---------- Schmale oder hohe Fenster --------------------------------
|
||
Sobald das Fenster nicht mehr deutlich breiter als hoch ist, würde die
|
||
Tafel den Figuren zu nahe kommen. Dann wechselt die Seite auf das
|
||
Hochformat-Motiv und die Tafel rückt nach unten - die beiden bleiben
|
||
oben im Bild sichtbar. */
|
||
|
||
/* Gemeinsam: Tafel wandert nach unten, Motiv bleibt darüber frei. */
|
||
@media (max-width: 899px), (max-aspect-ratio: 7/5) {
|
||
body.gate { align-items: flex-end; justify-content: center; }
|
||
.tafel {
|
||
margin: 0 0 max(18px, env(safe-area-inset-bottom));
|
||
width: min(520px, calc(100vw - 32px));
|
||
}
|
||
.tafel__kante { display: none; }
|
||
}
|
||
|
||
/* Schmale Geräte: Hochformat-Ausschnitt. Die Bildfläche endet oberhalb der
|
||
Tafel - dadurch liegt ihr Seitenverhältnis nah am Ausschnitt und der
|
||
Browser muss seitlich kaum etwas wegschneiden. Beide Figuren bleiben ganz
|
||
im Bild, der Verlauf blendet nach unten ins Dunkle. */
|
||
@media (max-width: 899px) {
|
||
.buehne { bottom: auto; height: 66svh; }
|
||
.buehne__bild { object-position: center top; }
|
||
.buehne__schleier {
|
||
background:
|
||
linear-gradient(180deg,
|
||
rgba(3, 5, 10, 0.30) 0%,
|
||
rgba(3, 5, 10, 0.10) 20%,
|
||
rgba(3, 5, 10, 0.22) 46%,
|
||
rgba(3, 5, 10, 0.55) 66%,
|
||
rgba(5, 7, 13, 0.88) 82%,
|
||
/* Muss vor der Unterkante voll deckend sein und exakt der Seitenfarbe
|
||
entsprechen - sonst zeichnet sich dort eine feine Kante ab. */
|
||
rgba(5, 7, 13, 1.00) 94%);
|
||
}
|
||
}
|
||
|
||
/* Breite, aber hohe Fenster (z. B. 1100x980): Querformat bleibt und füllt die
|
||
ganze Fläche - sonst entsteht unten eine tote dunkle Zone. Weil hier
|
||
seitlich beschnitten wird, rückt das Motiv nach rechts, damit Dogfather und
|
||
Hasi Dog vollständig im Bild bleiben. */
|
||
@media (min-width: 900px) and (max-aspect-ratio: 7/5) {
|
||
.buehne__bild { object-position: 82% center; }
|
||
.buehne__schleier {
|
||
background:
|
||
linear-gradient(180deg,
|
||
rgba(3, 5, 10, 0.12) 0%,
|
||
rgba(3, 5, 10, 0.20) 34%,
|
||
rgba(3, 5, 10, 0.48) 56%,
|
||
rgba(3, 5, 10, 0.82) 74%,
|
||
rgba(3, 5, 10, 0.95) 90%);
|
||
}
|
||
}
|
||
|
||
@media (max-width: 420px) {
|
||
.tafel { padding: 22px 18px 20px; border-radius: 16px; }
|
||
.rolle__zusatz { display: none; }
|
||
}
|
||
|
||
/* Niedrige Bildschirme (iPhone 13 hat nur 664 px nutzbare Höhe): Die Tafel
|
||
würde fast alles verdecken. Sie wird kompakter, und die Bildfläche wird
|
||
flacher - dadurch skaliert der Ausschnitt nach BREITE statt nach Höhe und
|
||
zeigt genau den oberen Teil mit den Gesichtern. */
|
||
@media (max-width: 899px) and (max-height: 760px) {
|
||
.buehne { height: 46svh; }
|
||
|
||
.tafel { padding: 16px 18px 14px; }
|
||
.titel { font-size: 1.42rem; margin-bottom: 4px; }
|
||
.unterzeile { margin-bottom: 16px; font-size: .88rem; }
|
||
/* .72rem = 11,52 px. Vorher .68rem = 10,88 px und damit unter der
|
||
Hausuntergrenze von 11,5 px -- gefunden von pruef-handy auf der
|
||
Zugangswand von Team Dogi ("DogFather", "Team Dogi"). Das ist die
|
||
erste Seite, die jemand aus dem Team ueberhaupt sieht, und sie wird mit
|
||
dem Daumen bedient. Dieselbe Hebung wie seinerzeit in heim.css. */
|
||
.marke { font-size: .72rem; margin-bottom: 3px; }
|
||
|
||
.feldschild { margin-bottom: 7px; font-size: .74rem; }
|
||
.rollen { margin-bottom: 14px; }
|
||
.rolle { padding: 8px 13px; margin-bottom: 6px; }
|
||
.rolle__name { font-size: .9rem; }
|
||
|
||
#code { padding: 11px 44px 11px 14px; }
|
||
.knopf { margin-top: 12px; padding: 11px 18px; }
|
||
.fuss { margin-top: 14px; padding-top: 10px; font-size: .73rem; }
|
||
}
|
||
|
||
/* ---------- Weniger Bewegung ----------------------------------------- */
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
*, *::before, *::after {
|
||
animation-duration: .001ms !important;
|
||
animation-iteration-count: 1 !important;
|
||
transition-duration: .001ms !important;
|
||
}
|
||
.buehne__bild { transform: none; transition: none; }
|
||
}
|
||
|
||
/* ===================================================================
|
||
Suche über alle Bereiche.
|
||
|
||
Liegt bewusst hier und nicht in einer Seiten-Datei: kopf.js baut die
|
||
Suche auf JEDER Workspace-Seite ein, also muss auch das Aussehen
|
||
überall geladen sein. gate.css ist die einzige Datei, die das
|
||
erfüllt. (Genau der Fehler, der bei .knopf-still schon einmal
|
||
passiert ist -- Baustein in einer Seiten-Datei, prompt fehlte er
|
||
woanders.)
|
||
=================================================================== */
|
||
|
||
.suche-knopf__lupe {
|
||
width: 15px; height: 15px; flex: none;
|
||
fill: none; stroke: currentColor; stroke-width: 1.8;
|
||
stroke-linecap: round;
|
||
}
|
||
@media (max-width: 620px) { .suche-knopf__text { display: none; } }
|
||
|
||
.suche-schleier {
|
||
position: fixed; inset: 0; z-index: 80;
|
||
/* flex-start, nicht das voreingestellte stretch -- sonst zieht sich
|
||
das Fenster auf volle Hoehe, auch bei zwei Treffern. */
|
||
display: flex; justify-content: center; align-items: flex-start;
|
||
padding: 9vh 18px 18px;
|
||
background: rgba(3, 5, 10, .74);
|
||
backdrop-filter: blur(5px);
|
||
}
|
||
body.suche-offen { overflow: hidden; }
|
||
|
||
.suche-fenster {
|
||
width: min(680px, 100%); max-height: 78vh;
|
||
display: flex; flex-direction: column;
|
||
background: #0b111b;
|
||
border: 1px solid rgba(63, 189, 245, .26);
|
||
border-radius: var(--radius);
|
||
box-shadow: 0 28px 70px -22px rgba(0, 0, 0, .85);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.suche-zeile {
|
||
display: flex; align-items: center; gap: 10px;
|
||
padding: 14px 16px;
|
||
border-bottom: 1px solid var(--rand);
|
||
}
|
||
.suche-feld {
|
||
flex: 1; min-width: 0; padding: 6px 2px;
|
||
background: transparent; border: 0;
|
||
color: var(--text); font: inherit; font-size: 1.02rem;
|
||
}
|
||
.suche-feld:focus { outline: none; }
|
||
.suche-feld::placeholder { color: var(--text-still); }
|
||
/* Das eingebaute Kreuz von type="search" steht sonst direkt neben dem
|
||
Esc-Knopf -- zwei Wege, dasselbe zu tun, dicht nebeneinander. */
|
||
.suche-feld::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
|
||
|
||
.suche-ergebnis { overflow-y: auto; padding: 6px 10px 12px; }
|
||
.suche-hinweis {
|
||
margin: 0; padding: 26px 8px; text-align: center;
|
||
color: var(--text-still); font-size: .88rem;
|
||
}
|
||
|
||
.suche-gruppe { margin-top: 10px; }
|
||
.suche-gruppe__titel {
|
||
margin: 0 0 5px; padding: 0 8px;
|
||
font-size: .71rem; font-weight: 700;
|
||
letter-spacing: .08em; text-transform: uppercase; color: var(--akzent);
|
||
}
|
||
|
||
.suche-treffer {
|
||
display: block; padding: 9px 11px; margin-bottom: 3px;
|
||
border-radius: var(--radius-klein);
|
||
color: var(--text); text-decoration: none;
|
||
border: 1px solid transparent;
|
||
}
|
||
.suche-treffer:hover, .suche-treffer:focus-visible {
|
||
background: rgba(255, 255, 255, .05);
|
||
border-color: var(--rand);
|
||
outline: none;
|
||
}
|
||
.suche-treffer__titel { display: block; font-size: .92rem; font-weight: 600; }
|
||
.suche-treffer__zusatz {
|
||
display: block; margin-top: 1px;
|
||
font-size: .74rem; color: var(--text-still);
|
||
}
|
||
.suche-treffer__text {
|
||
display: block; margin-top: 3px;
|
||
font-size: .81rem; color: var(--text-leise); line-height: 1.45;
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) { .suche-knopf { transition: none; } }
|
||
|
||
/* ===================================================================
|
||
KNOPF-SYSTEM „GESCHLIFFEN“ (von Filipe gewählt, 28.08.2026)
|
||
|
||
DAS IST DIE EINZIGE STELLE, AN DER KNÖPFE GESTALTET WERDEN.
|
||
Vorher standen sie in neun Dateien verstreut -- und prompt sahen
|
||
dieselben Knöpfe auf verschiedenen Seiten verschieden aus. Wer einen
|
||
neuen Knopf braucht, nimmt hier eine Farbklasse, schreibt kein CSS.
|
||
|
||
Der Aufbau: ein farbiger Verlaufsrand (padding-box/border-box) und
|
||
ein feiner heller Streifen obenauf -- wie eine angeschliffene Kante.
|
||
Die Farbe sitzt im Rand und in der Schrift, die Fläche bleibt dunkel.
|
||
Beim Zeigen hebt sich der Knopf einen Pixel an und bekommt einen
|
||
weichen farbigen Schein darunter.
|
||
|
||
JEDE AKTION HAT IHRE EIGENE FARBE. Alle Töne sind bewusst gedeckt,
|
||
nicht neon: augenschonend ist Vorgabe, nicht Geschmack. Der
|
||
schwächste Kontrast im ganzen System liegt bei 9,2:1 -- die
|
||
Barrierefreiheits-Schwelle wäre 4,5:1.
|
||
=================================================================== */
|
||
|
||
:root {
|
||
--k-gut: #5fc99a; /* passt, erledigt, freigegeben */
|
||
--k-mittel: #e8b877; /* ausbaufähig, wartet */
|
||
--k-warn: #f0868f; /* Handlungsbedarf, löschen */
|
||
--k-gold: #e8c07d; /* Onboarding -- legt eine Person an */
|
||
--k-neutral: #8e9cb0; /* abbrechen, schließen */
|
||
/* Neutral braucht einen echten Farbwert. Halbdurchsichtiges Weiß
|
||
ergab in der Messung 1,1:1 -- praktisch unlesbar. */
|
||
}
|
||
|
||
.knopf,
|
||
.knopf-still,
|
||
.schritt,
|
||
.abmelden,
|
||
.stufe-knopf,
|
||
.suche-knopf,
|
||
.suche-zu,
|
||
.todo__weg,
|
||
.karte__stift {
|
||
--f: var(--akzent);
|
||
position: relative;
|
||
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
|
||
padding: 10px 17px;
|
||
border: 1px solid transparent;
|
||
border-radius: 11px;
|
||
background:
|
||
linear-gradient(#121926, #0d1420) padding-box,
|
||
linear-gradient(150deg,
|
||
color-mix(in srgb, var(--f) 75%, transparent),
|
||
rgba(255, 255, 255, .07) 52%,
|
||
color-mix(in srgb, var(--f) 30%, transparent)) border-box;
|
||
color: color-mix(in srgb, var(--f) 55%, #ffffff);
|
||
font: inherit; font-size: .85rem; font-weight: 600;
|
||
cursor: pointer;
|
||
transition: transform .16s ease, box-shadow .2s ease, color .16s ease;
|
||
}
|
||
|
||
/* Der helle Streifen obenauf -- die „geschliffene“ Kante. */
|
||
.knopf::after,
|
||
.knopf-still::after,
|
||
.schritt::after,
|
||
.abmelden::after,
|
||
.stufe-knopf::after,
|
||
.suche-knopf::after,
|
||
.suche-zu::after,
|
||
.todo__weg::after,
|
||
.karte__stift::after {
|
||
content: ""; position: absolute; left: 11px; right: 11px; top: 1px; height: 1px;
|
||
border-radius: 1px; pointer-events: none;
|
||
background: linear-gradient(90deg, transparent,
|
||
color-mix(in srgb, var(--f) 55%, transparent), transparent);
|
||
opacity: .75;
|
||
}
|
||
|
||
.knopf:hover,
|
||
.knopf-still:hover,
|
||
.schritt:hover:not([disabled]),
|
||
.abmelden:hover,
|
||
.stufe-knopf:hover,
|
||
.suche-knopf:hover,
|
||
.suche-zu:hover,
|
||
.todo__weg:hover,
|
||
.karte__stift:hover {
|
||
transform: translateY(-1px);
|
||
color: #fff;
|
||
box-shadow: 0 5px 18px -8px color-mix(in srgb, var(--f) 85%, transparent),
|
||
inset 0 0 22px -14px var(--f);
|
||
}
|
||
.knopf:active, .knopf-still:active, .schritt:active,
|
||
.abmelden:active, .stufe-knopf:active { transform: translateY(0); }
|
||
|
||
.knopf:focus-visible,
|
||
.knopf-still:focus-visible,
|
||
.schritt:focus-visible,
|
||
.abmelden:focus-visible,
|
||
.stufe-knopf:focus-visible,
|
||
.suche-knopf:focus-visible,
|
||
.suche-zu:focus-visible,
|
||
.todo__weg:focus-visible,
|
||
.karte__stift:focus-visible {
|
||
outline: none;
|
||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--f) 32%, transparent);
|
||
}
|
||
|
||
/* DER GEDRUECKTE KNOPF BRAUCHT DEN FOKUSRING GENAUSO (Befund 04.09.2026,
|
||
Audit).
|
||
|
||
Gemessen an 961 bedienbaren Elementen: Genau einer aenderte beim
|
||
Fokussieren sein Aussehen nicht -- der AKTIVE Filter ("Alle" auf
|
||
dateien.html und bereich.html). Wer mit der Tastatur durch die Filter
|
||
geht, verliert dort seine Position; der eine Knopf, auf dem man
|
||
steht, ist der einzige unsichtbare.
|
||
|
||
Ursache ist ein Wettstreit der Regeln, kein fehlender Stil:
|
||
|
||
.schritt:focus-visible -> 0,2,0
|
||
.filter .schritt[aria-pressed="true"] -> 0,3,0 (gewinnt)
|
||
|
||
Die Aktiv-Regel in dateien.css/bereich.css setzt einen eigenen
|
||
box-shadow und ueberschreibt damit den Fokusring. Das ist derselbe
|
||
Konflikt, der beim Umbau auf "Geschliffen" schon einmal auffiel --
|
||
damals fuer den RAND ("Die Filter-Knoepfe hatten eine eigene
|
||
gedrueckt-Regel mit flaechiger Farbe, die den geschliffenen Rand
|
||
ueberschrieb"). Der Fokus blieb dabei uebersehen.
|
||
|
||
Die doppelte Klasse (.schritt.schritt) hebt die Spezifitaet auf
|
||
0,4,0 -- damit gewinnt diese Regel unabhaengig davon, in welcher
|
||
Reihenfolge die Dateien geladen werden. Kein !important: das waere
|
||
eine Tuer, die man spaeter nicht mehr zubekommt.
|
||
|
||
Der Aktiv-Glanz BLEIBT (zweiter Schatten), der Ring kommt darueber --
|
||
sonst saehe ein gedrueckter Knopf im Fokus aus wie ein ungedrueckter.
|
||
45 % statt 32 %, weil der Ring auf der gefuellten Flaeche sonst
|
||
untergeht. */
|
||
.schritt.schritt[aria-pressed="true"]:focus-visible,
|
||
.schritt.schritt[data-an]:focus-visible,
|
||
.stufe-knopf.stufe-knopf[data-aktiv="ja"]:focus-visible {
|
||
outline: none;
|
||
box-shadow:
|
||
0 0 0 3px color-mix(in srgb, var(--f) 45%, transparent),
|
||
0 4px 16px -9px var(--f);
|
||
}
|
||
|
||
/* ---------- Gewählt / aktiv ----------------------------------------
|
||
Die Fläche nimmt die Farbe auf, der Rand wird voll. Das ist auch der
|
||
Auftritt für den wichtigsten Knopf einer Seite. */
|
||
.knopf,
|
||
.stufe-knopf[data-aktiv="ja"],
|
||
[data-an] {
|
||
color: #fff;
|
||
background:
|
||
linear-gradient(color-mix(in srgb, var(--f) 20%, #121926),
|
||
color-mix(in srgb, var(--f) 12%, #0d1420)) padding-box,
|
||
linear-gradient(150deg, var(--f),
|
||
color-mix(in srgb, var(--f) 45%, transparent)) border-box;
|
||
box-shadow: 0 4px 16px -9px var(--f);
|
||
}
|
||
|
||
/* ---------- Farbe je Aktion --------------------------------------- */
|
||
.knopf--gut, .stufe-knopf[data-wert="ok"] { --f: var(--k-gut); }
|
||
.knopf--mittel, .stufe-knopf[data-wert="mittel"] { --f: var(--k-mittel); }
|
||
.knopf--warn, .stufe-knopf[data-wert="handlung"],
|
||
.knopf-still--warn, .todo__weg { --f: var(--k-warn); }
|
||
.knopf--gold { --f: var(--k-gold); }
|
||
.knopf--violett { --f: var(--violett); }
|
||
.knopf-still, .schritt, .abmelden, .suche-zu,
|
||
.karte__stift { --f: var(--k-neutral); }
|
||
|
||
/* Der Weiter-Knopf der Scout-Pipeline trägt die Farbe seiner Stufe --
|
||
bleibt aber bewusst ungefüllt. Er wiederholt sich auf jeder Karte;
|
||
als volle Fläche wäre die Seite ein Streifenmuster. */
|
||
.knopf--weiter {
|
||
--f: var(--stufe-farbe, var(--akzent));
|
||
color: color-mix(in srgb, var(--stufe-farbe) 55%, #ffffff);
|
||
background:
|
||
linear-gradient(#121926, #0d1420) padding-box,
|
||
linear-gradient(150deg,
|
||
color-mix(in srgb, var(--f) 75%, transparent),
|
||
rgba(255, 255, 255, .07) 52%,
|
||
color-mix(in srgb, var(--f) 30%, transparent)) border-box;
|
||
box-shadow: none;
|
||
}
|
||
|
||
/* ---------- Größen ------------------------------------------------- */
|
||
.knopf--klein { padding: 8px 15px; font-size: .82rem; }
|
||
.schritt { padding: 6px 12px; font-size: .76rem; border-radius: 9px; }
|
||
.abmelden { padding: 8px 15px; font-size: .82rem; }
|
||
.suche-zu { padding: 5px 10px; font-size: .74rem; letter-spacing: .04em; border-radius: 9px; }
|
||
.suche-knopf { padding: 8px 15px; font-size: .82rem; }
|
||
.stufe-knopf { padding: 7px 13px; font-size: .78rem; }
|
||
.todo__weg { width: 36px; padding: 0; font-size: 1.05rem; line-height: 1; }
|
||
.karte__stift { padding: 4px 10px; font-size: .74rem; border-radius: 8px; }
|
||
|
||
/* Der Anmeldeknopf ist der einzige, der die ganze Breite bekommt --
|
||
auf der Anmeldeseite gibt es nichts anderes zu tun. */
|
||
.gate .knopf { width: 100%; margin-top: 18px; padding: 13px 18px; font-size: .95rem; }
|
||
|
||
.schritt[disabled], .knopf[disabled] { opacity: .45; cursor: default; box-shadow: none; }
|
||
.knopf[disabled] { cursor: progress; }
|
||
.knopf[disabled]:hover { transform: none; }
|
||
|
||
.suche-knopf__lupe { width: 15px; height: 15px; flex: none; }
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.knopf, .knopf-still, .schritt, .abmelden,
|
||
.stufe-knopf, .suche-knopf, .suche-zu, .todo__weg,
|
||
.karte__stift { transition: none; }
|
||
.knopf:hover, .knopf-still:hover, .schritt:hover, .abmelden:hover,
|
||
.stufe-knopf:hover, .suche-knopf:hover, .suche-zu:hover,
|
||
.todo__weg:hover, .karte__stift:hover { transform: none; }
|
||
}
|
||
|
||
/* ===================================================================
|
||
KI-Vorschläge (28.08.2026).
|
||
|
||
Bewusst ANDERS als die normalen Knöpfe: Ein KI-Knopf tut nichts
|
||
Endgültiges, er schlägt vor. Deshalb gestrichelter Rand statt
|
||
geschliffener Kante -- man soll auf den ersten Blick sehen, dass hier
|
||
etwas Unverbindliches passiert.
|
||
|
||
Liegt in gate.css, weil drei Seiten ihn benutzen.
|
||
=================================================================== */
|
||
|
||
.ki-knopf {
|
||
display: inline-flex; align-items: center; gap: 8px;
|
||
padding: 8px 15px; cursor: pointer;
|
||
background: rgba(138, 118, 255, .07);
|
||
border: 1px dashed rgba(138, 118, 255, .45);
|
||
border-radius: 999px;
|
||
color: #b6a9ff; font: inherit; font-size: .82rem; font-weight: 600;
|
||
transition: color .16s ease, border-color .16s ease, background .16s ease;
|
||
}
|
||
.ki-knopf:hover:not([disabled]) {
|
||
color: #fff;
|
||
border-color: rgba(138, 118, 255, .8);
|
||
background: rgba(138, 118, 255, .16);
|
||
}
|
||
.ki-knopf:focus-visible {
|
||
outline: none; box-shadow: 0 0 0 3px rgba(138, 118, 255, .3);
|
||
}
|
||
.ki-knopf[disabled] { cursor: progress; }
|
||
.ki-knopf__funke {
|
||
width: 15px; height: 15px; flex: none;
|
||
fill: currentColor; stroke: none;
|
||
}
|
||
/* Denkt gerade: der Funke pulst langsam. Zwölf Sekunden ohne
|
||
Rückmeldung fühlen sich sonst an wie ein Fehler. */
|
||
.ki-knopf[data-denkt="ja"] { border-style: solid; }
|
||
.ki-knopf[data-denkt="ja"] .ki-knopf__funke { animation: ki-puls 1.6s ease-in-out infinite; }
|
||
@keyframes ki-puls { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
|
||
|
||
.ki-fehler, .ki-hinweis {
|
||
display: block; margin-top: 7px;
|
||
font-size: .8rem; color: var(--text-still);
|
||
}
|
||
.ki-fehler { color: var(--warn); }
|
||
|
||
.ki-reihe { margin-top: 22px; }
|
||
.ki-text {
|
||
margin: 10px 0 0; padding: 13px 15px;
|
||
background: rgba(138, 118, 255, .06);
|
||
border: 1px solid rgba(138, 118, 255, .28);
|
||
border-left-width: 3px;
|
||
border-radius: var(--radius-klein);
|
||
font-size: .9rem; color: var(--text-leise); line-height: 1.6;
|
||
max-width: 80ch;
|
||
}
|
||
|
||
.todo-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.ki-knopf { transition: none; }
|
||
.ki-knopf[data-denkt="ja"] .ki-knopf__funke { animation: none; opacity: .7; }
|
||
}
|
||
|
||
/* ===================================================================
|
||
Auswahlfelder (31.08.2026).
|
||
|
||
Das echte <select> bleibt im Dokument -- es haelt den Wert und macht
|
||
jedes vorhandene `feld.value` weiter richtig. Es wird nur unsichtbar
|
||
gemacht; sichtbar ist der Knopf darueber.
|
||
|
||
Bewusst NICHT display:none: Ein so verstecktes Feld faellt aus der
|
||
Formularpruefung des Browsers heraus, und `required` wuerde stumm
|
||
nicht mehr greifen.
|
||
=================================================================== */
|
||
|
||
.wahl2 { position: relative; display: block; }
|
||
|
||
.wahl2__echt {
|
||
position: absolute; inset: 0;
|
||
opacity: 0; pointer-events: none;
|
||
/* Nur ein Pixel gross, damit ein Fehlerhinweis des Browsers noch am
|
||
richtigen Ort erscheint. */
|
||
width: 1px; height: 1px;
|
||
}
|
||
|
||
.wahl2__knopf {
|
||
display: flex; align-items: center; justify-content: space-between; gap: 10px;
|
||
width: 100%; padding: 10px 12px; cursor: pointer;
|
||
background: linear-gradient(#141c28, #101722);
|
||
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
||
color: var(--text); font: inherit; text-align: left;
|
||
transition: border-color .16s ease, background .16s ease;
|
||
}
|
||
.wahl2__knopf:hover:not([disabled]) {
|
||
border-color: rgba(255, 255, 255, .24);
|
||
background: linear-gradient(#18212f, #141b27);
|
||
}
|
||
.wahl2__knopf:focus-visible,
|
||
.wahl2__knopf[aria-expanded="true"] {
|
||
outline: none;
|
||
border-color: rgba(63, 189, 245, .65);
|
||
box-shadow: 0 0 0 3px rgba(63, 189, 245, .16);
|
||
}
|
||
.wahl2__knopf[disabled] { opacity: .5; cursor: default; }
|
||
.wahl2__knopf[data-leer="ja"] .wahl2__text { color: var(--text-still); }
|
||
.wahl2__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.wahl2__pfeil {
|
||
width: 16px; height: 16px; flex: none;
|
||
fill: none; stroke: var(--text-still); stroke-width: 1.8;
|
||
stroke-linecap: round; stroke-linejoin: round;
|
||
transition: transform .18s ease;
|
||
}
|
||
.wahl2__knopf[aria-expanded="true"] .wahl2__pfeil { transform: rotate(180deg); }
|
||
|
||
/* Die Liste haengt am Fenster, nicht am Elternelement -- in einer Karte
|
||
mit overflow: hidden waere sie sonst abgeschnitten. */
|
||
.wahl2__liste {
|
||
position: fixed; z-index: 90;
|
||
min-width: 180px; max-width: min(420px, calc(100vw - 24px));
|
||
overflow-y: auto; padding: 5px;
|
||
/* Am Ende der Liste NICHT weiterrollen: Ohne das gibt der Browser das Scrollen an
|
||
die Seite weiter (Scroll-Verkettung), die Seite bewegt sich -- und genau daran
|
||
schliesst die Liste zu Recht. Damit waere der Fehler von oben zur Haelfte zurueck. */
|
||
overscroll-behavior: contain;
|
||
background: #0d1420;
|
||
border: 1px solid rgba(63, 189, 245, .3);
|
||
border-radius: 11px;
|
||
box-shadow: 0 18px 44px -16px rgba(0, 0, 0, .85);
|
||
}
|
||
.wahl2__gruppe {
|
||
margin: 7px 8px 3px; font-size: .68rem; font-weight: 700;
|
||
letter-spacing: .08em; text-transform: uppercase; color: var(--akzent);
|
||
}
|
||
.wahl2__gruppe:first-child { margin-top: 3px; }
|
||
|
||
.wahl2__eintrag {
|
||
display: block; width: 100%; padding: 8px 11px; cursor: pointer;
|
||
background: transparent; border: 0; border-radius: 7px;
|
||
color: var(--text-leise); font: inherit; font-size: .88rem; text-align: left;
|
||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||
}
|
||
.wahl2__eintrag:hover:not([disabled]) { background: rgba(255, 255, 255, .06); color: var(--text); }
|
||
.wahl2__eintrag:focus-visible {
|
||
outline: none; background: rgba(63, 189, 245, .16); color: #fff;
|
||
}
|
||
.wahl2__eintrag[data-an="ja"] {
|
||
color: #fff; font-weight: 600;
|
||
background: rgba(63, 189, 245, .12);
|
||
}
|
||
.wahl2__eintrag[disabled], .wahl2__eintrag[data-aus="ja"] {
|
||
color: var(--text-still); cursor: default;
|
||
}
|
||
|
||
/* ---------- Suchen und selbst eintragen (02.09.2026) --------------------
|
||
Das Suchfeld sitzt fest oben in der Liste, die Eintraege scrollen
|
||
darunter weg -- sonst waere es beim Scrollen weg, und man wuesste
|
||
nicht mehr, wonach gerade gefiltert wird. */
|
||
.wahl2__suche {
|
||
display: block; width: 100%;
|
||
margin: 0 0 5px; padding: 8px 11px;
|
||
box-sizing: border-box;
|
||
background: rgba(255, 255, 255, .04);
|
||
border: 1px solid var(--rand); border-radius: 8px;
|
||
color: var(--text); font: inherit; font-size: .88rem;
|
||
}
|
||
.wahl2__suche::placeholder { color: var(--text-still); }
|
||
.wahl2__suche:focus-visible {
|
||
outline: none;
|
||
border-color: rgba(63, 189, 245, .6);
|
||
box-shadow: 0 0 0 3px rgba(63, 189, 245, .14);
|
||
}
|
||
/* Nur die Eintraege scrollen, nicht das Suchfeld mit. */
|
||
.wahl2__zeilen { max-height: min(46vh, 320px); overflow-y: auto; }
|
||
|
||
/* Der getippte Name als eigener Eintrag. Gedeckt abgesetzt, nicht
|
||
grell -- er ist eine Moeglichkeit, keine Warnung. */
|
||
.wahl2__eintrag--eigen {
|
||
color: #e8c07a;
|
||
border: 1px dashed rgba(216, 161, 58, .45);
|
||
margin-bottom: 4px;
|
||
}
|
||
.wahl2__eintrag--eigen:hover:not([disabled]) {
|
||
background: rgba(216, 161, 58, .12); color: #f4dcb0;
|
||
}
|
||
.wahl2__leer {
|
||
margin: 0; padding: 9px 11px;
|
||
color: var(--text-still); font-size: .82rem;
|
||
}
|
||
|
||
/* Steht ein freier Name im Feld, sagt der Rand es leise mit. */
|
||
.wahl2__knopf[data-extern="ja"] {
|
||
border-color: color-mix(in srgb, #d8a13a 45%, var(--rand));
|
||
}
|
||
.wahl2__hinweis {
|
||
margin: 6px 0 0;
|
||
font-size: .78rem; line-height: 1.45;
|
||
color: var(--text-leise);
|
||
}
|
||
.wahl2__hinweis::before {
|
||
content: "↯"; margin-right: 6px; color: #d8a13a;
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.wahl2__knopf, .wahl2__pfeil { transition: none; }
|
||
}
|
||
@media (forced-colors: active) {
|
||
/* Ohne Farben traegt der gestrichelte Rand die Unterscheidung. */
|
||
.wahl2__eintrag--eigen { border: 1px dashed CanvasText; }
|
||
.wahl2__knopf[data-extern="ja"] { border: 2px solid CanvasText; }
|
||
}
|
||
|
||
/* ===================================================================
|
||
Schalter (31.08.2026).
|
||
|
||
Lag zuerst in wissen.css -- und fehlte prompt auf der Automationen-
|
||
Seite, wo er als nacktes Kaestchen erschien. Genau derselbe Fehler
|
||
wie damals bei .knopf-still: Ein gemeinsamer Baustein in einer
|
||
Seiten-Datei fehlt irgendwann dort, wo die Datei nicht geladen wird.
|
||
=================================================================== */
|
||
/* ---------- Schalter „besonders wichtig“ ---------------------------------
|
||
Ein Kästchen von 17 Pixeln ist auf dem Handy kaum zu treffen und sagt
|
||
nicht, was passiert. Der Schalter ist groß, zeigt seinen Zustand und
|
||
erklärt sich in einer Zeile. */
|
||
|
||
.schalter {
|
||
display: flex; align-items: flex-start; gap: 14px;
|
||
margin-top: 18px; padding: 14px 16px; cursor: pointer;
|
||
border: 1px solid var(--rand); border-radius: var(--radius);
|
||
background: var(--flaeche);
|
||
transition: border-color .18s ease, background .18s ease;
|
||
}
|
||
.schalter:hover { border-color: rgba(255, 255, 255, .2); }
|
||
.schalter input { position: absolute; opacity: 0; width: 0; height: 0; }
|
||
.schalter__gleis {
|
||
flex: none; position: relative; width: 42px; height: 24px; margin-top: 1px;
|
||
border-radius: 999px;
|
||
background: rgba(255, 255, 255, .1);
|
||
border: 1px solid var(--rand);
|
||
transition: background .2s ease, border-color .2s ease;
|
||
}
|
||
.schalter__punkt {
|
||
position: absolute; left: 3px; top: 3px; width: 16px; height: 16px;
|
||
border-radius: 50%; background: var(--text-still);
|
||
transition: transform .2s ease, background .2s ease;
|
||
}
|
||
.schalter input:checked + .schalter__gleis {
|
||
background: rgba(232, 192, 125, .3);
|
||
border-color: rgba(232, 192, 125, .6);
|
||
}
|
||
.schalter input:checked + .schalter__gleis .schalter__punkt {
|
||
transform: translateX(18px); background: #e8c07d;
|
||
}
|
||
.schalter input:focus-visible + .schalter__gleis {
|
||
box-shadow: 0 0 0 3px rgba(232, 192, 125, .28);
|
||
}
|
||
.schalter:has(input:checked) {
|
||
border-color: rgba(232, 192, 125, .35);
|
||
background: rgba(232, 192, 125, .05);
|
||
}
|
||
.schalter__text { display: grid; gap: 2px; font-size: .88rem; }
|
||
.schalter__text .leise { font-size: .79rem; }
|
||
|
||
/* =====================================================================
|
||
MATERIAL — die ganze Oberfläche auf einer Sprache (03.09.2026)
|
||
|
||
Die Kachelzeichen sind Körper geworden. Alles andere war noch flach,
|
||
und das fiel dadurch erst richtig auf: ein plastisches Zeichen neben
|
||
einem gemalten Knopf sieht nicht nach "teilweise gut" aus, sondern
|
||
nach Versehen.
|
||
|
||
Deshalb gelten ab hier für JEDES Bauteil dieselben drei Regeln --
|
||
dieselben, nach denen auch die Zeichen gebaut sind:
|
||
|
||
1. LICHT VON OBEN. Eine helle Kante an der Oberkante, in der Mitte
|
||
am stärksten, nach aussen auslaufend. Echtes Licht auf einer
|
||
Kante sieht so aus; eine durchgehend gleich helle Linie ist ein
|
||
Strich.
|
||
2. TIEFE NACH UNTEN. Ein Schatten, der nach unten versetzt liegt --
|
||
wie bei jedem Gegenstand, der auf etwas liegt. Ohne ihn klebt
|
||
ein Element auf der Seite, statt darauf zu liegen.
|
||
3. VERLAUF STATT FLÄCHE. Oben eine Spur heller als unten. Kaum zu
|
||
sehen, aber ohne ihn bleibt jede Fläche tot.
|
||
|
||
Und eine vierte, die nur für Bedienbares gilt:
|
||
4. WAS MAN DRÜCKT, GEHT HINEIN. Beim Klick kehrt sich die Wölbung
|
||
um: Licht nach unten, Schatten nach oben. Das ist der
|
||
Unterschied zwischen "es passiert etwas" und "ich habe etwas
|
||
gedrückt".
|
||
|
||
Alles bleibt gedeckt. Diese Bauteile stehen zu Dutzenden auf einer
|
||
Seite -- was einzeln beeindruckt, blendet im Dutzend.
|
||
===================================================================== */
|
||
|
||
/* ---------- 1. Knöpfe: Körper statt Fläche ---------------------------- */
|
||
.knopf, .knopf-still, .schritt, .abmelden,
|
||
.stufe-knopf, .suche-knopf, .suche-zu, .todo__weg, .karte__stift {
|
||
box-shadow:
|
||
inset 0 1px 0 rgba(255, 255, 255, .09),
|
||
inset 0 -2px 5px -3px rgba(0, 0, 0, .6),
|
||
0 3px 8px -5px rgba(0, 0, 0, .8);
|
||
}
|
||
.knopf:hover, .knopf-still:hover, .schritt:hover:not([disabled]),
|
||
.abmelden:hover, .stufe-knopf:hover, .suche-knopf:hover,
|
||
.suche-zu:hover, .todo__weg:hover, .karte__stift:hover {
|
||
box-shadow:
|
||
inset 0 1px 0 rgba(255, 255, 255, .14),
|
||
inset 0 -2px 5px -3px rgba(0, 0, 0, .6),
|
||
0 8px 20px -9px color-mix(in srgb, var(--f) 85%, transparent),
|
||
inset 0 0 22px -14px var(--f);
|
||
}
|
||
/* Gedrückt: die Wölbung kehrt sich um. */
|
||
.knopf:active, .knopf-still:active, .schritt:active:not([disabled]),
|
||
.abmelden:active, .stufe-knopf:active, .suche-knopf:active,
|
||
.suche-zu:active, .todo__weg:active, .karte__stift:active {
|
||
transform: translateY(1px);
|
||
box-shadow:
|
||
inset 0 2px 6px -2px rgba(0, 0, 0, .75),
|
||
inset 0 -1px 0 rgba(255, 255, 255, .07);
|
||
}
|
||
|
||
/* ---------- 2. Eingabefelder: vertieft statt aufgesetzt ---------------- */
|
||
.neu input, .neu select, .neu textarea,
|
||
.wahl2__knopf, .wahl2__suche, .betreuung__wahl, .code-feld {
|
||
box-shadow:
|
||
inset 0 2px 5px -3px rgba(0, 0, 0, .75),
|
||
inset 0 1px 0 rgba(255, 255, 255, .05);
|
||
}
|
||
/* Ein Feld, in das man schreibt, ist eine Mulde -- kein Knopf. Deshalb
|
||
liegt das Licht hier UNTEN und der Schatten oben: genau umgekehrt. */
|
||
.neu input:focus, .neu select:focus, .neu textarea:focus,
|
||
.wahl2__suche:focus, .betreuung__wahl:focus {
|
||
box-shadow:
|
||
inset 0 2px 5px -3px rgba(0, 0, 0, .75),
|
||
0 0 0 3px rgba(63, 189, 245, .16);
|
||
}
|
||
|
||
/* ---------- 3. Marken und Zähler: kleine Plaketten --------------------- */
|
||
.marke, .marke-still, .marke-rolle, .marke-art, .marke-fehlt,
|
||
.stufe__zahl, .gruppe__zahl, .k-chip, .kk__marken > * {
|
||
box-shadow:
|
||
inset 0 1px 0 rgba(255, 255, 255, .1),
|
||
0 2px 5px -4px rgba(0, 0, 0, .9);
|
||
}
|
||
|
||
/* ---------- 4. Hinweisflächen: Licht auf der Oberkante ----------------- */
|
||
.leer-hinweis, .hinweis, .kk__notiz, .call-raum, .code-kasten {
|
||
position: relative;
|
||
box-shadow:
|
||
inset 0 1px 0 rgba(255, 255, 255, .06),
|
||
0 8px 22px -16px rgba(0, 0, 0, .9);
|
||
}
|
||
.leer-hinweis::after, .call-raum::after, .code-kasten::after {
|
||
content: "";
|
||
position: absolute; top: 0; left: 18%; right: 18%; height: 1px;
|
||
background: linear-gradient(90deg, transparent,
|
||
color-mix(in srgb, var(--ton, var(--akzent)) 70%, #fff), transparent);
|
||
opacity: .5; pointer-events: none;
|
||
}
|
||
|
||
/* ---------- 5. Überschriften: Gewicht statt Größe ---------------------- */
|
||
/* Ein sehr weicher dunkler Schatten unter der Schrift. Er ändert die
|
||
Farbe nicht (die Kontrastprüfung misst weiter dasselbe), gibt der
|
||
Zeile aber eine Kante gegen den Hintergrund -- Text auf einem Foto
|
||
wirkt dadurch aufgelegt statt hineingemischt. */
|
||
.titel, .gruppe__name, .stufe__titel, .kk__name, h1, h2 {
|
||
text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
|
||
}
|
||
/* Die kleinen Schilder darüber: mehr Abstand zwischen den Buchstaben,
|
||
damit sie als Beschriftung gelesen werden und nicht als Wort. */
|
||
.feldschild, .kk__schild, .gruppe__unter {
|
||
text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.knopf:active, .knopf-still:active, .schritt:active,
|
||
.abmelden:active, .stufe-knopf:active { transform: none; }
|
||
}
|
||
@media (forced-colors: active) {
|
||
/* Im Kontrastmodus trägt allein die Kante. Schatten und Lichtsäume
|
||
würden dort zu grauen Flecken. */
|
||
.knopf, .knopf-still, .schritt, .abmelden, .stufe-knopf,
|
||
.marke, .marke-rolle, .leer-hinweis, .hinweis, .code-kasten,
|
||
.neu input, .neu select, .neu textarea, .wahl2__knopf { box-shadow: none; }
|
||
.leer-hinweis::after, .call-raum::after, .code-kasten::after { display: none; }
|
||
.titel, .gruppe__name, h1, h2, .feldschild { text-shadow: none; }
|
||
}
|
||
|
||
/* =====================================================================
|
||
DIE KARTE SITZT IN DER TAFEL (06.09.2026)
|
||
|
||
Wunsch Filipe: "integriere die zugangskachel links nach rechts und
|
||
passe sie perfekt an damit sie in dem neuen bild rechts perfekt und
|
||
die vorgemachte kachel passt."
|
||
|
||
Im neuen Motiv steht rechts eine leere Tafel mit Neonrahmen. Die
|
||
Anmeldekarte gehoert dort hinein -- und "hinein" heisst hier wirklich
|
||
hinein, nicht ungefaehr in die Gegend.
|
||
|
||
---------------------------------------------------------------------
|
||
DAS PROBLEM, DAS MAN LEICHT UEBERSIEHT
|
||
|
||
Das Bild liegt mit `object-fit: cover` unter der Seite. Je nach
|
||
Fensterform schneidet der Browser oben und unten etwas ab -- oder
|
||
links und rechts. Ein Wert wie `left: 58 %` bezieht sich aber auf das
|
||
FENSTER, nicht auf das Bild. Sobald jemand das Fenster schmaler
|
||
zieht, wandert die gemalte Tafel unter der Karte weg, und die Karte
|
||
steht daneben. Auf genau einer Bildschirmgroesse saehe es perfekt aus
|
||
und ueberall sonst falsch.
|
||
|
||
Deshalb rechnet `.tafel-anker` die Cover-Geometrie noch einmal nach:
|
||
|
||
Breite = max(100vw, 100svh * Bildseitenverhaeltnis)
|
||
Hoehe = max(100svh, 100vw / Bildseitenverhaeltnis)
|
||
|
||
Das ist exakt die Formel, nach der auch der Browser das Bild
|
||
aufzieht. Der Anker ist damit deckungsgleich mit dem Bild -- und
|
||
Prozentwerte darin sind Prozent DES BILDES.
|
||
|
||
---------------------------------------------------------------------
|
||
DIE VIER ZAHLEN SIND GEMESSEN, NICHT GESCHAETZT
|
||
|
||
tools/gate-bauen.mjs sucht den Rahmen im Quellbild: vom Mittelpunkt
|
||
der Tafel nach aussen, bis es hell oder farbig wird. Zwei fruehere
|
||
Anlaeufe standen daneben und haben sich selbst verraten -- der erste
|
||
fand den Mond und die Spiegelungen, der zweite die halbe Bildhoehe,
|
||
weil oberhalb der Tafel alles genauso schwarz ist. Die Begruendung
|
||
steht dort im Quelltext.
|
||
|
||
Wer das Bild austauscht, laesst das Werkzeug neu laufen und traegt
|
||
die vier Zeilen hier ein. Sie stehen bewusst als eigene Groessen und
|
||
nicht verstreut in den Regeln: So ist es EIN Handgriff.
|
||
===================================================================== */
|
||
body.gate {
|
||
--gate-b: 1647; /* Masse des Quellbildes */
|
||
--gate-h: 955;
|
||
/* Gemessen von tools/gate-bauen.mjs, danach EINMAL nachjustiert --
|
||
und der Grund gehoert dazu, sonst sieht es nach Willkuer aus:
|
||
|
||
Die Suche laeuft vom Tafelinneren nach aussen und haelt beim ersten
|
||
farbigen Punkt an. Der linke Rand des Rahmens glueht im Motiv aber
|
||
viel breiter als der rechte (rot gegen duennes Blau) -- sie haelt
|
||
links also frueher an. Im Bildschirmfoto bei 1280 px waren es links
|
||
44 px Luft und rechts 12: die Karte sass 16 px zu weit rechts, und
|
||
genau so sah sie auch aus.
|
||
|
||
Korrigiert um 1,1 % nach links und 0,7 % nach unten, danach im
|
||
Bildschirmfoto bei 1280, 1440 und 1920 nachgesehen. Die Rohwerte
|
||
der Messung stehen daneben, damit man den Unterschied sieht.
|
||
gemessen hier */
|
||
/* 07.09.2026 -- Wunsch Filipe: "so dass der komplette von der kachel
|
||
vom hintergrund bild komplett bedeckt ist."
|
||
|
||
Bis hierher sass die Karte MIT ABSTAND in der Tafel: Der gemalte
|
||
Rahmen blieb rundum sichtbar, und dazwischen schimmerte die leere
|
||
schwarze Flaeche durch. Das sah aus wie ein Bild in einem Rahmen --
|
||
zwei Dinge. Gewollt ist EINS: Die Karte IST die Tafel, ihr Rand
|
||
liegt genau auf der Innenkante des Neonrahmens.
|
||
|
||
Deshalb wird jetzt bis an die Kante gegangen, plus einen halben
|
||
Prozentpunkt darueber hinaus: Der Rahmen ist im Bild weich (er
|
||
glueht), und eine Karte, die genau an der Messkante endet, laesst
|
||
dort einen dunklen Saum stehen. Ein halber Prozentpunkt Ueberlappung
|
||
schiebt ihre Kante unter das Glühen -- man sieht nur noch Rahmen und
|
||
Karte, nichts dazwischen. */
|
||
/* 07.09.2026, ZWEITER ANLAUF -- diesmal GEMESSEN statt nachjustiert.
|
||
|
||
Der Anlauf davor hat die Werte "um 1,1 % nach links" von Hand
|
||
korrigiert, nach Augenschein im Bildschirmfoto. Das Ergebnis war
|
||
immer noch falsch, und Filipe hat es sofort gesehen: links stand
|
||
ein schwarzer Streifen der gemalten Tafel offen.
|
||
|
||
Der Grund war die Messung selbst. Sie laeuft vom Tafelinneren nach
|
||
aussen und haelt beim ersten FARBIGEN Punkt an -- der linke Rahmen
|
||
glueht im Motiv aber viel breiter als der rechte (breites Rot gegen
|
||
duennes Blau). Sie hielt links also frueher an, und ich habe den
|
||
Fehler mit einer geschaetzten Verschiebung zugedeckt, statt ihn zu
|
||
beheben. Eine Korrektur nach Gefuehl auf eine Messung, die man fuer
|
||
falsch haelt, ist keine Messung mehr.
|
||
|
||
Jetzt anders gemessen, und zwar auf das, was man wirklich sucht:
|
||
Die vier Neonlinien sind die einzigen Stellen im ganzen Bild, die
|
||
KRAEFTIG UND FARBIG zugleich sind (max > 150 und Spanne > 60). Je
|
||
Spalte und je Zeile gezaehlt, wie viele Punkte das erfuellen --
|
||
die Linien stehen als klare Spitzen heraus, nichts sonst kommt in
|
||
die Naehe:
|
||
|
||
senkrecht 55,37 % (rot) 94,17 % (blau)
|
||
waagerecht 13,19 % (rot) 76,96 % (blau)
|
||
|
||
Die Oberkante brauchte eine zweite Messung: Sie ist dunkelrot und
|
||
faellt unter die Neonschwelle. Ueber das Helligkeitsprofil in der
|
||
Tafelbreite ist sie trotzdem eindeutig -- 136 gegen 20 daneben.
|
||
|
||
Die Karte geht 0,4 Prozentpunkte UEBER jede Linie hinaus. Filipe
|
||
ausdruecklich: "wenn es leicht groesser ist ist egal aber die
|
||
kachel vom hintergrund bild muss bedeckt sein". Die Linien gluehen
|
||
weich; endete die Karte genau auf der Messkante, bliebe ein
|
||
dunkler Saum. So liegt ihr Rand UNTER dem Leuchten -- man sieht
|
||
Rahmen und Karte, nichts dazwischen.
|
||
|
||
Die Karte reicht BIS AN die Linien, nicht darueber hinaus. Der
|
||
Neonrahmen ist das Beste am Bild -- wuerde die Karte ihn ueberdecken,
|
||
waere die Tafel zwar bedeckt und die Seite auf einen Schlag
|
||
langweilig. Gedeckt werden muss das SCHWARZ dazwischen, und genau
|
||
das war offen: 55,37 gemessen, 57,00 eingetragen -- bei einem
|
||
1978 px breiten Rahmen sind das 32 px schwarze Flaeche, die links
|
||
stehen blieb. Rechts fehlten 0,6 %.
|
||
|
||
gemessen hier */
|
||
--tafel-links: 55.45%; /* 55,37 -- Kante liegt auf dem Licht */
|
||
--tafel-oben: 13.15%; /* 13,19 */
|
||
--tafel-breite: 38.65%; /* bis 94,10 %, Linie bei 94,17 */
|
||
--tafel-hoehe: 63.85%; /* bis 77,00 %, Linie bei 76,96 */
|
||
}
|
||
|
||
/* Vorgabe: Der Anker tut nichts. Er wird erst dort zur Schablone, wo
|
||
die Tafel im Bild auch wirklich zu sehen ist (siehe unten). So bleibt
|
||
das bisherige Verhalten auf schmalen Geraeten unangetastet. */
|
||
.tafel-anker { display: contents; }
|
||
|
||
/* ---------------------------------------------------------------------
|
||
NUR WO DIE TAFEL AUCH HINPASST.
|
||
|
||
Drei Bedingungen, jede mit Grund:
|
||
min-width 1100px darunter ist die Tafel im Ausschnitt zu schmal
|
||
min-height 620px darunter muesste die Karte unter 12 px schrumpfen
|
||
min-aspect 7/5 bei hohen Fenstern schneidet cover die Tafel an
|
||
|
||
Trifft eine nicht zu, gilt weiter die alte Anordnung (Karte unten
|
||
mittig, Hochformat-Motiv). Lieber eine ehrliche zweite Anordnung als
|
||
eine erzwungene erste, die niemand mehr lesen kann.
|
||
--------------------------------------------------------------------- */
|
||
@media (min-width: 1100px) and (min-height: 620px) and (min-aspect-ratio: 7/5) {
|
||
body.gate { align-items: flex-start; }
|
||
|
||
.tafel-anker {
|
||
display: block;
|
||
position: fixed;
|
||
left: 50%; top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: max(100vw, calc(100svh * var(--gate-b) / var(--gate-h)));
|
||
height: max(100svh, calc(100vw * var(--gate-h) / var(--gate-b)));
|
||
/* WORTGLEICH die Verwandlung des Bildes -- sonst liegt der Anker um
|
||
drei Prozent daneben, und genau das war beim ersten Versuch der
|
||
Fall: Der Rahmen war 1978 px breit, der Anker 1920. */
|
||
transform: translate(-50%, -50%) scale(1.03)
|
||
translate3d(var(--parallax-x, 0px), var(--parallax-y, 0px), 0);
|
||
z-index: 1;
|
||
/* Der Anker selbst ist nur eine Schablone -- Klicks gehen durch ihn
|
||
hindurch, sonst laege eine unsichtbare Flaeche ueber dem ganzen
|
||
Bild. */
|
||
pointer-events: none;
|
||
/* Damit die Karte ihre Schriftgroesse an der HOEHE der Tafel
|
||
ausrichten kann (cqh weiter unten). */
|
||
container-type: size;
|
||
}
|
||
|
||
.tafel {
|
||
position: absolute;
|
||
pointer-events: auto;
|
||
left: var(--tafel-links);
|
||
width: var(--tafel-breite);
|
||
/* DIE KARTE IST DIE TAFEL, nicht ein Kaestchen darin. Sie nimmt
|
||
deren Rechteck ein und zentriert ihren Inhalt darin.
|
||
|
||
Der erste Versuch setzte `top: Mitte` und `translateY(-50%)` --
|
||
und die Karte hing 300 px unter dem Bildschirmrand. Grund: Auf
|
||
`.tafel` liegt die Einblend-Animation `auftauchen`, deren
|
||
Endbild `transform: none` ist. Eine Animation mit `both` gewinnt
|
||
gegen die Regel; mein translateY war damit wirkungslos. Zwei
|
||
Wege, dasselbe Element zu verschieben, vertragen sich nicht --
|
||
also gar keine Verschiebung, sondern ein Kasten mit Hoehe. */
|
||
top: var(--tafel-oben);
|
||
height: var(--tafel-hoehe);
|
||
display: flex; flex-direction: column; justify-content: center;
|
||
margin: 0;
|
||
|
||
/* ALLES SKALIERT MIT DER TAFEL.
|
||
1 cqh ist ein Prozent der Ankerhoehe -- also des BILDES. Wird das
|
||
Fenster kleiner, wird die Tafel kleiner, und die Karte darin
|
||
genauso. Nach unten bei 12 px abgefangen: Darunter ist es keine
|
||
Anmeldemaske mehr, sondern ein Bild von einer. */
|
||
/* 1,50 statt 1,59: Bei 1280x800 ist die Tafel 512 px hoch, der
|
||
Karteninhalt bei 1,59 aber 536 -- gemessen, nicht geschaetzt.
|
||
24 px Ueberstand sieht man an einem Neonrahmen sofort. */
|
||
/* NACHGEMESSEN, WEIL EINE ROLLE DAZUKAM (07.09.2026).
|
||
|
||
Der Kommentar darueber warnt woertlich davor -- und ich habe
|
||
genau das gemacht, wovor er warnt: eine fuenfte Rolle eingefuegt
|
||
und die Zahl daneben nicht angefasst. Gemessen bei fuenf Rollen:
|
||
Der Inhalt war bei 1280x800 573 px hoch in einer 526 px hohen
|
||
Tafel, bei 1600x1000 712 in 658 -- die Fusszeile stand jedes Mal
|
||
unter dem Rahmen.
|
||
|
||
Die Schrift kleiner zu machen half nicht: Bei 1280 lag sie mit
|
||
12 px schon auf dem unteren Anschlag. Also sind die ABSTAENDE
|
||
enger geworden -- an neun Stellen ein bis zwei Zehntel, das
|
||
ergibt zusammen rund 4 em. Die Schrift bleibt lesbar, die Karte
|
||
passt wieder.
|
||
|
||
Wer eine SECHSTE Rolle einbaut, misst hier neu. Die Zahl gehoert
|
||
zu dem, was sie zaehlt. */
|
||
font-size: clamp(12px, 1.42cqh, 15.5px);
|
||
padding: 1.35em 1.5em 1.05em;
|
||
|
||
/* Die Tafel im Bild ist schon dunkel und hat ihren eigenen Rahmen.
|
||
Die Karte legt sich deshalb NUR noch als leichter Schleier
|
||
darueber, statt einen zweiten Kasten mit zweitem Rand zu bauen --
|
||
zwei Rahmen ineinander saehen nach Versehen aus. */
|
||
background: rgba(6, 9, 16, .58);
|
||
border-color: rgba(150, 186, 220, .10);
|
||
box-shadow: none;
|
||
backdrop-filter: blur(9px) saturate(112%);
|
||
-webkit-backdrop-filter: blur(9px) saturate(112%);
|
||
}
|
||
|
||
/* Die Lichtkante entfaellt -- der Neonrahmen des Bildes macht das
|
||
bereits, und zwar besser. */
|
||
.tafel__kante { display: none; }
|
||
|
||
/* ---- Alles Innere in em, damit es mitskaliert ----------------------
|
||
Die Karte traegt eine eigene Schriftgroesse; rem wuerde sich
|
||
weiterhin am Dokument orientieren und die Abstaende blieben stehen,
|
||
waehrend die Schrift schrumpft. Genau daran erkennt man eine
|
||
schlecht skalierte Oberflaeche. */
|
||
.tafel .marke { font-size: .78em; margin-bottom: .35em; }
|
||
.tafel .titel { font-size: 1.78em; margin-bottom: .22em; }
|
||
.tafel .unterzeile { font-size: .9em; margin-bottom: .85em; }
|
||
.tafel .feldschild { font-size: .76em; margin-bottom: .45em; }
|
||
.tafel .rollen { margin-bottom: .8em; }
|
||
.tafel .rolle { padding: .50em .8em; margin-bottom: .30em; gap: .75em; }
|
||
.tafel .rolle__zeichen { width: 1.32em; height: 1.32em; }
|
||
.tafel .rolle__name { font-size: .94em; }
|
||
.tafel .rolle__zusatz { font-size: .79em; }
|
||
.tafel #code { padding: .72em 2.7em .72em .9em; }
|
||
.tafel .feld__auge { width: 2.2em; height: 2.2em; padding: .5em; right: .35em; }
|
||
.tafel .knopf { margin-top: .6em; padding: .62em 1.1em; font-size: .88em; width: 100%; }
|
||
.tafel .hinweis,
|
||
.tafel .fehler { font-size: .82em; margin-top: .5em; }
|
||
.tafel .fuss { margin-top: .75em; padding-top: .6em; font-size: .76em; }
|
||
|
||
/* ---- Der Schleier ------------------------------------------------
|
||
Er verlief bisher von links dunkel nach rechts klar -- dort stand
|
||
die Karte. Jetzt ist es andersherum, und beide Seiten haben eine
|
||
Aufgabe: links das Logo (soll leuchten), rechts die Tafel (soll
|
||
ruhig sein). Also nur noch ein sanftes Abdunkeln ueber allem, etwas
|
||
mehr auf der rechten Haelfte, und ein Hauch Vignette. Kein harter
|
||
Verlauf mehr -- der haette quer durch das Motiv geschnitten. */
|
||
.buehne__schleier {
|
||
background:
|
||
linear-gradient(96deg,
|
||
rgba(3, 5, 10, 0.30) 0%,
|
||
rgba(3, 5, 10, 0.20) 30%,
|
||
rgba(3, 5, 10, 0.16) 48%,
|
||
rgba(3, 5, 10, 0.26) 66%,
|
||
rgba(3, 5, 10, 0.34) 100%),
|
||
radial-gradient(130% 100% at 50% 120%, rgba(0, 0, 0, .34), transparent 62%);
|
||
}
|
||
/* Das Motiv darf heller bleiben: Die Karte bringt jetzt ihren eigenen
|
||
Untergrund mit, und das Bild ist der Grund, warum die Seite gut
|
||
aussieht. */
|
||
.buehne__bild { filter: saturate(1) brightness(.97); }
|
||
}
|
||
|
||
/* Sehr breite Schirme: Die Tafel waechst mit dem Bild, die Schrift ist
|
||
aber bei 16 px gedeckelt. Damit die Karte darin nicht verloren wirkt,
|
||
bekommt sie dort etwas mehr Innenabstand. */
|
||
@media (min-width: 1700px) and (min-height: 900px) {
|
||
.tafel { padding: 2.2em 2em 1.8em; }
|
||
}
|
||
|
||
/* Dieselbe Koernung wie auf der Startseite -- sie steht dort in
|
||
start.css, und die Anmeldeseite laedt start.css nicht. Ein SVG-
|
||
Filter als Adresse: keine Datei, keine zusaetzliche Anfrage. */
|
||
:root {
|
||
--koernung:
|
||
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23r)' opacity='0.55'/%3E%3C/svg%3E");
|
||
}
|
||
|
||
/* =====================================================================
|
||
DIE KARTE ALS BILDSCHIRM IM RAHMEN (07.09.2026)
|
||
|
||
Wunsch Filipe: "veränder auch die kachel. mach sie viel geiler und
|
||
viel krasser. mit allen infos die da sind aber mach sie richtig hoch
|
||
profissionel, hochwertig und ultra geil aber so dass der komplette von
|
||
der kachel vom hintergrund bild komplett bedeckt ist."
|
||
|
||
---------------------------------------------------------------------
|
||
DIE IDEE
|
||
|
||
Im Motiv steht ein leerer Rahmen mit Neonkante -- rot oben links,
|
||
blau unten rechts. Bisher lag darin eine Karte mit eigenem Rand: zwei
|
||
Rahmen ineinander, und dazwischen schwarze Leere. Das liest sich als
|
||
"Bild an einer Wand".
|
||
|
||
Gewollt ist ein GERÄT: Der Rahmen im Bild ist das Gehäuse, die Karte
|
||
ist der eingeschaltete Bildschirm darin. Ein Bildschirm hat drei
|
||
Eigenschaften, die ein Kasten nicht hat, und alle drei sind hier
|
||
gebaut:
|
||
|
||
1. ER LEUCHTET VON INNEN. Nicht gleichmäßig -- oben mehr, weil dort
|
||
die Anzeige beginnt. Ein schwacher Schein in der Rahmenfarbe
|
||
kriecht von den Kanten herein, so wie Licht aus einem Panel in
|
||
sein Gehäuse fällt.
|
||
|
||
2. ER HAT EINE SCHEIBE. Über allem liegt eine sehr schwache,
|
||
diagonale Spiegelung -- die Glasscheibe davor. Sie ist der
|
||
Unterschied zwischen "Fläche mit Farbe" und "etwas hinter Glas".
|
||
|
||
3. ER HAT STRUKTUR. Dieselbe Körnung wie die Kacheln der Startseite
|
||
(siehe start.css). Ohne sie bleibt jeder Verlauf zu glatt für
|
||
eine echte Oberfläche.
|
||
|
||
Die Rollen-Knöpfe werden dabei zu TASTEN: Materialstärke oben hell,
|
||
unten dunkel, beim Drücken sinken sie ein. Die gewählte Taste ist
|
||
nicht nur eingefärbt, sondern beleuchtet -- sie hat einen Lichtrand
|
||
nach innen, als läge eine Diode darunter.
|
||
|
||
---------------------------------------------------------------------
|
||
WAS DABEI NICHT VERLOREN GEHT
|
||
|
||
Alle Angaben bleiben, wie sie waren: die vier Rollen mit ihren
|
||
Beschreibungen, das Codefeld mit dem Auge, der Hinweis, welche Rolle
|
||
gewählt ist, und die Fußzeile zur Verschlüsselung. "Hochwertiger"
|
||
heißt hier nicht "weniger drin" -- eine Anmeldemaske, die etwas
|
||
verschweigt, ist keine bessere, sondern eine unvollständige.
|
||
===================================================================== */
|
||
@media (min-width: 1100px) and (min-height: 620px) and (min-aspect-ratio: 7/5) {
|
||
|
||
.tafel {
|
||
/* KEIN EIGENER RAHMEN MEHR. Das Gehäuse ist im Bild; ein zweiter
|
||
Rand daneben wäre genau der Doppelrahmen, der weg soll. Was
|
||
bleibt, ist eine hauchfeine Innenkante -- die Fuge zwischen
|
||
Scheibe und Gehäuse. */
|
||
border: 0;
|
||
border-radius: 22px;
|
||
|
||
/* DER WEICHZEICHNER MUSSTE WEG (07.09.2026, abends).
|
||
|
||
Hier stand `backdrop-filter: blur(26px)`, und das war der Grund,
|
||
warum die Karte im Bildschirmfoto GRAU aussah statt tief.
|
||
|
||
Ein Weichzeichner mittelt nicht nur, was HINTER dem Element liegt
|
||
-- er zieht seinen Radius weit über dessen Kanten hinaus in die
|
||
Umgebung. Hinter der Tafel ist zwar Schwarz, direkt daneben aber
|
||
die hellste Stelle des ganzen Motivs: der rote und der blaue
|
||
Neonstrich. 26 px Radius holen genau die herein und rechnen sie
|
||
zu einem gleichmäßigen Grau. Je schöner der Rahmen, desto grauer
|
||
die Karte -- man baut sich das Problem mit dem Schmuckstück
|
||
selbst.
|
||
|
||
Jetzt ist die Karte eine eigene, fast deckende Scheibe (93 %) und
|
||
holt sich die Rahmenfarben ABSICHTLICH herein, an denselben
|
||
Ecken, an denen sie im Bild sitzen -- kräftiger als vorher, weil
|
||
sie jetzt gegen Schwarz und nicht gegen Grau arbeiten. */
|
||
background:
|
||
/* Der Schein von den Kanten herein, in den Farben des Rahmens:
|
||
rot oben links, blau unten rechts. Er ist das, was die Karte
|
||
mit dem Bild verbindet, statt sie davorzusetzen. */
|
||
radial-gradient(135% 100% at 0% 0%, rgba(232, 62, 62, .26), transparent 55%),
|
||
radial-gradient(135% 100% at 100% 100%, rgba(56, 158, 246, .30), transparent 58%),
|
||
/* Die Anzeige selbst: oben eine Spur heller, unten fast schwarz. */
|
||
linear-gradient(176deg,
|
||
rgba(16, 23, 36, .93) 0%,
|
||
rgba(9, 13, 21, .95) 46%,
|
||
rgba(5, 7, 13, .96) 100%);
|
||
backdrop-filter: none;
|
||
-webkit-backdrop-filter: none;
|
||
|
||
box-shadow:
|
||
/* Die Fuge: innen ein feiner heller Strich oben, dunkel unten. */
|
||
inset 0 1px 0 rgba(255, 255, 255, .11),
|
||
inset 0 -1px 0 rgba(0, 0, 0, .5),
|
||
/* Die beiden Rahmenfarben laufen als hauchdünner Saum INNEN an
|
||
den Kanten weiter -- der Übergang vom Gehäuse zur Scheibe. */
|
||
inset 2px 2px 0 -1px rgba(232, 62, 62, .34),
|
||
inset -2px -2px 0 -1px rgba(56, 158, 246, .38),
|
||
/* Und ein sehr weicher Schein nach innen, damit die Kante nicht
|
||
hart abbricht, sondern ins Gehäuse übergeht. */
|
||
inset 0 0 54px -20px rgba(0, 0, 0, .92);
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* DIE SCHEIBE. Ein einziger, sehr weicher Streifen von links oben --
|
||
kaum zu sehen, aber ohne ihn wirkt die Fläche wie Papier. */
|
||
.tafel::after {
|
||
content: ""; position: absolute; inset: 0; z-index: 0;
|
||
pointer-events: none; border-radius: inherit;
|
||
background:
|
||
linear-gradient(122deg,
|
||
rgba(255, 255, 255, .075) 0%,
|
||
rgba(255, 255, 255, .020) 14%,
|
||
rgba(255, 255, 255, 0) 32%);
|
||
opacity: .9;
|
||
}
|
||
|
||
/* DIE KÖRNUNG BRAUCHT EINE EIGENE EBENE (07.09.2026, abends).
|
||
|
||
Sie stand als zweite Schicht in der Spiegelung oben -- mit deren
|
||
Deckkraft von 90 % und ohne Mischmodus. Die Körnung ist aber ein
|
||
mittelgraues Rauschen: 90 % davon über der Karte heben JEDEN
|
||
Bildpunkt um rund 30 Stufen an. Gemessen im Bildschirmfoto:
|
||
rgb(46, 57, 64) statt der berechneten rgb(15, 22, 34). Die Karte
|
||
war deshalb grau, egal wie tief der Verlauf darunter eingestellt
|
||
war -- ich habe zweimal an der falschen Zahl gedreht.
|
||
|
||
Auf der Startseite steht dieselbe Körnung richtig: 3,5 % und
|
||
`mix-blend-mode: overlay`, also "hell machen, wo es hell ist,
|
||
dunkel, wo es dunkel ist". Genau das hier auch.
|
||
|
||
Als Träger dient `.tafel__kante` -- das Element gibt es im HTML
|
||
bereits, es war in dieser Ansicht nur abgeschaltet. Ein weiteres
|
||
Pseudo-Element gibt es nicht: `::before` und `::after` sind
|
||
vergeben. */
|
||
.tafel__kante {
|
||
display: block;
|
||
position: absolute; inset: 0; z-index: 0;
|
||
pointer-events: none; border-radius: inherit;
|
||
background-image: var(--koernung);
|
||
background-size: 140px 140px;
|
||
opacity: .04;
|
||
mix-blend-mode: overlay;
|
||
}
|
||
/* Der Inhalt liegt über der Scheibe -- Schrift durch eine Spiegelung
|
||
zu lesen wäre anstrengend. */
|
||
.tafel > * { position: relative; z-index: 1; }
|
||
|
||
/* ---- Die Rollen als Tasten in einer Leuchtschiene ------------------
|
||
DIESELBE SPRACHE WIE DIE KACHELN DER STARTSEITE (07.09.2026).
|
||
|
||
Auf der Startseite steckt jede Kachel in einer Schiene, die in der
|
||
Farbe ihrer Kategorie leuchtet. Hier passiert dasselbe mit den
|
||
Rollen -- und das ist mehr als eine Wiederholung: Wer sich als
|
||
Manager anmeldet, sieht dabei schon das Gold, in dem ihm gleich
|
||
seine Kacheln begegnen. Zwei Bildschirme, eine Sprache.
|
||
|
||
Vier Farben, aus dem Knopfsystem oben (--k-*), nicht neu erfunden:
|
||
DogFather Gold -- Krone
|
||
Manager Bernstein -- Stern
|
||
Scout Grün -- Schild
|
||
Creator Blau -- Person
|
||
Alle gedeckt, keine davon neon: augenschonend bleibt Vorgabe. */
|
||
/* Spicy Media traegt das Rot der Marke -- dieselbe Farbe wie ihr Name
|
||
im Kopf der Karte darueber. */
|
||
/* EINE ZWEITE VARIABLE, DIE ICH UEBERSEHEN HATTE (08.09.2026).
|
||
|
||
Beim Umstellen auf die zentralen Rollenfarben habe ich `--rf`
|
||
erwischt, aber nicht `--rton` -- und DIESE hier faerbt die
|
||
GEWAEHLTE Rolle in der Tafel. Ergebnis auf Filipes Bildschirmfoto:
|
||
DogFather und Manager leuchteten goldbraun, weil `--k-gold` und
|
||
`--k-mittel` stehen geblieben waren. Zwei Variablen fuer dieselbe
|
||
Sache, und nur eine umgestellt -- dieselbe Sorte Fehler wie die
|
||
doppelte Groessenangabe beim Wasserzeichen.
|
||
|
||
Jetzt kommen beide aus derselben Quelle. Wer eine Rollenfarbe
|
||
aendert, aendert damit auch die Tafel. */
|
||
.tafel .rolle[data-rolle="spicy"] { --rton: var(--spicy-haupt); }
|
||
.tafel .rolle[data-rolle="admin"] { --rton: var(--dogi-haupt); }
|
||
.tafel .rolle[data-rolle="manager"] { --rton: var(--manager-haupt); }
|
||
.tafel .rolle[data-rolle="scout"] { --rton: var(--scout-haupt); }
|
||
.tafel .rolle[data-rolle="creator"] { --rton: var(--creator-haupt); }
|
||
|
||
/* SEIT screen20 SIND ES FELDER IN EINEM KOERPER, KEINE FUENF KARTEN.
|
||
|
||
Filipe: "ich will dass die rollen auch alle in einer grossen
|
||
kacheln sind." Vorher hatte jede Rolle einen eigenen Rand, eigene
|
||
runde Ecken und 8 px Luft zur naechsten -- das las sich als fuenf
|
||
Dinge, die zufaellig untereinander stehen. Es ist aber EINE Frage
|
||
mit fuenf Antworten.
|
||
|
||
WAS BLEIBT, IST DIE SCHIENE. Sie war und ist das Beste an diesem
|
||
Entwurf: Wer sich als Manager anmeldet, sieht schon hier das Lila,
|
||
in dem ihm gleich seine Kacheln begegnen. Sie sitzt jetzt buendig
|
||
an der Innenkante der Kachel statt am Rand einer eigenen Karte --
|
||
dieselbe Wirkung, ein Koerper weniger.
|
||
|
||
WAS GEHT, SIND RAND UND RUNDUNG. An ihre Stelle tritt die dunkle
|
||
Fuge nach unten. Ein Spalt, durch den der Untergrund scheint,
|
||
trennt; eine dunkle Fuge verbindet, weil sie zum selben Koerper
|
||
gehoert. */
|
||
.tafel .rolle {
|
||
position: relative;
|
||
overflow: hidden;
|
||
border-radius: 0;
|
||
background:
|
||
linear-gradient(90deg,
|
||
color-mix(in srgb, var(--rton, var(--akzent)) 20%, transparent) 0%,
|
||
color-mix(in srgb, var(--rton, var(--akzent)) 6%, transparent) 22%,
|
||
transparent 58%),
|
||
linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .012));
|
||
border: 0;
|
||
border-bottom: 1px solid #05070c;
|
||
box-shadow:
|
||
inset 0 1px 0 rgba(255, 255, 255, .07),
|
||
0 1px 0 rgba(255, 255, 255, .035);
|
||
transition: background var(--tempo), box-shadow var(--tempo);
|
||
}
|
||
.tafel .rolle:last-child { border-bottom: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); }
|
||
/* Die Schiene selbst. */
|
||
.tafel .rolle::before {
|
||
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
|
||
background: linear-gradient(180deg,
|
||
color-mix(in srgb, var(--rton, var(--akzent)) 55%, #fff) 0%,
|
||
var(--rton, var(--akzent)) 34%,
|
||
color-mix(in srgb, var(--rton, var(--akzent)) 55%, transparent) 100%);
|
||
box-shadow: 2px 0 14px -3px color-mix(in srgb, var(--rton, var(--akzent)) 55%, transparent);
|
||
opacity: .72;
|
||
transition: opacity var(--tempo), box-shadow var(--tempo);
|
||
}
|
||
.tafel .rolle:hover {
|
||
background:
|
||
linear-gradient(90deg,
|
||
color-mix(in srgb, var(--rton, var(--akzent)) 26%, transparent) 0%,
|
||
color-mix(in srgb, var(--rton, var(--akzent)) 8%, transparent) 24%,
|
||
transparent 60%),
|
||
linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .022));
|
||
}
|
||
.tafel .rolle:hover::before { opacity: 1; }
|
||
/* Beim Drücken sinkt die Taste ein: Der Schatten unter ihr
|
||
verschwindet, der innere kommt von oben. Genau das macht ein
|
||
echter Knopf. */
|
||
/* GEDRUECKT SINKT DAS FELD EIN -- ohne sich zu VERSCHIEBEN.
|
||
|
||
Hier stand `transform: translateY(1px)`. Bei fuenf einzelnen Karten
|
||
war das richtig: eine Taste, die nachgibt. In einem geschlossenen
|
||
Koerper ist es falsch -- ein Feld, das sich um einen Pixel aus der
|
||
Kachel herausschiebt, reisst die Fuge auf und sieht nach einem
|
||
Fehler aus. Der eingelassene Schatten allein sagt dasselbe. */
|
||
.tafel .rolle:active {
|
||
box-shadow: inset 0 2px 5px rgba(0, 0, 0, .55);
|
||
}
|
||
/* DIE GEWÄHLTE TASTE IST BELEUCHTET, nicht nur eingefärbt. Der
|
||
Lichtrand nach innen liest sich wie eine Diode darunter -- und er
|
||
sagt deutlicher als jede Farbe, welche gerade aktiv ist. */
|
||
.tafel .rolle[aria-checked="true"] {
|
||
background:
|
||
linear-gradient(90deg,
|
||
color-mix(in srgb, var(--rton, var(--akzent)) 42%, transparent) 0%,
|
||
color-mix(in srgb, var(--rton, var(--akzent)) 16%, transparent) 34%,
|
||
color-mix(in srgb, var(--rton, var(--akzent)) 5%, transparent) 72%),
|
||
linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .02));
|
||
box-shadow:
|
||
inset 0 1px 0 rgba(255, 255, 255, .18),
|
||
inset 0 0 24px -9px color-mix(in srgb, var(--rton, var(--akzent)) 92%, transparent),
|
||
0 0 24px -11px color-mix(in srgb, var(--rton, var(--akzent)) 78%, transparent);
|
||
}
|
||
/* Die Schiene der gewählten Rolle brennt voll -- das ist die
|
||
deutlichste Anzeige, die es gibt, und sie kommt ohne ein weiteres
|
||
Zeichen aus. */
|
||
.tafel .rolle[aria-checked="true"]::before {
|
||
opacity: 1;
|
||
width: 4px;
|
||
box-shadow: 4px 0 26px -3px color-mix(in srgb, var(--rton, var(--akzent)) 78%, transparent);
|
||
}
|
||
|
||
/* ---- Das Codefeld: eine eingelassene Rinne ------------------------- */
|
||
.tafel #code {
|
||
background: rgba(0, 0, 0, .34);
|
||
border-color: rgba(150, 186, 220, .14);
|
||
border-radius: 12px;
|
||
/* Eingelassen statt aufgesetzt: Schatten von oben INNEN. Das ist
|
||
dasselbe Licht wie überall, nur eine Vertiefung statt einer
|
||
Erhebung -- und deshalb erkennt man sofort, dass man hier
|
||
hineinschreibt. */
|
||
box-shadow:
|
||
inset 0 2px 5px -2px rgba(0, 0, 0, .7),
|
||
inset 0 -1px 0 rgba(255, 255, 255, .05);
|
||
}
|
||
.tafel #code:focus {
|
||
background: rgba(0, 0, 0, .28);
|
||
box-shadow:
|
||
inset 0 2px 5px -2px rgba(0, 0, 0, .7),
|
||
0 0 0 3px color-mix(in srgb, var(--akzent) 22%, transparent);
|
||
}
|
||
|
||
/* ---- Der Anmelde-Knopf: die Haupttaste ----------------------------- */
|
||
.tafel .knopf {
|
||
border-radius: 12px;
|
||
box-shadow:
|
||
inset 0 1px 0 rgba(255, 255, 255, .14),
|
||
inset 0 -1px 0 rgba(0, 0, 0, .35),
|
||
0 6px 18px -10px color-mix(in srgb, var(--akzent) 85%, transparent);
|
||
}
|
||
.tafel .knopf:active { transform: translateY(1px); }
|
||
|
||
/* ---- Der Kopf bekommt Luft nach unten ------------------------------ */
|
||
/* Eine feine Trennlinie unter dem Titel: Sie gliedert die Karte in
|
||
"wer sind wir" und "was tust du hier", ohne ein Wort dafür zu
|
||
brauchen. */
|
||
.tafel .unterzeile {
|
||
padding-bottom: 1em;
|
||
border-bottom: 1px solid rgba(150, 186, 220, .10);
|
||
margin-bottom: 1.1em;
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.tafel .rolle:active, .tafel .knopf:active { transform: none; }
|
||
}
|
||
}
|
||
|
||
/* Auf schmalen Geräten liegt die Karte VOR dem Bild statt darin -- dort
|
||
bleibt der eigene Rahmen richtig, denn es gibt kein Gehäuse, in das
|
||
sie sich einfügen könnte. Nur Körnung und Tastenwirkung übernimmt sie:
|
||
Die gehören zum Material, nicht zur Anordnung. */
|
||
@media (max-width: 1099px), (max-height: 619px), (max-aspect-ratio: 7/5) {
|
||
.tafel .rolle:active { transform: translateY(1px); }
|
||
.tafel .rolle[aria-checked="true"] {
|
||
box-shadow:
|
||
inset 0 1px 0 rgba(255, 255, 255, .14),
|
||
inset 0 0 18px -8px color-mix(in srgb, var(--akzent) 85%, transparent);
|
||
}
|
||
}
|
||
|
||
/* =====================================================================
|
||
DER TEILEN-KNOPF (07.09.2026)
|
||
|
||
Er sitzt links in der rechten Knopfgruppe und sieht aus wie ihre
|
||
Nachbarn -- dieselbe Höhe, derselbe geschliffene Rand, dieselbe
|
||
Schrift. Ein Knopf, der aus der Reihe tanzt, sagt "nachträglich
|
||
eingebaut", und genau das soll er nicht sagen.
|
||
|
||
Der einzige Unterschied ist die Farbe: --f wird auf Violett gesetzt.
|
||
Alle anderen Knöpfe der Leiste tragen den Hausakzent; ein zweiter
|
||
Ton macht diesen einen auffindbar, ohne ihn lauter zu machen.
|
||
|
||
BEIM GELINGEN WECHSELT DER TEXT, NICHT DIE FARBE ALLEIN. "Kopiert"
|
||
steht als Wort da -- eine Rückmeldung, die nur aus einem Farbwechsel
|
||
besteht, kommt bei niemandem an, der Farben schlecht unterscheidet.
|
||
===================================================================== */
|
||
.teilen {
|
||
--f: var(--violett);
|
||
position: relative;
|
||
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
|
||
min-height: 38px; padding: 8px 14px;
|
||
border: 1px solid transparent;
|
||
border-radius: 11px;
|
||
background:
|
||
linear-gradient(#121926, #0d1420) padding-box,
|
||
linear-gradient(150deg,
|
||
color-mix(in srgb, var(--f) 70%, transparent),
|
||
rgba(255, 255, 255, .07) 52%,
|
||
color-mix(in srgb, var(--f) 28%, transparent)) border-box;
|
||
color: color-mix(in srgb, var(--f) 45%, #ffffff);
|
||
font: inherit; font-size: .85rem; font-weight: 600;
|
||
cursor: pointer;
|
||
transition: transform .16s ease, box-shadow .2s ease, color .16s ease;
|
||
}
|
||
.teilen:hover {
|
||
color: #fff;
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 8px 20px -12px color-mix(in srgb, var(--f) 85%, transparent);
|
||
}
|
||
.teilen:active { transform: translateY(0); }
|
||
.teilen:focus-visible { outline: 2px solid var(--f); outline-offset: 2px; }
|
||
/* Geschafft: der Rand wird grün, das Wort sagt es zusätzlich. */
|
||
.teilen[data-fertig="ja"] {
|
||
--f: var(--k-gut);
|
||
color: color-mix(in srgb, var(--k-gut) 40%, #ffffff);
|
||
}
|
||
.teilen__zeichen {
|
||
width: 16px; height: 16px; flex: none;
|
||
fill: none; stroke: currentColor;
|
||
stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
|
||
}
|
||
|
||
@media (max-width: 720px) {
|
||
/* Auf schmalen Geräten nur das Zeichen. Die Kopfleiste ist am
|
||
06.09.2026 schon einmal an einem Element zu viel zerbrochen --
|
||
dieser Knopf kommt deshalb von vornherein mit 38 px aus, statt
|
||
eine feste Umbruchschwelle noch einmal zu verschieben. */
|
||
.teilen { padding: 8px 10px; }
|
||
.teilen__text {
|
||
position: absolute;
|
||
width: 1px; height: 1px; margin: -1px; padding: 0;
|
||
overflow: hidden; clip-path: inset(50%); white-space: nowrap;
|
||
}
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.teilen, .teilen:hover, .teilen:active { transform: none; }
|
||
}
|
||
@media (forced-colors: active) {
|
||
.teilen { border: 1px solid ButtonText; background: ButtonFace; color: ButtonText; }
|
||
}
|
||
|
||
/* =====================================================================
|
||
„SpicyMedia × DogFather" im Kopf der Anmeldekarte (07.09.2026)
|
||
|
||
Zwei Marken und ein Zeichen dazwischen. Drei gleich laute Wörter
|
||
nebeneinander liest niemand als Paar -- das Kreuz muss kleiner und
|
||
leiser sein als die Namen, sonst wird aus einer Kooperation eine
|
||
Aufzählung.
|
||
|
||
Das Zeichen ist ein echtes Multiplikationszeichen (×, U+00D7), kein
|
||
kleines x: Das x einer Schrift steht auf der Grundlinie und sitzt
|
||
dadurch optisch zu tief zwischen zwei Versalien.
|
||
|
||
Die Farben nehmen die beiden Seiten des Neonrahmens auf, in dem die
|
||
Karte steckt: Spicy Media rot, DogFather blau. Beide gedeckt und
|
||
gegen den dunklen Grund gemessen -- augenschonend bleibt Vorgabe.
|
||
===================================================================== */
|
||
.marke--paar {
|
||
display: flex; align-items: baseline; gap: .42em;
|
||
flex-wrap: wrap;
|
||
}
|
||
/* KRAEFTIGER (07.09.2026, Wunsch Filipe: "spicy x dogfather sieht man
|
||
nicht richtig"). Die beiden Namen standen in gedeckten Toenen auf der
|
||
hellsten Stelle der Karte -- dort, wo der rote Schein von oben links
|
||
hereinkommt. Gedeckt ist auf dunklem Grund richtig und auf hellem zu
|
||
wenig. Jetzt heller, etwas groesser und mit einem eigenen Schatten,
|
||
der sie vom Untergrund abhebt statt sie zu ueberstrahlen. */
|
||
.marke--paar { letter-spacing: .13em; }
|
||
.marke--paar .marke__spicy {
|
||
color: #ffb3b9;
|
||
text-shadow: 0 1px 10px rgba(255, 95, 109, .45);
|
||
}
|
||
.marke--paar .marke__dogi {
|
||
color: #a9dcff;
|
||
text-shadow: 0 1px 10px rgba(99, 184, 238, .45);
|
||
}
|
||
/* TEAM DOGI (10.09.2026, nur auf crew.dogfather-universe.com).
|
||
|
||
Bewusst NICHT .marke__spicy mitbenutzt, obwohl es dieselbe Stelle im
|
||
Satz ist: Die Klasse ist rosarot, weil dort "SpicyMedia" steht. Auf
|
||
dieser Seite waere das der einzige warme Fleck auf einer durchweg
|
||
blauen Seite -- und er saesse ausgerechnet auf dem Namen, der dort
|
||
NICHT hingehoert.
|
||
|
||
Silbrig wie der Schriftzug im Hintergrundbild, damit beide dasselbe
|
||
sagen. */
|
||
.marke--paar .marke__crew {
|
||
color: #dce9f3;
|
||
text-shadow: 0 1px 10px rgba(150, 190, 220, .45);
|
||
}
|
||
.marke--paar .marke__x {
|
||
/* Kleiner, leiser, und mit etwas Luft -- es verbindet, es benennt
|
||
nicht. */
|
||
font-size: .82em;
|
||
font-weight: 500;
|
||
color: var(--text-still);
|
||
transform: translateY(-.02em);
|
||
}
|
||
|
||
/* =====================================================================
|
||
DAS GESICHT IN DER PERSONENAUSWAHL (07.09.2026)
|
||
|
||
Wunsch Filipe: "jeder soll auch immer das profilbild von denen sehen
|
||
mit denen sie verbunden sind."
|
||
|
||
Ein rundes Bild in einer Auswahlliste ist der billigste und stärkste
|
||
Zugewinn, den eine solche Liste haben kann: Man trifft den richtigen
|
||
Namen, ohne ihn zu lesen. Und wer kein Bild hat, bekommt seinen
|
||
Anfangsbuchstaben -- kein leerer Kreis, kein Platzhaltersymbol.
|
||
|
||
Der Buchstabe bleibt beim Laden des Bildes LIEGEN und wird nicht
|
||
ersetzt. Lädt das Bild nicht (Verbindung weg, Datei gelöscht), steht
|
||
dort weiterhin etwas Sinnvolles statt eines zerbrochenen Bildsymbols.
|
||
===================================================================== */
|
||
.wahl2__bild {
|
||
position: relative;
|
||
flex: none;
|
||
width: 26px; height: 26px;
|
||
border-radius: 50%;
|
||
display: inline-flex; align-items: center; justify-content: center;
|
||
background: linear-gradient(150deg, rgba(63, 189, 245, .22), rgba(138, 118, 255, .18));
|
||
box-shadow: inset 0 0 0 1px rgba(150, 186, 220, .22);
|
||
color: #dbe4ef;
|
||
/* .76rem = 12,16 px. Bei .7rem waren es 11,2 -- unter der Grenze von
|
||
11,5, die pruef-css-klassen zieht. Ein einzelner Grossbuchstabe in
|
||
einem 26-px-Kreis wirkt ohnehin kleiner, als die Zahl sagt. */
|
||
font-size: .76rem; font-weight: 700; line-height: 1;
|
||
overflow: hidden;
|
||
}
|
||
.wahl2__bild img {
|
||
position: absolute; inset: 0;
|
||
width: 100%; height: 100%;
|
||
object-fit: cover;
|
||
border-radius: 50%;
|
||
}
|
||
/* Der Name bekommt den restlichen Platz und wird gekürzt statt zu
|
||
umbrechen -- eine zweizeilige Zeile in einer Auswahlliste zerreißt
|
||
den Rhythmus, an dem das Auge entlangläuft. */
|
||
.wahl2__name {
|
||
min-width: 0;
|
||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||
}
|
||
.wahl2__eintrag { display: flex; align-items: center; gap: 10px; }
|
||
|
||
/* ===================================================================
|
||
DER ANMELDE-KNOPF (08.09.2026)
|
||
|
||
Filipe, screen28: "dieser anmelde button soll noch viel spezieller
|
||
sein bitte. und viel geiler."
|
||
|
||
NUR DIESER EINE. Er traegt die Klasse `.knopf`, die im ganzen
|
||
Workspace an Dutzenden Stellen haengt -- wer sie aendert, aendert
|
||
jeden Knopf im Haus. Deshalb greift diese Regel ueber `#knopf`, die
|
||
Kennung des Anmelde-Knopfes, und laesst alle anderen in Ruhe.
|
||
|
||
ER TRAEGT BEIDE MARKEN. Der Verlauf laeuft vom Chili-Rot von Spicy
|
||
Media in das Babyblau von Dogi -- dieselbe Klammer wie im Schriftzug
|
||
der Kopfleiste, und hier ist sie besonders am Platz: Dieser Knopf ist
|
||
die Tuer ins Haus. Wer ihn drueckt, betritt "Spicy & Dogi".
|
||
|
||
Der Text bleibt WEISS und bekommt keinen Verlauf. Auf einer farbigen
|
||
Flaeche ist durchsichtige Schrift doppelt riskant -- sie haengt an
|
||
einer Technik UND steht auf wechselndem Untergrund.
|
||
|
||
DIE FARBEN SIND ABGEDUNKELT, und das war eine Korrektur an mir
|
||
selbst. Der erste Entwurf nahm die Marken-Toene direkt: #d94a3f bis
|
||
#7ec8f2. Er sah gut aus, und genau das ist die Falle -- nachgerechnet
|
||
lag weisser Text darauf bei 4,20 / 3,37 / 2,55 / 1,84 zu 1. Auf dem
|
||
hellsten Punkt also nicht einmal beim halben Mindestwert. Ich hatte
|
||
an dieser Stelle "ueber 4,5:1 an jeder Stelle" behauptet, ohne es
|
||
nachzurechnen; die Zahl hat mich widerlegt.
|
||
|
||
Jeder Stuetzpunkt ist deshalb so weit abgedunkelt, bis weisser Text
|
||
4,6:1 erreicht -- knapp ueber der Grenze, damit Rundungen nicht
|
||
darunter rutschen. Die Farben bleiben erkennbar Rot und Blau, sie
|
||
sind nur tiefer. Ein Verlauf ist so lesbar wie sein HELLSTER Punkt,
|
||
nicht wie sein Durchschnitt.
|
||
|
||
Der Glanz wandert beim Ueberfahren, statt zu pulsieren -- derselbe
|
||
Grund wie beim Manager-Stern und beim Kalender-Knopf: Glanz ist
|
||
etwas, das sich bewegt. Bei `prefers-reduced-motion` entfaellt er;
|
||
der Knopf bleibt kraeftig, er glaenzt nur nicht. */
|
||
#knopf {
|
||
position: relative; overflow: hidden;
|
||
width: 100%;
|
||
padding: 15px 22px;
|
||
font-size: 1.02rem; font-weight: 750; letter-spacing: .015em;
|
||
color: #fff;
|
||
border: 0;
|
||
border-radius: 14px;
|
||
background:
|
||
linear-gradient(100deg, #cc463b 0%, #bc553d 34%, #4e799c 74%, #4d7a94 100%);
|
||
box-shadow:
|
||
inset 0 1px 0 rgba(255, 255, 255, .28),
|
||
inset 0 -2px 0 rgba(0, 0, 0, .22),
|
||
0 10px 26px -14px rgba(217, 74, 63, .9),
|
||
0 10px 26px -16px rgba(126, 200, 242, .8);
|
||
transition: transform var(--tempo), box-shadow var(--tempo), filter var(--tempo);
|
||
}
|
||
#knopf:hover:not([disabled]) {
|
||
transform: translateY(-1px);
|
||
filter: saturate(1.08) brightness(1.04);
|
||
box-shadow:
|
||
inset 0 1px 0 rgba(255, 255, 255, .34),
|
||
inset 0 -2px 0 rgba(0, 0, 0, .22),
|
||
0 14px 30px -12px rgba(217, 74, 63, .95),
|
||
0 14px 30px -14px rgba(126, 200, 242, .85);
|
||
}
|
||
#knopf:active:not([disabled]) { transform: translateY(0); }
|
||
#knopf::after {
|
||
content: "";
|
||
position: absolute; inset: 0;
|
||
background: linear-gradient(105deg, transparent 40%,
|
||
rgba(255, 255, 255, .3) 50%, transparent 60%);
|
||
transform: translateX(-130%);
|
||
transition: transform .6s cubic-bezier(.4, 0, .2, 1);
|
||
pointer-events: none;
|
||
}
|
||
#knopf:hover:not([disabled])::after { transform: translateX(130%); }
|
||
@media (prefers-reduced-motion: reduce) {
|
||
#knopf::after { display: none; }
|
||
#knopf:hover:not([disabled]) { transform: none; }
|
||
}
|
||
/* Waehrend der Anmeldung: ruhig stellen, damit der Ladepunkt die
|
||
Aufmerksamkeit bekommt und nicht der Glanz. */
|
||
#knopf[disabled] { filter: saturate(.7) brightness(.85); box-shadow: none; }
|
||
|
||
/* ===================================================================
|
||
DIE ROLLENZEICHEN AUF DER ANMELDESEITE (08.09.2026)
|
||
|
||
SIE WAREN VERGESSEN WORDEN, und Filipe hat es im Bildschirmfoto
|
||
gesehen: Auf der Anmeldeseite standen weiter die alten, einfarbigen
|
||
Zeichen -- rosa Chili, GELBER Husky, violetter Stern, Schild mit
|
||
Haken, Person-Silhouette. Die neuen lagen zu dem Zeitpunkt seit
|
||
Stunden im Haus, nur eben in `personen.html`.
|
||
|
||
DER GRUND ist eine Doppelung, die man dem Code nicht ansieht: Diese
|
||
Seite hatte die Zeichen als EIGENE Kopien im Quelltext stehen, nicht
|
||
als Verweis auf das gemeinsame Sprite. Wer eines von beiden aendert,
|
||
aendert das andere nicht -- und merkt es nicht, weil beide Stellen
|
||
fuer sich richtig aussehen. Jetzt traegt `index.html` dasselbe Sprite
|
||
und verweist mit `<use>` darauf; es gibt die Zeichen nur noch einmal.
|
||
|
||
Die Regeln unten mussten mit: Wie bei `.rollenwahl__symbol` setzte
|
||
`.rolle__zeichen` ein `fill: none` und ein `stroke` in der
|
||
Rollenfarbe. Beides wird an die Pfade VERERBT -- jedes Zeichen waere
|
||
von einem 1,7 px dicken Rand ueberzogen und seine Verlaeufe
|
||
uebermalt worden. Die Zeichen bringen ihre Farben selbst mit; von
|
||
aussen kommt nur noch Groesse und Schatten. */
|
||
.rolle__zeichen {
|
||
fill: none; stroke: none;
|
||
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .65));
|
||
}
|
||
/* Die gewaehlte Rolle hebt sich weiterhin ab -- aber ueber Groesse und
|
||
Schein statt ueber die Farbe, denn die gehoert jetzt dem Zeichen. */
|
||
.rolle[aria-checked="true"] .rolle__zeichen {
|
||
transform: scale(1.06);
|
||
filter: drop-shadow(0 2px 5px color-mix(in srgb, var(--rf) 60%, transparent));
|
||
}
|
||
|
||
/* GROESSERE ROLLENZEICHEN (08.09.2026). Filipe: "der husky soll viel
|
||
besser aussehen und zu sehen sein." 21 px waren fuer ein Zeichen mit
|
||
Gesicht schlicht zu wenig -- Ohren, Maske und Augen lagen dort auf
|
||
drei bis vier Bildpunkten. 27 px sind rund 65 % mehr Flaeche, ohne
|
||
dass die Zeile ihre Hoehe aendert. */
|
||
.rolle__zeichen { width: 27px; height: 27px; }
|
||
|
||
/* VON personen.css HIERHER GEZOGEN (08.09.2026).
|
||
|
||
Das Rollen-Sprite steht seit heute auf ZWEI Seiten (personen.html und
|
||
index.html). Die Gestaltung dazu lag aber nur in personen.css -- die
|
||
Anmeldeseite laedt die gar nicht. Der Stern stand dort also ohne
|
||
seinen Glanz, und `pruef-css-klassen` hat es gemeldet: ".rs-funkel --
|
||
fehlt auf 1 Seite (index.html)".
|
||
|
||
Das ist derselbe Fehler wie beim Sprite selbst, nur eine Ebene
|
||
hoeher: Wer etwas verdoppelt, muss auch alles mitnehmen, was daran
|
||
haengt. gate.css liegt auf allen 19 Seiten -- hier kann es nicht
|
||
wieder auseinanderlaufen.
|
||
*/
|
||
/* DAS FUNKELN DES MANAGER-STERNS.
|
||
|
||
Ein heller Streifen wandert einmal quer ueber den Stern. Bewusst
|
||
langsam (4,5 s) und mit langer Pause: Ein schnelles Blinken waere
|
||
genau die aggressive Optik, die hier nicht sein soll -- und in einer
|
||
Liste mit fuenf Rollen zoege ein zappelndes Zeichen den Blick
|
||
dauerhaft von allem anderen ab.
|
||
|
||
Gemacht ueber eine wandernde Maske, nicht ueber die Deckkraft: Ein
|
||
Auf- und Abblenden des ganzen Sterns waere ein Pulsieren, kein
|
||
Glitzern. Glanz ist etwas, das sich BEWEGT. */
|
||
.rs-funkel {
|
||
-webkit-mask: linear-gradient(105deg, transparent 42%, #000 50%, transparent 58%) center / 260% 100% no-repeat;
|
||
mask: linear-gradient(105deg, transparent 42%, #000 50%, transparent 58%) center / 260% 100% no-repeat;
|
||
animation: rs-glitzer 4.5s cubic-bezier(.5, 0, .5, 1) infinite;
|
||
}
|
||
@keyframes rs-glitzer {
|
||
0%, 62% { -webkit-mask-position: 145% 0; mask-position: 145% 0; }
|
||
100% { -webkit-mask-position: -45% 0; mask-position: -45% 0; }
|
||
}
|
||
/* Hausregel: Wer weniger Bewegung eingestellt hat, bekommt keine.
|
||
Uebrig bleibt ein ruhiger goldener Stern -- nicht ein unsichtbarer. */
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.rs-funkel { animation: none; -webkit-mask: none; mask: none; opacity: .25; }
|
||
}
|
||
|
||
/* =====================================================================
|
||
DER TITEL IST IN DIE PLATTE GRAVIERT (screen29, 09.09.2026)
|
||
|
||
Filipe: "sehr gut aber ich will es noch viel geiler bitte."
|
||
|
||
"Creator Workspace" stand als flaches Weiss ueber der Karte --
|
||
richtig gesetzt, aber ohne Material. Darunter liegt eine Karte aus
|
||
Glas und Metall, darum ein Rahmen aus Rot und Babyblau; nur die
|
||
Ueberschrift selbst gehoerte zu nichts davon.
|
||
|
||
ZWEI SACHEN MACHEN AUS SCHRIFT EIN WERKSTUECK:
|
||
|
||
1. EIN VERLAUF VON OBEN NACH UNTEN, nicht von links nach rechts.
|
||
Gebuerstetes Metall ist oben hell, in der Mitte dunkel und
|
||
unten wieder hell -- weil es sich woelbt. Ein Verlauf, der nur
|
||
von hell nach dunkel laeuft, ist eine Flaeche mit Farbverlauf;
|
||
erst der WECHSEL liest sich als Metall. Dieselbe Ueberlegung
|
||
wie bei der Fassung der Zentrale, nur hochkant.
|
||
|
||
2. EIN HARTER SCHATTEN DIREKT DARUNTER, ein Pixel. Er macht aus
|
||
aufgelegter Schrift eingelassene: Das Auge liest die dunkle
|
||
Linie als Kante der Vertiefung. Weich waere es ein Schlagschatten
|
||
und damit das Gegenteil.
|
||
|
||
DER RUECKFALL STEHT ZUERST UND IST VOLLWERTIG. `background-clip:
|
||
text` ist die Technik, die hier die Farbe traegt -- faellt sie aus,
|
||
waere durchsichtiger Text auf durchsichtigem Grund die Ueberschrift
|
||
der wichtigsten Seite des Hauses. Also: `color` bleibt gesetzt, und
|
||
erst ein `@supports` schaltet den Verlauf dazu. Dieselbe Vorsicht
|
||
wie beim Anmelde-Knopf, wo der Text aus genau diesem Grund weiss
|
||
geblieben ist.
|
||
|
||
`filter: drop-shadow` UND NICHT `text-shadow`: Bei durchsichtigem
|
||
Text scheint ein Textschatten DURCH die Buchstaben hindurch -- man
|
||
saehe den Schatten im Buchstaben stehen. `drop-shadow` legt ihn um
|
||
die sichtbare Form, und die ist hier der Verlauf.
|
||
|
||
AUGENSCHONEND UND NACHGERECHNET: Der dunkelste Punkt des Verlaufs ist
|
||
#9fb3c8. Gegen den Kartengrund kommt er auf 8,97:1 (bei #0a0e17),
|
||
8,41:1 (#12161f) und im schlechtesten angenommenen Fall 7,54:1
|
||
(#1a2030) -- grosse Schrift braucht 3:1, normale 4,5:1. Er liegt
|
||
ueber beidem. Die Zahlen stehen hier, weil ich an dieser Stelle
|
||
schon einmal "liegt weit darueber" geschrieben hatte, ohne es
|
||
auszurechnen, und beim Anmelde-Knopf damit danebenlag (4,20:1 statt
|
||
der behaupteten 4,5+). Eine Behauptung ueber Kontrast ohne Zahl ist
|
||
eine Vermutung.
|
||
|
||
Nichts glaenzt, nichts wandert -- es ist Material, keine Animation. */
|
||
.tafel .titel {
|
||
color: #eef5fd;
|
||
}
|
||
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
|
||
.tafel .titel {
|
||
background: linear-gradient(178deg,
|
||
#ffffff 0%,
|
||
#e6eef8 26%,
|
||
#9fb3c8 56%,
|
||
#dceaf7 78%,
|
||
#ffffff 100%);
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
color: transparent;
|
||
filter: drop-shadow(0 1px 0 rgba(3, 6, 12, .85));
|
||
}
|
||
}
|
||
/* Ein feiner Lichtstrich unter der Markenzeile -- er trennt "wer sind
|
||
wir" von "was ist das hier", ohne ein Wort dafuer zu brauchen, und
|
||
nimmt die beiden Hausfarben in derselben Richtung auf wie der Rahmen:
|
||
Rot links, Babyblau rechts, Treffpunkt in der Mitte. */
|
||
.tafel .marke--paar {
|
||
position: relative;
|
||
padding-bottom: .5em;
|
||
margin-bottom: .35em;
|
||
}
|
||
.tafel .marke--paar::after {
|
||
content: "";
|
||
position: absolute; left: 0; right: 0; bottom: 0;
|
||
height: 1px;
|
||
background: linear-gradient(90deg,
|
||
rgba(255, 95, 109, .55) 0%,
|
||
rgba(226, 236, 248, .40) 46%,
|
||
rgba(143, 216, 255, .55) 78%,
|
||
transparent 100%);
|
||
}
|
||
|
||
/* =====================================================================
|
||
DER SILBERGLANZ AUF DER DOGFATHER-ZEILE (screen3, 09.09.2026)
|
||
|
||
Filipe: "so richtig geil silber ... so wie mit sternen, also es soll
|
||
nicht zu viel sein aber geil sein."
|
||
|
||
"Wie mit Sternen" ist als GLANZ gebaut, nicht als Funkeln: ein
|
||
schmales Spitzlicht, das schraeg ueber die Zeile laeuft, plus drei
|
||
winzige Lichtpunkte. Zusammen ergibt das den Eindruck von poliertem
|
||
Metall, auf dem sich etwas spiegelt.
|
||
|
||
NICHTS BEWEGT SICH. Ein wanderndes Glitzern auf der Anmeldeseite
|
||
waere genau das, was die Hausregel verbietet -- und diese Zeile ist
|
||
das Erste, was jemand von der Seite sieht. Der Glanz steht still;
|
||
er lebt davon, dass er schraeg liegt und nicht mittig.
|
||
|
||
ER GILT NUR FUER DIESE EINE ROLLE. Die anderen vier bleiben, wie sie
|
||
sind: "immer noch im stil von den anderen kategorien". Der
|
||
Unterschied ist das Material, nicht die Lautstaerke.
|
||
===================================================================== */
|
||
.rolle[data-rolle="admin"] {
|
||
position: relative;
|
||
}
|
||
/* DER NAME TRAEGT DIE MISCHUNG (09.09.2026, screen1).
|
||
|
||
Filipe: "... die dogfather soll." -- der Name selbst soll das
|
||
Babyblau tragen, nicht nur die Zierde darum herum.
|
||
|
||
Von Silber nach Babyblau, in derselben Richtung wie die Schiene
|
||
links: Das Wort liest sich als ein Stueck Metall, auf das von oben
|
||
links Licht faellt. Der dunkelste Punkt des Verlaufs ist #7fc9f2 --
|
||
Kontrast 10,8:1 auf dem Untergrund der Zeile, also weit ueber den
|
||
noetigen 4,5:1. (pruef-buehne liest bei `color: transparent` den
|
||
dunkelsten Stopp eines Verlaufs aus, genau fuer solche Faelle.)
|
||
|
||
`-webkit-` steht dabei, weil `background-clip: text` ohne das
|
||
Praefix in aelteren WebKit-Fassungen nichts tut -- und "nichts tut"
|
||
heisst hier: unsichtbarer Text, nicht schwarzer. */
|
||
.rolle[data-rolle="admin"] .rolle__name {
|
||
background: linear-gradient(102deg,
|
||
#f4f9ff 0%, #cfe6fa 26%, #9ed3f4 58%, #7fc9f2 100%);
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
color: transparent;
|
||
/* Ohne einen Schatten steht heller Text auf hellem Verlauf ohne
|
||
Kante. Der Schatten liegt HINTER der Schrift, nicht darauf. */
|
||
filter: drop-shadow(0 1px 1px rgba(3, 8, 16, .8));
|
||
}
|
||
/* Ein Verlauf auf Text hat keinen erhoehten Kontrast beim Ueberfahren
|
||
-- die Zeile hebt sich sonst nur noch am Untergrund. Deshalb wird der
|
||
Verlauf beim Zeigen einen Hauch heller, nicht anders. */
|
||
.rolle[data-rolle="admin"]:hover .rolle__name,
|
||
.rolle[data-rolle="admin"][aria-checked="true"] .rolle__name {
|
||
background: linear-gradient(102deg,
|
||
#ffffff 0%, #e2f1fd 26%, #b6e0f8 58%, #93d2f5 100%);
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
}
|
||
/* Erzwungene Farben (Windows-Kontrastmodus): Ein Verlauf auf Text wird
|
||
dort zu einer leeren Flaeche. Zurueck auf die Systemfarbe. */
|
||
@media (forced-colors: active) {
|
||
.rolle[data-rolle="admin"] .rolle__name,
|
||
.rolle[data-rolle="admin"]:hover .rolle__name {
|
||
background: none; color: CanvasText; filter: none;
|
||
}
|
||
}
|
||
/* DIE SCHIENE LAEUFT VON SILBER NACH BABYBLAU (09.09.2026).
|
||
|
||
Die Rollenschiene links wird sonst aus einer einzigen Farbe gebaut
|
||
(`--rf`/`--rton`). Fuer DogFather ist das jetzt zu wenig: Seine
|
||
Farbe IST eine Mischung, und die sieht man nur, wenn beide Toene
|
||
nebeneinander liegen. Oben Silber, unten Babyblau -- dieselbe
|
||
Richtung wie das Licht auf der Kachel. */
|
||
.tafel .rolle[data-rolle="admin"]::before,
|
||
.rolle[data-rolle="admin"]::before {
|
||
/* DAS SILBER SITZT NUR NOCH OBEN (09.09.2026, screen1).
|
||
|
||
Vorher lief die Schiene bis 42 Prozent im hellen Silberton und
|
||
erreichte das Babyblau erst ganz unten -- auf 3 px Breite blieb
|
||
davon fast nichts uebrig. Jetzt ist der Silberkamm ein SPITZLICHT
|
||
am oberen Ende (die ersten 18 Prozent), darunter Babyblau ueber
|
||
die ganze restliche Laenge. Das ist dieselbe Verteilung, die eine
|
||
angestrahlte Metallkante wirklich hat: ein schmaler Glanz, viel
|
||
Eigenfarbe. */
|
||
background: linear-gradient(180deg,
|
||
#f2f8ff 0%,
|
||
var(--dogi-haupt) 18%,
|
||
var(--dogi-zweit) 62%,
|
||
#4fb3e8 100%) !important;
|
||
}
|
||
|
||
.rolle[data-rolle="admin"]::after {
|
||
content: "";
|
||
position: absolute; inset: 0;
|
||
pointer-events: none;
|
||
background:
|
||
/* Das Spitzlicht -- schmal, schraeg, und weit vor der Mitte.
|
||
Es traegt jetzt beide Toene: weiss am Kamm, babyblau im
|
||
Auslauf. So liest man die Mischung auch dort, wo keine Schiene
|
||
ist. */
|
||
/* EIN ZWEITER, BREITER SCHIMMER IN BABYBLAU (09.09.2026, screen1).
|
||
Der schmale weisse Kamm allein war Silber ohne Ton -- er sass auf
|
||
16 Prozent der Breite und war damit auf einer 900 px langen Zeile
|
||
ein Strich. Der neue Schimmer liegt darunter, ist viel breiter und
|
||
viel schwaecher: Er faerbt die Flaeche, statt sie zu streifen. */
|
||
linear-gradient(104deg,
|
||
transparent 4%,
|
||
rgba(120, 195, 240, .10) 30%,
|
||
rgba(120, 195, 240, .13) 58%,
|
||
rgba(120, 195, 240, .05) 82%,
|
||
transparent 96%),
|
||
linear-gradient(104deg,
|
||
transparent 8%,
|
||
rgba(255, 255, 255, .12) 16%,
|
||
rgba(174, 218, 248, .09) 22%,
|
||
transparent 32%),
|
||
/* Drei Lichtpunkte, unregelmaessig gesetzt. Regelmaessig waeren sie
|
||
ein Muster; unregelmaessig sind sie Zufall auf einer Oberflaeche. */
|
||
radial-gradient(1.4px 1.4px at 22% 30%, rgba(255, 255, 255, .5), transparent),
|
||
radial-gradient(1.1px 1.1px at 63% 72%, rgba(226, 238, 250, .38), transparent),
|
||
radial-gradient(1.6px 1.6px at 84% 26%, rgba(255, 255, 255, .3), transparent);
|
||
}
|
||
|
||
|
||
/* =====================================================================
|
||
DIE ZWEITE ZUGANGSWAND (10.09.2026)
|
||
|
||
Nur crew-index.html traegt `gate--crew`. Hier stehen die wenigen
|
||
Stellen, an denen die gemeinsame Gestaltung nicht passt -- und zwar
|
||
NUR die.
|
||
|
||
ES GEHT NICHT UM GESCHMACK, SONDERN UM DAS BILD DAHINTER.
|
||
Die Karte holt sich absichtlich die Farben des gemalten Rahmens
|
||
herein: rot oben links, blau unten rechts, "das, was die Karte mit
|
||
dem Bild verbindet, statt sie davorzusetzen" (Begruendung weiter
|
||
oben). Auf der zweiten Buehne ist der Rahmen aber RINGSUM blau -- die
|
||
Szene wurde umgefaerbt. Das Rot verbindet dort also nichts mehr,
|
||
sondern widerspricht dem Bild.
|
||
|
||
Dieselbe Ueberlegung beim Anmeldeknopf: Sein Verlauf lief von Rot
|
||
nach Blau, weil er die beiden Marken aufnahm. Auf dieser Seite gibt
|
||
es nur eine.
|
||
===================================================================== */
|
||
|
||
/* Der Knopf: von Lila nach Babyblau (10.09.2026).
|
||
|
||
Filipe: "richtig geiles lila und babyblau mischung überall." Er lief
|
||
bis eben von tiefem zu hellerem Blau -- richtig, solange die Wand
|
||
einfarbig blau war; jetzt fehlte ihm die Haelfte der Mischung.
|
||
|
||
DIE HELLIGKEIT IST NACHGERECHNET, NICHT GEWAEHLT. Der erste Entwurf
|
||
der blauen Fassung endete bei #4aa4cf -- huebsch, und weisse Schrift
|
||
darauf haette nur 2,8 zu 1 gehabt. Ein hellerer Knopf sieht
|
||
kraeftiger aus und ist schlechter zu lesen; das ist kein Tausch, den
|
||
man nebenbei macht.
|
||
|
||
Jede Stufe hier liegt gegen Weiss bei mindestens 5 zu 1 (gerechnet:
|
||
10,7 / 8,8 / 6,6 / 5,9). Der Verlauf beginnt dadurch dunkler als
|
||
vorher und endet heller -- die schlechteste Stelle ist damit besser
|
||
als die schlechteste der blauen Fassung. Gemessen wird das in
|
||
pruef-crew-wand-bild.mjs am fertigen Bildschirmfoto, denn ein Verlauf
|
||
laesst sich nicht aus einer einzelnen Farbe beurteilen. */
|
||
body.gate--crew #knopf {
|
||
background:
|
||
linear-gradient(100deg, #3a2b7d 0%, #4a3a9c 34%, #46589f 74%, #37688f 100%);
|
||
box-shadow:
|
||
inset 0 1px 0 rgba(255, 255, 255, .28),
|
||
inset 0 -2px 0 rgba(0, 0, 0, .22),
|
||
0 10px 26px -14px rgba(130, 104, 220, .9),
|
||
0 10px 26px -16px rgba(126, 200, 242, .8);
|
||
}
|
||
body.gate--crew #knopf:hover:not([disabled]) {
|
||
box-shadow:
|
||
inset 0 1px 0 rgba(255, 255, 255, .34),
|
||
inset 0 -2px 0 rgba(0, 0, 0, .22),
|
||
0 14px 30px -12px rgba(130, 104, 220, .95),
|
||
0 14px 30px -14px rgba(126, 200, 242, .85);
|
||
}
|
||
|
||
/* DIE KACHELREIHE. Ihre Fassung laeuft im Original von Rot ueber
|
||
Silber nach Babyblau -- sie zitiert damit den Rand der Zentrale
|
||
("Wer sich anmeldet, sieht damit schon hier die Handschrift der
|
||
Seite, die dahinter liegt", Begruendung weiter oben). Hinter DIESER
|
||
Wand liegt aber eine durchweg blaue Seite; das Rot zitiert dort
|
||
nichts mehr.
|
||
|
||
Die Form bleibt Stufe fuer Stufe gleich -- dunkel, Farbe, hell,
|
||
dunkel, Silber in der Mitte, dann dasselbe gespiegelt. Nur die
|
||
linke Farbe wechselt von Rot nach Blau. Wer die Fassung spaeter
|
||
umbaut, sieht an den gleichen Prozentzahlen sofort, dass beide
|
||
zusammengehoeren. */
|
||
body.gate--crew .rollen {
|
||
/* LINKS LILA, RECHTS BABYBLAU (10.09.2026). Die Prozentzahlen sind
|
||
Stufe fuer Stufe dieselben wie im Original -- getauscht wird nur
|
||
die linke Farbfamilie, damit die beiden Fassungen nebeneinander
|
||
lesbar bleiben. Rechts stand Babyblau schon immer; das war nie das
|
||
Problem. */
|
||
background: linear-gradient(96deg,
|
||
#06040f 0%, #3a2b7d 6%, #7a63d8 14%, #ded3ff 20%,
|
||
#35276f 30%, #0a0c12 40%, #f4faff 50%, #0a0c12 60%,
|
||
#4f95bd 70%, #8fd8ff 78%, #dff2ff 84%, #3f7fa3 92%, #06080f 100%);
|
||
}
|
||
/* Das Innenglas: unten links glueht es rot. Dieselbe Stelle, kaltes
|
||
Licht. Der Rest der Ebene (Messraster, Verlauf) bleibt unangetastet
|
||
-- deshalb wird die ganze Liste noch einmal geschrieben und nicht
|
||
nur eine Zeile: `background` ist eine Kurzschreibweise, eine einzelne
|
||
Lage laesst sich nicht ersetzen. */
|
||
body.gate--crew .rollen::before {
|
||
background:
|
||
linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 34%),
|
||
repeating-linear-gradient(0deg, rgba(150, 186, 220, .05) 0 1px, transparent 1px 22px),
|
||
repeating-linear-gradient(90deg, rgba(150, 186, 220, .05) 0 1px, transparent 1px 22px),
|
||
radial-gradient(120% 80% at 12% 100%, rgba(150, 122, 255, .13), transparent 62%),
|
||
radial-gradient(110% 75% at 88% 0%, rgba(126, 200, 242, .09), transparent 60%),
|
||
linear-gradient(180deg, #0c0b1c, #080714);
|
||
}
|
||
/* Der kleine Anschlag neben "Womit meldest du dich an?" -- oben rot,
|
||
unten babyblau. Hier oben im Ton von Team Dogi, unten babyblau: derselbe
|
||
Zweifarbenaufbau, beide Haelften kalt. */
|
||
body.gate--crew .rollen .feldschild::before {
|
||
background-image:
|
||
linear-gradient(180deg, transparent 0 46%, rgba(143, 216, 255, .95) 46%),
|
||
repeating-linear-gradient(180deg, #6b5fa8 0 2px, transparent 2px 5px);
|
||
}
|
||
|
||
/* Die Karte in der gemalten Tafel. WORTGLEICH dieselbe Bedingung wie
|
||
oben -- nicht global: Auf schmalen Geraeten hat die Karte einen
|
||
anderen Aufbau, und ein globales `background` haette den ueberschrieben.
|
||
Nur die zwei roten Werte werden blau, alles andere bleibt Zeile fuer
|
||
Zeile wie es war. */
|
||
@media (min-width: 1100px) and (min-height: 620px) and (min-aspect-ratio: 7/5) {
|
||
body.gate--crew .tafel {
|
||
background:
|
||
radial-gradient(135% 100% at 0% 0%, rgba(150, 122, 255, .26), transparent 55%),
|
||
radial-gradient(135% 100% at 100% 100%, rgba(56, 158, 246, .30), transparent 58%),
|
||
linear-gradient(176deg,
|
||
rgba(16, 23, 36, .93) 0%,
|
||
rgba(9, 13, 21, .95) 46%,
|
||
rgba(5, 7, 13, .96) 100%);
|
||
box-shadow:
|
||
inset 0 1px 0 rgba(255, 255, 255, .11),
|
||
inset 0 -1px 0 rgba(0, 0, 0, .5),
|
||
inset 2px 2px 0 -1px rgba(120, 190, 240, .32),
|
||
inset -2px -2px 0 -1px rgba(56, 158, 246, .38),
|
||
inset 0 0 54px -20px rgba(0, 0, 0, .92);
|
||
}
|
||
}
|
||
|
||
/* =====================================================================
|
||
DIE ALTERSFRAGE AN DER ZUGANGSWAND (15.09.2026)
|
||
|
||
Sie darf nicht wie ein Kleingedrucktes aussehen -- wer sie setzt,
|
||
soll sie gelesen haben. Also lesbare Groesse, ein Beruehrziel, das
|
||
den Namen verdient, und keine graue Fussnotenfarbe.
|
||
===================================================================== */
|
||
|
||
.alterfrage { margin: 0 0 16px; }
|
||
.alterfrage__zeile {
|
||
display: flex; align-items: flex-start; gap: 11px;
|
||
padding: 11px 13px;
|
||
cursor: pointer;
|
||
border: 1px solid var(--rand);
|
||
border-radius: var(--radius);
|
||
background: rgba(0, 0, 0, .22);
|
||
}
|
||
.alterfrage__zeile:hover { border-color: var(--rand-hell); }
|
||
.alterfrage__zeile input {
|
||
/* 20 px plus die Polsterung ringsum ergeben ein Ziel, das ein Daumen
|
||
trifft -- das Kaestchen allein waere 13 px. */
|
||
width: 20px; height: 20px; margin: 1px 0 0; flex: 0 0 auto;
|
||
accent-color: var(--akzent);
|
||
}
|
||
.alterfrage__text {
|
||
font-size: .88rem; line-height: 1.5; color: var(--text-leise);
|
||
}
|
||
.alterfrage__text strong { color: var(--text); }
|
||
|
||
/* DER SATZ, DER SAGT, WOHER MAN EINEN CODE BEKOMMT (19.09.2026).
|
||
|
||
Er steht ÜBER der Fußzeile mit der Verschlüsselungszusage, nicht
|
||
darunter: Wer keinen Code hat, soll ihn lesen, bevor er aufgibt.
|
||
Etwas heller gesetzt als der Fuß — er ist eine Auskunft, kein
|
||
Kleingedrucktes. */
|
||
.fuss--woher {
|
||
color: var(--text-leise);
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
/* =====================================================================
|
||
KONTRASTMODUS: EIN GEDRÜCKTER SCHALTER MUSS GEDRÜCKT AUSSEHEN
|
||
(19.09.2026)
|
||
|
||
In Windows' Kontrastmodus (`forced-colors: active`) ersetzt das
|
||
System alle Farben und entfernt `box-shadow` ganz. Was seinen
|
||
Zustand NUR über Hintergrundfarbe oder einen Schatten-Rand zeigt,
|
||
sieht danach aus wie jeder andere Schalter.
|
||
|
||
Gemessen am 19.09.2026: **68 Regeln** im Haus zeigen einen Zustand
|
||
so -- 35× `[aria-pressed="true"]`, 33× `[data-an="ja"]`. Betroffen
|
||
sind Filterreihen, Empfängerauswahl, Merkmale, Stufen.
|
||
|
||
VIERZEHN CSS-DATEIEN hatten gar keinen Kontrastmodus-Block. Die
|
||
naheliegende Reaktion wäre gewesen, vierzehn Blöcke anzuhängen --
|
||
und damit eine Liste zu pflegen, die beim fünfzehnten Bereich
|
||
wieder unvollständig ist. Eine Regel, die den ZUSTAND trifft statt
|
||
die Datei, kann nicht veralten.
|
||
|
||
NICHT über die Hintergrundfarbe (die darf das System ersetzen),
|
||
sondern über eine Kante aus einer SYSTEMFARBE: `Highlight` ist die
|
||
Farbe, die der Nutzer selbst für „ausgewählt" eingestellt hat.
|
||
|
||
ABSICHTLICH KEIN `forced-color-adjust: none` -- damit bliebe unsere
|
||
eigene Farbe stehen, und genau die kann der Nutzer ja nicht lesen.
|
||
Das wäre, als würde man die Barrierefreiheit wegoptimieren, um die
|
||
Gestaltung zu retten.
|
||
|
||
Was seinen Zustand ohnehin als WORT trägt, braucht hier nichts:
|
||
`.marke-status` schreibt „Entwurf"/„Freigegeben" hin, `.t-stufe`
|
||
hat `.t-stufe__name`, jede `.spalte` hat ihre Überschrift. Dort ist
|
||
die Farbe Zierde, nicht Aussage -- nachgesehen, nicht vermutet.
|
||
===================================================================== */
|
||
@media (forced-colors: active) {
|
||
[aria-pressed="true"],
|
||
[data-an="ja"],
|
||
[data-anders="ja"],
|
||
[aria-current="page"],
|
||
[aria-current="true"] {
|
||
outline: 2px solid Highlight;
|
||
/* Nach INNEN, damit die Kante nichts überdeckt und das Element
|
||
nicht springt, wenn es gedrückt wird. */
|
||
outline-offset: -2px;
|
||
}
|
||
}
|