/* ══════════════════════════════════════════════════════════════════════════ mobile-dimensions.css — Bedien- und Lesegrössen für Telefone AUSSCHLIESSLICH in @media (max-width: 720px). Auf dem Desktop ändert diese Datei NICHTS — dort sind die dichten Größen gewollt und richtig, weil Mauszeiger und Sitzabstand andere sind als Daumen und Armlänge. Gemessen am 30.07.2026 bei 390×844 über alle 28 Tabs, space.html und admin-users.html (tests/e2e/mobile-dimensions.mjs): 631 Tippziele unter 44×44 px — darunter trifft der Daumen unzuverlässig (Apple HIG, WCAG 2.5.5) 3354 Textstellen unter 12 px — darunter wird geraten statt gelesen 6 Elemente breiter als der Schirm ohne Scrollmöglichkeit Die Verteilung ist stark konzentriert: zehn Selektoren tragen 80 % der Tippziele, zwanzig 80 % der Schriften. Deshalb Regeln statt Einzelpatches. Diese Datei wird UNGESCHICHTET geladen (kein @layer). Das ist Absicht: die Legacy-Sheets liegen in v3 im Layer `legacy`, und ungeschichtete Regeln schlagen jede geschichtete — ohne ein einziges !important. ══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 720px) { /* ── 1. EINGABEFELDER: 16 px, sonst zoomt iOS ──────────────────────────── Safari auf iOS zoomt beim Fokussieren automatisch hinein, wenn ein Eingabefeld kleiner als 16 px ist. Das verschiebt das ganze Layout und der Nutzer muss danach von Hand herauszoomen. Gemessen wurden hier Felder ab 13 px Höhe und deutlich unter 16 px Schrift. */ input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px; min-height: 44px; } input[type="checkbox"], input[type="radio"] { min-width: 22px; min-height: 22px; } /* ── 2. TIPPZIELE auf 44×44 ────────────────────────────────────────────── Die Liste stammt aus der Messung, nicht aus dem Gefühl. Reihenfolge nach Häufigkeit: .icn-btn allein war 185 von 631 Fällen. */ body .icn-btn, body .events-ticker-btn, body .crud-inbox-btn, body .arch-btn, body .archmap-zoombtn, body .qk-d-btn, body .qk-refresh, body .agenda-refresh, body .sticky-tool, body .wb-btn, body .wb-star, body .v3-chip, body .x-reels-pill, body .x-reels-sort-btn, body .x-reels-action-btn, body .tk-pill, body .ov-margin-action, body .legal-subtab, body .dreaming-trigger-btn, body .mcp-btn, body .sm, body .btn-sm { min-width: 44px; min-height: 44px; } /* Knöpfe, die Text tragen, dürfen breiter als hoch sein — erzwungene Mindestbreite würde hier Zeilen sprengen. Nur die Höhe zählt. */ body .tk-act, body .wb-tab, body .legal-subtab, body .council-tab, body button.sm { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* Verlinkungen MITTEN IM FLIESSTEXT bleiben unangetastet (z.B. @-Erwähnungen in X-Beiträgen). Sie auf 44 px aufzublasen würde den Absatz zerreißen, und WCAG 2.5.5 nimmt Links im Textfluss ausdrücklich aus. */ /* ── 3. SCHRIFT: 12 px als Untergrenze ─────────────────────────────────── Gemessen wurden Werte bis herunter zu 8 px. Die benannten Klassen zuerst, danach die nackten span/div über ihren Container (die tragen keine eigene Klasse und lassen sich nur so treffen). */ body .badge, body .a-badge, body .a-lock, body .agenda-src, body .qk-src, body .qk-meta, body .logs-line, body .logs-ts, body .events-ticker-time, body .events-ticker-arg, body .council-badge, body .m-role, body .tk-tag, body .tk-ago, body .tk-caption, body .tk-act, body .xr-card-handle, body .xr-card-topic, body .xr-card-time, body .xr-score, body .mythos-sha, body .mythos-rel, body .mythos-curve-trend, body .ov-section-note, body .ov-brief-k, body .dreaming-stat-label, body .archmap-legend-row, body .qk-health, body .wr-meta, body .crud-goal-meta, body .row-meta, body .v-row-meta, body .tk-err, body .sub, body .hint, body .muted, body code, body kbd, body small { font-size: 12px; line-height: 1.45; } /* Nackte span/div — nur über ihren Container erreichbar. Zahlen aus der Messung: .xr-card-stats 120×, .tk-metrics 120×, .row-item 163×, #akh-pet-status 28×, .cron-item 20×, .council-run-head 15×. */ body .xr-card-stats span, body .xr-card-stats > *, body .tk-metrics span, body .tk-metrics > *, body .row-item span, body .row-item > span, body .row-header span, body #akh-pet-status, body #akh-pet-status span, body #akh-pet-status div, body .cron-item span, body .council-run-head span, body .supplier-card span, body .inv-card span, body .mythos-footer span, body .wb-slider-row span, body .contact-card span, body .arch-btn span { font-size: 12px; } /* SVG-Beschriftungen in der Architekturkarte lagen bei 8 px. Sie skalieren mit dem Zoom der Karte mit, brauchen also eine eigene Untergrenze. */ body #archmap-panel text, body .archmap text, body svg.archmap-svg text { font-size: 11px; } /* ── 4. TABELLEN: erreichbar statt abgeschnitten ───────────────────────── Eine breite Tabelle auf einem schmalen Schirm ist kein Fehler, solange man hinscrollen kann. Ohne scrollbaren Rahmen sind die rechten Spalten mit keiner Geste erreichbar — das ist der Fehler. */ .card:has(> table), .card:has(> .wr-table), .panel:has(> table), section:has(> table) { overflow-x: auto; -webkit-overflow-scrolling: touch; } table { max-width: 100%; } /* ── 5. INNENABSTÄNDE etwas großzügiger ────────────────────────────────── Nicht aus Geschmack: mit 44-px-Tippzielen brauchen die Reihen Luft, sonst kleben die vergrößerten Flächen aneinander und man trifft den Nachbarn. */ .row-item, .cron-item, .agenda-item, .v-row { padding-block: 8px; gap: 10px; } /* ══ NACHTRAG nach der zweiten Messung ══════════════════════════════════ Die Faelle, die der erste Durchgang uebrig liess. Alle Zahlen gemessen, nicht geschaetzt. */ /* Nackte Elemente: mir fehlten die div-Varianten. 113 der Faelle waren ".row-item div", nicht ".row-item span". */ body .row-item div, body .row-item code, body .row-item th, body .cron-item div, body .cron-item code, body .row-header div, body .supplier-card div, body .council-run-head span, body .council-run-head div, body .inv-card span, body .inv-card div, body .voice-meta span, body .contact-card div, body .qk-card h3, body .agenda-card h3, body .qk-g0-step b, body th, body .wr-table th, body .mythos-cost-table th { font-size: 12px; } /* Diese Klassen setzen ihre Groesse spezifischer als "body .klasse" (typisch ".eltern .kind" = 0,2,0 gegen 0,1,1). Nur hier !important - 12 px ist eine Lesbarkeitsgrenze, keine Gestaltungsfrage. */ body .m-role, body .events-ticker-foot, body .mcp-card-url, body .mcp-status-badge, body .w1-step-status, body .v-lbl, body .id-list-meta, body .v-chip-tool, body .v-chip, body .s-label, body .wr-move-date, body .wr-move-nische, body .pinnwand-loc, body .wb-tab-num, body .wb-tag, body .sticky-tag, body .mythos-bar-label, body .sec-add, body .qk-d-btn, body .wb-tab { font-size: 12px !important; } /* Tippziele, die in der ersten Runde fehlten. */ body .wb-tiny-btn, body .osint-subtab, body .a-btn, body .tk-btn, body .v3-ask-send, body .dreaming-toggle-btn, body .x-reels-more-btn, body .factory-btn, body .factory-roadmap-toggle, body .legal-btn, body .wr-refresh, body .archmap-panel-close, body .sec-add { min-width: 44px; min-height: 44px; } /* Textknoepfe und Karten-Links: nur Hoehe, sonst zerreisst es die Zeile. */ body .wr-link, body .contact-card, body a.factory-btn { min-height: 44px; display: inline-flex; align-items: center; } /* ── 6. ANMELDEMASKE: von der Zeile in die Spalte ──────────────────────── shell-core.js:64 setzt display:flex inline, also gilt der Standard flex-direction:row - und kein Stylesheet setzt ihn je auf column. Die neun Kinder legen sich nebeneinander (zusammen 1194 px). Am Desktop passt das in 1440 px, auf dem Telefon lagen Passwortfeld, Token-Feld und Anmelde-Knopf komplett ausserhalb des Bildschirms: man konnte sich nicht anmelden. Vorbestehend - mit und ohne diese Datei identisch gemessen. */ body #login-screen { flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 28px 20px; min-height: 100svh; box-sizing: border-box; } body #login-screen > * { width: 100%; max-width: 320px; box-sizing: border-box; } body #login-screen h1, body #login-screen p { text-align: center; margin: 0; } /* Das Signet behaelt seine Eigenbreite - es ist Bild, kein Formularfeld. */ body #login-screen .login-sparkle { width: auto; max-width: 150px; } body #login-screen #login-error { text-align: center; } /* ══ DRITTER DURCHGANG ═══════════════════════════════════════════════════ Klassen aus der dritten Messung, plus die Faelle mit Inline-Groesse. */ body .archmap-stat-label, body .archmap-stat, body .tk-badge, body .tk-log-title, body .tk-logact, body .tk-dry, body .chat-item-meta, body .persona-stats, body .persona-current, body .persona-badge, body .memory-search-filter, body .memory-hi-name, body .wb-card-sub, body .id-meta, body .osint-meta, body .legal-meta, body .factory-meta, body .grow-meta, body .live-meta, body .finance-meta { font-size: 12px; } /* Inline-Stil (z.B. ) schlaegt jedes Stylesheet - nur !important kommt dagegen an. Bewusst eng gehalten: nur Auszeichnungs-Elemente, die ohnehin klein gesetzt werden. */ body code, body kbd, body samp, body pre { font-size: 12px !important; } /* SVG-Beschriftung: die Architekturkarte skaliert ihren Text mit dem Zoom, dort steht die Groesse als Attribut am Element. */ body svg text, body svg tspan { font-size: 12px !important; } /* .tk-act blieb bei 37 px - die Hoehe kommt aus einer spezifischeren Regel. */ /* Hoehe sass schon, die BREITE lag bei 37 px - der Audit meldet das Minimum aus beidem. Diese Knoepfe stehen in einer umbruchfaehigen Reihe, 44 px Breite sprengt dort nichts. */ body .tk-act, body a.tk-act, body button.tk-act { min-height: 44px !important; min-width: 44px; padding-block: 10px; } /* ══ MUSTER-SWEEP ════════════════════════════════════════════════════════ Nur die Namensmuster, bei denen NICHTS schrumpft. Gemessen ueber alle 28 Tabs, Spalte "davon >12,5px": -time 1153x (0) -ago 40x (0) -hint 32x (0) -eyebrow 8x (0) -desc 8x (0) Bewusst NICHT dabei: -stat (45 wuerden schrumpfen), -tag (48), -meta (51), -label (26), -sub (15). Dort ist die Klasse fuer grosse UND kleine Texte im Einsatz - eine Musterregel haette mehr kaputtgemacht als repariert. */ body [class*="-time"], body [class*="-ago"], body [class*="-hint"], body [class*="-eyebrow"], body [class*="-desc"] { font-size: 12px; } /* Selbst verursacht: die 44-px-Mindestbreite auf .qk-d-btn plus das auf 16 px vergroesserte Datumsfeld sprengen die Zeile .qk-g0-row, die nicht umbricht (.qk-d-btns nebenan tut es bereits). Also auch hier umbrechen lassen - die Alternative waere gewesen, die Tippziele wieder zu verkleinern, und das waere der falsche Tausch. */ body .qk-g0-row, body .qk-item { flex-wrap: wrap; row-gap: 8px; } body .qk-g0-row .qk-date { flex: 1 1 auto; min-width: 0; } }