Files
dogfather-universe/workspace/assets/css/entwicklung.css
T
DogFatherGitandClaude Opus 5 dfd951861a Entwicklung & Nachwuchs: zwei Kataloge zum Anklicken statt zwei leerer Formulare
Filipe: "ich will dass diese zwei kategorien perfektionniert werden, ich
will dass fertige aufgaben da stehen und so ... so dass dogfather und
rechte hand es so einfach wie möglich haben aber so professionell wie
auch nur möglich."

Bis heute waren beide Kacheln ein leeres Formular: Titel tippen, Art
wählen, Text schreiben. Ein leeres Feld beantwortet keine Frage — es
stellt sie noch einmal.

ENTWICKLUNG: 34 Beobachtungen in fünf Blöcken, vier Antworten je Zeile
(Läuft · Wächst gerade · Da hakt es · Kann ich nicht sagen). Es sind
BEOBACHTUNGEN, keine Eigenschaften — "Absagen kommen rechtzeitig" statt
"ist zuverlässig". Eine Eigenschaft kann man nur bestätigen oder
bestreiten; ein Verhalten kann man gesehen haben oder nicht.

TALENTE: 21 Merkmale in fünf Gruppen, 6 Warnzeichen getrennt geführt,
fünf Trichterstufen mit je GENAU EINEM nächsten Schritt. Eine Liste
wächst und wird nie wieder angesehen; ein Trichter fragt bei jeder Karte
"und jetzt?". Die Standzeit steht dabei — "seit 41 Tagen beobachtet"
ist eine Auskunft über uns, nicht über den Kandidaten.

VIER RIEGEL, JEDER MIT GEGENPROBE:
 · Block 5 ("Wie geht es dir damit?") gehört der Person — lesend UND
   schreibend, auch vor DogFather. Er kommt gar nicht erst aus dem
   Server; Schreiben gibt dasselbe 404 wie ein erfundener Schlüssel.
   Nach außen dringt eine Ampel OHNE Namen, und die schweigt, solange
   das Team so klein ist, dass "jemandem geht es zu viel" dasselbe wäre
   wie ein Name.
 · Der Stand des anderen kommt erst nach dem eigenen Klick — sonst
   klickt man dasselbe. Sichtbar ist nur, DASS es einen gibt: sonst
   sähen "noch niemand" und "du darfst es nicht sehen" gleich aus.
 · "Da hakt es" ohne Anlass wird abgelehnt. "Läuft" nicht — 28
   Pflichtfelder je Person wären das Gegenteil von "so einfach wie
   möglich".
 · Talente gehört DogFather und der rechten Hand. Ein Modi bekommt 404
   auf Seite UND Schnittstelle.

WAS NICHT GEBAUT IST, UND WARUM: keine Punktzahl, kein Durchschnitt,
keine Rangliste, keine Gesamtnote. Eine Zahl über einem Menschen wird
gelesen, verglichen und weitererzählt. Und kein Rot — "da hakt es" ist
eine Beobachtung, kein Alarm.

DER PLAN LAG AN EINER STELLE FALSCH, gemessen statt vermutet: Er sagte
"keine neue Tabelle, der Stand liegt in punkt_stand". Dort ist der
Schlüssel (bereich, schluessel, creator_id) — genau EIN Stand je Punkt
und Person. Zwei unabhängige Augenpaare passen da nicht hinein, ohne
eine lebende Tabelle neu zu bauen. Also eine eigene.

EIN RÜCKSCHLAG, DEN NUR DIE PRÜFUNG GEFUNDEN HAT: Die Liste der
Bretter, die ein Modi oder die rechte Hand öffnen darf, wird aus den
KACHELZIELEN abgeleitet. Als die Kacheln auf die neuen Seiten zeigten,
fielen beide Bretter heraus — und die Seite verlinkte auf ein 404. Kein
Fehler im Riegel, sondern in seiner Quelle.

Dazu zwei kleinere Funde vom Hinsehen statt vom Messen: Die Ampel sagte
"Solange ihr zu 1 seid" (jetzt drei Sätze für drei Lagen), und die
Fußzeile der Talente-Seite lag auf der Bühne — die Kontrastprüfung hatte
sie übersprungen, weil ein Link darin steht. Beide behoben, und die
Prüfung hat den stillen Aussetzer gleich mit verloren.

