DogFatherGit
677bcb5653
Von Filipe aus drei gerenderten Entwuerfen gewaehlt (A Kante & Glut,
B Geschliffen, C Praegung). Raten hilft hier nicht -- beim Zurueck-Knopf
hat erst der direkte Vergleich zum Ziel gefuehrt.
Aufbau: 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 Flaeche bleibt dunkel. Beim Zeigen hebt
sich der Knopf einen Pixel an und bekommt einen weichen farbigen Schein
darunter. Die Hauptaktion einer Seite ist zusaetzlich gefuellt.
JEDE AKTION HAT IHRE EIGENE FARBE:
gruen passt, erledigt, freigegeben
amber ausbaufaehig, wartet
rot Handlungsbedarf, loeschen
blau speichern
violett anlegen
gold Onboarding -- der einzige Schritt, der eine Person anlegt
grau abbrechen, schliessen
Stufenfarbe fuer den Weiter-Knopf der Scout-Pipeline
DAS IST JETZT DIE EINZIGE STELLE, AN DER KNOEPFE GESTALTET WERDEN.
Vorher standen sie in NEUN Dateien verstreut, und prompt sahen dieselben
Knoepfe auf verschiedenen Seiten verschieden aus. Alle alten
Definitionen sind entfernt; wer einen neuen Knopf braucht, nimmt eine
Farbklasse und schreibt kein CSS. Gilt ab jetzt auch fuer alles, was
noch dazukommt.
Geprueft ueber alle elf Seiten: 172 sichtbare Knoepfe, kein einziger
ungestylt, kein Kontrast unter 4,5:1.
Drei Sachen, die dabei aufgefallen sind:
1. Der neutrale "Abbrechen"-Knopf hatte halbdurchsichtiges Weiss als
Farbwert -- gemessen 1,1:1 Kontrast, praktisch unlesbar. Neutral hat
jetzt einen echten Farbwert (#8e9cb0).
2. Die Filter-Knoepfe (Kalender, Dateien, Bereiche) hatten eine eigene
"gedrueckt"-Regel mit flaechiger Farbe, die den geschliffenen Rand
ueberschrieb. Sie benutzen jetzt den gefuellten Auftritt des Systems.
3. Der Bearbeiten-Stift auf den Aufgabenkarten war nie ein richtiger
Knopf, sondern nackter Text ohne Rand -- man sah nicht, dass man
draufdruecken kann. Jetzt im System, in der kleinsten Groesse.
Der Zurueck-Knopf ("Neon-Kante") bleibt wie er ist -- den hat Filipe
selbst ausgesucht, und er ist ein Navigationselement, keine Aktion.
Messhinweis fuer spaeter: color-mix liefert computed color(srgb ...),
das laesst sich NICHT als Text auslesen. Die erste Messung meldete
faelschlich 1,13:1 fuer 49 Knoepfe. Richtig geht es ueber eine Leinwand
(fillStyle + getImageData).
Alle Toene bewusst gedeckt statt neon, alles respektiert
prefers-reduced-motion.
634 lines
23 KiB
CSS
634 lines
23 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);
|
|
--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;
|
|
--text-still: #6d7d92;
|
|
|
|
--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);
|
|
}
|
|
|
|
*, *::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; }
|
|
|
|
.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);
|
|
transform: scale(1.03); /* Reserve für die Parallaxe */
|
|
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; }
|
|
|
|
/* ---------- Rollen --------------------------------------------------- */
|
|
|
|
.feldschild {
|
|
margin: 0 0 10px;
|
|
font-size: .78rem; font-weight: 600;
|
|
letter-spacing: .06em; text-transform: uppercase;
|
|
color: var(--text-still);
|
|
}
|
|
|
|
.rollen { margin-bottom: 22px; }
|
|
|
|
.rolle {
|
|
display: flex; align-items: center; gap: 13px;
|
|
width: 100%; margin-bottom: 8px; padding: 11px 14px;
|
|
background: rgba(255, 255, 255, .035);
|
|
border: 1px solid var(--rand);
|
|
border-radius: var(--radius-klein);
|
|
color: var(--text);
|
|
font: inherit; text-align: left; cursor: pointer;
|
|
transition: border-color var(--tempo), background var(--tempo), transform var(--tempo);
|
|
}
|
|
.rolle:hover { background: rgba(255, 255, 255, .06); border-color: var(--rand-hell); }
|
|
.rolle:active { transform: scale(.995); }
|
|
|
|
.rolle[aria-checked="true"] {
|
|
background: linear-gradient(100deg, rgba(63, 189, 245, .14), rgba(138, 118, 255, .10));
|
|
border-color: rgba(63, 189, 245, .55);
|
|
}
|
|
|
|
.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; }
|
|
.rolle[aria-checked="true"] .rolle__zeichen { stroke: var(--akzent); }
|
|
|
|
.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; }
|
|
.marke { font-size: .68rem; 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);
|
|
}
|
|
|
|
/* ---------- 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; }
|
|
}
|