Bauplan Etappen 4 und 6: Kachelplatz, Aufstiegskarte, und das Alte raeumt ab

Drei Dinge, die zusammengehoeren, weil sie alle denselben Satz aus
Kapitel 01 des Bauplans beantworten: Wer neu ist, soll nicht alles
gleich wichtig vorgesetzt bekommen.

1) DIE KACHEL STEHT BEIM TEAM OBEN (Kapitel 03)
Gemessen stand "Willkommen & Anleitung" bei einem Modi in der Gruppe
"Community" -- der FUENFTEN von sechs, hinter allen Brettern, die er
moderiert. Der Plan sagt dazu "zusaetzlich als erste Kachel in 'Fuer
dich', weil sie bei ihnen sonst weit unten steht".

Ich habe sie VERSCHOBEN statt verdoppelt, und das ist eine bewusste
Abweichung vom Wortlaut: Zwei Kacheln mit demselben Namen und
demselben Ziel hatte dieses Haus am 19.09. schon einmal (zweimal
"Chat"), und der Satz, der daraus wurde, steht seitdem im Quelltext --
"Zwei gleich benannte Wege zum selben Ort sind schlimmer als ein
fehlender". Das Ziel des Plans ist so erreicht, der Nebeneffekt bleibt
aus. Fuer die Community aendert sich nichts: Bei ihr ist "Community"
die erste Gruppe, dort steht sie schon vorne und breit.
Entschieden wird das an AUSSEN_ROLLEN, nicht an Rollennamen.

2) "NEU FUER DICH" BEIM AUFSTIEG (Kapitel 10, Etappe 6)
Erreicht ein Mitglied "Dabei" oder "Stamm", steht auf der Zentrale
einmal eine Karte mit dem, was jetzt geht, und einem Sprung auf die
passende Karte der Anleitung.

WAS JETZT GEHT, IST ABGELEITET -- aus TREFF_SCHREIBEN, derselben
Tafel, die es auch ENTSCHEIDET. Eine Liste im Code haette beim
naechsten neuen Brett entweder etwas versprochen, das die Person gar
nicht darf, oder verschwiegen, was sie duerfte.

Der Schluessel ist (Person, STUFE) und nicht (Person): Wer von Neu auf
Dabei steigt, bekommt die Karte, und Wochen spaeter beim Sprung auf
Stamm noch einmal, mit anderem Inhalt. Eine einzelne Spalte "schon
gesehen" haette den zweiten Aufstieg verschluckt -- und das waere
niemandem aufgefallen, es fehlt ja nur etwas.

Gemerkt wird beim ZEIGEN, nicht beim Wegklicken. Dieselbe Entscheidung
wie bei der Begruessung, aus demselben gemessenen Grund.

Dazu springt `anleitung.html?karte=<schluessel>` jetzt auf eine
bestimmte Karte. Erst beim Messen fiel auf, dass der Sprung ins Leere
ging, obwohl Karte und Abschnitt richtig waren: Unter den Karten
werden danach noch drei Abschnitte eingehaengt, und das sanfte
Scrollen zielte auf eine Hoehe, die sich dabei verschob. Der Sprung
steht jetzt ganz am Ende des Aufbaus.

3) DAS ABGELOESTE WILLKOMMEN IST WEG
willkommen.html ist seit heute frueh eine Weiterleitung. Der Unterbau
lief aber weiter: eine Schnittstelle, die jede Kachel einer Rolle
gleich ausfuehrlich erklaerte (genau das, was Kapitel 01 als Problem
beschreibt), dazu ein Skript und ein Stilblatt, die keine Seite mehr
lud. Entfernt: server/workspace-willkommen.js, assets/js/willkommen.js,
assets/css/willkommen.css und der Router in index.js.

Aufgefallen ist es, weil pruef-willkommen rot wurde und danach in ihre
Notbremse lief -- eine Pruefung, die eine zurueckgenommene Regel
verteidigt. Sie ist mitgegangen: Die inhaltlichen Fragen beantwortet
jetzt pruef-anleitung; hier bleibt die eine, die sonst niemand stellt
("verliert die alte Adresse jemanden?") plus der Nachweis, dass das
Alte wirklich fort ist. 15 Pruefungen statt der alten Fassung, und der
Rueckgang ist damit erklaert.

