DogFatherGitandClaude Opus 5
721ad262df
VanVan im Support: „Deine Karte im Bereich eure Aufgaben kann man
noch nicht einklappen, was die Seite unnötig lang zieht und
unübersichtlich macht."
GEMESSEN (mess-vanvan-karte, Abschnitt 5). Es ist IHRE eigene Karte,
nicht die eines Modi -- im Bildschirmfoto steht an jedem Punkt „1 ×
Läuft", also eine einzige Antwort. Ueber die rechte Hand urteilt nur
DogFather; bei ihr ist deshalb alles durch und die Karte entsprechend
lang, waehrend ein Modi zwei Stimmen braucht.
vorher nachher
Seite gesamt 7245 px 2945 px
davon „Deine Karte" 6186 px 1886 px (zugeklappt 636 px)
Schalter 0 6 + „Alle"-Knopf
6186 von 7245 px waren eine einzige Karte -- 85 Prozent der Seite,
68 Zeilen am Stueck, kein einziger Schalter.
DERSELBE MECHANISMUS WIE NEBENAN, NICHT EIN ZWEITER. Die Karte der
Leitung klappt seit Langem auf und zu. Die Klassen, der Pfeil, die
Zahl im Kopf und der Knopf „Alle auf-/zuklappen" sind dieselben --
ein zweiter Mechanismus daneben waere der, der beim naechsten Umbau
vergessen wird, und er saehe anders aus, obwohl er dasselbe tut.
Herausgeloest als `klappAbschnitt()`.
WELCHER STEHT OFFEN: Was ich TUN soll („Deine Aufgaben"), und von den
Beobachtungen die erste Kategorie. Alle zu hiesse „jedes Mal erst
suchen", alle auf waere der Zustand von vorher.
DIE ZAHL STEHT IM KOPF (14, 12, 12, 11, 10, 9). Eine zugeklappte
Kategorie, die nicht sagt, wie viel in ihr steckt, klappt man einmal
auf und danach nie wieder zu.
GEPRUEFT
Die Messung ist jetzt selbst die Wache: Sie schlaegt an, wenn es
keine Schalter gibt (so ist der Befund entstanden), wenn Zuklappen
weniger als die Haelfte spart, und wenn es Schalter ohne
„Alle"-Knopf gibt. Alle drei nachgestellt. Ein ANTEIL und keine feste
Pixelzahl -- 68 Punkte heute, vielleicht 90 naechstes Jahr.
pruef-entwicklung 79/0, pruef-werdegang 103/0,
pruef-entwicklung-kacheln 34/0, pruef-css-klassen,
pruef-zwischenspeicher 34/0.
Co-Authored-By: Claude Opus 5 <[email protected]>
2787 lines
109 KiB
CSS
2787 lines
109 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
|
||
------------------------------------------------------------------- */
|
||
|
||
/* DIE ÜBERSCHRIFT STEHT AUF EINER FLÄCHE, NICHT AUF DEM FOTO
|
||
(24.09.2026).
|
||
|
||
Gemessen von pruef-buehne: „Wen gehst du durch?" kam auf 1,79:1 --
|
||
nötig sind 4,5:1. Gemessen wurde auf rgb(123,95,67), einer hellen
|
||
Stelle des Hintergrundbildes. Die Überschrift war dort praktisch
|
||
unsichtbar, und zwar genau über der Personenliste, die Filipe heute
|
||
umbauen ließ.
|
||
|
||
Die Prüfung war seit Tagen rot und ist mir erst beim Umbau
|
||
aufgefallen -- ein roter Befund, den niemand mehr liest, sichert
|
||
nichts. (Der zweite ihrer Befunde, treff-regeln.html, steht noch
|
||
offen.)
|
||
|
||
DIE ANTWORT IST KEINE HELLERE SCHRIFT, SONDERN EINE DECKENDE
|
||
FLÄCHE. Über einem Foto lässt sich Lesbarkeit nicht ausrechnen --
|
||
das Dahinter wechselt von Motiv zu Motiv, und beim nächsten Bild
|
||
wäre auch Weiß zu wenig. Dieselbe Entscheidung wie bei der Karte
|
||
weiter unten („Die Karte bekommt eine eigene Fläche", 15.09.2026)
|
||
und bei den Gruppenköpfen auf unterstuetzen.css. */
|
||
.e-abschnitt {
|
||
display: inline-flex; align-items: baseline;
|
||
margin: 26px 0 12px;
|
||
padding: 6px 13px;
|
||
border: 1px solid var(--rand); border-radius: 999px;
|
||
background: var(--flaeche);
|
||
font-size: .82rem;
|
||
font-weight: 650;
|
||
letter-spacing: .09em;
|
||
text-transform: uppercase;
|
||
color: var(--text-leise);
|
||
}
|
||
|
||
/* ---------------------------------------------------------------------
|
||
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 — DIE STANDKARTE (24.09.2026)
|
||
=====================================================================
|
||
|
||
Filipe: „mach das bitte viel krasser und viel geiler. die aufgaben
|
||
die wir verteilen sollen da auch zu sehen sein und so. viel
|
||
übersichtlicher, viel moderner."
|
||
|
||
VORHER: Name, Rolle, ein flacher Balken und drei Zahlenkästen —
|
||
bei sechs Leuten also achtzehn Kästen, und auf Filipes Bildschirm-
|
||
foto stand in fünfen davon dasselbe (0 / 68 / 0). Viel Fläche für
|
||
eine einzige Auskunft, und die Aufgaben, die eine Handbreit
|
||
darunter verteilt werden, kamen gar nicht vor.
|
||
|
||
JETZT drei Zonen, von oben nach unten in der Reihenfolge, in der
|
||
man fragt:
|
||
|
||
KOPF Ring + Name + Rolle. Der Ring trägt seinen Anteil in der
|
||
Mitte — Form und Zahl an derselben Stelle. Sechs Ringe
|
||
untereinander vergleicht man, ohne zu lesen.
|
||
AUFTRAG Was bei der Person liegt: wie viele offen, wie viele
|
||
überfällig, und die nächste mit Namen und Frist. Als
|
||
abgesetzter Streifen mit farbiger Kante — das ist die
|
||
Zone, die sich ändert, während man arbeitet.
|
||
FUSS „46 von 68 angesehen", und nur wenn es etwas gibt:
|
||
„3 verschieden gesehen".
|
||
|
||
AUGENSCHONEND (Hausregel): kein Leuchten, kein Farbverlauf, der
|
||
blendet, keine Ampel auf dem Ring. Die einzige warme Farbe der
|
||
Kachel steht an der Kante des Auftragsstreifens, und auch nur
|
||
dann, wenn wirklich eine Frist überschritten ist — ein Maßstab,
|
||
der nicht geraten ist. Bewegung gibt es allein beim Ring, und die
|
||
fällt bei „prefers-reduced-motion" weg.
|
||
|
||
WARUM SPANS UND KEINE DIVS: Die Kachel ist ein <button>, und der
|
||
darf laut HTML nur Fließtext enthalten. Ein <div> darin wird zwar
|
||
angezeigt, ist aber ungültig — und ungültige Verschachtelung ist
|
||
genau die Sorte Fehler, die erst irgendwann und dann in einem
|
||
einzigen Browser auffällt. Die Spans stehen hier auf display:flex.
|
||
------------------------------------------------------------------- */
|
||
/* GITTER STATT FLIESSREIHE (gemessen am 24.09.2026).
|
||
|
||
Vorher standen die Kacheln in einer umbrechenden Reihe mit
|
||
„flex: 1 1 340px“. Das sieht bei sechs Leuten gut aus und bei sieben
|
||
falsch: Die letzte Kachel steht allein in ihrer Zeile und WÄCHST auf
|
||
die volle Breite — gemessen 1160 px neben 379 px der anderen. Eine
|
||
Person sah dadurch dreimal so wichtig aus wie die davor, und zwar
|
||
aus dem einzigen Grund, dass die Teamgröße ungerade ist.
|
||
|
||
Ein Gitter mit „auto-fill“ legt feste Spalten an. Die letzte Kachel
|
||
bleibt dann so breit wie jede andere, und die Zeile endet mit Luft
|
||
statt mit einer aufgeblähten Person.
|
||
|
||
„minmax(320px, 1fr)“ statt einer Spaltenzahl: Wie viele hineinpassen,
|
||
rechnet der Browser aus der Breite aus — eine feste Zahl wäre wieder
|
||
eine Rechnung von gestern, und beim siebten Teammitglied falsch. */
|
||
.e-personen {
|
||
display: grid; gap: 12px;
|
||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||
}
|
||
|
||
.e-person {
|
||
display: flex; flex-direction: column; gap: 11px;
|
||
/* Ohne das sprengt ein langer Aufgabentitel die Spalte, statt
|
||
abgeschnitten zu werden: Ein Gitterfeld ist von Haus aus mindestens
|
||
so breit wie sein Inhalt. */
|
||
min-width: 0;
|
||
padding: 14px 16px 13px; text-align: left; cursor: pointer;
|
||
font: inherit;
|
||
background: color-mix(in srgb, var(--tinte) 94%, #ffffff 6%);
|
||
border: 1px solid var(--rand);
|
||
border-radius: var(--radius-klein, 12px);
|
||
transition: border-color .16s ease, background-color .16s ease;
|
||
}
|
||
.e-person:hover, .e-person:focus-visible {
|
||
border-color: color-mix(in srgb, var(--akzent) 45%, transparent);
|
||
}
|
||
|
||
/* ---- Kopf: Ring, Name, Rolle -------------------------------------- */
|
||
.e-person__kopf { display: flex; align-items: center; gap: 12px; }
|
||
.e-person__wer {
|
||
display: flex; flex-direction: column; gap: 2px;
|
||
/* Ohne das schiebt ein langer Name den Ring aus der Kachel. */
|
||
min-width: 0;
|
||
}
|
||
.e-person__name {
|
||
font-size: .99rem; font-weight: 640; color: var(--text);
|
||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||
}
|
||
.e-person__rolle { font-size: .78rem; color: var(--text-still); }
|
||
|
||
/* DER RING.
|
||
|
||
Der Kreis im SVG hat den Umfang 100 (r = 15,9155) — deshalb ist
|
||
stroke-dasharray: 68 100 buchstäblich „68 Prozent", ohne
|
||
Umrechnung im Kopf und ohne eine Grafik je Stand.
|
||
|
||
Gedreht wird die ganze Zeichnung um eine Vierteldrehung nach
|
||
links, damit der Bogen oben beginnt und im Uhrzeigersinn läuft.
|
||
Ein Fortschritt, der auf drei Uhr anfängt, liest sich falsch.
|
||
|
||
KEINE AMPELFARBE. Was „genug" ist, hängt davon ab, wie lange
|
||
jemand dabei ist; eine Schwelle wäre geraten und bei der nächsten
|
||
Person falsch. Der Ring sagt WIE WEIT und urteilt nicht. */
|
||
.e-ring {
|
||
position: relative; flex: 0 0 auto;
|
||
width: 54px; height: 54px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
line-height: 1;
|
||
}
|
||
.e-ring__bild {
|
||
position: absolute; inset: 0; width: 100%; height: 100%;
|
||
transform: rotate(-90deg);
|
||
}
|
||
/* Die Spur muss man SEHEN — sonst ist ein Ring bei 0 % gar kein Ring,
|
||
sondern eine leere Stelle neben dem Namen, und die Kachel sieht aus,
|
||
als fehle dort etwas. Gemessen am ersten Bildschirmfoto: bei 70 %
|
||
Rand war sie auf dem dunklen Grund praktisch weg. */
|
||
.e-ring__spur {
|
||
stroke: color-mix(in srgb, var(--rand-hell) 62%, transparent);
|
||
stroke-width: 3;
|
||
}
|
||
.e-ring__bogen {
|
||
stroke: color-mix(in srgb, var(--akzent) 72%, transparent);
|
||
stroke-width: 3.2; stroke-linecap: round;
|
||
transition: stroke-dasharray .38s ease;
|
||
}
|
||
/* Runde Enden zeichnen schon bei „0 100" einen Punkt auf zwölf Uhr —
|
||
der sieht aus wie ein Fehler, nicht wie ein Anfang. */
|
||
.e-ring[data-leer="ja"] .e-ring__bogen { stroke-linecap: butt; }
|
||
/* Wer alles angesehen hat, bekommt einen ruhigen vollen Ring — kein
|
||
Grün, keine Feier: Es ist der Normalzustand, nicht ein Preis. */
|
||
.e-ring[data-voll="ja"] .e-ring__bogen {
|
||
stroke: color-mix(in srgb, var(--akzent) 88%, transparent);
|
||
}
|
||
.e-ring__zahl {
|
||
font-size: 1.04rem; font-weight: 660; color: var(--text);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
/* NICHT UNTER 0,72 rem — das sind 11,52 px, die Untergrenze des
|
||
Hauses (siehe pruef-css-klassen). Mein erster Entwurf hatte hier
|
||
.62rem, weil das Prozentzeichen neben der Ziffer nur ein Beiwerk
|
||
ist. Das stimmt gestalterisch und ist trotzdem falsch: Augenschonung
|
||
ist Pflicht, nicht Geschmack, und „ist ja nur ein Zeichen" gilt
|
||
nicht für den, der es nicht lesen kann. Klein genug bleibt es
|
||
ohnehin — die Ziffer daneben ist 16,6 px. */
|
||
.e-ring__prozent {
|
||
margin-left: 1px; font-size: .72rem; color: var(--text-leise);
|
||
align-self: center;
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.e-ring__bogen { transition: none; }
|
||
}
|
||
|
||
/* ---- Der Auftragsstreifen ----------------------------------------- */
|
||
/* DAS IST DER TEIL, DEN FILIPE VERMISST HAT. Er verteilt die Aufgaben
|
||
eine Handbreit weiter unten; die Kachel darüber wusste nichts davon.
|
||
|
||
Abgesetzt, mit eigener Kante: Es ist die einzige Zone der Kachel,
|
||
die sich ändert, während man arbeitet. Alles andere ist Stand. */
|
||
.e-person__auftrag {
|
||
display: flex; flex-direction: column; gap: 3px;
|
||
padding: 9px 11px;
|
||
border: 1px solid var(--rand);
|
||
border-left: 3px solid color-mix(in srgb, var(--akzent) 52%, transparent);
|
||
border-radius: 9px;
|
||
background: color-mix(in srgb, #ffffff 3.5%, transparent);
|
||
}
|
||
/* „Nichts offen" ist auch eine Antwort — und zwar die, nach der man
|
||
beim Verteilen sucht. Sie bleibt stehen, nur leise: Wäre der
|
||
Streifen ganz weg, sähe die Kachel aus, als fehle dort etwas. */
|
||
.e-person__auftrag[data-leer="ja"] {
|
||
/* OHNE KASTEN, ABER MIT DERSELBEN KANTE.
|
||
|
||
Mit vollem Rahmen sah die Zeile auf dem ersten Bildschirmfoto aus
|
||
wie ein leeres Eingabefeld — man greift hin und kann nichts
|
||
eintippen. Ein Rahmen verspricht, dass man etwas tun kann.
|
||
|
||
Die linke Kante bleibt trotzdem stehen, nur gedämpft. Dadurch
|
||
liegen alle Auftragsstreifen der Reihe auf derselben senkrechten
|
||
Linie, und die KANTE wird zur eigentlichen Auskunft: gedämpft =
|
||
nichts offen, blau = es liegt etwas an, warm = eine Frist ist
|
||
vorbei. Das liest man, ohne eine Zeile zu lesen. */
|
||
border: none; background: none;
|
||
border-left: 3px solid color-mix(in srgb, var(--rand) 60%, transparent);
|
||
border-radius: 0;
|
||
padding: 2px 0 2px 11px;
|
||
}
|
||
.e-person__auftrag[data-spaet="ja"] {
|
||
border-left-color: color-mix(in srgb, var(--warn) 58%, transparent);
|
||
}
|
||
.e-person__auftrag-kopf {
|
||
display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 7px;
|
||
}
|
||
.e-person__auftrag-zahl {
|
||
font-size: 1.16rem; font-weight: 680; color: var(--text);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.e-person__auftrag-wort { font-size: .8rem; color: var(--text-still); }
|
||
/* Das Einzige auf der Kachel, das warnt — und nur, wenn eine Frist
|
||
wirklich vorbei ist. Ein Maßstab, der nicht geraten ist. */
|
||
.e-person__auftrag-spaet {
|
||
margin-left: auto;
|
||
font-size: .72rem; font-weight: 620;
|
||
padding: 2px 9px; border-radius: 999px;
|
||
color: color-mix(in srgb, var(--warn) 50%, #ffffff);
|
||
border: 1px solid color-mix(in srgb, var(--warn) 42%, transparent);
|
||
background: color-mix(in srgb, var(--warn) 9%, transparent);
|
||
}
|
||
/* Untereinander, nicht nebeneinander: Ein langer Aufgabentitel würde
|
||
die Frist sonst auf eine zweite Zeile drücken und dort allein
|
||
stehen lassen — man liest sie dann als eigene Angabe. */
|
||
.e-person__auftrag-naechste {
|
||
display: flex; flex-direction: column; gap: 1px; min-width: 0;
|
||
}
|
||
.e-person__auftrag-titel {
|
||
font-size: .82rem; color: var(--text);
|
||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||
}
|
||
.e-person__auftrag-frist { font-size: .74rem; color: var(--text-leise); }
|
||
.e-person__auftrag-frist[data-spaet="ja"] {
|
||
color: color-mix(in srgb, var(--warn) 48%, #ffffff); font-weight: 600;
|
||
}
|
||
.e-person__auftrag-leer { font-size: .79rem; color: var(--text-leise); }
|
||
|
||
/* ---- Der Fuß ------------------------------------------------------- */
|
||
.e-person__fuss {
|
||
display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 12px;
|
||
font-size: .76rem; color: var(--text-leise);
|
||
/* NACH UNTEN GESCHOBEN. Kacheln in einer Reihe sind gleich hoch, die
|
||
Inhalte verschieden lang — ohne das hing die feine Zeile bei der
|
||
einen mittendrin und bei der anderen unten, und dazwischen stand
|
||
ein Loch. Jetzt liegen sie auf einer Linie, und das Auge liest die
|
||
Reihe quer statt jede Kachel einzeln. */
|
||
margin-top: auto; padding-top: 2px;
|
||
}
|
||
.e-person__stand-zahl {
|
||
color: var(--text-still); font-weight: 650;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.e-person__stand[data-voll="ja"] .e-person__stand-zahl {
|
||
color: color-mix(in srgb, var(--gut, #79d1a2) 45%, #ffffff);
|
||
}
|
||
/* „verschieden gesehen" ist die einzige Zahl dieser Seite, die zu
|
||
einer Handlung führt — dort lohnt das Gespräch. Steht dort eine
|
||
Null, steht sie gar nicht erst da (siehe entwicklung.js). */
|
||
.e-person__abw {
|
||
font-weight: 620;
|
||
color: color-mix(in srgb, #e0a33c 42%, #ffffff);
|
||
}
|
||
.e-person__alt { color: var(--text-still); }
|
||
|
||
/* WER BRAUCHT AUFMERKSAMKEIT? Liegt bei jemandem etwas Überfälliges,
|
||
sieht man das an der ganzen Kachel, nicht erst am Streifen darin —
|
||
gedämpft, kein Signalrot: Es ist ein Hinweis, kein Alarm. */
|
||
.e-person:has(.e-person__auftrag[data-spaet="ja"]) {
|
||
border-color: color-mix(in srgb, var(--warn) 32%, var(--rand));
|
||
}
|
||
|
||
/* 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%);
|
||
}
|
||
.e-person[aria-pressed="true"] .e-ring__bogen {
|
||
stroke: color-mix(in srgb, var(--akzent) 90%, transparent);
|
||
}
|
||
|
||
/* ---------------------------------------------------------------------
|
||
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: "\2713";
|
||
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; }
|
||
}
|
||
|
||
|
||
/* =====================================================================
|
||
DIE PERSONENWAHL AUF DEM HANDY (23.09.2026, neu gefasst 24.09.2026)
|
||
=====================================================================
|
||
|
||
Filipe: „ich will dass du die so krass uebersichtlich machst."
|
||
|
||
Gemessen damals: sechs Kacheln, 1176 px, alle untereinander —
|
||
anderthalb Bildschirme nur für die Frage „wen nehme ich mir vor".
|
||
Antwort war und bleibt: zwei nebeneinander.
|
||
|
||
NEU GEFASST, WEIL DIE KACHEL EINE ANDERE IST. Hier stand bis
|
||
heute eine Regel, die die drei Bilanz-Kästen am Handy
|
||
untereinander legte. Die Kästen gibt es nicht mehr; die Regel
|
||
hätte nichts mehr getroffen und beim nächsten Lesen erklärt,
|
||
wie eine Kachel aussieht, die es nicht mehr gibt.
|
||
|
||
WAS AM HANDY KLEINER WIRD: der Ring (54 → 44 px) und die
|
||
Innenabstände. WAS NICHT WEGFÄLLT: der Auftragsstreifen. Er ist
|
||
der Grund, warum diese Kachel neu gebaut wurde — wer am Handy
|
||
verteilt, braucht ihn genauso. Die „überfällig"-Marke rutscht
|
||
bei Platzmangel von selbst in die zweite Zeile (flex-wrap),
|
||
statt den Text zu quetschen. */
|
||
@media (max-width: 620px) {
|
||
/* Zwei je Zeile — ausdrücklich, nicht über „auto-fill“: 390 px
|
||
Handybreite liegen unter der 320-px-Spalte, der Browser würde also
|
||
von selbst eine einzige Spalte legen. Genau das war der Zustand,
|
||
über den Filipe sich beschwert hat („anderthalb Bildschirme nur für
|
||
die Frage, wen ich mir vornehme"). */
|
||
.e-personen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||
.e-person {
|
||
padding: 11px 12px 10px; gap: 9px;
|
||
}
|
||
.e-person__kopf { gap: 9px; }
|
||
.e-ring { width: 44px; height: 44px; }
|
||
.e-ring__zahl { font-size: .9rem; }
|
||
.e-person__name { font-size: .93rem; }
|
||
.e-person__rolle { font-size: .72rem; }
|
||
.e-person__auftrag { padding: 7px 9px; }
|
||
.e-person__auftrag-zahl { font-size: 1.05rem; }
|
||
/* NICHT UNTER 11,5 px — das ist die Grenze des Hauses, und sie
|
||
steht dort aus einem Grund: Augenschonung ist Pflicht, nicht
|
||
Geschmack. Ein früherer Entwurf hatte hier .7rem (11,2 px) und
|
||
wurde von pruef-css-klassen gefangen. */
|
||
.e-person__auftrag-wort,
|
||
.e-person__auftrag-titel { font-size: .78rem; }
|
||
.e-person__auftrag-frist,
|
||
.e-person__auftrag-spaet,
|
||
.e-person__fuss { font-size: .73rem; }
|
||
}
|
||
/* Ganz schmal (320 px) wieder eine je Zeile: Zwei Kacheln haetten dort
|
||
je 145 px, und "verschieden gesehen" braucht mehr. Eine Zahl, die
|
||
man nicht lesen kann, ist keine. */
|
||
@media (max-width: 380px) {
|
||
.e-personen { grid-template-columns: 1fr; }
|
||
}
|
||
|
||
|
||
/* DER FORTSCHRITTSBALKEN IST WEG (24.09.2026).
|
||
|
||
Hier stand seit dem 23.09. eine schmale Spur unter dem Namen —
|
||
der Vorgänger des Rings. Sie beantwortete dieselbe Frage (wer
|
||
ist wie weit), brauchte dafür aber die ganze Kachelbreite und
|
||
ließ offen, wovon der Anteil ist; die Zahl dazu stand in einem
|
||
Kasten darunter.
|
||
|
||
Der Ring weiter oben trägt beides an derselben Stelle und gibt
|
||
die Breite für die Aufgaben frei, die Filipe hier sehen will.
|
||
|
||
ENTFERNT STATT STEHENGELASSEN: Eine Regel, die nichts mehr
|
||
trifft, liest man beim nächsten Mal als den Weg, wie ein
|
||
Fortschritt auf dieser Seite aussieht — und baut ihn neben den
|
||
Ring ein zweites Mal. */
|
||
|
||
/* EINE NULL IST KEINE WARNUNG — und steht seit dem 24.09.2026 gar
|
||
nicht mehr da.
|
||
|
||
Hier wurde der Kasten „verschieden gesehen" gedämpft, wenn eine
|
||
Null darin stand: gleiche Größe, gleicher Platz, nur leiser. Das
|
||
war der halbe Schritt. Der ganze steht jetzt in entwicklung.js —
|
||
bei null erscheint die Angabe überhaupt nicht.
|
||
|
||
Der Grund ist derselbe geblieben: Bei sechs Leuten wären es sechs
|
||
Nullen, die aussehen wie Warnungen, und die echte siebte fällt
|
||
dann nicht mehr auf. */
|
||
|
||
/* =====================================================================
|
||
WELCHE PUNKTE GELTEN FUER DIESEN MENSCHEN (25.09.2026)
|
||
=====================================================================
|
||
|
||
Filipe: „ich will dass die rechte hand und ich diese aufgaben die es
|
||
da gibt, individuel aussuchen koennen wer welche aufgabe bekommt.
|
||
bis dahin sollen die keine aufgaben sehen."
|
||
===================================================================== */
|
||
|
||
/* Der Knopf steht neben „Notizen zu dieser Person" -- beides sind
|
||
Wege, die von der Karte wegfuehren, und beide sehen gleich aus.
|
||
Ist noch nichts ausgesucht, traegt er die Akzentfarbe: Dann ist er
|
||
nicht eine Moeglichkeit unter vielen, sondern der naechste Schritt. */
|
||
.e-karte__waehlen { cursor: pointer; font: inherit; }
|
||
.e-karte__waehlen[data-leer="ja"] {
|
||
border-color: color-mix(in srgb, var(--akzent) 55%, transparent);
|
||
color: color-mix(in srgb, var(--akzent) 25%, #ffffff);
|
||
background: color-mix(in srgb, var(--akzent) 14%, transparent);
|
||
}
|
||
|
||
/* HIER STAND DER LEERKASTEN `.e-leerwahl` -- entfernt am 25.09.2026.
|
||
|
||
Er ersetzte die ganze Karte, solange einer Person nichts zugetragen
|
||
war. Filipe hat das am selben Tag zurueckgenommen: „aber unsere
|
||
sicht von dogfather und rechte hand soll sich nicht aendern." Die
|
||
68 Punkte sind das, woran sich die Leitung entlanghangelt; ob etwas
|
||
davon als Aufgabe zugetragen ist, steht in der Zahl am Knopf und
|
||
als Marke an den einzelnen Zeilen -- es verdeckt die Liste nicht.
|
||
|
||
DER STIL BLIEB EINEN TAG LAENGER STEHEN als das, was ihn benutzt
|
||
hat. `pruef-struktur` hat ihn gefunden („NEUES totes CSS"). Vier
|
||
Regeln, die niemand mehr trifft, sind kein Schaden -- aber beim
|
||
naechsten Umbau liest sie jemand und haelt sie fuer eine Vorgabe.
|
||
Deshalb weg, und die Begruendung bleibt an ihrer Stelle stehen.
|
||
|
||
/* ---- Der Auswahl-Dialog -------------------------------------------- */
|
||
.e-punktwahl__satz {
|
||
margin: 0 0 10px; font-size: .9rem; line-height: 1.5; color: var(--text-leise);
|
||
}
|
||
/* Die laufende Zahl steht OBEN und nicht bei den Knoepfen: Man liest
|
||
sie waehrend des Auswaehlens, nicht danach. */
|
||
.e-punktwahl__zahl {
|
||
margin: 0 0 14px; padding: 7px 12px;
|
||
border-radius: 10px;
|
||
background: rgba(255, 255, 255, .04);
|
||
font-size: .86rem; font-weight: 650; color: var(--text-leise);
|
||
}
|
||
.e-punktwahl__zahl[data-leer="ja"] {
|
||
color: color-mix(in srgb, var(--warn) 30%, #ffffff);
|
||
background: color-mix(in srgb, var(--warn) 12%, transparent);
|
||
}
|
||
.e-punktwahl__block { margin: 0 0 16px; }
|
||
.e-punktwahl__kopf {
|
||
display: flex; align-items: center; gap: 10px;
|
||
padding: 8px 10px; margin: 0 0 6px;
|
||
border-radius: 10px;
|
||
background: rgba(255, 255, 255, .035);
|
||
}
|
||
.e-punktwahl__blockname {
|
||
font-size: .95rem; font-weight: 750; color: var(--text); cursor: pointer;
|
||
}
|
||
.e-punktwahl__alle { width: 18px; height: 18px; cursor: pointer; }
|
||
.e-punktwahl__liste { display: grid; gap: 2px; padding-left: 4px; }
|
||
/* 44 px hoch, auch wenn der Text nur eine Zeile braucht -- hier werden
|
||
68 Haken gesetzt, und zwar oft am Handy. */
|
||
.e-punktwahl__punkt {
|
||
display: flex; align-items: center; gap: 10px;
|
||
min-height: 44px; padding: 4px 10px;
|
||
border-radius: 9px;
|
||
cursor: pointer;
|
||
}
|
||
.e-punktwahl__punkt:hover { background: rgba(255, 255, 255, .045); }
|
||
.e-punktwahl__punkt input { width: 17px; height: 17px; flex: none; cursor: pointer; }
|
||
.e-punktwahl__titel { font-size: .9rem; line-height: 1.4; color: var(--text-leise); }
|
||
.e-punktwahl__punkt:hover .e-punktwahl__titel { color: var(--text); }
|
||
|
||
/* ---- ZUGETRAGEN: DIESER PUNKT IST EINE AUFGABE (25.09.2026) --------
|
||
|
||
Filipe: „der button soll einfach perfektioniert werden damit wir
|
||
beide sie den jeweiligen als aufgabe geben koennen."
|
||
|
||
Die Liste bleibt vollstaendig -- die Marke sagt, welche Punkte
|
||
diesem Menschen aufgetragen sind. EINE KANTE LINKS UND EIN WORT,
|
||
keine gefaerbte Flaeche: Der Punkt traegt seine Flaeche schon nach
|
||
dem Stand der Einschaetzung; eine zweite Farbe darauf waere eine
|
||
Aussage ueber dieselbe Karte, die man nicht mehr auseinanderhaelt. */
|
||
.e-punkt[data-zugetragen="ja"] {
|
||
box-shadow: inset 3px 0 0 color-mix(in srgb, var(--akzent) 70%, transparent);
|
||
}
|
||
/* AUS DER MARKE WIRD EIN SCHALTER (25.09.2026).
|
||
|
||
Filipe: „ich will sofort über diese aufgaben da spezifisch zuteilen
|
||
kann bitte. bei allen personnen."
|
||
|
||
Hier stand ein Schild, das nur ANZEIGTE. Jetzt ist es der Knopf, mit
|
||
dem man es tut -- an derselben Stelle, an der man es ohnehin
|
||
abliest. Das Auswahlfenster bleibt fuer den anderen Fall: jemanden
|
||
neu einrichten und zwoelf Punkte auf einmal vergeben.
|
||
|
||
ER STEHT IMMER DA, auch wenn nichts zugetragen ist: Auf einem Handy
|
||
gibt es kein Ueberfahren, und einen Knopf, der erst beim Zeigen
|
||
erscheint, gibt es dort nicht.
|
||
|
||
IM RUHEZUSTAND IST ER LEISE -- ein Umriss, kein Schild. 68 gefuellte
|
||
Kaestchen untereinander waeren ein Balken. Zugetragen traegt er
|
||
Farbe UND das Wort: Wer Farben schlecht unterscheidet, saehe sonst
|
||
nur einen etwas anderen Kasten.
|
||
|
||
`min-height: 34px` UND KEINE FESTE HOEHE: Er sitzt IN der
|
||
Ueberschriftszeile eines Punktes, neben der Stufenmarke -- 44 px
|
||
wuerden die Zeile jedes der 68 Punkte aufschieben. Eine
|
||
Mindesthoehe waechst mit, wenn der Text einmal umbricht, und
|
||
pruef-tippziele zaehlt nur FESTE Groessen unter 44. */
|
||
.e-punkt__auftrag {
|
||
flex: none;
|
||
min-height: 34px; padding: 4px 11px;
|
||
display: inline-flex; align-items: center;
|
||
border: 1px solid color-mix(in srgb, var(--akzent) 26%, transparent);
|
||
border-radius: 999px;
|
||
background: none;
|
||
font: inherit;
|
||
font-size: .72rem; font-weight: 700; letter-spacing: .04em;
|
||
text-transform: uppercase;
|
||
color: var(--text-still);
|
||
cursor: pointer;
|
||
transition: color .16s ease, background-color .16s ease, border-color .16s ease;
|
||
}
|
||
.e-punkt__auftrag:hover {
|
||
color: color-mix(in srgb, var(--akzent) 22%, #ffffff);
|
||
border-color: color-mix(in srgb, var(--akzent) 55%, transparent);
|
||
background: color-mix(in srgb, var(--akzent) 10%, transparent);
|
||
}
|
||
.e-punkt__auftrag:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
|
||
.e-punkt__auftrag[aria-pressed="true"] {
|
||
color: color-mix(in srgb, var(--akzent) 22%, #ffffff);
|
||
background: color-mix(in srgb, var(--akzent) 16%, transparent);
|
||
border-color: color-mix(in srgb, var(--akzent) 45%, transparent);
|
||
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--akzent) 32%, transparent);
|
||
}
|
||
.e-punkt__auftrag:disabled { opacity: .5; cursor: default; }
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.e-punkt__auftrag { transition: none; }
|
||
}
|
||
|
||
/* =====================================================================
|
||
VANVANS MELDUNG AUS DEM SUPPORT (30.09.2026)
|
||
|
||
Zwei neue Zeilen, beide leise. Was hier dazukommt, ist eine
|
||
Auskunft, kein Alarm -- und es steht neben 68 anderen Punkten.
|
||
===================================================================== */
|
||
|
||
/* „Er sieht das noch nicht." Steht direkt unter „von dir am ...", in
|
||
derselben Schriftgroesse und demselben Ton wie die Nachbarzeilen --
|
||
es gehoert zu dem, was ich gesetzt habe, und nicht daneben.
|
||
|
||
KEINE WARNFARBE. Es ist kein Fehler und nichts, was jemand falsch
|
||
gemacht hat: Es fehlt schlicht noch eine zweite Einschaetzung. Ein
|
||
rotes Schild an dieser Stelle waere ein Vorwurf an den, der gerade
|
||
richtig gehandelt hat -- und nach dem dritten Mal klickt man es
|
||
weg wie jede Warnung, die immer kommt. */
|
||
.e-punkt__wartet {
|
||
margin: 4px 0 0;
|
||
font-size: .78rem;
|
||
line-height: 1.5;
|
||
color: var(--text-leise);
|
||
display: flex;
|
||
gap: 7px;
|
||
align-items: baseline;
|
||
}
|
||
.e-punkt__wartet::before {
|
||
content: "";
|
||
flex: none;
|
||
width: 6px; height: 6px;
|
||
margin-top: 1px;
|
||
border-radius: 50%;
|
||
/* Gedeckter Bernstein, derselbe Ton wie das Anlassfeld nebenan --
|
||
„liegt an", nicht „kaputt". */
|
||
background: color-mix(in srgb, #c99a62 62%, transparent);
|
||
}
|
||
|
||
/* ---- Die eigenen Aufgaben auf der Karte des Menschen --------------
|
||
|
||
Der Abschnitt steht GANZ OBEN auf seiner Karte, vor den
|
||
Beobachtungen. Das ist die Reihenfolge der Sache: Eine Aufgabe gibt
|
||
es, bevor sie beurteilt wird.
|
||
|
||
Er traegt eine Kante links -- dieselbe Sprache wie die Marke an den
|
||
zugetragenen Punkten der Leitung, damit beide Seiten dasselbe
|
||
meinen, wenn sie dasselbe zeigen. */
|
||
.e-block--auftrag {
|
||
/* NUR DIE KANTE, kein eigener Abstand: Der Abschnitt ist seit dem
|
||
30.09.2026 ein ganz normaler `.e-block` mit Kopf und Koerper --
|
||
er traegt seine Masse schon. Eine zweite Einrueckung daneben
|
||
haette ihn aus der Reihe geschoben. */
|
||
box-shadow: inset 3px 0 0 color-mix(in srgb, var(--akzent) 70%, transparent);
|
||
}
|