* { margin:0; padding:0; box-sizing:border-box; } /* FARB-GESETZE (v14): 1) WEISS = EREIGNIS. Reines #fff nur bei: Blitz, Fertig-/Abschluss- Zuständen (Kurbel, Spirale, Glimm, Treppe) und dem einen Zeugen-Fenster in Berlin. Nie als Deko, nie als Hover. 2) KEIN VOLLSCHWARZ. Bühne = #080808, Flächen darüber ≥ #0a0a0a — so bleibt jedem Blitz sein Schlag. 3) WALBLAU = FABI LIVE. Die Familie (#4a7d8c / #6fa3b5 / #0e1a1f, Glow rgba(120,150,170,.3), Cursor #8aa2ad, Fragment #c8d4da) erscheint genau dann, wenn Fabi in diesem Moment am anderen Ende schreibt: STROBO und Finale. Archiv bleibt grau (Januar, K2-S6). BORDER-GRAMMATIK (v2): dashed hat GENAU ZWEI Bedeutungen — a) OFFEN/ERWARTEND: Slots, Zonen, Grenzen, Unplatziertes. Regel: Jedes dashed-a muss in ein solid- oder weiß-Gegenstück übergehen KÖNNEN (Beleg rastet ein, Klingelschild bekommt einen Namen). b) FALTLINIE (Origami-Notation): Knicklinien und eingeklappte Falze. Alles andere trägt kein dashed. Dinge sind randlos (Ding-Grammatik), das Gerät nutzt Geräte-Konventionen (dotted underline für Antippbares, nie gestrichelte Rahmen). Test vor jeder neuen dashed-Verwendung: Kann es einrasten (a)? Ist es ein Knick (b)? Wenn nein: kein dashed. */ /* Textskala: 1 = normal. Nur der LESETEXT skaliert damit; Rätsel/Grafiken bleiben fest (sonst brechen sie). Nur auf :root — NICHT auf body, sonst überschattet der body-eigene Wert den per JS auf gesetzten Regler. */ :root { --ts:1; } html, body { height:100%; font-family:'IBM Plex Sans', Tahoma, Geneva, sans-serif; background:#080808; color:#c8c8c8; } /* ---------- dauerhafte Kopfleiste ---------- */ #topbar { position:fixed; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:flex-start; gap:.8rem; padding:.5rem .8rem; z-index:500; background:linear-gradient(#080808 60%, transparent); } #restart { font-size:.68rem; letter-spacing:.14em; padding:.35rem .9rem; background:#080808; border:1px solid #333; color:#666; cursor:pointer; flex-shrink:0; } #restart:hover { border-color:#888; color:#ddd; } /* Test-Leiste: Direkteinstiege (nur fürs Testen) */ #testleiste { display:flex; flex-wrap:wrap; gap:.35rem; align-items:center; } #testleiste .testlabel { color:#3a3a3a; font-size:.6rem; letter-spacing:.2em; } #testleiste button { font-size:.6rem; letter-spacing:.08em; padding:.25rem .55rem; background:#080808; border:1px solid #2a2a2a; color:#555; } #testleiste button:hover { border-color:#777; color:#ccc; } /* Mobil: die Kapitel-Knöpfe stören auf dem Handy — sie klappen hinter TEST ⚑ zusammen und öffnen als Overlay-Liste (zum Testen unterwegs). */ @media (max-width: 700px){ #topbar { gap:.4rem; padding:.4rem .6rem; align-items:center; } #testleiste .testlabel { cursor:pointer; user-select:none; -webkit-user-select:none; border:1px solid #2a2a2a; padding:.35rem .7rem; color:#555; } #testleiste button { display:none; } #testleiste.offen { position:fixed; top:2.6rem; left:.5rem; right:.5rem; max-height:62vh; overflow-y:auto; display:flex; flex-direction:column; flex-wrap:nowrap; gap:.35rem; background:#0a0a0a; border:1px solid #333; padding:.6rem; z-index:600; } #testleiste.offen .testlabel { position:sticky; top:0; background:#0a0a0a; text-align:center; } #testleiste.offen button { display:block; width:100%; text-align:left; padding:.55rem .8rem; font-size:.74rem; } #restart { font-size:.58rem; padding:.35rem .6rem; letter-spacing:.08em; } } /* ---------- Bühne / Feed ---------- */ #buehne { position:absolute; inset:0; overflow-y:auto; padding:3.4rem 1.2rem 5rem; } #feed { max-width:38rem; margin:0 auto; display:flex; flex-direction:column; gap:1rem; } .z { line-height:1.7; font-size:calc(.95rem * var(--ts)); } .du { color:#ddd; } .ich { color:#a8a8a8; font-style:italic; } /* C7: Ich-Register gehoben */ /* Sprechen: wörtliche Rede steht aufrecht gegen die gekippte Innenstimme */ .rede { font-weight:500; font-style:normal; color:#eee; } .regie { color:#858585; font-size:calc(.8rem * var(--ts)); letter-spacing:.14em; text-transform:uppercase; } /* Lange Bild-Regie (>~12 Wörter): normale Schreibung, ruhig grau. VERSALIEN + Sperrung bleiben den kurzen Kommandos vorbehalten (C1). */ .regielang { color:#8a8a8a; font-size:calc(.88rem * var(--ts)); letter-spacing:.02em; } .bote { color:#ddd; } /* Klick-Hinweis */ /* v20.10: der Weiter-Hinweis war zu klein/dunkel — jetzt doppelt so groß, heller, mit weichem Schein, damit klar ist: hier tippen für mehr. */ #klickhinweis { position:fixed; bottom:calc(1rem + env(safe-area-inset-bottom, 0px)); left:50%; transform:translateX(-50%); color:#9a9a9a; font-size:1.6rem; line-height:1; opacity:0; transition:opacity .4s; pointer-events:none; z-index:350; text-shadow:0 0 10px rgba(150,150,150,.35); animation:pulsieren 1.5s ease-in-out infinite; } #klickhinweis.an { opacity:1; } @keyframes pulsieren { 50% { transform:translateX(-50%) translateY(4px); opacity:.55; } } /* ---------- Bausteine ---------- */ .blackbox { background:#0a0a0a; border:1px solid #3a3a3a; color:#777; display:flex; align-items:center; justify-content:center; font-size:.72rem; letter-spacing:.14em; user-select:none; -webkit-user-select:none; } button { font-family:'IBM Plex Sans', Tahoma, Geneva, sans-serif; font-size:calc(.85rem * var(--ts)); letter-spacing:.06em; padding:.55rem 1.4rem; background:#0a0a0a; border:1px solid #555; color:#bbb; cursor:pointer; } button:hover { border-color:#999; color:#eee; } input[type=text], input[type=email] { font-family:'IBM Plex Sans', Tahoma, Geneva, sans-serif; font-size:.95rem; padding:.5rem .8rem; background:#0a0a0a; border:1px solid #444; color:#ddd; letter-spacing:.1em; outline:none; } .wahlreihe { display:flex; gap:1rem; flex-wrap:wrap; } /* C3 — Drei Sprechakte an der Wahl: Gesprochenes aufrecht-hell (wie .rede), Gedanken kursiv + gestrichelt (Border-Grammatik: noch nicht gesagt), Handlungen = Bestand ('tun', ohne Sonderregel). */ .wahlreihe button.w-rede, #strobo-zeile .strobowahl button.w-rede { color:#eee; border-color:#666; font-style:normal; } .wahlreihe button.w-denk, #strobo-zeile .strobowahl button.w-denk { color:#999; font-style:italic; border-style:dashed; /* a: offen (noch nicht gesagt — kann Rede werden) */ } .laut { padding:1rem; font-size:calc(.82rem * var(--ts)); letter-spacing:.03em; color:#ccc; text-align:left; justify-content:flex-start; } /* ---------- Ziehharmonika ---------- */ .harmonika { display:flex; flex-direction:column; gap:.8rem; } .absatz { border-left:1px solid #3a3a3a; padding-left:1.2rem; color:#cfcfcf; line-height:1.75; font-size:calc(.92rem * var(--ts)); } .absatz s { color:#5a5a5a; } .absatz.streifen { max-height:1.55em; overflow:hidden; opacity:.38; border-top:1px dashed #3a3a3a; /* b: falz (eingeklappter Absatz) */ cursor:pointer; white-space:nowrap; text-overflow:ellipsis; } .absatz.sie { border-left-color:#2c2c2c; color:#c4c4c4; } /* Kapitel-Abschnitte: fertige Falz-Blöcke klappen zu einem Streifen ein */ .kabschnitt { display:flex; flex-direction:column; gap:1rem; } .kstreifen { border-top:1px dashed #3a3a3a; /* b: falz (eingeklappter Kapitel-Block) */ color:#5a5a5a; font-size:.72rem; letter-spacing:.14em; padding-top:.4rem; cursor:pointer; } .kstreifen:hover { color:#999; } .kabschnitt .kinhalt { display:flex; flex-direction:column; gap:1rem; } .kabschnitt.zu .kinhalt { display:none; } /* ---------- Szene 1: Sortieren ---------- */ #sortier { position:relative; min-height:340px; } .sobjekt { position:absolute; width:130px; height:100px; /* v16.2: Platz für Grafik + Label */ cursor:pointer; text-align:center; } .sozone { position:absolute; width:170px; height:120px; border-style:dashed; color:#555; /* a: offen (Ablagezone erwartet Objekte) */ } /* ---------- Handy-Overlay ---------- */ .overlay { position:fixed; inset:0; background:rgba(8,8,8,.92); display:none; align-items:center; justify-content:center; z-index:400; } .overlay.aktiv { display:flex; } .panel { background:#0a0a0a; border:1px solid #444; width:min(24rem, 92vw); height:min(34rem, 86vh); display:flex; flex-direction:column; font-size:calc(.88rem * var(--ts)); /* das Gerät rendert in der Systemschrift — fühlt sich an wie das eigene Handy */ font-family:system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } /* Gerät bleibt Gerät: Buttons/Inputs im Panel erben system-ui — sonst springt derselbe Satz beim Senden von Plex (Chatfuss) in die Bubble-Schrift. Die Denkzeile bleibt die einzige Plex-Ausnahme. */ .panel button, .panel input { font-family:inherit; } .nachricht .wer, .nachricht .meta, .zeittrenner, .panelkopf { font-variant-numeric:tabular-nums; } .panelkopf { padding:.8rem 1rem; border-bottom:1px solid #2a2a2a; color:#666; font-size:calc(.72rem * var(--ts)); letter-spacing:.14em; display:flex; justify-content:space-between; align-items:center; } .panelkopf button { padding:.25rem .7rem; font-size:.7rem; } .chatlog { flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:.8rem; } /* v20.8: dezente, schmale Scrollleiste statt OS-Chrome — im Panel soll nichts „Fenster" schreien */ .chatlog, .chatliste { scrollbar-width:thin; scrollbar-color:#2c2c2c transparent; } .chatlog::-webkit-scrollbar, .chatliste::-webkit-scrollbar { width:5px; } .chatlog::-webkit-scrollbar-thumb, .chatliste::-webkit-scrollbar-thumb { background:#2c2c2c; border-radius:3px; } .chatlog::-webkit-scrollbar-track, .chatliste::-webkit-scrollbar-track { background:transparent; } .chatliste { flex:1; padding:.9rem; display:flex; flex-direction:column; gap:.55rem; overflow-y:auto; } .chateintrag { padding:.9rem 1rem; border:1px solid #2c2c2c; background:#0a0a0a; color:#ccc; cursor:pointer; flex-shrink:0; } .chateintrag:hover { border-color:#666; background:#0f0f0f; } .chateintrag .ungelesen { float:right; border:1px solid #555; border-radius:999px; padding:.05rem .55rem; font-size:.66rem; letter-spacing:.06em; color:#ddd; background:#181818; } /* v20.9: echte Sprechblasen statt Rahmen-Kaesten — Fuellung + runde Ecken mit „Schwanz", empfangen links / gesendet rechts. */ .nachricht { max-width:80%; line-height:1.45; border:none; background:#171717; padding:.5rem .8rem; border-radius:16px 16px 16px 5px; } .nachricht .wer { color:#666; font-size:calc(.66rem * var(--ts)); letter-spacing:.08em; margin-bottom:.15rem; } .nachricht .text { color:#e2e2e2; } .nachricht.eigene { align-self:flex-end; text-align:left; background:#262626; border-radius:16px 16px 5px 16px; } .nachricht .meta { color:#666; font-size:calc(.64rem * var(--ts)); font-style:normal; margin-top:.25rem; opacity:.7; } .nachricht.eigene .meta { text-align:right; } .zeittrenner { text-align:center; color:#3f3f3f; font-size:calc(.68rem * var(--ts)); letter-spacing:.14em; margin:.7rem 0 .1rem; } .blockinhalt { display:flex; flex-direction:column; gap:.8rem; } /* v20.12: Bubbles brauchen Abstand + align-self (rechtsbündig) */ .chatblock.zu .blockinhalt { display:none; } /* Geräte-Konvention (kein dashed im Gerät): der zugeklappte Trenner bleibt Text, die Tapbarkeit signalisiert ein nachgestelltes › */ .chatblock.zu .zeittrenner { cursor:pointer; padding:.35rem; } .chatblock.zu .zeittrenner::after { content:' ›'; color:#3f3f3f; } .denkzeile { border-top:1px solid #2a2a2a; padding:.7rem 1rem; min-height:2.6em; color:#a8a8a8; font-style:italic; font-size:calc(.8rem * var(--ts)); /* Denken bleibt Plex — auch mitten im Gerät */ font-family:'IBM Plex Sans', Tahoma, Geneva, sans-serif; } .chatfuss { border-top:1px solid #2a2a2a; padding:.8rem; display:flex; flex-direction:column; gap:.6rem; } .chatfuss button { width:100%; font-size:calc(.78rem * var(--ts)); } /* „Die tote Antwort" (14.07.): durchgestrichen, nicht ausgeblendet — dieselbe Sprache wie Fabis -Streichungen im Brief. Der Satz existiert, er geht nur nicht mehr. Vor dem ersten Tap ist die tote Option optisch NICHT von den lebenden zu unterscheiden. */ .chatfuss button.gestrichen { text-decoration:line-through; opacity:.45; cursor:default; } .infoknopf { display:inline-block; border:1px solid #444; color:#888; font-size:.68rem; padding:.05rem .45rem; margin-left:.4rem; cursor:pointer; } /* Zweite Lesung (F-C0): antippbare Januar-Passage + der eine Gedanke. Minimaler Hinweis: dotted underline (die Link-Konvention des Geräts, siehe BORDER-GRAMMATIK v2) + sachtes Pulsen der Schrift. */ .jhint { border-bottom:1px dotted #6a6a6a; cursor:pointer; animation:jpuls 2.4s ease-in-out infinite; } .jhint:hover { color:#e6e6e6; } .jhint.auf { animation:none; border-bottom-color:#333; color:inherit; cursor:default; } @keyframes jpuls { 0%,100% { color:inherit; } 50% { color:#d0d0d0; } } .jgedanke { align-self:flex-start; margin:-.2rem .2rem .2rem; color:#8a8a8a; font-style:italic; font-size:calc(.78rem * var(--ts)); font-family:'IBM Plex Sans', Tahoma, Geneva, sans-serif; opacity:0; animation:jein .8s ease forwards; } @keyframes jein { to { opacity:1; } } /* Optischer Reiz „antippbar": sanftes Pulsen von Rand + Schein. (u.a. der Leuchtturm in K2-S5, der tagsüber eben nicht blinkt.) */ .antippbar { animation:antipp 1.9s ease-in-out infinite; } @keyframes antipp { 0%,100% { border-color:#3a3a3a; box-shadow:0 0 0 0 rgba(190,190,190,0); } 50% { border-color:#6f6f6f; box-shadow:0 0 0 3px rgba(180,180,180,.12); } } /* ---------- Kiste & Objekte ---------- */ #objekte { display:flex; gap:.9rem; flex-wrap:wrap; justify-content:center; padding:1rem 0; } #objekte .blackbox { width:104px; height:104px; cursor:pointer; text-align:center; flex-direction:column; gap:.3rem; } #objekte .blackbox:hover { border-color:#666; } #objekte .blackbox.gesehen { opacity:.55; } #hoverzeile { min-height:1.5em; text-align:center; color:#a8a8a8; font-style:italic; font-size:calc(.85rem * var(--ts)); } /* v15 (EXPERIMENTELL, leicht rückbaubar): Objekt-Portraits — Kanon-Dinge als 1px-Liniengrafik im Kurbel-Duktus statt Emoji-Kisten. Hover bewegt GENAU EIN Detail (Rädchen dreht, Plektrum kippt, Deckel hebt sich …). Grammatik: Boxen bleiben UI (Slots, Ziele) — Dinge werden Dinge (Rahmen transparent). Rückbau: objektSVG()-Aufrufe + .ding entfernen. */ .blackbox.ding { border-color:transparent; flex-direction:column; gap:.3rem; } #objekte .blackbox.ding:hover { border-color:transparent; } .objektbild { display:block; flex-shrink:0; } .objektlabel { font-size:.68rem; letter-spacing:.14em; color:#666; text-align:center; } /* v20.7: +~1pt */ .objektbild .o-rad, .objektbild .o-plek, .objektbild .o-stecker, .objektbild .o-arm, .objektbild .o-kopf, .objektbild .o-deckel, .objektbild .o-fluke, .objektbild .o-lasche, .objektbild .o-gras, .objektbild .o-klappe { transition:transform .3s; transform-box:fill-box; transform-origin:center; } .blackbox:hover .o-rad { transform:rotate(35deg); } .blackbox:hover .o-plek { transform:rotate(9deg); } .blackbox:hover .o-stecker { transform:translateX(2.5px); } .blackbox:hover .o-arm { transform:rotate(-16deg); } .blackbox:hover .o-kopf { transform:translateX(2.5px); } .blackbox:hover .o-deckel { transform:translateY(-2.5px); } .blackbox:hover .o-fluke { transform:rotate(-9deg); } .blackbox:hover .o-lasche { transform:translateY(-2px); } /* die Lasche hebt sich */ .blackbox:hover .o-gras { transform:rotate(-12deg); } /* ein Halm wippt */ .blackbox:hover .o-klappe { transform:translateY(1.5px) scaleY(.55); } /* die Einwurfklappe kippt nach innen */ /* der Leuchtturm blinkt: Lichtstrahlen erst beim Hover */ .objektbild .o-licht { opacity:0; transition:opacity .3s; } .blackbox:hover .o-licht { opacity:1; } @media (prefers-reduced-motion: reduce){ .objektbild .o-rad, .objektbild .o-plek, .objektbild .o-stecker, .objektbild .o-arm, .objektbild .o-kopf, .objektbild .o-deckel, .objektbild .o-fluke, .objektbild .o-lasche, .objektbild .o-gras, .objektbild .o-klappe, .objektbild .o-licht { transition:none; } } #kistenbox { width:260px; height:150px; margin:0 auto; position:relative; flex-direction:column; gap:.4rem; } /* Handschrift (Caveat): gesperrte Handschrift wirkt fake — letter-spacing 0 */ /* .edding/.sticker: geteiltes Asset — Prolog-Kiste UND K4-S6-Karton (identischer Sticker, gleicher Abnutzungsgrad) */ .edding { color:#999; font-size:1.15rem; letter-spacing:0; font-family:'Caveat', cursive; font-weight:500; } /* Dinge sind Dinge (randlos): nur die gesperrte Schrift + leichte Drehung — die Lücken (D__CHBR_ND) tragen das Abgekratzte */ .sticker { color:#666; font-size:.72rem; letter-spacing:.3em; padding:.2rem .6rem; display:inline-block; transform:rotate(-1.5deg); } #kband { position:absolute; left:-12px; right:-12px; top:70%; height:26px; /* Packband-Optik: diagonale Struktur + matter Glanz */ background: repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 6px, transparent 6px 12px), linear-gradient(#161616, #0e0e0e); border:1px solid #4a4a4a; border-left:none; border-right:none; display:flex; align-items:center; justify-content:center; color:#777; font-size:.58rem; letter-spacing:.28em; cursor:grab; touch-action:none; transition:opacity .5s; } /* ---------- Kurbel (Drehknopf) ---------- */ .kurbelbox { display:flex; flex-direction:column; align-items:center; gap:.5rem; padding:.4rem 0; } .kurbelknopf { width:128px; height:128px; position:relative; cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; } .kurbelknopf:active { cursor:grabbing; } .kurbelknopf:focus { outline:none; } .kurbelknopf:focus-visible { outline:1px solid #888; outline-offset:6px; } .kurbelsvg { width:100%; height:100%; display:block; overflow:visible; } .kurbelsvg .ring-bg { fill:none; stroke:#2a2a2a; stroke-width:4; } .kurbelsvg .ring-fort { fill:none; stroke:#ccc; stroke-width:4; stroke-linecap:round; } .kurbelsvg .nabe { fill:#0a0a0a; stroke:#3a3a3a; stroke-width:2; } .kurbelsvg .griff line { stroke:#999; stroke-width:4; stroke-linecap:round; } .kurbelsvg .griff .knauf { fill:#111; stroke:#ddd; stroke-width:3; } .kurbelknopf.fertig .ring-fort { stroke:#fff; } .kurbelknopf.fertig .griff line, .kurbelknopf.fertig .griff .knauf { stroke:#fff; } .kurbeltext { color:#777; font-size:.62rem; letter-spacing:.2em; text-align:center; } /* ---------- Aufgießen (K2-S1) — die direkteste Schwester der Kurbel: Draufsicht. Ein Kreis als Gefäßrand, die Kreisbewegung zeichnet eine Spirale von außen nach innen — die echte Pour-over-Bewegung. Fertig = Mitte erreicht, Rand wird weiß (wie .fertig). Zu schnell = die Linie reißt ab, ein Strich springt über den Rand, die Kleckse bleiben liegen: der Tatort wird sichtbar. */ .giessbox { display:flex; flex-direction:column; align-items:center; gap:.5rem; padding:.4rem 0; } .giessknopf { width:180px; height:180px; position:relative; cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; } .giessknopf:active { cursor:grabbing; } .giesssvg { width:100%; height:100%; display:block; overflow:visible; } .giesssvg .rand { fill:none; stroke:#2a2a2a; stroke-width:4; } .giesssvg .spirale { fill:none; stroke:#ccc; stroke-width:2.5; stroke-linecap:round; } .giesssvg .schwappstrich { stroke:#888; stroke-width:2; stroke-linecap:round; } .giesssvg .klecks { fill:#4a4a4a; } .giessknopf.fertig .rand, .giessknopf.fertig .spirale { stroke:#fff; } /* ---------- Auslöser (Draufsicht) — dritte Schwester von Kurbel und Spirale: Fassung, Gewindering, Kappe. Runterdrücken = die Kappe sinkt ein (scale), die Kamera feuert beim DRUCK, nicht beim Loslassen. */ .ausloeserbox { display:flex; flex-direction:column; align-items:center; gap:.5rem; padding:.4rem 0; } .ausloeserknopf { width:110px; height:110px; cursor:pointer; touch-action:none; user-select:none; -webkit-user-select:none; } .ausloeserknopf:focus { outline:none; } .ausloeserknopf:focus-visible { outline:1px solid #888; outline-offset:6px; } .ausloesersvg { width:100%; height:100%; display:block; } .ausloesersvg .fassung { fill:none; stroke:#2a2a2a; stroke-width:4; } .ausloesersvg .gewinde { fill:#0d0d0d; stroke:#3a3a3a; stroke-width:1.5; } .ausloesersvg .kappe { fill:#111; stroke:#999; stroke-width:2.5; transition:transform .12s, fill .12s; transform-box:fill-box; transform-origin:center; } .ausloesersvg .kappenrand { fill:none; stroke:#3a3a3a; stroke-width:1; transition:transform .12s; transform-box:fill-box; transform-origin:center; } .ausloeserknopf:hover .kappe { stroke:#ccc; } .ausloeserknopf.gedrueckt .kappe, .ausloeserknopf.gedrueckt .kappenrand { transform:scale(.88); } .ausloeserknopf.gedrueckt .kappe { fill:#0a0a0a; } .ausloeserknopf.ausgeloest { opacity:.5; cursor:default; pointer-events:none; } /* ---------- Unterschrift / Zollstock ---------- */ #pad { border:1px solid #3a3a3a; background:#0a0a0a; touch-action:none; cursor:crosshair; display:block; } #zollstock { height:34px; margin:0 auto; cursor:pointer; transition:width .3s; /* keine vierte Schrift-Welt: Plex mit Tabellenziffern statt monospace */ font-variant-numeric:tabular-nums; letter-spacing:.08em; } /* ---------- Lichtkegel (Kapitel 1) ---------- */ #kegel { position:fixed; inset:0; pointer-events:none; z-index:300; display:none; background:radial-gradient(circle at var(--kx, 50%) var(--ky, 50%), rgba(8,8,8,0) 0, rgba(8,8,8,0) 170px, rgba(8,8,8,.94) 300px); } body.dunkel #kegel { display:block; } /* Falz-Zeile / Streiflicht */ .knickzeile { height:44px; width:min(300px, 80vw); margin:0 auto; border:0; border-top:1px dashed #4a4a4a; /* b: falz (wörtlich eine Knicklinie) */ position:relative; touch-action:none; display:flex; align-items:center; justify-content:center; } .knickzeile .schrift { opacity:0; transition:opacity 1.2s; color:#ddd; font-size:1.05rem; text-align:center; padding:0 .5rem; font-family:'Caveat', cursive; font-weight:500; } .knickzeile .schrift.da { opacity:1; } /* Funken */ .funkenfeld { display:flex; gap:3.5rem; justify-content:center; padding:1.2rem 0; } .funke { width:16px; height:16px; border:1px solid #888; border-radius:50%; cursor:pointer; opacity:.5; } .funke:hover { opacity:1; } .funke.aus { opacity:.15; pointer-events:none; } /* Wal (Kapitel 1) */ #walbogen { width:130px; height:90px; margin:0 auto; transition:width .7s ease, height .7s ease; cursor:grab; touch-action:none; text-align:center; } #walbogen.offen1 { width:190px; height:160px; } #walbogen.offen2 { width:240px; height:240px; } #walbogen.offen3 { width:300px; height:320px; } /* v15 „Der Bogen faltet wirklich": bogenSVG() zeichnet das Papier — die Shell bleibt fürs Layout & die Zug-Geste, Border/Label werden unsichtbar. Fällt der Renderer aus, bleibt die Blackbox sichtbar. */ #walbogen.als-svg { border-color:transparent; color:transparent; } /* Bon-Rätsel */ #bonslots, #bonpool { display:flex; flex-direction:column; gap:.35rem; padding:.5rem 0; } .bonslot { height:36px; width:min(270px, 90%); margin:0 auto; border:1px dashed #333; position:relative; } /* a: offen (Slot erwartet Streifen) */ .slothint { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#3f3f3f; font-size:.62rem; letter-spacing:.2em; pointer-events:none; } .bonslot .bonstreifen { margin:0; } .bonstreifen { height:36px; width:min(270px, 90%); margin:0 auto; border:1px solid #4a4a4a; background:#0c0c0c; display:flex; align-items:center; justify-content:center; cursor:grab; touch-action:none; /* Maschinendruck ohne vierte Schrift: Plex + Tabellenziffern */ font-size:.72rem; color:#ccc; font-variant-numeric:tabular-nums; letter-spacing:.06em; white-space:pre; } .bonstreifen.fest { cursor:default; border-color:#666; } /* v20.15b: Fortschrittsbalken fürs „Drücken und halten" (haltenGeste) */ .haltebalken { position:absolute; left:0; bottom:0; height:4px; width:0; background:#cfcfcf; pointer-events:none; z-index:4; } .haltend { border-color:#999 !important; } .gehalten { border-color:#eee !important; } /* „Entwickeln" — EIN Effekt, EIN Bedeutungsfeld: überall, wo Erinnerung scharf wird (Bon, Fotos, die 19 Zeilen), weicht der Blur, steigt die Deckkraft. Wie Fotopapier in der Schale. */ .geist { opacity:.5; filter:blur(.4px); transition:opacity .9s, filter .9s; } .geist.entwickelt { opacity:.95; filter:blur(0); } /* Medien entwickeln stärker: aus echter Unschärfe */ .fotoecht.geist, .fotobox.geist { opacity:.2; filter:blur(9px); transition:opacity 1.6s, filter 1.6s; } .fotoecht.geist.entwickelt, .fotobox.geist.entwickelt { opacity:1; filter:blur(0); } /* K3-S12 — das Herzchen (bogenSVG-Detail): vor l2 praktisch unsichtbar, entwickelt = blur 0, opacity .9 */ .bogenherz.geist { opacity:.15; filter:blur(3px); } .bogenherz.geist.entwickelt { opacity:.9; filter:blur(0); } /* ihr Blick als Kamerabewegung: ein weicher Lichtfleck wandert in 1800 ms diagonal von unten rechts nach oben links über den Bogen und bleibt dort stehen (der Fleck sitzt bei 54%/54% einer 200%-Kachel — bei background-position 100% landet er auf ~8%/8% des Bogens). */ .bogenlicht { position:absolute; inset:0; pointer-events:none; z-index:3; background:radial-gradient(circle at 54% 54%, rgba(235,235,235,.16), transparent 42%); background-size:200% 200%; background-position:0% 0%; transition:background-position 1.8s ease-in-out; } .bogenlicht.oben { background-position:100% 100%; } /* Fotorolle (Rückblenden über Handyfotos) */ .fotobox { width:100%; height:100px; margin-bottom:.8rem; border-style:dashed; font-size:.68rem; /* Prototyp-Klasse — stirbt mit dem Art-Pass (QA-Ausnahme der Inventur); .fotoecht bleibt solid */ } .fotoecht { display:block; width:100%; max-height:360px; object-fit:cover; margin-bottom:.8rem; border:1px solid #3a3a3a; } /* Kapitel 2 */ .haiku { text-align:center; color:#ddd; line-height:1.9; /* das handgeschriebenste Artefakt des Spiels: Caveat, nie gesperrt */ font-family:'Caveat', cursive; font-weight:500; font-size:1.3rem; letter-spacing:0; /* randlos (Ding-Grammatik) — nur EINE Knicklinie darüber: das Haiku kam aus einer Faltung, die Linie erzählt die Herkunft */ border-top:1px dashed #3a3a3a; /* b: falz */ padding:1.2rem; margin:0 auto; max-width:22rem; } /* ---------- v18 §9: der Abspann — die Ticket-Rückseite ---------- */ .abspannstreifen { color:#777; /* randlos — nur Text */ font-size:.72rem; letter-spacing:.14em; text-align:center; padding:.5rem .9rem; margin:0 auto 1.2rem; max-width:26rem; } .abspanndoc { position:relative; font-family:'Caveat', cursive; font-weight:500; letter-spacing:0; color:#cfcfcf; line-height:1.55; /* solid: das wichtigste ABGESCHLOSSENE Dokument des Spiels; Fläche ≥ #0a0a0a (kein Vollschwarz), gesetzeskonform */ border:1px solid #2a2a2a; background:#0e0e0e; padding:1.5rem 1.7rem; margin:1rem auto 0; max-width:30rem; text-align:left; transform:rotate(-1deg); /* Brief-Echo aus S7 */ } .abspanndoc s { color:#5a5a5a; } .abspannzeile { transition:opacity 1.1s, filter 1.1s; } .abspannzeile.geist { opacity:.1; filter:blur(3px); } .abspannzeile.geist.entwickelt { opacity:1; filter:blur(0); } .abspann-widmung { font-size:calc(1.55rem * var(--ts)); margin-bottom:1rem; } .abspann-nr { font-size:calc(1.08rem * var(--ts)); } .abspann-nr .nr, .abspann-27 .nr { color:#777; font-size:calc(.82rem * var(--ts)); display:inline-block; min-width:1.9rem; } .abspann-27 { font-size:calc(1.28rem * var(--ts)); margin-top:.6rem; } .abspann-ps { font-size:calc(1.08rem * var(--ts)); margin-top:1rem; color:#a8a8a8; } .abspann-seine { border-top:1px dashed #3a3a3a; border-bottom:1px dashed #3a3a3a; /* b: falz (auf-/zuklappbare Liste im Dokument) */ padding:.5rem 0; margin:.7rem 0; color:#8a8a8a; font-size:calc(1.05rem * var(--ts)); cursor:pointer; } .abspann-seine:hover { color:#aaa; } .abspann-seineliste { display:none; flex-direction:column; gap:.15rem; padding:.4rem 0 .2rem .3rem; } .abspann-seineliste.auf { display:flex; } .abspann-seineliste .sz { font-size:.98rem; color:#7a7a7a; line-height:1.4; } .abspann-seineliste .sz .nr { color:#5f5f5f; min-width:1.7rem; display:inline-block; } .abspann-seineliste .sz s { color:#4f4f4f; } .abspann-ticket { position:absolute; top:.5rem; right:.6rem; opacity:.38; pointer-events:none; } .eckenreihe { display:flex; gap:.6rem; justify-content:center; } .ecke { width:44px; height:44px; cursor:pointer; font-size:.6rem; } .ecke.zuG { opacity:.35; cursor:default; } .duebelreihe { display:flex; gap:.6rem; justify-content:center; } .duebel { width:34px; height:34px; border-radius:50%; cursor:pointer; font-size:.6rem; } .duebel.voll { opacity:.3; cursor:default; } /* .hilfeknopf: EINE Definition, weiter unten bei der Rad-Map */ /* Chatliste: im Prolog ohne Scroll — Fabi liegt unsichtbar unter der Kante */ .chatliste.keinscroll { overflow:hidden; } /* Fahrrad-Map (Kapitel 2) */ #radkarte { width:100%; max-width:620px; border:1px solid #333; background:#0a0a0a; touch-action:none; display:block; margin:0 auto; } .radzeile { display:flex; gap:.6rem; align-items:center; justify-content:center; flex-wrap:wrap; min-height:2.2rem; width:100%; } .radfrage { color:#888; font-size:.72rem; letter-spacing:.14em; text-align:center; } .hilfeknopf { font-size:.66rem; padding:.28rem .7rem; opacity:.75; } /* Kapitel 3: Explorer, Streichen, Pizza (.datei/.lyrics gestrichen 13.07.26 — die Songs sind raus, Bens Gitarre bleibt das einzige Instrument des Spiels) */ /* K3-S1/S1c — der Explorer: ein Gerätefenster (system-ui wie .panel). Die Fußzeile ist das Indiz: »1 ELEMENT — 1,2 GB BELEGT« steht ab k3s1 ambient da und wird erst in k3s1c gelesen. Keine Menüleiste. */ .explorer { width:min(24rem, 92vw); margin:0 auto; background:#0a0a0a; border:1px solid #2c2c2c; font-family:system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-variant-numeric:tabular-nums; text-align:left; } .explorer .exkopf { padding:.5rem .9rem; border-bottom:1px solid #1c1c1c; color:#666; font-size:.66rem; letter-spacing:.12em; } .explorer .exliste { display:flex; flex-direction:column; padding:.35rem 0; min-height:2.6rem; } .explorer .exdatei { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:.5rem .9rem; color:#ccc; font-size:.82rem; cursor:pointer; } .explorer .exdatei:hover { background:#101010; } .explorer .exdatei .exmeta { color:#555; font-size:.68rem; flex-shrink:0; } .explorer .exdatei.versteckt .exname { color:#8a8a8a; } /* Ausgeblendete: gedimmter */ .explorer .exdatei.gespielt { opacity:.45; cursor:default; } .explorer .exfuss { padding:.35rem .9rem; border-top:1px solid #1c1c1c; color:#4a4a4a; font-size:.6rem; letter-spacing:.14em; } /* K3-S1c — der Drei-Tasten-Griff: Tastenkappen (Geräte-Register, randlos-flächig). Affordanz: die jeweils nächste Kappe pulst. */ .griffreihe { display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; padding:.6rem 0; } .kappe { width:54px; height:54px; display:flex; align-items:center; justify-content:center; background:#101010; color:#c8c8c8; border:1px solid #222; border-radius:7px; font-family:system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size:1.2rem; line-height:1; cursor:pointer; user-select:none; -webkit-user-select:none; transition:transform .08s, background .15s, color .15s, border-color .15s; } .kappe.gedrueckt { color:#e8e8e8; background:#191919; border-color:#3a3a3a; transform:translateY(1.5px); } .kappe.pulst { animation:kappenpuls 1.7s ease-in-out infinite; } @keyframes kappenpuls { 50% { border-color:#5a5a5a; color:#e6e6e6; } } .kappe.blitzt { background:#2a2a2a; color:#eee; border-color:#777; } .griffreihe .inselhinweis { width:100%; margin-top:.3rem; } /* Reduziert: statisch hell statt Puls */ .griffreihe.reduziert .kappe.pulst { animation:none; border-color:#5a5a5a; color:#e6e6e6; } @media (prefers-reduced-motion: reduce){ .kappe.pulst { animation:none; border-color:#5a5a5a; color:#e6e6e6; } } /* K3-S1c — das Dokument: nur zwei Zeilen scharf, der Rest gedimmte Wisch-Balken (Muster .anleitWisch) */ .dokublock { width:min(26rem, 92vw); margin:0 auto; padding:1.1rem 1.3rem; background:#0c0c0c; border:1px solid #2c2c2c; font-family:system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size:.8rem; line-height:1.8; text-align:left; } .dokublock .dokuzeile.scharf { color:#ddd; } .dokublock .dokuwisch { display:block; height:.55em; margin:.45em 0; background:#1c1c1c; border-radius:2px; } .wandreihe { display:flex; gap:1.2rem; justify-content:center; } .wand { width:130px; height:170px; flex-direction:column; gap:.4rem; cursor:grab; touch-action:none; } /* (.wand .bahnen ist tot — die █-Platzhalter-Bahnen wichen dem SVG-Streichen) */ .belagreihe { display:flex; flex-wrap:wrap; gap:.45rem; justify-content:center; padding:.6rem 0; } .belag { font-size:.72rem; padding:.3rem .7rem; border:1px solid #333; color:#777; } .belag.an { border-color:#ddd; color:#eee; } /* K3-S1 — Die Liste (v12): Zeilen hellen beim Vorbeiziehen kurz auf. Fabis 19 Bildunterschriften in seiner Handschrift (Caveat). */ .listzeile { color:#bbb; font-size:1.33rem; line-height:1.5; /* v15.2: nochmal +2pt — die Handschrift trägt die Szene */ font-family:'Caveat', cursive; font-weight:500; transition:color .9s; } .listzeile.hell { color:#eee; } /* die 19 Zeilen entwickeln sich beim Erscheinen (statt nur aufzuhellen) */ .listzeile.geist { opacity:.15; filter:blur(3px); transition:opacity 1.1s, filter 1.1s; } .listzeile.geist.entwickelt { opacity:.95; filter:blur(0); } /* K3-S1b — Die Zuordnung (v13) */ .etiketten { display:flex; flex-wrap:wrap; gap:.45rem; padding:.4rem 0; } .etikett { font-size:.66rem; letter-spacing:.16em; padding:.35rem .8rem; } .etikett.gewaehlt { border-color:#eee; color:#eee; } /* (Die Belegleiste — Foto-/Bon-Kacheln in gestrichelten Boxen — ist GESTRICHEN, 13.07.26 Autorin. Zonen rasten nur noch an den Zeilen.) */ .zuordZeile { display:flex; align-items:center; gap:.55rem; padding:.28rem 0; border-top:1px dashed #222; /* a: offen (ungelöst — schließt sich als zoneFest/zoneKopf solid) */ cursor:pointer; min-height:44px; } .zuordZeile .txt { color:#bbb; font-size:1.17rem; line-height:1.45; /* +2pt wie .listzeile */ font-family:'Caveat', cursive; font-weight:500; } .zuordZeile.geist { opacity:.35; } .zuordZeile.glimm { border-top:1px solid #fff; box-shadow:0 -6px 12px -8px #fff; } .etikettMarke { border:1px solid #666; color:#ccc; font-size:.58rem; letter-spacing:.16em; padding:.12rem .5rem; flex-shrink:0; min-width:5.4rem; text-align:center; } .etikett, .etikettMarke { cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; } .etikett.platziert { opacity:.3; } .etikett.amZiehen, .etikettMarke.amZiehen { opacity:.35; } .etikettGeist { position:fixed; z-index:900; pointer-events:none; transform:translate(-50%,-130%); border:1px solid #eee; color:#eee; background:#0a0a0a; font-size:.58rem; letter-spacing:.16em; padding:.12rem .5rem; } .zuordZeile.dropZiel { border-top:1px solid #aaa; } .etiketten.dropHeim { outline:1px dashed #777; outline-offset:3px; } /* a: offen (temporärer Erwartungszustand beim Ziehen) */ .zuordZeile.zoneFest { border-left:1px solid #777; padding-left:.5rem; } .zuordZeile.zoneKopf { border-top:1px solid #777; } .zuordZeile.zoneEnde { border-bottom:1px solid #777; } .zuordZeile.belegtPuls { animation:belegtPuls .28s; } @keyframes belegtPuls { 50% { transform:translateX(3px); } } @media (prefers-reduced-motion: reduce){ .zuordZeile.belegtPuls { animation:none; } } /* K4-S6 — Kontostand: nicht mehr am Rand versteckt — groß, dick, direkt über dem Kauf. Kein Weggucken möglich. */ #konto { width:max-content; margin:0 auto; padding:.7rem 1.8rem; font-size:1.4rem; font-weight:500; letter-spacing:.1em; color:#eee; text-align:center; font-variant-numeric:tabular-nums; } /* Zwischenspiel — Transporter-Tetris */ #laderaum { position:relative; width:354px; height:222px; margin:0 auto; border:1px solid #444; background:#0c0c0c; background-image: repeating-linear-gradient(0deg, transparent 0 43px, #161616 43px 44px), repeating-linear-gradient(90deg, transparent 0 43px, #161616 43px 44px); touch-action:none; overflow:visible; } .lschicht { position:absolute; inset:0; transition:opacity .8s; } .lschicht.fertig { opacity:.22; pointer-events:none; } .lteilplatz { position:absolute; border:1px solid #666; background:#111; color:#999; font-size:.55rem; letter-spacing:.05em; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; } #lpool { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; align-items:flex-start; padding:.6rem 0; min-height:60px; width:100%; } .lteil { border:1px solid #555; background:#0c0c0c; color:#aaa; font-size:.55rem; letter-spacing:.05em; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; cursor:grab; touch-action:none; flex-shrink:0; } .lteil.gesperrtT { opacity:.3; } /* v8: Sonderformen — Teile bestehen aus Zellen (U/T/L-Formen) */ .lteil.geformt { position:relative; border:none; background:none; overflow:visible; } .lteilplatz.geformt { border:none; background:none; overflow:visible; } .lzelle { position:absolute; box-sizing:border-box; border:1px solid #555; background:#0c0c0c; } .lteilplatz .lzelle { border-color:#666; background:#111; } .lteil .lbl, .lteilplatz .lbl { position:absolute; inset:0; z-index:2; pointer-events:none; display:flex; align-items:center; justify-content:center; text-align:center; /* Halo: frisst Restlinien + Laderaum-Raster direkt hinter den Buchstaben weg (Muster von .fetzen/#schwarmzeile) */ font-size:.58rem; color:#bbb; text-shadow:0 0 4px #0c0c0c, 0 0 6px #0c0c0c, 0 0 8px #0c0c0c; } /* FINALE „Das Gespräch" — Walblau-Gesetz: Fabi LIVE (wie schon im STROBO). K2-S6 (Januar) bleibt GRAU — Archiv. */ .nachricht.fabi { background:#0e1a1f; } /* Fabis Walblau jetzt als Fuellung statt Rahmen */ .nachricht.fabi .wer { color:#6fa3b5; } .tipptzeile { color:#6fa3b5; font-style:italic; padding:.25rem 1rem .35rem; font-size:.8rem; border-top:1px solid #1a2226; animation:tipptPuls 1.2s ease-in-out infinite; } @keyframes tipptPuls { 50% { opacity:.35; } } .panel.seins { border-color:#4a7d8c; } /* Weiter-Signal im Panel: erscheint nur, wenn ein Tipp erwartet wird */ .panel { position:relative; } .panel { padding-top:22px; } /* v20.9: dezente Handy-Statusleiste (Signal/WLAN/Akku), rechts oben; als ::before, damit sie panel.innerHTML-Wechsel ueberlebt. */ .panel::before { content:""; position:absolute; top:0; left:0; right:0; height:22px; background:#090909 url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2758%27%20height%3D%2714%27%20viewBox%3D%270%200%2058%2014%27%3E%3Cg%20fill%3D%27%238a8a8a%27%3E%3Crect%20x%3D%270%27%20y%3D%279%27%20width%3D%272.4%27%20height%3D%274%27%2F%3E%3Crect%20x%3D%273.6%27%20y%3D%276.5%27%20width%3D%272.4%27%20height%3D%276.5%27%2F%3E%3Crect%20x%3D%277.2%27%20y%3D%274%27%20width%3D%272.4%27%20height%3D%279%27%2F%3E%3Crect%20x%3D%2710.8%27%20y%3D%271.5%27%20width%3D%272.4%27%20height%3D%2711.5%27%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%238a8a8a%27%20stroke-width%3D%271.15%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M20%206.2%20a6.2%206.2%200%200%201%2010.4%200%27%2F%3E%3Cpath%20d%3D%27M22.2%208.9%20a3.1%203.1%200%200%201%206%200%27%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2725.2%27%20cy%3D%2711.6%27%20r%3D%270.9%27%20fill%3D%27%238a8a8a%27%2F%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%238a8a8a%27%20stroke-width%3D%271.1%27%3E%3Crect%20x%3D%2740%27%20y%3D%273%27%20width%3D%2715%27%20height%3D%278%27%20rx%3D%271.6%27%2F%3E%3C%2Fg%3E%3Crect%20x%3D%2741.5%27%20y%3D%274.5%27%20width%3D%279%27%20height%3D%275%27%20fill%3D%27%238a8a8a%27%2F%3E%3Crect%20x%3D%2756%27%20y%3D%275.2%27%20width%3D%271.6%27%20height%3D%273.6%27%20rx%3D%27.6%27%20fill%3D%27%238a8a8a%27%2F%3E%3C%2Fsvg%3E") no-repeat right 12px center; border-bottom:1px solid #191919; pointer-events:none; z-index:2; } /* v20.15: kein WLAN → Mobilfunk. Statt leerer Lücke ein „LTE"-Kürzel neben den Signalbalken — so signalisiert das Gerät mobile Daten (Kiel/Berlin/Deichbrand). */ .panel.kabellos::before { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2752%27%20height%3D%2714%27%20viewBox%3D%270%200%2052%2014%27%3E%3Cg%20fill%3D%27%238a8a8a%27%3E%3Crect%20x%3D%270%27%20y%3D%279%27%20width%3D%272.4%27%20height%3D%274%27%2F%3E%3Crect%20x%3D%273.6%27%20y%3D%276.5%27%20width%3D%272.4%27%20height%3D%276.5%27%2F%3E%3Crect%20x%3D%277.2%27%20y%3D%274%27%20width%3D%272.4%27%20height%3D%279%27%2F%3E%3Crect%20x%3D%2710.8%27%20y%3D%271.5%27%20width%3D%272.4%27%20height%3D%2711.5%27%2F%3E%3C%2Fg%3E%3Ctext%20x%3D%2715%27%20y%3D%2711%27%20font-family%3D%27Helvetica%2CArial%2Csans-serif%27%20font-size%3D%278%27%20font-weight%3D%27700%27%20fill%3D%27%238a8a8a%27%3ELTE%3C%2Ftext%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%238a8a8a%27%20stroke-width%3D%271.1%27%3E%3Crect%20x%3D%2734%27%20y%3D%273%27%20width%3D%2715%27%20height%3D%278%27%20rx%3D%271.6%27%2F%3E%3C%2Fg%3E%3Crect%20x%3D%2735.5%27%20y%3D%274.5%27%20width%3D%279%27%20height%3D%275%27%20fill%3D%27%238a8a8a%27%2F%3E%3Crect%20x%3D%2750%27%20y%3D%275.2%27%20width%3D%271.6%27%20height%3D%273.6%27%20rx%3D%27.6%27%20fill%3D%27%238a8a8a%27%2F%3E%3C%2Fsvg%3E"); } .fweiter { position:absolute; right:.8rem; bottom:.5rem; color:#9a9a9a; font-size:1.7rem; line-height:1; pointer-events:none; text-shadow:0 0 10px rgba(150,150,150,.35); animation:pulsierenPanel 1.5s ease-in-out infinite; } @keyframes pulsierenPanel { 50% { transform:translateY(4px); opacity:.5; } } /* v20.10: Seiten-Wackeln (Türklingel — ersetzt den Blitz) */ @keyframes seitewackelt { 0%,100%{ transform:translateX(0); } 12%{ transform:translateX(-9px); } 26%{ transform:translateX(8px); } 40%{ transform:translateX(-6px); } 55%{ transform:translateX(5px); } 70%{ transform:translateX(-3px); } 85%{ transform:translateX(2px); } } .wackelt { animation:seitewackelt .55s ease-in-out; } @media (prefers-reduced-motion: reduce){ .wackelt { animation:none; } } /* v20.10: Wut-Barometer (Prolog S8 — ersetzt die Tassen-Wut) */ .wutfeld { display:flex; flex-direction:column; align-items:center; gap:.7rem; margin:.6rem 0; } .wutbar { position:relative; width:66px; height:230px; border:1px solid #555; background:#0b0b0b; overflow:hidden; touch-action:none; cursor:pointer; } .wutbar .wutfuell { position:absolute; left:0; right:0; bottom:0; height:0; background:#8f8f8f; } .wutbar .wutgrenze { position:absolute; left:0; right:0; top:14%; border-top:1px dashed #777; pointer-events:none; /* a: offen (eine Schwelle, die noch nicht gerissen ist) */ } .wutbar.geplatzt { animation:seitewackelt .5s ease-in-out; } .wutbar.geplatzt .wutfuell { background:#eee; } .wutknopftext { font-size:.62rem; letter-spacing:.14em; color:#888; text-align:center; } .zwischentitel { text-align:center; color:#888; letter-spacing:.22em; font-size:.8rem; padding:2.2rem 0; } .fentwurf { border:1px solid #333; background:#0c0c0c; padding:.6rem .8rem; margin:.4rem 0; color:#ccc; font-size:.85rem; line-height:1.7; min-height:2.4em; } .fteil { border-bottom:1px dotted #444; cursor:pointer; } /* Geräte-Konvention: dotted underline für Antippbares (wie .jhint) */ .fteil.markiert { background:#1d1d1d; color:#eee; } .fteil s, .fentwurf s { color:#666; } .fbalken { position:fixed; top:2.6rem; left:50%; transform:translateX(-50%); z-index:450; background:#080808; border:1px solid #3a3a3a; color:#777; font-size:.72rem; letter-spacing:.14em; padding:.4rem .9rem; text-transform:uppercase; max-width:92vw; text-align:center; } /* (.fbalken.tief entfernt — die ZW-S5-Druck-Regie läuft seit v1.1 als große .shgeraeusch-Einblendung, nicht mehr als zweiter Balken) */ /* ========================================================== ZW-S5 — DAS HANDY DER SCHWESTER (Schnüffeln + Rückbau-QTE) Ziele min. 64px; falsche Ziele ruckeln 100ms; kein Timer-Balken. ========================================================== */ .panelkopf .shzurueck { display:inline-block; min-width:44px; padding:.1rem .5rem .1rem .2rem; margin-right:.15rem; cursor:pointer; font-size:1.35rem; line-height:1; color:#9a9a9a; user-select:none; -webkit-user-select:none; } /* (.homebalken/.homegrid entfernt — v1.4, Autorin: der Home-Schritt ist gestrichen, Chat zu + Bildschirm aus reicht.) */ .powerkante { position:absolute; right:-9px; top:20%; width:18px; height:76px; border-radius:5px; background:#3a3a3a; border:1px solid #4a4a4a; /* v1.2: sichtbarer — „die Taste an der Kante" muss findbar sein */ cursor:pointer; z-index:3; } /* v1.2: das jeweils AKTIVE QTE-Ziel pulst (Präzedenz: k3s1c-Kappen) */ .dran { animation:shDran 1.5s ease-in-out infinite; } @keyframes shDran { 50% { filter:brightness(1.9); } } /* v1.3: die Schritt-Regie sitzt NEBEN dem Handy (der Balken über dem Panel war bei niedrigen Bildschirmen unsichtbar) — links, vertikal mittig; Plex, weil Regie-Stimme, nicht Gerät. Schmal: darunter. */ .shschritt { position:absolute; right:calc(100% + 1.1rem); top:50%; transform:translateY(-50%); width:8.5rem; text-align:right; color:#8a8a8a; font-size:calc(.72rem * var(--ts)); letter-spacing:.12em; text-transform:uppercase; font-family:'IBM Plex Sans', system-ui, sans-serif; line-height:1.65; pointer-events:none; } @media (max-width:700px){ .shschritt { right:auto; left:50%; top:100%; width:max-content; max-width:88vw; transform:translate(-50%, .5rem); text-align:center; } } .shdenk { align-self:center; text-align:center; color:#a8a8a8; font-style:italic; font-family:'IBM Plex Sans', system-ui, sans-serif; /* die Denkstimme bleibt Plex — sie ist nicht das Gerät */ font-size:calc(.85rem * var(--ts)); margin:.3rem 0; } #handy-panel.schwarz { background:#060606; border-color:#222; } #handy-panel.schwarz > * { visibility:hidden; } /* Display aus — die Statusleiste (::before) geht mit unter visibility? Nein: ::before hängt am Panel selbst */ #handy-panel.schwarz::before { opacity:0; } .ruckelt { animation:shruckeln .1s; } @keyframes shruckeln { 50% { transform:translateX(3px); } } .shreihe { display:flex; justify-content:center; align-items:flex-end; gap:2.4rem; padding:1rem 0; min-height:130px; } .handyplatz { width:64px; height:112px; border:1px dashed #4a4a4a; /* a: offen (erwartet das Handy — rastet solid ein) */ border-radius:10px; flex:0 0 auto; } .handyding { width:64px; height:112px; border-radius:10px; flex:0 0 auto; background:#141414; border:1px solid #2e2e2e; cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; transition:background .4s, border-color .4s, border-style .4s; } /* v1.1: aufgenommen — an seiner Stelle bleibt die gestrichelte Leerstelle (a: offen — sie erwartet das Handy zurück) */ .handyding.genommen, .handyding.leerstelle { background:transparent; border:1px dashed #4a4a4a; cursor:default; } .shgabel { width:96px; height:64px; cursor:pointer; } /* v1.1: die Geräusche aus dem Bad — große zentrale Einblendung über allem (Overlay UND Bühne), tippbar hindurch */ .shgeraeusch { position:fixed; inset:0; z-index:900; pointer-events:none; display:flex; align-items:center; justify-content:center; background:rgba(5,5,5,.55); opacity:0; transition:opacity .18s ease; } .shgeraeusch.da { opacity:1; } .shgeraeusch .txt { font-size:calc(1.2rem * var(--ts)); letter-spacing:.2em; text-transform:uppercase; color:#dedede; text-align:center; padding:0 1.2rem; } @media (prefers-reduced-motion: reduce){ .ruckelt { animation:none; } .shgeraeusch { transition:none; background:rgba(5,5,5,.4); } .dran { animation:none; filter:brightness(1.6); } /* statisch hell statt Puls */ } /* ========================================================== PROLOG-OPENER — „DREI ENTWÜRFE" (Spec 14.07.26) Gerätewelt: alles system-ui (erbt vom .panel), kein Plex. Die einzige Szene ohne Innenstimme. ========================================================== */ /* v3.1 — die Notizen-App, an die Chat-Optik angeglichen: gefüllte Karten (wie .chateintrag) mit Titel + Datum, dazu ein inertes Suchfeld — das Gerät liest sich jetzt eindeutig als „Notizen". */ .onotizliste { flex:1; overflow-y:auto; padding:.75rem .7rem; display:flex; flex-direction:column; gap:.45rem; } .osuche { /* rein optisch — iOS-Notizen-Signal, tot */ display:flex; align-items:center; gap:.45rem; margin:.1rem .1rem .5rem; padding:.42rem .65rem; background:#161616; border-radius:10px; color:#6a6a6a; font-size:calc(.8rem * var(--ts)); user-select:none; } .osuche svg { flex:0 0 auto; opacity:.9; } .onotiz { background:#141414; border:1px solid #1e1e1e; border-radius:12px; padding:.65rem .8rem; cursor:default; transition:background .2s, border-color .2s; } .onotiz .otit { /* die Titelzeile — eine Zeile, Rest mit … abgeschnitten */ display:block; color:#dadada; font-weight:500; font-size:calc(.9rem * var(--ts)); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .onotiz .odat { display:block; color:#6a6a6a; margin-top:.16rem; font-size:calc(.72rem * var(--ts)); font-variant-numeric:tabular-nums; } /* v2 ungenutzt: „+ Neue Notiz" ist raus — die Notiz „fabi" existiert seit Wochen. Klassen bleiben liegen. */ .onotiz.oneu { color:#ddd; cursor:pointer; animation:oNeuPuls 2.4s ease-in-out infinite; } @keyframes oNeuPuls { 50% { opacity:.55; } } /* die Bestandsnotiz „fabi": KEIN Puls, keine Hervorhebung — nur ein dezenter Hover als Tap-Affordanz (auf Touch unsichtbar). Das Wort trägt. */ .onotiz.ofabi { cursor:pointer; } .onotiz.ofabi:hover { border-color:#333; background:#181818; } /* Notiz-Detail: zentriertes Datum + fette Titelzeile „fabi" */ .odatum { text-align:center; font-size:calc(.7rem * var(--ts)); color:#5a5a5a; margin-bottom:.5rem; letter-spacing:.02em; } /* „14. januar" zündet erst in K2-S6 */ .otitel { color:#ededed; font-weight:600; font-size:calc(1.05rem * var(--ts)); line-height:1.25; margin-bottom:.1rem; } /* erste Notizzeile = Titel */ .oeditor { flex:1; padding:1.1rem 1.1rem; display:flex; flex-direction:column; gap:.85rem; overflow:hidden; transition:transform .3s ease, opacity .3s ease; } .oeditor.oweg { transform:scale(.94); opacity:0; } /* die Notiz schrumpft weg */ .oentwurf { position:relative; color:#ddd; border-radius:4px; font-size:calc(.92rem * var(--ts)); line-height:1.55; min-height:1.5em; transition:background .35s, box-shadow .35s; } /* OS-Textmarkierung: hinterlegter Balken + Griffe — zerfällt bei E1/E2 */ .oentwurf.markiert { background:#2c333a; box-shadow:0 0 0 2px #2c333a; } .oentwurf.markiert::before, .oentwurf.markiert::after { content:''; position:absolute; width:7px; height:7px; border-radius:50%; background:#8a9aa6; transition:opacity .35s; } .oentwurf.markiert::before { left:-5px; top:-4px; } .oentwurf.markiert::after { right:-5px; bottom:-4px; } .oentwurf.markiert.zerfaellt { background:transparent; box-shadow:none; } .oentwurf.markiert.zerfaellt::before, .oentwurf.markiert.zerfaellt::after { opacity:0; } .oentwurf.flash { background:#e9e9e9; color:#0a0a0a; } /* der Copy-Flash — kein Toast */ .opill { position:absolute; top:-2.3rem; left:50%; transform:translateX(-50%); background:#1f1f1f; border:1px solid #4a4a4a; border-radius:10px; color:#ddd; padding:.32rem .95rem; white-space:nowrap; cursor:pointer; font-size:calc(.8rem * var(--ts)); z-index:4; transition:opacity .35s ease; } .ocursor { display:inline-block; width:1.5px; height:1.05em; margin-left:1px; vertical-align:-2px; background:#ddd; animation:stroboCursor 1.05s steps(1) infinite; } .ocursor.stark { animation-duration:.45s; background:#fff; } /* Idle-Fallback, keine Regie-Zeile */ .ocursor.tot { animation:none; opacity:1; } /* der Beschluss */ .ochat { flex:1; display:flex; flex-direction:column; padding:.9rem; position:relative; overflow:hidden; } .oschatten { /* EINE angeschnittene, unlesbare Bubble-Silhouette im Dunkel */ position:absolute; top:-30px; left:.9rem; width:62%; height:66px; background:#141414; border-radius:16px; } .ofeld { margin-top:auto; position:relative; border:1px solid #2c2c2c; border-radius:14px; padding:.55rem .85rem; font-size:calc(.85rem * var(--ts)); cursor:default; transition:transform .15s ease, border-color .25s; user-select:none; -webkit-user-select:none; touch-action:manipulation; } .ofeld .oph { color:#666; } .ofeld.fokus { border-color:#4a4a4a; } .ofeld.hebt { transform:translateY(-1px); } .ohint { text-align:center; color:#666; margin-top:.55rem; font-size:calc(.78rem * var(--ts)); } /* v3 — der ‹ Notizen-Zurück-Button: „‹" per ::before (größer als das Wort), inert (dunkel, cursor default) bis zum Kopieren, dann .scharf (alles hellt gemeinsam auf, ganze Fläche klickbar). */ .ozurueck{ display:inline-flex; align-items:center; gap:.12rem; color:#4a4a4a; cursor:default; font-size:calc(.82rem * var(--ts)); letter-spacing:.02em; text-transform:none; user-select:none; -webkit-user-select:none; transition:color .25s; } .ozurueck::before{ content:'‹'; font-size:1.55em; line-height:1; } .ozurueck.scharf{ color:#cfcfcf; cursor:pointer; } /* v3 — Homescreen: 12 anonyme, tote Kacheln, kein Icon, kein Label. position:relative + overflow:hidden, damit das Banner (Vor-Slide oben) sauber geclippt wird. */ .ohome{ position:relative; overflow:hidden; flex:1; display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; padding:1.1rem; align-content:start; } .okachel{ aspect-ratio:1; background:#1c1c1c; border-radius:22%; } /* v3 — das Banner: fährt von OBEN ein, beide Zeilen voll lesbar (keine Maske — das Anfüttern ist der Punkt), bleibt bis Tap. */ .obanner{ position:absolute; top:.5rem; left:.5rem; right:.5rem; background:#1a1a1a; border:1px solid #333; border-radius:14px; padding:.7rem .9rem; cursor:pointer; transform:translateY(-140%); transition:transform .26s ease; z-index:3; box-shadow:0 12px 28px rgba(0,0,0,.55); } /* hängt über den Screen — Gewicht */ .obanner.da{ transform:translateY(0); } .ob-wer{ display:block; font-size:.7em; color:#888; margin-bottom:.28rem; letter-spacing:.1em; } .ob-z{ display:block; color:#ddd; font-size:calc(.82rem * var(--ts)); line-height:1.45; } /* .ob-txt = v2 ungenutzt (maskierter Einschlag-Text). Liegen lassen. */ .ob-txt{ display:block; color:#ddd; -webkit-mask-image:linear-gradient(90deg,#000 55%,transparent 96%); mask-image:linear-gradient(90deg,#000 55%,transparent 96%); } /* v3 — die Löschung im Chat: byte-gleicher Wortlaut zur K2-S6-Zeile, grau/kursiv wie dort (.nachricht .text: #555, italic). Wiedererkennen am Leuchtturm muss stimmen. */ .wgel{ color:#555; font-style:italic; font-size:calc(.85rem * var(--ts)); margin-top:2.9rem; /* unter die angeschnittene .oschatten-Silhouette — die Löschung muss lesbar sein */ padding:.2rem 0 .1rem; display:flex; align-items:baseline; gap:.5rem; } .wgelzeit{ font-style:normal; color:#3d3d3d; font-size:.72em; letter-spacing:.06em; font-variant-numeric:tabular-nums; margin-left:auto; } /* der Zerfall: das rieselt-Vokabular aus k3s9b, vorwärts zitiert */ .obst { display:inline-block; white-space:pre; transition:transform 1.6s ease-in, opacity 1.6s ease-in; } .obst.faellt { transform:translateY(140px); opacity:0; } .chatfuss button { white-space:normal; text-align:left; } /* FINALE — das Lichtermeer: die Menge als Partikelfeld (tausende Graupunkte über schwarzen Silhouetten), am Marteria-Anker gehen die Handylichter an — hunderte weiße Punkte. Weiß = Ereignis, hier zum einzigen Mal VIELE. Das Sternbild-Vokabular aus K3 kehrt als Menschenmeer zurück. */ #lichtermeerfeld { position:relative; width:100%; height:440px; border:1px solid #222; background:#0a0a0a; overflow:hidden; } #lichtermeerfeld canvas { position:absolute; inset:0; width:100%; height:100%; } #lichtzitat { position:absolute; left:50%; top:32%; transform:translateX(-50%); width:min(26rem, 90%); z-index:5; text-align:center; color:#ddd; font-style:italic; font-size:1rem; line-height:2.1; letter-spacing:.06em; text-shadow:0 0 8px #0a0a0a, 0 0 16px #0a0a0a; pointer-events:none; } #lichtzitat div { opacity:0; transition:opacity 1.4s; } #lichtzitat div.da { opacity:1; } /* K4-S7 „WARTEN" — ein Raum, drei Hotspots, eine Uhr. Kein Rätsel: die Uhr springt nur, wenn man etwas Sinnloses tut. */ #wartefeld { position:relative; width:100%; height:440px; border:1px solid #222; background:#0a0a0a; overflow:hidden; } #wartefeld > svg { position:absolute; inset:0; width:100%; height:100%; } /* v16.3: Uhr oben MITTIG, eine Stufe größer — sie ist die Hauptdarstellerin */ #warteuhr { position:absolute; top:.9rem; left:50%; transform:translateX(-50%); z-index:5; color:#777; font-size:1rem; letter-spacing:.14em; font-variant-numeric:tabular-nums; pointer-events:none; } /* Objektreihe statt Raum-SVG: KÜHLSCHRANK · PFLANZE · HANDY · ZELT. Mobil bricht die Reihe 2×2 um, Reihenfolge bleibt. */ #warteobjekte { position:absolute; inset:3.2rem 0 0; display:flex; flex-wrap:wrap; gap:1.4rem 2.2rem; justify-content:center; align-content:center; align-items:flex-start; padding:0 1rem; } .wobjekt { display:flex; flex-direction:column; align-items:center; gap:.35rem; width:clamp(120px, 22vw, 160px); text-align:center; cursor:pointer; } .wobjekt .objektbild { flex-shrink:0; } /* die stille Zeile unterm Portrait: Optik wie .ich — Plex, kein Papier */ .objektgedanke { color:#a8a8a8; font-style:italic; font-size:.68rem; line-height:1.4; font-family:'IBM Plex Sans', Tahoma, Geneva, sans-serif; white-space:nowrap; } .wobjekt.ruckt { animation:belegtPuls .28s; } /* der Sack ruckt 3 px */ /* ---- Zeltaufbau v2: der echte Struggle in vier Phasen ---- */ .stangenzeile { position:absolute; height:26px; border-bottom:1px dashed #3a3a3a; /* a: offen (erwartet die Stange) */ cursor:pointer; } .segment { position:absolute; width:44px; height:5px; background:#8a8a8a; border-radius:2px; cursor:pointer; transition:left .3s, top .3s, transform .3s; } .segment.markiert i { position:absolute; top:-2px; width:3px; height:9px; background:#ddd; } .segment.markiert i:first-child { left:8px; } .segment.markiert i:last-child { right:8px; } .segment.gewaehlt { outline:1px solid #ddd; outline-offset:3px; } .segment.sitzt { background:#bbb; cursor:default; } .segment.fehl { animation:fehlklack .32s; } @keyframes fehlklack { 25% { transform:translateX(4px); } 65% { transform:translateX(-4px); } } .zeltsvg .kanal { stroke:#333; stroke-width:1; stroke-dasharray:4 5; fill:none; } .zeltsvg .stangenlinie { stroke:#bbb; stroke-width:3; stroke-linecap:round; } .zeltsvg .stangenlinie.markiert { stroke:#ddd; } .zeltsvg .griffzone { stroke:transparent; stroke-width:22; pointer-events:stroke; cursor:grab; } .zeltsvg .oese { fill:#0a0a0a; stroke:#555; stroke-width:1.6; cursor:pointer; } .zeltsvg .oese.gesetzt { fill:#2a2a2a; stroke:#ccc; } .zeltsvg .oese.blinkt { animation:oeseblink .8s ease-in-out infinite; } @keyframes oeseblink { 50% { stroke:#999; fill:#1a1a1a; } } .zeltsvg .knie { pointer-events:none; } .zeltsvg .knie * { stroke:#ddd; fill:none; stroke-width:1.6; } .zeltsvg.schief .kuppelgruppe { transform:skewX(-5deg); transform-origin:50% 60%; } .ankerkarton { position:absolute; width:96px; padding:.4rem .3rem; border:1px solid #3a3a3a; background:#0d0d0d; text-align:center; cursor:grab; touch-action:none; z-index:6; font-size:.55rem; letter-spacing:.1em; color:#999; user-select:none; -webkit-user-select:none; transition:box-shadow .2s; } .ankerkarton.rutscht { transition:left 1.4s ease-in, top 1.4s ease-in; } .ankerkarton .mini-edding { font-family:'Caveat', cursive; font-size:.82rem; letter-spacing:0; color:#999; display:block; } .ankerkarton .mini-sticker { font-size:.5rem; letter-spacing:.2em; padding:.05rem .3rem; color:#666; display:inline-block; margin-top:.12rem; transform:rotate(-1.5deg); } /* randlos wie .sticker (geteiltes Asset) */ .ankerkarton.steht { pointer-events:none; } /* stehen von Szenenbeginn an im Bild, stumm bis Phase 4 */ .ankerkarton.hebt { animation:kartonheb .32s; } /* v4: Anwiegen — kurz anheben */ @keyframes kartonheb { 40% { transform:translateY(-9px); } } /* ---- Zeltaufbau v3: Anleitung, Ghost-Preview, Knien, Hilfe ---- */ .anleitIcon { position:absolute; top:.7rem; left:.7rem; z-index:7; width:30px; height:38px; cursor:pointer; } .anleitIcon:hover svg { stroke:#ccc; } .anleitIcon.blinkt { animation:anleitblink .8s; } @keyframes anleitblink { 20%, 60% { opacity:.15; } 40%, 100% { opacity:1; } } #anleitBlatt { position:absolute; inset:10px; z-index:9; background:#0d0d0d; border:1px solid #3a3a3a; padding:.9rem 1.1rem; overflow:auto; cursor:pointer; display:none; } #anleitBlatt.offen { display:block; } .anleitKopf { color:#999; font-size:.68rem; letter-spacing:.18em; margin-bottom:.6rem; } .anleitZeile { color:#888; font-size:.66rem; letter-spacing:.08em; line-height:2; } .anleitWisch { display:inline-block; height:.6em; background:#242424; border-radius:2px; vertical-align:baseline; } .anleitFleck { position:absolute; border-radius:50%; background:radial-gradient(circle, rgba(170,170,170,.08), transparent 68%); pointer-events:none; } .zelthilfe { position:absolute; right:.7rem; bottom:.7rem; z-index:7; width:34px; height:34px; border-radius:50%; padding:0; font-size:.85rem; opacity:.7; white-space:nowrap; } .zelthilfe.breit { width:auto; border-radius:2px; padding:.3rem .7rem; font-size:.6rem; letter-spacing:.14em; opacity:1; } .zelthilfe.pulst { animation:hilfepuls 1.6s ease-in-out infinite; opacity:1; } @keyframes hilfepuls { 50% { transform:scale(1.18); border-color:#bbb; } } /* ---- Zeltaufbau final: Ziel-Banner, Kleinkram-Kiste, Bruch ---- */ .zielbanner { position:absolute; top:2.6rem; left:50%; transform:translateX(-50%); z-index:6; border:1px solid #333; background:#0c0c0c; color:#999; font-size:.62rem; letter-spacing:.2em; padding:.32rem .9rem; white-space:nowrap; pointer-events:none; } .zielbanner.fehl { animation:fehlklack .32s; border-color:#777; } .zielbanner.geschafft { border-color:#666; color:#ddd; } .kistenpanel { position:absolute; z-index:8; overflow:visible; border:1px solid #3a3a3a; background:#0c0c0c; } .kitem { position:absolute; z-index:9; cursor:grab; touch-action:none; display:flex; flex-direction:column; align-items:center; gap:.15rem; user-select:none; -webkit-user-select:none; } .kitem span { font-size:.48rem; letter-spacing:.12em; color:#777; } .kitem svg { display:block; } .segment.gebrochen { transform:rotate(6deg) translateY(3px); background:#777; } .anleitgross { position:absolute; z-index:7; cursor:pointer; animation:anleitpuls 2.2s ease-in-out infinite; } @keyframes anleitpuls { 50% { opacity:.55; } } .zoomkasten { position:absolute; z-index:9; cursor:pointer; border:1px solid #555; background:#0d0d0d; display:flex; align-items:center; justify-content:center; } /* ---- Einstell-Screen (nach dem Titel): Schriftproben + Drehräder ---- */ /* Einstell-Screen: Vorschau links, Regler rechts — NICHT umbrechen, sonst springt die Regler-Spalte beim Verkleinern der Schrift unter die Vorschau. Erst auf echten Schmal-Viewports (Handy) stapeln. */ .einstellzwei { display:flex; gap:2rem; align-items:flex-start; margin-top:.4rem; } .einstellzwei > .probenfeld { flex:1 1 0; min-width:0; } .einstellzwei > #einstellregler { flex:0 0 auto; } @media (max-width:600px) { .einstellzwei { flex-wrap:wrap; } .einstellzwei > .probenfeld, .einstellzwei > #einstellregler { flex:1 1 100%; } } .probenfeld { border:1px solid #2a2a2a; padding:1rem 1.2rem; display:flex; flex-direction:column; gap:.8rem; } .probe .plabel { font-size:.5rem; letter-spacing:.2em; color:#666; display:block; margin-bottom:.2rem; } .einstellzeile { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; } .einstellrad { width:64px; height:64px; cursor:grab; touch-action:none; flex-shrink:0; } .einstellrad:hover circle { stroke-opacity:1; } .eskala { position:relative; width:170px; height:10px; background:#161616; border:1px solid #333; } .eskala .schoen { position:absolute; top:0; bottom:0; background:#3a3a3a; } .eskala .marker { position:absolute; top:-3px; width:2px; height:16px; background:#ddd; } .ewert { font-size:.7rem; color:#999; min-width:3.4rem; font-variant-numeric:tabular-nums; } .ehinweis { font-size:.56rem; letter-spacing:.14em; color:#666; } .stufenreihe { display:flex; align-items:flex-end; gap:.4rem; flex-wrap:wrap; } .stufenreihe .stufenA { padding:.28rem .55rem; line-height:1; color:#999; border-bottom-width:2px; } .stufenreihe .stufenA.schoen { border-bottom-color:#888; } .stufenreihe .stufenA.aktiv { border-color:#ddd; color:#ddd; } .segment.ghost { opacity:.5; background:transparent; outline:1px solid #999; pointer-events:none; transition:none; } .segment.ghost.passtnicht { outline:1px dashed #4a4a4a; opacity:.3; } /* a: offen (unplatzierte Vorschau) */ .segment.ghost.passtnicht i { opacity:.3; } .knienbtn { position:absolute; z-index:7; pointer-events:auto; font-size:.55rem; letter-spacing:.12em; padding:.25rem .5rem; } .knienbtn.aktiv { border-color:#ddd; color:#ddd; } /* Zelt-Aufbau: Stangen, die fast von selbst einschnappen */ .stange { position:absolute; width:92px; height:3px; background:#999; border-radius:2px; cursor:grab; touch-action:none; z-index:6; } .stange.sitzt { background:#ddd; cursor:default; transition:left .22s ease-out, top .22s ease-out, transform .22s ease-out; animation:stangensnapp .28s; } @keyframes stangensnapp { 55% { height:5px; } } /* Zelt-Innen: das Deckenlicht wandert durch den Stoff (Nachmittag -> Abend). Die Lichtschicht ist ÜBERGROSS (inset:-70%) — beim Wandern schiebt sich nie eine Element-Kante ins Bild, der Fleck bleibt rund. */ #zeltlicht { position:absolute; inset:-70%; pointer-events:none; background:radial-gradient(circle at 38% 36%, rgba(210,210,210,.30), transparent 20%); animation:lichtwandert 10s linear forwards; } @keyframes lichtwandert { 0% { opacity:1; transform:translate(0,0); } 100% { opacity:.30; transform:translate(15%, 10%); } } @media (prefers-reduced-motion: reduce){ #zeltlicht { animation:none; opacity:.5; transform:translate(8%,5%); } } /* Handy: Running Order + Wetter */ .wtabs { display:flex; border-bottom:1px solid #2a2a2a; } .wtabs button { flex:1; border:none; border-right:1px solid #2a2a2a; padding:.55rem; font-size:.66rem; letter-spacing:.12em; color:#666; background:#0a0a0a; } .wtabs button:last-child { border-right:none; } .wtabs button.an { color:#ddd; background:#111; } .wro-tag { color:#666; font-size:.66rem; letter-spacing:.2em; padding:.5rem 0 .6rem; text-align:center; } .wro-zeile { display:flex; align-items:center; gap:.8rem; padding:.45rem .4rem; border-top:1px solid #1c1c1c; font-variant-numeric:tabular-nums; } .wro-zeile span:first-child { color:#555; font-size:.72rem; flex-shrink:0; } .wro-zeile b { color:#ddd; letter-spacing:.14em; font-weight:500; } .wbalken { display:inline-block; height:8px; background:#2e2e2e; border-radius:2px; } .wspinner { width:22px; height:22px; margin:1rem auto; border:2px solid #333; border-top-color:#999; border-radius:50%; animation:wdreh .8s linear infinite; } @keyframes wdreh { to { transform:rotate(360deg); } } .wwetter { text-align:center; padding:2.2rem 0; color:#bbb; letter-spacing:.1em; } .wwetter .grad { display:block; font-size:2.6rem; color:#ddd; font-variant-numeric:tabular-nums; padding:.4rem 0; } /* Einzelzeichen als Bühnenbild: eine Glyphe, groß und allein. (♥ Herzchen · ★ Späti · ✓ Finale) */ .glyphe { text-align:center; font-size:3.2rem; line-height:1.25; color:#ddd; padding:1rem 0; user-select:none; -webkit-user-select:none; } .glyphe .unter { display:block; font-size:.8rem; letter-spacing:.3em; color:#777; padding-top:.2rem; } /* Blitz */ #blitz { position:fixed; inset:0; background:#fff; opacity:0; pointer-events:none; z-index:800; } #blitz.an { opacity:1; } #blitz.aus { opacity:0; transition:opacity .7s; } /* ========================================================== K3-S7 → K3-S8 „PAPIER → BETTWÄSCHE" (Art-Pass K3) Phase 1: das Papier wächst in einem eigenen fixed-Layer über der Bühne. Phase 2: der einzige Vollscreen-Weißmoment außerhalb der Blitze (Weiß = Ereignis — und das hier ist eines). Phase 3: die Knicklinien werden zu Lakenfalten aufgeweicht (CSS-Transitions, kein Frame-Loop). Phase 4: die einzige helle Szene des Spiels. ========================================================== */ #papierlayer { position:fixed; inset:0; z-index:380; /* über Bühne, unter Topbar/Blitz */ display:flex; align-items:center; justify-content:center; pointer-events:none; /* nur der Bogen selbst fängt Züge */ } /* K3-S7: die Zug-Regie schwebt ÜBER dem wachsenden Papier (sonst verdeckt der Oktopus seine eigenen Prompts). z-480: über #papierlayer(380), unter #topbar(500)/#blitz(800) → der Weiß-Fill legt sich sauber darüber. */ #papierregie { position:fixed; top:3rem; left:50%; transform:translateX(-50%); /* top wird per JS unter die Topbar gesetzt */ max-width:34rem; width:calc(100% - 2.4rem); text-align:center; z-index:480; pointer-events:none; transition:opacity .4s ease; } /* Halo: hält die Regie lesbar über den (fahlen) Faltlinien des Papiers */ #papierregie .z { margin:0; text-shadow:0 0 6px #080808, 0 0 11px #080808; } #lakenlayer { position:fixed; inset:0; pointer-events:none; } #lakenlayer svg { position:absolute; inset:0; width:100%; height:100%; } #lakenlayer .falte { fill:none; stroke-linecap:round; transition:stroke-width 1.4s ease, opacity 1.4s ease, stroke 1.4s ease, filter 1.4s ease; } /* der Lichtspalt aus k3s8 l1: schwere Vorhänge, ein heller Streifen */ #lakenlayer .lichtspalt { position:absolute; top:0; bottom:0; left:60%; width:14%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent); opacity:0; transition:opacity 1.4s ease; } #lakenlayer .lichtspalt.da { opacity:1; } /* die helle Welt: Grund #ececec (nicht #fff — Weiß bleibt Ereignis), Textregister invertiert, Wahl-Buttons invertiert */ body.hotelhell { background:#ececec; } body.hotelhell #topbar { background:linear-gradient(#ececec 60%, transparent); } body.hotelhell #restart, body.hotelhell #testleiste button, body.hotelhell #testleiste .testlabel { background:#ececec; border-color:#b8b8b8; color:#555; } body.hotelhell .z.du { color:#1a1a1a; } body.hotelhell .z.ich { color:#4a4a4a; } body.hotelhell .z.regie, body.hotelhell .z.regielang { color:#6a6a6a; } body.hotelhell .wahlreihe button { background:#f4f4f4; border:1px solid #b8b8b8; color:#222; } body.hotelhell .wahlreihe button:hover { border-color:#7a7a7a; color:#000; } body.hotelhell #klickhinweis { color:#555; text-shadow:none; } /* Titelkarten */ .titelblock { text-align:center; display:flex; flex-direction:column; gap:1.4rem; align-items:center; padding-top:16vh; } .titelblock h1 { font-size:1.7rem; font-weight:normal; letter-spacing:.3em; color:#e5e5e5; } .titelblock .unter { color:#666; letter-spacing:.4em; font-size:.8rem; } /* Debug */ #debug { display:none; position:fixed; left:.6rem; bottom:.6rem; font-size:.66rem; color:#888; font-family:monospace; white-space:pre; z-index:999; text-align:left; background:rgba(0,0,0,.85); padding:.4rem; } #debug.an { display:block; } /* ========================================================== K3-S9 „STROBO" — Die Nacht in Blitzen (Spec v2) Eigenes Overlay, unabhängig vom Kamera-#blitz. Monochrom: Blitz #f2f2f2, reines Weiß #fff nur B33–35, Inhalte schwarz. z-index 480: über #buehne(350)/#blitz(300), UNTER #topbar(500), damit Testleiste + Restart erreichbar bleiben (QA#17). ========================================================== */ #stroboszene { position:fixed; inset:0; z-index:480; background:#050505; overflow:hidden; cursor:pointer; user-select:none; -webkit-user-select:none; touch-action:manipulation; -webkit-tap-highlight-color:transparent; } /* Basspuls: radiale Vignette, ~120 bpm, rein visuell */ #strobo-puls { position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at center, transparent 42%, #000 100%); opacity:.04; animation:stroboPuls 500ms ease-in-out infinite; } @keyframes stroboPuls { 0%,100%{opacity:var(--pulsmin,.04);} 50%{opacity:var(--pulsmax,.09);} } /* Blitzfläche + Caption. Fläche schaltet hart (steps(1) via JS), Caption bleibt als Negativ-Nachbild ≥600 ms auf dem Dunkel stehen. */ #strobo-blitz { position:absolute; inset:0; pointer-events:none; display:flex; align-items:center; justify-content:center; } #strobo-blitz .flaeche { position:absolute; inset:0; background:#f2f2f2; opacity:0; } #strobo-blitz .caption { position:relative; font-size:calc(1.2rem * var(--ts)); letter-spacing:.16em; text-transform:uppercase; color:#0a0a0a; text-align:center; padding:0 1.4rem; max-width:90%; opacity:0; } /* Frage-Blitz (B19): gehaltene Fläche, große Plex-Schrift, schwarz */ #strobo-blitz.frage .caption { font-family:'IBM Plex Sans', system-ui, sans-serif; font-size:calc(1.6rem * var(--ts)); font-weight:500; letter-spacing:normal; text-transform:none; } /* Zeilen: unteres Drittel, Feed-Spaltenbreite, 150 ms Fade, Klassen analog Feed (ich/du/regie). Basis heller, weil #050505. */ #strobo-zeile { position:absolute; left:50%; bottom:20%; transform:translateX(-50%); width:min(34rem, 86%); text-align:left; pointer-events:none; } #strobo-zeile .sz { line-height:1.7; font-size:calc(.98rem * var(--ts)); opacity:0; transition:opacity .15s ease-out; } #strobo-zeile .sz.da { opacity:1; } #strobo-zeile .ich { color:#b2b2b2; font-style:italic; } #strobo-zeile .du { color:#e9e9e9; } #strobo-zeile .regie { color:#8c8c8c; font-size:calc(.82rem * var(--ts)); letter-spacing:.14em; text-transform:uppercase; } #strobo-zeile .regiek { color:#7c7c7c; font-size:calc(.72rem * var(--ts)); letter-spacing:.14em; text-transform:uppercase; } /* Wahl (B08): zwei dunkle Tap-Ziele im Dunkel */ #strobo-zeile .strobowahl { display:flex; flex-direction:column; gap:.75rem; margin-top:.3rem; pointer-events:auto; } #strobo-zeile .strobowahl button { background:#0d0d0d; border:1px solid #262626; color:#cfcfcf; padding:.7rem 1rem; text-align:left; cursor:pointer; font-family:'IBM Plex Sans', system-ui, sans-serif; font-size:calc(.95rem * var(--ts)); } #strobo-zeile .strobowahl button:hover { border-color:#4a4a4a; background:#111; } /* (Das Handylicht-Overlay #strobo-handy ist mit v5 GESTORBEN — l46 läuft als Geräte-Zeile im Film, der Flip ist Effekt ⑤, siehe .filmgeraet.) */ @keyframes stroboCursor { 0%,50%{opacity:1;} 50.01%,100%{opacity:0;} } /* Intrusionen (B29/B32): Fabi-Fragment, um 180° gedreht, angeschnitten */ #strobo-intrusion { position:absolute; inset:0; pointer-events:none; display:flex; align-items:center; justify-content:center; opacity:0; overflow:hidden; } #strobo-intrusion .frag { transform:rotate(180deg); font-family:system-ui, -apple-system, sans-serif; color:#c8d4da; background:#0e1a1f; border-radius:16px; padding:.5rem .8rem; font-size:calc(.85rem * var(--ts)); white-space:nowrap; overflow:hidden; } #strobo-intrusion.klein .frag { transform:rotate(180deg) scale(.6); opacity:.7; } /* Reduzierte Blitze (§7): kein Hartschnitt, weichere Fläche */ #stroboszene.reduziert #strobo-blitz .flaeche { background:#d8d8d8; transition:opacity .3s ease; } /* v4 „Der Abend nimmt den Takt": Halten friert den Moment ein — Puls pausiert, die festgehaltene Zeile schärft sich. Keine Bewegung, Reduziert-tauglich per se. (v5: nur noch Phase 1 — das Halterecht endet an der Bar-Tür.) */ #stroboszene.haelt #strobo-puls { animation-play-state:paused; } #stroboszene.haelt #strobo-zeile .sz { filter:brightness(1.18); transition:filter .25s; } /* ▸-Hinweis in Entscheidungs-Inseln (generisch — k3s1c-Griff, k3s9b-Karten; STROBO selbst braucht ihn seit v5 nicht mehr: die Lena-Wahl hat sichtbare Ziele, und nach l25 gibt es keinen Input mehr) */ .inselhinweis { margin-top:.9rem; text-align:center; color:#9a9a9a; font-size:1.25rem; pointer-events:none; animation:pulsierenPanel 1.6s ease-in-out infinite; } /* ========================================================== K3-S9 Phase 2 — DER FILM (Spec v5 „Der Heimweg-Film") Übergang bei l25: der Zeilencontainer fährt einmalig in die Bildmitte (Kamerafahrt 1200ms = sichtbarer Registerwechsel) und der Rest der Nacht läuft als zentrierter Lesefilm — kein Blitz, kein Puls, kein Input. Film-Register: aufrecht (Kursiv gehört dem Kipp, Effekt ④). Effekt-Gesetze: max. EIN Effekt pro Zeile · Form ist Inhalt · die meisten Zeilen bleiben nackt. Budget: sechs (l30/l33/l37/l39/l46/l56). ========================================================== */ #stroboszene.film #strobo-zeile { bottom:50%; transform:translate(-50%, 50%); transition:bottom 1.2s ease, transform 1.2s ease; text-align:center; } #stroboszene.film.reduziert #strobo-zeile { transition:none; } /* harter Positionswechsel */ #stroboszene.film #strobo-zeile .sz { transition:opacity .25s ease; } /* Fade 250 (Film-Takt) */ #stroboszene.film #strobo-zeile .ich { font-style:normal; } /* Insert-Karten (l30/l32/l40/l52): kleine CAPS-Karten, gesperrt, zentriert — die Zwischentitel des Films. Solid = entschieden. */ #stroboszene.film .sz.insert { display:block; width:max-content; max-width:100%; margin:0 auto; padding:.45rem .95rem; border:1px solid #262626; font-size:calc(.85rem * var(--ts)); letter-spacing:.22em; text-transform:uppercase; color:#c9c9c9; } /* ② Jetzt-Aufbau: die Schläge wachsen einzeln nach */ #stroboszene.film .jschlag { opacity:0; transition:opacity .2s ease; } #stroboszene.film .jschlag.da { opacity:1; } /* ③ Die Frage: Wort für Wort, 1.3×, Gewicht 500 — dann atmet sie */ #stroboszene.film .sz.frage { font-size:calc(1.3rem * var(--ts)); font-weight:500; color:#e9e9e9; } #stroboszene.film .sz.frage .fwort { opacity:0; transition:opacity .2s ease; } #stroboszene.film .sz.frage .fwort.da { opacity:1; } #stroboszene.film .sz.frage.atmet { animation:frageAtmen 2s ease-in-out infinite; } @keyframes frageAtmen { 0%,100%{opacity:1;} 50%{opacity:.86;} } /* ④ Kursiv-Kipp: ein Wort dreht die Stimme nach innen */ #stroboszene.film .kipp.an { font-style:italic; } /* Nachschläge (l35 „Wirklich.", l56-Rest): reines Timing */ #stroboszene.film .nachschlag { opacity:0; transition:opacity .25s ease; } #stroboszene.film .nachschlag.da { opacity:1; } /* ⑥ Live-Durchstreichen: der Strich zieht sich in 400ms durch „Sonst." */ #stroboszene.film .streich { position:relative; white-space:nowrap; } #stroboszene.film .streich::after { content:''; position:absolute; left:0; top:.58em; height:1px; width:0; background:currentColor; } #stroboszene.film .streich.durch::after { width:100%; transition:width .4s linear; } #stroboszene.film .streich.sofort::after { transition:none; } /* reduziert: steht sofort */ /* ⑤ Geräte-Zeile + Flip (l46–l48, l50): die EINZIGE Farbe des Films (Walblau = Fabi live). Der Flip kippt um die X-Achse und bleibt als gedimmte, spiegelverkehrte Rückseite liegen — Farbe raus. */ #stroboszene.film .filmgeraet { display:flex; flex-direction:column; align-items:center; gap:.55rem; } #stroboszene.film .gflip { perspective:600px; } #stroboszene.film .gzeile { font-family:system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color:#c8d4da; background:#0e1a1f; border-radius:16px; padding:.5rem .85rem; font-size:calc(.85rem * var(--ts)); filter:drop-shadow(0 0 18px rgba(120,150,170,.25)); /* das Display ist das einzige Licht */ transition:transform .6s ease, color .6s, background .6s, filter .6s; } #stroboszene.film .gzeile.geflippt { transform:rotateX(180deg); /* „Display nach unten" als Typografie */ color:#1a1a1a; background:#101010; filter:none; } #stroboszene.film .gzeile.ohnedreh { transition:color .6s, background .6s, filter .6s; transform:none; } /* reduziert: Crossfade */ #stroboszene.film .gantwort { font-family:system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color:#6a6a6a; font-size:calc(.78rem * var(--ts)); opacity:0; transition:opacity .25s ease; } #stroboszene.film .gantwort.an { opacity:1; } #stroboszene.film .gantwort .gcursor { display:inline-block; width:1px; height:1em; margin-left:2px; vertical-align:-2px; background:#8aa2ad; opacity:0; } #stroboszene.film .gantwort.an .gcursor { animation:stroboCursor 1.05s steps(1) 2; /* blinkt zweimal und stirbt */ } #stroboszene.film .gregie { color:#7c7c7c; font-size:calc(.72rem * var(--ts)); letter-spacing:.14em; text-transform:uppercase; opacity:0; transition:opacity .25s ease; } #stroboszene.film .gregie.an { opacity:1; } #stroboszene.film .gso { font-size:calc(.86rem * var(--ts)); color:#9a9a9a; /* l50 — leise */ opacity:0; transition:opacity .25s ease; } #stroboszene.film .gso.an { opacity:1; } /* ========================================================== K3-S9b „DIE ZUGEDECKTE SEITE" — Kachel-Audit (Spec v1) Feed-basiert. Matte, TOTE Kacheln — kein Papierkorn, kein Falz (G3). Eine Seite dreht sich auf (gelebt), die andere bleibt für immer zu. ========================================================== */ .kachelpaar { display:flex; gap:.9rem; justify-content:center; align-items:stretch; perspective:1100px; margin:.6rem auto; width:min(34rem, 94%); transform-origin:center; transition:transform .6s ease-in-out, opacity .6s ease-in-out; } .kachel { flex:1 1 0; min-height:6.4rem; box-sizing:border-box; border-radius:2px; /* minimal — nichts Karte-aus-Papier (G3) */ } .kachel.dunkel { background:#161616; border:1px solid #242424; transition:transform .28s ease-out; } /* gelebte Seite: Deckel-Flip — Vorderseite (kvorder) IM FLUSS gibt die Höhe, Rückseite (krueck) liegt als absoluter Deckel darüber. */ .kachel.gelebt { position:relative; transform-style:preserve-3d; transition:transform .56s cubic-bezier(.4,0,.2,1); /* trocken, kein Bounce */ transform:rotateY(180deg); } .kachel.gelebt.auf { transform:rotateY(0deg); } .kachel.gelebt .kvorder { min-height:6.4rem; box-sizing:border-box; padding:.9rem 1rem; display:flex; flex-direction:column; justify-content:center; background:#e9e9e9; border:1px solid #cfcfcf; border-radius:2px; backface-visibility:hidden; -webkit-backface-visibility:hidden; } .kachel.gelebt .krueck { position:absolute; inset:0; border-radius:2px; background:#161616; border:1px solid #242424; transform:rotateY(180deg); backface-visibility:hidden; -webkit-backface-visibility:hidden; } .kacheltext { margin:0; color:#161616; font-size:calc(.88rem * var(--ts)); line-height:1.45; font-style:normal; } /* +1pt (Autorin) */ /* Stempel: Behördenstimme — Versalien, gerahmt, leicht verdreht, Knall. v3.1 „Echte Stempel-Tinte" (Autorin): der Abdruck ist von Hand geknallt — minimal versetzte Doppelkante, Rahmen nicht ganz gerade, und die Tinte deckt nicht überall (::after-Papierfraß in der Papierfarbe). */ .stempel { position:relative; align-self:flex-start; margin-top:.7rem; border:2px solid #1a1a1a; color:#1a1a1a; padding:.2rem .5rem; text-transform:uppercase; font-weight:600; font-size:calc(.76rem * var(--ts)); letter-spacing:.1em; /* +2pt ggü. Ausgangs-.6rem (Autorin, in zwei Schritten): Textur fraß die Lesbarkeit */ text-shadow:.7px .5px 0 rgba(26,26,26,.28); border-radius:2px 5px 3px 6px / 5px 2px 6px 3px; transform:rotate(-2deg) scale(1.4); opacity:0; } .stempel::after { content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit; background: radial-gradient(ellipse 60% 90% at 72% 78%, rgba(233,233,233,.34), transparent 60%), repeating-radial-gradient(ellipse 130% 100% at 28% 18%, transparent 0 3px, rgba(233,233,233,.12) 3px 4px, transparent 4px 7px); } .stempel.knall { transform:rotate(-2deg) scale(1); opacity:1; transition:transform .12s cubic-bezier(.2,1.4,.4,1), opacity .12s; } /* ruhig-Pfad (v3): reiner Opacity-Fade 120ms statt Scale — alle Stempel inkl. l33 */ .stempel.ruhigst { transform:rotate(-2deg) scale(1); } /* v3 — DAS VERBLASSEN: alles außer den Stempeln geht (Beat 12) */ .kachelpaar.verblasst { pointer-events:none; } .szeneVerblasst { opacity:0; transition:opacity 1.2s ease; } /* Die Stempelspalte: der Kontoauszug fremder Entscheidungen. Jeder Stempel behält ein Stück Kachel-Papier als Grund — dunkle Tinte auf der dunklen Bühne wäre sonst unlesbar. */ .stempelspalte { display:flex; flex-direction:column; gap:.4rem; align-items:center; margin:.8rem 0; padding:.2rem 0; /* mittig (Autorin) — linksbündig war „an den Rand gedrängt" */ } /* v3.1 „Hingeworfen gestapelt" (Autorin): jeder Zettel mit eigenem Seitversatz/Drehung/Größe (inline aus game.js) + Tiefe — als hätte jemand sie einzeln auf einen Tisch geknallt, nicht als Liste gesetzt. */ .stempel.inspalte { position:static; margin:0; background:#e9e9e9; align-self:center; /* mittig — die Basisregel sagt flex-start */ box-shadow:0 2px 9px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.65); transition:none; /* steht — kein Knall-Erbe */ } /* v3 — MIR auf der Zeile (l33): der einzige Stempel außerhalb einer Kachel. Gleiche Behördenoptik, aber helle Tinte direkt auf der Bühne — er überstempelt den Satz teilweise, der Satz bleibt lesbar. */ .z.ich.kippsatz { position:relative; } /* v3.2 (Autorin): weißes Papier wie alle anderen Stempel (dunkle Tinte, kein transparenter Grund), und EINZEILIG — nie umbrechen. Zentriert über dem Satz; translateX muss auch in .knall mit (sonst springt der Knall). */ .stempel.aufzeile { position:absolute; left:50%; top:-.6rem; margin:0; background:#e9e9e9; white-space:nowrap; box-shadow:0 2px 9px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.65); transform:translateX(-50%) rotate(-2deg) scale(1.4); } .stempel.aufzeile.knall { transform:translateX(-50%) rotate(-2deg) scale(1); } /* zugedeckte Kachel zerren: Ecke hebt sich 2mm/3°, fällt hart zurück — vergeblich */ .kachel.kzerr { transform:perspective(400px) rotateX(3deg) translateY(-2px); } /* Finale-Paar: beide zu, beschriftet (lowercase) — v2: WEISS wie die gelebten Kacheln (diese Entscheidung ist Gegenwart), kein Stempel */ .kachel.finhell { background:#e9e9e9; border:1px solid #cfcfcf; transition:transform .28s ease-out; } .kachelpaar.finale .kachel.beschriftet { display:flex; align-items:center; justify-content:center; } .fintext { color:#4a4a4a; font-size:calc(.9rem * var(--ts)); letter-spacing:.02em; } .finbst { display:inline-block; transition:transform 3s ease-in, opacity 3s ease-in; } .finbst.rieselt { transform:translateY(130px); opacity:0; } /* Buchstaben rieseln ab */ .kachelpaar.finale.zerfall .kachel { filter:blur(7px); opacity:0; transition:filter 1.5s ease-in, opacity 1.5s ease-in; /* kein Aufdecken */ } /* Kippsatz: freistehend, mittig — bleibt stehen und trägt am Ende den MIR-Stempel (.aufzeile). (.z.ich.kaputt entfernt — l31 ist v3-gestrichen.) */ .z.ich.kippsatz { text-align:center; font-size:calc(1.05rem * var(--ts)); color:#c8c8c8; font-style:italic; margin:1.4rem auto; max-width:32rem; } /* prefers-reduced-motion: Flip → Deckel-Fade, Pochen → Opacity, Rieseln → Ausblenden */ .kachel.gelebt.ruhig { transform:none; transition:none; transform-style:flat; } .kachel.gelebt.ruhig .kvorder { backface-visibility:visible; } .kachel.gelebt.ruhig .krueck { transform:none; opacity:1; transition:opacity .4s; } .kachel.gelebt.ruhig.auf .krueck { opacity:0; } /* Deckel fadet weg → gelebte Seite sichtbar */