/* Concierge — eigene Seite (Issue #12). Bewusst knapp: ein Eingabefeld, ein Antwortfenster, zwei Knoepfe. Mehr will die Seite nicht sein. */ :root { color-scheme: dark; /* ⚠ Als Variablen, nicht direkt `env()`: nur so laesst sich die Notch im Browser nachstellen (--sat/--sab ueberschreiben) und die GERENDERTE Seite messen. Dieselbe Bauart wie /cc/s style.css — genau so wurden 2026-08-11 sieben zu kleine Trefferflaechen gefunden, die drei CSS-Durchsichten uebersehen hatten. */ --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); } * { box-sizing: border-box; } /* Wie in /cc/: das Gummiband der GANZEN Seite aus, scrollen soll nur der Verlauf. */ html { overscroll-behavior-y: none; } body { margin: 0; /* ⚠ `max(.6rem, …)`: bei OFFENER Tastatur setzt iOS `safe-area-inset-bottom` auf 0 (der Home-Indikator ist verdeckt) — ohne den Boden klebte die Knopfreihe dann unmittelbar auf der Tastaturkante. Dasselbe Muster wie in /cr/s style.css. */ padding: var(--sat) 1rem max(.6rem, var(--sab)); font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; background: #14161a; color: #e6e6e6; /* ⚠⚠ `height`, NICHT `min-height`. GEMESSEN (390x844, Insets 59/34 nachgestellt): mit `min-height` wuchs die Spalte ueber den Bildschirm, der Verlauf schrumpfte NICHT (522 px statt zu scrollen) und die Knopfreihe lag 11 px UNTER der Unterkante — auf dem iPhone also unerreichbar. Ein Flex-Kind mit `overflow-y: auto` klinkt nur ein, wenn der Container eine feste Hoehe hat; `min-height` laesst ihn nach oben offen. ★ `dvh` schrumpft bei offener Tastatur — hier ERWUENSCHT: Eingabe und Knoepfe bleiben sichtbar, verdraengt wird der Verlauf. (In den Terminal-Ansichten war genau dieses Schrumpfen der Grund, `dvh` zu VERWERFEN — dort ist die Hoehe die Nutzlast, hier ist sie Beiwerk.) */ height: 100dvh; display: flex; flex-direction: column; } .hidden { display: none !important; } header { display: flex; align-items: baseline; gap: 1rem; } header h1 { font-size: 1.3rem; margin: .8rem 0 .5rem; } /* ⚠ GEMESSEN 25x22 px, bevor `min-height`/`padding` hier standen — die 44-px-Regel aus Scheibe 3 gilt auch fuer einen Textlink, und dieser ist der einzige Weg zurueck. */ /* ⚠ 1.3rem: als Wort war `.9rem` richtig, als HAUS-Symbol ist es zu klein zum Treffen und sieht wie ein Tippfehler aus. */ .zurueck { margin-left: auto; color: #8ab4f8; text-decoration: none; font-size: 1.3rem; line-height: 1; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 .4rem; } #main-screen { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; gap: .6rem; } /* ⚠ `min-height: 0` auf dem Flex-Kind, sonst waechst der Verlauf ueber den Bildschirm hinaus statt zu scrollen — der Klassiker bei Flex + overflow. */ /* ⚠ `min-height: 3.5rem` = 56 px und damit DERSELBE Wert wie `CHAT_MIN_PX` in app.js. Wer einen der beiden Werte aendert, muss den anderen anfassen — stehen sie auseinander, rechnet das Platzbudget systematisch falsch. ★ 3.5rem und nicht mehr: bei offener Tastatur ist der Boden des Verlaufs das, was dem Eingabefeld und der Knopfreihe im Weg steht. Der Verlauf ist hier Beiwerk, die Eingabe ist die Nutzlast (derselbe Grund, aus dem diese Seite `dvh` benutzt und die Terminal-Ansichten es verwerfen). */ #co-verlauf { flex: 1 1 auto; overflow-y: auto; min-height: 3.5rem; } /* ⚠⚠ `flex: 0 0 auto` + `min-height`: die Textarea ist ein Flex-Kind, und Flex-Kinder schrumpfen per Vorgabe UNTER ihre Inhaltshoehe. Gemeldet 2026-08-20: „Das Eingabefeld ist auch noch komisch, es scrollt aber resized nicht, daher sehe ich immer nur 1 Zeile, und wenn ich Enter drücke sehe ich gar keinen Text." Genau das: `rows="4"` stand da, aber die sechs Karten darueber haben das Feld auf eine Zeile gequetscht, und der Cursor lief unter den sichtbaren Rand. ⚠ 16px Schrift, sonst zoomt iOS beim Antippen. */ /* ★★★ Auto-Resize wie bei einem Messenger (Issue #40 Punkt 4): EINE Zeile am Start, mitwachsend, gedeckelt, darueber intern scrollend. Vorher stand hier `rows="4"` plus `min-height: 5.25rem` — gebaut war also nur die Begrenzung, nicht das Mitwachsen, und ein leeres Feld belegte vier Zeilen Platz, die dem Chat fehlten. ⚠ Die HOEHE setzt `feldhoeheNachziehen()` in app.js als Inline-Stil aus `scrollHeight`. Hier steht nur, was CSS entscheiden muss: der Boden (eine Zeile) und der Deckel. ⚠⚠ `resize: none` statt `vertical`: ein von Hand gezogenes Feld und ein sich selbst messendes Feld streiten um dieselbe Eigenschaft — der naechste Tastendruck haette die Handarbeit des Nutzers ueberschrieben. Ein Griff, der nicht haelt, ist schlimmer als keiner. ⚠ 16px Schrift, sonst zoomt iOS beim Antippen. */ #co-eingabe { flex: 0 0 auto; resize: none; overflow-y: auto; min-height: 2.5rem; max-height: var(--co-eingabe-max, min(30dvh, 10rem)); box-sizing: border-box; width: 100%; font: inherit; font-size: 16px; line-height: 1.4; background: #14161a; color: #e6edf3; border: 1px solid #333; border-radius: 6px; padding: .5rem; } /* ★★★ Eigene und fremde Nachricht unterscheidbar (Issue #40 Punkt 5) — ueber AUSRICHTUNG, RANDKANTE, BESCHRIFTUNG und ABSTAND, ausdruecklich NICHT ueber farbige Sprechblasen. Der Hub soll technisch und minimalistisch wirken (#30); ein Messenger-Look waere hier ein Stilbruch gegen genau diesen Wunsch. ⚠ Die Beschriftung ist ein echtes Element (`.co-rolle`), kein `::before` mit `content` — sie soll vorgelesen und markiert werden koennen, und der Text kommt aus `textContent`, nicht aus dem Stylesheet. */ .co-zug { margin-bottom: 1.1rem; display: flex; flex-direction: column; gap: .55rem; } /* ⚠ Die Trennlinie ZWISCHEN den Zuegen, nicht um jeden herum: sie beantwortet „wo faengt der naechste Austausch an", und ein Rahmen je Zug waere wieder eine Blase. */ .co-zug + .co-zug { border-top: 1px solid #23262c; padding-top: 1.1rem; } .co-rolle { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #6e7681; } /* Der eigene Einwurf: rechts ausgerichtet, Kante rechts, eingerueckt — das Auge findet die eigene Zeile an der Kante und der Ausrichtung, nicht an einer Farbe. */ .co-zug-ich { display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; } .co-zug-ich .co-frage { border-right: 2px solid #3d4450; padding-right: .6rem; margin-left: 2rem; text-align: right; } .co-frage { font-weight: 600; color: #c9d1d9; white-space: pre-wrap; word-break: break-word; } /* Seine Antwort: linke Kante in der Akzentfarbe der aktiven Kachel, links ausgerichtet, rechts eingerueckt — spiegelbildlich zum Einwurf. */ .co-zug-er { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; border-left: 2px solid #2f6feb; padding-left: .6rem; margin-right: 1.6rem; } .co-text { white-space: pre-wrap; word-break: break-word; margin: 0; font: inherit; } /* ⚠ `flex: 0 0 auto`: die Statuszeile ist die einzige Stelle, an der der Wartezustand der Warteschlange erscheint (Issue #41) — sie darf nicht wegschrumpfen, sonst verschwindet genau die Auskunft, die das Blockieren ersetzt. */ #co-status { flex: 0 0 auto; min-height: 1.2em; font-size: .9rem; opacity: .8; } #co-status.co-fehler, .fehler { color: #ff8080; opacity: 1; } /* ★ Warten ist kein Fehler. Gemeldet 2026-08-20: „ein Blocken des Absenden finde ich doof" — an derselben Stelle stand vorher eine rote Absage, jetzt steht dort ein Zustand, und er muss sich von einer Absage unterscheiden. */ #co-status.co-wartet { color: #e6b800; opacity: 1; } textarea, input { width: 100%; font: inherit; padding: .6rem; background: #1d2027; color: inherit; border: 1px solid #333; border-radius: 8px; } .knopfreihe { display: flex; gap: .5rem; padding-bottom: .6rem; } /* ⚠ Der Anmelde-Knopf war GEMESSEN 43 px hoch — 1 px unter der Regel, und genau die Sorte Abweichung, die kein Blick auf die Regeln findet. */ button { font: inherit; padding: .6rem 1rem; border-radius: 8px; border: 0; background: #2f6feb; color: #fff; min-height: 44px; } button:disabled { opacity: .5; } /* ── Anfassen (Idee 0007, Scheibe 3) ──────────────────────────────────────────── Die Seite hatte KEINE einzige `:active`-Regel: mit abgeschaltetem System-Schleier waere jeder Knopf tot. Rueckmeldung ist Bedingung, nicht Zierrat. ★ `user-select` steht bewusst NUR an den Bedienelementen — der Antworttext soll markierbar bleiben, Kopieren ist dort eine FUNKTION. */ button, .zurueck { touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; } button:active, .zurueck:active { filter: brightness(0.8); transition: none; } /* Ein toter Knopf darf nicht aufleuchten, sonst sieht er bedienbar aus. */ button:disabled:active { filter: none; } .co-nebensache { background: transparent; color: #9aa0a6; border: 1px solid #333; } #login-screen { max-width: 22rem; margin: 15vh auto; display: flex; flex-direction: column; gap: .6rem; } #login-form { display: flex; flex-direction: column; gap: .6rem; } /* ── Stand und Tagebuch: Inhalte des gemeinsamen Panels ────────────────────── */ /* ⚠ Die eigenen Rahmen und Klappzeilen sind WEG (2026-08-20): beides sitzt jetzt in `#co-panel`, und ein Rahmen im Rahmen war der gestapelte Zustand nochmal, nur eine Ebene tiefer. Die Deckelung wandert mit ans Panel. */ #co-stand { font-size: .9rem; } #co-stand h2 { font-size: 1rem; margin: .4rem 0; } #co-stand ul { margin: .2rem 0; padding-left: 1.2rem; } .co-braucht-dich { color: #ffb86b; } #co-log { font-size: .85rem; } .co-e { border-top: 1px solid #262a31; padding: .45rem 0; } .co-e:first-child { border-top: 0; } .co-e-kopf { display: flex; gap: .5rem; align-items: baseline; } /* ⚠ Die Ueberschrift wird in der ANZEIGE gedeckelt, nicht in der Ablage (Issue #42). Seit der Deckel `kurz[:200]` aus dem Schreibpfad raus ist, koennen hier lange Zeilen ankommen — gemessen bis 296 Zeichen. Zwei Zeilen halten die Liste scannbar; der ganze Text steht im `title` und, bei einem Nacht-Zug, im Absatz darunter. ⚠ `min-width: 0` dazu: ohne das schrumpft ein Flex-Kind nicht unter seinen Inhalt und die lange Zeile sprengt die Kopfzeile statt sich zu klammern. */ .co-e-kurz { min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .co-e-zeit { color: #8b949e; font-variant-numeric: tabular-nums; font-size: .8rem; } .co-e-art { font-size: .75rem; padding: 0 .35rem; border-radius: 4px; background: #2a2f37; color: #c9d1d9; } .co-e-art.nacht { background: #3b3054; color: #d3c6f2; } .co-e-art.pruefung { background: #24384f; color: #b8d4f0; } .co-e-art.fehler { background: #4a2626; color: #ffb3b3; } .co-e-text { white-space: pre-wrap; word-break: break-word; margin: .25rem 0 0; color: #b9c0c8; font: inherit; } /* ⚠ Ein laufender Zug muss sich vom Verlauf abheben — sonst sieht „arbeitet gerade" aus wie „hat mal gearbeitet". */ .co-laeuft { color: #7ee787; } /* ── Offene Punkte, beantwortbar (Issue #38) ────────────────────────────────── ★★★ Der Nutzer stand vor fuenf Punkten und EINEM Freitextfeld. Diese Karten sind der Unterschied zwischen „einen Absatz tippen und hoffen" und „fuenf Klicks". */ /* ⚠ Gedeckelt und scrollbar, nicht schiebend: „wir muessen Platz sparen auf der Seite, damit der Chat noch Platz hat" (Nutzer, 2026-08-20). Ohne den Deckel draengt die Liste alles andere aus dem Bild — und traf zuerst das Eingabefeld. */ /* ⚠⚠ `flex: 0 0 auto` — NICHT `0 1 auto`. Gemeldet 2026-08-20 („es gibt aktuell keine Felder zu beantworten"), und die Liste hatte in derselben Minute VIER Punkte: als Flex-Kind mit `shrink: 1` in einer hoehenbegrenzten Spalte wurde dieser Block gegen den grossen Verlauf darunter proportional zusammengedrueckt — gemessen auf einen ~15 px hohen Streifen mit eigener Bildlaufleiste. Sichtbar war davon nichts, nicht einmal die Ueberschrift „4 Punkte brauchen dich". ★ Genau dieselbe Fehlerklasse wie beim Eingabefeld oben (Zeile 49 ff.) — dort wurde sie gefixt, hier stand sie noch. Und sie traf das EINZIGE Element der Seite, auf das jemand wartet: der Rest ist Auskunft, das hier ist Arbeit. `max-height` + `overflow-y` bleiben: eine lange Liste darf scrollen, aber sie darf nicht verschwinden. */ /* ★★★ Die Kachelzeile: zugeklappt EINE Zeile fuer drei Auskuenfte (Nutzerwunsch 2026-08-20). Vorher zwei gestapelte `
` — auf dem Handy genau die Hoehe, die dem Chat fehlte. Idiom von `/cc/`s `#tabbar` uebernommen (44 px, `.active`), damit die Bedienung dieselbe ist wie in den anderen Ansichten. ⚠ `flex: 0 0 auto` wie ueberall in dieser Spalte — die Zeile darf nicht schrumpfen. */ /* ★★★ „Was laeuft gerade" (Nutzerwunsch 2026-08-29). `flex: 0 0 auto` ist hier KEINE Kosmetik, sondern dieselbe Falle wie bei `#co-offen` und `#co-eingabe`: als schrumpfbares Kind dieser hoehenbegrenzten Spalte wuerde die Leiste gegen den Verlauf darunter auf einen Streifen gedrueckt — und ausgerechnet die Anzeige, die Blindheit beheben soll, waere die erste, die verschwindet. ⚠ Gedeckelt und scrollbar, weil die Sitzungsliste mitwaechst: „nicht schrumpfen" darf nicht heissen „waechst ueber den Bildschirm" (Gegenprobe wie bei `#co-offen`). */ #co-puls { flex: 0 0 auto; max-height: 34vh; overflow-y: auto; margin-bottom: .4rem; padding: .4rem .5rem; background: #1a1d23; border: 1px solid #333; border-radius: 8px; font-size: .8rem; } .co-puls-zeile { display: flex; gap: .5rem; align-items: baseline; padding: .1rem 0; } .co-puls-name { flex: 0 0 8.5rem; color: #8b949e; font-size: .7rem; } /* ⚠ `min-width: 0` plus `break-word`: eine lange Tagebuchzeile soll umbrechen, nicht die Zeile sprengen — auf einem iPhone der Normalfall, nicht der Ausnahmefall. */ .co-puls-wert { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; color: #e6edf3; } .co-puls-aktiv .co-puls-wert { color: #7ee787; } .co-puls-warnung .co-puls-wert { color: #e6b800; } .co-puls-stand .co-puls-wert { color: #6e7681; font-size: .7rem; } /* ★★★ Die Leiste des Einklappens (Nutzerbefund 2026-09-03: auf dem iPhone drueckte der Puls die Frage unter die erste Bildschirmhoehe). ⚠ Der Umschalter ist 44 px hoch wie die Kacheln daneben — kleiner ist auf einem Handy kein Ziel, sondern ein Glueckstreffer. Und die Stand-Angabe sitzt in DIESER Zeile, nicht im Detailteil: zugeklappt muss sichtbar bleiben, wie alt der Stand ist. */ .co-puls-leiste { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .15rem; } .co-puls-schalter { min-height: 44px; padding: 0 .5rem; background: none; border: none; color: #8b949e; font-size: .75rem; font-family: inherit; cursor: pointer; } .co-puls-schalter:hover { color: #e6edf3; } .co-puls-stand-kurz { color: #6e7681; font-size: .7rem; } .co-puls-banner { margin: .1rem 0 .3rem; padding: .3rem .45rem; border-radius: 6px; font-weight: 600; } /* Zwei Stufen, zwei Farben — und die Warnung ist die einzige Stelle der Seite mit rotem Rand. Wer sie sieht, muss nicht erst lesen, um zu wissen, dass etwas klemmt. */ .co-puls-achtung { background: #2a2410; color: #e6b800; border: 1px solid #5c4a00; } .co-puls-warnung.co-puls-banner { background: #2b1416; color: #ff8080; border: 1px solid #7a1f26; } .co-puls-kette { display: flex; gap: .25rem; flex-wrap: wrap; margin-bottom: .3rem; } .co-puls-punkt { color: #ff8080; font-size: .7rem; } #co-kacheln { flex: 0 0 auto; display: flex; gap: .4rem; } .co-kachel { flex: 1 1 0; min-width: 0; min-height: 44px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: .1rem; padding: .3rem .5rem; background: #1a1d23; color: #e6edf3; border: 1px solid #333; border-radius: 8px; text-align: left; } .co-kachel.active { border-color: #58a6ff; background: #17202b; } /* ⚠ `min-width: 0` oben plus Ellipsis hier: sonst sprengt ein langer Wert die Zeile statt sich zu kuerzen — bei drei Kacheln auf einem iPhone der Normalfall. */ .co-k-name { font-size: .7rem; color: #8b949e; letter-spacing: .02em; } .co-k-wert { font-size: .9rem; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .co-kachel .co-braucht-dich { color: #e6b800; } .co-kachel .co-laeuft { color: #7ee787; } /* Das gemeinsame Panel: gedeckelt und scrollbar, damit eine lange Aktivitaetsliste den Chat nicht wieder verdraengt — derselbe Grund wie bei `#co-offen`. ⚠⚠ `flex: 0 0 auto`, NICHT `0 1 auto` — dieselbe Fehlerklasse wie bei `#co-offen` und beim Eingabefeld, hier stand sie noch. GEMESSEN am 2026-08-20 (390x844, Insets 59/34, 17 echte Zuege, Kachel „Aktivitaet" offen): `clientHeight` 126 px bei `scrollHeight` 11312 px — also 1,1 % des Inhalts, obwohl `max-height: 40vh` = 337 px erlaubt haette. ★ Der Grund, warum der Deckel NIE griff: Flexbox verteilt das Schrumpfen nach `flex-basis`, und das ist hier die INHALTSHOEHE. Panel (11312) gegen Verlauf (29034) ergibt 28 % zu 72 % — die Hoehe des Aufklappers hing damit am Zufall, wie lang die Aktivitaetsliste gerade ist, und nicht am verfuegbaren Platz. `max-height` wird erst wirksam, wenn nichts mehr schrumpft. ⚠ Der Deckel selbst ist jetzt eine gemessene Variable, keine Konstante: `40vh` waere bei offener Tastatur zu gross (`vh` schrumpft nicht mit) und bei leerer Punkte-Liste unnoetig knapp. `--co-panel-max` setzt `platzVerteilen()` in app.js aus dem WIRKLICH freien Platz; der `40dvh`-Rueckfall gilt nur, bis das erste Mal gemessen wurde. */ #co-panel { flex: 0 0 auto; min-height: 0; overflow-y: auto; max-height: var(--co-panel-max, 40dvh); border: 1px solid #333; border-radius: 8px; padding: .5rem .6rem; background: #14161a; } .co-panel-inhalt.hidden { display: none; } /* ★ Die Rangliste: die Nummer traegt die Aussage, deshalb sichtbar und nicht dekoriert. */ ol.co-plan { margin: 0; padding-left: 1.4rem; display: flex; flex-direction: column; gap: .45rem; } ol.co-plan li { line-height: 1.35; } .co-plan-ziel { display: block; font-weight: 600; word-break: break-word; } .co-plan-grund { display: block; color: #8b949e; font-size: .82rem; word-break: break-word; } .co-plan-wann, .co-plan-leer { color: #8b949e; font-size: .8rem; margin: .5rem 0 0; line-height: 1.4; } /* ⚠ Auch hier der gemessene Deckel statt `45vh`: mit sechs Karten belegte die Liste 380 px und liess dem Chat nur seinen Boden von 4rem — „Gilt fuer alle drei Kacheln, nicht nur ‚Stand'" (Issue #40). `platzVerteilen()` gibt der Liste Vorrang vor dem Panel (sie ist Arbeit, das Panel ist Auskunft), aber nicht mehr als die Haelfte des Budgets, solange ein Panel offen ist. */ #co-offen { flex: 0 0 auto; display: flex; flex-direction: column; gap: .5rem; max-height: var(--co-offen-max, 45dvh); overflow-y: auto; } #co-offen:empty { display: none; } .co-p-ueber { margin: .2rem 0 0; font-size: .95rem; color: #e6b800; } .co-punkt { border: 1px solid #333; border-radius: 8px; background: #1a1d23; padding: .6rem .7rem; } /* ⚠ Der Marker weg: das Dreieck von `
` sitzt vor der Marke und bricht die Kopfzeile. Aufgeklappt/zu erkennt man am Inhalt. */ .co-punkt > summary { list-style: none; } .co-punkt > summary::-webkit-details-marker { display: none; } /* ⚠ Eine wartende Sitzung STEHT — sie muss sich von einem Urteil abheben, das auf niemanden wartet. */ .co-punkt.co-wartet { border-color: #7ee787; } .co-p-sendet { opacity: .55; } /* ⚠ 44 px auch hier: die Kopfzeile IST der Schalter, der die Karte auf- und zuklappt. */ .co-p-kopf { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; min-height: 44px; align-content: center; cursor: pointer; } /* ★★★ Der Kern des Problems, in der zugeklappten Karte sichtbar. */ .co-p-kurz { flex: 1 1 100%; color: #c9d1d9; font-size: .85rem; line-height: 1.35; word-break: break-word; } .co-p-art { font-size: .75rem; padding: 0 .35rem; border-radius: 4px; background: #4a3a1e; color: #ffd591; } .co-wartet .co-p-art { background: #1e4a2a; color: #9ff0b0; } .co-p-titel { font-weight: 600; word-break: break-word; } .co-p-frage { margin: .35rem 0 .5rem; white-space: pre-wrap; word-break: break-word; } .co-p-text { white-space: pre-wrap; word-break: break-word; margin: 0 0 .4rem; color: #b9c0c8; font: inherit; font-size: .85rem; max-height: 30vh; overflow-y: auto; } .co-p-frei { width: 100%; box-sizing: border-box; background: #14161a; color: #e6edf3; border: 1px solid #333; border-radius: 6px; padding: .45rem; font: inherit; font-size: 16px; /* ⚠ 16px: alles darunter loest auf iOS einen Zoom-Sprung aus. */ } .co-p-wahlen { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; } /* ⚠ 44 px: dieselbe Trefferflaeche wie ueberall sonst — die Regel, die diese Seite schon viermal nicht geerbt hat. */ .co-wahl { min-height: 44px; padding: 0 .8rem; border-radius: 8px; border: 1px solid #3d4450; background: #262c36; color: #e6edf3; font: inherit; cursor: pointer; } .co-wahl:active { background: #323a46; } .co-wahl.co-nebensache { background: transparent; color: #8b949e; } /* ★ Issue #131: dieselbe Trefferflaeche wie `.co-wahl` (44px), aber ein Label statt eines Knopfes — ein Ankreuzfeld darf nicht sofort absenden. */ .co-wahl-kasten { min-height: 44px; padding: 0 .8rem; border-radius: 8px; border: 1px solid #3d4450; background: #262c36; color: #e6edf3; font: inherit; cursor: pointer; display: flex; align-items: center; gap: .5rem; } .co-wahl-kasten input[type="checkbox"] { width: 20px; height: 20px; flex: none; } /* ── Gebuendelte Punkte (Nutzer 2026-08-20: „1 Kachel vs. 6") ───────────────── */ .co-gruppe { border: 1px solid #3d4450; border-radius: 8px; background: #171a20; } .co-gruppe > summary { min-height: 44px; display: flex; align-items: center; gap: .5rem; padding: 0 .7rem; cursor: pointer; list-style: none; } .co-gruppe > summary::-webkit-details-marker { display: none; } .co-g-zahl { font-size: .75rem; padding: 0 .35rem; border-radius: 4px; background: #4a3a1e; color: #ffd591; } .co-g-koerper { padding: 0 .7rem .7rem; display: flex; flex-direction: column; gap: .5rem; } .co-g-alle { font-size: .85rem; color: #8b949e; } .co-gruppe .co-punkt { background: #1a1d23; } /* ★★★ Der Loesungsansatz und die Folge je Weg — der Kern der Beschwerde vom 2026-08-20: „Mit nur ‚Nacharbeiten lassen' als Option hoert sich das so an als wuerde ich im Chat einfach ein ‚probiers nochmal' schreiben." ⚠ Die Wirkung steht UNTER dem Knopf, nicht in seinem `title`: auf einem Handy gibt es kein Hovern, dort waere sie unsichtbar gewesen. */ .co-p-plan { margin: .35rem 0 .5rem; padding: .4rem .55rem; border-left: 3px solid #58a6ff; background: #161b22; color: #c9d1d9; font-size: .9rem; line-height: 1.4; white-space: pre-wrap; word-break: break-word; } .co-wahl-box { display: flex; flex-direction: column; gap: .15rem; } .co-wahl-wirkung { color: #8b949e; font-size: .8rem; line-height: 1.3; padding: 0 .2rem; word-break: break-word; } /* ⚠ Eigene Optik, weil es eine andere AUSSAGE ist als die Wirkung — siehe `wahlZeile`. `max-height` + Scrollen: in der Box stand gemessen ein Codeblock ueber 18 Zeilen, und der schoebe auf einem Handy die Antwortknoepfe aus dem Bild. */ .co-wahl-vorschau-kopf { color: #6e7681; font-size: .7rem; padding: 0 .2rem; text-transform: uppercase; letter-spacing: .03em; } /* ★ Eigener Block UNTER der Knopfreihe (2026-08-25): am Knopf machte er die Reihe schief, weil nur die im Terminal gewaehlte Antwort eine Vorschau hat. */ .co-p-vorschau-block { display: flex; flex-direction: column; gap: .2rem; margin-top: .5rem; } .co-wahl-vorschau { margin: 0; padding: .35rem .45rem; background: #0d1117; border: 1px solid #30363d; border-radius: 6px; color: #b9c0c8; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; line-height: 1.35; white-space: pre; overflow-x: auto; max-height: 11rem; overflow-y: auto; } /* ⚠ `.co-p-wahlen` ist eine Flex-Reihe; eine Wahl mit Wirkung ist jetzt ein BLOCK darin und braucht Platz fuer beide Zeilen. */ .co-p-wahlen .co-wahl-box { flex: 1 1 14rem; min-width: 0; } /* ⚠⚠ Ein langes Label MUSS umbrechen duerfen. Als Flex-Kind schrumpft ein Knopf unter seine Inhaltsbreite (`flex-shrink: 1` ist der Standard), und ohne `min-width: 0` plus Umbruch stand der Text dann abgeschnitten da — genau das Bild, das der Nutzer am 2026-08-25 aus `/cc/` gezeigt hat. Die Beschriftung kommt aus einem Modell, ihre Laenge ist nichts, worauf man sich verlassen kann. `text-align: left`, weil ein umbrochener Satz zentriert wie ein Absatz ohne Anfang aussieht. */ .co-p-wahlen .co-wahl, .co-p-wahlen .co-wahl-kasten { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: left; padding: .45rem .8rem; line-height: 1.35; } /* ⚠ Nicht erreicht heisst NICHT falsch: die Zahlen bleiben stehen, sie werden nur gedimmt. Ein „Stand nicht ladbar" an ihrer Stelle tauschte eine gueltige Auskunft gegen eine Fehlermeldung — auf dem Handy beim Aufwachen der Normalfall. */ .co-veraltet { opacity: .6; } .co-p-vorschlag { display: flex; flex-direction: column; gap: .3rem; margin-top: .5rem; padding-top: .5rem; border-top: 1px dashed #333; color: #8b949e; font-size: .8rem; } /* ── Tastatur offen (Idee 0007, Scheibe 6) ─────────────────────────────────── ⚠⚠ Die Klasse setzt `syncKbdOpenClass()` in app.js, und der Detektor dort ist ausdruecklich NICHT `innerHeight - visualViewport.height`: im standalone-Modus schrumpft der LAYOUT-Viewport mit der Tastatur mit, beide Werte sind dann gleich und die Differenz 0 — gemessen wirkungslos genau im Fall, der zaehlt. Gelernt wird stattdessen die groesste je gesehene `visualViewport.height` je Viewport-BREITE. ★ Was hier davon abhaengt: bei offener Tastatur setzt iOS `safe-area-inset-bottom` auf 0 (der Home-Indikator ist verdeckt), `max(.6rem, var(--sab))` haelt also nur noch die .6rem — und der obere Rand ist Platz, der dem Aufklapper und dem Chat fehlt. Deshalb: Kopfzeile knapper, Panel-Deckel enger. Die HOEHEN selbst rechnet `platzVerteilen()` aus `dvh` nach; hier steht nur, was CSS entscheiden kann. */ body.kbd-open header h1 { margin: .2rem 0 .1rem; font-size: 1.1rem; } body.kbd-open #main-screen { gap: .35rem; } /* Kapazität bleibt im gemeinsamen Kartenpanel. */ #co-kapazitaet-form label { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .5rem 0; } #co-kapazitaet-form input { width: 9rem; max-width: 50%; padding: .5rem; } #co-kapazitaet-form p { font-size: .85rem; }