Geprüft: rollen 314 · start-ansicht 147 · crew-adresse 132 · neue-seiten
70 · nachwuchs 69 · entwicklung 40 · css-klassen 30 · zwischenspeicher
21 · alle-wege 19 · rechtetafel 19 — alles grün.

Was noch fehlt, steht in der Notiz, Abschnitt 9: die eigene Karte für
die Person, der Übergang "Probe" → Zugang, der Vorlagentext zum
Ansprechen.

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-09-11 22:20:09 +02:00

366 lines
15 KiB
CSS

/* =====================================================================
Entwicklung & Nachwuchs — die zwei Katalogseiten (11.09.2026)
Zwei Seiten, ein Stil: Auf beiden klickt man kurze Aussagen an,
beide zeigen daneben eine Zahl, die etwas über UNS sagt (wie alt die
Einschätzung ist, wie lange eine Karte liegt).
---------------------------------------------------------------------
DIE WICHTIGSTE ENTSCHEIDUNG IST EINE FARBE, DIE NICHT VORKOMMT
Es gibt hier kein Rot. „Da hakt es" ist eine Beobachtung, kein Alarm;
ein Warnzeichen an einem Kandidaten ist ein Grund hinzusehen, kein
Nein. Rot würde in beiden Fällen mehr sagen als die Sache — und aus
einem Gesprächsanlass ein Urteil machen.
Stattdessen: warm (Bernstein) für „hakt" und für Warnzeichen, kühl
für „läuft", babyblau für „wächst", grau für „kann ich nicht sagen".
Vier unterscheidbare Töne, keiner davon laut. Das ist auch die
Hausregel — augenschonend, gedeckt, dunkles Schema.
---------------------------------------------------------------------
UND EINE, DIE MAN NICHT SIEHT: ES GIBT KEINEN BALKEN
Kein Fortschrittsbalken je Person, kein Prozentwert, keine Punktzahl.
Eine Zahl über einem Menschen wird gelesen, verglichen und
weitererzählt. Was hier gebraucht wird, ist ein Gesprächsanlass.
===================================================================== */
/* ---------------------------------------------------------------------
Gemeinsam
------------------------------------------------------------------- */
.e-abschnitt {
margin: 26px 0 12px;
font-size: .82rem;
font-weight: 650;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--text-still);
}
/* ---------------------------------------------------------------------
Die Ampel
Sie steht ganz oben und ist absichtlich die einzige Fläche auf der
Seite, die eine Farbe trägt. Unter 34 Beobachtungen hätte sie
niemand je gelesen.
------------------------------------------------------------------- */
.e-ampel {
margin: 0 0 22px;
padding: 14px 18px;
border: 1px solid var(--rand);
border-left: 3px solid var(--rand-hell);
background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
}
.e-ampel[data-lage="jemand"] { border-left-color: #cc9451; }
.e-ampel[data-lage="mehrere"] { border-left-color: #cc7a51; }
.e-ampel[data-lage="ruhig"] { border-left-color: #668e6e; }
.e-ampel__satz { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--text); }
.e-ampel__zusatz {
margin: 7px 0 0; font-size: .8rem; line-height: 1.55; color: var(--text-still);
}
/* ---------------------------------------------------------------------
Die Personenreihe
------------------------------------------------------------------- */
.e-personen { display: flex; flex-wrap: wrap; gap: 10px; }
.e-person {
display: flex; flex-direction: column; gap: 3px;
min-width: 210px; flex: 1 1 210px;
padding: 13px 15px; text-align: left; cursor: pointer;
font: inherit;
background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
border: 1px solid var(--rand);
transition: border-color .16s ease;
}
.e-person:hover, .e-person:focus-visible {
border-color: color-mix(in srgb, var(--akzent) 45%, transparent);
}
.e-person__name { font-size: .98rem; font-weight: 640; color: var(--text); }
.e-person__rolle { font-size: .78rem; color: var(--text-still); }
.e-person__zahlen { display: flex; flex-wrap: wrap; gap: 5px 10px; margin-top: 6px; }
.e-person__zahl { font-size: .77rem; color: var(--text-leise); }
/* Die Abweichung ist das Ergebnis dieser Seite — sie darf als Einzige
auffallen. */
.e-person__zahl--wichtig { color: var(--text); font-weight: 620; }
.e-person__zahl--alt { color: var(--text-still); }
/* ---------------------------------------------------------------------
Die Karte
------------------------------------------------------------------- */
.e-karte { margin: 26px 0 0; }
.e-karte__kopf {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
padding-bottom: 10px; margin-bottom: 16px;
border-bottom: 1px solid var(--rand-hell);
}
.e-karte__name { margin: 0; font-size: 1.22rem; font-weight: 660; color: var(--text); }
.e-karte__rolle { font-size: .82rem; color: var(--text-still); }
.e-karte__stand { font-size: .8rem; color: var(--text-leise); margin-left: auto; }
.e-karte__brett { text-decoration: none; }
/* Die Abweichungen. Sie stehen oben und bekommen als Einzige einen
Rahmen, der auffällt — sie sind der Grund, warum zwei Leute getrennt
klicken. */
.e-abweichung {
margin: 0 0 22px; padding: 15px 18px;
border: 1px solid color-mix(in srgb, var(--akzent) 32%, transparent);
background: color-mix(in srgb, var(--akzent) 7%, var(--tinte));
}
.e-abweichung__titel { margin: 0 0 5px; font-size: 1rem; font-weight: 650; color: var(--text); }
.e-abweichung__satz { margin: 0 0 10px; font-size: .85rem; color: var(--text-leise); }
.e-abweichung__liste { margin: 0; padding-left: 1.1em; }
.e-abweichung__liste li { margin-bottom: 6px; }
.e-abweichung__punkt { display: block; font-size: .88rem; color: var(--text); }
.e-abweichung__gegen { display: block; font-size: .8rem; color: var(--text-leise); }
/* ---------------------------------------------------------------------
Ein Block und seine Punkte
------------------------------------------------------------------- */
.e-block { margin: 0 0 26px; }
.e-block__titel { margin: 0 0 4px; font-size: 1.02rem; font-weight: 650; color: var(--text); }
.e-block__satz {
margin: 0 0 12px; max-width: 64ch;
font-size: .85rem; line-height: 1.6; color: var(--text-leise);
}
.e-punkt {
margin: 0 0 9px; padding: 12px 15px;
background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
border: 1px solid var(--rand);
/* Der linke Balken trägt die Antwort. Er ist die einzige Stelle, an
der man beim Überfliegen sieht, wie eine Zeile steht — ohne dass
die ganze Karte einfärbt. */
border-left: 3px solid transparent;
}
.e-punkt[data-stufe="laeuft"] { border-left-color: #668e6e; }
.e-punkt[data-stufe="waechst"] { border-left-color: #8ec9ff; }
.e-punkt[data-stufe="hakt"] { border-left-color: #cc9451; }
.e-punkt[data-stufe="unklar"] { border-left-color: var(--rand-hell); }
/* Verblasst: die Zeile tritt zurück, verschwindet aber nicht. Eine
Akte, die heimlich vergisst, wäre schlimmer als eine, die alles
behält. */
.e-punkt[data-verblasst="ja"] { opacity: .68; }
.e-punkt__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px; }
.e-punkt__titel { margin: 0; font-size: .95rem; font-weight: 620; color: var(--text); }
.e-punkt__erwartung {
/* .75rem = 12 px und nicht .7rem = 11,2 px.
pruef-css-klassen zaehlt die Stellen unter 11,5 px gegen eine
Grundlinie und meldet JEDE neue -- hier war es eine. Elf Pixel in
Grossbuchstaben mit Sperrung liest man auf einem Handy nicht mehr,
man erkennt sie hoechstens wieder. Und das hier ist keine Zierde,
sondern die Angabe, ab wann etwas ueberhaupt erwartet wird. */
font-size: .75rem; letter-spacing: .04em; text-transform: uppercase;
padding: 2px 7px; border: 1px solid var(--rand-hell); border-radius: 999px;
color: var(--text-still);
}
/* Die Erwartungsstufe ist KEINE Note — deshalb drei fast gleiche Töne
und kein Ampelverlauf. Sie sagt, ab wann etwas erwartet wird, nicht
wie gut jemand ist. */
.e-punkt__erwartung[data-erwartung="senior"] { color: var(--text-leise); }
.e-punkt__text {
margin: 5px 0 10px; max-width: 66ch;
font-size: .83rem; line-height: 1.6; color: var(--text-leise);
}
.e-wahl { display: flex; flex-wrap: wrap; gap: 6px; }
.e-wahl__knopf {
display: inline-flex; align-items: center; gap: 6px;
font: inherit; font-size: .8rem; font-weight: 600;
padding: 6px 12px; border-radius: 999px; cursor: pointer;
color: var(--text-leise);
background: transparent;
border: 1px solid var(--rand-hell);
transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.e-wahl__zeichen { font-size: .9rem; line-height: 1; }
.e-wahl__knopf:hover:not(:disabled) { color: var(--text); }
.e-wahl__knopf[aria-pressed="true"] { color: var(--text); }
.e-wahl__knopf[data-stufe="laeuft"][aria-pressed="true"] {
background: color-mix(in srgb, #668e6e 22%, transparent);
border-color: color-mix(in srgb, #668e6e 55%, transparent);
}
.e-wahl__knopf[data-stufe="waechst"][aria-pressed="true"] {
background: color-mix(in srgb, #8ec9ff 18%, transparent);
border-color: color-mix(in srgb, #8ec9ff 50%, transparent);
}
.e-wahl__knopf[data-stufe="hakt"][aria-pressed="true"] {
background: color-mix(in srgb, #cc9451 20%, transparent);
border-color: color-mix(in srgb, #cc9451 55%, transparent);
}
.e-wahl__knopf[data-stufe="unklar"][aria-pressed="true"] {
background: rgba(255, 255, 255, .06);
border-color: var(--rand-hell);
}
.e-punkt__anlass {
display: block; width: 100%; margin: 9px 0 0;
font: inherit; font-size: .84rem; line-height: 1.5;
padding: 8px 10px; resize: vertical;
color: var(--text);
background: rgba(0, 0, 0, .28);
border: 1px solid var(--rand);
}
.e-punkt__anlass::placeholder { color: var(--text-still); }
.e-punkt__andere, .e-punkt__verdeckt, .e-punkt__wann {
margin: 8px 0 0; font-size: .78rem; line-height: 1.5; color: var(--text-still);
}
.e-punkt__andere { color: var(--text-leise); }
/* Der verdeckte Stand: sichtbar, dass es ihn gibt — unsichtbar, was er
ist. Ohne diese Zeile sähen „noch niemand" und „du darfst es noch
nicht sehen" gleich aus, und das erste ist eine Auskunft, das zweite
eine Täuschung. */
.e-punkt__verdeckt { font-style: italic; }
/* Die eigenen sechs Fragen. Sie stehen ganz unten und tragen als
Einzige eine eigene Umrandung — sie gehören nicht in dieselbe Liste
wie das, was über andere gesagt wird. */
.e-meins {
margin: 34px 0 0; padding: 20px 22px;
border: 1px solid color-mix(in srgb, var(--akzent) 26%, transparent);
background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
}
.e-meins__satz {
margin: 0 0 16px; max-width: 62ch;
font-size: .88rem; line-height: 1.65; color: var(--text-leise);
}
.e-punkt--meins { background: rgba(0, 0, 0, .2); }
/* ---------------------------------------------------------------------
Talente — der Trichter
------------------------------------------------------------------- */
.t-trichter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.t-stufe {
display: flex; flex-direction: column; gap: 1px;
flex: 1 1 130px; padding: 11px 14px;
background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
border: 1px solid var(--rand);
/* Der Trichter wird nach hinten leiser — nicht bunter. Fünf Farben
für fünf Stufen wären fünf Bedeutungen, die keine sind. */
border-top: 2px solid color-mix(in srgb, var(--akzent) 40%, transparent);
}
.t-stufe[data-stufe="probe"] { border-top-color: color-mix(in srgb, var(--akzent) 65%, transparent); }
.t-stufe[data-stufe="imteam"] { border-top-color: #668e6e; }
.t-stufe__zahl { font-size: 1.5rem; font-weight: 660; color: var(--text); line-height: 1.1; }
.t-stufe__name { font-size: .79rem; color: var(--text-leise); }
.t-stufe__liegt { font-size: .74rem; color: #cc9451; margin-top: 3px; }
.t-liste { display: block; }
.t-karte {
margin: 0 0 14px; padding: 16px 18px;
background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
border: 1px solid var(--rand);
border-left: 3px solid transparent;
}
.t-karte[data-liegt="ja"] { border-left-color: #cc9451; }
.t-karte__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.t-karte__titel { margin: 0; font-size: 1.05rem; font-weight: 650; color: var(--text); }
.t-karte__stufe {
font-size: .74rem; letter-spacing: .05em; text-transform: uppercase;
padding: 2px 8px; border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--akzent) 40%, transparent);
color: var(--text-leise);
}
.t-karte__zeit { font-size: .78rem; color: var(--text-still); }
.t-karte__warn {
font-size: .76rem; color: #cc9451; margin-left: auto;
}
.t-karte__wo, .t-karte__text {
margin: 8px 0 0; max-width: 66ch;
font-size: .85rem; line-height: 1.6; color: var(--text-leise);
}
.t-karte__wo { color: var(--text-still); font-size: .8rem; }
.t-schritt {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
margin: 13px 0 0; padding: 11px 13px;
background: rgba(0, 0, 0, .24);
border: 1px solid var(--rand);
}
.t-schritt__satz { margin: 0; flex: 1 1 220px; font-size: .86rem; color: var(--text); }
.t-schritt__liegt { margin: 0; flex: 1 1 100%; font-size: .79rem; color: #cc9451; }
.t-karte__auf {
margin: 12px 0 0; font: inherit; font-size: .8rem;
padding: 5px 0; cursor: pointer;
background: none; border: 0; border-bottom: 1px solid var(--rand-hell);
color: var(--text-leise);
}
.t-karte__auf:hover { color: var(--text); }
.t-gruppe { margin: 16px 0 0; }
.t-gruppe__titel { margin: 0 0 3px; font-size: .9rem; font-weight: 640; color: var(--text); }
.t-gruppe__satz {
margin: 0 0 8px; max-width: 64ch;
font-size: .8rem; line-height: 1.55; color: var(--text-still);
}
.t-merkmale { display: flex; flex-wrap: wrap; gap: 6px; }
.t-merkmal {
display: inline-flex; align-items: center; gap: 7px;
font: inherit; font-size: .8rem; text-align: left;
padding: 6px 12px; border-radius: 999px; cursor: pointer;
color: var(--text-leise);
background: transparent;
border: 1px solid var(--rand-hell);
transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.t-merkmal__haken { font-size: .85rem; line-height: 1; color: var(--text-still); }
.t-merkmal:hover:not(:disabled) { color: var(--text); }
.t-merkmal[aria-pressed="true"] {
color: var(--text);
background: color-mix(in srgb, var(--akzent) 14%, transparent);
border-color: color-mix(in srgb, var(--akzent) 42%, transparent);
}
.t-merkmal[aria-pressed="true"] .t-merkmal__haken { color: var(--akzent); }
/* Warnzeichen: warm, nicht rot. Keines davon ist ein Nein. */
.t-merkmal[data-warnung="ja"][aria-pressed="true"] {
background: color-mix(in srgb, #cc9451 20%, transparent);
border-color: color-mix(in srgb, #cc9451 55%, transparent);
}
.t-merkmal[data-warnung="ja"][aria-pressed="true"] .t-merkmal__haken { color: #cc9451; }
.t-gruppe--warn .t-gruppe__titel { color: #cc9451; }
.t-leer {
padding: 22px; text-align: center;
border: 1px dashed var(--rand-hell);
color: var(--text-leise);
}
.t-leer p { margin: 0 0 12px; max-width: 54ch; margin-inline: auto; font-size: .88rem; line-height: 1.6; }
.t-leer .schritt { text-decoration: none; }
/* DIE FUSSZEILE BRAUCHT DENSELBEN GRUND WIE ALLES ANDERE.
Sie stand als einziger Text der Seite direkt auf der Bühne — dem
Spicy-Media-Motiv mit Neonlicht und Chilischoten. Lesbar war es
knapp; gemessen war es gar nicht, weil die Kontrastprüfung
Elemente mit Kindern überspringt und hier ein Link darin steht.
Das ist derselbe Befund wie am Nachmittag bei der Rechtetafel, nur
eine Ecke weiter — und der Grund, warum in diesem Haus jede Fläche
mit Text eine deckende Unterlage bekommt statt einer
halbdurchsichtigen. */
.t-fuss {
margin: 18px 0 0; padding: 11px 14px;
font-size: .8rem; line-height: 1.55; color: var(--text-still);
background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
border: 1px solid var(--rand);
}
.t-fuss a { color: var(--text-leise); }
@media (prefers-reduced-motion: reduce) {
.e-person, .e-wahl__knopf, .t-merkmal { transition: none; }
}
@media (max-width: 620px) {
.e-karte__stand { margin-left: 0; }
.t-karte__warn { margin-left: 0; }
.e-punkt__text, .e-block__satz { font-size: .88rem; }
}