:root{ --play:#1F6F78; --playdark:#10454C; --playlight:#E6F1F2; --playline:#C9DFE1; --orange:#FFBE70; --marke:#F28C28; --ink:#22312F; --paper:#F6F1E6; /* DIE GRIFFE (17.09.2026, 23:35 Uhr, WM, v10-1419) - sein Wort am markierten Bild: *„der aktionsbutton und der mittlere kreis das stickpads sollten immer leicht orange sein, dass sie als schnittstelle klar erkannt werden, sie sollten dann nur aufhellen und kräftiger werden, so wie jetzt, wenn sie aktiv werden.“* Dazu, nachdem meine erste dunkle Auslegung danebenlag: *„b, ganz hell“* und *„das helle orange ist übrigens doch noch ein wenig zu blaß“* (daher S 90 statt 72), und für den Stick: *„am stick kannst du einen grünen rand als kontur immer stehen lassen, bzw mitbewegen lassen.“* GEMESSEN: der ruhende Knopf hob sich mit #1F6F78 auf der Leiste nur 1,82:1 ab (dE 17,7); --griff liegt bei 6,34:1 / dE 80,3 - er ist als Bedienfläche zu erkennen, ohne dass etwas blinkt. Der AKTIVE Ton ist --marke, nicht --orange: von --griff aus wäre --orange nur dE 14,5, --marke ist dE 31,4. Der helle Ring bleibt und trägt sein *„aufhellen“*. **Auf --orange steht sein Wort vom 11.09.2026 („das ist momentan zu stark und kann nerven“) über genau dieses #F28C28 - er hat den neuen Stand am Bild gesehen; wird es doch zu stark, gehört der AKTIVTON geändert, nicht der Ruheton.** --griffrand ist die Kontur BEIDER Griffe: der bisherige --paper-Rand am Stickknopf war gegen das helle Stickfeld 1,02:1 und damit keine Kontur, der 1px-Ring am Aktionsknopf gegen Orange 1,19:1. Tanne liegt bei 4,42:1 zum Feld und 3,0:1 zur Knopffläche. `box-sizing: border-box` ist gesetzt - der 2px-Rand lässt den Knopf bei 152 x 48 px, nichts verrutscht (gemessen vor dem Bau). */ --griff:#F8BD77; --griffrand:#2E7B62; } /* DAS ORANGE IST WEICHER (BT, 11.09.2026, 23:4x). Sein Wort auf die Kontrastfrage: "b. und dabei muss auch das orange der andern buttons angepasst werden. des aktionsbuttons un d sprachbuttons z.b. aber auch die anderen. das ist momentan zu stark und kann nerven". Bis hierher #F28C28. Gerechnet (WCAG): auf dem Pillengrund #2D5B61 3,08 -> 4,62, auf dem Spielgrund #104550 4,30 -> 6,46; Weiss darauf 2,45 -> 1,63, deshalb tragen alle orangen Knoepfe die dunkle Schrift #20160a (10,89) - wie Rucksack, Lupe, Steuerkreuz und Plakette schon vorher. Fokusringe auf hellem Grund sind Petrol (das Orange haette dort nur 1,45). `--marke` ist die Firmenfarbe Urban Roots fuer Schriftzug und Linie der Kopfzeile - kein Knopf, sie bleibt. Die Warnstufe der Leiste (`.low`, fest #f28c28) ist ein Signal und bleibt ebenso. */ *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} html{overflow-x:hidden} /* Was das Programm versteckt, muss verschwinden. Ein eigenes display in einer Regel schlaegt sonst das display:none des hidden-Merkmals - genau daran standen die Kartenknoepfe in jeder Ansicht herum. */ [hidden]{display:none !important} body{ font-family:'Segoe UI',system-ui,Arial,sans-serif; background:var(--playdark); color:var(--ink); display:flex; flex-direction:column; overscroll-behavior:none; } .bar{ background:var(--playdark); color:#fff; display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:.5rem .8rem; border-bottom:3px solid var(--marke); flex-wrap:wrap; /* `position` fuer den Diskettenknopf oben rechts (absolut, mittig ueber beiden Zeilen - so macht er die Kopfzeile nicht hoeher). Von mittags bis 15:30 stand dort der kleine QR mit `--qr-ziel` und `.mit-qr`; beides ist raus. Rechts Platz fuer den Knopf: 38 + Luft. (BT, 11.09.2026) */ position:relative; padding-right:calc(38px + 1.4rem); } .brand{font-weight:700;font-size:.92rem} .brand span{color:var(--marke)} .brand em{font-style:normal;font-weight:400;opacity:.7;font-size:.76rem;margin-left:.35rem} .bar-right{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;justify-content:flex-end;min-width:0} /* Hier standen bis 11.09.2026 `.save` („gespeichert") und `.qr-steht .save` - das Wort entfaellt ueberall (Auftrag TT 15:30); das Zeichen sitzt am Diskettenknopf. (BT) */ /* DER DISKETTENKNOPF (BT, 11.09.2026, Auftrag TT 15:30; sein Wort: "den button kleiner zeichnen als der qr-code jetzt ist" - der QR war 55,5 px, der Knopf ist 38). Rund abgerundet in der Farbe des Papiers wie die Knoepfe der Werkzeugzeile, das Symbol im Dunkel der Kopfzeile. Das Zeichen oben rechts am Knopf: gruen kurz nach dem Speichern (nur, wenn sich mehr als die Zeit geaendert hat), rot mit „!" bei einem Fehler. */ .stand-knopf{position:absolute;top:0;bottom:0;right:.8rem;margin:auto 0; width:38px;height:38px;padding:0;border-radius:10px;cursor:pointer; background:var(--paper);color:var(--playdark);border:1px solid rgba(255,255,255,.25); display:inline-flex;align-items:center;justify-content:center;touch-action:manipulation} .stand-knopf svg{width:24px;height:24px;display:block} .stand-knopf:hover{filter:brightness(1.06)} .stand-zeichen{position:absolute;top:-4px;right:-4px;width:12px;height:12px;border-radius:50%; background:#7bd29a;border:2px solid var(--playdark);opacity:0;transition:opacity .4s; font:700 9px/8px system-ui,sans-serif;color:#fff;text-align:center} .stand-knopf.gespeichert .stand-zeichen{opacity:1;transition:opacity .1s} /* DAS FEHLERZEICHEN EINEN TON DUNKLER (BT, 12.09.2026, 01:0x). Das `!` stand weiss auf #d64541, das sind 4,39 : 1 - unter der Lesegrenze 4,5. Sein Wort auf meinen Vorschlag: "okay". #cc3b37 gibt 4,94 und sieht auf dem dunklen Knopf gleich aus. Gefunden von `werkzeug/kontrast_pruefen.py` (dort als Paar aus zwei Regeln beschrieben, das der Waechter selbst nicht sieht). */ .stand-knopf.fehler .stand-zeichen{opacity:1;background:#cc3b37;width:14px;height:14px; top:-5px;right:-5px;line-height:10px} .stand-knopf.fehler .stand-zeichen::before{content:"!"} .chip{ background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:.28rem .7rem; font-size:.74rem; font-weight:600; cursor:pointer; text-decoration:none; line-height:1.3; } .chip:hover{background:rgba(255,255,255,.22)} .chip.lang[aria-pressed="true"]{background:var(--orange);border-color:var(--orange);color:#20160a} .langs{display:flex;gap:.2rem} /* EIN SPRACHKNOPF MIT LISTE (BT, 11.09.2026, Auftrag TT 13:25): der Knopf in der Farbe der aktiven Sprache, darunter die Liste ueber dem Bild - nur solange sie offen ist. Eintraege 44 hoch, damit der Daumen sie trifft. `z-index` an der Liste, nicht an der Kopfzeile: die Kopfzeile soll unter Fenstern und Rucksack bleiben wie bisher; die Liste liegt ueber dem Titelbild (60), unter dem Tonfeld (70) und den Fenstern (80). */ .langs{position:relative} .chip.lang-knopf{background:var(--orange);border-color:var(--orange);color:#20160a;white-space:nowrap} .lang-liste{position:absolute;top:calc(100% + 6px);left:0;z-index:65; display:flex;flex-direction:column;gap:4px;padding:4px; background:var(--playdark);border:1px solid rgba(255,255,255,.25);border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.35)} .lang-liste .chip.lang{min-height:44px;min-width:64px;font-size:.85rem;text-align:center} /* DAS ZAHNRAD UND SEIN MENUE (BT, 11.09.2026, Auftrag TT 18:05). Der Knopf ist ein Chip wie seine Nachbarn - die Kopfzeile wird nicht hoeher (gemessen vorher: 65,4 bei 360 x 640). Das Menue haengt unter dem Zahnrad wie die Sprachliste, in den Farben des frueheren Tonfelds (Papier, dunkle Schrift), z-index 70 wie dieses: ueber Titelbild (60) und Sprachliste (65), unter den Fenstern (80). Zeilen 44 hoch fuer den Daumen. */ .einst{position:relative;display:flex} .chip.einst-knopf{display:inline-flex;align-items:center;justify-content:center;padding-left:.45rem;padding-right:.45rem} .einst-knopf svg{width:1.3em;height:1.3em;display:block;transition:transform .2s} .einst-knopf[aria-expanded="true"]{background:rgba(255,255,255,.28)} .einst-knopf[aria-expanded="true"] svg{transform:rotate(22.5deg)} /* DAS ZAHNRAD ZEIGT SICH SELBST (sein Wort, 18.09.2026, ueber TT 15:17: *„nur auf das zahnradmenue hinweisen und dabei auch zeigen wo es am bildschirm jeweils ist. eventuell ein paar mal aufblinken lassen, bis es gedrueckt wird oder weiter geht."*) DAS ECHTE ZAHNRAD AN SEINEM PLATZ, kein zweites Zeichen und kein Ortswort im Text: der Knopf steht am Telefon woanders als am Rechner, ein Satz mit „oben" stimmt dann nicht mehr - ein blinkender Knopf stimmt immer. Und fuer eine Kopfsteuerung (sein Ziel vom 17.09.) ist ein blinkendes Ziel zu sehen, ohne dass jemand einen Satz liest. TEMPO UND DAUER - BERICHTIGT AM BILD (18.09.2026, 23:3x, sein Wort: *„das sollte bleiben bis es einmal angeklickt und geoeffnet wird"*, davor *„doch, jetzt hat man es gesehen"* und *„aber zu kurz"*): 1,2 s je Zyklus, also 0,83 Wechsel je Sekunde - weit unter der Grenze von drei je Sekunde -, und es laeuft WEITER, bis das Menue einmal offen war. Vier Male und das Ende beim Losgehen sind damit gefallen; das Blinken hoert auf genau einem Weg auf, und der ist der, den es erreichen will (game.js `zahnradRuhig`, gerufen aus `auf()` - dem Oeffnen, nicht dem Klick: sein Wort war „angeklickt UND geoeffnet"). */ #btnEinst.zeigt{animation:zahnradZeigen 1.2s ease-in-out infinite} @keyframes zahnradZeigen{ 0%,100%{box-shadow:0 0 0 0 rgba(255,190,112,0)} 50%{box-shadow:0 0 0 5px rgba(255,190,112,.8);background:var(--orange);color:#20160a} } /* Der ruhige Modus daempft es (sein Wort, VORHABEN 15:17: „im ruhigen Modus gedaempft"). GEMESSEN am 18.09.2026, 23:2x: der ruhige Modus war bis heute NUR Ton (sound.js `musikZiel`, Schrittlautstaerke) - dies ist seine erste Wirkung auf etwas Sichtbares. Deshalb traegt `` seit heute die Klasse (game.js `tonZeichnen`, die eine Stelle, die den Zustand ohnehin spiegelt). Zweimal statt viermal, und der Ring halb so weit. */ html.ruhig #btnEinst.zeigt{animation:zahnradZeigenRuhig 1.2s ease-in-out infinite} @keyframes zahnradZeigenRuhig{ 0%,100%{box-shadow:0 0 0 0 rgba(255,190,112,0)} 50%{box-shadow:0 0 0 3px rgba(255,190,112,.55);background:var(--orange);color:#20160a} } /* Wer Bewegung abgestellt hat, bekommt die Farbe trotzdem - dasselbe Muster wie beim Aktionsknopf weiter unten: die Farbe ist die Aussage, die Bewegung nur ihr Traeger. */ @media (prefers-reduced-motion:reduce){ #btnEinst.zeigt,html.ruhig #btnEinst.zeigt{ animation:none;box-shadow:0 0 0 3px rgba(255,190,112,.6);background:var(--orange);color:#20160a} } .einst-menue{position:absolute;top:calc(100% + 6px);left:0;z-index:70; width:min(250px, calc(100vw - 1.2rem));background:#f7f3e8;color:#22312F; border-radius:11px;padding:.3rem;box-shadow:0 10px 30px rgba(0,0,0,.28)} .einst-menue[hidden]{display:none} .einst-teil + .einst-teil{border-top:1px solid rgba(34,49,47,.15)} .einst-teil summary{list-style:none;min-height:44px;display:flex;align-items:center; justify-content:space-between;padding:0 .6rem;font-size:.86rem;font-weight:700;cursor:pointer; border-radius:8px} .einst-teil summary::-webkit-details-marker{display:none} .einst-teil summary::after{content:"▸";font-size:.8rem;opacity:.6;transition:transform .15s} .einst-teil[open] summary::after{transform:rotate(90deg)} .einst-teil summary:hover{background:rgba(31,111,120,.08)} .einst-teil summary:focus-visible,.einst-wahl input:focus-visible + span{outline:2px solid var(--play);outline-offset:2px} .einst-wahl{border:0;margin:0;padding:0 .4rem .4rem} .einst-wahl legend{font-size:.74rem;font-weight:700;opacity:.7;padding:0 .2rem .2rem; text-transform:uppercase;letter-spacing:.03em} .einst-wahl label{display:flex;align-items:center;gap:.55rem;min-height:44px;padding:0 .3rem; font-size:.86rem;border-radius:8px;cursor:pointer} .einst-wahl label:hover{background:rgba(31,111,120,.08)} .einst-wahl input{width:18px;height:18px;margin:0;accent-color:#1F6F78;flex:0 0 auto} .einst-ton{padding:.2rem .6rem .6rem} .einst-ton label{display:block;font-size:.78rem;margin-bottom:.55rem} .einst-ton input[type=range]{width:100%;margin-top:.25rem;accent-color:#1F6F78} .einst-ton button{width:100%;min-height:36px;padding:.45rem;border:0;border-radius:7px; background:#1F6F78;color:#fff;font-size:.8rem;font-weight:700;cursor:pointer} /* „Steuerung“ (BT, 11.09.2026, Auftrag TT 20:03): der Linkshaender-Knopf aus dem Einfuehrungsfenster, gebaut wie „Ton aus“ darueber - ein Knopf, der Text sagt den Zustand. */ .einst-steuerung{padding:.2rem .6rem .6rem;display:flex;flex-direction:column;gap:.4rem} /* gap seit v10-1394: zwei Knoepfe (Hand, Finger) */ .einst-steuerung button{width:100%;min-height:40px;padding:.45rem .6rem;border:0;border-radius:7px; background:#1F6F78;color:#fff;font-size:.8rem;font-weight:700;cursor:pointer;line-height:1.3} /* „Als App speichern“ im Zahnrad (BT, 11.09.2026, Auftrag TT 18:38): die Anleitung je Geraet, beim iPhone mit dem Teilen-Zeichen davor. */ .einst-app{padding:.1rem .6rem .6rem;font-size:.82rem;line-height:1.4} .einst-app p{margin:0} .einst-app .teilen{width:18px;height:18px;vertical-align:-4px;margin-right:.35rem;color:#1F6F78} /* DER RUHIGE MODUS (BT, 11.09.2026, Auftrag TT 18:05): an = orange wie der Sprachknopf (sein Wort: "soll der button orange werden"). */ /* Seit 18:5x ein Zeichen statt des Worts „psst“ (sein Wort) - gebaut wie das Zahnrad. Seit 19:4x DREI NOTEN (sein Wort: "groß und ohne extrafarbe = normal, kleiner und oranger button ist der ruhige modus"). Gross = 1,5 em, mit negativem Rand, damit der Knopf so hoch bleibt wie seine Nachbarn (die Kopfzeile waechst nicht); klein = 1,0 em. (BT) */ .chip.ruhig-knopf{display:inline-flex;align-items:center;justify-content:center;padding-left:.4rem;padding-right:.4rem} .ruhig-knopf svg{width:1.5em;height:1.5em;margin:-.1em 0;display:block} .chip.ruhig-knopf[aria-pressed="true"]{background:var(--orange);border-color:var(--orange);color:#20160a} .ruhig-knopf[aria-pressed="true"] svg{width:1em;height:1em;margin:.15em .25em} main{flex:1;display:flex;flex-direction:column;min-height:0;padding:.6rem;gap:.5rem} .stage{position:relative;flex:1;min-height:220px;border-radius:12px;overflow:hidden;background:#9ec6cc} #gameCanvas{display:block;width:100%;height:100%} .overlay-top{ position:absolute;top:.5rem;left:.5rem;right:.5rem; /* LINKSBUENDIG SEIT DEM 19.09.2026 (WM): Hier standen zwei Schilder, eines links und eines rechts - `space-between` war dafuer richtig. Seit der Hinweis in dieser Zeile steht (sein Wort am Bild, siehe index.html), sind es drei, und drei auseinandergezogene Schilder haetten den Hinweis in die Mitte geschoben - genau dorthin, wo er nicht mehr stehen soll. Das Kartenschild haelt seinen Platz rechts ueber `margin-left:auto`. */ display:flex;justify-content:flex-start;gap:.4rem;pointer-events:none;flex-wrap:wrap; } .pill{ background:rgba(16,69,76,.78); color:#fff; border-radius:999px; padding:.2rem .65rem; font-size:.7rem; font-weight:600; } /* Ein Schild ohne Text ist kein Schild. In den Raeumen steht seit dem 19.09.2026 kein Raumname mehr (`SZENEN.prep.label` gibt ""); ohne diese Zeile bliebe dort eine leere Pille stehen. */ .pill:empty{display:none} #cardCount{margin-left:auto} /* Zustandsanzeige. Nie nur ueber Farbe: jeder Wert hat Zeichen und Zahl. */ /* SEIT DEM 11.09.2026 NICHT MEHR IM BILD (BT). Bis hierher lag `.vitals` absolut unten in der Buehne, `pointer-events: none`, damit Tipps ins Bild durchgingen. Jetzt steht die Zeile unter dem Bild (Rechner) oder als vier senkrechte Balken in der Leiste (Telefon, `.pad > #vitals` unten) - der Projektinhaber: "da wäre auch in der mobilansicht platz und man würde nicht die ansicht verlieren auf dem handy". Ueber dem Bild liegt nichts mehr, also darf ein Tipp die Erklaerung oeffnen. */ .vitals{display:flex;flex-wrap:wrap;gap:.3rem} main > .vitals .vital{background:rgba(255,255,255,.12)} /* Hier stand von 14:2x bis 15:4x am 11.09.2026 der Rahmen `.unten` (am Rechner ein Raster mit dem QR rechts ueber Anzeigen und Werkzeugzeile, Ziel 80 px). Seit dem Diskettenknopf steht der QR im Fenster; Rahmen und Regeln sind raus. (BT) */ .vital{ display:inline-flex;align-items:center;gap:.32rem; background:rgba(16,69,76,.78);color:#fff;border-radius:999px; padding:.16rem .5rem;font-size:.68rem;font-weight:700;line-height:1.4; } .vital b{font-weight:700;font-size:.8rem;opacity:.9} .vital i{display:block;width:38px;height:6px;border-radius:3px;background:rgba(255,255,255,.25);overflow:hidden} /* Der Name steht daneben. Ein Hinweisfeld, das man erst antippen muss, erklaert niemandem, was er gerade sieht. */ .vital u{text-decoration:none;font-weight:600;opacity:.82;font-size:.62rem;letter-spacing:.01em} /* Die Energie ist das eine Leben - sie darf nicht aussehen wie die Reisekasse. */ .vital-lead{ background:rgba(16,69,76,.92); box-shadow:0 0 0 2px rgba(240,193,75,.55), 0 2px 8px rgba(0,0,0,.25); padding:.22rem .62rem;font-size:.74rem; } .vital-lead b{font-size:.95rem;opacity:1} .vital-lead u{opacity:.95} .vital-lead i{width:62px;height:9px;border-radius:5px} .vital-lead.crit{animation:pochen 1.1s ease-in-out infinite} @keyframes pochen{ 0%,100%{box-shadow:0 0 0 2px rgba(226,102,75,.55), 0 2px 8px rgba(0,0,0,.25)} 50%{box-shadow:0 0 0 4px rgba(226,102,75,.9), 0 2px 12px rgba(0,0,0,.3)} } .vital i s{display:block;height:100%;width:100%;background:#8fd0c4;text-decoration:none;transition:width .25s} .vital em{font-style:normal;min-width:1.4rem;text-align:right} #vEnergy i s{background:#f0c14b} #vWater i s{background:#7fc4e8} /* Leer ist nicht blau. Eine Flasche ohne Wasser ist ein Gefaess, kein Vorrat - und das soll man auf einen Blick sehen. */ #vWater.leer i s{background:#b9bfc0} #vWater.leer{opacity:.75} #vHealth i s{background:#8fd0a0} .vital.low i s{background:#f28c28} .vital.crit i s{background:#e2664b} .vital-count b{font-size:.75rem} .hint{ /* LINKS OBEN, IM DESIGN DER SCHILDER - GRUEN UND WEISS (WM, 19.09.2026). Sein Wort am Bild: *„den raumnamen oben links im eck (roter kasten) benötigen wir im raum nicht mehr. wir sollten aber den text der mittig erscheint, zukünftig links im eck in dem design grün weiß zeigen. das suggeriert mehr den info-effekt, da ich beim testen festgestellt hab, dass man auf das transparentorange klincken möchte. dann sind beide themen gelöst"* **Damit ist die Entscheidung vom 01.09.2026 aufgehoben** (die Chronik darunter bleibt, weil sie erklaert, warum das Orange entstand). Der Gedanke von damals war richtig und die Wirkung falsch: Hinweis und Handlungsknopf sollten sichtbar zusammengehoeren, also bekam der Hinweis das Orange des Knopfes - und wurde dadurch selbst zum Knopf. Beim Testen hat er danach gegriffen. Ein Hinweis ist kein Bedienteil; er traegt jetzt dieselbe Pille wie die Kopfschilder (`.pill`, dunkeltuerkis auf weiss), steht in der Zeile `.overlay-top` und teilt sich deren `pointer-events: none`. Die Schrift bleibt groesser und fetter als beim Abschnittsschild (13,6 statt 11,2 Punkte): Der Hinweis sagt, was gerade geht - er ist der Satz, den das Kind zuerst lesen soll. ---- Chronik (gilt fuer das Aussehen bis zum 19.09.2026) ---- Bis hierher stand er oben in der Mitte: `position:absolute;left:50%;top:.5rem;transform:translateX(-50%)`. Davor stand er unten ueber dem Wasservorrat - und gerade dann, wenn man vor etwas steht, will man beides sehen: was hier geht und wie viel man noch hat. GROESSER UND IN DER FARBE DES KNOPFES. Bis V2.17: 12,16 Punkte, dunkeltuerkis wie die uebrigen Schilder oben. Der Projektinhaber hat ihn beim Spielen uebersehen - und er steht 235 Punkte vom "Machen"-Knopf entfernt, oben gegen unten, waehrend das Kind in der Mitte steht. Jetzt traegt er das Orange der Handlung. Damit gehoeren Hinweis und Knopf sichtbar zusammen: Wer den einen sieht, findet den anderen. AB HIER HALB DURCHSICHTIG (01.09.2026). Volldeckend lag das Orange wie ein Aufkleber ueber dem Bild und zog mehr Aufmerksamkeit auf sich als die Stelle, von der es spricht. Der erste Versuch mit 78 Prozent und einer Unschaerfe dahinter reichte nicht: Man sah den Weg darunter immer noch nicht. Die Unschaerfe war dabei das eigentliche Hindernis - sie zieht genau das milchig, was durchscheinen soll. Sie ist deshalb wieder weg. Jetzt 50 Prozent Deckung und nichts davor. Der Grund bleibt sichtbar, der Farbklang zum Handlungsknopf bleibt bestehen. Damit die Schrift auch vor unruhigem oder dunklem Grund haelt, bekommt sie einen hellen Schimmer nach aussen - kein Rahmen, nur so viel, dass die Buchstaben nicht mit dem Bild verschwimmen. ---- Ende der Chronik ---- */ margin:0; padding:.28rem .8rem;font-size:.85rem;font-weight:700;line-height:1.35; max-width:min(70%, 24rem); box-shadow:0 1px 5px rgba(0,0,0,.14); pointer-events:none; } /* Ein `

` ist ein Block; in der Flexzeile braucht `hidden` seine Zeile, sonst bliebe ein leeres Schild stehen. */ .hint[hidden]{display:none} #gameCanvas{touch-action:none} .loading{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; background:#9ec6cc;color:var(--playdark);font-weight:700; } /* Kartenknoepfe liegen auf der Buehne, nicht im Laufkreuz: Das Laufkreuz ist ab 820px ausgeblendet, weil man dort mit der Tastatur laeuft - die Karte braucht ihre Bedienung aber in jeder Breite. */ /* Der Loeschknopf steht im Hilfefenster und ist bewusst zurueckhaltend: Er wird beim Testen gebraucht, darf aber kein Kind einladen. */ /* Legende der Anzeigen. Sie steht im Hilfefenster, weil dort ohnehin nachschaut, wer etwas nicht versteht - und weil ein Symbol allein nichts erklaert. */ /* Hinweis zu einer Sprachfassung, die noch nicht geprueft ist. */ /* DER TITELBILDSCHIRM. Er steht vor dem Vorspann und ist das Erste, was ein Kind sieht. Deshalb traegt er nur drei Dinge: das Bild, den Satz und einen Knopf. Alles, was erklaert werden muss - Tasten, Anzeigen -, kommt danach im Vorspann; wer beides zusammenlegt, hat eine Bedienungsanleitung mit Bild und keinen Anfang. Das Bild bekommt die volle Breite und wird nach oben gerueckt: Auf einem Telefon im Hochformat soll die Landschaft stehen bleiben und der Knopf in Daumenreichweite sein. */ /* DAS COVER BEKOMMT DEN BILDSCHIRM. Bis hierher sass das Bild in einer weissen Karte, hoechstens 640 Punkte breit, mit Rand darum - und das Bild war das Kleinste daran. Ein Cover soll aber das Erste und Groesste sein, was man sieht. Jetzt: kein Kasten mehr, das Bild nimmt, was der Bildschirm hergibt, und Name und Knopf liegen darueber. Der Grund ist deckend - beim allerersten Start soll nichts vom Spielfeld durchschimmern. `contain` statt `cover`: Das Bild ist mit 16 zu 9 breiter als die meisten Fenster hoch sind. Auf einem Telefon im Hochformat wuerde `cover` die Haelfte wegschneiden - samt der Wegweiser, auf die es ankommt. Lieber Rand oben und unten als ein halbes Bild. BESTAETIGT VOM PROJEKTINHABER AM 11.09.2026, als das Cover auf die Buehne kam: *„a“* - auf die Frage A (ganzes Bild, Rand oben und unten), B (das Bild fuellt die Buehne; am Telefon blieben 34 % der Bildbreite, Satz und Wegweiser mit den vier Tieren fielen weg - VERWORFEN) oder C (neues Titelbild von TP in Buehnenform, hochkant und breit). (BT) */ /* (Fortsetzung des Kommentars oben) Die Farben kommen aus dem Spiel-Satz (`--paper`, `--playdark`), nicht von der Projektseite. `--white` gab es hier nie: Die Karte war deshalb durchsichtig und die dunkle Schrift darauf unlesbar. */ /* SEIT DEM 11.09.2026 BEKOMMT ES DIE BUEHNE, NICHT DEN BILDSCHIRM (BT). Der Projektinhaber, am Bild des Startbildschirms: *„das tietelbild soll schon in form und größe wie das spielbild gezeigt werden, damit sich der user, nach dem bildwechsel ins spiel, nicht auf neue bildschirmaufteilung einstellen muss.“* Das Cover liegt jetzt IN `.stage` (index.html) und fuellt genau sie - Kopfzeile, Werkzeugzeile und Leiste stehen daneben wie im Spiel. Gemessen vor dem Umbau (v10-1139): Das Cover deckte die ganze Seite (375 x 812), das Bild darin 356 x 149; das Spielbild ist dort 361 x 442. `container-type: size` gibt dem Rahmen unten die Buehnenhoehe (`cqh`) statt der Fensterhoehe (`vh`). KEIN KNOPF MEHR: *„der anfangen button soll beim startbild ganz weg. es soll mit einem klick, egal wohin, weitergehen, oder nach 3 sekunden überblenden“* - `showTitel` in game.js. Beim Zuruecktreten und beim Uebergang ins Spiel blendet es (`titel-aus`, 0,6 s). */ .titel{position:absolute;inset:0;z-index:60;background:var(--playdark); display:flex;flex-direction:column;align-items:center;justify-content:center; gap:.9rem;padding:.6rem;container-type:size;cursor:pointer; transition:opacity .6s ease} .titel[hidden]{display:none} .titel.titel-aus{opacity:0;pointer-events:none} .titel-name,.titel-satz,.titel-rahmen img{transition:opacity .6s ease} /* DAS COVER BLEIBT STEHEN, BIS ES LOSGEHT. Bis hierher verschwand es beim Druck auf "Anfangen", und dahinter lag schon die Spielwelt - beim Aufwachen und bei der Rollenwahl sah man die Karte von Lubenice, obwohl das Kind noch gar nicht dort ist. Das nimmt dem Anfang die Ruhe und verraet ausserdem, wohin es geht. Jetzt bleibt das Bild liegen und tritt nur zurueck: Der Knopf geht weg, der Rest wird ruhiger und rutscht unter die Dialoge. Weg ist es erst, wenn das Spiel wirklich anfaengt. */ .titel.titel-ruht{z-index:20} .titel.titel-ruht .titel-name, .titel.titel-ruht .titel-satz{opacity:.55} .titel.titel-ruht .titel-rahmen img{opacity:.75;box-shadow:none} .titel-box{display:contents} .titel-name{margin:0;font-size:1rem;font-weight:700;letter-spacing:.03em; color:var(--playlight);opacity:.85;text-align:center} /* Das Seitenverhaeltnis steht am Rahmen, nicht am Bild: So kennt der Browser die Hoehe, bevor das Bild geladen ist, und der Satz darin sitzt vom ersten Bild an richtig. Ohne das springt das Cover beim Laden. */ .titel-bild{width:100%;display:flex;align-items:center;justify-content:center; flex:0 1 auto;min-height:0} /* Der Rahmen schmiegt sich ans Bild: Nur so hat der Satz darin einen Bezug. Ein Container ueber die volle Hoehe haette ihn an den Bildschirmrand gesetzt, weit ueber dem Himmel, den er meint. DIE HOEHE HAENGT AM BILDSCHIRM, NICHT AM ELTERNTEIL. Beide voneinander abhaengig zu machen (`max-height:100%` hier wie dort) ergab einen Zirkel: Das Bild fragte den Rahmen, der Rahmen das Bild, und beide wurden null. `vh` bricht ihn auf - eine Zahl, die nicht vom Inhalt kommt. */ .titel-rahmen{position:relative;display:block;line-height:0; width:min(100%, 70vh * 1.778); /* 16 zu 9 - das Mass des Bildes (V2.1) */ /* Seit dem 11.09.2026 liegt das Cover auf der Buehne: Die Hoehe kommt von ihr (`cqh`, `.titel` ist der Container), abzueglich Name, Abstand und Rand. Kennt ein Browser `cqh` nicht, gilt die Zeile darueber. (BT) */ width:min(100%, (100cqh - 3.4rem) * 1.778); aspect-ratio:16 / 9; container-type:inline-size} .titel-rahmen img{width:100%;height:100%;object-fit:contain; border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.35);display:block} /* Der Satz sitzt dort, wo er im Entwurf eingemalt war: links im Himmel. Die Groesse haengt an der Bildbreite, damit er beim Verkleinern mitgeht statt in die Felskante zu laufen. */ /* DER HALO, 05.09.2026. Der Projektinhaber: *"Hier sieht man die Schrift nicht gut"* - und die Ursache gleich mit: *"wegen dem Wolkenkontrast wahrscheinlich."* Er hat recht, und deshalb hilft kein anderer Farbton: Der Grund ist FLECKIG. Hinter derselben Zeile liegt mal offener Himmel, mal eine weisse Wolke; ein Ton, der auf dem einen liest, verschwindet auf dem anderen. **Ein Halo loest das, weil er den Grund UNTER der Schrift vereinheitlicht, statt gegen ihn anzukaempfen.** Drei Schatten, nicht einer: ein enger harter fuer die Kante, ein mittlerer und ein weiter weicher fuer die Flaeche. Zusammen liegt die Schrift auf einem eigenen hellen Feld, das keine Kante hat. UND MEHR MASSE, weil der Projektinhaber danach fragte: *"Vielleicht in mediterraner weicher Schriftform und dafuer dicker?"* Dicker ja - 700 auf 800, 4.2 auf 5.0 cqw, engere Zeilen. **Eine andere Schriftart nicht**, jedenfalls nicht so: Das Spiel laeuft auf Systemschriften ('Segoe UI', system-ui, Arial) und hat KEINE externe Schriftquelle. Eine von Google geladene Schrift waere beim ersten Start ohne Netz nicht da - und der erste Start ist genau der Moment, um den es hier geht. *Wenn eine mediterrane Schrift kommt, dann lokal mitgeliefert (woff2, 20-40 KB) und in den Service Worker aufgenommen.* Die Wolken bleiben unangetastet. Der Projektinhaber: *"Die Wolken sind eigentlich gut."* - Der Text passt sich dem Bild an, nicht umgekehrt. */ /* TOP 9 % GALT FUER EIN BILD VON 1600 x 900. Am 05.09.2026 kam Fassung A zurueck - 1200 x 442, also mehr als doppelt so breit wie hoch. Im selben Rahmen sitzt sie als schmaleres Band in der Mitte, und der Satz stand ueber ihrer Oberkante auf dem Rahmen. *Der Auftrag sagte es voraus: "Bei 1200 x 442 statt 1600 x 900 ist der Himmel ein schmalerer Streifen. Ansehen, nicht rechnen."* */ .titel-satz{position:absolute;left:5.5%;top:21%;margin:0;text-align:left; line-height:1.22;color:#17324F;font-weight:800;letter-spacing:-.015em; font-size:clamp(1.1rem,5.0cqw,2.3rem);max-width:40%;text-wrap:balance; text-shadow:0 0 3px rgba(255,255,255,.95), 0 0 10px rgba(255,255,255,.85), 0 0 22px rgba(255,255,255,.65)} @supports not (font-size:1cqw){.titel-satz{font-size:clamp(.9rem,3.4vw,1.7rem)}} /* `#titelGo` („Anfangen") ist seit dem 11.09.2026 entfernt, samt seinen Regeln - siehe `.titel` oben. (BT) */ @media (max-width:520px){.titel{padding:.6rem;gap:.6rem} .titel-name{font-size:.85rem}} .intro-lang{margin-top:.9rem;padding:.5rem .7rem;border-radius:8px; background:#FFF6EC;border:1px solid #F0C89A; font-size:.76rem;line-height:1.4;color:#7a5a30;text-align:left} .intro-sub{margin-top:1rem;font-size:.8rem;font-weight:700;color:var(--playdark)} .intro-vitals{list-style:none;margin:.4rem 0 0;padding:0;display:grid; grid-template-columns:1fr;gap:.3rem} .intro-vitals li{display:flex;align-items:baseline;gap:.5rem;font-size:.78rem; line-height:1.35;text-align:left} .intro-vitals .z{flex:0 0 1.4rem;text-align:center;font-weight:700; color:var(--play);font-size:.9rem} .intro-vitals .n{font-weight:700} @media (min-width:560px){.intro-vitals{grid-template-columns:1fr 1fr}} .intro-reset{margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--playline); display:flex;flex-direction:column;gap:.35rem;align-items:flex-start} /* `.intro-box` davor seit 11.09.2026 (BT, Messpunkt TT 20:03 „nur ein auffaelliger Knopf“): `.intro-box button` weiter unten (gleiche Gewichtung, spaeter) ueberschrieb diese Regel, und der Knopf zum Loeschen stand gross und orange wie „Weiter wandern“. So gezeichnet war er nie gemeint - weiss, rotbraune Schrift, wie hier seit dem Bau steht. (BT) */ .intro-box .intro-reset button{width:auto;min-height:40px;border-radius:9px;border:1px solid #C9A6A0; background:#fff;color:#9A4436;font-weight:600;font-size:.84rem; padding:.4rem .8rem;cursor:pointer} .intro-box .intro-reset button:hover{border-color:#9A4436;background:#FDF2F0} .intro-reset span{font-size:.76rem;line-height:1.4;color:#6b756f} .mapctl{position:absolute;right:.55rem;top:50%;transform:translateY(-50%); display:flex;flex-direction:column;gap:.4rem;z-index:4} .mapctl button{min-width:44px;min-height:44px;border-radius:10px; border:1px solid var(--playline);background:rgba(255,255,255,.93); color:var(--playdark);font-weight:700;font-size:1rem;cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.18)} .mapctl button:hover{border-color:var(--orange);background:#FFF6EC} .mapctl button.weit{min-width:auto;padding:0 .7rem;font-size:.78rem;white-space:nowrap} /* DIE STEUERUNG STEHT FEST UNTER DEM BILD. Bis hierher schwebte der Joystick: Der Finger setzte irgendwo auf dem Spielbild auf, und dort erschien er. Das ist platzsparend und fuer Kinder schlecht - man muss wissen, dass es ihn gibt, und er verdeckt genau die Stelle, auf die man zulaeuft. Jetzt: links Aktion und Springen, rechts der Joystick. Beide Daumen arbeiten unabhaengig, jede Taste merkt sich ihren eigenen Finger. Laufen und Springen gleichzeitig geht damit, und darauf kommt es bei Geroell und Eselspfad an. Warum der Joystick rechts liegt und nicht links wie ueblich: Entscheidung des Projektinhabers vom 01.09.2026. Technisch ist es gleichwertig - die Trennung der Seiten macht die Gleichzeitigkeit, nicht ihre Reihenfolge. UND SIE IST SELBST EIN LEHRINHALT. Der Projektinhaber am 01.09.2026: "So lernen Kinder auch mehr Koordination." Zwei Daumen, die verschiedenes tun und aufeinander achten muessen, sind eine Faehigkeit fuer sich - dieselbe, die beim Springen ueber Geroell gebraucht wird. Das Spiel hat dafuer sogar einen eigenen Zaehler: Koennen. */ /* SEIT DEM 10.09.2026: DER AKTIONSKNOPF STEHT UEBER DEM JOYSTICK, EINGERUECKT. Der Projektinhaber (am Raum, zwischen 21:54 und 22:04; WM 22:04, TT 22:13): *„diese button/stick-pad sollen untereinander und eingerueckt stehen (ziel gruen).“* Knopf oben, Joystick darunter, beide auf EINER senkrechten Achse. Die Seite bleibt seine Wahl vom 01.09. (Joystick rechts, fuer Linkshaender links) - die Trennung „Tasten links, Stick rechts" oben gilt fuer Knopf und Stick nicht mehr: Sie teilen sich eine Saeule. Der QR-Code bleibt am anderen Rand. Ein Grid statt Flex, weil zwei Zeilen gebraucht werden, ohne das HTML anzufassen: Spalte 1 der QR-Code ueber beide Zeilen, Spalte 2 Luft, Spalte 3 die Saeule. EINGERUECKT UM EINEN ANTEIL DER BREITE, nicht um feste Pixel. In seinem Bild (800 px breit) liegt die Achse etwa 170 px vom rechten Rand; 170 px fest waeren am Telefon (375 px) die Bildmitte. `21vw - 60px` legt die Achse bei 800 px auf 180 px vom Rand, bei 375 px auf 84 px. (BT, 10.09.2026, 22:32) DIE HOEHE - gemessen von BT am 10.09.2026 im Browser, vor und nach dem Bau (Bühnenhöhe in CSS-px). Die Leiste waechst von 104 auf 162 px. Die Seite scrollt in keinem Format; was fehlt, gibt die Buehne ab (flex): 375 x 812 Abnahmetelefon 443 -> 440 390 x 844 460 -> 460 360 x 740 425 -> 368 375 x 667 355 -> 295 800 x 700 420 -> 361 ab 820 px Breite gibt es die Leiste nicht (unveraendert) Quer (812 x 375) scrollte die Seite schon vorher (471 px Inhalt). */ /* SEIT DEM 11.09.2026: LINKS DER AKTIONSKNOPF, IN DER MITTE DER QR-CODE, RECHTS DAS LAUFKREUZ - zwei Daumen. Der Projektinhaber (11.09.2026, mit drei farbigen Pfeilen, ueber TT 12:18): *„können wir die spielerbedienung, die buttons unten, neu anordnen? ich habe drei verschiebungen je in einer farbe markiert. so kann man beidhändig gut bedienen und der qr-code wandert in die mitte, die man schlecht mit dem daumen erreicht.“* Der Aktionsknopf kommt aus der Werkzeugzeile hierher - game.js `pickPlatz()` haengt den EINEN Knopf um; ab 820 px Breite, wo es kein Laufkreuz gibt, bleibt er oben in der Werkzeugzeile. Der QR-Code wandert von Spalte 1 in die Mitte, die Werkzeugknoepfe ruecken oben nach links. Spalte 1 der Aktionsknopf, Spalte 2 der QR-Code (mittig, ueber beide Zeilen), Spalte 3 die Saeule aus Sprungknopf und Laufkreuz. Der Aktionsknopf steht in Zeile 2, auf der Hoehe des Laufkreuzes - auch wenn darueber der Sprungknopf erscheint. Er ist 48 hoch, das Laufkreuz 104: Die Leiste waechst nicht. (BT, 11.09.2026) */ /* SEIT DEM 11.09.2026, NACHMITTAGS - VIER SPALTEN (BT): Aktion, QR-Code, die vier Balken, Laufkreuz. Der Projektinhaber (ueber TT 13:07): die Anzeigen "unter das bile neben die steuerrung"; der QR-Code rueckt dafuer nach links neben den Aktionsknopf (sein blauer Pfeil). Die Balken nehmen die freie Spalte und stehen dort mittig. */ /* SEIT DEM 11.09.2026, 14 UHR - DREI SPALTEN (BT, Auftrag TT 13:25): Aktion, die vier Balken, Laufkreuz. Der QR-Code ist oben rechts in die Kopfzeile gezogen (`#qrStand` unten); die Balken bekommen seinen Platz. */ .pad{display:grid;grid-template-columns:auto 1fr auto;align-items:center; column-gap:.6rem;row-gap:.4rem;padding-right:clamp(0px, calc(21vw - 60px), 110px)} /* DER AKTIONSKNOPF RUECKT NACH INNEN (sein Wort mit Bild, 18.09.2026, 20:5x, ueber TT: *„diesen button auch noch etwas nach innen schieben. (rot -> gruen). dazu danach die drei anzeigen/saeulen in der mitte wieder mittig zwischen button und pad ausrichten."*) Ein Drittel seiner eigenen Breite, deshalb aus `--pick-breite` gerechnet und nicht als feste Zahl - am Telefon ist der Knopf 6.5rem statt 9.5rem breit. DIE SAEULEN ZIEHEN VON SELBST NACH: `#vitals` steht in der 1fr-Spalte mit `justify-self:center`; waechst Spalte 1 um die Einrueckung, wandert ihre Mitte mit. Deshalb ist es EINE Aenderung, nicht zwei. */ .pad > #btnPick{grid-column:1;grid-row:2;margin-left:calc(var(--pick-breite) / 3)} .pad > #vitals{grid-column:2;grid-row:1 / span 2;justify-self:center} .pad > .pad-act{grid-column:3;grid-row:1;justify-self:center} .pad > .pad-stick{grid-column:3;grid-row:2;justify-self:center} /* DIE VIER BALKEN SENKRECHT (BT, 11.09.2026): Zeichen oben (12 px), darunter die Fuellhoehe in der Farbe von heute, ohne Zahl - die steht beim Antippen in der Erklaerung (game.js showTip). Die Hoehe kommt als `--anteil` aus renderVitals; die Breite, die es fuer die liegende Zeile setzt, gilt hier nicht. */ .pad > #vitals{display:flex;flex-wrap:nowrap;gap:3px;align-items:flex-end} .pad .vital{flex-direction:column;align-items:center;gap:3px;padding:0; background:none;box-shadow:none;border-radius:6px;line-height:1} .pad .vital b{font-size:12px;opacity:1} .pad .vital u,.pad .vital em{display:none} .pad .vital i{display:block;position:relative;width:11px;height:70px;border-radius:6px; background:rgba(255,255,255,.18);overflow:hidden} .pad .vital i s{position:absolute;left:0;bottom:0;width:100% !important; height:calc(var(--anteil, 1) * 100%);transition:height .25s} .pad .vital-tip{top:auto;bottom:calc(100% + 8px);left:50%;right:auto;transform:translateX(-50%)} .pad .vital-tip::before{display:none} /* DIE LEISTE IN STUFEN (BT, 11.09.2026, 23:1x; sein Wort „10 einheiten als skala anzeigen und den stand in 20 einheiten abbilden“, dazu die Kontur in der Fuellfarbe und der langgezogene Tropfen). Die Fuellung kommt als `--anteil` aus renderVitals (ganze Einheiten von 20); die Skala sind 10 Striche in der Farbe des Grundes, die Kontur hat die Farbe der Fuellung und wechselt mit ihr. Ohne Zahl - auch am Rechner (sein Wort 22:03). Motivation wird nicht mehr gezeigt; sie geht zu 25 % in die Energie ein (game.js renderVitals). */ #vEnergy{--fuell:#f0c14b} #vHealth{--fuell:#8fd0a0} /* Der Tropfen bleibt blau, auch beim letzten Rest - `#vitals` davor wiegt schwerer als `.vital.crit`; er warnt mit dem Puls, nicht mit Rot. Ohne Flasche grau (`.leer` unten). */ #vitals #vWater{--fuell:#7fc4e8} #vitals .vital.low{--fuell:#f28c28} #vitals .vital.crit{--fuell:#e2664b} #vitals #vWater.leer{--fuell:#b9bfc0} #vitals #vMood{display:none} #vitals #vEnergy em,#vitals #vHealth em,#vitals #vWater em{display:none} #vitals .vital i{position:relative} #vitals .vital i s{background:var(--fuell)} /* Skala: 10 Striche - liegend am Rechner, stehend am Telefon und im Tropfen. */ #vitals .vital i::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:repeating-linear-gradient(to right,transparent 0 calc(10% - 1px),var(--playdark) calc(10% - 1px) 10%)} .pad #vitals .vital i::before,#vitals #vWater i::before{ background:repeating-linear-gradient(to top,transparent 0 calc(10% - 1px),var(--playdark) calc(10% - 1px) 10%)} /* Kontur in der Fuellfarbe, ueber Fuellung und Skala. */ #vitals .vital i::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none; border:1.2px solid var(--fuell);border-radius:inherit} /* DER TROPFEN: 20 x 50 am Telefon, 10 x 25 in der Zeile am Rechner, abgesetzt (8 px Luft); die Form als Maske, die Kontur als Bild (eine Maske schneidet jeden Rand ab - deshalb 2,4 px Strich, 1,2 px bleiben sichtbar). Die Fuellung steht, wie bei den Saeulen, von unten. */ /* SO HOCH WIE DIE SAEULEN (17.09.2026, 21:3x, WM, v10-1405) - sein Wort am Bild: *„der wassertropfen soll gleich hoch wie die säulen daneben werden, dann kann man auch besser die aufteilung erkennen.“* Die Saeulen sind 11 x 70; der Tropfen war 20 x 50 und sass 20 px tiefer. Jetzt 28 x 70 - dieselbe Hoehe, dieselbe Unterkante, die Form massstaeblich mitgewachsen (20:50 = 28:70), und die zehn Striche der Skala sind statt 5 nun 7 Punkte hoch. */ #vitals #vWater i{width:28px;height:70px;border-radius:0;background:rgba(255,255,255,.18); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 50'%3E%3Cpath d='M10 .5C10 .5 1 20 1 40.5a9 9 0 0 0 18 0C19 20 10 .5 10 .5Z'/%3E%3C/svg%3E") center/100% 100% no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 50'%3E%3Cpath d='M10 .5C10 .5 1 20 1 40.5a9 9 0 0 0 18 0C19 20 10 .5 10 .5Z'/%3E%3C/svg%3E") center/100% 100% no-repeat} #vitals #vWater i s{position:absolute;left:0;bottom:0;width:100% !important;height:calc(var(--anteil, 1) * 100%)} #vitals #vWater i::after{border:0;border-radius:0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 50'%3E%3Cpath d='M10 .5C10 .5 1 20 1 40.5a9 9 0 0 0 18 0C19 20 10 .5 10 .5Z' fill='none' stroke='%237fc4e8' stroke-width='2.4'/%3E%3C/svg%3E") center/100% 100% no-repeat} #vitals #vWater.leer i::after{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 50'%3E%3Cpath d='M10 .5C10 .5 1 20 1 40.5a9 9 0 0 0 18 0C19 20 10 .5 10 .5Z' fill='none' stroke='%23b9bfc0' stroke-width='2.4'/%3E%3C/svg%3E")} .pad #vitals #vWater{margin-left:5px} .pad #vitals #vWater b{display:none} /* Am Rechner 10 x 25 in der 28-px-Zeile. Mit `#vitals` im Waehler: `#vitals #vWater i` (zwei Kennungen) oben wog sonst schwerer - der erste Lauf 23:19 zeigte den Tropfen 20 x 50, die Zeile 55 statt 28 hoch und die Buehne 27 px kleiner (gemessen). */ main > #vitals #vWater i{width:9px;height:23px} /* DER LETZTE REST (sein Wort 22:1x: „nur noch ein schluck drin ... ab da kann auch der leere tropfen leicht pulsieren“): Klasse `rest` aus renderVitals, solange hoechstens ein Schluck drin ist. Ruhig - 1,5 s, 6 %. */ #vitals #vWater.rest i{animation:tropfenpuls 1.5s ease-in-out infinite;transform-origin:50% 70%} @keyframes tropfenpuls{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}} @media (prefers-reduced-motion: reduce){#vitals #vWater.rest i{animation:none}} /* FUER LINKSHAENDER SPIEGELBAR. Der Joystick liegt rechts, die Tasten links. Fuer etwa jedes zehnte Kind ist das die falsche Seite - und bei einer Steuerung, die Koordination schulen soll, ist die Haendigkeit kein Nebenschauplatz. `row-reverse` dreht nur die Anordnung, nicht die Funktion: Der Joystick bleibt der Joystick, er sitzt nur woanders. Deshalb ist es eine CSS-Klasse und keine zweite Steuerungslogik. SEIT DEM 10.09.2026 (Grid statt Flex) tauschen Saeule und QR-Code die Spalte, und die Einrueckung wechselt die Seite - dieselbe Klasse, kein zweiter Schalter. `row-reverse` taete im Grid nichts mehr. SEIT DEM 11.09.2026 tauschen Aktionsknopf und Saeule die Spalte; der QR-Code bleibt in der Mitte. Laufkreuz links, Aktion rechts. (BT) SEIT DEM 11.09.2026, 14 UHR drei Spalten wie rechts, gespiegelt: Laufkreuz, Balken, Aktion. Der QR-Code steht in der Kopfzeile. (BT) */ .pad.pad-links{grid-template-columns:auto 1fr auto; padding-right:0;padding-left:clamp(0px, calc(21vw - 60px), 110px)} /* Gespiegelt wechselt die Einrueckung die Seite - „nach innen" heisst hier nach links (WM, 18.09.2026, nach dem Kommentar oben: dieselbe Klasse, kein zweiter Schalter). */ .pad.pad-links > #btnPick{grid-column:3;margin-left:0;margin-right:calc(var(--pick-breite) / 3)} .pad.pad-links > #vitals{grid-column:2} .pad.pad-links > .pad-act,.pad.pad-links > .pad-stick{grid-column:1} .pad-stick{ position:relative;width:104px;height:104px;border-radius:50%;flex:0 0 auto; background:var(--playlight);border:2px solid var(--playline); touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab; } .pad-stick.aktiv{border-color:var(--marke);background:#FDEBD8} .pad-stick i{ position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px; border-radius:50%;background:var(--griff);border:2px solid var(--griffrand); pointer-events:none;transition:background .12s; } .pad-stick.aktiv i{background:var(--marke)} /* SOBALD ETWAS GEHT, wird auch die Stickmitte satt - dieselbe Farbe wie der Aktionsknopf (17.09.2026, 23:43 Uhr, WM, v10-1423). `bereit` setzt `updateHud` an beiden zugleich; `aktiv` bleibt der Finger auf dem Stick. */ .pad-stick.bereit i{background:var(--marke)} /* Vier Pfeilspitzen als Andeutung: Man sieht, wohin es geht, ohne dass es nach Knopf aussieht. */ .pad-stick::before{ content:"";position:absolute;inset:9px;border-radius:50%; background: conic-gradient(from 45deg,transparent 0 10%,rgba(31,111,120,.16) 10% 15%,transparent 15% 35%, rgba(31,111,120,.16) 35% 40%,transparent 40% 60%,rgba(31,111,120,.16) 60% 65%, transparent 65% 85%,rgba(31,111,120,.16) 85% 90%,transparent 90%); pointer-events:none; } .pad-move,.pad-act{display:flex;gap:.4rem} .pad button{ min-width:58px;min-height:52px;border-radius:12px;border:1px solid var(--playline); background:var(--paper);color:var(--playdark);font-size:1.05rem;font-weight:700; cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none; padding:.4rem .8rem; } /* Farbig, solange gedrueckt: Ohne Rueckmeldung weiss ein Kind nicht, ob der Knopf angekommen ist - besonders beim Springen, wo nichts passiert, wenn man gerade nicht laufen kann. `.gedrueckt` setzt der Code, damit die Farbe auch bleibt, wenn der Finger leicht verrutscht; :active allein liesse sie dann los. */ .pad button:active,.pad button.gedrueckt{ background:var(--orange);border-color:var(--orange);color:#20160a} /* Hier stand bis 11.09.2026, 23:5x `#btnAction` (orange) - keine Datei in index.html oder im Code traegt die Kennung (gesucht 23:5x); der Handlungsknopf ist #btnPick, weiter unten (BT). */ .pad button.small{min-width:48px;font-size:.72rem;padding:.4rem .5rem} .pad button:disabled{opacity:.42;cursor:default} /* Gelernt UND gerade nicht moeglich - im Wasser etwa. Das Orange bliebe sonst durch die Transparenz olivgruen stehen und saehe nach Fehler aus. Statt dessen: die ruhige Grundfarbe, nur blasser. Der Knopf sagt damit "kenne ich, jetzt nicht" statt "kaputt". */ #btnUp.bereit:disabled{ background:var(--paper);color:var(--playdark);border-color:var(--playline); box-shadow:none;animation:none;opacity:.5} .find-art{display:flex;justify-content:center;margin-bottom:.6rem} .find-art svg{width:min(100%,240px);height:auto} .gain-line{ margin-top:.7rem;padding:.45rem .7rem;border-left:4px solid #6aa84f; background:#eef6ea;border-radius:8px;font-weight:700;font-size:.88rem; } .legal{color:#cfe6e8;font-size:.66rem;line-height:1.5;text-align:center;opacity:.85} dialog{ border:0;border-radius:14px;padding:1.1rem 1.2rem; width:min(34rem, calc(100vw - 1.5rem));max-width:none; margin:auto; background:var(--paper);color:var(--ink);box-shadow:0 18px 50px rgba(0,0,0,.35); } dialog::backdrop{background:rgba(8,30,33,.55)} /* --- DAS FENSTER, DAS NUR GELESEN WIRD ----------------------------- Ein Fenster ohne Knopf, das von selbst wieder geht - heute der erste Text des Spiels. Es ist KEIN Dialog, sondern eine Einblendung, und deshalb sieht es anders aus: kein Schleier das Zimmer soll dahinter hell werden. Ein Backdrop, der bleibt, waehrend der Dunkelfilter geht, laesst es halbdunkel stehen. gross der Projektinhaber am 05.09.2026, mit einem Umriss ueber das halbe Bild: *"mache das Feld etwa so gross"* mittig, gross *"platziere den Text mittig und etwas groesser"* und danach: *"den Text noch groesser bitte"* Die Schriftart bleibt, wie sie ist - *"die Schriftart passt bereits"*. 05.09.2026 */ /* `[open]` IST PFLICHT, NICHT ZIERDE. Ein

ist geschlossen `display:none` - aus dem Browser-Stylesheet. Eine eigene `display:flex`-Regel ohne `[open]` schlaegt das und laesst das Feld stehen, nachdem es geschlossen wurde: `Dialogs.isOpen` war false, und im Bild stand der Text weiter. *Gemessen am 05.09.2026: bei 2,6 s zu, bei 3,8 s immer noch sichtbar.* */ dialog.nur-lesen[open]{ /* GEMESSEN AM ROTEN RAHMEN vom 05.09.2026: *"soll: rot Textfeldgroesse, blau Textgroesse"*. Der Rahmen war 555 x 330 Bildpunkte, das Feld davor 1150 x 685 - also 48 Prozent in beiden Richtungen. 36rem x 0,48 = 17,3rem, 24rem x 0,48 = 11,5rem. */ width:min(17.5rem, calc(100vw - 2.5rem)); min-height:min(11.5rem, 32vh); display:flex;flex-direction:column; align-items:center;justify-content:center; text-align:center; /* ES LIEGT IM BILD, NICHT IM FENSTER. Ein zentriert sich im Viewport - und der ist hoeher als die Buehne, also rutschte das Feld unten ueber das Spielbild hinaus, in die Anzeigeleiste. `--buehne-y` und `--buehne-h` misst `dialog.js` beim Oeffnen an der `.stage`; ohne sie bleibt es bei der Mitte, wie bisher. */ position:fixed; top:var(--buehne-y, 50%); /* `bottom:auto` IST DER PUNKT. Ein bekommt vom Browser `inset:0` mit auf den Weg; mit `margin:auto` und gesetztem top UND bottom zentriert er sich zwischen beiden, statt bei top zu sitzen. *Gemessen am 05.09.2026: `--buehne-y` stand auf 285 px, das Feld landete bei 396 - der Unterschied war genau diese Zentrierung.* */ bottom:auto;left:50%;right:auto; margin:0; transform:translate(-50%, -50%); max-height:calc(var(--buehne-h, 100vh) - 1.5rem); } dialog.nur-lesen[open]::backdrop{background:transparent} dialog.nur-lesen[open] h2{ /* Der blaue Rahmen war 370 Bildpunkte breit, der Schriftzug davor 680 - also 54 Prozent. Aus 7vw (56 px bei 800 px Fensterbreite) werden 3,8vw. */ font-size:clamp(1.5rem, 3.8vw, 2.4rem); line-height:1.12;margin:0; } /* SIE BLENDET AUS, SIE VERSCHWINDET NICHT. Der Projektinhaber am 05.09.2026: *"das Textfeld muss nach zwei Sekunden selbststaendig ausblenden"*. Der Wecker setzt `geht`, wartet die Blende ab und schliesst dann - so endet die Einblendung, wie sie gekommen ist. */ dialog.nur-lesen[open]{transition:opacity .45s ease} dialog.nur-lesen[open].geht{opacity:0} @media (prefers-reduced-motion: reduce){ dialog.nur-lesen[open]{transition:none} } /* Ohne Text ist der Absatz leer - er wuerde sonst als Leerzeile unter der Zeile stehen und sie aus der Mitte schieben. */ dialog.nur-lesen[open] p:empty{display:none} dialog h2{font-size:1.05rem;color:var(--playdark);margin-bottom:.5rem} dialog p{font-size:.94rem;line-height:1.6} .action-line{ margin-top:.7rem;padding:.5rem .7rem;border-left:4px solid var(--orange); background:#FFF6EC;border-radius:8px;font-weight:600;font-size:.88rem; } .choices{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem} .choices button{ flex:1 1 auto;min-height:44px;border-radius:10px;border:1px solid var(--playline); background:#fff;color:var(--playdark);font-weight:600;font-size:.86rem; padding:.5rem .9rem;cursor:pointer; } .choices button:hover{border-color:var(--orange);background:#FFF6EC} /* DER GEWAEHLTE KNOPF MUSS ZU SEHEN SEIN (18.09.2026, WM) - sein Wort ueber TT: *„bei diesem (und anderen) abfragefeldern kann ich nicht mit den richtungstasten auswählen um dann mit enter zu bestätigen.“* Mit den Pfeiltasten (dialog.js, `tastenImFenster`) wandert der Fokus jetzt - und ohne sichtbaren Rand waehlt man blind. Die Farben sind seine vom 17.09., 23:35: `--griff` hell orange als Schnittstelle, `--griffrand` gruen als Kontur; derselbe Ton wie Aktionsknopf und Stick, damit ueberall dasselbe Zeichen fuer *„hier kannst du“* steht. `:focus-visible` statt `:focus`: wer mit der Maus klickt, bekommt keinen Rand, wer mit Tasten waehlt, sehr wohl. */ .choices button:focus-visible{ outline:3px solid var(--griffrand);outline-offset:2px; border-color:var(--griffrand);background:var(--griff);color:var(--playdark); } .choices button.mit-note{ flex:1 1 100%;display:flex;flex-direction:column;align-items:flex-start;gap:.2rem; text-align:left;padding:.6rem .9rem; } .choices .wahl-titel{font-weight:700;font-size:.92rem} .choices .wahl-note{font-weight:400;font-size:.8rem;line-height:1.35;color:#5d6a63} .card-item{border:1px solid var(--playline);border-radius:10px;padding:.6rem .8rem;margin-top:.6rem;background:#fff} .card-item h3{font-size:.9rem;color:var(--playdark);margin-bottom:.25rem} .card-item p{font-size:.85rem} .empty{font-size:.88rem;opacity:.7;margin-top:.6rem} /* Im Hochformat wird die Buehne sonst hoeher als breit - fuer einen Seitenscroller die falsche Form, und die Bedienknoepfe rutschen zu weit weg. */ @media (max-width:819px){ /* Die Buehne nimmt, was uebrig ist, statt auf einer festen Hoehe zu sitzen - sonst bleibt auf einem Telefon ein grosses dunkles Feld darunter. */ .stage{flex:1 1 auto;min-height:200px;max-height:min(60vh, 118vw)} main{justify-content:flex-start} } @media (min-width:820px){ .pad{display:none} .brand{font-size:1rem} } @media (prefers-reduced-motion:reduce){*{transition:none!important}} /* Rucksack: Dinge mit Anzahl, antippbar zum Ansehen */ .pack-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.5rem;margin-top:.6rem} .pack-item{ display:flex;flex-direction:column;align-items:center;gap:.3rem; border:1px solid var(--playline);border-radius:10px;background:#fff; padding:.4rem;cursor:pointer;font:inherit;color:var(--ink); } .pack-item:hover{border-color:var(--orange);background:#FFF6EC} .pack-art{display:block;width:100%} .pack-art svg{width:100%;height:auto;border-radius:6px} .pack-name{font-size:.8rem;font-weight:700;color:var(--playdark);text-align:center} /* Erklaerung zu den Anzeigen. Erscheint beim Ueberfahren oder Antippen - sonst raet man, was ein Symbol bedeutet. */ .vital{position:relative;cursor:help} .vital-tip{ position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%); min-width:170px;max-width:240px;padding:.5rem .6rem; background:rgba(18,38,42,.96);color:#eef4f2;border-radius:8px; font-size:.72rem;line-height:1.35;text-align:left; box-shadow:0 6px 18px rgba(0,0,0,.3);z-index:40;pointer-events:none; } .vital-tip b{display:block;font-size:.78rem;margin-bottom:.15rem;color:#f2c14e} .vital-tip::before{ content:"";position:absolute;left:50%;top:-5px;transform:translateX(-50%); border:5px solid transparent;border-top:0;border-bottom-color:rgba(18,38,42,.96); } @media (max-width:620px){ .vital-tip{left:auto;right:0;transform:none;min-width:150px} .vital-tip::before{left:auto;right:10px;transform:none} } /* Einfuehrung. Sie ist das Erste, was ein fremdes Kind sieht - deshalb kurz, mit Zeichen statt Saetzen. Ueber den Fragezeichenknopf jederzeit wieder da. */ .intro{ position:fixed;inset:0;z-index:80;display:flex;align-items:center; justify-content:center;padding:1rem; background:rgba(16,69,76,.94); } .intro[hidden]{display:none} .intro-box{ width:min(420px, calc(100vw - 1.5rem));max-height:92vh;overflow:auto; background:#f7f3e8;color:#22312F;border-radius:14px; padding:1.3rem 1.3rem 1.1rem;box-shadow:0 18px 50px rgba(0,0,0,.35); text-align:center; } /* Hier standen bis 11.09.2026 `.intro-box h1` und `.intro-lead` - Ueberschrift und Einleitung sind raus (sein Wort, Auftrag TT 19:20); der Knopf steht an ihrer Stelle oben, zweizeilig: die erste Zeile gross, die zweite klein darunter. (BT) */ .intro-box .intro-go{margin:0 0 1rem;display:flex;flex-direction:column;align-items:center;gap:.15rem;line-height:1.25} .intro-go .go-1{font-size:1.1rem;font-weight:700} .intro-go .go-2{font-size:.86rem;font-weight:600;opacity:.92} .intro-go .go-2[hidden]{display:none} .intro-keys{list-style:none;margin:0 0 .9rem;padding:0;text-align:left} .intro-keys li{ display:flex;align-items:center;gap:.7rem; padding:.42rem 0;font-size:.88rem;line-height:1.3; border-top:1px solid rgba(34,49,47,.1); } .intro-keys li:first-child{border-top:0} .intro-keys .k{ flex:0 0 auto;min-width:3.4rem;padding:.24rem .45rem; background:#10454C;color:#f7f3e8;border-radius:7px; font-size:.82rem;font-weight:700;text-align:center;white-space:nowrap; } .intro-note{margin:0 0 1rem;font-size:.78rem;color:#6b6459;line-height:1.35} /* DER KNOPF EINEN TON DUNKLER (BT, 12.09.2026, 01:0x). Weiss auf #c0651f waren 4,10 : 1, und 16 px fett zaehlt noch nicht als grosse Schrift (das beginnt bei 18,66 px fett) - es gilt also 4,5. Sein Wort auf meinen Vorschlag: "okay". #a8541a gibt 5,32; der Ueberfahr-Ton geht von #a9551a auf #8f4514 (6,93), sonst waere er vom Grundton nicht mehr zu unterscheiden. Gefunden von `werkzeug/kontrast_pruefen.py`. */ .intro-box button{ width:100%;padding:.7rem 1rem;border:0;border-radius:9px; background:#a8541a;color:#fff;font-size:1rem;font-weight:700;cursor:pointer; } .intro-box button:hover{background:#8f4514} /* Der zweite Knopf: waehlen und benutzen. "Schauen" bleibt das Ansehen. */ /* DER AKTIONSKNOPF STEHT GANZ LINKS IN DER WERKZEUGZEILE (11.09.2026, 11:25). Der Projektinhaber: "koennen wir den aktionsbutton nach ganz links verschieben und die vier buttons dort nach rechts einruecken?" Anlass war sein Befund "es gibt einen sprung des bildes wenn man in den oberen bereich des raumes laeuft": Ueber dem Laufkreuz hatte der Knopf eine eigene Zeile; erschien er, wuchs die Steuerleiste um 52 Punkte, und die Buehne schrumpfte von 411,6 auf 387,1 (gemessen in v10-1134). Jetzt hat er einen festen Platz: so hoch wie die Werkzeuge, feste Breite fuer den laengsten Text (er darf zweizeilig werden), und ohne Aufgabe bleibt der Platz stehen (`ruht`; bis v10-1138 unsichtbar, seitdem ruhig im Grundton, siehe unten) - nichts rutscht, weder das Bild noch die vier Knoepfe. */ /* `#btnPick` STATT `.tools .pick` (BT, 11.09.2026): Am Telefon steht der Knopf seit heute in der Leiste (#pad), am Rechner in der Werkzeugzeile - er muss an beiden Orten gleich aussehen. Dort griffen sonst die allgemeinen Leistenregeln `.pad button` (Mindesthoehe 52, Blaesse .42 bei `disabled`) und haetten den ruhenden Knopf hoeher und blass gemacht. Deshalb hier `min-height: 0`, `min-width: 0` und `opacity: 1`. */ /* DIE BREITE STEHT AN EINER STELLE (WM, 18.09.2026, 23:1x): `--pick-breite` traegt sie, `width` liest sie, und die Einrueckung in der Leiste rechnet mit ihr (`.pad > #btnPick`, ein Drittel). Vorher stand die Zahl zweimal da - einmal hier, einmal im Telefonfall unten; eine Einrueckung als feste rem waere die dritte Stelle gewesen und am Telefon die halbe Knopfbreite. */ #btnPick{ --pick-breite:9.5rem; min-width:0;min-height:0;opacity:1; flex:0 0 auto;width:var(--pick-breite);height:48px;overflow:hidden;border-radius:12px; border:2px solid var(--griffrand);background:var(--griff);color:#20160a; box-shadow:0 0 0 2px var(--paper); font-size:.86rem;font-weight:700;line-height:1.15;padding:.3rem .5rem; cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none; transition:background .18s, box-shadow .18s} /* OHNE AUFGABE STEHT ER RUHIG DA (11.09.2026, 12:03). Der Projektinhaber: "er sollt ohne orange immer sichtbar sein" - bis v10-1138 war er ohne Aufgabe unsichtbar und erschien erst orange. Jetzt zeigt er sich immer in seinem Grundton; orange wird er nur, wenn etwas geht (`bereit`, unten). Leer und nicht drueckbar (`disabled` aus game.js): ein Wort auf einem Knopf, der nichts ausloest, waere eine Luege, und ein Druck gab nur den Klickton. Kein Hover, kein Orange beim Druecken - nichts, was "geht" verspricht. */ #btnPick.ruht,#btnPick.ruht:hover,#btnPick.ruht:active{ background:var(--griff);border-color:var(--griffrand);color:#20160a;cursor:default} #btnPick:active,#btnPick.gedrueckt{background:var(--marke);border-color:var(--griffrand);color:#20160a} /* Hoehe FEST 48, nicht mindestens (11:27): am Telefon lief der laengste kroatische Text ("Kod radionickog stola") dreizeilig, der Knopf wurde 49,7 hoch. */ @media (max-width:560px){ #btnPick{--pick-breite:6.5rem;font-size:.68rem;line-height:1.1;padding:.2rem .3rem} } /* Hier stand mittags am 11.09.2026 die Engstelle "am Telefon Aktion 88 statt 104, QR 64 statt 74" - mit den Balken und dem QR in der Leiste blieben bei 360 px nur 29 statt 53 px. Seit der QR in der Kopfzeile steht, ist sie aufgehoben (Auftrag TT 13:25: "Das nimmt die Enge von 355 px"); die Aktion ist wieder 104 breit (Regel oben). (BT) */ /* DIE ZAEHLER IN DER BILDMITTE, SYMBOL UND ZAHL ORANGE (BT, 11.09.2026, 23:2x; Auftrag WM 23:21 auf sein Wort: "inselpunkte und wissenskarten-anzeige soll immer in der bild mitte stehen. das symbol und die zahl soll immer orange sein. dann ist es zentraler und wird als wichtiger gewertet"). Bis hierher standen sie am Rechner rechts in der Knopfzeile (`margin-left:auto`, `justify-content:flex-end`), nur am Telefon in eigener Zeile mittig. Jetzt bei jeder Breite in eigener Zeile unter den Knoepfen, mittig: In derselben Zeile ueberdeckten sie die Knoepfe (gemessen 23:2x, rechte Kante der Lupe gegen die Zaehler mit beiden Pillen: bei 800 px Knoepfe bis x 332, Zaehler x 280 bis 520; bei 1226 px Knoepfe bis 492, Zaehler ab 493, 1 px Luft). Die Werkzeugzeile bricht ohnehin um (`.tools{flex-wrap:wrap}`). Der Name (`u`) bleibt, wie er ist. Kontrast Orange auf dem Pillengrund 3,08 : 1 (Weiss 7,55) - er hat B gewaehlt (23:4x): `--orange` ist seitdem #FFBE70, 4,62 : 1 (Kommentar am :root). Gemessen danach (23:3x, Tab mit game.css am Speicher vorbei neu geholt, Wissenskarten als Probepille): Mitte der Zaehler = Bildmitte bei 1226 (613), 800 (400) und 360 px (180). Bei 1226 x 800 wird die Buehne von 635 auf 605,2 niedriger, die Werkzeugzeile von 48 auf 77,9 hoeher; bei 800 x 800 bleibt die Buehne 480 (dort begrenzt die Breite), die Seite waechst in den freien Raum; bei 360 x 640 alles wie vorher (Buehne 355,1, Werkzeugzeile 74). Nirgends rollt die Seite (scrollHeight = Fensterhoehe). */ /* DIE PUNKTEZEILE GILT, WO SIE STEHT (17.09.2026, WM, v10-1388): am Handy steht sie seit der Anordnung „B“ ueber dem Bild (`pickPlatz` haengt sie in `main`), am Rechner weiter in der Werkzeugzeile. Dieselben Regeln mit derselben Gewichtung (`:is(.tools,main)` zaehlt wie `.tools`). VORHER: `.tools .zaehler …` an allen Stellen unten. */ :is(.tools,main) .zaehler{display:flex;gap:.3rem;align-items:center; flex-wrap:wrap;justify-content:center} .tools .zaehler{flex:1 1 100%} main > .zaehler{flex:0 0 auto} :is(.tools,main) .zaehler .vital{background:rgba(255,255,255,.12)} :is(.tools,main) .zaehler .vital b,:is(.tools,main) .zaehler .vital em{color:var(--orange)} /* GROESSER (BT, 11.09.2026, 23:5x; sein Wort: "die anzeigen inselpunkte und wissenskarten kannst du auch etwas größer machen, dann wird die schrift auch klarer und die wichtigkeit noch hervorgehoben, nach unten hin ist noch platz dafür."). Etwa ein Viertel groesser, bei jeder Breite: Schrift 10,1 (Telefon) bzw. 10,9 px (Rechner) -> 13,4, Zeichen 11,5/12 -> 15,2, Name 9,9 -> 12,2. Gemessen vorher frei unter dem Steuerkreuz: 92 px bei 375 x 812, 53 bei 800 x 800; bei 360 x 640 und 1226 x 800 nimmt die Buehne den Rest und gibt die Hoehe ab. Die schmalen Regeln (`.vital` .63rem, `.vital b` .72rem) wiegen weniger. */ :is(.tools,main) .zaehler .vital{font-size:.84rem;padding:.2rem .7rem;gap:.4rem} :is(.tools,main) .zaehler .vital b{font-size:.95rem} :is(.tools,main) .zaehler .vital u{font-size:.76rem} /* AM TELEFON DIE ZAEHLER AUSGESCHRIEBEN IN EINER EIGENEN ZEILE, MITTIG; FERNGLAS UND LUPE GANZ RECHTS (BT, 11.09.2026, Zusatz TT 14:01). Der Projektinhaber am Telefonbild (ueber WM 13:58): "wir sollten in der mobilansicht, inselpunkte und wissenskarten ausschreiben und so anordnen etwa. durch den „zeilenumbruch“ koennen wir es auch ausmitteln und dort verorten, wo ich anskizziert habe. dann koennen fernglas und lupe an die rechte seite und loesen sich von den groesseren buttons". `margin-left:auto` am Fernglas schiebt es mit der Lupe nach rechts. Die Namen (`u`) blendet die Telefonregel unten fuer jede `.vital` aus - hier nicht. Hier stand bis 11.09.2026, 23:3x auch `.tools .zaehler{flex:1 1 100%;margin-left:0; justify-content:center}`; seit die Regel oben fuer jede Breite gilt, war sie doppelt (BT). */ @media (max-width:560px){ .tools #btnFernglas{margin-left:auto} :is(.tools,main) .zaehler .vital u{display:inline} } /* ESSEN ALS PLAKETTE (BT, 11.09.2026): die Zahl oben rechts am Essen-Knopf (game.js setzt `data-zahl`, ohne Vorrat keine). */ #btnEat{position:relative} #btnEat[data-zahl]::after{content:attr(data-zahl);position:absolute;top:-7px;right:-7px; min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--orange); color:#20160a;font-size:.66rem;font-weight:800;line-height:18px;text-align:center; box-shadow:0 0 0 2px var(--playdark)} /* Hover geht Richtung aktiv - vorher #17565d, DUNKLER als der Grundton (17.09.2026, 23:35 Uhr). */ #btnPick:hover{background:#F5B368} /* DER KNOPF ZEIGT, DASS ETWAS GEHT. Bis V2.17 sah er immer gleich aus - auch dann, wenn nichts in Reichweite war. Damit fuehrte er das Auge nirgendwohin. `bereit` bekommt er vom Programm, wenn ein Hinweis steht. Er wechselt dann auf dieselbe Farbe wie der Hinweis oben. EINMAL AUFLEUCHTEN, NICHT DAUERND: Die Animation laeuft genau einmal, wenn die Klasse dazukommt. Was staendig blinkt, wird genauso uebersehen wie was nie auffaellt. */ /* Der helle Ring BLEIBT auch im Aktivzustand - der Leuchtring legt sich darum, statt ihn zu ersetzen. Und deshalb eine EIGENE Aufblende: `pickAn` setzt den ganzen `box-shadow` und wird auch vom Sprungknopf (#btnUp.bereit) benutzt - ohne `griffAn` verschwände der helle Ring 0,42 s lang. */ #btnPick.bereit{ background:var(--marke);color:#20160a; box-shadow:0 0 0 2px var(--paper), 0 0 0 5px rgba(255,190,112,.45); animation:griffAn .42s ease-out 1; } @keyframes griffAn{ 0%{box-shadow:0 0 0 2px var(--paper), 0 0 0 2px rgba(255,190,112,.85)} 100%{box-shadow:0 0 0 2px var(--paper), 0 0 0 5px rgba(255,190,112,.45)} } #btnPick.bereit:hover{background:#F59A3E} @keyframes pickAn{ 0%{box-shadow:0 0 0 0 rgba(255,190,112,.8)} 100%{box-shadow:0 0 0 3px rgba(255,190,112,.35)} } /* DER SPRUNGKNOPF WIRD ERST SPAETER WICHTIG. Er steht von Anfang an da, aber unauffaellig - solange niemand gesprungen ist, hat er nichts zu sagen. Orange wird er in dem Moment, in dem er gefehlt hat: beim ersten Sturz. Entschieden vom Projektinhaber am 01.09.2026. Das ist dasselbe Muster wie bei den Tierrollen: Die Erklaerung kommt, NACHDEM man sie gebraucht hat, nicht vorher als Anleitung. Ein Vorspann, der vier Tasten erklaert, bevor etwas passiert ist, wird nicht gelesen - ein Satz nach dem ersten Hinfallen schon. `bereit` bleibt danach dauerhaft: Der Knopf ist ab jetzt einer, den man kennt. Das Aufleuchten laeuft einmal. */ #btnUp.bereit{ background:var(--orange);color:#20160a;border-color:var(--orange); box-shadow:0 0 0 3px rgba(255,190,112,.35); animation:pickAn .42s ease-out 1; } @media (prefers-reduced-motion:reduce){ /* Wer Bewegung abgestellt hat, bekommt die Farbe trotzdem - sie ist die Botschaft, das Aufleuchten nur die Beigabe. */ #btnPick.bereit{animation:none} } /* Hier stand bis 11.09.2026 `.soundbox`, das Tonfeld unter dem Notenknopf. Es steht jetzt im Zahnrad-Menue (`.einst-menue`, oben bei der Kopfzeile) - Farben, Regler und Knopf von dort uebernommen. (BT) */ /* Auftragsziele stehen zeilenweise - die Umbrueche muessen bleiben. */ .card-item p{white-space:pre-line} /* NOTIZBUCH UND TAGEBUCH - ZWEI REITER, EIN FENSTER. Entschieden vom Projektinhaber am 01.09.2026. Das Notizbuch blickt nach vorn: Was ist noch offen? Das Tagebuch nach hinten: Was habe ich erlebt? Zwei Reiter statt zweier Knoepfe oben in der Leiste: Ein Kind hat dann ein Bedienelement fuer beides, und der Zusammenhang bleibt sichtbar. Wer das Notizbuch sucht, findet nebenbei das Tagebuch. */ .journal-reiter{display:flex;gap:.4rem;margin:.2rem 0 .8rem} .journal-reiter button{flex:1;font:inherit;font-size:.88rem;font-weight:600; padding:.5rem .7rem;border-radius:9px;cursor:pointer; border:1px solid var(--playline);background:var(--paper);color:var(--playdark)} .journal-reiter button[aria-selected=true]{background:var(--play);color:#fff; border-color:var(--play)} .journal-reiter button:focus-visible{outline:2px solid var(--play);outline-offset:2px} /* Die Merkliste. Ein Haken ist kein Bild, sondern ein Zeichen - er muss auch dann etwas sagen, wenn jemand Farben nicht unterscheidet. Deshalb steht neben dem Haken immer das Wort durchgestrichen. */ .merk{list-style:none;display:grid;gap:.45rem} .merk li{display:flex;align-items:baseline;gap:.6rem;padding:.5rem .7rem; border:1px solid var(--playline);border-radius:8px;background:var(--paper); font-size:.92rem} .merk li.hat{opacity:.62} .merk li.hat .was{text-decoration:line-through} .merk .haken{flex:0 0 1.3rem;font-weight:700;color:var(--playline)} .merk li.hat .haken{color:#2E7B62} .merk .was{flex:1} .merk-hinweis{font-size:.84rem;color:#5A696E;margin-top:.7rem} /* Absaetze im Dialogtext. Die Texte stehen mit in den Sprachdateien - 21 allein auf Deutsch - und wurden bis hierher zu einem Block zusammengezogen, weil textContent den Umbruch setzt, das Standard-white-space ihn aber wieder einsammelt. Ein Wechsel zwischen zwei Sprechenden war dadurch nicht zu sehen. pre-line zeigt nur die gesetzten Umbrueche; der normale Zeilenumbruch im Fliesstext bleibt, wie er war. */ #dialogText{white-space:pre-line} /* Schmale Geraete. Neun Knoepfe passen auf einem Telefon nicht in eine Zeile - also zwei kompakte Zeilen statt eines Ueberstands nach rechts. */ @media (max-width:560px){ /* Zweizeilig 65 hoch; rechts Platz fuer den Diskettenknopf (38). Bis 15:30 stand hier der QR mit 56 (`--qr-ziel`) - raus mit ihm. (BT, 11.09.2026) */ .bar{padding:.45rem calc(38px + 1.2rem) .45rem .6rem;gap:.35rem} .stand-knopf{right:.6rem} .brand{font-size:.82rem;flex:1 1 100%} .brand em{display:none} .bar-right{flex:1 1 100%;justify-content:flex-start;gap:.25rem} .chip{padding:.26rem .55rem;font-size:.7rem} /* Die Bedienknoepfe teilen sich die Breite, statt sie zu erzwingen. */ .pad{flex-wrap:wrap;gap:.4rem} .pad-move{flex:0 0 auto} .pad-act{flex:1 1 auto;justify-content:flex-end;flex-wrap:wrap} .pad button{min-width:0;padding:.42rem .6rem} .pad button.small{min-width:0;padding:.4rem .45rem} main{padding:.45rem;gap:.4rem} /* Der Rest an Hoehe gehoert nach unten, nicht als Loch unter die Knoepfe. */ .legal{margin-top:auto;padding-top:.4rem} dialog{padding:.9rem .95rem} .choices button{flex:1 1 100%} } /* Auf schmalen Geraeten brach die Zustandsanzeige in zwei Zeilen um und legte sich ueber den Hinweis. Dort zaehlen Zeichen und Zahl - die Balken sind Zugabe und koennen weg, ohne dass Bedeutung verlorengeht. */ @media (max-width:560px){ .vitals{gap:.22rem;justify-content:flex-start} .vital{padding:.12rem .32rem;font-size:.63rem;gap:.18rem} .vital i{width:17px;height:5px} .vital u{display:none} .vital-lead u{display:inline;font-size:.58rem} .vital-lead i{width:30px;height:6px} .vital em{min-width:.95rem} .vital b{font-size:.72rem} /* Auf schmalen Geraeten darf der Hinweis umbrechen statt hinauszuragen. `bottom: auto` war noetig, solange er absolut sass (es stand noch ein `bottom` aus der Zeit, als er unten hing; zusammen mit dem `top` wurde das Feld zwischen beiden aufgespannt - 372 von 443 Pixeln). Seit dem 19.09.2026 steht er in der Flexzeile `.overlay-top` - kein `bottom`, kein `top`, und `text-align:center` waere falsch, weil er jetzt links im Eck sitzt. Geblieben ist die Breite: am Telefon darf er die Zeile fuellen. */ .hint{ max-width:calc(100% - 1.2rem); font-size:.8rem;padding:.24rem .7rem; } } /* Sehr schmal: die Balken entfallen ganz, Zeichen und Zahl bleiben. */ @media (max-width:400px){ .vital i{display:none} .vital u{display:none} .vital-lead i{display:block;width:34px;height:7px} } /* Gesicht im Gespraechsfenster. Klein genug, dass der Text die Hauptsache bleibt - Kinder lesen ohnehin nur den ersten Satz. */ .dlg-art{float:left;margin:0 .8rem .4rem 0;line-height:0} .dlg-art[hidden]{display:none} .dlg-art svg{width:64px;height:64px;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.18)} @media (max-width:560px){ .dlg-art svg{width:52px;height:52px} } /* EINE STORYLINEKARTE IST KEIN RUNDBILD. `.dlg-art` ist fuer das kleine Sinnbild eines Fundstuecks gebaut: 64 Punkte, rund, links neben dem Text. Die Karten des Teilprojekts sind im Verhaeltnis 3:2 gezeichnete Szenen - als 64-Punkt-Kreis sind sie nicht das, wofuer sie gezeichnet wurden. Deshalb eine zweite Auspraegung statt einer geaenderten ersten: Wer ein Fundstueck zeigt, bekommt weiter den Kreis. */ .dlg-art.karte{float:none;margin:0 0 .8rem 0} .dlg-art.karte svg{ width:100%;height:auto;aspect-ratio:3/2;border-radius:10px; box-shadow:0 2px 10px rgba(0,0,0,.20); } @media (max-width:560px){ .dlg-art.karte svg{width:100%;height:auto} } /* ---------- Ausruestung ---------- Frueher standen Person, Rucksack und Tagebuch als drei Woerter oben in der Kopfzeile, zwischen Sprachwahl und Ton. Dort sucht sie niemand: Oben steht, was das Programm betrifft, unten das, was die Figur betrifft. Jetzt ist es ein Knopf im Laufkreuz, und er zeigt, was dahinter liegt - eine Figur mit Rucksack. */ .kitbtn{ min-width:58px;min-height:52px;border-radius:12px; border:1px solid var(--playline);background:var(--paper);color:var(--playdark); display:inline-flex;align-items:center;justify-content:center; cursor:pointer;touch-action:manipulation;padding:.3rem; } .kitbtn svg{width:30px;height:30px;display:block} .kitbtn:active{background:var(--playlight)} .kit{position:fixed;inset:0;z-index:40;display:flex;align-items:center; justify-content:center;background:rgba(12,32,36,.62);padding:1rem} .kit[hidden]{display:none} .kit-box{ background:var(--paper);border-radius:16px;max-width:760px;width:100%; max-height:92vh;overflow:auto;padding:1rem 1.1rem 1.1rem; box-shadow:0 10px 40px rgba(0,0,0,.35); } .kit-head{display:flex;align-items:center;justify-content:space-between;gap:1rem} .kit-head h2{margin:0;font-size:1.05rem;color:var(--playdark)} #kitClose{ border:none;background:transparent;font-size:1.5rem;line-height:1; color:var(--playdark);cursor:pointer;padding:.1rem .4rem; } .kit-main{display:flex;gap:1rem;margin-top:.8rem;align-items:flex-start} .kit-figur{flex:0 0 auto;text-align:center} #kitCanvas{background:linear-gradient(#dbe8ea,#eef1e6);border-radius:12px; width:170px;height:255px} .kit-slots{list-style:none;margin:.5rem 0 0;padding:0;display:flex; flex-direction:column;gap:.28rem} .kit-slots li{display:flex} .kit-slots button{ width:100%;border:1px solid var(--playline);background:#fff;border-radius:8px; padding:.28rem .5rem;font-size:.72rem;text-align:left;cursor:pointer; color:var(--playdark);display:flex;justify-content:space-between;gap:.4rem; } .kit-slots button[disabled]{opacity:.45;cursor:default} .kit-slots button b{font-weight:700} .kit-slots button i{font-style:normal;opacity:.7} .kit-pack{flex:1 1 auto;min-width:0} .kit-sub{margin:0 0 .4rem;font-size:.8rem;font-weight:700;color:var(--playdark)} .kit-sub em{font-style:normal;font-weight:400;opacity:.7} .kit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:.4rem} .kit-feld{ aspect-ratio:1;border:1px dashed var(--playline);border-radius:10px; background:rgba(255,255,255,.6);display:flex;flex-direction:column; align-items:center;justify-content:center;gap:.15rem;padding:.2rem; font-size:.62rem;text-align:center;color:var(--playdark);cursor:default; } .kit-feld.voll{border-style:solid;background:#fff;cursor:pointer} .kit-feld.voll:hover{border-color:var(--orange)} .kit-feld svg{width:34px;height:26px} /* Bis der Rucksack gefunden ist, sind seine Plaetze zwar da, aber nicht nutzbar - man soll sehen, was einem fehlt. */ .kit-feld.gesperrt{opacity:.28;background:transparent} .kit-note{margin:.5rem 0 0;font-size:.72rem;opacity:.75;color:var(--playdark)} .kit-book{ margin-top:.9rem;width:100%;border:1px solid var(--playline);border-radius:12px; background:#fff;color:var(--playdark);padding:.5rem .8rem;cursor:pointer; display:flex;align-items:center;gap:.6rem;font-weight:700;font-size:.82rem; } .kit-book svg{width:34px;height:26px;transition:transform .18s} .kit-book:hover svg{transform:scale(1.14)} @media (max-width:640px){ .kit-main{flex-direction:column;align-items:stretch} .kit-figur{display:flex;gap:.7rem;align-items:flex-start;text-align:left} #kitCanvas{width:120px;height:180px;flex:0 0 auto} .kit-slots{flex:1 1 auto;margin-top:0} } /* Dabei, aber ohne Platz zu kosten - Telefon, Muellbeutel. */ .kit-feld.kit-frei{border-style:dashed;background:rgba(255,255,255,.35);opacity:.9} /* Der Muellsack haengt aussen - deshalb steht er neben dem Gepaeck und nicht darin. Der Stand steht darauf. */ .kit-sack{ margin-top:.6rem;display:flex;align-items:center;gap:.5rem; border:1px solid var(--playline);border-radius:10px;padding:.4rem .6rem; background:#fff;color:var(--playdark);font-size:.76rem; } .kit-sack[hidden]{display:none} .kit-sack svg{width:26px;height:28px;flex:0 0 auto;color:#5f7a52} .kit-sack span{display:flex;flex-direction:column;line-height:1.25} .kit-sack b{font-weight:700} .kit-sack em{font-style:normal;opacity:.8} .kit-sack.voll{border-color:var(--orange);background:#FFF6EC} .kit-sack.voll em{color:#b4553f;font-weight:700} /* ---------- Werkzeugleiste unter der Buehne ---------- Sie ist IMMER da. Das Laufkreiz darunter blendet sich ab 820 Pixel aus, weil man dort mit der Tastatur laeuft - alles, was man ueberall braucht, muss deshalb hier stehen und nicht dort. Genau daran ist der Ausruestungsknopf in V0.60 am Rechner unsichtbar geworden. */ .tools{ display:flex;align-items:center;gap:.5rem;flex-wrap:wrap; margin-top:.5rem; } .toolbtn{ min-width:54px;min-height:48px;border-radius:12px; border:1px solid var(--playline);background:var(--paper);color:var(--playdark); display:inline-flex;align-items:center;justify-content:center; cursor:pointer;touch-action:manipulation;padding:.3rem; } .toolbtn svg{width:28px;height:28px;display:block} .toolbtn:active{background:var(--playlight)} .toolbtn[hidden]{display:none} /* Das Telefon steht links, gleich hinter dem Aktionsknopf - es ist der Weg nach Hause und gehoert an den Anfang. Ganz links steht seit 11.09.2026 der Aktionsknopf (sein Wunsch, siehe `#btnPick`). */ #btnPhone{color:#2c5f68} .tools .small{ min-width:48px;min-height:48px;border-radius:12px; border:1px solid var(--playline);background:var(--paper);color:var(--playdark); font-size:.72rem;font-weight:700;cursor:pointer;padding:.4rem .5rem; } .tools .small:disabled{opacity:.42;cursor:default} /* FERNGLAS UND LUPE, KLEINER ALS DIE WERKZEUGE (BT, 11.09.2026). Der Projektinhaber am Bild: "hier würde ich links fernglas und rechts lupe positionieren als kleinere button" - zwischen Bonus und den Punkten. 32 x 32 statt 48. Die Lupe wird orange, solange sie offen ist; das Fernglas ist bis zu seiner Funktion gesperrt und blass. */ .tools .klein{ flex:0 0 auto;width:32px;height:32px;min-width:32px;min-height:32px;padding:0; border-radius:9px;border:1px solid var(--playline);background:var(--paper); color:var(--playdark);display:inline-flex;align-items:center;justify-content:center; cursor:pointer;touch-action:manipulation} .tools .klein svg{width:20px;height:20px;display:block} .tools .klein:disabled{opacity:.42;cursor:default} .tools #btnLupe.an{background:var(--orange);border-color:var(--orange);color:#20160a} /* DER KOMPASS (BT, 13.09.2026, sein Wort 14:59 ueber TT): Knopf rechts neben der Lupe, an wie die Lupe; die Anzeige unten links in der Buehne, halbtransparent. Sie nimmt keine Beruehrung an - sie liegt nie ueber etwas, das man antippen muss. Die Buchstaben sind Text je Sprache (kompass.js), keine eingezeichnete Grafik. */ .tools #btnKompass.an{background:var(--orange);border-color:var(--orange);color:#20160a} .kompass-anzeige{position:absolute;left:8px;bottom:8px;z-index:2;pointer-events:none;opacity:.78; display:flex;flex-direction:column;align-items:flex-start;gap:3px} .kompass-anzeige[hidden]{display:none} .kompass-anzeige svg{width:64px;height:64px;display:block} .kompass-anzeige .k-rand{fill:rgba(16,69,76,.55);stroke:#F6F1E6;stroke-width:2} .kompass-anzeige .k-nadel{fill:rgba(246,241,230,.5)} .kompass-anzeige .k-spitze{fill:var(--orange)} .kompass-anzeige text{fill:#F6F1E6;font:700 11px system-ui,sans-serif;text-anchor:middle;dominant-baseline:central} .kompass-anzeige.unbestimmt{opacity:.55} .kompass-anzeige.unbestimmt .k-spitze{fill:rgba(246,241,230,.5)} .kompass-anzeige .k-satz{font:600 10px/1.25 system-ui,sans-serif;color:#F6F1E6;white-space:nowrap; background:rgba(16,69,76,.6);border-radius:6px;padding:1px 6px} .kompass-anzeige .k-satz:empty{display:none} /* NUR KURZ (sein Wort ueber TT 16:03): nach drei Sekunden sanft aus. Die Dauer setzt kompass.js an der Anzeige (AUSBLENDEN_MS) - hier steht keine zweite Zahl. Nach `.unbestimmt`, damit das Ausblenden auch dort gilt. */ .kompass-anzeige.geht{opacity:0} /* UNTER 400 PX ENGER, damit die Zeile nicht umbricht (BT, 11.09.2026): gerechnet bei 360 px 366 von 346 px mit den alten Abstaenden - Abstand 6 statt 8, Ausruestung 48 statt 54, schmalere Innenraender. */ @media (max-width:400px){ .tools{gap:.375rem} .tools .toolbtn{min-width:48px} .tools .small{padding:.4rem .35rem} } /* Kapitelwahl fuer Testspiele. Nur mit ?debug=1 im Bild - im normalen Betrieb legt kapitel.js nichts an. Bewusst schlicht: Werkzeug, nicht Spiel. Auf dem Telefon fuellt sie den Bildschirm, weil eine Liste mit zwanzig Eintraegen sonst nicht zu treffen ist. */ #kapitelPanel{ position:fixed; inset:0; z-index:60; display:flex; flex-direction:column; background:#10454c; color:#f2ede0; font-size:.9rem; } #kapitelPanel[hidden]{display:none} .kapitel-kopf{ display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; padding:.8rem 1rem; border-bottom:1px solid rgba(242,237,224,.25); } .kapitel-kopf strong{font-size:1rem} .kapitel-kopf span{flex:1; opacity:.7; font-size:.78rem} .kapitel-kopf button{ background:var(--orange); color:#10454c; border:0; border-radius:8px; padding:.45rem .9rem; font-weight:700; cursor:pointer; } .kapitel-liste{flex:1; overflow-y:auto; padding:.6rem 1rem 2rem} .kapitel-liste h3{ margin:1.1rem 0 .4rem; font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; opacity:.6; } .kapitel-eintrag{ display:block; width:100%; text-align:left; margin:.3rem 0; background:rgba(242,237,224,.08); color:inherit; border:1px solid rgba(242,237,224,.2); border-radius:10px; padding:.6rem .8rem; cursor:pointer; font:inherit; } .kapitel-eintrag:hover,.kapitel-eintrag:focus{background:rgba(242,237,224,.18)} .kapitel-eintrag b{display:block; font-weight:700} .kapitel-eintrag i{display:block; font-style:normal; opacity:.65; font-size:.78rem} /* DER SPIELSTAND ALS QR-CODE. Unten links, klein und blass - er soll da sein, nicht auffallen. Beim Aktualisieren wird er kurz kraeftiger (`.frisch`), damit man merkt, dass sich etwas gemerkt hat. Im HOCHFORMAT ist er groesser: Dort ist er gemeint - ein Bildschirmfoto vom Telefon, quer haelt ihn niemand hin. */ #qrStand { /* IN DER STEUERZEILE, nicht mehr in der Buehne (04.09.2026). Er stand absolut im Spielbereich, unten links. Zwei Anlaeufe mit `bottom` haben ihn erst ueber die Vitalleiste und dann ueber den Raum gelegt - beides am Bild gesehen, nicht gerechnet. Der Projektinhaber: *„Den QR-Code muessen wir unterhalb des Spielbereichs auf Cursorhoehe setzen."* Damit ist er ein Kind von `.pad` und richtet sich mit dem Laufkreuz aus. **Kein `position`, kein `bottom`, keine Zahl, die zu einem anderen Element passen muss** - das ist der ganze Gewinn. `flex: 0 0 auto` haelt ihn quadratisch, wenn die Zeile eng wird. */ /* GANZ LINKS, mit etwas Luft zum Rand (04.09.2026). Der Projektinhaber: *„Der QR soll ganz nach links mit leichtem Abstand zum Seitenrand."* In der Mitte stand er, weil `.pad` mit `space-between` arbeitet und er das zweite von drei Kindern war. `order: -1` setzte ihn vor die Aktionstasten, `margin-right: auto` schob alles andere nach rechts. **Keine feste Position, keine Zahl, die zum Nachbarn passen muss** - dieselbe Ueberlegung, die ihn ueberhaupt erst aus der Buehne geholt hat. */ /* SEIT DEM 10.09.2026 STEHT ER IN SPALTE 1 DES GRIDS (`.pad > #qrStand`, oben bei `.pad`). `order: -1` und `margin-right: auto` taten dort nichts mehr und sind entfernt - ein Wert, der nichts tut, ist schlimmer als keiner (siehe unten). Die Luft zum Rand bleibt. (BT, 10.09.2026, 22:32) */ /* SEIT DEM 11.09.2026 STEHT ER IN SPALTE 2 DES GRIDS - mittags kurz in der Mitte zwischen Aktion und Laufkreuz, seit die Anzeigen in die Leiste kamen direkt neben dem Aktionsknopf (sein blauer Pfeil, ueber TT 13:07). Die Luft zum Rand (`margin-left: 10px`) ist entfernt; den Abstand gibt das Grid. (BT) */ /* SEIT DEM 11.09.2026, 14 UHR OBEN RECHTS IN DER KOPFZEILE (BT, Auftrag TT 13:25, Variante C). Der Projektinhaber: "dann können wir den qr-code vielleicht oben darstellen im eck. ist der code so klein darstellbar, dass er dort nicht stört?" - "okay, versuchen wir es so". Die Leiste gehoert jetzt den Balken. ABSOLUT, ueber beiden Zeilen: `top`/`bottom` 0 mit `margin: auto` stellt ihn mittig in die Kopfzeile; so wird sie nicht hoeher (am Telefon 65). Breite und Hoehe setzt qr.js in CSS-Punkten, passend zu ganzen Geraetepunkten je Feld - per CSS von 111 auf 56 skaliert wuerden die Felder ungleich (TT 13:25). VARIANTE C: Felder im Dunkel der Kopfzeile auf Papierton, volle Deckkraft (vorher Schwarz auf Weiss mit 0,5 - auf dem dunklen Grund zu wenig Kontrast). Die Farben stehen HIER; qr.js liest `color` und `background-color` und zeichnet damit. Ruhezone (2 Felder) ist im Bild, deshalb kein `padding`. */ /* SEIT DEM 11.09.2026, 15:30 GROSS IM FENSTER „DEIN SPIELSTAND" (BT, Auftrag TT 15:30): der Diskettenknopf oeffnet es. Die Lage in der Kopfzeile (absolut, `--qr-ziel` 56/40) und am Rechner unten (80) ist raus; das Aufhellen (`.frisch`) auch - das Zeichen fuer „gespeichert" sitzt am Knopf. Groesse: `--qr-ziel` am Fenster (240), ganze Geraetepunkte je Feld (qr.js). */ display: block; border-radius: 4px; image-rendering: pixelated; color: var(--playdark); background-color: var(--paper); } /* DAS FENSTER „DEIN SPIELSTAND" (BT, 11.09.2026, Auftrag TT 15:30, Bild an_pi 15:26). Ein natives : Esc schliesst von selbst, ✕ und ein Tipp daneben ebenso (game.js). Breit: Code links, Anleitung rechts; am Telefon untereinander - ein Bildschirmfoto soll Code UND Anleitung zeigen, ohne zu scrollen (gemessen bei 360 x 640). Der Code 240 px Ziel, ganze Geraetepunkte je Feld. */ .stand-fenster{border:none;border-radius:14px;padding:0;background:var(--paper);color:var(--ink); width:min(560px, calc(100vw - 1.2rem));max-height:calc(100dvh - 1.2rem);overflow:auto; box-shadow:0 10px 30px rgba(0,0,0,.35)} .stand-fenster::backdrop{background:rgba(8,30,33,.55)} .stand-kopf{display:flex;align-items:center;justify-content:space-between;padding:.55rem .5rem .2rem .9rem} .stand-kopf h2{font-size:1.05rem;color:var(--playdark)} .stand-zu{width:44px;height:44px;border:none;background:none;font-size:1.2rem; color:var(--playdark);cursor:pointer} .stand-mitte{display:flex;gap:.9rem;padding:0 .9rem;align-items:flex-start;--qr-ziel:240px} .stand-code{flex:0 0 auto;min-height:1px} .stand-anleitung{flex:1 1 170px;font-size:.82rem;line-height:1.35} .stand-anleitung h3{font-size:.86rem;color:var(--playdark);margin:.1rem 0 .2rem} .stand-anleitung ol{padding-left:1.15rem;margin:0 0 .45rem} .stand-anleitung p,.stand-anleitung li{margin:0;font-size:.82rem;line-height:1.35} .stand-zeile{font-size:.72rem;opacity:.75;padding:.45rem .9rem .2rem} .stand-einlesen{border-top:1px solid #d8cfb8;margin:.25rem .9rem 0;padding:.5rem 0 .8rem} .stand-einlesen h3{font-size:.86rem;color:var(--playdark);margin-bottom:.4rem} .stand-knoepfe{display:flex;flex-wrap:wrap;gap:.4rem} .stand-knoepfe button{min-height:44px;border-radius:10px;padding:.4rem .8rem;font:inherit; font-size:.82rem;font-weight:600;cursor:pointer;border:1px solid var(--playdark); background:#fff;color:var(--playdark)} .stand-knoepfe button.haupt{background:var(--playdark);color:#fff} .stand-note{font-size:.76rem;margin-top:.45rem} .stand-grund{font-size:.68rem;opacity:.7;margin-top:.1rem} @media (max-width:560px){ .stand-mitte{flex-direction:column;align-items:center;gap:.5rem} .stand-anleitung{flex-basis:auto;width:100%} } /* DIE ZOOMKNOEPFE UNTEN RECHTS IN DER LEISTE (10.09.2026, 20:26). Der Projektinhaber: "die seitlichen zoom buttons sollen aus dem bild (rot) unter das fenster (gruen) verschoben werden (blau)" - aus der Mitte des rechten Bildrands (vorher top 50%, untereinander) in die dunkle Leiste rechts neben den Anzeigen, nebeneinander, mittig zur Anzeigenleiste (56 px hoch am Rechner). 36 px statt 44: sie muessen in die Leiste passen - am Telefon pruefen, ob sie sich gut treffen lassen. Die Anzeigen bekommen rechts Platz, solange die Knoepfe da sind, sonst liefen sie am Telefon (volle Breite) darunter. */ .mapctl{top:auto;bottom:calc(.5rem + 10px);transform:none;flex-direction:row;align-items:center} .mapctl button{min-width:36px;min-height:36px;width:36px;height:36px;padding:0;line-height:1} .mapctl button.weit{width:auto} /* (Der Lupenknopf stand hier im Bild von mittags bis nachmittags am 11.09.2026 - seitdem in der Werkzeugzeile, siehe `.tools .klein`. BT) */ /* (Die Regel, mit der die Anzeigen den Zoomknoepfen im Bild Platz machten, ist seit dem 11.09.2026 weg - die Anzeigen stehen nicht mehr im Bild. BT) */ @media (max-width:560px){ .mapctl{right:.35rem;bottom:calc(.35rem + 4px)} } /* DIE ANORDNUNG AM HANDY, HOCHKANT - „B“ (17.09.2026, 18:4x, WM, v10-1388). Seine Worte ueber TT (16:21 bis 16:45, im Wortlaut in VORHABEN): *„am handy ist dieser stick ganz unten nur mit zwei händen zu bedinen und selbst da ist es sehr weit unten.“* · *„die headerbar sollte auch ganz nach unten als footer. dann wandert alles automatisch ein gutes stück hoch.“* · *„wir können diese zeile als header einbauen.“* (Inselpunkte · Wissenskarten) · an TTs Bild *„B, und dann C nach möglichkeit dazu“*; bei WM *„Bedienung am Handy (Empfohlen)“*. Von oben: Punktezeile · Bild · Pad · Knopfzeile · Leiste. Gemessen vorher (375 x 812, TT und WM gleich): Leiste 0..65 · Bild 73..516 · Knoepfe 529..577 · Punkte 583..611 · Pad 618..728, Stickmitte bei 676 (83 %). Die Punktezeile haengt `pickPlatz` (game.js) nach `main`; hier nur die Reihenfolge und die Menues, die jetzt nach oben aufgehen. Nur unter 820 px, wie `pickPlatz`; am Rechner bleibt alles. VORHER: Leiste oben, Punkte in der Werkzeugzeile. DIE LEISTE SELBST (v10-1389, sein Wort am Bild von v10-1388, Linie und „'ur Game“ rot umrandet): *„die linie und 'ur Game sollten ganz nach unten rutschen und , aber an der stelle soll auch eine linie bleiben.“* Von oben: Linie · Knoepfe mit der Diskette in derselben Zeile (vorher schwebte sie absolut ueber beiden Zeilen, rechts 57 px Innenabstand) · Linie · 'ur Game. Gemessen vorher: Leiste 746..812 (66), 'ur Game 756..774, Knoepfe 779..804 (25 hoch), Diskette 761..799. */ @media (max-width:819px){ /* FEINE LINIEN (%s, %s Uhr, WM, v10-1424) - sein Wort am Bild, beide Linien rot umrandet: *„die beiden orangenen linien unten müssen dünner werden. mindestens 50%%. einfache feine linien.“* Gemessen: beide standen auf 3 px (die eine ueber der Fussleiste, die andere ueber „'ur Game“). 1 px ist ein Drittel davon - also mehr als seine Haelfte - und die feinste Linie, die ein Bildschirm sauber zeichnet. */ body > .bar{order:2;border-bottom:0;border-top:1px solid var(--marke);gap:.4rem .35rem; padding:.45rem .6rem calc(.3rem + env(safe-area-inset-bottom, 0px))} .bar > .bar-right{order:1;flex:1 1 0;justify-content:flex-start} .bar > .stand-knopf{order:1;position:relative;top:auto;bottom:auto;right:auto;margin:0;flex:0 0 auto} .bar > .brand{order:2;flex:1 1 100%;margin:0 -.6rem;padding:.3rem .6rem 0;border-top:1px solid var(--marke)} body > main{order:1} main > .zaehler{order:1} main > .stage{order:2} main > .pad{order:3} main > .tools{order:4} main > .legal{order:5} .bar .lang-liste,.bar .einst-menue{top:auto;bottom:calc(100% + 6px)} } /* DER STICK AM FINGER (17.09.2026, WM, v10-1394) - sein Wort ueber TT: *„… können wir das gleiche nur sehr transparent auch zusätzlich im spielbild erscheinen lassen, wenn der spieler darauf tippt und dort lieber steuern möchte?“* Dieselbe Groesse wie der feste Stick (104, Knopf 44), aber durchsichtig: ein heller Ring und ein oranger Knopf mit halber Deckkraft, damit man sieht, wohin man zieht, und das Bild darunter bleibt. Nur zum Sehen (`pointer-events:none`); die Zeiger gehen an die Buehne. `left`/`top` setzt game.js auf die Aufsetzstelle; die Mitte liegt dort (negativer Rand). z-index 5: ueber Hinweis (3), Kartenknoepfen (4) und Kompass (2), unter dem Titelbild (20/60). `touch-action:none` an der Buehne, damit der Browser ein Ziehen nicht als Rollen oder Zoomen nimmt (die Zeichenflaeche trug es schon, die Leisten im Bild nicht). */ .stage{touch-action:none} .finger-stick{position:absolute;left:0;top:0;width:104px;height:104px;margin:-52px 0 0 -52px;border-radius:50%; background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.55);pointer-events:none;z-index:5} .finger-stick i{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%; background:rgba(242,140,40,.5);border:2px solid rgba(255,255,255,.75)} /* QUER NUR DIE BUEHNE (17.09.2026, WM, v10-1396) - sein Wort ueber TT: *„hochkannt soll generell gespielt werden un d alles bedienbar sein. quer sollte man nur den spielbereich auf dem ganzen bildschirm sehen und die steuerung muss dann sowieso dort sein, wo der spieler hintippt.“*; bei WM *„Quer immer am Finger (Empfohlen)“* (der Schalter gilt nur hochkant, game.js `bindStick`). Quer auf dem Handy = Querformat UND hoechstens 500 hoch - ein Tablet quer (768 und mehr) behaelt die volle Anordnung. Dann bleibt von `main` nur die Buehne, ohne Rand und Rundung, so gross wie der Schirm; Leiste, Punkte, Knoepfe und Pad sind weg. Die Fenster () haengen am body und messen sich an der Buehne (`--buehne-h`), sie bleiben. Gemessen vorher (812 x 375, v10-1395): Punkte 10..38, Buehne 45..245 (200 hoch, die Mindesthoehe), Pad 253..363, Leiste 288..375 ueber dem Pad, Werkzeugzeile 380..428, die Seite rollte (427 hoch). */ @media (orientation:landscape) and (max-height:500px){ html,body{overflow:hidden} body > .bar{display:none} body > main{padding:0;gap:0;height:100%} main > :not(.stage){display:none !important} main > .stage{flex:1 1 auto;min-height:0;max-height:none;height:100%;border-radius:0} }