Nebenbefund: tools/kachel-regenbogen.mjs verwies auf pruef-willkommen
als Wache ueber den gerechneten CSS-Block. Die Datei hat ihn nie
angesehen -- die Wache ist pruef-kachelfarben. Zeiger berichtigt.

AUSSERDEM: .zeileneditor__weg war 34x34 und das einzige ungedeckte
Tippziel des Hauses (pruef-tippziele war deshalb rot). Er wirft eine
Zeile aus einem Eintrag. Auf Fingergeraeten jetzt 44x44, das Kreuz
mitgerechnet statt geraten. Der Knopf stammt aus einer anderen
Sitzung; ich habe ihn Filipe gemeldet und keine Antwort bekommen --
eine rote Pruefung, die liegen bleibt, wird nach dem zweiten Mal
weggeklickt, deshalb jetzt behoben statt weiter gemeldet.

GEPRUEFT
  pruef-anleitung     137 -> 166 (neu: Kachelplatz je Rolle mit
                      Gegenprobe aufs Agenturhaus, der ganze
                      Aufstiegsweg inkl. ZWEITEM Aufstieg, und die
                      Abnahme-Checkliste aus Kapitel 13 -- 14/29/29/34
                      Karten MIT ihrer Aufteilung 5/4/5, 7/7/15,
                      7/7/15, 8/7/19 und "Nicht deins")
  pruef-willkommen    neu gefasst, 15, gruen
  pruef-sackgassen    14, 145 Kacheln, 0 ins Leere
  pruef-start-ansicht gruen, keine Konsolenfehler
  pruef-rollen        454, gruen (das eine "nicht nachsehbar" ist das
                      Haus-Wechsel-Feld und war immer so)
  pruef-tippziele     13, jetzt 0 Fehlschlaege

Gegenproben gefahren: Umsortierung ausgebaut -> drei FEHL (und die
Meldung zeigte den alten Zustand, Gruppe 5 von 6). Datenbank vor der
Schemaaenderung gesichert (sicherungen/vor-aufstieg-20261006-172614.db,
integrity_check ok).

