DogFatherGitandClaude Opus 5
2a3058e98e
Beim Nachsehen auf der echten Domain gefunden -- und zwar als Beispiel fuer genau das, was es zu vermeiden gilt: Mein Live-Test suchte im ausgelieferten CSS nach "columns: 2" und fand einen Treffer. Es war mein eigener Kommentar, der die entfernte Regel beschreibt. Textsuche misst kein Verhalten; das tut die Messung in pruef-befinden. Dabei fiel `#fragen > .e-feld:first-child` auf. Seit die Gruppen ihren eigenen Abschnitt haben, ist ein `.e-feld` kein direktes Kind von `#fragen` mehr -- dieselbe Ursache, die den Spaltenumbruch ausgeloest hat, nur an einer zweiten Regel. Nachgesehen: `.e-feld` wird im ganzen Haus an genau einer Stelle gebaut (befinden.js), und immer in eine `.b-gruppe`. Eine Regel, die nichts mehr trifft, faellt nicht auf -- sie hoert einfach auf zu wirken. Deshalb weg statt stehengelassen. Den Abstand macht jetzt `.b-gruppe:first-of-type` zusammen mit `.b-flaeche .e-feld`. pruef-befinden: 121 Pruefungen, 0 Fehler, Lage unveraendert (1 Flaeche, 6 von 6 Koepfen ueber ihren Fragen, 5 von 5 Uebergaengen). Co-Authored-By: Claude Opus 5 <[email protected]>
2273 lines
87 KiB
CSS
2273 lines
87 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;
|
||
/* Seit die drei Bilanz-Kaesten darin stehen, braucht die Kachel
|
||
mehr Grundbreite -- bei 210px wurde jeder Kasten einzeilig
|
||
gequetscht und die Ziffer rutschte unter ihr Wort. */
|
||
min-width: 260px; flex: 1 1 300px;
|
||
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); margin-top: 8px; }
|
||
|
||
/* ---------------------------------------------------------------------
|
||
DIE DREI ZAHLEN AUF DER KACHEL (17.09.2026)
|
||
|
||
Filipe, mit zwei Bildschirmfotos nebeneinander: „wieso ist diese seite
|
||
noch nicht im stil und perfektioniert wie die auf screen2". Der
|
||
Unterschied lag an den Zahlen: hier graue Textzeilen, drüben die
|
||
abgesetzten Kästen mit großer Ziffer.
|
||
|
||
`.bilanz-zahl` kommt aus start.css und wird hier nur gesetzt — nicht
|
||
nachgebaut. Ein zweites Aussehen für dieselbe Sache läuft auseinander,
|
||
sobald jemand eins davon anfasst.
|
||
|
||
AUTO-FIT STATT DREI SPALTEN: Auf dem Handy ist eine Kachel schmal,
|
||
am Rechner breit. `minmax` bricht genau dann um, wenn der Platz nicht
|
||
reicht — eine feste Spaltenzahl wäre wieder eine Rechnung von gestern.
|
||
------------------------------------------------------------------- */
|
||
.e-person__bilanz {
|
||
display: grid; gap: 8px; margin-top: 10px;
|
||
grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
|
||
}
|
||
/* Die Kästen sitzen in einem Knopf und dürfen ihn nicht abfangen —
|
||
sonst trifft ein Tippen auf die Zahl die Kachel nicht. */
|
||
.e-person__bilanz .bilanz-zahl { pointer-events: none; padding: 9px 11px; }
|
||
.e-person__bilanz .bilanz-zahl__n { font-size: 1.35rem; }
|
||
.e-person__bilanz .bilanz-zahl__text { font-size: .74rem; }
|
||
|
||
/* WEN HABE ICH GERADE OFFEN? Vorher sah die Kachel nach dem Klick aus
|
||
wie vorher; wer scrollte, verlor den Faden. Gedämpft hell statt
|
||
grell — die Karte darunter ist die Hauptsache, die Kachel sagt nur,
|
||
wozu sie gehört. */
|
||
.e-person[aria-pressed="true"] {
|
||
border-color: color-mix(in srgb, var(--akzent) 58%, transparent);
|
||
background:
|
||
linear-gradient(180deg, color-mix(in srgb, var(--akzent) 11%, transparent), transparent 62%),
|
||
color-mix(in srgb, var(--tinte) 90%, #ffffff 10%);
|
||
}
|
||
|
||
/* ---------------------------------------------------------------------
|
||
Die Karte
|
||
------------------------------------------------------------------- */
|
||
/* DIE KARTE BEKOMMT EINE EIGENE FLÄCHE (15.09.2026).
|
||
|
||
Bis heute hatte sie keine: Name, Rolle und der Weg zum Notizbrett
|
||
standen direkt auf der Bühne — also auf einem Foto. Im Bildschirmfoto
|
||
lag die Kopfzeile der Karte quer über dem Spicy-Media-
|
||
Schriftzug, und der Knopf darunter über einer Chilischote.
|
||
|
||
Das ist genau der Fall, für den die Kontrastmessung ihren dritten
|
||
Ausgang hat („konnte nicht nachsehen"): Über einem Foto lässt sich
|
||
Lesbarkeit nicht ausrechnen, weil das Dahinter von Bild zu Bild
|
||
wechselt. Die Antwort darauf ist keine hellere Schrift, sondern eine
|
||
deckende Fläche. */
|
||
.e-karte {
|
||
margin: 26px 0 0; padding: 18px 20px;
|
||
background: color-mix(in srgb, var(--tinte) 92%, #ffffff 8%);
|
||
border: 1px solid var(--rand);
|
||
}
|
||
.e-karte__kopf {
|
||
display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
|
||
padding-bottom: 12px; 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
|
||
------------------------------------------------------------------- */
|
||
/* =====================================================================
|
||
DIE KATEGORIEN LASSEN SICH AUF- UND ZUKLAPPEN (15.09.2026)
|
||
|
||
Filipe: „ich will auch dass man die kategorien von den fragen, also
|
||
die liste auf und zu drücken kann mit einem button."
|
||
|
||
Achtundzwanzig Punkte offen sind rund zwei Meter Seite. Man scrollt,
|
||
verliert die Stelle und macht es beim nächsten Mal gar nicht mehr.
|
||
|
||
DER KOPF MUSS ZUGEKLAPPT ETWAS SAGEN, sonst klappt man einmal auf und
|
||
danach nie wieder zu. Er trägt deshalb drei Dinge: den Namen, wie
|
||
weit die Kategorie ist (3 / 7) und ob darin etwas hakt.
|
||
===================================================================== */
|
||
.e-bloecke__leiste {
|
||
display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
|
||
margin: 0 0 14px;
|
||
}
|
||
.e-bloecke__alle {
|
||
font: inherit; font-size: .81rem; font-weight: 600;
|
||
padding: 7px 14px; border-radius: 999px; cursor: pointer;
|
||
color: var(--text-leise);
|
||
background: transparent;
|
||
border: 1px solid var(--rand-hell);
|
||
transition: background .16s ease, color .16s ease;
|
||
}
|
||
.e-bloecke__alle:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
|
||
.e-bloecke__alle:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
|
||
|
||
/* ---------------------------------------------------------------------
|
||
DIE STUFENLEITER (17.09.2026)
|
||
|
||
Filipe: „wieso ist da immer noch nicht perfektionniert wie bei den
|
||
anderen mit fortgeschritten und so."
|
||
|
||
GEDECKT UND OHNE AMPEL, aus demselben Grund, aus dem die Stufe am
|
||
einzelnen Punkt gedeckt ist (siehe .e-punkt__erwartung weiter
|
||
unten): Sie sagt, ab WANN etwas erwartet wird -- nicht, wie gut
|
||
jemand ist. Ein Farbverlauf von grün nach rot würde daraus eine
|
||
Note machen, und keine Note über einem Menschen ist der wichtigste
|
||
Einzelentscheid dieses ganzen Bereichs.
|
||
|
||
Die gewählte Stufe bekommt deshalb mehr GEWICHT, nicht mehr Farbe.
|
||
------------------------------------------------------------------- */
|
||
.e-stufen {
|
||
display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
|
||
/* Umgebrochen wird, wenn der Platz nicht reicht -- keine feste
|
||
Schwelle. Genau daran ist die Kopfleiste am 06.09.2026 zweimal
|
||
gescheitert: Eine Zahl, die zum sechsten Element nicht mehr
|
||
passte, und niemand hat sie nachgerechnet. */
|
||
margin-inline-start: auto;
|
||
}
|
||
.e-stufen__knopf {
|
||
display: inline-flex; align-items: center; gap: 7px;
|
||
font: inherit; font-size: .78rem; font-weight: 600;
|
||
padding: 6px 12px; border-radius: 999px; cursor: pointer;
|
||
color: var(--text-still);
|
||
background: transparent;
|
||
border: 1px solid var(--rand);
|
||
transition: background .16s ease, color .16s ease, border-color .16s ease;
|
||
}
|
||
.e-stufen__knopf:hover {
|
||
color: var(--text-leise);
|
||
background: rgba(255, 255, 255, .04);
|
||
border-color: var(--rand-hell);
|
||
}
|
||
.e-stufen__knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
|
||
/* Die gewählte Stufe: heller Text, kräftigerer Rand -- kein Farbwechsel. */
|
||
.e-stufen__knopf[aria-pressed="true"] {
|
||
color: var(--text);
|
||
border-color: var(--text-still);
|
||
background: rgba(255, 255, 255, .06);
|
||
}
|
||
.e-stufen__zahl {
|
||
/* .72rem = 11,5 px -- die Grenze, die pruef-css-klassen bewacht.
|
||
Darunter liest man Ziffern auf einem Handy nicht mehr, man ahnt
|
||
sie. Und diese Zahl ist der Grund, warum man überhaupt klickt:
|
||
Ein Filter, der auf eine leere Liste führt, sieht aus wie ein
|
||
Fehler. */
|
||
font-size: .72rem; font-weight: 700;
|
||
min-width: 1.6em; padding: 1px 6px;
|
||
border-radius: 999px; text-align: center;
|
||
color: var(--text-still);
|
||
background: rgba(255, 255, 255, .06);
|
||
}
|
||
.e-stufen__knopf[aria-pressed="true"] .e-stufen__zahl {
|
||
color: var(--text-leise);
|
||
background: rgba(255, 255, 255, .1);
|
||
}
|
||
|
||
/* Auf dem Handy gehört die Leiste unter den Knopf, nicht neben ihn --
|
||
sonst quetschen sich fünf Knöpfe auf 40 % der Breite. */
|
||
@media (max-width: 640px) {
|
||
.e-stufen { margin-inline-start: 0; width: 100%; }
|
||
}
|
||
|
||
.e-block {
|
||
margin: 0 0 10px;
|
||
border: 1px solid var(--rand);
|
||
background: color-mix(in srgb, var(--tinte) 96%, #ffffff 4%);
|
||
}
|
||
/* Offen bekommt der Kasten etwas mehr Gewicht -- man soll auf einen
|
||
Blick sehen, welcher gerade aufgeschlagen ist. */
|
||
.e-block[data-offen="ja"] { border-color: var(--rand-hell); }
|
||
|
||
.e-block__zeile { margin: 0; }
|
||
.e-block__schalter {
|
||
display: flex; align-items: center; gap: 11px;
|
||
width: 100%; text-align: left;
|
||
font: inherit;
|
||
padding: 13px 15px; cursor: pointer;
|
||
background: transparent; border: 0;
|
||
color: var(--text);
|
||
}
|
||
.e-block__schalter:hover { background: rgba(255, 255, 255, .04); }
|
||
.e-block__schalter:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }
|
||
|
||
.e-block__pfeil {
|
||
flex: 0 0 auto; width: 18px; height: 18px;
|
||
fill: none; stroke: var(--text-still); stroke-width: 2;
|
||
stroke-linecap: round; stroke-linejoin: round;
|
||
transition: transform .18s ease;
|
||
}
|
||
.e-block[data-offen="ja"] .e-block__pfeil { transform: rotate(90deg); stroke: var(--text-leise); }
|
||
|
||
.e-block__name {
|
||
flex: 1 1 auto; font-size: 1rem; font-weight: 650; color: var(--text);
|
||
}
|
||
/* Der Stand. Zahlen in Tabellenbreite, damit 3 / 7 und 10 / 12
|
||
untereinander nicht wackeln. */
|
||
.e-block__stand {
|
||
flex: 0 0 auto; font-size: .82rem; color: var(--text-still);
|
||
font-variant-numeric: tabular-nums;
|
||
padding: 2px 9px; border-radius: 999px; border: 1px solid var(--rand);
|
||
}
|
||
.e-block__stand[data-fertig="ja"] {
|
||
color: #7fb08a; border-color: color-mix(in srgb, #668e6e 50%, transparent);
|
||
}
|
||
/* „2 × hakt" -- die einzige Stelle im Kopf, die eine Farbe bekommt.
|
||
Sie ist auch der einzige Grund, eine zugeklappte Kategorie zu
|
||
oeffnen, ohne dass man sie durchgehen will. */
|
||
.e-block__hakt {
|
||
flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 4px;
|
||
font-size: .78rem; color: #d8a76a;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.e-block__hakt-wort { font-size: .78rem; }
|
||
/* Die Zahl steht in einem eigenen Feld, damit sie nachgezogen
|
||
werden kann, ohne den ganzen Kopf neu zu bauen -- ein neu
|
||
gebauter Kopf waere wieder eine Bewegung auf der Seite. */
|
||
.e-block__hakt-zahl { font-size: .78rem; font-variant-numeric: tabular-nums; }
|
||
|
||
.e-block__koerper { padding: 0 15px 13px; }
|
||
.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; }
|
||
|
||
/* ---------------------------------------------------------------------
|
||
KERN UND ROTATION auf der Seite „Wie geht's dir?" (19.09.2026)
|
||
|
||
Zwei neue Zustaende, und beide sagen etwas Wahres statt etwas
|
||
Huebsches:
|
||
|
||
[data-alt="ja"] Die Antwort steht noch vom letzten Mal. Sie
|
||
bleibt sichtbar -- sie ist ja nicht falsch, nur
|
||
alt -- zaehlt aber erst wieder, wenn man sie
|
||
bestaetigt. Ohne diese Kennzeichnung saehe eine
|
||
unbeantwortete Frage genauso aus wie eine
|
||
beantwortete, und genau daran ist die zweite
|
||
Runde bisher gescheitert.
|
||
|
||
.e-punkt__marke „jede Runde" an den fuenf festen Fragen. Wer
|
||
sieht, dass eine Frage immer kommt, liest sie
|
||
anders.
|
||
|
||
KEINE SIGNALFARBE fuer „alt". Auf dieser Seite bedeutet Bernstein
|
||
„da hakt es" -- wenn es daneben auch „noch nicht bestaetigt"
|
||
bedeutete, bedeutete es bald gar nichts mehr. Es wird deshalb ueber
|
||
einen gestrichelten Rand und eine ruhige Zeile gesagt, nicht ueber
|
||
Farbe.
|
||
------------------------------------------------------------------- */
|
||
.e-punkt[data-alt="ja"] { border-left-style: dashed; }
|
||
.e-punkt__alt {
|
||
margin: 8px 0 0; max-width: 62ch;
|
||
font-size: .78rem; line-height: 1.55; color: var(--text-still);
|
||
font-style: italic;
|
||
}
|
||
.e-punkt__marke {
|
||
display: inline-block; margin: 2px 0 0;
|
||
/* .72rem statt .68rem (19.09.2026): 10,88 px sind auch fuer ein
|
||
Schild zu klein -- Grossbuchstaben und Sperrung machen es nicht
|
||
lesbarer, nur breiter. .72rem ist die Groesse, die das Haus an
|
||
seinen uebrigen Marken benutzt (b-verlauf__datum). */
|
||
font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
|
||
color: var(--text-still);
|
||
border: 1px solid var(--rand); border-radius: 999px;
|
||
padding: 1px 8px;
|
||
}
|
||
|
||
.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);
|
||
transition: border-color .16s ease, background .16s ease;
|
||
}
|
||
.e-punkt__anlass::placeholder { color: var(--text-still); }
|
||
/* ES BLEIBT SICHTBAR, AUCH WENN ES NICHT GEBRAUCHT WIRD -- ein Feld,
|
||
das erst aufklappt, kostet einen zweiten Blick, und genau an der
|
||
Stelle hört man auf zu schreiben. Aber es tritt zurück. */
|
||
.e-punkt__anlass[data-noetig="nein"] {
|
||
background: rgba(0, 0, 0, .18);
|
||
border-color: color-mix(in srgb, var(--rand) 70%, transparent);
|
||
}
|
||
/* Und es meldet sich, sobald es gebraucht wird. */
|
||
.e-punkt__anlass[data-noetig="ja"] {
|
||
border-color: color-mix(in srgb, #cc9451 55%, transparent);
|
||
background: rgba(0, 0, 0, .3);
|
||
}
|
||
.e-punkt__anlass[data-noetig="ja"]::placeholder { color: #c99a62; }
|
||
|
||
.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; }
|
||
|
||
/* ---------------------------------------------------------------------
|
||
DER LEERE ZUSTAND ARBEITET (17.09.2026)
|
||
|
||
Filipe: „mach dass da fertige sachen sind, aber nicht basich sonder
|
||
hochwertig, profissionel bis zum letzten punkt verbunden."
|
||
|
||
LINKSBÜNDIG STATT ZENTRIERT, sobald etwas zu lesen da ist: Eine
|
||
zentrierte Liste liest sich schlecht -- das Auge sucht bei jeder
|
||
Zeile den Anfang neu. Zentriert war richtig, solange dort ein
|
||
einziger Satz stand; jetzt steht dort eine Aufzählung.
|
||
------------------------------------------------------------------- */
|
||
.t-leer:has(.t-leer__merkmale) {
|
||
text-align: start;
|
||
/* UND ER BRAUCHT EINEN GRUND. Gesehen im Bildschirmfoto, nicht in
|
||
einer Zahl: Der Kasten hatte nur einen gestrichelten Rand, und das
|
||
Spicy-Media-Motiv -- Chilischoten, Neonlicht, helle Stellen --
|
||
schien voll durch den Text. Lesbar war das nicht, augenschonend
|
||
erst recht nicht.
|
||
|
||
SOLANGE DORT EIN SATZ STAND, ging es. Jetzt stehen dort drei
|
||
Absätze, fünf Merkmale und zwei Knöpfe.
|
||
|
||
DIE WARNUNG STAND 70 ZEILEN WEITER UNTEN, bei .t-fuss, und sie
|
||
beschreibt exakt diesen Fehler ("Sie stand als einziger Text der
|
||
Seite direkt auf der Bühne"). Ich habe sie gelesen und bin
|
||
trotzdem hineingelaufen -- ein Kommentar, der vor einem Fehler
|
||
warnt, verhindert ihn nicht. Gefunden hat es erst das Bild.
|
||
|
||
Derselbe Wert wie bei .t-fuss, damit auf dieser Seite nicht zwei
|
||
verschiedene Grautöne nebeneinander liegen. */
|
||
padding: 20px;
|
||
background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
|
||
border-style: solid;
|
||
border-color: var(--rand);
|
||
}
|
||
.t-leer:has(.t-leer__merkmale) p { margin-inline: 0; }
|
||
|
||
.t-leer__titel {
|
||
margin: 0 0 8px;
|
||
font-size: .95rem; font-weight: 700; letter-spacing: .01em;
|
||
color: var(--text);
|
||
}
|
||
|
||
.t-leer__merkmale {
|
||
list-style: none; margin: 14px 0; padding: 0;
|
||
display: flex; flex-wrap: wrap; gap: 8px;
|
||
}
|
||
.t-leer__merkmal {
|
||
display: inline-flex; align-items: baseline; gap: 8px;
|
||
padding: 7px 13px; border-radius: 999px;
|
||
border: 1px solid var(--rand-hell);
|
||
background: rgba(255, 255, 255, .03);
|
||
}
|
||
.t-leer__merkmal-name {
|
||
font-size: .84rem; font-weight: 600; color: var(--text-leise);
|
||
}
|
||
.t-leer__merkmal-zahl {
|
||
/* .72rem = 11,5 px, die Grenze, die pruef-css-klassen bewacht.
|
||
Darunter erkennt man Ziffern nur noch wieder, statt sie zu
|
||
lesen. */
|
||
font-size: .72rem; color: var(--text-still);
|
||
}
|
||
|
||
.t-leer__weg {
|
||
/* Etwas abgesetzt: Das hier ist der Weg, nicht die Aufzählung. */
|
||
padding-top: 12px; border-top: 1px solid var(--rand);
|
||
}
|
||
|
||
.t-leer__knoepfe {
|
||
display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px;
|
||
}
|
||
/* Der zweite Weg ist der leisere -- „Im Treff umsehen" ist ein
|
||
Angebot, „Jemanden eintragen" der Schritt. Zwei gleich laute Knöpfe
|
||
nebeneinander stellen eine Frage, statt einen Weg zu zeigen. */
|
||
.schritt--leise {
|
||
color: var(--text-still);
|
||
border-color: var(--rand);
|
||
background: transparent;
|
||
}
|
||
.schritt--leise:hover { color: var(--text-leise); border-color: var(--rand-hell); }
|
||
|
||
/* 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,
|
||
.e-bloecke__alle, .e-punkt__anlass { transition: none; }
|
||
/* Der Pfeil DREHT SICH weiterhin -- er ist keine Verzierung,
|
||
sondern die Auskunft "offen oder zu". Nur der Weg dorthin
|
||
faellt weg. */
|
||
.e-block__pfeil { 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; }
|
||
}
|
||
|
||
/* =====================================================================
|
||
DER VORLAGENTEXT UND DIE EIGENE KARTE (11.09.2026)
|
||
===================================================================== */
|
||
|
||
.t-text {
|
||
margin: 14px 0 0; padding: 15px 17px;
|
||
background: rgba(0, 0, 0, .3);
|
||
border: 1px solid var(--rand-hell);
|
||
}
|
||
.t-text__titel { margin: 0 0 5px; font-size: .95rem; font-weight: 640; color: var(--text); }
|
||
.t-text__satz {
|
||
margin: 0 0 11px; max-width: 62ch;
|
||
font-size: .82rem; line-height: 1.6; color: var(--text-leise);
|
||
}
|
||
.t-text__feld {
|
||
display: block; width: 100%;
|
||
font: inherit; font-size: .86rem; line-height: 1.65;
|
||
padding: 11px 13px; resize: vertical;
|
||
color: var(--text);
|
||
background: rgba(0, 0, 0, .35);
|
||
border: 1px solid var(--rand);
|
||
}
|
||
.t-text__knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
|
||
|
||
/* Zwei, die seit dem Bau der Seite ohne eigene Regel dastanden: der
|
||
Knopf am naechsten Schritt und die Beschriftung eines Merkmals. Sie
|
||
sahen richtig aus, weil .schritt und .t-merkmal sie getragen haben --
|
||
aber wer eines davon umbaut, merkt es hier nicht. */
|
||
.t-schritt__knopf { margin-top: 2px; }
|
||
.t-schritt__text { margin-top: 2px; }
|
||
.t-merkmal__titel { text-align: left; line-height: 1.35; }
|
||
|
||
/* DIE EIGENE KARTE HAT KEINE KNOEPFE. Hier wird nichts gesetzt, hier
|
||
wird gelesen -- deshalb ein anderer Grund als auf der Karte, auf der
|
||
man klickt, und kein einziges anklickbares Feld darin. */
|
||
.e-meine {
|
||
margin: 30px 0 0; padding: 20px 22px;
|
||
border: 1px solid var(--rand);
|
||
background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
|
||
}
|
||
.e-meine__satz {
|
||
margin: 0 0 16px; max-width: 64ch;
|
||
font-size: .88rem; line-height: 1.65; color: var(--text-leise);
|
||
}
|
||
.e-punkt--meine { background: rgba(0, 0, 0, .2); }
|
||
.e-meine__antworten { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
|
||
.e-meine__antwort {
|
||
font-size: .8rem; font-weight: 600; padding: 4px 11px; border-radius: 999px;
|
||
color: var(--text-leise);
|
||
border: 1px solid var(--rand-hell);
|
||
}
|
||
.e-meine__antwort[data-stufe="laeuft"] {
|
||
color: var(--text); border-color: color-mix(in srgb, #668e6e 55%, transparent);
|
||
}
|
||
.e-meine__antwort[data-stufe="waechst"] {
|
||
color: var(--text); border-color: color-mix(in srgb, #8ec9ff 50%, transparent);
|
||
}
|
||
.e-meine__antwort[data-stufe="hakt"] {
|
||
color: var(--text); border-color: color-mix(in srgb, #cc9451 55%, transparent);
|
||
}
|
||
/* „Darüber seid ihr euch nicht einig“ ist keine Warnung, sondern eine
|
||
Einladung zu fragen – deshalb leise und ohne Farbe. */
|
||
.e-meine__uneinig { font-size: .78rem; color: var(--text-still); font-style: italic; }
|
||
|
||
/* =====================================================================
|
||
WIE GEHT'S DIR? -- die eigene Seite (15.09.2026)
|
||
===================================================================== */
|
||
|
||
/* Der Takt steht ueber den Fragen: Wer hereinkommt, soll zuerst
|
||
wissen, ob gerade etwas von ihm erwartet wird. */
|
||
.b-takt {
|
||
margin: 0 0 22px; padding: 14px 17px;
|
||
background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
|
||
border: 1px solid var(--rand);
|
||
border-left: 3px solid var(--rand-hell);
|
||
display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
|
||
}
|
||
/* Faellig heisst: es ist Zeit. Kein Alarm -- eine Einladung. */
|
||
.b-takt[data-lage="faellig"] { border-left-color: color-mix(in srgb, #8ec9ff 60%, transparent); }
|
||
.b-takt[data-lage="bereit"] { border-left-color: color-mix(in srgb, #668e6e 60%, transparent); }
|
||
.b-takt__satz {
|
||
margin: 0; flex: 1 1 24ch; max-width: 70ch;
|
||
font-size: .86rem; line-height: 1.6; color: var(--text-leise);
|
||
}
|
||
|
||
.b-verlauf { margin: 34px 0 0; }
|
||
.b-verlauf__satz {
|
||
margin: 0 0 14px; max-width: 68ch;
|
||
font-size: .85rem; line-height: 1.6; color: var(--text-leise);
|
||
}
|
||
.b-verlauf__gitter {
|
||
display: grid; gap: 4px;
|
||
padding: 14px 16px;
|
||
background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
|
||
border: 1px solid var(--rand);
|
||
overflow-x: auto;
|
||
}
|
||
.b-verlauf__zeile {
|
||
display: grid;
|
||
grid-template-columns: minmax(12ch, 1fr) repeat(auto-fit, minmax(2.4rem, 2.4rem));
|
||
align-items: center; gap: 6px;
|
||
}
|
||
.b-verlauf__frage {
|
||
font-size: .8rem; line-height: 1.35; color: var(--text-leise);
|
||
padding-right: 8px;
|
||
}
|
||
.b-verlauf__datum {
|
||
font-size: .72rem; color: var(--text-still); text-align: center;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.b-verlauf__zeile--kopf { margin-bottom: 4px; }
|
||
/* Das Zeichen sagt die Antwort, die Farbe verstaerkt sie nur -- wer
|
||
Farben schlecht sieht, liest dasselbe Zeichen. */
|
||
.b-verlauf__punkt {
|
||
display: grid; place-items: center;
|
||
width: 2.2rem; height: 1.9rem;
|
||
font-size: .9rem; font-weight: 700;
|
||
border-radius: var(--radius);
|
||
color: var(--text-still);
|
||
background: rgba(0, 0, 0, .25);
|
||
border: 1px solid var(--rand);
|
||
}
|
||
.b-verlauf__punkt[data-stufe="laeuft"] { color: #7fb08a; border-color: color-mix(in srgb, #668e6e 55%, transparent); }
|
||
.b-verlauf__punkt[data-stufe="waechst"] { color: #8ec9ff; border-color: color-mix(in srgb, #8ec9ff 45%, transparent); }
|
||
.b-verlauf__punkt[data-stufe="hakt"] { color: #d8a76a; border-color: color-mix(in srgb, #cc9451 55%, transparent); }
|
||
.b-verlauf__punkt[data-stufe="leer"] { opacity: .4; }
|
||
|
||
/* Der Verweis auf der Entwicklungsseite -- ruhig, er ist kein Angebot,
|
||
sondern ein Hinweis. */
|
||
.e-meins--verweis { margin-top: 30px; }
|
||
|
||
@media (max-width: 560px) {
|
||
.b-verlauf__zeile { grid-template-columns: minmax(9ch, 1fr) repeat(auto-fit, minmax(2rem, 2rem)); }
|
||
.b-verlauf__punkt { width: 1.9rem; }
|
||
}
|
||
|
||
/* =====================================================================
|
||
DER ÜBERGANG — Buddy und erste Schicht (15.09.2026)
|
||
|
||
Er steht unter dem nächsten Schritt und sieht anders aus als der
|
||
Rest der Karte: ein durchgehender linker Rand statt eines Kastens.
|
||
Während einer Probe ist er die Karte, nicht eine Angabe darauf.
|
||
|
||
Augenschonend heißt hier vor allem: keine zweite Signalfarbe. Das
|
||
Orange auf dieser Seite bedeutet „liegt zu lange" — wenn der
|
||
Übergang es auch benutzt, bedeutet es bald gar nichts mehr.
|
||
===================================================================== */
|
||
.t-uebergang {
|
||
margin: 11px 0 0; padding: 12px 14px;
|
||
background: color-mix(in srgb, var(--tinte) 90%, #ffffff 10%);
|
||
border: 1px solid var(--rand);
|
||
border-left: 3px solid color-mix(in srgb, #668e6e 55%, transparent);
|
||
}
|
||
/* Kein Buddy mehr: die einzige Lage, die eine Farbe verdient. */
|
||
.t-uebergang[data-weg="ja"] { border-left-color: #cc9451; }
|
||
|
||
.t-uebergang__titel {
|
||
margin: 0 0 5px; font-size: .95rem; font-weight: 640; color: var(--text);
|
||
}
|
||
.t-uebergang__zeile {
|
||
margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
|
||
}
|
||
.t-uebergang__was {
|
||
font-size: .72rem; letter-spacing: .05em; text-transform: uppercase;
|
||
color: var(--text-still);
|
||
}
|
||
.t-uebergang__wer { font-size: .9rem; font-weight: 620; color: var(--text); }
|
||
.t-uebergang[data-weg="ja"] .t-uebergang__wer { color: #d8a76a; font-weight: 500; }
|
||
|
||
.t-uebergang__satz {
|
||
margin: 7px 0 0; max-width: 66ch;
|
||
font-size: .82rem; line-height: 1.6; color: var(--text-leise);
|
||
}
|
||
.t-uebergang__hinweis {
|
||
margin: 8px 0 0; max-width: 66ch;
|
||
font-size: .8rem; line-height: 1.55; color: #d8a76a;
|
||
}
|
||
|
||
.t-uebergang__tag { margin: 6px 0 0; padding-left: 18px; }
|
||
.t-uebergang__punkt {
|
||
margin: 3px 0; max-width: 66ch;
|
||
font-size: .81rem; line-height: 1.55; color: var(--text-leise);
|
||
}
|
||
.t-uebergang__punkt strong { color: var(--text); font-weight: 620; }
|
||
|
||
/* ---- Das Fragefeld ----------------------------------------------------
|
||
Zwei Felder untereinander, nicht nebeneinander: Auf einem Handy
|
||
werden aus zwei Spalten zwei zu schmale Spalten, und ein Datumsfeld,
|
||
das nicht vollständig hineinpasst, öffnet den Gerätekalender an der
|
||
falschen Stelle. */
|
||
.t-uebergang--frage { border-left-color: color-mix(in srgb, #8ec9ff 50%, transparent); }
|
||
.t-uebergang__feld {
|
||
display: grid; gap: 4px;
|
||
margin: 10px 0 0; max-width: 34ch;
|
||
}
|
||
.t-uebergang__wahl {
|
||
font: inherit; font-size: .88rem;
|
||
padding: 8px 10px;
|
||
color: var(--text);
|
||
background: var(--tinte);
|
||
border: 1px solid var(--rand-hell);
|
||
border-radius: var(--radius);
|
||
/* Der eigene Kalenderknopf des Browsers ist auf Dunkel hell gezeichnet.
|
||
`color-scheme` sagt ihm, dass er dunkel zeichnen soll — sonst sitzt
|
||
ein weißes Kästchen im dunklen Feld. */
|
||
color-scheme: dark;
|
||
}
|
||
.t-uebergang__wahl:focus-visible {
|
||
outline: 2px solid var(--akzent); outline-offset: 1px;
|
||
}
|
||
.t-uebergang__knoepfe {
|
||
display: flex; flex-wrap: wrap; gap: 9px; margin: 13px 0 0;
|
||
}
|
||
.t-uebergang__aendern { margin: 11px 0 0; }
|
||
|
||
/* =====================================================================
|
||
AUS DER BEOBACHTUNG WIRD EIN SCHRITT (15.09.2026)
|
||
|
||
Die Zeile steht ganz unten an einem Punkt und ist absichtlich leise:
|
||
Sie ist kein zweites Ergebnis neben den vier Knöpfen, sondern das,
|
||
was aus einem von ihnen folgt. Bei einem Punkt, der läuft, ist sie
|
||
gar nicht da — leer und ohne Rand, nicht als leerer Kasten.
|
||
===================================================================== */
|
||
.e-schritt {
|
||
display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px;
|
||
margin: 9px 0 0;
|
||
}
|
||
.e-schritt:not([data-lage]) { display: none; }
|
||
.e-schritt[data-lage] {
|
||
padding: 8px 11px;
|
||
background: rgba(0, 0, 0, .22);
|
||
border: 1px solid var(--rand);
|
||
border-left: 2px solid var(--rand-hell);
|
||
}
|
||
.e-schritt[data-lage="laeuft"] { border-left-color: color-mix(in srgb, #8ec9ff 50%, transparent); }
|
||
.e-schritt[data-lage="durch"] { border-left-color: color-mix(in srgb, #668e6e 60%, transparent); }
|
||
|
||
.e-schritt__was {
|
||
font-size: .72rem; letter-spacing: .05em; text-transform: uppercase;
|
||
color: var(--text-still);
|
||
}
|
||
.e-schritt__hin { font-size: .84rem; color: var(--text); }
|
||
.e-schritt__frist, .e-schritt__satz {
|
||
font-size: .79rem; color: var(--text-leise);
|
||
}
|
||
.e-schritt__knopf { margin: 0; }
|
||
|
||
/* =====================================================================
|
||
HIER STAND "WAS DEIN VERLAUF SAGT" (15.09.2026 bis 22.09.2026)
|
||
---------------------------------------------------------------------
|
||
Zwanzig Regeln fuer den Block, der je FRAGE ein Resuemee zeigte.
|
||
Filipe: „das resume unten auf jeder frage ... muss weg ich will ein
|
||
ganzes gesamtresume."
|
||
|
||
Am 22.09. wurde das Skript dazu entfernt -- die Gestaltung blieb
|
||
stehen. Das ist nicht nur Ballast auf jeder Seite, sondern eine
|
||
Falle: Wer spaeter `.b-analyse` im CSS findet, haelt den Block fuer
|
||
lebendig und baut darauf auf. Gefunden hat es pruef-struktur
|
||
("NEUES totes CSS"), nicht der Blick.
|
||
|
||
Das Gesamtresuemee steht jetzt unter `.b-fazit` weiter unten.
|
||
===================================================================== */
|
||
|
||
/* =====================================================================
|
||
DIE PROBEZEIT (17.09.2026)
|
||
|
||
Filipe: „wie talente bewertet werden, aufgaben bekommen, analysiert
|
||
werden von vanvan und mir."
|
||
|
||
EIGENER KLASSENNAME `t-pschritt` UND NICHT `t-schritt`.
|
||
|
||
`.t-schritt` gibt es auf dieser Seite schon -- es ist die Zeile mit
|
||
dem naechsten Schritt der Trichterstufe, gestaltet 550 Zeilen weiter
|
||
oben. Meine Regeln standen SPAETER in derselben Datei und haetten
|
||
sie schlicht ueberschrieben: aus einer Zeile mit Rahmen und
|
||
Hintergrund waere eine ohne geworden.
|
||
|
||
Gefunden hat das keine Ueberlegung, sondern das Nachzaehlen im
|
||
Browser: 13 Elemente mit `.t-schritt`, obwohl der Probeplan zwoelf
|
||
hat. Die dreizehnte war die fremde.
|
||
|
||
RUHIG, OBWOHL ES EINE CHECKLISTE IST. Hier steht jemand auf dem
|
||
Pruefstand; eine Wand aus roten und gruenen Haken macht aus einer
|
||
Beobachtung ein Zeugnis. Es gibt genau EINE Farbe, und die kommt
|
||
erst, wenn man entscheiden kann.
|
||
===================================================================== */
|
||
|
||
.t-probe {
|
||
margin: 14px 0 0;
|
||
padding: 14px 16px;
|
||
border: 1px solid var(--rand);
|
||
border-radius: 12px;
|
||
/* Deckend, nicht durchsichtig -- hinter der Seite liegt ein Motiv.
|
||
`color-mix(..., transparent)` hat mich heute schon einmal
|
||
erwischt. */
|
||
background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
|
||
}
|
||
.t-probe[data-reif="ja"] { border-color: color-mix(in srgb, var(--gut) 55%, var(--rand)); }
|
||
|
||
.t-probe__kopf {
|
||
display: flex; align-items: baseline; justify-content: space-between;
|
||
gap: 10px; flex-wrap: wrap;
|
||
margin-bottom: 8px;
|
||
}
|
||
.t-probe__titel { margin: 0; font-size: .95rem; font-weight: 700; }
|
||
.t-probe__stand { font-size: .82rem; opacity: .7; }
|
||
|
||
.t-probe__reif {
|
||
margin: 0 0 12px; padding: 8px 10px;
|
||
font-size: .88rem;
|
||
border-radius: 8px;
|
||
background: color-mix(in srgb, var(--gut) 12%, transparent);
|
||
}
|
||
/* „Noch nicht entscheidbar" ist KEINE Warnung -- es ist eine Auskunft
|
||
ueber uns. Deshalb grau und nicht bernstein. */
|
||
.t-probe__offen { margin: 0 0 12px; font-size: .84rem; opacity: .7; line-height: 1.5; }
|
||
|
||
.t-phase { margin: 0 0 14px; }
|
||
.t-phase:last-of-type { margin-bottom: 0; }
|
||
.t-phase__kopf {
|
||
display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
|
||
border-top: 1px solid var(--rand);
|
||
padding-top: 10px;
|
||
}
|
||
.t-phase__titel { margin: 0; font-size: .84rem; font-weight: 700; }
|
||
.t-phase__zeit { font-size: .78rem; opacity: .6; }
|
||
.t-phase__satz { margin: 3px 0 8px; font-size: .82rem; opacity: .72; line-height: 1.5; }
|
||
|
||
.t-pschritt { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 10px; }
|
||
|
||
.t-pschritt__haken {
|
||
flex: none;
|
||
width: 26px; height: 26px; margin-top: 2px;
|
||
font: inherit; font-size: .84rem; line-height: 1;
|
||
color: inherit;
|
||
border: 1px solid var(--rand); border-radius: 7px;
|
||
background: color-mix(in srgb, var(--tinte) 88%, #ffffff 12%);
|
||
cursor: pointer;
|
||
}
|
||
.t-pschritt__haken:hover { border-color: color-mix(in srgb, var(--akzent) 60%, var(--rand)); }
|
||
.t-pschritt__haken:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
|
||
.t-pschritt[data-fertig="ja"] .t-pschritt__haken {
|
||
border-color: color-mix(in srgb, var(--gut) 60%, var(--rand));
|
||
background: color-mix(in srgb, var(--gut) 18%, transparent);
|
||
}
|
||
|
||
.t-pschritt__text { min-width: 0; }
|
||
.t-pschritt__titel {
|
||
margin: 0; font-size: .88rem; font-weight: 600;
|
||
display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
|
||
}
|
||
/* WER IHN TUT. Klein, aber da -- ohne diese Angabe wandern in jeder
|
||
Probezeit dieselben drei Schritte an niemanden. */
|
||
.t-pschritt__wer {
|
||
font-size: .72rem; font-weight: 600;
|
||
letter-spacing: .03em;
|
||
padding: 1px 7px; border-radius: 999px;
|
||
opacity: .8;
|
||
background: color-mix(in srgb, var(--rand) 45%, transparent);
|
||
}
|
||
.t-pschritt__satz { margin: 2px 0 0; font-size: .82rem; opacity: .78; line-height: 1.5; }
|
||
.t-pschritt__wofuer { margin: 2px 0 0; font-size: .78rem; opacity: .58; line-height: 1.45; }
|
||
.t-pschritt__von { margin: 3px 0 0; font-size: .76rem; opacity: .6; }
|
||
|
||
.t-probe__fragen {
|
||
margin-top: 14px; padding-top: 12px;
|
||
border-top: 1px solid color-mix(in srgb, var(--gut) 40%, var(--rand));
|
||
}
|
||
.t-frage { margin: 0 0 10px; }
|
||
.t-frage__frage { margin: 0; font-size: .9rem; font-weight: 600; }
|
||
.t-frage__satz { margin: 2px 0 0; font-size: .8rem; opacity: .68; }
|
||
.t-probe__schluss { margin: 10px 0 0; font-size: .82rem; opacity: .75; line-height: 1.55; }
|
||
|
||
/* Wer ein Merkmal gesehen hat. Steht am Knopf, klein -- 27 Knoepfe
|
||
nebeneinander vertragen keine zweite Zeile in Normalgroesse. */
|
||
.t-merkmal__wer { font-size: .72rem; opacity: .6; margin-inline-start: 6px; }
|
||
|
||
/* =====================================================================
|
||
DER AUSGANG AUS DEM TRICHTER (17.09.2026)
|
||
|
||
LEISE, UNTEN, OHNE ROT. Ein "Beenden" in Warnfarbe waere eine
|
||
Drohung -- gemeint ist das Gegenteil: Eine Absage ist ein normaler,
|
||
ordentlicher Ausgang, kein Schaden. Rot gehoert an Dinge, die
|
||
schiefgehen, nicht an Entscheidungen, die getroffen werden.
|
||
|
||
Erst der Satz als Knopf, dann das Feld. Zugeklappt nimmt der ganze
|
||
Block eine Zeile.
|
||
===================================================================== */
|
||
.t-ausgang {
|
||
margin-top: 14px;
|
||
padding-top: 12px;
|
||
border-top: 1px solid color-mix(in srgb, var(--rand) 60%, transparent);
|
||
}
|
||
|
||
.t-ausgang__auf {
|
||
background: none; border: 0; padding: 2px 0;
|
||
color: var(--text-still);
|
||
font: inherit; font-size: .82rem;
|
||
cursor: pointer;
|
||
text-decoration: underline;
|
||
text-underline-offset: 3px;
|
||
text-decoration-color: color-mix(in srgb, var(--text-still) 45%, transparent);
|
||
}
|
||
.t-ausgang__auf:hover { color: var(--text-leise); }
|
||
.t-ausgang__auf:focus-visible {
|
||
outline: 2px solid var(--akzent); outline-offset: 3px; border-radius: 4px;
|
||
}
|
||
|
||
.t-ausgang__form { margin-top: 10px; }
|
||
|
||
/* Der Hinweis anstelle des Ausgangs -- an Karten, die schon im Team
|
||
sind. Gleiche Groesse wie der leise Knopf daneben, damit er nicht
|
||
wie eine Warnung wirkt. */
|
||
.t-ausgang__anderswo {
|
||
margin: 0; font-size: .82rem; line-height: 1.55;
|
||
color: var(--text-still);
|
||
}
|
||
.t-ausgang__anderswo a { color: var(--text-leise); }
|
||
|
||
.t-ausgang__satz {
|
||
margin: 0 0 8px; font-size: .82rem; line-height: 1.55;
|
||
color: var(--text-leise);
|
||
}
|
||
|
||
.t-ausgang__schild {
|
||
display: block; margin-bottom: 4px;
|
||
font-size: .82rem; font-weight: 600;
|
||
}
|
||
|
||
.t-ausgang__feld {
|
||
width: 100%; box-sizing: border-box;
|
||
/* Undurchsichtig gemischt, nicht mit `transparent` (17.09.2026):
|
||
`color-mix(..., transparent)` laesst den Hintergrund durch -- auf
|
||
einer Seite mit Wasserzeichen steht er dann im Text. */
|
||
background: color-mix(in srgb, var(--tinte) 88%, #ffffff 12%);
|
||
color: var(--text);
|
||
border: 1px solid var(--rand-hell);
|
||
border-radius: 8px;
|
||
padding: 8px 10px;
|
||
font: inherit; font-size: .88rem; line-height: 1.5;
|
||
resize: vertical;
|
||
}
|
||
.t-ausgang__feld:focus-visible {
|
||
outline: 2px solid var(--akzent); outline-offset: 2px;
|
||
border-color: var(--akzent);
|
||
}
|
||
|
||
.t-ausgang__knopf { margin-top: 8px; }
|
||
|
||
/* =====================================================================
|
||
WAS BEENDET WURDE
|
||
|
||
Eine eigene Sammlung unter der Arbeitsliste. Zugeklappt eine Zeile
|
||
mit einer Zahl; aufgeklappt Karten, die deutlich stiller sind als
|
||
die oben -- sie sind Gedaechtnis, keine Arbeit.
|
||
===================================================================== */
|
||
.t-beendet { margin-top: 26px; }
|
||
|
||
.t-beendet__auf {
|
||
width: 100%;
|
||
background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
|
||
border: 1px solid var(--rand);
|
||
border-radius: 10px;
|
||
padding: 10px 14px;
|
||
color: var(--text-leise);
|
||
font: inherit; font-size: .86rem;
|
||
text-align: start;
|
||
cursor: pointer;
|
||
}
|
||
.t-beendet__auf:hover { border-color: var(--rand-hell); color: var(--text); }
|
||
.t-beendet__auf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
|
||
|
||
.t-beendet__karte {
|
||
margin-top: 10px;
|
||
padding: 12px 14px;
|
||
background: color-mix(in srgb, var(--tinte) 96%, #ffffff 4%);
|
||
border: 1px solid color-mix(in srgb, var(--rand) 70%, transparent);
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.t-beendet__kopf {
|
||
display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
|
||
}
|
||
.t-beendet__titel {
|
||
margin: 0; font-size: .96rem; font-weight: 600;
|
||
/* Nicht per `opacity` gedaempft -- das macht den Kasten durchsichtig
|
||
und laesst den Hintergrund durch den Text. Eine leisere FARBE tut
|
||
dasselbe, ohne die Flaeche anzufassen. */
|
||
color: var(--text-leise);
|
||
}
|
||
.t-beendet__stufe { font-size: .8rem; color: var(--text-still); }
|
||
.t-beendet__zeit { font-size: .78rem; color: var(--text-still); margin-inline-start: auto; }
|
||
|
||
.t-beendet__grund {
|
||
margin: 6px 0 0; font-size: .86rem; line-height: 1.55;
|
||
color: var(--text);
|
||
}
|
||
.t-beendet__wer { margin: 4px 0 0; font-size: .76rem; color: var(--text-still); }
|
||
|
||
.t-beendet__wieder {
|
||
margin-top: 10px;
|
||
background: none;
|
||
border: 1px solid var(--rand-hell);
|
||
border-radius: 999px;
|
||
padding: 5px 12px;
|
||
color: var(--text-leise);
|
||
font: inherit; font-size: .8rem;
|
||
cursor: pointer;
|
||
}
|
||
.t-beendet__wieder:hover { color: var(--text); border-color: var(--akzent); }
|
||
.t-beendet__wieder:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
|
||
.t-beendet__wieder[disabled] { opacity: .5; cursor: default; }
|
||
|
||
/* =====================================================================
|
||
WER AUS DEM TALENT GEWORDEN IST (17.09.2026)
|
||
|
||
Der letzte Schritt des Trichters legt einen Zugang an. Bis heute war
|
||
das eine Einbahnstrasse -- die Karte wusste hinterher nicht, wer
|
||
daraus wurde. Jetzt steht es da, mit dem Weg zu den Zugaengen.
|
||
===================================================================== */
|
||
.t-person {
|
||
display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
|
||
margin-top: 12px;
|
||
padding: 9px 13px;
|
||
border: 1px solid color-mix(in srgb, var(--gut, #79d1a2) 30%, var(--rand));
|
||
border-radius: 10px;
|
||
background: color-mix(in srgb, var(--tinte) 92%, #ffffff 8%);
|
||
}
|
||
.t-person__schild {
|
||
font-size: .72rem; font-weight: 700; letter-spacing: .03em;
|
||
text-transform: uppercase;
|
||
color: var(--text-still);
|
||
}
|
||
.t-person__name {
|
||
font-size: .95rem; font-weight: 700;
|
||
color: color-mix(in srgb, var(--gut, #79d1a2) 32%, #ffffff);
|
||
text-decoration: none;
|
||
border-bottom: 1px solid transparent;
|
||
}
|
||
.t-person__name:hover { border-bottom-color: currentColor; }
|
||
.t-person__name:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
|
||
.t-person__schon { font-size: .78rem; color: var(--text-leise); margin-inline-start: auto; }
|
||
|
||
/* Ein abgeschalteter Zugang sieht anders aus als ein laufender -- die
|
||
Karte bleibt trotzdem stehen, sie erzaehlt ja, wie jemand gekommen
|
||
ist. Gedaempft wird ueber die FARBE, nicht ueber `opacity`: Das
|
||
macht den Kasten durchsichtig, und das Wasserzeichen der Seite
|
||
scheint hindurch. */
|
||
.t-person[data-still="ja"] { border-color: var(--rand); }
|
||
.t-person[data-still="ja"] .t-person__name { color: var(--text-still); }
|
||
.t-person__still {
|
||
font-size: .74rem;
|
||
padding: 1px 7px; border-radius: 999px;
|
||
border: 1px solid var(--rand);
|
||
color: var(--text-still);
|
||
}
|
||
|
||
/* =====================================================================
|
||
WOMIT ER ANFAENGT
|
||
|
||
Ein Angebot, keine Automatik: Was ungefragt Dinge anlegt, ist schwer
|
||
wieder loszuwerden (Filipes Entscheidung bei der Live-Checkliste,
|
||
und sie gilt hier genauso).
|
||
===================================================================== */
|
||
.t-start { margin-top: 10px; }
|
||
|
||
.t-start__auf {
|
||
background: none; border: 0; padding: 2px 0;
|
||
color: var(--text-leise);
|
||
font: inherit; font-size: .84rem; font-weight: 600;
|
||
cursor: pointer;
|
||
text-decoration: underline;
|
||
text-underline-offset: 3px;
|
||
text-decoration-color: color-mix(in srgb, var(--text-leise) 45%, transparent);
|
||
}
|
||
.t-start__auf:hover { color: var(--text); }
|
||
.t-start__auf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; border-radius: 4px; }
|
||
|
||
.t-start__satz {
|
||
margin: 8px 0 10px; font-size: .84rem; line-height: 1.55;
|
||
color: var(--text-leise);
|
||
}
|
||
|
||
.t-start__reihe { display: flex; flex-wrap: wrap; gap: 8px; }
|
||
|
||
.t-start__kat {
|
||
display: flex; flex-direction: column; gap: 2px;
|
||
min-height: 44px;
|
||
padding: 7px 13px;
|
||
border: 1px solid var(--rand-hell);
|
||
border-radius: 10px;
|
||
background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
|
||
color: var(--text);
|
||
font: inherit;
|
||
text-align: start;
|
||
cursor: pointer;
|
||
transition: border-color .16s ease;
|
||
}
|
||
.t-start__kat:hover { border-color: var(--akzent); }
|
||
.t-start__kat:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
|
||
.t-start__kat[disabled] { opacity: .5; cursor: default; }
|
||
.t-start__kat-name { font-size: .86rem; font-weight: 600; }
|
||
.t-start__kat-zahl { font-size: .74rem; color: var(--text-still); }
|
||
|
||
.t-start__fertig {
|
||
display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
|
||
margin: 0 0 14px;
|
||
padding: 11px 15px;
|
||
border: 1px solid color-mix(in srgb, var(--gut, #79d1a2) 40%, var(--rand));
|
||
border-radius: 10px;
|
||
background: color-mix(in srgb, var(--tinte) 92%, #ffffff 8%);
|
||
font-size: .88rem;
|
||
}
|
||
|
||
/* Der Weg von der Talentkarte zur Entwicklungskarte. Die Stufe sagt
|
||
zweimal „ab hier zaehlt die Entwicklungskarte" -- bis heute ohne
|
||
einen Weg dorthin. */
|
||
.t-person__weiter {
|
||
font-size: .8rem; font-weight: 600;
|
||
color: var(--text-leise);
|
||
text-decoration: underline;
|
||
text-underline-offset: 3px;
|
||
text-decoration-color: color-mix(in srgb, var(--text-leise) 40%, transparent);
|
||
}
|
||
.t-person__weiter:hover { color: var(--text); }
|
||
.t-person__weiter:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
|
||
|
||
/* =====================================================================
|
||
WIE DIESER MENSCH GEKOMMEN IST (17.09.2026)
|
||
|
||
Die Gegenrichtung: Wer eine Entwicklungskarte aufschlaegt, sieht
|
||
Namen und Punkte -- aber nicht, dass derselbe Mensch vier Wochen
|
||
beobachtet wurde. Beim ersten Beurteilen ist genau das die Frage.
|
||
|
||
Eine Zeile, kein Kasten: Es ist Herkunft, nicht Inhalt.
|
||
===================================================================== */
|
||
.e-herkunft {
|
||
display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 9px;
|
||
margin: 0 0 12px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 1px solid color-mix(in srgb, var(--rand) 70%, transparent);
|
||
font-size: .82rem;
|
||
}
|
||
.e-herkunft__schild {
|
||
/* 11,52 px -- die Hausgrenze liegt bei 11,5. Der erste Anlauf stand
|
||
auf .7rem (11,2) und wurde von pruef-css-klassen gefunden: eine
|
||
Stelle mehr als die Grundlinie. Zurueckhaltend wird die Zeile ueber
|
||
FARBE, nicht ueber Groesse. */
|
||
font-size: .72rem; font-weight: 700; letter-spacing: .03em;
|
||
text-transform: uppercase;
|
||
color: var(--text-still);
|
||
}
|
||
.e-herkunft__weg {
|
||
font-weight: 600;
|
||
color: var(--text-leise);
|
||
text-decoration: underline;
|
||
text-underline-offset: 3px;
|
||
text-decoration-color: color-mix(in srgb, var(--text-leise) 40%, transparent);
|
||
}
|
||
.e-herkunft__weg:hover { color: var(--text); }
|
||
.e-herkunft__weg:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
|
||
.e-herkunft__buddy { color: var(--text-still); }
|
||
|
||
/* =====================================================================
|
||
WER SICH UM DIESEN KANDIDATEN KÜMMERT (17.09.2026)
|
||
|
||
Die Standzeit oben sagt, DASS etwas liegt -- nicht, wer es aufheben
|
||
sollte. Diese Zeile beantwortet die zweite Hälfte.
|
||
|
||
Sie steht weit oben an der Karte, direkt unter dem Kopf: Wer die
|
||
Liste überfliegt, sucht genau danach.
|
||
===================================================================== */
|
||
.t-kuemmern {
|
||
display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
|
||
margin: 10px 0 2px;
|
||
}
|
||
|
||
.t-kuemmern__knopf {
|
||
min-height: 38px;
|
||
padding: 7px 15px;
|
||
border: 1px solid color-mix(in srgb, var(--akzent) 45%, var(--rand));
|
||
border-radius: 999px;
|
||
background: color-mix(in srgb, var(--tinte) 90%, #ffffff 10%);
|
||
color: color-mix(in srgb, var(--akzent) 30%, #ffffff);
|
||
font: inherit; font-size: .84rem; font-weight: 600;
|
||
cursor: pointer;
|
||
transition: border-color .16s ease, color .16s ease;
|
||
}
|
||
.t-kuemmern__knopf:hover { border-color: var(--akzent); color: #ffffff; }
|
||
.t-kuemmern__knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
|
||
|
||
.t-kuemmern[data-wer="ich"] .t-kuemmern__knopf {
|
||
border-color: color-mix(in srgb, var(--gut, #79d1a2) 45%, var(--rand));
|
||
color: color-mix(in srgb, var(--gut, #79d1a2) 30%, #ffffff);
|
||
}
|
||
.t-kuemmern[data-wer="anderer"] .t-kuemmern__knopf {
|
||
border-style: dashed;
|
||
border-color: var(--rand);
|
||
background: none;
|
||
color: var(--text-still);
|
||
cursor: default;
|
||
}
|
||
.t-kuemmern__seit { font-size: .78rem; color: var(--text-still); }
|
||
|
||
|
||
|
||
/* =====================================================================
|
||
DIE FELDER DER BEFINDENSFRAGEN (20.09.2026)
|
||
|
||
Filipe: „bei der frage wie geht es dir will ich viel mehr fragen aber
|
||
kategorisiert und so. psychologisch hochprofessionell … es soll
|
||
extrem übersichtlich sein und sich speziell anfühlen."
|
||
|
||
ÜBERSICHTLICH HEISST HIER: RUHIG. Eine Seite, auf der jemand über
|
||
sein Befinden nachdenkt, ist der falsche Ort für kräftige Farben und
|
||
Kästen. Die Feldüberschrift ist deshalb kein Kasten, sondern eine
|
||
Linie mit einem Zeichen davor — sie gliedert, ohne sich
|
||
dazwischenzustellen. Augenschonend ist hier nicht nur eine
|
||
Hausregel, sondern Teil der Sache.
|
||
===================================================================== */
|
||
.e-feld {
|
||
margin: 30px 0 12px;
|
||
padding-bottom: 8px;
|
||
border-bottom: 1px solid var(--rand);
|
||
}
|
||
/* Das erste Feld braucht oben keinen Abstand -- sonst klafft zwischen
|
||
der Taktzeile und der ersten Frage ein Loch, das wie ein Ladefehler
|
||
aussieht.
|
||
|
||
HIER STAND `#fragen > .e-feld:first-child` (entfernt 23.09.2026).
|
||
Seit die Gruppen ihren eigenen Abschnitt haben, ist ein `.e-feld`
|
||
kein direktes Kind von `#fragen` mehr -- die Regel konnte nicht mehr
|
||
greifen. Nachgesehen: `.e-feld` wird im ganzen Haus nur an einer
|
||
Stelle gebaut (befinden.js), und zwar immer in eine `.b-gruppe`.
|
||
|
||
Dasselbe Missverstaendnis hat drei Zeilen weiter unten den
|
||
Spaltenumbruch verursacht: `break-inside: avoid` galt fuer
|
||
`#fragen > .e-punkt` und lief ebenfalls ins Leere. Eine Regel, die
|
||
nichts mehr trifft, faellt nicht auf -- sie hoert einfach auf zu
|
||
wirken. Deshalb weg statt stehengelassen.
|
||
|
||
Den Abstand macht jetzt `.b-gruppe:first-of-type` (padding-top: 0)
|
||
zusammen mit `.b-flaeche .e-feld` (margin: 0). */
|
||
|
||
.e-feld__wort {
|
||
display: flex; align-items: baseline; gap: 9px;
|
||
margin: 0;
|
||
font-size: .96rem; font-weight: 650;
|
||
color: var(--text);
|
||
letter-spacing: .01em;
|
||
}
|
||
.e-feld__zeichen {
|
||
flex: 0 0 auto;
|
||
font-size: .8rem;
|
||
color: var(--akzent);
|
||
/* Es ist ein Gliederungszeichen, kein Symbol mit Bedeutung -- im
|
||
Markup steht deshalb aria-hidden, und hier bekommt es nur so viel
|
||
Gewicht, dass das Auge die Überschrift findet. */
|
||
opacity: .85;
|
||
}
|
||
.e-feld__text {
|
||
margin: 4px 0 0;
|
||
font-size: .82rem; line-height: 1.5;
|
||
color: var(--text-leise);
|
||
}
|
||
|
||
/* =====================================================================
|
||
DIE EINE ZUSAMMENFASSUNG
|
||
|
||
SIE DARF ANDERS AUSSEHEN ALS ALLES DARÜBER — sie ist das Einzige auf
|
||
der Seite, das jemand FÜR die Person geschrieben hat, statt sie zu
|
||
fragen. Das ist der eine Ort, an dem „speziell" nicht Dekoration
|
||
ist, sondern Bedeutung trägt.
|
||
|
||
Gemacht wird das mit einem sehr weichen Verlauf und einer Kante
|
||
links — nicht mit Leuchten oder Farbe. Hausregel: augenschonend,
|
||
gedeckt statt Neon. Wer hier gerade liest, dass fünf von acht Sachen
|
||
haken, braucht keine fröhlichen Farben dazu.
|
||
===================================================================== */
|
||
.b-fazit {
|
||
margin: 34px 0 0;
|
||
padding: 20px 22px;
|
||
border-radius: var(--radius);
|
||
border: 1px solid color-mix(in srgb, var(--akzent) 26%, var(--rand));
|
||
border-left: 3px solid var(--akzent);
|
||
background:
|
||
linear-gradient(160deg,
|
||
color-mix(in srgb, var(--akzent) 9%, transparent) 0%,
|
||
transparent 62%),
|
||
color-mix(in srgb, var(--flaeche) 80%, transparent);
|
||
}
|
||
.b-fazit .e-abschnitt { margin-top: 0; }
|
||
|
||
/* DER KOPFSATZ IST DER GRÖSSTE TEXT DER SEITE. Wer nur ihn liest, soll
|
||
richtig informiert sein -- dieselbe Regel wie beim Satz über der
|
||
Musteranalyse. */
|
||
.b-fazit__kopf {
|
||
margin: 6px 0 0;
|
||
font-size: 1.04rem; line-height: 1.6;
|
||
color: var(--text);
|
||
}
|
||
|
||
.b-fazit__traegt { margin-top: 16px; }
|
||
.b-fazit__schild {
|
||
margin: 0 0 6px;
|
||
font-size: .74rem; font-weight: 650;
|
||
letter-spacing: .06em; text-transform: uppercase;
|
||
color: var(--text-leise);
|
||
}
|
||
.b-fazit__liste { margin: 0; padding: 0; list-style: none;
|
||
display: flex; flex-direction: column; gap: 5px; }
|
||
.b-fazit__punkt {
|
||
position: relative;
|
||
padding-left: 20px;
|
||
font-size: .9rem; line-height: 1.5;
|
||
color: var(--text);
|
||
}
|
||
/* Ein Haken, kein Aufzählungspunkt: Was trägt, ist etwas Erledigtes,
|
||
und das sieht man an der Form schneller als am Wort. */
|
||
.b-fazit__punkt::before {
|
||
content: "¹3";
|
||
position: absolute; left: 0; top: 0;
|
||
color: var(--gut, #5fc08a);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.b-fazit__thema {
|
||
margin: 16px 0 0;
|
||
padding: 11px 13px;
|
||
border-radius: var(--radius-klein);
|
||
background: color-mix(in srgb, var(--warn, #e0a355) 10%, transparent);
|
||
border-left: 2px solid color-mix(in srgb, var(--warn, #e0a355) 55%, transparent);
|
||
font-size: .9rem; line-height: 1.55;
|
||
color: var(--text);
|
||
}
|
||
.b-fazit__themafragen {
|
||
display: inline-block; margin-top: 5px;
|
||
font-size: .82rem; color: var(--text-leise);
|
||
}
|
||
|
||
.b-fazit__schluss {
|
||
margin: 16px 0 0;
|
||
font-size: .92rem; line-height: 1.6;
|
||
color: var(--text);
|
||
}
|
||
.b-fazit__zahlen {
|
||
margin: 12px 0 0;
|
||
font-size: .76rem;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
@media (forced-colors: active) {
|
||
.b-fazit { border: 2px solid CanvasText; }
|
||
.e-feld { border-bottom: 1px solid CanvasText; }
|
||
}
|
||
|
||
/* =====================================================================
|
||
VERTEILEN GEHOERT AUF DIESE SEITE (22.09.2026)
|
||
=====================================================================
|
||
|
||
Filipe: "ich will immer noch ... dass man bei aufgaben nur die
|
||
aufgaben sieht und bei eure aufgaben die aufgaben verteilt."
|
||
|
||
Ein Band, kein zweites Formular: Der Knopf fuehrt auf das
|
||
Aufgabenbrett und bringt die gewaehlte Person mit. Zwei Formulare
|
||
fuer dieselbe Sache waeren zwei Gelegenheiten, eines zu vergessen.
|
||
===================================================================== */
|
||
.e-verteilen {
|
||
display: flex;
|
||
gap: 16px;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
margin: 0 0 20px;
|
||
padding: 14px 16px;
|
||
border: 1px solid var(--rand);
|
||
border-left: 3px solid var(--akzent);
|
||
border-radius: var(--radius-klein, 12px);
|
||
background: color-mix(in srgb, var(--flaeche) 92%, transparent);
|
||
}
|
||
|
||
.e-verteilen__titel {
|
||
margin: 0;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.e-verteilen__satz {
|
||
margin: 3px 0 0;
|
||
font-size: .88rem;
|
||
line-height: 1.5;
|
||
color: var(--text-leise);
|
||
}
|
||
|
||
/* ---------------------------------------------------------------------
|
||
DAS FORMULAR IM BAND (22.09.2026)
|
||
---------------------------------------------------------------------
|
||
Filipe: „dieser buttion da soll nicht einen zu der seite aufgaben
|
||
fuehren sondern da in dieser seite die aufgaben erstellen und
|
||
vergeben koennen."
|
||
|
||
ES LIEGT IM BAND UND NICHT DARUNTER. Das Band ist eine Flex-Reihe
|
||
(Text links, Knopf rechts); `flex-basis: 100%` setzt das Formular
|
||
als ganze Zeile darunter, ohne einen zweiten Kasten aufzumachen.
|
||
Zwei Kaesten untereinander saehen aus wie zwei Sachen -- es ist
|
||
aber eine: der Knopf und das, was er oeffnet.
|
||
--------------------------------------------------------------------- */
|
||
.e-neu {
|
||
flex: 1 1 100%;
|
||
margin: 14px 0 0;
|
||
padding: 14px 0 0;
|
||
border-top: 1px solid color-mix(in srgb, var(--rand) 80%, transparent);
|
||
}
|
||
|
||
.e-neu__zeile { margin-bottom: 12px; }
|
||
|
||
.e-neu input[type="text"],
|
||
.e-neu input[type="date"],
|
||
.e-neu textarea {
|
||
display: block;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
min-height: 44px;
|
||
padding: 9px 11px;
|
||
border: 1px solid var(--rand-hell);
|
||
border-radius: var(--radius-klein, 10px);
|
||
background: color-mix(in srgb, var(--tinte) 90%, #ffffff 10%);
|
||
color: var(--text);
|
||
font: inherit;
|
||
font-size: .92rem;
|
||
line-height: 1.5;
|
||
}
|
||
.e-neu textarea { resize: vertical; }
|
||
|
||
/* Das Kalendersymbol kommt vom Browser und ist dunkel -- auf dunklem
|
||
Grund unsichtbar. */
|
||
.e-neu input[type="date"]::-webkit-calendar-picker-indicator {
|
||
filter: invert(1);
|
||
opacity: .62;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.e-neu__knoepfe {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
margin: 0;
|
||
}
|
||
|
||
/* ---------------------------------------------------------------------
|
||
DIE AUFGABEN DER PERSON
|
||
---------------------------------------------------------------------
|
||
„plus man soll die aufgaben hier in dieser seite auch sehen."
|
||
|
||
EINE ZEILE JE AUFGABE, keine Karte. Karten haben auf dieser Seite
|
||
schon die Menschen; noch eine Kartensorte daneben macht aus einer
|
||
Uebersicht ein Mosaik. Eine Zeile liest sich von links nach rechts:
|
||
was, wie weit, bis wann.
|
||
--------------------------------------------------------------------- */
|
||
/* Eine Bestaetigung ist gruen, eine Absage rot. Ohne diese Regel
|
||
stand „steht jetzt bei Rieke" in Warnrot -- und wer Bestaetigungen
|
||
in Rot liest, ueberliest irgendwann die echte Warnung. */
|
||
.fehler[data-gut="ja"] { color: color-mix(in srgb, var(--k-gut) 85%, var(--text)); }
|
||
|
||
.e-aufgaben { margin: 0 0 22px; }
|
||
|
||
.e-aufgaben__satz {
|
||
margin: 0 0 10px;
|
||
font-size: .86rem;
|
||
color: var(--text-leise);
|
||
}
|
||
|
||
.e-aufgaben__liste { display: flex; flex-direction: column; gap: 6px; }
|
||
|
||
.e-aufgaben__leer {
|
||
margin: 0;
|
||
font-size: .88rem;
|
||
line-height: 1.55;
|
||
color: var(--text-leise);
|
||
}
|
||
|
||
.e-aufgabe {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 10px;
|
||
min-height: 44px;
|
||
padding: 8px 12px;
|
||
border: 1px solid var(--rand);
|
||
border-left: 3px solid var(--e-stand, var(--rand-hell));
|
||
border-radius: var(--radius-klein, 10px);
|
||
background: color-mix(in srgb, var(--flaeche) 90%, transparent);
|
||
color: var(--text);
|
||
text-decoration: none;
|
||
transition: border-color var(--tempo, .18s) ease;
|
||
}
|
||
.e-aufgabe:hover { border-color: var(--rand-hell); }
|
||
.e-aufgabe:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
|
||
|
||
/* DER STAND TRAEGT DIE FARBE AM LINKEN RAND -- aber nie NUR die
|
||
Farbe: Das Wort steht daneben. Ein Zustand, der allein an der Farbe
|
||
haengt, ist fuer jeden verloren, der Farben anders sieht. */
|
||
.e-aufgabe[data-status="offen"] { --e-stand: var(--k-mittel); }
|
||
.e-aufgabe[data-status="arbeit"] { --e-stand: var(--akzent); }
|
||
.e-aufgabe[data-status="review"] { --e-stand: var(--violett); }
|
||
.e-aufgabe[data-status="erledigt"] { --e-stand: var(--k-gut); }
|
||
.e-aufgabe[data-status="abgebrochen"] { --e-stand: var(--k-neutral); }
|
||
|
||
.e-aufgabe__titel { flex: 1 1 14rem; min-width: 0; font-size: .9rem; font-weight: 600; }
|
||
.e-aufgabe__stand {
|
||
padding: 2px 9px;
|
||
border: 1px solid color-mix(in srgb, var(--e-stand) 45%, transparent);
|
||
border-radius: 999px;
|
||
background: color-mix(in srgb, var(--e-stand) 12%, transparent);
|
||
color: var(--e-stand);
|
||
font-size: .72rem; font-weight: 600;
|
||
}
|
||
.e-aufgabe__frist { font-size: .78rem; color: var(--text-leise); }
|
||
|
||
/* Was fertig ist, tritt zurueck -- es steht noch da, draengt sich aber
|
||
nicht mehr vor das Offene. */
|
||
.e-aufgabe[data-status="erledigt"] .e-aufgabe__titel,
|
||
.e-aufgabe[data-status="abgebrochen"] .e-aufgabe__titel {
|
||
font-weight: 400;
|
||
color: var(--text-leise);
|
||
}
|
||
|
||
@media (forced-colors: active) {
|
||
.e-neu { border-top: 1px solid CanvasText; }
|
||
.e-aufgabe { border: 1px solid CanvasText; }
|
||
.e-aufgabe__stand { border: 1px solid CanvasText; }
|
||
}
|
||
|
||
/* Der Knopf ist ein Link -- er sieht aus wie ein Knopf und muss am
|
||
Finger auch eines sein. */
|
||
.e-verteilen .knopf {
|
||
flex: 0 0 auto;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
min-height: 44px;
|
||
text-decoration: none;
|
||
}
|
||
|
||
@media (max-width: 560px) {
|
||
.e-verteilen { flex-direction: column; align-items: stretch; }
|
||
.e-verteilen .knopf { justify-content: center; }
|
||
}
|
||
|
||
/* =====================================================================
|
||
„WIE GEHT'S DIR?" -- LESBAR UND KURZ (22.09.2026)
|
||
=====================================================================
|
||
|
||
Filipe: "auf der seite von der kategorie wie gehts die, sind die
|
||
kacheln viel zu hell, man bekommt fast nichts gelesen, die sollen
|
||
viel kraeftiger und dunkler sein. ich will dass auch alles viel
|
||
uebersichtlicher ist, es ist alles so lang gezogen, muss ewig
|
||
scrollen um alles zu sehen."
|
||
|
||
BEIDES GEMESSEN, BEVOR ICH ETWAS ANGEFASST HABE:
|
||
|
||
Kachelgrund rgba(0, 0, 0, .2) -- also 80 % durchsichtig. Die
|
||
Seite traegt ein helles Buehnenbild (ein Husky, ein
|
||
Hase, viel Licht), und das schien mitten durch den
|
||
Text. Genau das heisst "man bekommt fast nichts
|
||
gelesen".
|
||
Laenge 2487 px am Rechner, 3431 px am Handy -- 3,4
|
||
Bildschirme fuer neun Fragen.
|
||
|
||
ZUERST DIE LESBARKEIT. Die Kacheln werden deckend. Nicht schwarz:
|
||
Sie sollen sich vom Seitengrund abheben, sonst verschwimmt die eine
|
||
Frage in die naechste. `--tinte` mit einem Hauch Weiss ist genau
|
||
der Ton, den `.e-punkt` ohnehin hat -- die Variante hatte ihn nur
|
||
wieder weggenommen.
|
||
|
||
DANN DIE LAENGE. Gespart wird an Weissraum und Wiederholung, NICHT
|
||
an Text: Die Erklaerung unter jeder Frage ist der Grund, warum man
|
||
sie ehrlich beantwortet. Weg kommt die eigene Zeile fuer "JEDE
|
||
RUNDE" -- sie steht jetzt neben der Frage, wo sie ohnehin hingehoert.
|
||
===================================================================== */
|
||
|
||
/* ---- 1. DECKEND, NICHT DURCHSICHTIG ---- */
|
||
.e-punkt--meins,
|
||
.e-punkt--meine {
|
||
/* Deckend und einen Hauch heller als die Seite -- so hebt sich jede
|
||
Frage ab, ohne dass das Bild durchschlaegt. */
|
||
background: color-mix(in srgb, var(--tinte) 90%, #ffffff 10%);
|
||
border-color: color-mix(in srgb, var(--rand-hell) 70%, transparent);
|
||
}
|
||
|
||
/* Auch die Kaesten drumherum: Takt, Felder und das Fazit standen mit
|
||
demselben Problem auf demselben Bild. */
|
||
.b-takt,
|
||
.b-feld,
|
||
.b-fazit,
|
||
.e-meine {
|
||
background: color-mix(in srgb, var(--tinte) 92%, #ffffff 8%);
|
||
}
|
||
|
||
/* ---- 2. KOMPAKTER, OHNE TEXT WEGZUNEHMEN ---- */
|
||
.e-punkt--meins,
|
||
.e-punkt--meine {
|
||
margin-bottom: 7px;
|
||
padding: 11px 14px;
|
||
}
|
||
|
||
/* Die Marke neben die Frage, nicht darunter. Sie ist eine Eigenschaft
|
||
der Frage ("kommt jede Runde"), keine eigene Zeile. */
|
||
.e-punkt__kopf {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: baseline;
|
||
gap: 8px;
|
||
}
|
||
.e-punkt__marke { margin-top: 0; }
|
||
|
||
/* Die Erklaerung darf enger stehen -- sie wird gelesen, nicht
|
||
ueberflogen, und 1.5 ist dafuer genug. */
|
||
.e-punkt--meins .e-punkt__text,
|
||
.e-punkt--meine .e-punkt__text {
|
||
margin: 5px 0 0;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* Die Antwortknoepfe ruecken naeher an die Frage. 44 px bleiben sie am
|
||
Finger -- daran wird nicht gespart, das war der Fehler vom 21.09. */
|
||
.e-punkt__wahl { margin-top: 9px; gap: 7px; }
|
||
|
||
/* Die Ueberschrift eines Feldes braucht keine 30 px Luft davor, wenn
|
||
darunter gleich die erste Frage steht. */
|
||
.b-feld { margin-top: 18px; }
|
||
.b-feld__titel { margin-bottom: 2px; }
|
||
.b-feld__satz { margin: 0 0 10px; }
|
||
|
||
/* ---- 3. VIER KNOEPFE, EINE REIHE (22.09.2026) ----
|
||
---------------------------------------------------------------------
|
||
Gemessen bei 390 px: Die vier Antworten brauchten zwei Reihen, 94
|
||
von 214 Pixeln je Frage. Bei neun Fragen sind das 450 Pixel
|
||
Scrollweg, die nur aus Umbruch bestehen.
|
||
|
||
Gerechnet: 390 px minus 28 Innenabstand = 362, minus drei Luecken a
|
||
6 = 344, geteilt durch vier = 86 px je Knopf. "Kann ich nicht
|
||
sagen" braucht mehr; "Unklar" nicht. Deshalb die Kurzform -- und
|
||
nur dort, wo der Platz es verlangt.
|
||
|
||
DIE LANGE FASSUNG BLEIBT FUER DAS VORLESEPROGRAMM (aria-label am
|
||
Knopf). Wer hoert statt sieht, bekommt weiterhin den ganzen Satz. */
|
||
.e-wahl__kurz { display: none; }
|
||
|
||
@media (max-width: 560px) {
|
||
.e-wahl {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 6px;
|
||
}
|
||
.e-wahl__knopf {
|
||
justify-content: center;
|
||
gap: 4px;
|
||
padding: 6px 4px;
|
||
font-size: .74rem;
|
||
min-width: 0;
|
||
}
|
||
.e-wahl__lang { display: none; }
|
||
.e-wahl__kurz { display: inline; }
|
||
}
|
||
|
||
/* ---- 4. DIE MARKE NEBEN DIE FRAGE, NICHT DARUNTER ----
|
||
Sie ist eine Eigenschaft der Frage ("kommt jede Runde"), keine
|
||
eigene Zeile. Spart 22 px je Frage, ohne ein Wort wegzunehmen. */
|
||
.e-punkt--meins,
|
||
.e-punkt--meine {
|
||
display: grid;
|
||
grid-template-columns: auto 1fr;
|
||
align-items: baseline;
|
||
column-gap: 9px;
|
||
}
|
||
.e-punkt--meins > .e-punkt__titel,
|
||
.e-punkt--meine > .e-punkt__titel { grid-column: 1; }
|
||
.e-punkt--meins > .e-punkt__marke,
|
||
.e-punkt--meine > .e-punkt__marke { grid-column: 2; justify-self: start; }
|
||
.e-punkt--meins > *:not(.e-punkt__titel):not(.e-punkt__marke),
|
||
.e-punkt--meine > *:not(.e-punkt__titel):not(.e-punkt__marke) {
|
||
grid-column: 1 / -1;
|
||
}
|
||
|
||
/* ---- 5. ZWEI SPALTEN, WO PLATZ IST ----
|
||
Am Rechner stehen neun Fragen untereinander und fuellen zweieinhalb
|
||
Bildschirme -- bei 880 px Inhaltsbreite und Fragen, die keine 400
|
||
brauchen. Zwei Spalten halbieren den Weg, ohne eine Frage zu
|
||
verstecken.
|
||
|
||
ENTFERNT AM 23.09.2026, UND ES WAR DIE SPALTENREGEL SELBST.
|
||
---------------------------------------------------------------
|
||
Hier stand `columns: 2` auf `#fragen` — dem Behaelter um ALLES.
|
||
Solange darin nur flache Fragen lagen, ging das auf. Seit die
|
||
Fragen in ihren Gruppen stecken (`.b-gruppe`), reisst der
|
||
Spaltenumbruch mitten durch eine GRUPPE: Ihr Kopf bleibt links
|
||
unten, ihre Fragen wandern nach rechts oben — und ueber den
|
||
Antwortknoepfen rechts steht dann die Ueberschrift der NAECHSTEN
|
||
Gruppe. Genau das war auf Filipes Bildschirmfoto zu sehen.
|
||
|
||
`break-inside: avoid` haette das nicht gerettet: Es galt fuer
|
||
`#fragen > .e-punkt`, und ein `.e-punkt` ist seit dem Umbau kein
|
||
direktes Kind von `#fragen` mehr. Die Regel lief ins Leere, und
|
||
nichts hielt den Umbruch auf.
|
||
|
||
Zwei Spalten gibt es weiterhin — aber INNERHALB einer Gruppe,
|
||
ueber `.b-gruppe__fragen` (Abschnitt „Eine Flaeche" weiter unten).
|
||
Das ist ein Raster statt eines Spaltensatzes: Es kann per
|
||
Bauart nichts zerschneiden, weil es Kaesten verteilt und keinen
|
||
Textfluss umbricht. Damit ist die Ursache weg und nicht nur der
|
||
sichtbare Schaden ueberklebt.
|
||
|
||
`.b-feld__liste` stand in derselben Regel und kommt in keiner
|
||
Seite und keinem Skript des Hauses mehr vor — nachgesehen, nicht
|
||
vermutet. Sie faellt deshalb mit weg, statt als toter Name
|
||
stehenzubleiben, den beim naechsten Mal jemand fuer benutzt
|
||
haelt. */
|
||
|
||
/* Die Marke bricht nicht um -- "JEDE RUNDE" auf zwei Zeilen macht die
|
||
Kachel hoeher als die Frage daneben und sieht aus wie ein Fehler.
|
||
Der Titel darf dafuer schrumpfen; er bricht ohnehin sauber. */
|
||
.e-punkt--meins > .e-punkt__marke,
|
||
.e-punkt--meine > .e-punkt__marke { white-space: nowrap; }
|
||
.e-punkt--meins > .e-punkt__titel,
|
||
.e-punkt--meine > .e-punkt__titel { min-width: 0; }
|
||
|
||
/* =====================================================================
|
||
DER NAECHSTE SCHRITT UND DAS TEAM (22.09.2026)
|
||
=====================================================================
|
||
Filipe: „ich will ein ganzes gesamtresume was die leute animiert und
|
||
pusht immer und mega geile super team lösungen findet aber auch
|
||
individuel so dass jeder sich selber auch verbessert und steigert
|
||
fürs team."
|
||
|
||
WARUM DER SCHRITT EINEN EIGENEN KASTEN BEKOMMT.
|
||
Vorher stand unter jeder der neun Fragen ein Ratschlag — neun
|
||
gleichrangige Kästen untereinander. Genau das meint „man wird ja
|
||
bekloppt": Wenn alles gleich wichtig aussieht, ist nichts wichtig,
|
||
und man liest keinen davon.
|
||
|
||
Jetzt gibt es EINEN, und er sieht auch so aus: eigener Grund,
|
||
eigene Kante, die Überschrift als Ansage statt als Etikett. Der
|
||
Forschungssatz steht kleiner darunter — er begründet, er belehrt
|
||
nicht.
|
||
--------------------------------------------------------------------- */
|
||
.b-fazit__schritt {
|
||
margin: 16px 0 0;
|
||
padding: 14px 16px;
|
||
border-radius: var(--radius-klein, 12px);
|
||
border-left: 3px solid var(--akzent);
|
||
background: color-mix(in srgb, var(--akzent) 10%, transparent);
|
||
}
|
||
|
||
.b-fazit__schritt-titel {
|
||
margin: 0 0 6px;
|
||
font-size: 1rem;
|
||
font-weight: 650;
|
||
line-height: 1.4;
|
||
color: var(--text);
|
||
}
|
||
|
||
.b-fazit__schritt-was {
|
||
margin: 0;
|
||
font-size: .94rem;
|
||
line-height: 1.6;
|
||
color: var(--text);
|
||
max-width: 62ch;
|
||
}
|
||
|
||
/* Der Forschungssatz: kleiner, ruhiger, mit Abstand. Er ist der Grund,
|
||
nicht die Anweisung — und wer ihn überspringt, hat trotzdem alles
|
||
Nötige gelesen. */
|
||
.b-fazit__schritt-welt {
|
||
margin: 10px 0 0;
|
||
font-size: .86rem;
|
||
line-height: 1.55;
|
||
color: var(--text-leise);
|
||
max-width: 62ch;
|
||
}
|
||
|
||
/* DER TEAM-SATZ steht bewusst NICHT in einem Kasten.
|
||
Zwei Kästen hintereinander lesen sich als Liste, und dann ist der
|
||
Team-Teil wieder eine Aufgabe unter anderen. So ist er ein Satz —
|
||
der letzte Gedanke vor dem Schluss. */
|
||
.b-fazit__team {
|
||
margin: 16px 0 0;
|
||
padding-left: 14px;
|
||
border-left: 2px solid color-mix(in srgb, var(--akzent) 40%, transparent);
|
||
font-size: .95rem;
|
||
line-height: 1.6;
|
||
color: var(--text);
|
||
max-width: 62ch;
|
||
}
|
||
|
||
.b-fazit__quelle {
|
||
margin: 12px 0 0;
|
||
font-size: .8rem;
|
||
line-height: 1.5;
|
||
color: var(--text-still);
|
||
}
|
||
|
||
.b-fazit__quelle-link {
|
||
color: var(--text-leise);
|
||
text-decoration: underline;
|
||
text-underline-offset: 2px;
|
||
}
|
||
.b-fazit__quelle-link:hover { color: var(--text); }
|
||
|
||
@media (forced-colors: active) {
|
||
.b-fazit__schritt { border: 1px solid CanvasText; }
|
||
.b-fazit__team { border-left: 2px solid CanvasText; }
|
||
}
|
||
|
||
/* =====================================================================
|
||
DIE AUSWAHL IM VERTEIL-FORMULAR (23.09.2026)
|
||
=====================================================================
|
||
|
||
Filipe: „diese kachel soll viel geiler sein, also alles was drin ist
|
||
soll viel geiler gestaltet sein, viel hochwertiger, viel
|
||
profissineller, auch die möglichkeit alle auf einmal auszuwählen und
|
||
so. mach es hoch krass profissionel, übersichtlich"
|
||
|
||
Vorher: ein Kästchen und ein Name je Zeile, untereinander. Bei sechs
|
||
Leuten sechs gleiche Zeilen — man liest alle, um eine zu finden, und
|
||
auf dem Handy kostet das sechs Bildschirmzeilen.
|
||
|
||
Jetzt eine Karte je Person, im Raster. Drei Dinge machen den
|
||
Unterschied zwischen „Liste" und „Auswahl":
|
||
|
||
1. DIE GANZE KARTE IST DAS ZIEL, nicht das Kästchen darin. Auf
|
||
einem Handy ist ein Kästchen 20 px breit, eine Karte 200.
|
||
2. DIE GEWÄHLTE KARTE SIEHT ANDERS AUS — Rahmen und Fläche in der
|
||
Akzentfarbe. Ein Haken allein ist bei acht Karten zu wenig.
|
||
3. DER ZÄHLER OBEN sagt, wie viele es sind. Ohne ihn zählt man.
|
||
===================================================================== */
|
||
.e-fuer__kopf {
|
||
display: flex; flex-wrap: wrap; align-items: baseline;
|
||
justify-content: space-between; gap: 8px 14px;
|
||
margin: 0 0 8px;
|
||
}
|
||
.e-fuer__rechts {
|
||
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
|
||
margin-left: auto;
|
||
}
|
||
.e-fuer__zahl {
|
||
font-size: .78rem; font-weight: 650;
|
||
color: color-mix(in srgb, var(--akzent) 72%, #ffffff);
|
||
}
|
||
/* Steht niemand zur Wahl, ist der Satz eine Auskunft und keine Zahl --
|
||
dann tritt er zurück. */
|
||
.e-fuer__zahl[data-leer="ja"] { color: var(--text-still); font-weight: 600; }
|
||
|
||
/* ---- Die Schnellwahl ------------------------------------------------- */
|
||
.e-fuer__schnell { display: flex; flex-wrap: wrap; gap: 6px; }
|
||
.e-fuer__kurz {
|
||
padding: 5px 11px; border-radius: 999px;
|
||
font: inherit; font-size: .76rem; font-weight: 600;
|
||
color: var(--text-leise);
|
||
background: rgba(255, 255, 255, .04);
|
||
border: 1px solid var(--rand);
|
||
cursor: pointer;
|
||
/* 32 px hoch über die Zeilenhöhe, nicht über eine feste Höhe: So
|
||
wächst der Knopf mit, wenn jemand die Schrift größer stellt. */
|
||
line-height: 1.6; min-height: 32px;
|
||
display: inline-flex; align-items: center;
|
||
transition: color var(--tempo), border-color var(--tempo), background var(--tempo);
|
||
}
|
||
.e-fuer__kurz:hover {
|
||
color: var(--text);
|
||
border-color: color-mix(in srgb, var(--akzent) 48%, transparent);
|
||
background: color-mix(in srgb, var(--akzent) 10%, transparent);
|
||
}
|
||
.e-fuer__kurz:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
|
||
|
||
/* ---- Die Karten ------------------------------------------------------ */
|
||
.e-fuer__leute {
|
||
display: grid; gap: 8px;
|
||
grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
|
||
margin: 0 0 12px;
|
||
}
|
||
.e-fuer__karte {
|
||
display: flex; align-items: center; gap: 10px;
|
||
padding: 9px 12px;
|
||
border-radius: var(--radius-klein, 12px);
|
||
border: 1px solid var(--rand);
|
||
background: rgba(255, 255, 255, .03);
|
||
cursor: pointer;
|
||
/* 44 px ist das Mindestmaß für einen Daumen (WCAG 2.5.8 verlangt
|
||
24, das Haus nimmt 44). Über min-height, damit lange Namen die
|
||
Karte wachsen lassen statt sie zu sprengen. */
|
||
min-height: 52px;
|
||
transition: border-color var(--tempo), background var(--tempo);
|
||
}
|
||
.e-fuer__karte:hover {
|
||
border-color: color-mix(in srgb, var(--akzent) 45%, transparent);
|
||
background: rgba(255, 255, 255, .06);
|
||
}
|
||
/* GEWÄHLT SIEHT ANDERS AUS. `:has()` statt einer Klasse aus dem
|
||
Skript: Der Zustand steht schon im Kästchen -- ihn zusätzlich als
|
||
Klasse zu führen wären zwei Wahrheiten, und eine davon läuft
|
||
irgendwann nach. */
|
||
.e-fuer__karte:has(input:checked) {
|
||
border-color: color-mix(in srgb, var(--akzent) 62%, transparent);
|
||
background: color-mix(in srgb, var(--akzent) 13%, transparent);
|
||
}
|
||
.e-fuer__karte:has(input:focus-visible) {
|
||
outline: 2px solid var(--akzent); outline-offset: 2px;
|
||
}
|
||
.e-fuer__karte input { width: 19px; height: 19px; flex: none; cursor: pointer; }
|
||
|
||
.e-fuer__zeichen {
|
||
width: 30px; height: 30px; border-radius: 50%; flex: none;
|
||
display: grid; place-items: center;
|
||
font-size: .8rem; font-weight: 700;
|
||
color: color-mix(in srgb, var(--akzent) 78%, #ffffff);
|
||
background: color-mix(in srgb, var(--akzent) 15%, transparent);
|
||
border: 1px solid color-mix(in srgb, var(--akzent) 30%, transparent);
|
||
}
|
||
.e-fuer__text { display: grid; gap: 1px; min-width: 0; }
|
||
.e-fuer__name {
|
||
font-size: .9rem; font-weight: 650; color: var(--text);
|
||
overflow-wrap: anywhere;
|
||
}
|
||
.e-fuer__rolle { font-size: .74rem; color: var(--text-still); }
|
||
|
||
@media (forced-colors: active) {
|
||
.e-fuer__karte { border: 1px solid CanvasText; }
|
||
.e-fuer__karte:has(input:checked) { border: 2px solid Highlight; }
|
||
.e-fuer__kurz { border: 1px solid CanvasText; }
|
||
}
|
||
|
||
/* =====================================================================
|
||
„WIE GEHT'S DIR?" IST EINE FLÄCHE (23.09.2026)
|
||
=====================================================================
|
||
|
||
Filipe: „ich will dass diese seite viel übersichtlicher aussieht,
|
||
es soll eine riesßen kachel sein wo alles viel besser und geiler
|
||
aussieht."
|
||
|
||
---------------------------------------------------------------------
|
||
WAS AUF SEINEM BILDSCHIRMFOTO WIRKLICH SCHIEFLIEGT
|
||
|
||
Die Fragen lagen als einzelne Kacheln in zwei Spalten, und die
|
||
Gruppenköpfe lagen FLACH dazwischen — im selben Raster. Dadurch
|
||
rutschte der Kopf einer Gruppe neben die Fragen einer anderen:
|
||
„Miteinander" steht links unten neben den Fragen von „Klarheit &
|
||
Rückhalt".
|
||
|
||
Das ist nicht nur unruhig, es ist falsch. Eine Überschrift, die
|
||
neben fremdem Inhalt steht, ordnet den falschen zu.
|
||
|
||
Deshalb gehört jetzt jede Gruppe zusammen (ein `<section>` mit Kopf
|
||
und eigenem Raster, gebaut in befinden.js), und alle Gruppen liegen
|
||
in EINER Fläche. Getrennt wird durch eine Linie statt durch eine
|
||
Lücke — dieselbe Entscheidung wie bei den Regeln am 22.09.
|
||
===================================================================== */
|
||
.b-flaeche {
|
||
position: relative;
|
||
margin: 0 0 18px;
|
||
padding: 18px 22px 22px;
|
||
background:
|
||
linear-gradient(170deg,
|
||
color-mix(in srgb, var(--akzent) 9%, transparent) 0%,
|
||
color-mix(in srgb, var(--akzent) 3%, transparent) 18%,
|
||
transparent 34%),
|
||
color-mix(in srgb, var(--tinte, #0a0f18) 94%, #ffffff 6%);
|
||
border: 1px solid var(--rand);
|
||
border-radius: var(--radius-klein, 12px);
|
||
}
|
||
@media (max-width: 620px) { .b-flaeche { padding: 14px 14px 16px; } }
|
||
|
||
/* ---- Der eigene Stand ------------------------------------------------ */
|
||
.b-stand { margin: 0 0 18px; }
|
||
.b-stand__bahn {
|
||
height: 6px; border-radius: 999px; overflow: hidden;
|
||
background: rgba(255, 255, 255, .07);
|
||
}
|
||
.b-stand__fuellung {
|
||
display: block; height: 100%; width: 0; border-radius: 999px;
|
||
background: linear-gradient(90deg,
|
||
color-mix(in srgb, var(--akzent) 90%, #ffffff),
|
||
color-mix(in srgb, var(--akzent) 55%, transparent));
|
||
transition: width var(--tempo, .2s) ease;
|
||
}
|
||
.b-stand__wort {
|
||
margin: 7px 0 0;
|
||
font-size: .8rem; font-weight: 600;
|
||
color: var(--text-leise);
|
||
}
|
||
/* Fertig ist eine gute Nachricht und darf so aussehen. */
|
||
.b-stand[data-fertig="ja"] .b-stand__wort {
|
||
color: color-mix(in srgb, var(--scout-haupt, #8fd6a6) 76%, #ffffff);
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.b-stand__fuellung { transition: none; }
|
||
}
|
||
|
||
/* ---- Die Gruppen darin ----------------------------------------------- */
|
||
.b-gruppe {
|
||
padding: 20px 0 0;
|
||
border-top: 1px solid color-mix(in srgb, var(--rand) 70%, transparent);
|
||
margin-top: 20px;
|
||
}
|
||
.b-gruppe:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
|
||
|
||
/* Der Kopf bekommt einen Balken in der Farbe seiner Gruppe. Die
|
||
Nummer setzt befinden.js als `--gruppe-nr`; die Farbe entsteht
|
||
daraus, nicht aus einer Liste im Skript — sechs Farbnamen dort
|
||
wären eine zweite Farbliste neben dem Haus. */
|
||
.b-flaeche .e-feld {
|
||
display: grid; gap: 3px;
|
||
margin: 0 0 12px; padding: 0 0 0 13px;
|
||
position: relative;
|
||
}
|
||
.b-flaeche .e-feld::before {
|
||
content: ""; position: absolute; left: 0; top: 2px; bottom: 2px;
|
||
width: 4px; border-radius: 2px;
|
||
background: linear-gradient(180deg,
|
||
hsl(calc(var(--gruppe-nr, 0) * 47 + 190) 70% 68%),
|
||
hsl(calc(var(--gruppe-nr, 0) * 47 + 190) 70% 68% / .25));
|
||
}
|
||
.b-flaeche .e-feld__wort {
|
||
margin: 0; font-size: 1.04rem; font-weight: 700;
|
||
display: flex; align-items: center; gap: 9px;
|
||
}
|
||
.b-flaeche .e-feld__text {
|
||
margin: 0; font-size: .86rem; color: var(--text-leise); line-height: 1.55;
|
||
}
|
||
|
||
/* Die Fragen einer Gruppe nebeneinander -- aber IMMER innerhalb ihrer
|
||
Gruppe, nie über sie hinaus. Genau das ging vorher schief. */
|
||
.b-gruppe__fragen {
|
||
display: grid; gap: 10px;
|
||
grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr));
|
||
align-items: start;
|
||
}
|
||
|
||
/* Die Frage ist in der Fläche keine eigene Kachel mehr, sondern ein
|
||
flaches Feld: ein Rahmen, kein Kasten mit Schatten und Fase. Zwölf
|
||
Kacheln in einer Kachel sind eine Kachel zu viel. */
|
||
.b-flaeche .e-punkt {
|
||
background: rgba(255, 255, 255, .028);
|
||
border: 1px solid var(--rand);
|
||
border-radius: var(--radius-klein, 12px);
|
||
box-shadow: none;
|
||
clip-path: none;
|
||
}
|
||
/* Beantwortet sieht man an der linken Kante -- ohne die muss man die
|
||
Knöpfe lesen, um zu wissen, ob schon etwas dasteht. */
|
||
.b-flaeche .e-punkt[data-stufe] {
|
||
border-left: 3px solid color-mix(in srgb, var(--akzent) 55%, transparent);
|
||
}
|
||
|
||
@media (forced-colors: active) {
|
||
.b-flaeche { border: 1px solid CanvasText; }
|
||
.b-gruppe { border-top: 1px solid CanvasText; }
|
||
.b-flaeche .e-feld::before { background: CanvasText; }
|
||
}
|