DogFatherGitandClaude Opus 5
ea4078740e
Filipe: "zuerst will ich dass du die kategorien und die kacheln viel
krasser geiler machst."
Beim Nachmessen stand fest, warum die Pipeline flach aussah: Drei
Regeln in scouting.css kamen gar nicht an, seit es den Baukasten
(module.css) gibt -- und module.css NENNT zwei davon im eigenen Text.
--ton war an JEDER Karte #db4b66, dem Rot der Seite.
Daraus nimmt der Baukasten Kantenlicht, die
drei Eckwinkel und das Licht beim Zeigen. Sechs
Stufenfarben in der Datei, eine auf dem Schirm.
.kk::before (3px) gemessen 560px breit -- das ist das Kantenlicht
des Baukastens, das dasselbe Pseudoelement
belegt. Die farbige Pipeline-Kante gab es nicht.
.kk { border } /:hover module.css setzt `border: 0`, gleich stark und
spaeter im Ladeweg.
Das Haus hatte die Lehre schon: aufgaben.css setzt `--ton` an fuenf
Spalten mit genau dieser Begruendung. Hierher uebertragen hat es nie
jemand.
WAS JETZT ANDERS IST
* Jede Stufe traegt ihren Ton -- Eckwinkel, Kantenlicht und Hover
laufen damit von kuehl (neu entdeckt) zu gruen (uebergeben).
* Die Farbkante der Karte liegt im HINTERGRUND statt auf einem
Pseudoelement (beide gehoeren dem Baukasten). 6px, weil das
Kantenlicht 1,6px davon verdeckt -- bei 3px blieb nichts Sichtbares.
* Etappennummern 01-05, abgeleitet aus WEITER statt daneben
geschrieben. "Abgelehnt" bekommt keine: keine Etappe nach vorn.
* Stufentitel in der eigenen Farbe (vorher einheitlich --akzent),
mit Weiss aufgehellt -- 4,3:1 waeren bei fett-versal 12,5px zu wenig.
* Faellig-Saum als inset-Schatten wie bei .kachel[data-warn], mit
(0,3,0) gegen die Modulliste; vorher border-color und damit wirkungslos.
* Karte: Plattform als Schild, Handle in gleichbreiter Schrift,
Haarlinie zwischen "wer" und "lohnt sich", Reichweite deutlicher.
DAS MESSGERAET, DAS GEFEHLT HAT: module.css notiert "NICHT
MITREPARIERT, weil es kein Messgeraet dafuer gibt ... Hover laesst sich
nicht pruefen." Doch -- pruef-scouting-felder faehrt den Zeiger jetzt
auf die Karte und liest nach (6px -> 9px).
DREI FUNDE IN DEN EIGENEN WERKZEUGEN, alle von Hauswachen oder der
eigenen Messung:
* bild-arten hatte keine Notbremse; page.hover() blieb haengen und
liess beim Abbrechen einen Server auf Port 4336 zurueck. Jetzt
notbremse(240s) und mouse.move statt hover().
* color-mix(in srgb, var(--rand)) -- mit EINER Farbe ungueltig; der
ganze Verlauf fiel aus, uebrig blieb Abstand ohne Linie.
* Im Pruefausdruck steckte ein Backspace-Byte (0x08), das die
Kommandozeile aus einer Zeichenfolge gemacht hatte. Sah im
Quelltext richtig aus, traf nie. Jetzt startsWith.
pruef-scouting-felder: 64 -> 72 Pruefungen, gruen. Gegenprobe gefahren
(einer Stufe den Ton genommen -> rot, mit #db4b66 als Beleg). Statt des
226-Sekunden-Hauslaufs pruef-handy misst die Datei jetzt selbst auf
320px: 97 Teile, keines ueber dem Rand, kein seitliches Schieben.
Dazu gruen: css-klassen, lesbarkeit, tippziele, fingermass,
haus-trennung, leerzustand, deutsche-texte, zeichen (der eine Rest dort
ist bereich.css und aelter).
Co-Authored-By: Claude Opus 5 <[email protected]>
636 lines
28 KiB
CSS
636 lines
28 KiB
CSS
/* ===================================================================
|
|
Scout-CRM.
|
|
|
|
Die Pipeline hat eine Richtung, das soll man sehen: Jede Stufe traegt
|
|
links eine farbige Kante, die von kuehl (neu entdeckt) zu warm/gruen
|
|
(uebergeben) laeuft. Gedeckt gehalten -- kein Ampel-Geblinke.
|
|
=================================================================== */
|
|
|
|
.steuerung { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
|
|
.steuerung select {
|
|
min-width: 160px; padding: 9px 12px;
|
|
background: rgba(255, 255, 255, .045);
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
color: var(--text); font: inherit;
|
|
}
|
|
|
|
/* ---------- Fällige Follow-ups ------------------------------------------ */
|
|
|
|
.faellig {
|
|
margin-bottom: 26px; padding: 14px 18px;
|
|
background: rgba(255, 190, 120, .07);
|
|
border: 1px solid rgba(255, 190, 120, .3);
|
|
border-radius: var(--radius);
|
|
}
|
|
.faellig__titel {
|
|
margin: 0 0 8px; font-size: .74rem; font-weight: 700;
|
|
letter-spacing: .08em; text-transform: uppercase; color: #f0c48a;
|
|
}
|
|
.faellig__liste { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 0; list-style: none; }
|
|
.faellig__liste li { display: flex; align-items: baseline; gap: 7px; }
|
|
.faellig__knopf {
|
|
padding: 0; background: none; border: 0; cursor: pointer;
|
|
color: var(--text); font: inherit; font-weight: 600;
|
|
border-bottom: 1px solid rgba(240, 196, 138, .45);
|
|
}
|
|
.faellig__knopf:hover { color: #f0c48a; }
|
|
|
|
/* ---------- Stufen -------------------------------------------------------- */
|
|
|
|
.stufe { margin-bottom: 34px; }
|
|
.stufe__kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
|
|
/* DER TITEL TRUG DEN SEITENAKZENT, NICHT SEINE STUFE (bis 06.10.2026).
|
|
Hier stand `color: var(--akzent)` -- sechs Stufen, ein Blau. Jetzt
|
|
die eigene Farbe, aber mit Weiss aufgehellt: #4c7fa8 direkt auf dem
|
|
dunklen Grund kaeme nur auf rund 4,3:1, und fett-versal bei 12,5 px
|
|
ist KEIN grosser Text im Sinne der Richtlinie -- 4,5:1 waere die
|
|
Schwelle. Aufgehellt liegt jede der sechs Stufen weit darueber.
|
|
Nachgemessen von pruef-lesbarkeit. */
|
|
.stufe__titel {
|
|
margin: 0; font-size: .82rem; font-weight: 800;
|
|
letter-spacing: .1em; text-transform: uppercase;
|
|
color: color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 68%, #ffffff);
|
|
}
|
|
.stufe__zahl {
|
|
min-width: 22px; padding: 1px 8px; text-align: center;
|
|
font-size: .76rem; font-weight: 800;
|
|
font-variant-numeric: tabular-nums;
|
|
color: color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 55%, #ffffff);
|
|
background: color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 14%, transparent);
|
|
border: 1px solid color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 30%, transparent);
|
|
border-radius: 999px;
|
|
}
|
|
|
|
/* ---- DIE ETAPPENNUMMER (06.10.2026) --------------------------------
|
|
Die Pipeline hat eine RICHTUNG -- das stand bisher nur im Text der
|
|
Datei und nirgends auf dem Bildschirm. Sechs Ueberschriften
|
|
untereinander lesen sich wie eine Liste; "01" bis "05" lesen sich
|
|
wie ein Weg.
|
|
|
|
"Abgelehnt" bekommt KEINE Nummer, sondern einen Strich: Eine Absage
|
|
ist keine Etappe auf dem Weg nach vorn. Dieselbe Entscheidung wie im
|
|
leeren Zustand der Seite, wo die Aufzaehlung ebenfalls bei fuenf
|
|
aufhoert -- und sie steht jetzt nur noch an EINER Stelle im Code
|
|
(STUFE_NR in scouting.js). */
|
|
.stufe__nr {
|
|
flex: none;
|
|
display: grid; place-items: center;
|
|
min-width: 30px; height: 30px; padding: 0 6px;
|
|
font-size: .78rem; font-weight: 800;
|
|
font-variant-numeric: tabular-nums; letter-spacing: .02em;
|
|
color: color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 45%, #ffffff);
|
|
background: color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 15%, transparent);
|
|
border: 1px solid color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 42%, transparent);
|
|
/* Dieselbe Fase wie die Bauteile des Hauses, nur klein -- das Zeichen
|
|
gehoert zur selben Formensprache und ist kein fremder Kreis. */
|
|
clip-path: polygon(7px 0, 100% 0, 100% 100%, 0 100%, 0 7px);
|
|
}
|
|
.stufe[data-stufe="abgelehnt"] .stufe__nr { opacity: .7; }
|
|
|
|
.stufe__karten { display: grid; gap: 10px; }
|
|
|
|
/* ===== FARBVERLAUF ENTLANG DER PIPELINE ==============================
|
|
|
|
`--ton` WIRD MITGESETZT (06.10.2026) -- und das ist die eigentliche
|
|
Reparatur dieser Seite.
|
|
|
|
Gemessen am 06.10.2026: An JEDER Karte der Pipeline stand
|
|
`--ton: #db4b66` -- das Rot der Seite, bei „Neu entdeckt" genauso wie
|
|
bei „Übergeben". Aus `--ton` nimmt der ganze Baukasten in module.css
|
|
seine Farbe: das Kantenlicht, die drei Eckwinkel und das Licht beim
|
|
Zeigen. Die Pipeline hatte also sechs Stufenfarben in der Datei und
|
|
genau eine auf dem Bildschirm.
|
|
|
|
DAS HAUS HAT DIESE LEHRE SCHON EINMAL GEZOGEN. In aufgaben.css steht
|
|
seit dem Aufgabenbrett wörtlich: „--ton mitgesetzt: Das Licht unter
|
|
dem Zeiger nimmt seine Farbe von dort. Ohne diese Zeile leuchtete die
|
|
gruene Erledigt-Spalte orange (der Farbton der SEITE), was aussah wie
|
|
ein Fehler und einer war." Dort steht es an fünf Spalten -- hierher
|
|
übertragen hat es nie jemand.
|
|
|
|
Die Töne bleiben dieselben wie bisher: kühl bei „neu entdeckt", warm
|
|
und grün bei „übergeben", stumpf bei „abgelehnt". Gedeckt, nicht
|
|
neon -- augenschonend ist Vorgabe, nicht Geschmack. */
|
|
.stufe[data-stufe="neu"] { --stufe-farbe: #4c7fa8; --ton: #4c7fa8; }
|
|
.stufe[data-stufe="angesprochen"] { --stufe-farbe: #5b8fd4; --ton: #5b8fd4; }
|
|
.stufe[data-stufe="gespraech"] { --stufe-farbe: #7d84e0; --ton: #7d84e0; }
|
|
.stufe[data-stufe="interessiert"] { --stufe-farbe: #8ab8a0; --ton: #8ab8a0; }
|
|
.stufe[data-stufe="uebergeben"] { --stufe-farbe: #79d1a2; --ton: #79d1a2; }
|
|
.stufe[data-stufe="abgelehnt"] { --stufe-farbe: #55606f; --ton: #55606f; }
|
|
.stufe[data-stufe="abgelehnt"] .kk { opacity: .62; }
|
|
.stufe[data-stufe="abgelehnt"] .kk:hover { opacity: 1; }
|
|
|
|
/* ---------- Karte --------------------------------------------------------- */
|
|
|
|
/* ===== DIE KARTE (neu gefasst am 06.10.2026) =========================
|
|
|
|
WAS HIER VORHER STAND UND NICHTS TAT -- drei Dinge, alle gemessen:
|
|
|
|
`border: 1px solid var(--rand)` module.css setzt `border: 0`
|
|
`.kk::before` (3 px Farbkante) module.css belegt ::before mit
|
|
dem Kantenlicht (gemessen: 560 px
|
|
breit statt 3)
|
|
`.kk:hover { border-color }` dasselbe
|
|
|
|
Keine davon war falsch geschrieben -- sie kamen nur nicht mehr an,
|
|
seit es den Baukasten gibt. module.css sagt es im eigenen Text:
|
|
„`.kk:hover` in scouting.css ... setzt border-color -- und die
|
|
Grundregel oben setzt `border: 0`, gleich stark und spaeter im
|
|
Ladeweg. Diese vier Regeln tun also vermutlich nichts." Und daneben:
|
|
„NICHT MITREPARIERT, weil es kein Messgeraet dafuer gibt ... Hover
|
|
laesst sich nicht pruefen."
|
|
|
|
DAS MESSGERAET GIBT ES JETZT: pruef-scouting-felder faehrt mit der
|
|
Maus auf eine Karte und liest nach, was sich wirklich aendert.
|
|
|
|
WARUM `background` UND NICHT WIEDER EIN PSEUDOELEMENT: ::before und
|
|
::after gehoeren beide dem Baukasten (Kantenlicht, Raster,
|
|
Eckwinkel). Ein Hintergrund mit mehreren Ebenen braucht keines von
|
|
beiden -- und er wird vom `clip-path` der Fase sauber beschnitten,
|
|
die Kante folgt also der Schraege statt sie zu durchstossen. */
|
|
.kk {
|
|
position: relative;
|
|
/* Links mehr: Dort laeuft jetzt die 6px-Stufenkante, und Text, der
|
|
direkt daran klebt, laesst sie wie einen Fehler aussehen. */
|
|
padding: 17px 20px 17px 26px;
|
|
/* Wie breit die Farbkante ist. Als Wert, weil sie beim Zeigen
|
|
waechst -- zwei Zahlen an zwei Stellen waeren zwei Zahlen.
|
|
|
|
6px UND NICHT 3px (nachgemessen am 06.10.2026): Das Kantenlicht des
|
|
Baukastens liegt mit 1,6px DARUEBER (::before, z-index 2) und
|
|
verdeckt genau so viel von links. Von drei Pixeln blieben gut
|
|
eineinhalb uebrig -- in der Nahaufnahme nicht mehr als Kante zu
|
|
erkennen. Von sechs bleiben viereinhalb, und die sieht man. */
|
|
--kante: 6px;
|
|
background:
|
|
/* 1. Die Stufenkante links. Oben hell, nach unten auslaufend:
|
|
eine durchgezogene Kante wirkt wie eine Trennwand, eine
|
|
auslaufende wie eine Markierung (dieselbe Ueberlegung wie
|
|
beim Streifen der Aufgabenspalten). */
|
|
linear-gradient(180deg,
|
|
color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 92%, #ffffff) 0%,
|
|
color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 70%, transparent) 45%,
|
|
color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 14%, transparent) 100%)
|
|
left top / var(--kante) 100% no-repeat,
|
|
/* 2. Ein Hauch der Stufenfarbe in der Ecke, aus der die Kante
|
|
kommt. 11 % -- man soll es spueren, nicht lesen. */
|
|
radial-gradient(135% 115% at 0% 0%,
|
|
color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 11%, transparent) 0%,
|
|
transparent 62%),
|
|
var(--flaeche);
|
|
transition: background-size var(--tempo, .18s) ease, opacity .18s ease;
|
|
}
|
|
/* Beim Zeigen wird die Kante breiter. Den Rest (Anheben, farbiges
|
|
Licht) macht der Baukasten schon -- und seit `--ton` je Stufe steht,
|
|
leuchtet er in der Farbe DIESER Stufe statt im Rot der Seite. */
|
|
.stufe .kk:hover { --kante: 9px; }
|
|
|
|
/* ---- Follow-up ueberfaellig ----------------------------------------
|
|
Ein Saum im gedaempften Warnton, genau wie ihn module.css fuer
|
|
`.kachel[data-warn]` fuehrt -- inklusive des Faseschattens, der in
|
|
derselben Liste stehen MUSS: `box-shadow` ist eine Liste und keine
|
|
Ergaenzung, wer ihn weglaesst nimmt der Karte ihre Fase.
|
|
|
|
SPEZIFITAET IST HIER KEIN DETAIL: Die Modulliste in module.css ist
|
|
(0,2,0) und wird SPAETER geladen. `.kk[data-faellig="ja"]` waere
|
|
gleich stark und verloere deshalb -- genau der Unfall, der die alte
|
|
Regel unsichtbar gemacht hat. `.stufe .kk[...]` ist (0,3,0) und
|
|
gewinnt. Beim Zeigen nimmt der Baukasten den Schatten ganz weg und
|
|
arbeitet mit `filter`; der Saum muss dort also eigens wiederkommen,
|
|
sonst verschwaende die Warnung in dem Moment, in dem jemand
|
|
hinsieht. */
|
|
.stufe .kk[data-faellig="ja"] {
|
|
box-shadow:
|
|
inset 0 0 0 1.5px rgba(240, 196, 138, .42),
|
|
inset 7px 7px 14px -10px rgba(0, 0, 0, .95);
|
|
}
|
|
.stufe .kk[data-faellig="ja"]:hover {
|
|
box-shadow: inset 0 0 0 1.5px rgba(240, 196, 138, .66);
|
|
}
|
|
@media (prefers-contrast: more) {
|
|
.stufe .kk[data-faellig="ja"] { box-shadow: inset 0 0 0 2px #f0c48a; }
|
|
}
|
|
|
|
.kk__kopf { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
|
|
/* DER NAME IST DIE UEBERSCHRIFT DER KARTE und sah aus wie Fliesstext
|
|
(06.10.2026): 1,02rem bei Gewicht 650, keinen halben Schritt ueber
|
|
dem, was darunter steht. Jetzt deutlich darueber -- in einer Spalte
|
|
mit zwoelf Karten sucht das Auge zuerst den Namen. */
|
|
.kk__name {
|
|
margin: 0; font-size: 1.12rem; font-weight: 700;
|
|
line-height: 1.25; letter-spacing: -.006em;
|
|
}
|
|
.kk__unter {
|
|
margin: 6px 0 0;
|
|
display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
|
|
font-size: .8rem; color: var(--text-still);
|
|
}
|
|
/* Die Plattform ist eine EINORDNUNG -- davon gibt es eine Handvoll, und
|
|
man vergleicht sie. Deshalb ein Schild in der Farbe der Stufe. */
|
|
.kk__plattform {
|
|
padding: 1px 8px; border-radius: 999px;
|
|
/* .74rem = 11,8px. Unter 11,5px gilt Text im Grosscheck als zu klein;
|
|
.72rem laegen bei 11,52 und damit auf dem Zehntel genau an der
|
|
Schwelle -- eine Zahl, die bei der naechsten Schriftaenderung
|
|
kippt. */
|
|
font-size: .74rem; font-weight: 700;
|
|
letter-spacing: .06em; text-transform: uppercase;
|
|
color: color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 42%, #ffffff);
|
|
background: color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 13%, transparent);
|
|
border: 1px solid color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 30%, transparent);
|
|
}
|
|
/* Das Handle ist eine KENNUNG -- einmalig, und man liest sie Zeichen
|
|
fuer Zeichen. In gleichbreiter Schrift verwechselt man l und 1 nicht,
|
|
und genau darum geht es bei einem @namen, den jemand abtippt. */
|
|
.kk__handle {
|
|
font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
|
|
font-size: .8rem; letter-spacing: -.01em;
|
|
color: var(--text-leise);
|
|
}
|
|
|
|
.kk__marken { display: flex; gap: 6px; flex-wrap: wrap; }
|
|
.marke-punkt, .marke-still, .marke-fertig {
|
|
padding: 3px 9px; border-radius: 999px;
|
|
font-size: .71rem; font-weight: 600; letter-spacing: .02em;
|
|
border: 1px solid var(--rand); color: var(--text-still);
|
|
}
|
|
.marke-punkt[data-prio="hoch"] {
|
|
color: #ffb4b9; border-color: rgba(255, 154, 162, .38); background: rgba(255, 154, 162, .1);
|
|
}
|
|
.marke-punkt[data-prio="mittel"] { color: var(--text-leise); }
|
|
.marke-fertig {
|
|
color: #79d1a2; border-color: rgba(121, 209, 162, .35); background: rgba(121, 209, 162, .09);
|
|
}
|
|
|
|
/* EINE HAARLINIE ZWISCHEN KOPF UND ZAHLEN (06.10.2026).
|
|
Oben steht, WER es ist, darunter, ob es sich lohnt. Das sind zwei
|
|
Fragen, und ohne eine Trennung liest sich die Karte als ein Block
|
|
aus sieben gleich grossen Schnipseln. Die Linie traegt die
|
|
Stufenfarbe und laeuft nach rechts aus -- dieselbe Sprache wie der
|
|
Strich unter der Stufenueberschrift. */
|
|
.kk__info {
|
|
display: flex; flex-wrap: wrap; align-items: center;
|
|
gap: 7px 14px;
|
|
margin-top: 13px; padding-top: 12px;
|
|
font-size: .78rem;
|
|
border-top: 1px solid transparent;
|
|
/* `color-mix(in srgb, var(--rand))` stand hier beim ersten Anlauf --
|
|
color-mix braucht ZWEI Farben. Ein ungueltiger Farbwert macht den
|
|
ganzen Verlauf ungueltig, die Erklaerung faellt weg, und uebrig
|
|
bleibt `1px solid transparent`: Abstand ohne Linie. Im Bild war
|
|
nichts zu sehen, im Quelltext sah alles richtig aus. */
|
|
border-image: linear-gradient(90deg,
|
|
color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 34%, transparent) 0%,
|
|
color-mix(in srgb, var(--stufe-farbe, var(--akzent)) 14%, transparent) 45%,
|
|
transparent 92%) 1;
|
|
}
|
|
.kk__still { color: var(--text-still); }
|
|
.kk__followup { color: var(--text-leise); }
|
|
.kk__followup[data-faellig="ja"] { color: #f0c48a; font-weight: 600; }
|
|
|
|
.kk__knoepfe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 13px; }
|
|
|
|
/* Der Weiter-Schritt wiederholt sich auf jeder Karte. Als voller
|
|
Farbverlauf waere die Seite ein Streifenmuster -- er traegt deshalb
|
|
nur die Farbe seiner Stufe und wird erst beim Zeigen kraeftiger. */
|
|
|
|
/* Das Onboarding ist der einzige Schritt, der eine echte Person anlegt --
|
|
der Knopf soll sich deshalb von den anderen abheben. */
|
|
|
|
/* ---------- Aufgeklappt ---------------------------------------------------- */
|
|
|
|
.kk__detail {
|
|
margin-top: 15px; padding-top: 15px;
|
|
border-top: 1px solid var(--rand);
|
|
}
|
|
.kk__zeile { margin: 0 0 9px; font-size: .87rem; color: var(--text-leise); }
|
|
.kk__schild {
|
|
display: block; margin-bottom: 1px;
|
|
font-size: .7rem; font-weight: 700; letter-spacing: .07em;
|
|
text-transform: uppercase; color: var(--text-still);
|
|
}
|
|
.kk__notiz {
|
|
width: 100%; margin: 4px 0 14px; padding: 10px 12px;
|
|
background: rgba(255, 255, 255, .04);
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
color: var(--text); font: inherit; resize: vertical;
|
|
}
|
|
.kk__raster {
|
|
display: grid; gap: 12px; margin-bottom: 14px;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
|
|
}
|
|
.kk__raster input, .kk__raster select {
|
|
width: 100%; padding: 9px 11px;
|
|
background: rgba(255, 255, 255, .05);
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
color: var(--text); font: inherit;
|
|
}
|
|
.kk__notiz:focus, .kk__raster input:focus, .kk__raster select:focus {
|
|
outline: none; border-color: rgba(63, 189, 245, .65);
|
|
box-shadow: 0 0 0 3px rgba(63, 189, 245, .14);
|
|
}
|
|
|
|
|
|
/* ---------- Codefenster ---------------------------------------------------- */
|
|
|
|
.schleier {
|
|
position: fixed; inset: 0; z-index: 60;
|
|
display: grid; place-items: center; padding: 22px;
|
|
background: rgba(3, 5, 10, .78);
|
|
backdrop-filter: blur(5px);
|
|
}
|
|
.code-fenster {
|
|
width: min(440px, 100%); padding: 26px 28px;
|
|
background: #0b111b;
|
|
border: 1px solid rgba(63, 189, 245, .3);
|
|
border-radius: var(--radius);
|
|
box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .8);
|
|
}
|
|
.code-fenster__titel { margin: 3px 0 10px; font-size: 1.2rem; font-weight: 700; }
|
|
.code-fenster__text { margin: 0 0 16px; font-size: .85rem; color: var(--text-leise); }
|
|
.code-fenster__code {
|
|
margin: 0 0 20px; padding: 15px;
|
|
font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
|
|
font-size: 1.4rem; font-weight: 700; letter-spacing: .16em; text-align: center;
|
|
word-break: break-all;
|
|
background: rgba(63, 189, 245, .09);
|
|
border: 1px solid rgba(63, 189, 245, .28);
|
|
border-radius: var(--radius-klein);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.kk { transition: none; }
|
|
}
|
|
|
|
/* ---------- Die Erklaerung im leeren Zustand ---------------------------
|
|
Der leere Zustand ist der einzige Moment, in dem jemand garantiert
|
|
liest, was dort steht -- spaeter ist die Flaeche von Daten belegt.
|
|
Deshalb steht hier keine Meldung, sondern die Erklaerung, wofuer die
|
|
Pipeline ueberhaupt gut ist. Sie ist laenger als ein Hinweis und
|
|
bekommt deshalb linksbuendigen Text statt zentrierten. */
|
|
.leer-hinweis--erklaerung {
|
|
text-align: left;
|
|
max-width: 62ch;
|
|
margin: 0 auto;
|
|
padding: 30px 28px 26px;
|
|
}
|
|
.erklaerung__satz {
|
|
margin: 0 0 14px;
|
|
font-size: 1.02rem; color: var(--text); line-height: 1.55;
|
|
}
|
|
.erklaerung__warum {
|
|
margin: 0 0 20px;
|
|
font-size: .9rem; color: var(--text-leise); line-height: 1.65;
|
|
}
|
|
.erklaerung__stufen {
|
|
display: grid; gap: 10px;
|
|
margin: 0 0 20px; padding: 0; list-style: none;
|
|
counter-reset: none;
|
|
}
|
|
.erklaerung__stufe {
|
|
display: flex; align-items: flex-start; gap: 12px;
|
|
font-size: .88rem;
|
|
}
|
|
/* Die Nummer als eigener Koerper: Die fuenf Stufen sind eine REIHENFOLGE,
|
|
und die soll man sehen, ohne die Ueberschriften zu lesen. */
|
|
.erklaerung__nr {
|
|
flex: none;
|
|
display: grid; place-items: center;
|
|
width: 24px; height: 24px; border-radius: 50%;
|
|
font-size: .74rem; font-weight: 700;
|
|
color: var(--ton, var(--akzent));
|
|
border: 1px solid color-mix(in srgb, var(--ton, var(--akzent)) 40%, transparent);
|
|
background: color-mix(in srgb, var(--ton, var(--akzent)) 12%, transparent);
|
|
}
|
|
.erklaerung__stufe strong { display: block; color: var(--text); }
|
|
.erklaerung__was {
|
|
display: block; margin-top: 1px;
|
|
font-size: .83rem; color: var(--text-still); line-height: 1.5;
|
|
}
|
|
.erklaerung__fuss {
|
|
margin: 0 0 16px; padding-top: 16px;
|
|
border-top: 1px solid var(--rand);
|
|
font-size: .86rem; color: var(--text-leise); line-height: 1.6;
|
|
}
|
|
.erklaerung__los {
|
|
margin: 0;
|
|
font-size: .88rem; color: var(--ton, var(--akzent));
|
|
}
|
|
/* Der Ring des leeren Zustands passt hier nicht -- es ist ja Text da. */
|
|
.leer-hinweis--erklaerung::before { display: none; }
|
|
|
|
@media (max-width: 560px) {
|
|
.leer-hinweis--erklaerung { padding: 22px 16px 20px; }
|
|
}
|
|
|
|
/* =====================================================================
|
|
DIE STUFEN ERKLÄREN SICH SELBST (11.09.2026)
|
|
|
|
Filipe: "perfektionnier diese kategorien wie die aussehen und was man
|
|
da noch alles immer in jeder kategorie eintragen kann. weil man kan
|
|
da nichts machen."
|
|
|
|
Zwei Dinge steckten dahinter, und nur eins davon war Optik:
|
|
|
|
1. Man KONNTE etwas machen -- der ganze Editor lag hinter einem
|
|
stillen Textknopf namens "Details". Ein Wort, das Lesen
|
|
verspricht, an einer Stelle, an der man ändert. Er heißt jetzt
|
|
"Bearbeiten" und sieht auch danach aus.
|
|
2. Die Stufen hatten nur einen Namen. Was "Interessiert" von
|
|
"Gespräch" unterscheidet, stand einmal im leeren Zustand der
|
|
Seite -- also genau so lange, bis der erste Kontakt da war.
|
|
|
|
Der Ton der Stufe (--stufe-farbe) steht schon oben in dieser Datei;
|
|
er wird hier nur konsequent benutzt, statt nur die Zahl zu färben.
|
|
===================================================================== */
|
|
.stufe__text { min-width: 0; }
|
|
.stufe__was {
|
|
margin: 2px 0 0;
|
|
font-size: .8rem; line-height: 1.45;
|
|
color: var(--text-still);
|
|
/* Der Satz darf umbrechen, aber nicht die Überschrift überragen. */
|
|
max-width: 62ch;
|
|
}
|
|
/* Eine feine Kante in der Farbe der Stufe -- sie trennt die Abschnitte,
|
|
ohne dass eine durchgehende Linie die Seite zerschneidet. */
|
|
.stufe__kopf {
|
|
align-items: center;
|
|
padding-bottom: 10px;
|
|
/* AUSLAUFEND STATT DURCHGEZOGEN (06.10.2026). Eine Linie, die quer
|
|
ueber die ganze Breite laeuft, wirkt wie eine Trennwand; eine, die
|
|
nach rechts ausgeht, wie eine Markierung. Dieselbe Ueberlegung wie
|
|
beim Streifen der Aufgabenspalten, dort schon ausgeschrieben.
|
|
`border-image` statt `border-bottom`, weil ein Rand keinen Verlauf
|
|
tragen kann -- die Breite steht deshalb getrennt davor. */
|
|
border-style: solid;
|
|
border-width: 0 0 1.5px;
|
|
border-image: linear-gradient(90deg,
|
|
color-mix(in srgb, var(--stufe-farbe, var(--rand)) 75%, transparent) 0%,
|
|
color-mix(in srgb, var(--stufe-farbe, var(--rand)) 30%, transparent) 38%,
|
|
transparent 92%) 1;
|
|
}
|
|
.stufe__zahl { margin-left: auto; flex: none; }
|
|
|
|
/* ---- Die harten Zahlen auf der Karte -------------------------------
|
|
Land und Reichweite beantworten "lohnt sich das überhaupt". Sie
|
|
stehen deshalb in der Kurzinfo und nicht im aufgeklappten Teil --
|
|
wer sie erst nach einem Klick sieht, sortiert nicht danach. */
|
|
.kk__fakt {
|
|
display: inline-flex; align-items: center;
|
|
padding: 2px 9px;
|
|
border: 1px solid var(--rand-hell); border-radius: 999px;
|
|
font-size: .76rem; font-weight: 600;
|
|
color: var(--text-leise);
|
|
white-space: nowrap;
|
|
}
|
|
/* DIE REICHWEITE IST DIE ZAHL, NACH DER SORTIERT WIRD -- sie darf
|
|
etwas lauter sein als „Deutschland" daneben. Gleichbreite Ziffern,
|
|
damit 12k und 184k untereinander vergleichbar stehen. */
|
|
.kk__fakt[data-art="follower"] {
|
|
font-variant-numeric: tabular-nums;
|
|
font-size: .8rem; font-weight: 700;
|
|
padding: 3px 11px;
|
|
border-color: color-mix(in srgb, var(--akzent) 40%, transparent);
|
|
background: color-mix(in srgb, var(--akzent) 10%, transparent);
|
|
color: color-mix(in srgb, var(--akzent) 55%, #ffffff);
|
|
}
|
|
|
|
/* ---- „Schon im Netzwerk" ------------------------------------------
|
|
Die teuerste Angabe der ganzen Pipeline: Wer unter Vertrag steht,
|
|
kann nicht übernommen werden. Sie trägt deshalb die Warnfarbe des
|
|
Hauses -- nicht als Alarm, sondern als Stoppschild. */
|
|
.marke-punkt[data-warn="ja"] {
|
|
border-color: color-mix(in srgb, var(--k-warn, #e0736b) 55%, transparent);
|
|
background: color-mix(in srgb, var(--k-warn, #e0736b) 16%, transparent);
|
|
color: color-mix(in srgb, var(--k-warn, #e0736b) 42%, #ffffff);
|
|
}
|
|
|
|
/* ---- Der Knopf, der nicht gefunden wurde --------------------------
|
|
Er sah aus wie ein Nebensatz und war die einzige Tür zum Editor.
|
|
Jetzt hat er eine Kante -- er bleibt zurückhaltend gegenüber
|
|
„Weiter zu …", ist aber als Knopf zu erkennen. */
|
|
.knopf-still--bearbeiten {
|
|
border: 1px solid var(--rand-hell);
|
|
border-radius: 10px;
|
|
padding: 5px 12px;
|
|
}
|
|
.knopf-still--bearbeiten:hover { border-color: var(--akzent); color: var(--text); }
|
|
.knopf-still--bearbeiten[aria-expanded="true"] {
|
|
border-color: color-mix(in srgb, var(--akzent) 55%, transparent);
|
|
background: color-mix(in srgb, var(--akzent) 12%, transparent);
|
|
}
|
|
|
|
@media (forced-colors: active) {
|
|
.kk__fakt, .knopf-still--bearbeiten { border: 1px solid CanvasText; }
|
|
.marke-punkt[data-warn="ja"] { border: 2px solid CanvasText; }
|
|
}
|
|
|
|
/* =====================================================================
|
|
LINKS NORMAL, RECHTS PREMIUM (06.10.2026)
|
|
|
|
Filipe: "ich will dass es da in der mitte eine trennung gibt. links
|
|
sollen normale creator sein und rechts premium creator. es gibt bei
|
|
tiktok nämlich diese zwei optionen von streamer."
|
|
|
|
DIE SCHWELLE WIRD AM STUFENKASTEN GEMESSEN, NICHT AM FENSTER
|
|
(@container statt @media). Das ist der Unterschied, der am 06.09.2026
|
|
im Creator Workspace zwei Fehler gekostet hat: Eine Zahl, die das
|
|
FENSTER misst, weiß nichts von Rändern, Seitenleisten oder davon,
|
|
dass der Inhalt bei 1240px aufhört. Der Kasten misst sich selbst --
|
|
er bricht genau dann um, wenn ER zu schmal wird, und bleibt richtig,
|
|
auch wenn sich an der Seite drumherum etwas ändert.
|
|
|
|
DIE 680 STEHT GENAU EINMAL und sie zählt etwas Bestimmtes:
|
|
zwei Kartenspalten von je 320px (schmaler wird eine Karte mit ihren
|
|
zwei Knöpfen unbedienbar) plus 40px Trennabstand. Wer die Karte
|
|
breiter macht, ändert sie hier -- und nirgendwo sonst.
|
|
|
|
WARUM DIE KLASSEN „art-spalte" HEISSEN UND NICHT „spalte":
|
|
`aufgaben.css` besitzt `.spalte`, `.spalte__kopf`, `.spalte__zahl` und
|
|
`.spalte__leer` -- das Aufgabenbrett. Und `scouting.html` lädt
|
|
`aufgaben.css` VOR dieser Datei. Der erste Entwurf hieß hier
|
|
`.spalte__zahl`, und prompt zog `margin-left: auto` aus dem
|
|
Aufgabenbrett die Zahl ans rechte Ende der Spalte, 560 px von ihrem
|
|
Wort entfernt. Keine Prüfung wurde dabei rot: Die Klasse war ja da,
|
|
sie gehörte nur jemand anderem. Gesehen habe ich es erst im
|
|
Bildschirmfoto -- deshalb misst `pruef-scouting-felder` jetzt den
|
|
Abstand zwischen Wort und Zahl.
|
|
===================================================================== */
|
|
|
|
.stufe { container-type: inline-size; }
|
|
|
|
/* Untereinander ist der Grundzustand, nicht der Notfall: So sieht es
|
|
auf dem Handy aus, und dort wird diese Seite am häufigsten benutzt. */
|
|
.stufe__arten { display: grid; gap: 22px; }
|
|
|
|
.art-spalte__kopf {
|
|
display: flex; align-items: center; gap: 8px;
|
|
margin-bottom: 9px;
|
|
}
|
|
.art-spalte__titel {
|
|
margin: 0;
|
|
/* .76rem = 12,2px. Unter 11,5px gilt Text im Großcheck als zu klein
|
|
zum Lesen -- und das ist er auch. */
|
|
font-size: .76rem; font-weight: 700;
|
|
letter-spacing: .09em; text-transform: uppercase;
|
|
color: var(--text-still);
|
|
}
|
|
.art-spalte__zahl {
|
|
min-width: 20px; padding: 1px 7px; text-align: center;
|
|
font-size: .72rem; font-weight: 700; color: var(--text-still);
|
|
background: rgba(255, 255, 255, .06);
|
|
border-radius: 999px;
|
|
}
|
|
/* Premium trägt das Gold des Hauses (--k-gold). Kein neuer Farbwert:
|
|
Das Haus hat einen Ton für "das hier ist etwas Besonderes", und zwei
|
|
verschiedene Goldtöne nebeneinander wären nur zwei. */
|
|
.art-spalte[data-art="premium"] .art-spalte__titel { color: var(--k-gold); }
|
|
.art-spalte[data-art="premium"] .art-spalte__zahl {
|
|
color: var(--k-gold);
|
|
background: color-mix(in srgb, var(--k-gold) 13%, transparent);
|
|
}
|
|
|
|
/* Eine leere Spalte verschwindet NICHT. Sonst hätte eine Stufe mal eine
|
|
und mal zwei Spalten, und man wüsste nicht, ob dort niemand steht
|
|
oder ob die Trennung an dieser Stelle nicht gilt. */
|
|
.art-spalte__leer {
|
|
margin: 0; padding: 12px 2px;
|
|
font-size: .82rem; color: var(--text-still);
|
|
}
|
|
|
|
@container (min-width: 680px) {
|
|
.stufe__arten {
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 0;
|
|
}
|
|
/* DIE TRENNUNG IN DER MITTE. Eine Linie am linken Rand der rechten
|
|
Spalte -- sie läuft dadurch genau so weit, wie die längere der
|
|
beiden Spalten reicht, und hört von selbst auf. Ein eigenes Element
|
|
dafür müsste in der Höhe nachgeführt werden und wäre bei jeder
|
|
aufgeklappten Karte zu kurz. */
|
|
.art-spalte[data-art="normal"] { padding-right: 20px; }
|
|
.art-spalte[data-art="premium"] {
|
|
padding-left: 20px;
|
|
/* --rand-hell (0,30) statt --rand (0,16). Im Bildschirmfoto vom
|
|
06.10.2026 verschwand die dünnere Linie über dem Hintergrundbild
|
|
fast ganz -- und genau sie war das Gewünschte. 0,30 bleibt eine
|
|
ruhige Linie und kein Strich. */
|
|
border-left: 1px solid var(--rand-hell);
|
|
}
|
|
}
|
|
|
|
/* ---- Die Marke auf der Karte ---------------------------------------
|
|
Nur Premium bekommt eine. "Normal" auf jeder zweiten Karte wäre ein
|
|
Wort, das nie etwas Neues sagt -- dieselbe Regel wie bei "Schon im
|
|
Netzwerk", wo "frei" ebenfalls stumm bleibt. */
|
|
.marke-punkt[data-art="premium"] {
|
|
color: var(--k-gold);
|
|
border-color: color-mix(in srgb, var(--k-gold) 42%, transparent);
|
|
background: color-mix(in srgb, var(--k-gold) 12%, transparent);
|
|
}
|
|
|
|
@media (forced-colors: active) {
|
|
.art-spalte[data-art="premium"] { border-left: 1px solid CanvasText; }
|
|
.marke-punkt[data-art="premium"] { border: 2px solid CanvasText; }
|
|
}
|