Im Browser nachgemessen (echte Anmeldung, 390 px, HTTPS-Vorbau):
Karte da, Satz richtig, drei Wege, 0 zu kleine Tippziele, Sprung
landet auf der richtigen Karte, Abschnitt aufgeklappt, im Bild -- und
beim zweiten Aufruf ist sie weg.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
2026-10-06 17:39:35 +02:00
co-authored by Claude Opus 5
parent f09a0c3456
commit 1f0ab7860a
62 changed files with 1598 additions and 1813 deletions
+9
View File
@@ -981,3 +981,12 @@ body[data-rundgang="ja"] [data-rundgang-ziel="ja"] .kachel[data-rundgang-muss="j
.an-stufe__zeile { grid-template-columns: auto 1fr; align-items: baseline; }
.an-stufe__kann, .an-stufe__wann { grid-column: 1 / -1; }
}
/* Die Karte, auf die „Neu für dich" gesprungen ist (06.10.2026).
Eine ruhige Umrandung für ein paar Sekunden — kein Blinken, kein
Leuchten: Sie beantwortet die Frage „welche war gemeint?" und
verschwindet dann wieder. */
.an-karte[data-gesucht="ja"] {
border-color: color-mix(in srgb, var(--akzent) 58%, transparent);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--akzent) 28%, transparent);
}
+22
View File
@@ -2939,6 +2939,28 @@ body[data-ton] .kopf-zeile::before {
.zeileneditor__weg { transition: none; }
}
/* AM FINGER GEMESSEN, NICHT AM BILDSCHIRM (06.10.2026).
34x34 ist mit der Maus bequem und mit dem Daumen zu klein --
pruef-tippziele hat genau diesen Knopf als einziges ungedecktes
Bedienelement des Hauses gemeldet. Und er ist nicht irgendeiner:
Er wirft eine Zeile aus dem Eintrag.
`pointer: coarse` und keine Breite: Die Frage ist nicht, wie breit
der Bildschirm ist, sondern womit jemand tippt. Dieselbe
Entscheidung wie bei den anderen Knoepfen des Hauses -- und sie
steht hier, direkt neben der Zahl, die sie korrigiert, statt in
einer gepflegten Liste in einer anderen Datei. */
@media (pointer: coarse) {
.zeileneditor__weg { min-width: 44px; min-height: 44px; }
/* Das Kreuz sitzt mit `left`/`top` fest -- es muss mitwandern,
sonst klebt es in der linken oberen Ecke der groesseren Flaeche.
Gerechnet statt geraten: (44 - 12) / 2 = 16 waagerecht,
44 / 2 - 0,8 = 21,2 senkrecht (halbe Strichstaerke). */
.zeileneditor__weg::before,
.zeileneditor__weg::after { left: 16px; top: 21.2px; }
}
.zeileneditor__fuss {
display: flex; align-items: center; gap: 10px;
margin-top: 7px;
+81
View File
@@ -9482,3 +9482,84 @@ body[data-ton] .kopfleiste__rechts > *:hover {
@media (prefers-reduced-motion: reduce) {
.kachel[data-sendung="ja"] .kachel__link::after { animation: none; }
}
/* =====================================================================
„NEU FÜR DICH" — die Karte beim Aufstieg der Stufe (06.10.2026)
=====================================================================
Bauplan Kapitel 10. Sie erscheint im Leben eines Mitglieds genau
zweimal: beim Sprung auf „Dabei" und beim Sprung auf „Stamm".
SIE SIEHT AUS WIE DER GLOCKEN-HINWEIS DARÜBER und nicht wie etwas
Neues — gleiche Form, gleicher Rahmen, gleiche Kante in der
Hausfarbe. Zwei verschiedene Gestaltungen für zwei Kästen, die
nacheinander an derselben Stelle stehen können, wären zwei
Sprachen auf einem Bildschirm.
KEIN KONFETTI, KEIN LEUCHTEN, KEIN PULSIEREN. Es ist eine gute
Nachricht, kein Alarm — und was blinkt, liest man beim zweiten Mal
nicht mehr. Die Farbe trägt `--akzent`, in beiden Häusern die
jeweils eigene.
===================================================================== */
.aufstieg {
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
margin: 0 0 24px;
padding: 15px 20px;
background: rgba(255, 255, 255, .04);
border: 1px solid var(--rand);
border-left: 3px solid color-mix(in srgb, var(--akzent) 55%, transparent);
border-radius: 14px;
}
.aufstieg__text { flex: 1 1 280px; min-width: 0; max-width: 64ch; }
/* Eine Überschrift, keine Aufmachung: `h2` wegen der Gliederung für
Vorleseprogramme, aber in der Größe eines Feldschilds — der Satz
darunter ist die Nachricht, nicht die Zeile darüber. */
.aufstieg__titel {
margin: 0 0 4px;
font-size: .78rem; font-weight: 600; letter-spacing: .08em;
text-transform: uppercase;
color: var(--akzent);
}
.aufstieg__satz {
margin: 0;
color: var(--text);
font-size: 1rem; line-height: 1.55;
}
.aufstieg__wege { display: flex; flex-wrap: wrap; gap: 9px; margin: 12px 0 0; }
/* Mindestens 44 px hoch — ein Ziel, das man mit dem Daumen trifft. */
.aufstieg__weg {
display: inline-flex; align-items: center;
min-height: 44px; padding: 10px 16px;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--akzent) 42%, transparent);
background: color-mix(in srgb, var(--akzent) 12%, transparent);
color: var(--akzent);
font-size: .92rem; text-decoration: none;
transition: background var(--tempo), border-color var(--tempo);
}
.aufstieg__weg:hover {
background: color-mix(in srgb, var(--akzent) 20%, transparent);
border-color: color-mix(in srgb, var(--akzent) 62%, transparent);
}
.aufstieg__zu {
flex: none;
min-height: 44px; padding: 10px 18px;
border-radius: 999px; border: 1px solid var(--rand);
background: transparent; color: var(--text-leise);
font: inherit; font-size: .92rem; cursor: pointer;
transition: border-color var(--tempo), color var(--tempo);
}
.aufstieg__zu:hover { border-color: var(--rand-hell); color: var(--text); }
/* Auf dem Handy untereinander und in voller Breite — nicht ein Knopf,
der sich mit dem Text 120 px teilt. */
@media (max-width: 560px) {
.aufstieg { gap: 13px; padding: 14px 16px; }
.aufstieg__zu { width: 100%; }
}
-336
View File
@@ -1,336 +0,0 @@
/* =====================================================================
willkommen.css — die persoenliche Einfuehrung
=====================================================================
Auftrag vom 21.09.2026, Abschnitte 7 und 8.
DIE SEITE IST EIN TEXT, KEIN ARMATURENBRETT. Wer sie oeffnet, ist
meist zum ersten Mal hier und weiss noch gar nicht, wonach er sucht.
Deshalb: eine Spalte, grosszuegige Zeilenhoehe, und die Kacheln
darunter als Liste mit Erklaerung -- nicht als zweites Kachelraster,
das wie die Startseite aussieht und doch etwas anderes tut.
Alle Farben kommen aus den Hausvariablen. Eine eigene Palette hier
waere die, die beim naechsten Farbwechsel stehen bleibt.
===================================================================== */
/* KEIN EIGENER BEHAELTER (berichtigt 21.09.2026).
Hier stand `.huelle { max-width: 54rem }` -- eine Klasse, die es im
ganzen Haus nicht gibt. Der Inhalt stand dadurch linksbuendig statt
mittig, ohne Sicherheitsrand an randlosen Geraeten. Die Seite nimmt
jetzt `.inhalt` wie jede andere; `befinden.html` ist das Vorbild,
weil sie ebenfalls eine Lese- und keine Rasterseite ist. */
/* ---------------------------------------------------------------------
DIE BEGRUESSUNG
---------------------------------------------------------------------
Der Name ist das Erste, was ein Mensch auf einer Seite sucht, die
"Willkommen" heisst. Er steht deshalb gross und allein. */
/* AUF EIGENER FLAECHE, NICHT AUF DEM BILD (berichtigt 21.09.2026).
------------------------------------------------------------------
Gemessen mit pruef-buehne: Kontrast 1.68:1 am Rechner, 2.23:1 am
Handy -- noetig sind 4.5. Der Text stand direkt auf dem
Buehnenbild, und dort ist ein heller Hund.
Die Hausregel steht in start.css neben dem Schleier und sagt es
schon: "Der Text braucht das nicht mehr -- er steht auf eigenen
Flaechen." Genau daran hielt sich diese Seite als einzige nicht. */
.w-gruss {
margin: 6px 0 28px;
padding: 20px 22px;
border: 1px solid var(--rand);
border-radius: var(--radius, 16px);
background: color-mix(in srgb, var(--flaeche) 94%, transparent);
}
.w-gruss__titel {
margin: 0;
font-size: clamp(1.5rem, 5.5vw, 2.1rem);
line-height: 1.22;
letter-spacing: -.01em;
}
/* Die Rolle als ruhige Marke darunter -- sie ordnet ein, ohne zu
ranghoeheln. Kein Grossbuchstaben-Schild, das wie ein Ausweis
aussieht. */
.w-gruss__rolle {
display: inline-block;
margin: 10px 0 0;
padding: 5px 12px;
border: 1px solid var(--rand);
border-radius: 999px;
background: color-mix(in srgb, var(--akzent) 10%, transparent);
color: var(--text-leise);
font-size: .84rem;
}
.w-gruss__was {
margin: 16px 0 0;
font-size: 1.08rem;
line-height: 1.5;
color: var(--text);
}
.w-gruss__dazu {
margin: 8px 0 0;
font-size: .96rem;
line-height: 1.62;
color: var(--text-leise);
max-width: 46rem;
}
/* ---------------------------------------------------------------------
DIE HINWEISE ZUR ROLLE
---------------------------------------------------------------------
Ein paar Saetze, die zu keiner einzelnen Kachel gehoeren. Sie stehen
VOR den Kacheln, weil sie erklaeren, wie man mit ihnen umgeht. */
.w-hinweise {
display: grid;
gap: 10px;
margin: 0 0 30px;
}
.w-hinweis {
padding: 14px 16px;
border: 1px solid var(--rand);
border-left: 3px solid color-mix(in srgb, var(--akzent) 60%, transparent);
border-radius: var(--radius-klein, 12px);
background: color-mix(in srgb, var(--flaeche) 90%, transparent);
}
.w-hinweis__titel {
margin: 0 0 5px;
font-size: .95rem;
font-weight: 600;
}
.w-hinweis__text {
margin: 0;
font-size: .9rem;
line-height: 1.58;
color: var(--text-leise);
}
/* ---------------------------------------------------------------------
WAS ES HIER GIBT
--------------------------------------------------------------------- */
/* Auch die Ueberschrift "Was es hier gibt" und ihr Satz standen frei
auf dem Bild -- sie waren die schlechteste gemessene Stelle. */
.w-bereiche {
padding: 16px 18px;
border: 1px solid var(--rand);
border-radius: var(--radius, 16px);
background: color-mix(in srgb, var(--flaeche) 90%, transparent);
}
.w-bereiche__titel {
margin: 0 0 4px;
font-size: 1.15rem;
}
.w-bereiche__satz {
margin: 0 0 20px;
font-size: .9rem;
color: var(--text-leise);
}
.w-gruppe { margin: 0 0 26px; }
.w-gruppe__titel {
margin: 0 0 10px;
font-size: .78rem;
font-weight: 600;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--text-still);
}
/* EINE SPALTE, NICHT ZWEI. Zwei Spalten haetten hier eine Zeile je
Kachel erzwungen -- und genau die Erklaerung weggekuerzt, wegen der
es die Seite gibt. Ab Tablet duerfen es zwei sein, weil dann beide
Spalten breit genug fuer den langen Satz bleiben. */
.w-raster {
display: grid;
gap: 10px;
grid-template-columns: 1fr;
}
@media (min-width: 900px) {
.w-raster { grid-template-columns: 1fr 1fr; }
}
/* ---------------------------------------------------------------------
DIE KACHELN -- IN DEN FARBEN DER STARTSEITE (22.09.2026)
---------------------------------------------------------------------
Filipe: "die kacheln in der willkommens seite sollen die selben
farben haben wie in der startseite. mach das richtig ultra geil
bitte. die seite soll mega aussehen."
DIE FARBE WIRD NICHT NEU VERGEBEN, SONDERN GEERBT. Der Server
schickt `ton`, die Kachel traegt `data-ton="N"`, und `start.css`
macht daraus `--ton` -- dieselbe Zeile, aus der die Startseite ihre
Farbe nimmt. Eine eigene Tabelle hier waere die, die beim naechsten
Farbwechsel stehen bleibt; genau das ist am 19.09. elf Seiten
passiert.
DREI STELLEN TRAGEN DIE FARBE, und keine davon ist eine Flaeche:
das Zeichen, eine schmale Kante links, und ein ganz leiser Schimmer
in der oberen Ecke. Eine eingefaerbte Kachelflaeche waere bunt und
schlecht lesbar -- die Startseite macht es genauso.
--------------------------------------------------------------------- */
/* HIER STAND `--ton: var(--akzent)` ALS VORGABE -- und hat alles
kaputtgemacht (berichtigt 22.09.2026).
`[data-ton="N"] { --ton: … }` steht in start.css und hat dieselbe
Spezifitaet (0,1,0) wie diese Regel. willkommen.css laedt SPAETER,
also gewann die Vorgabe, und jede Kachel war blau. Gemessen: 0 von
14 Kacheln trugen die Farbe der Startseite.
Der Rueckfall gehoert deshalb an die VERWENDUNG (`var(--ton, …)`)
und nicht an die Deklaration -- dort greift er nur, wenn wirklich
nichts gesetzt ist. */
.w-kachel {
position: relative;
display: flex;
gap: 13px;
align-items: flex-start;
min-height: 44px;
padding: 15px 16px 15px 18px;
border: 1px solid var(--rand);
border-radius: var(--radius-klein, 12px);
overflow: hidden;
background:
/* Der Schimmer sitzt oben links, dort, wo auch das Zeichen steht --
so wirkt er wie Licht auf dem Zeichen und nicht wie ein Fleck. */
radial-gradient(70% 90% at 0% 0%,
color-mix(in srgb, var(--ton, var(--akzent)) 13%, transparent), transparent 70%),
color-mix(in srgb, var(--flaeche) 90%, transparent);
color: inherit;
text-decoration: none;
transition: border-color var(--tempo, .18s) ease,
background-color var(--tempo, .18s) ease,
transform var(--tempo, .18s) ease,
box-shadow var(--tempo, .18s) ease;
}
/* DIE KANTE LINKS -- als eigenes Element, nicht als `border-left`.
Ein farbiger Rahmenrand haette die Ecken mitgefaerbt und dabei
getreppt ausgesehen; so laeuft sie sauber durch. */
.w-kachel::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background: linear-gradient(180deg,
var(--ton, var(--akzent)),
color-mix(in srgb, var(--ton, var(--akzent)) 35%, transparent));
}
.w-kachel:hover,
.w-kachel:focus-visible {
border-color: color-mix(in srgb, var(--ton, var(--akzent)) 55%, var(--rand));
background:
radial-gradient(70% 90% at 0% 0%,
color-mix(in srgb, var(--ton, var(--akzent)) 20%, transparent), transparent 72%),
color-mix(in srgb, var(--flaeche) 100%, transparent);
transform: translateY(-1px);
box-shadow: 0 8px 22px -16px color-mix(in srgb, var(--ton, var(--akzent)) 70%, transparent);
}
.w-kachel__zeichen {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 36px;
height: 36px;
border-radius: 11px;
border: 1px solid color-mix(in srgb, var(--ton, var(--akzent)) 30%, transparent);
background: color-mix(in srgb, var(--ton, var(--akzent)) 16%, transparent);
color: var(--ton, var(--akzent));
}
.w-kachel__zeichen svg {
width: 19px;
height: 19px;
stroke: currentColor;
fill: none;
}
.w-kachel__text {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0; /* sonst sprengt ein langes Wort die Spalte */
}
.w-kachel__name {
font-size: .99rem;
font-weight: 600;
line-height: 1.3;
}
.w-kachel__unter {
font-size: .86rem;
color: var(--text-leise);
line-height: 1.4;
}
/* Der lange Satz ist bewusst etwas kleiner und ruhiger: Er ist die
Vertiefung, nicht die Ueberschrift. */
.w-kachel__lang {
margin-top: 6px;
padding-top: 6px;
border-top: 1px solid color-mix(in srgb, var(--rand) 70%, transparent);
font-size: .85rem;
line-height: 1.56;
color: var(--text-still);
}
/* DIE BREITE KACHEL bleibt auch hier breit -- sie ist auf der
Startseite doppelt so gross, und wer von dort kommt, sucht sie an
derselben Stelle. */
@media (min-width: 900px) {
.w-kachel[data-gross="ja"] { grid-column: span 2; }
}
/* ---------------------------------------------------------------------
DIE ZUSTAENDE
--------------------------------------------------------------------- */
.w-laedt,
.w-leer {
margin: 18px 0;
color: var(--text-leise);
font-size: .92rem;
line-height: 1.55;
}
/* ---------------------------------------------------------------------
KONTRASTMODUS UND BEWEGUNGSARMUT
---------------------------------------------------------------------
Im Kontrastmodus werden Fuellfarben ersetzt -- eine Kachel, die sich
nur durch ihren Hintergrund abhebt, verschwindet dort. Deshalb bekommt
sie eine echte Kante, die stehen bleibt. */
@media (forced-colors: active) {
.w-kachel,
.w-hinweis {
border: 1px solid CanvasText;
}
.w-kachel:hover,
.w-kachel:focus-visible {
outline: 2px solid Highlight;
outline-offset: 2px;
}
.w-kachel__zeichen {
border: 1px solid CanvasText;
}
}
@media (prefers-reduced-motion: reduce) {
.w-kachel { transition: none; }
.w-kachel:hover,
.w-kachel:focus-visible { transform: none; }
}