diff --git a/workspace/assets/css/start.css b/workspace/assets/css/start.css
index fef91344..f86200be 100644
--- a/workspace/assets/css/start.css
+++ b/workspace/assets/css/start.css
@@ -333,7 +333,15 @@ body.start > main { position: relative; z-index: 1; }
bricht genau dann um, wenn der Platz nicht reicht, und sonst nie. Auf
dem Rechner aendert sich dadurch nichts. */
.kopfleiste__rechts {
- display: flex; align-items: center; gap: 12px;
+ /* 10 statt 12 px zwischen den Teilen.
+
+ Gemessen bei 1280 px: Die Bedienelemente brauchen zusammen 844 px
+ (784 Inhalt + fuenf Abstaende zu 12), verfuegbar waren nach dem
+ geschrumpften Schriftzug 843. EIN Pixel -- und die ganze Gruppe
+ brach in eine zweite Zeile um, was die Seite beim Laden 45 px nach
+ unten schob. Zwei Pixel weniger Abstand loesen es und sieht niemand;
+ eine zweite Kopfzeile sieht jeder. */
+ display: flex; align-items: center; gap: 10px;
/* NICHT SCHRUMPFEN -- die MARKE gibt nach, nicht die Bedienelemente.
Mit `flex: 0 1 auto` wurde dieser Kasten schmaler als sein Inhalt,
und der brach dann schon bei 1280 px in eine zweite Zeile um. Das
@@ -342,7 +350,31 @@ body.start > main { position: relative; z-index: 1; }
ganze Seite 52 px nach unten (gemessen von pruef-tempo-workspace,
CLS 1,0). Der Schriftzug daneben darf gekuerzt werden, ein Knopf
nicht. */
- flex: 0 0 auto; min-width: 0;
+ /* SCHRUMPFEN DARF ER WIEDER -- aber erst nach dem Schriftzug.
+
+ Am 06.09.2026 stand hier zweimal etwas Falsches, an einem Abend:
+
+ flex: 0 1 auto -> bei 1280 px wurde der Kasten schmaler als sein
+ Inhalt, brach in zwei Zeilen um und schob die
+ Seite 52 px nach unten (CLS 0,94).
+ flex: 0 0 auto -> bei 390 und 412 px konnte er weder schrumpfen
+ noch umbrechen und stand 126 px aus dem Bild.
+ Auf ZWOELF Seiten, gemessen von pruef-handy.
+
+ Beide Male habe ich an DIESEM Kasten gedreht -- und beide Male war
+ die Frage die falsche. Es geht nicht darum, OB er nachgibt, sondern
+ WER von beiden ZUERST nachgibt. Die Antwort ist eindeutig: der
+ Schriftzug, denn der darf gekuerzt werden; ein Knopf nicht.
+
+ Also bekommt die Marke einen sehr hohen Schrumpf-Faktor (siehe
+ dort), und dieser Kasten den gewoehnlichen. Flexbox verteilt die
+ Enge dann fast vollstaendig auf die Marke; erst wenn die am
+ Anschlag ist, gibt er selbst nach -- und dann brechen seine Kinder
+ IN IHM um, statt die ganze Leiste zu sprengen.
+
+ Damit braucht es keine Bildschirmbreite als Schwelle mehr, in
+ keiner Richtung. */
+ flex: 0 1 auto; min-width: 0;
flex-wrap: wrap; row-gap: 6px; justify-content: flex-end;
}
.kopfleiste__rechts > * { flex: 0 0 auto; }
@@ -1276,13 +1308,36 @@ body.start > main { position: relative; z-index: 1; }
Abmelden-Knopf stand dadurch auf dem Handy 9 px aus dem Bild.
Derselbe Fehler wie im August, eine Ebene tiefer. */
min-width: 0;
+ /* UND SIE GIBT ZUERST NACH (06.09.2026). Flexbox verteilt die Enge
+ nach Schrumpf-Faktor mal Grundbreite; mit 220 gegen 1 landet
+ praktisch alles hier und nichts bei den Bedienelementen. Genau so
+ soll es sein: Ein Schriftzug darf gekuerzt werden, ein Knopf nicht.
+ Ohne diese Zeile muss man zwischen "die Leiste bricht bei 1280
+ unnoetig um" und "sie steht bei 412 aus dem Bild" waehlen -- ich
+ hatte an einem Abend beides. */
+ flex-shrink: 220;
}
/* flex: 0 1 auto, NICHT 1 1 auto. Mit flex-grow: 1 zog sich der
Schriftzug ueber die ganze Leiste -- unsichtbar, solange er nur Text
war, aber seit er einen Rahmen traegt (die Pille), lief der Rahmen
quer durch das ganze Bild, obwohl der Text kurz ist. Schrumpfen darf
er weiterhin (das braucht die Kuerzung auf dem Handy), wachsen nicht. */
-.kopfleiste .marke__text { min-width: 0; flex: 0 1 auto; }
+/* UND ER MUSS AUCH WIRKLICH KUERZEN KOENNEN (06.09.2026).
+
+ `min-width: 0` erlaubt nur, dass der Kasten schmaler wird als
+ sein Inhalt -- der TEXT darin behaelt trotzdem seine Wunschbreite
+ und laeuft heraus. Gemessen: Bei 1280 px gab die Marke nur 10 der
+ noetigen 35 px ab, die Bedienelemente brachen um, und die Leiste
+ war zweizeilig, obwohl reichlich Platz gewesen waere.
+
+ Mit Auslassungspunkten schrumpft er bis fast auf null und gibt
+ damit den ganzen Spielraum her, den die Rangfolge braucht. Zu
+ lesen ist er weiterhin: Auf jeder Seite steht derselbe Name zwei
+ Zeilen tiefer noch einmal als Ueberschrift. */
+.kopfleiste .marke__text {
+ min-width: 0; flex: 0 1 auto;
+ white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
.kopfleiste .marke::before {
content: "";
flex: none; width: 22px; height: 22px;
@@ -1327,7 +1382,22 @@ body.start > main { position: relative; z-index: 1; }
font-weight: 500;
text-shadow: none;
}
-.kopfleiste a.marke__haupt { text-decoration: none; }
+/* IM KASTEN BLEIBEN. Der Schriftzug wird seit dem 06.09.2026 mit
+ Auslassungspunkten gekuerzt -- aber `overflow: hidden` schneidet
+ nur die ANZEIGE ab; der Link darin behaelt seine volle
+ Layoutbreite. Bei 768 px war die Marke 51 px schmal, der Link
+ darin rechnerisch 130 -- sein Mittelpunkt lag damit unter den
+ Bedienelementen, und ein Klick dorthin traf das Falsche. Zu
+ sehen war davon nichts, gemessen hat es pruef-breiten auf 17
+ von 18 Seiten.
+
+ inline-block gibt ihm einen eigenen Kasten, den max-width und
+ overflow dann auch wirklich begrenzen. */
+.kopfleiste a.marke__haupt {
+ text-decoration: none;
+ display: inline-block; max-width: 100%;
+ overflow: hidden; text-overflow: ellipsis; vertical-align: bottom;
+}
.kopfleiste a.marke__haupt:hover { color: #fff; }
/* Der Trenner ist kein Satzzeichen mehr, sondern eine kleine, auf die
@@ -1352,8 +1422,44 @@ body.start > main { position: relative; z-index: 1; }
filter: drop-shadow(0 0 7px rgba(63, 189, 245, .45));
}
.kopfleiste .marke {
- /* Nur so breit wie ihr Inhalt -- sonst waere die Pille eine Leiste. */
- flex: 0 1 auto;
+ /* Nur so breit wie ihr Inhalt -- sonst waere die Pille eine Leiste.
+
+ DER SCHRUMPF-FAKTOR STEHT HIER MIT DRIN, und das ist kein Schoenheits-
+ fehler, sondern noetig: Diese Regel steht SPAETER in der Datei als die
+ weiter oben, in der ich ihn am 06.09.2026 zuerst gesetzt hatte -- und
+ die Kurzschreibweise `flex` setzt alle drei Werte, also auch shrink
+ zurueck auf 1. Gemessen kam am Element "0/1/auto" an, obwohl oben 220
+ stand. Zwei Regeln fuer dasselbe Element, eine gewinnt still.
+ UND DANN WAR AUCH DAS NOCH DER FALSCHE WEG. Mit 220 gegen 1 gab der
+ Schriftzug zwar fast alles ab -- aber eben nur FAST: Von 19 fehlenden
+ Pixeln nahmen die Bedienelemente 0,19, und die runden auf 1 auf.
+ Ein Pixel zu wenig, und die ganze Gruppe brach in eine zweite Zeile.
+ Ich habe daraufhin die Abstaende verkleinert; danach war es wieder
+ genau ein Pixel. Wer an einem Rundungsfehler herumschraubt, hat die
+ falsche Stellschraube in der Hand.
+
+ RICHTIG ist, dem Schriftzug gar keine Wunschbreite zu geben:
+ `flex: 1 1 0` heisst "ich beanspruche nichts und nehme, was uebrig
+ bleibt". Damit entsteht ueberhaupt kein Fehlbetrag, der verteilt
+ werden muesste -- die Bedienelemente behalten ihre volle Breite, und
+ der Schriftzug fuellt exakt den Rest. Kein Schrumpf-Faktor, keine
+ Schwelle, nichts zu runden.
+
+ `min-width` schuetzt den Kopf: Bei 768 px bliebe sonst NULL uebrig,
+ und das Wappen waere weg. */
+ flex: 1 1 0;
+ min-width: 32px;
+ /* UND NICHT BREITER ALS IHR INHALT. Ohne diese Zeile zieht `flex-grow`
+ die Pille ueber die ganze freie Breite -- bei 1920 px waren es 990
+ statt 375, und ihr Rahmen lief quer durchs Bild. Genau davor warnt
+ der Kommentar weiter oben ("Mit flex-grow: 1 zog sich der Schriftzug
+ ueber die ganze Leiste"); ich habe ihn beim Umbau uebergangen und
+ denselben Fehler noch einmal gebaut.
+
+ `max-content` loest beides auf einmal: Der Kasten beansprucht beim
+ Verteilen weiterhin nichts (Basis 0), waechst aber hoechstens bis zu
+ seiner natuerlichen Breite. */
+ max-width: max-content;
padding: 4px 13px 4px 5px;
border-radius: 999px;
border: 1px solid transparent;
diff --git a/workspace/assets/css/uebersicht.css b/workspace/assets/css/uebersicht.css
index 9d553e36..163893d5 100644
--- a/workspace/assets/css/uebersicht.css
+++ b/workspace/assets/css/uebersicht.css
@@ -231,7 +231,13 @@ a.wert:hover { border-color: var(--rand-hell); background: rgba(255, 255, 255, .
.warnliste {
display: grid; gap: 12px;
- grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+ /* min(320px, 100%) statt 320px. Eine feste Mindestbreite ist auf einem
+ 320-px-Schirm groesser als der Platz, der nach den Raendern uebrig
+ bleibt -- die Karte stand 9 px aus dem Bild (gemessen von
+ pruef-breiten). Dieselbe Schreibweise wie bei .creator-liste und
+ .summen zwei Abschnitte weiter oben; ich habe sie hier nur nicht
+ uebernommen. */
+ grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
}
.warnkarte {
@@ -242,14 +248,42 @@ a.wert:hover { border-color: var(--rand-hell); background: rgba(255, 255, 255, .
border: 1px solid rgba(217, 164, 65, .28);
border-radius: var(--radius-klein);
}
+/* min-width: 0 UND umbrechen duerfen (06.09.2026).
+
+ `minmax(min(320px, 100%), 1fr)` begrenzt die SPALTE -- nicht das, was
+ darin steht. Solange die Karte ihren Mindestinhalt nicht unterbieten
+ darf, waechst die Spalte trotzdem mit: Bei 320 px stand sie 9 px aus
+ dem Bild, weil Name und "Schreiben"-Knopf nebeneinander bleiben
+ wollten. Beides zusammen loest es, einzeln keines von beiden. */
+.warnkarte { min-width: 0; }
.warnkarte__kopf {
display: flex; align-items: baseline; justify-content: space-between;
gap: 12px; margin-bottom: 10px;
+ flex-wrap: wrap; min-width: 0;
}
+/* Ein sehr langer Name ohne Leerzeichen ("SpongBobSchwammKopf") ist
+ sonst selbst breiter als der Schirm. */
+.warnkarte__name, .warnsignal__text { overflow-wrap: anywhere; }
.warnkarte__name {
font-size: 1rem; font-weight: 600; color: var(--text); text-decoration: none;
+ /* EIN FINGERZIEL, KEIN WORT. Als schlichter Inline-Link war der Kasten
+ genau so gross wie der Name -- bei "Tili" 22 x 25 px. Das Mindestmass
+ nach WCAG 2.2 (2.5.8) sind 24 x 24; darunter trifft man mit dem
+ Daumen daneben, und zwar ausgerechnet bei kurzen Namen. Gemessen von
+ pruef-handy auf allen drei Geraeten.
+
+ Die negativen Aussenabstaende heben die Polsterung optisch wieder
+ auf: Der Name steht danach exakt dort, wo er vorher stand, hat aber
+ eine Flaeche, die man trifft. */
+ display: inline-flex; align-items: center;
+ min-width: 44px; min-height: 32px;
+ padding: 4px 8px; margin: -4px -8px;
+ border-radius: 8px;
}
-.warnkarte__name:hover, .warnkarte__name:focus-visible { color: var(--akzent); }
+.warnkarte__name:hover, .warnkarte__name:focus-visible {
+ background: rgba(255, 255, 255, .05);
+}
+
/* Der Weg zum Gespräch. Klein und ruhig -- er soll da sein, wenn man
ihn sucht, und nicht mit dem Namen um Aufmerksamkeit ringen. */
diff --git a/workspace/aufgaben.html b/workspace/aufgaben.html
index e9e1abfb..13e8eb33 100644
--- a/workspace/aufgaben.html
+++ b/workspace/aufgaben.html
@@ -9,9 +9,9 @@
-
-
-
+
+
+
@@ -211,10 +211,10 @@
-
-
-
-
-
+
+
+
+
+