diff --git a/server/pruef-handy.mjs b/server/pruef-handy.mjs
index f1641983..7fd4bd05 100644
--- a/server/pruef-handy.mjs
+++ b/server/pruef-handy.mjs
@@ -451,8 +451,31 @@ console.log("\n=== Kein Licht ohne Zeiger");
gehoert. Eine Regel kann von einer rollenabhaengigen ueberschrieben
werden, und dann faellt es nur bei einer auf.
--------------------------------------------------------------------- */
+/* EINE Messung, zweimal benutzt (eigene und fremde Sicht). Zwei Kopien
+ waeren zwei Kopien, die auseinanderlaufen -- und dann prueft die eine
+ etwas anderes als die andere, ohne dass es auffaellt.
+
+ Gemessen wird die ZEILENZAHL, nicht die Hoehe: Eine Hoehengrenze waere
+ wieder eine Zahl von gestern -- sie stimmt, bis jemand die Polsterung
+ anfasst. Ob zwei Dinge in derselben Zeile stehen, sieht man an ihrer
+ Oberkante, und das gilt immer. */
+async function kopfMessen(seite) {
+ return await seite.evaluate(() => {
+ const k = document.querySelector(".kopfleiste");
+ const teile = [...k.querySelectorAll(".kopfleiste__rechts > *"), k.querySelector(".marke")]
+ .filter((e) => e && e.getBoundingClientRect().width > 0);
+ const kanten = teile.map((e) => Math.round(e.getBoundingClientRect().top));
+ return { zeilen: new Set(kanten).size, spanne: Math.max(...kanten) - Math.min(...kanten),
+ anzahl: teile.length,
+ ueber: document.documentElement.scrollWidth - document.documentElement.clientWidth };
+ });
+}
+let fremdGeprueft = 0;
+const mitUmschalter = new Set();
+const KOPF_GERAETE = [[360, 800], [390, 844], [412, 915]];
+
console.log("\n=== Ring und Uhr stehen mittig (alle Rollen)");
-for (const [breite, hoehe] of [[360, 800], [390, 844], [412, 915]]) {
+for (const [breite, hoehe] of KOPF_GERAETE) {
for (const [rolle, code] of [["admin", "CODE-DOGI-0001"], ["spicy", "CODE-SPIC-0001"],
["manager", "CODE-MANA-0001"], ["scout", "CODE-SCOU-0001"], ["creator", "CODE-ANNA-0001"]]) {
const kontext = await browser.newContext({ viewport: { width: breite, height: hoehe } });
@@ -489,25 +512,79 @@ for (const [breite, hoehe] of [[360, 800], [390, 844], [412, 915]]) {
waere wieder eine Zahl von gestern -- sie stimmt, bis jemand die
Polsterung anfasst. Ob zwei Dinge in derselben Zeile stehen,
sieht man an ihrer Oberkante, und das gilt immer. */
- const kopf = await seite.evaluate(() => {
- const k = document.querySelector(".kopfleiste");
- const teile = [...k.querySelectorAll(".kopfleiste__rechts > *"), k.querySelector(".marke")]
- .filter((e) => e && e.getBoundingClientRect().width > 0);
- const kanten = teile.map((e) => Math.round(e.getBoundingClientRect().top));
- return { zeilen: new Set(kanten).size, spanne: Math.max(...kanten) - Math.min(...kanten),
- anzahl: teile.length,
- ueber: document.documentElement.scrollWidth - document.documentElement.clientWidth };
- });
+ const kopf = await kopfMessen(seite);
/* 12 px Nachsicht: Ein Knopf von 36 px und ein Bild von 28 px sind
mittig ausgerichtet und haben deshalb verschiedene Oberkanten --
das ist dieselbe Zeile. Eine zweite Zeile liegt 40 px tiefer. */
ok(kopf.anzahl >= 3 && kopf.spanne <= 12 && kopf.ueber <= 1,
`${breite}px ${rolle.padEnd(8)} Kopfleiste: ${kopf.anzahl} Teile in einer Reihe `
+ `(Spanne ${kopf.spanne} px)`);
+
+ /* ---- UND DASSELBE IN EINER FREMDEN SICHT (09.09.2026) ----------
+
+ DIESE PRUEFUNG FEHLTE, UND GENAU DAS HAT DER FEHLER AUSGENUTZT.
+
+ Filipe meldete aus der installierten App "es ist noch nicht alles
+ in einer zeile" -- waehrend hier alles gruen war. Der Grund: Alle
+ Messungen liefen in der EIGENEN Sicht. Dort klappt der Umschalter
+ auf 36 px zusammen; sobald man die Sicht einer anderen Person
+ uebernimmt, stand der Name darin und er war 152 px breit. Auf
+ 320, 360, 390, 412 UND 430 px waren es dann zwei Zeilen.
+
+ Ein gruener Haken sagt nur, dass die Bedingung erfuellt war --
+ nicht, dass sie den Zustand geprueft hat, in dem der Nutzer ist.
+
+ Wer keinen Umschalter hat (Creator, Scout ...), wird nicht
+ uebersprungen, sondern gar nicht erst gezaehlt; dass ueberhaupt
+ jemand geprueft wurde, steht unten in einer eigenen Bedingung. */
+ const wenAnsehen = await seite.evaluate(() => {
+ const s = document.getElementById("sicht-feld");
+ if (!s) return null;
+ const o = [...s.options].find((x) => x.value);
+ return o ? { id: o.value, name: o.textContent } : null;
+ });
+ if (wenAnsehen) {
+ await seite.evaluate((x) => localStorage.setItem("dfw-sicht", x), wenAnsehen.id);
+ await seite.reload({ waitUntil: "networkidle" });
+ await seite.waitForTimeout(1400);
+ const fremd = await kopfMessen(seite);
+ const band = await seite.evaluate(() => {
+ const b = document.querySelector(".fremd-band");
+ if (!b) return { da: false };
+ const r = b.getBoundingClientRect();
+ return { da: r.width > 0 && r.height > 0, text: (b.textContent || "").trim().slice(0, 60) };
+ });
+ fremdGeprueft++;
+ mitUmschalter.add(rolle);
+ ok(fremd.anzahl >= 3 && fremd.spanne <= 12 && fremd.ueber <= 1,
+ `${breite}px ${rolle.padEnd(8)} fremde Sicht: ${fremd.anzahl} Teile in einer Reihe `
+ + `(Spanne ${fremd.spanne} px)`);
+ /* Der Name darf nicht einfach verschwinden -- er ist aus der
+ Leiste ins Band gewandert, und dass er DORT steht, gehoert
+ geprueft. Sonst waere "eine Reihe" damit erkauft, dass niemand
+ mehr sieht, wessen Zahlen er ansieht. */
+ ok(band.da && band.text.includes(wenAnsehen.name.trim()),
+ `${breite}px ${rolle.padEnd(8)} das Band nennt den vollen Namen`);
+ await seite.evaluate(() => localStorage.removeItem("dfw-sicht"));
+ }
await kontext.close();
}
}
+/* Die Zahl gehoert in die Bedingung, nicht nur in den Bericht: Findet
+ die Schleife keinen einzigen Umschalter (umbenannt, Rechte geaendert),
+ waere oben alles gruen, ohne dass die fremde Sicht je gemessen wurde.
+
+ Die Erwartung wird ABGELEITET, nicht hingeschrieben: so viele Rollen
+ mit Umschalter, wie es gibt, mal so viele Breiten, wie geprueft
+ werden. Heute hat nur DogFather einen -- bekommt Spicy morgen auch
+ einen, steigt die Zahl von selbst mit, statt still danebenzuliegen.
+ (Beim ersten Anlauf stand hier eine 6, geraten; gemessen waren es 3.
+ Genau die Sorte Zahl, die spaeter grundlos rot wird.) */
+ok(mitUmschalter.size >= 1 && fremdGeprueft === KOPF_GERAETE.length * mitUmschalter.size,
+ `die fremde Sicht wurde ${fremdGeprueft}-mal gemessen `
+ + `(${mitUmschalter.size} Rolle(n) mit Umschalter x ${KOPF_GERAETE.length} Breiten)`);
+
await browser.close();
try { rmSync(ordner, { recursive: true, force: true }); } catch { /* egal */ }
console.log(fehler ? `\n${fehler} Prüfung(en) fehlgeschlagen.` : "\nAlles in Ordnung.");
diff --git a/workspace/app.webmanifest b/workspace/app.webmanifest
index a8cd70b4..337deaf5 100644
--- a/workspace/app.webmanifest
+++ b/workspace/app.webmanifest
@@ -13,25 +13,25 @@
"theme_color": "#06090f",
"icons": [
{
- "src": "/assets/img/app-symbole/workspace-192.png?v=202609091823",
+ "src": "/assets/img/app-symbole/workspace-192.png?v=202609091943",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
- "src": "/assets/img/app-symbole/workspace-512.png?v=202609091823",
+ "src": "/assets/img/app-symbole/workspace-512.png?v=202609091943",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
- "src": "/assets/img/app-symbole/workspace-192-maskable.png?v=202609091823",
+ "src": "/assets/img/app-symbole/workspace-192-maskable.png?v=202609091943",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable"
},
{
- "src": "/assets/img/app-symbole/workspace-512-maskable.png?v=202609091823",
+ "src": "/assets/img/app-symbole/workspace-512-maskable.png?v=202609091943",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
diff --git a/workspace/assets/css/chat.css b/workspace/assets/css/chat.css
index 095cf8d4..41375dd0 100644
--- a/workspace/assets/css/chat.css
+++ b/workspace/assets/css/chat.css
@@ -43,7 +43,11 @@
und das Eingabefeld stand halb unterhalb des Bildschirmrands --
ausgerechnet das Feld, um das es geht. Der Rückfallwert bleibt
stehen für den Moment vor der ersten Messung. */
- height: calc(100dvh - var(--kopf-hoehe, 62px));
+ /* Der sichere Bereich unten wird ABGEZOGEN (09.09.2026): `100dvh` ist
+ die ganze Bildhoehe einschliesslich der Gestenleiste. Ohne den Abzug
+ liegt das Eingabefeld darunter -- ausgerechnet das Feld, um das es
+ geht. Auf Geraeten ohne Gestenleiste ist der Wert 0. */
+ height: calc(100dvh - var(--kopf-hoehe, 62px) - var(--ws-sicher-unten, 0px));
display: flex; flex-direction: column;
padding-bottom: 0;
overflow: hidden;
diff --git a/workspace/assets/css/gate.css b/workspace/assets/css/gate.css
index 22d1d5dc..4fbfcd2a 100644
--- a/workspace/assets/css/gate.css
+++ b/workspace/assets/css/gate.css
@@ -225,6 +225,33 @@
--r-haupt: var(--akzent);
--r-zweit: var(--violett);
--r-tief: var(--akzent-tief);
+
+ /* ---- DER SICHERE BEREICH (09.09.2026) --------------------------
+
+ Jede der 20 Workspace-Seiten sagt `viewport-fit=cover` -- die Seite
+ wird also bis unter Statusleiste, Aussparung und Gestenleiste
+ gezeichnet. Das ist gewollt (randloser Hintergrund), verlangt aber,
+ dass man den belegten Rand wieder abzieht. Genau das fehlte hier:
+ im ganzen Workspace stand kein einziges `env(safe-area-inset-*)`,
+ waehrend die Webdesign-Seiten es laengst haben.
+
+ Im Browser faellt es nicht auf, weil die Adresszeile die Seite nach
+ unten schiebt. INSTALLIERT gibt es die nicht mehr -- dann liegt die
+ Kopfleiste auf einem iPhone hinter der Uhr, und von einem 36-px-Knopf
+ bleiben rechnerisch 5 px zum Antippen uebrig.
+
+ Filipes Android ist NICHT betroffen (nachgesehen im Bildschirmfoto,
+ die App beginnt dort sauber unter der Statusleiste) -- das hier ist
+ fuer die iPhones im Team.
+
+ Einmal zentral benannt statt an fuenfzehn Stellen einzeln
+ geschrieben: Wer sie einzeln schreibt, vergisst eine, und dann liegt
+ genau ein Knopf unter der Gestenleiste. Auf Geraeten ohne
+ Aussparung sind alle vier 0 -- dort aendert sich nichts. */
+ --ws-sicher-oben: env(safe-area-inset-top, 0px);
+ --ws-sicher-unten: env(safe-area-inset-bottom, 0px);
+ --ws-sicher-links: env(safe-area-inset-left, 0px);
+ --ws-sicher-rechts: env(safe-area-inset-right, 0px);
}
/* Die Rolle steht am (gesetzt in kopf.js) — damit gilt sie für
diff --git a/workspace/assets/css/profil.css b/workspace/assets/css/profil.css
index 2ba7ec90..ab838625 100644
--- a/workspace/assets/css/profil.css
+++ b/workspace/assets/css/profil.css
@@ -67,7 +67,10 @@
.speicher-leiste {
position: sticky; bottom: 0;
display: flex; align-items: center; gap: 14px;
- margin-top: 26px; padding: 14px 0;
+ /* Unten der sichere Bereich (09.09.2026): Diese Leiste klebt am
+ unteren Rand -- auf einem randlosen Handy liegt dort die
+ Gestenleiste, und der Speichern-Knopf waere halb darunter. */
+ margin-top: 26px; padding: 14px 0 calc(14px + var(--ws-sicher-unten, 0px));
background: linear-gradient(180deg, transparent, var(--tinte) 34%);
}
diff --git a/workspace/assets/css/start.css b/workspace/assets/css/start.css
index b639988a..595f03cf 100644
--- a/workspace/assets/css/start.css
+++ b/workspace/assets/css/start.css
@@ -279,7 +279,15 @@ body.start > main { position: relative; z-index: 1; }
.kopfleiste {
position: sticky; top: 0; z-index: 5;
display: flex; align-items: center; justify-content: space-between; gap: 16px;
- padding: 14px clamp(16px, 4vw, 40px);
+ /* Der sichere Bereich kommt OBEN DRAUF, nicht statt der Polsterung:
+ Auf einem Geraet ohne Aussparung ist der Wert 0 und es bleibt bei
+ den 14 px. Seitlich dasselbe -- im Querformat liegt die Aussparung
+ links oder rechts, und ohne den Zuschlag verschwindet die Marke
+ halb darunter. `100vw` zaehlt die Aussparung naemlich mit. */
+ padding: calc(14px + var(--ws-sicher-oben, 0px))
+ calc(clamp(16px, 4vw, 40px) + var(--ws-sicher-rechts, 0px))
+ 14px
+ calc(clamp(16px, 4vw, 40px) + var(--ws-sicher-links, 0px));
background: rgba(6, 9, 16, .82);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
@@ -470,7 +478,13 @@ body.start > main { position: relative; z-index: 1; }
.inhalt {
max-width: 880px;
margin: 0 auto;
- padding: clamp(28px, 5vw, 56px) clamp(16px, 4vw, 40px) 64px;
+ /* Seitlich und unten der sichere Bereich obendrauf (09.09.2026):
+ im Querformat liegt die Aussparung seitlich, unten sitzt auf
+ randlosen Geraeten die Gestenleiste. Ohne Aussparung sind beide 0. */
+ padding: clamp(28px, 5vw, 56px)
+ calc(clamp(16px, 4vw, 40px) + var(--ws-sicher-rechts, 0px))
+ calc(64px + var(--ws-sicher-unten, 0px))
+ calc(clamp(16px, 4vw, 40px) + var(--ws-sicher-links, 0px));
}
/* Diese vier standen bis zum 31.08.2026 in aufgaben.css -- also in einer
@@ -3726,11 +3740,90 @@ body.start #protokoll {
body[data-fremde-sicht="ja"]::after {
content: "";
position: fixed; inset: 0;
- border: 2px solid rgba(216, 161, 58, .38);
+ /* Der Ton kommt seit dem 09.09.2026 von der Person, deren Sicht
+ laeuft (kopf.js liest ihn aus dem fertigen Umschalter und setzt ihn
+ hier). Damit tragen Rahmen, Knopf und Band dieselbe Farbe, und man
+ sieht auf einen Blick WESSEN Sicht -- nicht nur DASS eine fremde
+ laeuft. Der Rueckfallwert ist das alte Gold. */
+ border: 2px solid color-mix(in srgb, var(--fremd-ton, #d8a13a) 40%, transparent);
pointer-events: none;
z-index: 60;
}
+/* ===================================================================
+ DER ANFANGSBUCHSTABE IM UMSCHALTER (09.09.2026)
+
+ Nur auf dem Handy sichtbar (siehe Medienabfrage weiter unten): Am
+ Rechner steht der ganze Name daneben, dort waere ein Buchstabe davor
+ nur Wiederholung.
+ =================================================================== */
+.sicht__kuerzel {
+ display: none;
+ flex: none;
+ font-size: .78rem; font-weight: 800;
+ line-height: 1;
+ letter-spacing: 0;
+ color: var(--s-ton);
+}
+/* Der Umschalter traegt in fremder Sicht die Farbe der Rolle, deren
+ Sicht laeuft -- die Zuordnung steht schon in gate.css
+ (`[data-rolle="…"] { --rolle-haupt: … }`), sie wird hier nur
+ ausgelesen. Keine zweite Farbliste. */
+.sicht[data-fremd="ja"][data-rolle] { --s-ton: var(--rolle-haupt, #d8a13a); }
+
+/* ===================================================================
+ DAS BAND UNTER DER LEISTE (09.09.2026)
+
+ Es traegt, was aus der Kopfleiste weichen musste: den vollen Namen
+ und den Weg zurueck. Auf dem Rechner ist es aus -- dort steht der
+ Name im Umschalter selbst, und zwei Anzeigen fuer dieselbe Sache
+ sind eine zu viel.
+ =================================================================== */
+.fremd-band {
+ display: none; /* nur auf dem Handy, siehe unten */
+ align-items: center; gap: 9px;
+ padding: 8px clamp(14px, 4vw, 20px);
+ border-bottom: 1px solid color-mix(in srgb, var(--fremd-ton, #d8a13a) 34%, transparent);
+ background: color-mix(in srgb, var(--fremd-ton, #d8a13a) 13%, rgba(8, 12, 20, .92));
+ color: var(--text);
+ font-size: .82rem;
+ position: relative; z-index: 4; /* unter der Leiste (5/6), ueber dem Inhalt */
+}
+.fremd-band[data-rolle] { --fremd-ton: var(--rolle-haupt, #d8a13a); }
+.fremd-band__auge {
+ flex: none; width: 16px; height: 16px;
+ fill: none; stroke: var(--fremd-ton, #d8a13a); stroke-width: 1.6;
+}
+.fremd-band__text {
+ margin: 0; min-width: 0;
+ /* Der Name darf umbrechen statt abzuschneiden -- genau das
+ Abschneiden ("Miesmus…") war ja der Grund, ihn hierher zu holen. */
+ overflow-wrap: anywhere;
+ /* Nicht `--text-leise`: Das Band ist keine Randnotiz, sondern die
+ Antwort auf "wessen Zahlen sehe ich hier gerade". Der gefaehrlichste
+ Fall dieser Funktion ist, dass man sie vergisst -- eine leise
+ Schrift waere genau das Gegenteil davon. */
+ color: var(--text);
+}
+.fremd-band__name { color: var(--fremd-ton, #d8a13a); font-weight: 700; }
+.fremd-band__weg {
+ flex: none; margin-left: auto;
+ min-height: 34px; padding: 0 12px;
+ border: 1px solid color-mix(in srgb, var(--fremd-ton, #d8a13a) 45%, transparent);
+ border-radius: 999px;
+ background: transparent;
+ color: var(--fremd-ton, #d8a13a);
+ font: inherit; font-size: .78rem; font-weight: 600;
+ cursor: pointer;
+ transition: background var(--tempo);
+}
+.fremd-band__weg:hover { background: color-mix(in srgb, var(--fremd-ton, #d8a13a) 16%, transparent); }
+.fremd-band__weg:focus-visible { outline: 2px solid var(--fremd-ton, #d8a13a); outline-offset: 2px; }
+@media (forced-colors: active) {
+ .fremd-band { border-bottom: 1px solid CanvasText; }
+ .fremd-band__weg { border: 1px solid ButtonText; color: ButtonText; }
+}
+
/* Ab hier wird die Kopfleiste eng. Das Schild "SICHT" entfaellt als
Erstes -- das Feld selbst sagt bereits, wessen Sicht laeuft, und der
Rahmen um die Seite sagt DASS eine fremde laeuft. */
@@ -3796,17 +3889,14 @@ body[data-fremde-sicht="ja"]::after {
geschaltet: 34 px je Knopf, 4 px Abstand. Macht 283 und passt.
34 px bleiben deutlich ueber den 24 px, die als Mindestmass fuer ein
Beruehrziel gelten (WCAG 2.5.8). */
-@media (max-width: 340px) {
- .kopfleiste__rechts { gap: 4px; }
- .kopfleiste__rechts > .teilen,
- .kopfleiste__rechts > .chat-knopf,
- .kopfleiste__rechts > .suche-knopf,
- .kopfleiste__rechts > .abmelden,
- .kopfleiste__rechts > .glocke,
- .sicht:not([data-fremd="ja"]) {
- width: 34px; min-width: 34px; height: 34px; min-height: 34px;
- }
-}
+/* Der Block fuer sehr schmale Geraete ist am 09.09.2026 ans ENDE der
+ Datei gewandert, direkt hinter den 560er-Block. Grund: Er stand hier,
+ also VOR ihm, und hat deshalb bei gleicher Spezifitaet verloren --
+ die 34 px kamen nur an, weil der Selektor zufaellig ein `:not()`
+ trug und damit staerker war. Wer sich auf so etwas verlaesst, baut
+ auf Sand: Sobald das `:not()` faellt (und es musste fallen, siehe
+ dort), gilt wieder der 560er-Block. Zwei Regeln fuer dieselbe Sache
+ gehoeren nebeneinander, in der Reihenfolge, in der sie greifen. */
@media (max-width: 300px) {
.kopfleiste { flex-wrap: wrap; row-gap: 8px; }
@@ -7468,18 +7558,46 @@ body.start .k-leiste .feldschild::after {
Der Knopf liegt unsichtbar UEBER dem Auge, statt daneben. Das
bewahrt die Bedienbarkeit (die ganze Flaeche ist das Ziel) und den
Fokusring, kostet aber keine Breite. */
- .sicht:not([data-fremd="ja"]) {
+ /* NACHTRAG 09.09.2026 -- DAS `:not()` IST WEG, UND DAS IST DER KERN.
+
+ Filipe aus der installierten App: "es ist noch nicht alles in einer
+ zeile." Gemessen lag es nicht an seinem Geraet, sondern an genau
+ diesem `:not([data-fremd="ja"])`: In der eigenen Sicht klappte der
+ Umschalter auf 36 px zusammen, in einer fremden blieb er 152 px
+ breit. Auf 320, 360, 390, 412 UND 430 px waren es dann zwei Zeilen
+ -- ausnahmslos.
+
+ Der Satz darueber ("dann darf die Leiste auch umbrechen") war ein
+ Handel, den ich mit mir selbst gemacht habe: Name gegen gerade
+ Zeile. Beides geht -- der Name muss nur woandershin. Er steht jetzt
+ vollstaendig im Band unter der Leiste (.fremd-band), und im Knopf
+ bleiben Farbe und Anfangsbuchstabe.
+
+ Eine Regel fuer beide Faelle, nicht zwei nebeneinander: Der
+ Unterschied ist die Breite und ein Buchstabe, sonst nichts. */
+ .sicht {
position: relative;
width: 36px; min-width: 36px; height: 36px;
padding: 0; gap: 0; justify-content: center;
}
- .sicht:not([data-fremd="ja"]) .sicht__auge { position: relative; z-index: 0; }
- .sicht:not([data-fremd="ja"]) .wahl2 { position: absolute; inset: 0; z-index: 1; }
- .sicht:not([data-fremd="ja"]) .wahl2__knopf {
+ /* Neben dem Auge steht in fremder Sicht noch der Buchstabe. 48 statt
+ 36 px -- gemessen 12 px mehr gegenueber 116 px vorher. */
+ .sicht[data-fremd="ja"] {
+ width: 48px; min-width: 48px;
+ gap: 2px;
+ }
+ .sicht .sicht__auge { position: relative; z-index: 0; }
+ .sicht .sicht__kuerzel { position: relative; z-index: 0; display: block; }
+ .sicht .wahl2 { position: absolute; inset: 0; z-index: 1; }
+ .sicht .wahl2__knopf {
width: 100%; height: 100%; padding: 0;
background: none; border-color: transparent;
}
- .sicht:not([data-fremd="ja"]) .wahl2__knopf svg { display: none; }
+ .sicht .wahl2__knopf svg { display: none; }
+ /* Das Kreuz entfaellt -- der Weg zurueck steht als ganzer Satz im
+ Band darunter, und dort ist er leichter zu treffen als ein
+ 28-px-Kreuz zwischen zwei anderen Knoepfen. */
+ .sicht .sicht__weg { display: none; }
/* DER KNOPF WIRD GEKLAMMERT, NICHT SEIN KASTEN.
Erster Anlauf war `max-width: 30px` am umgebenden .wahl2. Gemessen
@@ -7487,9 +7605,60 @@ body.start .k-leiste .feldschild::after {
tatsaechliche Breite 104. Der Knopf DARIN behielt seine Groesse und
schob den Kasten wieder auf. Wer nur den Rahmen begrenzt, begrenzt
nichts; die Breite kommt vom Inhalt. */
- .sicht:not([data-fremd="ja"]) .wahl2,
- .sicht:not([data-fremd="ja"]) .wahl2__knopf { max-width: none; min-width: 0; }
- .sicht:not([data-fremd="ja"]) .wahl2__text { display: none; }
+ .sicht .wahl2,
+ .sicht .wahl2__knopf { max-width: none; min-width: 0; }
+ .sicht .wahl2__text { display: none; }
+
+ /* DAS BAND ERSCHEINT GENAU DA, WO DER NAME AUS DER LEISTE WEICHT.
+
+ Beide Regeln stehen in derselben Medienabfrage und in derselben
+ Datei -- sonst waere es wieder die alte Falle: eine Schwelle fuer
+ "Name weg" und eine zweite fuer "Band da", und beim naechsten
+ Verschieben stimmt nur noch eine davon. */
+ .fremd-band { display: flex; }
+}
+
+/* =====================================================================
+ SEHR SCHMALE GERAETE (bis 400 px) — 09.09.2026
+
+ Hier stand einmal 340 px. Gemessen reichte das nicht: Bei 360 px war
+ die Leiste auf den UNTERSEITEN immer noch zweizeilig, weil dort der
+ Zurueck-Knopf (38 px) und die Glocke zusaetzlich stehen. Die Rechnung
+ bei 360 px, Unterseite, fremde Sicht:
+
+ zurueck 38 + Umschalter 48 + Teilen 36 + Chat 36 + Suche 36
+ + wer 28 + Glocke 37 + Abmelden 36 = 295
+ dazu 7 Abstaende zu 6 px = 42
+ dazu der Abstand zur Marke = 16
+ ---
+ 353 bei 328 verfuegbar
+
+ 25 px zu viel. Mit 34 px je Knopf und 4 px Abstand sind es 24 px
+ weniger bei den Knoepfen und 14 bei den Abstaenden — es passt mit
+ Luft, ohne dass eine Funktion verschwindet.
+
+ 34 px liegt weiterhin deutlich ueber den 24 px, die WCAG 2.5.8 als
+ Untergrenze nennt. Kleiner sollte es nicht werden; dann waere das
+ Weglassen eines Knopfes die ehrlichere Loesung als ein Ziel, das man
+ nicht mehr trifft.
+
+ DIESER BLOCK MUSS HINTER DEM 560er STEHEN. Beide setzen `width` am
+ selben Element mit derselben Spezifitaet — dann entscheidet die
+ Reihenfolge. Vorher stand er 3600 Zeilen weiter oben und wirkte nur
+ deshalb, weil sein Selektor zufaellig ein `:not()` enthielt.
+ ===================================================================== */
+@media (max-width: 400px) {
+ .kopfleiste__rechts { gap: 4px; }
+ .kopfleiste__rechts > .teilen,
+ .kopfleiste__rechts > .chat-knopf,
+ .kopfleiste__rechts > .suche-knopf,
+ .kopfleiste__rechts > .abmelden,
+ .kopfleiste__rechts > .glocke,
+ .sicht {
+ width: 34px; min-width: 34px; height: 34px; min-height: 34px;
+ }
+ /* Der Buchstabe braucht auch hier seine 12 px daneben. */
+ .sicht[data-fremd="ja"] { width: 46px; min-width: 46px; }
}
/* Am Rechner bleibt das Wort -- dort ist Platz, und ein Wort ist
diff --git a/workspace/assets/js/chat.js b/workspace/assets/js/chat.js
index 29d4ed61..35adcaba 100644
--- a/workspace/assets/js/chat.js
+++ b/workspace/assets/js/chat.js
@@ -1006,14 +1006,31 @@
Schriftgröße, mit der Glocke, mit einem längeren Namen. Also wird
sie gemessen -- einmal beim Start und wieder, wenn sich etwas an
der Fenstergröße ändert. */
+ /* SEIT DEM 09.09.2026 GEHOERT DAS BAND DAZU.
+
+ Ueber der Chatflaeche steht in einer fremden Sicht ein zweites
+ Element: das Band mit dem Namen (.fremd-band, kopf.js). Wer nur die
+ Kopfleiste misst, rechnet dessen Hoehe nicht ab -- und das
+ Eingabefeld steht genau so weit unter dem Bildschirmrand, wie das
+ Band hoch ist. Derselbe Fehler wie mit den festen 62 px, nur mit
+ einem anderen Element.
+
+ Gezaehlt wird deshalb ALLES, was ueber der Flaeche liegt. */
+ const UEBER_DER_FLAECHE = ['.kopfleiste', '.fremd-band'];
function kopfMessen() {
- const kopf = document.querySelector('.kopfleiste');
- if (!kopf) return;
- const h = Math.ceil(kopf.getBoundingClientRect().height);
+ const teile = UEBER_DER_FLAECHE.map((w) => document.querySelector(w)).filter(Boolean);
+ if (!teile.length) return;
+ const h = Math.ceil(teile.reduce((s, e) => s + e.getBoundingClientRect().height, 0));
document.documentElement.style.setProperty('--kopf-hoehe', `${h}px`);
}
kopfMessen();
window.addEventListener('resize', kopfMessen);
+ /* Das Band entsteht erst, wenn kopf.js weiss, wer angemeldet ist --
+ also nach dieser Messung. Ohne diesen Beobachter bliebe der erste
+ Wert stehen, und die Flaeche waere genau um das Band zu lang. */
+ if (window.MutationObserver) {
+ new MutationObserver(kopfMessen).observe(document.body, { childList: true });
+ }
/* Auch wenn die Leiste selbst sich ändert (Glocke erscheint, Name
wird eingesetzt) -- ohne das bliebe der erste Messwert stehen. */
if (window.ResizeObserver) {
diff --git a/workspace/assets/js/kopf.js b/workspace/assets/js/kopf.js
index 65977dad..de262b82 100644
--- a/workspace/assets/js/kopf.js
+++ b/workspace/assets/js/kopf.js
@@ -1217,6 +1217,41 @@
und haelt das fuer den Bestand. */
if (aktiv) {
feld.dataset.fremd = 'ja';
+
+ /* ---- WESSEN SICHT: FARBE UND ANFANGSBUCHSTABE (09.09.2026) ----
+
+ Filipe, mit Bildschirmfoto aus der App: "es ist noch nicht alles
+ in einer zeile."
+
+ Gemessen war der Grund NICHT die Breite seines Geraets, sondern
+ der Zustand: In der eigenen Sicht klappt der Umschalter auf
+ 36 px zusammen, in einer fremden bleibt er mit dem Namen darin
+ 152 px breit. Das sind 116 px mehr, und die passen auf KEINER
+ Handybreite mehr in die Reihe -- auch nicht auf 430 px.
+
+ Meine bisherigen Pruefungen liefen alle in der eigenen Sicht und
+ haben deshalb nie etwas gefunden. Sie haben einen Zustand
+ gemessen, in dem der Nutzer gar nicht war.
+
+ Der Name wandert deshalb aus der Leiste in ein eigenes Band
+ darunter (siehe unten). Im Knopf bleiben zwei Dinge, die
+ zusammen weniger als ein Viertel des Platzes brauchen und mehr
+ sagen als ein abgeschnittenes "Miesmus...": die FARBE der Rolle
+ und der ANFANGSBUCHSTABE des Namens.
+
+ Die Farbe kommt aus `data-rolle` -- dieselbe Zuordnung, die
+ gate.css ohnehin fuer jede Rolle hat. Keine zweite Liste; im
+ Haus ist genau die schon mehrfach auseinandergelaufen. */
+ const wen = personen.find((p) => p.id === aktiv);
+ if (wen?.rolle) feld.dataset.rolle = wen.rolle;
+ const name = (wen?.name || '').trim();
+ const kuerzel = el('span', 'sicht__kuerzel', (name.charAt(0) || '?').toUpperCase());
+ /* Fuer ein Vorleseprogramm steht der ganze Name im Band darunter
+ und im Auswahlfeld -- ein einzelner Buchstabe waere dort nur
+ Rauschen. */
+ kuerzel.setAttribute('aria-hidden', 'true');
+ auge.after(kuerzel);
+
/* EIN KREUZ STATT "zurueck zu mir". Der Satz brauchte mehr Platz
als der Name daneben, und was ein Kreuz an einer aktiven
Auswahl tut, weiss jeder. Die Worte bleiben im aria-label. */
@@ -1232,9 +1267,59 @@
zurueck.addEventListener('click', () => { schreiben(0); location.reload(); });
feld.append(zurueck);
document.body.dataset.fremdeSicht = 'ja';
+
+ /* ---- DAS BAND UNTER DER LEISTE --------------------------------
+
+ Es traegt, was aus der Leiste weichen musste: den vollen Namen
+ und den Weg zurueck -- beides in Worten statt als Kreuz. Auf dem
+ Handy ist es die einzige Stelle, an der der Name steht, und es
+ steht dort GANZ, nicht als "Miesmus...".
+
+ Es gehoert nicht in die Kopfleiste, sondern darunter: In der
+ Leiste waere es die zweite Zeile, die weg soll. Als eigenes
+ Band ist es eine Meldung zur Lage, kein Bedienelement mehr --
+ und es scrollt mit, waehrend der Rahmen um die Seite als
+ staendiges Zeichen bleibt.
+
+ Auf dem Rechner ist es ueberfluessig, dort steht der Name im
+ Umschalter selbst. Das entscheidet das CSS an einer Stelle. */
+ const band = el('div', 'fremd-band');
+ band.id = 'fremd-band';
+ if (wen?.rolle) band.dataset.rolle = wen.rolle;
+ band.setAttribute('role', 'status');
+
+ const bandAuge = auge.cloneNode(true);
+ bandAuge.setAttribute('class', 'fremd-band__auge');
+ band.append(bandAuge);
+
+ const satz = el('p', 'fremd-band__text');
+ satz.append(document.createTextNode('Du siehst gerade die Sicht von '));
+ satz.append(el('strong', 'fremd-band__name', name || 'jemand anderem'));
+ band.append(satz);
+
+ const raus = el('button', 'fremd-band__weg', 'Zurück zu meiner Sicht');
+ raus.type = 'button';
+ raus.addEventListener('click', () => { schreiben(0); location.reload(); });
+ band.append(raus);
+
+ const leiste = document.querySelector('.kopfleiste');
+ if (leiste) leiste.after(band);
+ else document.body.prepend(band);
}
kopf.prepend(feld);
+
+ /* DER RAHMEN UM DIE SEITE NIMMT DIESELBE FARBE AN.
+
+ Der Wert wird aus dem fertigen Element GELESEN, nicht in
+ Javascript nachgeschlagen -- sonst stuende hier eine zweite Liste
+ mit Rollenfarben neben der in gate.css, und beim naechsten
+ Farbwechsel bliebe eine davon stehen. Erst nach dem Einhaengen,
+ vorher hat das Element noch keinen berechneten Stil. */
+ if (aktiv) {
+ const ton = getComputedStyle(feld).getPropertyValue('--rolle-haupt').trim();
+ if (ton) document.body.style.setProperty('--fremd-ton', ton);
+ }
};
/* An werZeigen anhaengen: Jede Seite ruft es ohnehin auf, sobald sie
diff --git a/workspace/aufgaben.html b/workspace/aufgaben.html
index 53a0c4ae..af4fcebc 100644
--- a/workspace/aufgaben.html
+++ b/workspace/aufgaben.html
@@ -12,12 +12,12 @@
Ton wie die Kopfleiste darunter (#06090f), damit Leiste und Seite
eine Flaeche sind statt zweier. -->
-
-
-
-
-
-
+
+
+
+
+
+
@@ -231,10 +231,10 @@
-
-
-
-
-
+
+
+
+
+