/* ==================================================================
   Die Gasse (Startseite /de/) — nur diese Seite lädt die Datei.

   Owner, 23.09.2026: „一条街（Undead Fish）就行“; die sechs Entwürfe
   in docs/像素街/ sind die Vorlage, Stück für Stück nachgebaut. Die
   Szene ist ein Bild (public/assets/strasse/), alles Lesbare darauf ist
   echter Text: Schilder, Dialoge, Tafeln.

   Maße in der Szene sind Prozent der Szene (--x, --y, --b, --h,
   --boden), Schriftgrößen in der Szene cqh (Höhe der Szene), damit
   Schild und Schrift zusammen wachsen.
   ================================================================== */

/* Die Schrift der Gasse: Galmuri11 Bold von Lee Minseo (SIL OFL 1.1, ohne
   reservierten Namen), selbst gehostet als lateinische Untermenge, geholt
   und zugeschnitten mit scripts/fetch-font-pixel.mjs (Owner 23.09.2026:
   „换一套像素字“). Bis dahin Pixelify Sans: dort las man „Zeile“ als
   „2eile“, 5 und S, 0 und O sahen gleich aus, Ziffern und € mussten aus
   Outfit kommen. Galmuri hält Z und 2, 0 und O, 5 und S auseinander und
   hat ein eigenes €, dazu die Pfeile ← → ↓; alles in einer Schrift.
   Nur der fette Schnitt, für alle Gewichte (400–700), damit der Browser
   nichts nachfettet: im normalen Schnitt stammen die lateinischen
   Buchstaben laut Autor aus der Schrift des Nintendo DS.
   size-adjust 75 %: bei 16 px (1rem) ist jeder Bildpunkt der Schrift genau
   1 Pixel groß, bei 32 px genau 2. Großbuchstaben werden damit 7 % höher
   als mit Pixelify, die Zeilen trotzdem rund 15 % schmaler. */
@font-face{font-family:'Gasse';font-style:normal;font-weight:400 700;font-display:swap;size-adjust:75%;src:url('/_v/ff9daef2a19b/fonts/galmuri11-bold-latin.woff2') format('woff2')}
/* Die chinesische Gasse (/zh/, seit 23.09.2026 abends, „中文补齐然后上线“):
   Galmuri hat kein chinesisches Zeichen. Dafür Fusion Pixel 12px von
   TakWolf (SIL OFL 1.1; Owner: „可以下载“), vereinfacht-chinesische
   Fassung, zugeschnitten auf die Zeichen der Gasse (scripts/pixel-zh.mjs).
   Dasselbe Raster wie Galmuri (12 Pixel je Geviert, size-adjust 75 %).
   Es gibt sie nur in einem Schnitt; als 400–700 erklärt, damit der Browser
   die Pixel nicht verschmiert, indem er sie nachfettet. Die deutsche Gasse
   nennt die Schrift nicht und lädt sie nie. */
@font-face{font-family:'Gasse CJK';font-style:normal;font-weight:400 700;font-display:swap;size-adjust:75%;src:url('/_v/70233550717b/fonts/fusion-pixel-zh.woff2') format('woff2');
  unicode-range:U+2E80-2FDF,U+3000-303F,U+3400-4DBF,U+4E00-9FFF,U+F900-FAFF,U+FF00-FFEF}

:root{
  --pixel:'Gasse','Karla',ui-monospace,monospace;
  --nacht:#0b1122;
  --papier-hell:#f4ecd8;
  --rahmen:#4a2e1c;
  --rahmen-hell:#7a4b2a;
}
html:lang(zh){--pixel:'Gasse','Gasse CJK','Karla','PingFang SC','Microsoft YaHei',ui-monospace,monospace}

/* ---------------- Bühne ---------------- */
.buehne{position:relative;height:100vh;height:100svh;min-height:26rem;overflow:hidden;background:var(--nacht);outline:none;isolation:isolate;container-type:inline-size;
  touch-action:pan-y pinch-zoom}
/* Am Handy schiebt man die Gasse mit dem Finger zur Seite (strasse.js; seit
   Owner 23.09.2026 „这些人物不需要走动没啥意义“ muss man dafür nicht gehen):
   waagrecht gehört der Finger der Gasse, senkrecht und zum Zoomen weiter
   dem Browser. Ist das Fenster schmaler als die Gasse, zeigt der Mauszeiger
   über ihr eine Hand: man kann sie ziehen. */
.buehne.schiebbar .welt{cursor:grab}
.buehne.zieht,.buehne.zieht .welt,.buehne.zieht .ort{cursor:grabbing}
/* Breite aus der Bühne (cqw), nicht aus vw: vw zählt den Scrollbalken mit,
   dann ragte die Szene 15 px über den Rand. */
.welt{position:absolute;left:0;bottom:0;height:max(100%,66.667cqw);aspect-ratio:3/2;container-type:size;will-change:transform;
  -webkit-user-select:none;user-select:none}
.welt .grund{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;user-select:none}
.buehne::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(ellipse 75% 70% at 50% 62%,transparent 55%,rgba(4,7,18,.58) 100%)}

/* Schilder in der Szene: echter Text auf den leeren Flächen des Bildes. */
.schild{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:calc(var(--b)*1%);height:calc(var(--h)*1%);
  transform:translateX(-50%);display:grid;place-items:center;text-align:center;pointer-events:none;line-height:1.08;margin:0}
.schild.messing,.schild.saeule,.schild.post{white-space:nowrap}
/* Dunkle Schrift steht auf einer eigenen Fläche in der Farbe des Schilds.
   Ohne sie maß die Kontrastprobe gegen die Nacht der Bühne (1,2–1,4), und
   auf dem dunklen Messing des Bildes kam das Braun selbst nur auf 2,4
   (Probenlauf 23.09.2026). Messing: helleres Blech zwischen den vier
   Schrauben des Bildes (Innenabstand 8 % der Breite, die Schrauben sitzen
   bei 3–6 %), Schrift fast schwarz: 5,3. */
.schild.messing{font:700 calc(var(--s,1.9)*1cqh)/1 var(--pixel);color:#1a1206;letter-spacing:.02em;
  padding:calc(var(--h)*.1333%) calc(var(--b)*.08%);
  background:linear-gradient(rgba(255,236,180,.22),rgba(255,236,180,0) 60%) content-box,#b57d3a content-box}
.schild.kreide{font:600 calc(var(--s,2.6)*1cqh)/1.12 var(--f-hand);color:#f3f1ea;text-align:left;place-items:center start;padding-left:.5em;white-space:pre-line}
/* Säule: ein aufgeklebter Zettel auf dem hellen Plakatband; Briefkasten:
   genau das helle Etikett des Bildes, in seiner Farbe. */
.schild.saeule{font:700 calc(var(--s,2.7)*1cqh)/1 var(--pixel);color:#1d2a52;background:#ddd0cf;box-shadow:0 .25cqh 0 rgba(20,16,30,.28)}
.schild.post{font:600 calc(var(--s,1.25)*1cqh)/1 var(--pixel);color:#2a2410;background:#ccb6af}

/* Stellen, die man ansprechen oder öffnen kann. Hervorgehoben ist, wovor
   die Figur steht (.nah), was man mit der Tab-Taste erreicht oder mit der
   Maus berührt; angeklickt, läuft die Figur hin und öffnet es. */
.welt .ort{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:calc(var(--b)*1%);height:calc(var(--h)*1%);
  transform:translateX(-50%);z-index:2;color:transparent;text-decoration:none;border-radius:3px}
.welt .ort:focus-visible,.welt .ort.nah{outline:3px dashed #ffe066;outline-offset:4px}
@media (hover:hover){.welt .ort:hover{outline:3px dashed #ffe066;outline-offset:4px}}
.blase{position:absolute;left:50%;bottom:100%;transform:translate(-50%,-.8cqh);min-width:2.2em;text-align:center;
  font:700 2.4cqh/1 var(--pixel);color:#16151a;background:#fff;border:.35cqh solid #16151a;padding:.28em .4em;border-radius:.3em;
  animation:gasse-blase 1.6s var(--v,0s) infinite}
.blase::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);border:.7cqh solid transparent;border-top-color:#16151a}
.gelesen .blase,.mit-schild .blase{display:none}
/* Türschilder der Nachbarn (Owner 23.09.2026: „门牌呢“, dann „每扇门常挂小门牌“):
   immer zu sehen, Messing wie das eigene Schild, darauf der Name des Blatts
   aus seiner Überschrift. Neben den Türen ist keine freie Wand (Fenster,
   Efeu, Laternen, Säule), darum hängt das Schild über der Tür, auf dem
   Sturz; lange Namen brechen an den weichen Trennstellen. Es gehört zum
   Link der Tür: Zeigen und Klicken wirken wie auf der Tür. Das Fragezeichen
   hängt am Schild und steht darum darüber, das große Schild beim Näher-
   kommen noch höher (strasse.js, schildEinpassen). */
/* In der chinesischen Gasse steht unter dem chinesischen Namen einer Zeile
   leiser der deutsche vom Blatt (heft.css .de); hier in derselben
   Pixelschrift wie die Zeile. */
.tafel .zeilen h3 .de{font-family:var(--pixel)}
.welt .tuer-name{position:absolute;left:50%;bottom:calc(100% + .35cqh);transform:translateX(-50%);width:max-content;max-width:15cqh;box-sizing:border-box;
  padding:.4cqh .8cqh;font:700 1.3cqh/1.12 var(--pixel);color:#1a1206;letter-spacing:.02em;text-align:center;hyphens:manual;overflow-wrap:normal;
  background:linear-gradient(rgba(255,236,180,.22),rgba(255,236,180,0) 60%),#b57d3a;border:.18cqh solid #6f4718;border-radius:.25cqh;
  box-shadow:0 .3cqh 0 rgba(12,8,3,.45)}

/* Das Schild über der Tür (Owner 23.09.2026: „每个门做好有我进去要做什么“):
   wessen Blatt, die Frage des Nachbarn, wie es drinnen erklärt wird, und
   womit man hineinkommt. Der Text kommt aus den Tafeln (strasse.js); das
   Schild steht über der Tür, vor der die Figur steht oder auf die die Maus
   zeigt. Es hängt an der Bühne, über ihrem dunklen Rand; wo es steht,
   rechnet strasse.js (--sx, --sy), auch wie weit es vom Bildrand weg rückt
   (--dx), damit der Zipfel weiter auf die Tür zeigt. */
.tuerschild{position:absolute;left:var(--sx,0px);top:var(--sy,0px);z-index:5;width:max-content;max-width:min(17.5rem,78vw);
  transform:translate(-50%,-100%);
  background:var(--papier-hell);color:var(--tinte);border:3px solid var(--rahmen);cursor:pointer;
  box-shadow:inset 0 0 0 2px var(--papier-hell),inset 0 0 0 4px var(--rahmen-hell),0 4px 0 rgba(0,0,0,.45);
  padding:.55rem .75rem .6rem;font:400 .9rem/1.3 var(--f-text);text-align:left;animation:gasse-auf .16s steps(2) both}
.tuerschild[hidden]{display:none}
.buehne.gleitet .tuerschild{transition:left .3s ease-out,top .3s ease-out}
.tuerschild::after{content:"";position:absolute;left:calc(50% - var(--dx,0px));top:100%;transform:translateX(-50%);
  border:.55rem solid transparent;border-top-color:var(--rahmen)}
.tuerschild b{display:block;font:700 1rem/1.1 var(--pixel);letter-spacing:.04em;text-transform:uppercase;hyphens:manual}
.tuerschild q{display:block;margin:.3rem 0 0;font:600 .98rem/1.3 var(--pixel)}
.tuerschild .was{display:block;margin:.25rem 0 0}
.tuerschild .taste{display:block;margin:.4rem 0 0;font:700 .8rem/1.1 var(--pixel);letter-spacing:.03em;color:var(--leise)}

/* Die Haustüren der fünf Nachbarn (Owner 23.09.2026: „街道没人，然后有几栋
   房子，然后走进去看别人都在干什么“). Über jeder Tür, hinter der noch jemand
   eine Frage hat, das Fragezeichen; beim Öffnen fällt warmes Licht heraus,
   in drei Stufen, dann wird es dunkel und man steht im Zimmer. */
.welt .tuer::before{content:"";position:absolute;inset:0;background:linear-gradient(#fff0c4,#f4c16e 55%,#d98c3d);opacity:0;pointer-events:none}
.welt .tuer.auf::before{animation:gasse-tuer .24s steps(3) forwards}
@keyframes gasse-tuer{to{opacity:.94}}
.vorhang{position:absolute;inset:0;z-index:9;background:#05070f;opacity:0;pointer-events:none;transition:opacity .24s steps(4)}
.buehne.dunkel .vorhang{opacity:1}

/* Die Zimmer: jedes eine eigene Welt wie die Gasse, mit Bild, Nachbar und
   Tür hinaus; sichtbar ist immer nur eine. Im Zimmer ist die Figur größer,
   Laub fällt nur draußen, und der Lichtschein der Laterne fehlt. Den
   Nachbarn umrahmt keine Linie, er leuchtet.
   Owner 23.09.2026 abends: „房间人比例和背景不对“. Bis dahin waren die Leute
   halb so hoch wie das Bild und standen vorn am Rand, wie vor die Szene
   geklebt: jetzt 40 %, ein Stück weiter im Raum (strasse.html), mit einem
   Schatten unter den Füßen und so hell, wie das Licht im Zimmer ist. */
.raum{position:absolute;inset:0}
.welt.gleiten{transition:transform .3s ease-out}
.raum[hidden],.welt[hidden]{display:none}
.drinnen .laub{display:none}
.raum .spieler::before{display:none}
.welt .nachbar{top:auto;bottom:calc(var(--boden)*1%);width:auto}
.welt .nachbar.nah,.welt .nachbar:focus-visible,.welt .nachbar:hover{outline:none}
.raum .welt .nachbar::after,.raum .spieler::after{content:"";position:absolute;left:50%;bottom:-1.4%;width:64%;height:5%;transform:translateX(-50%);
  border-radius:50%;background:radial-gradient(closest-side,rgba(12,7,3,.6),rgba(12,7,3,0));z-index:-1;pointer-events:none}
.raum .tun,.raum .spieler img,.raum .spieler .gang{filter:brightness(.9) sepia(.16) saturate(.94)}
/* Was der Nachbar gerade tut: sechs Bilder aus ChatGPT (docs/像素街/素材/
   tun-*-2.png, zugeschnitten mit scripts/zuschnitt-gasse.py), Füße auf einer
   Linie. Das erste Bild steht am längsten, dann läuft die Bewegung einmal
   durch; jeder Nachbar in seinem eigenen Takt. */
.welt .nachbar .tun{display:block;height:100%;aspect-ratio:var(--seite);background-position:0 0;background-size:600% 100%;background-repeat:no-repeat;image-rendering:pixelated;
  animation:gasse-tun var(--dauer,7s) steps(1,end) var(--v,0s) infinite}
/* Leuchten, wenn man vor ihm steht; im selben Zimmerlicht wie oben. */
.welt .nachbar.nah .tun,.welt .nachbar:focus-visible .tun{filter:brightness(.9) sepia(.16) saturate(.94) drop-shadow(0 0 .6cqh rgba(255,224,102,.9))}
@media (hover:hover){.welt .nachbar:hover .tun{filter:brightness(.9) sepia(.16) saturate(.94) drop-shadow(0 0 .6cqh rgba(255,224,102,.9))}}
@keyframes gasse-tun{0%{background-position-x:0}38%{background-position-x:20%}46%{background-position-x:40%}
  56%{background-position-x:60%}70%{background-position-x:80%}84%{background-position-x:100%}}
.tun.frau-rot{background-image:url(/_v/aac90a7094a6/assets/strasse/t-frau-rot.webp);--seite:268/650}
.tun.mann-muetze{background-image:url(/_v/bde7d8a08687/assets/strasse/t-mann-muetze.webp);--seite:288/692}
.tun.frau-trench{background-image:url(/_v/935ab98da82b/assets/strasse/t-frau-trench.webp);--seite:272/702}
.tun.mann-helm{background-image:url(/_v/524e9beb1897/assets/strasse/t-mann-helm.webp);--seite:270/698}
.tun.mann-stock{background-image:url(/_v/783536320e8c/assets/strasse/t-mann-stock.webp);--seite:278/628}
/* Im Zimmer des jungen Nachbarn tropft es von der Decke in den Kübel. */
.welt .tropfen{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:.45cqh;height:.9cqh;background:#a9d8ff;z-index:1;pointer-events:none;
  animation:gasse-tropfen 1.4s steps(10) infinite}
@keyframes gasse-tropfen{0%{translate:0 0;opacity:1}90%{translate:0 var(--fall);opacity:1}100%{translate:0 var(--fall);opacity:0}}
/* Was die Kamera gerade nur halb zeigt, wird ausgeblendet statt abgeschnitten
   (strasse.js, kamera()); es erscheint, sobald die Kamera hinschwenkt. */
.welt .ausser-sicht{visibility:hidden}

/* Die Spielfigur mit ihrem Lichtschein. Eine Runde lang stand sie still
   (Owner 23.09.2026: „小人留着，但不用走“); am selben Abend „主角可以移动“:
   sie geht wieder. */
.spieler{position:absolute;left:calc(var(--x)*1%);bottom:calc(var(--boden)*1%);height:calc(var(--h)*1%);z-index:2;
  transform:translateX(-50%) scaleX(var(--blick,1));pointer-events:none}
.spieler::before{content:"";position:absolute;left:50%;bottom:-18%;width:340%;aspect-ratio:1;transform:translateX(-50%);z-index:-1;
  background:radial-gradient(closest-side,rgba(255,221,150,.42),rgba(255,221,150,.12) 60%,transparent)}
.spieler img{display:block;height:100%;width:auto;image-rendering:pixelated;transform-origin:50% 100%;animation:gasse-atmen 3s infinite}
/* Gehen: sechs Bilder aus docs/像素街/素材/spieler-gehen.png (scripts/
   zuschnitt-gasse.py), der Kopf in jedem Feld auf der Mitte. Im stehenden
   Bild sitzt der Kopf bei 56,15 % der Breite; dorthin kommt die Mitte des
   Felds, sonst spränge die Figur beim Losgehen zur Seite. Der Streifen wird
   erst nach dem Laden der Seite geholt (strasse.js); bis er da ist, wippt
   die stehende Figur wie vorher. Im Laufschritt (ein Klick auf eine Tür)
   ist die Figur doppelt so schnell, die Schritte kommen entsprechend öfter. */
.spieler .gang{position:absolute;bottom:0;left:56.15%;height:100%;aspect-ratio:356/572;transform:translateX(-50%);
  visibility:hidden;background:0 0/600% 100% no-repeat;image-rendering:pixelated}
.spieler.gang-laden .gang{background-image:url(/_v/58f68cd40212/assets/strasse/spieler-gehen.webp)}
.spieler.geht:not(.gang-da) img{animation:gasse-schritt .34s steps(2) infinite}
.spieler.gang-da.geht img{visibility:hidden}
.spieler.gang-da.geht .gang{visibility:visible;animation:gasse-gang .56s steps(6) infinite}
.spieler.gang-da.eilt .gang{animation-duration:.34s}
@keyframes gasse-schritt{50%{transform:translateY(-3%)}}
@keyframes gasse-gang{to{background-position-x:120%}}
/* Stehen: alle drei Sekunden hebt sich die Brust um ein gutes Prozent.
   Zwei Zustände, kein Gleiten, so wie Pixelfiguren atmen. */
@keyframes gasse-atmen{0%,49.9%{transform:none}50%,100%{transform:scaleY(1.013)}}
@keyframes gasse-blase{0%,49.9%{transform:translate(-50%,-.8cqh)}50%,100%{transform:translate(-50%,-1.35cqh)}}

/* ---------------- Leben in der Gasse ----------------
   Owner 23.09.2026: „记得动效也要做了不要像静态图“. Was sich bewegt, bewegt
   sich langsam und gleichmäßig: Laternenlicht atmet, drei Fenster werden
   ab und zu wärmer, Laub fällt. Nichts zittert, nichts springt. */
.welt .licht{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:calc(var(--r)*1%);aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;background:radial-gradient(closest-side,rgba(255,214,140,.5),rgba(255,190,110,.16) 55%,transparent);
  mix-blend-mode:screen;pointer-events:none;z-index:1;animation:gasse-licht var(--d,4.5s) ease-in-out infinite alternate}
@keyframes gasse-licht{from{opacity:.5}to{opacity:1}}
.welt .fenster{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:calc(var(--b)*1%);height:calc(var(--h)*1%);transform:translateX(-50%);
  background:rgba(255,200,120,.42);mix-blend-mode:screen;pointer-events:none;z-index:1;opacity:0;
  animation:gasse-fenster var(--d,24s) ease-in-out var(--v,0s) infinite}
@keyframes gasse-fenster{0%,30%{opacity:0}40%,62%{opacity:1}72%,100%{opacity:0}}

/* Laub: ein Pixelblatt (8 × 8) als Maske, damit jedes seine eigene Farbe
   hat. Es fällt gerade, pendelt dabei und dreht sich um, statt zu rotieren,
   so bleiben die Pixel im Raster. Werte stehen im HTML, nicht zufällig. */
.laub{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.laub i{position:absolute;top:0;left:calc(var(--l)*1%);animation:gasse-fallen var(--t) linear var(--v) infinite}
.laub b{display:block;width:calc(var(--s)*clamp(10px,1.7vmin,22px));aspect-ratio:1;background:var(--f);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath d='M3 0h1v1H3zM1 1h1v1H1zM3 1h2v1H3zM6 1h1v1H6zM1 2h6v1H1zM0 3h8v1H0zM1 4h6v1H1zM2 5h4v1H2zM3 6h2v1H3zM4 7h1v1H4z'/%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 8 8' shape-rendering='crispEdges'%3E%3Cpath d='M3 0h1v1H3zM1 1h1v1H1zM3 1h2v1H3zM6 1h1v1H6zM1 2h6v1H1zM0 3h8v1H0zM1 4h6v1H1zM2 5h4v1H2zM3 6h2v1H3zM4 7h1v1H4z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  animation:gasse-wehen calc(var(--t)/3) ease-in-out var(--v) infinite alternate,gasse-wenden calc(var(--t)/5) steps(1) var(--v) infinite}
@keyframes gasse-fallen{from{transform:translate(0,-8vh)}to{transform:translate(calc(var(--dx)*1vmin),108vh)}}
@keyframes gasse-wehen{from{translate:calc(var(--w)*-.5vmin) 0}to{translate:calc(var(--w)*.5vmin) 0}}
@keyframes gasse-wenden{50%{scale:-1 1}}
@media (max-width:760px){.laub i:nth-child(even){display:none}}

/* Fenster und Dialoge gehen in drei Pixelschritten auf; der Satz des
   Nachbarn wird geschrieben (strasse.js), mit einem einzigen Strich an der
   Schreibkante. */
.dialog:not([hidden]),.gasse-an .tafel[data-offen]{animation:gasse-auf .2s steps(3) both}
@keyframes gasse-auf{from{translate:0 14px;opacity:0}}
.dialog .weiter .pfeil{display:inline-block;animation:gasse-pfeil 1s steps(1) infinite}
@keyframes gasse-pfeil{50%{translate:.25em 0}}
.gespraech .tippt [data-sicht]::after{content:"";display:inline-block;width:.42em;height:.95em;margin-left:.1em;vertical-align:-.12em;background:currentColor}

@media (prefers-reduced-motion:reduce){
  .laub{display:none}
  .welt .tropfen{display:none}
  .welt .licht,.welt .fenster,.welt .nachbar .tun,.spieler img,.spieler.geht:not(.gang-da) img,.spieler.gang-da.geht .gang,.blase,.dialog .weiter .pfeil,.tuerschild,
  .dialog:not([hidden]),.gasse-an .tafel[data-offen],.welt .tuer.auf::before{animation:none}
  .vorhang{transition:none}
  .welt .licht{opacity:.75}
}

/* ---------------- Leiste oben ---------------- */
.gassen-kopf{position:absolute;inset:0 0 auto 0;z-index:8;display:flex;align-items:flex-start;gap:.8rem;min-height:0;
  padding:clamp(.6rem,1.8vh,1.1rem) clamp(.7rem,2vw,1.4rem);pointer-events:none;background:none;border:0}
.gassen-kopf > *{pointer-events:auto}
.gassen-kopf .zaehler{margin:0 auto 0 0;font:700 1rem/1 var(--pixel);letter-spacing:.06em;color:var(--tinte);background:var(--papier-hell);
  border:3px solid var(--rahmen);box-shadow:inset 0 0 0 2px var(--papier-hell),inset 0 0 0 4px var(--rahmen-hell);padding:.55em .8em}
.gassen-kopf .haupt,.gassen-kopf .rechts{display:flex;align-items:baseline;gap:.9rem;background:rgba(6,10,24,.62);padding:.45rem .8rem}
.gassen-kopf .rechts{gap:.9rem}
.gassen-kopf a{font:500 .98rem/1 var(--pixel);color:var(--papier-hell);text-decoration:none;border:0;padding:0;white-space:nowrap}
.gassen-kopf a:hover,.gassen-kopf a:focus-visible{text-decoration:underline;text-underline-offset:.25em}
.gassen-kopf .ausgang{font-weight:700}
/* Die Marke der Startseite, im selben dunklen Streifen wie die Leiste. */
.gassen-kopf .marke{display:block;font:700 .98rem/1 var(--pixel);letter-spacing:.02em;color:var(--papier-hell);background:rgba(6,10,24,.62);padding:.45rem .8rem}

/* ---------------- Dialoge ---------------- */
.dialog{position:absolute;z-index:6;left:clamp(.6rem,3vw,2.5rem);bottom:clamp(3.2rem,8vh,5rem);width:min(52rem,calc(100% - 1.2rem));
  background:var(--papier-hell);color:var(--tinte);border:4px solid var(--rahmen);
  box-shadow:inset 0 0 0 3px var(--papier-hell),inset 0 0 0 5px var(--rahmen-hell),0 6px 0 rgba(0,0,0,.45);
  padding:1.5rem clamp(1rem,2.4vw,1.6rem) 1rem}
.dialog[hidden]{display:none}
.namensschild{position:absolute;top:0;left:1.1rem;transform:translateY(-62%);margin:0;font:700 .95rem/1 var(--pixel);letter-spacing:.08em;
  background:var(--papier-hell);border:3px solid var(--rahmen);padding:.4em .7em}
.dialog h1{font:700 clamp(1.55rem,3.3vw,2.6rem)/1.1 var(--pixel);letter-spacing:0;margin:.1em 0 .35em}
.dialog p{margin:0;font:400 clamp(.98rem,1.25vw,1.12rem)/1.45 var(--f-text)}
.dialog .weiter{display:block;margin:.6rem 0 0 auto;font:700 1rem/1 var(--pixel);letter-spacing:.06em;background:none;border:0;padding:.3em 0;cursor:pointer;color:var(--tinte)}
.gespraech{width:min(46rem,calc(100% - 1.2rem - clamp(7rem,16vw,15rem)))}
.gespraech p{font:600 clamp(1.05rem,1.6vw,1.35rem)/1.35 var(--pixel)}
.wahl{list-style:none;margin:.8rem 0 0;padding:0 0 0 1.6rem;display:grid;gap:.25rem}
.wahl button{position:relative;display:block;width:100%;text-align:left;font:400 clamp(.98rem,1.3vw,1.12rem)/1.3 var(--f-text);
  background:none;border:0;padding:.28rem .2rem;cursor:pointer;color:var(--tinte)}
.wahl button b{font:700 1em/1 var(--pixel);margin-right:.5em}
.wahl button:hover::before,.wahl button:focus-visible::before{content:"";position:absolute;left:-1.3rem;top:50%;transform:translateY(-50%);
  border:.45rem solid transparent;border-left:.6rem solid var(--tinte)}
.wahl button:focus-visible{outline:none;background:rgba(74,46,28,.08)}
/* Porträt seit 23.09.2026 (neu gezeichnet, „按同一种画风重出人物“) schmaler
   und höher geschnitten, damit Kopf, Hände und das eigene Schreiben drin
   sind; der Rahmen ist so viel schmaler, dass er gleich hoch bleibt. */
.portraet-rahmen{position:absolute;left:calc(100% + .8rem);bottom:-4px;width:clamp(5.2rem,12vw,11.2rem);aspect-ratio:296/477;
  border:4px solid var(--rahmen);box-shadow:inset 0 0 0 3px var(--papier-hell);background:#1a2446;overflow:hidden}
.portraet-rahmen img{display:block;width:100%;height:100%;object-fit:cover;image-rendering:pixelated}

/* Unten: Tastenhinweis, Weg zur gewohnten Seite. */
.hinweis{position:absolute;z-index:6;left:50%;bottom:clamp(.5rem,1.6vh,.9rem);transform:translateX(-50%);margin:0;
  font:500 .85rem/1 var(--pixel);color:var(--papier-hell);background:rgba(6,10,24,.62);padding:.4em .8em;white-space:nowrap}
html:not(.gasse-an) .hinweis{display:none}
.klassisch{position:absolute;z-index:7;right:clamp(.6rem,2vw,1.2rem);bottom:clamp(.5rem,1.6vh,.9rem);font:600 .9rem/1 var(--pixel);
  color:var(--papier-hell);background:rgba(6,10,24,.78);border:2px solid var(--papier-hell);padding:.5em .8em;text-decoration:none}
.klassisch:hover,.klassisch:focus-visible{background:var(--papier-hell);color:var(--tinte)}

/* ---------------- Tafeln ---------------- */
/* Ohne Skript: gewöhnliche Abschnitte unter der Szene. */
.tafeln{max-width:62rem;margin:0 auto;padding:clamp(1.5rem,4vw,3rem) var(--rand,1rem);display:grid;gap:2.5rem}
.tafel{position:relative;background:var(--papier-hell);color:var(--tinte);border:4px solid var(--rahmen);
  box-shadow:inset 0 0 0 3px var(--papier-hell),inset 0 0 0 5px var(--rahmen-hell);padding:clamp(1.1rem,3vw,2rem)}
.tafel h2{font:700 clamp(1.6rem,3vw,2.4rem)/1.1 var(--pixel);letter-spacing:0;margin:0 0 .5rem}
.tafel h3{font:700 1.2rem/1.2 var(--pixel);letter-spacing:0}
.tafel .oben,.tafel .etikett{font:600 .95rem/1.3 var(--pixel);color:var(--leise);margin:0 0 .3rem}
.tafel .frage{font:600 clamp(1.15rem,2vw,1.5rem)/1.25 var(--pixel);margin:0 0 1rem}
.tafel p{margin:0 0 .6rem}
.tafel .papier{background:transparent;box-shadow:none;border:0;padding:0;transform:none}
.schliessen{display:none}

/* Mit Skript: ausgeblendet, bis man sie öffnet; dann Fenster über der Gasse. */
.gasse-an .tafeln{padding:0;margin:0;max-width:none}
.gasse-an .tafel{display:none}
/* Wie in den Entwürfen 4 und 5: das Fenster lässt die Gasse sehen. */
.gasse-an .tafel[data-offen]{display:block;position:fixed;z-index:30;top:clamp(3.4rem,9vh,5.5rem);left:50%;transform:translateX(-50%);
  width:min(62rem,calc(100% - 1rem));max-height:calc(100% - clamp(7rem,18vh,10rem));overflow:auto;
  box-shadow:inset 0 0 0 3px var(--papier-hell),inset 0 0 0 5px var(--rahmen-hell),0 8px 0 rgba(0,0,0,.45),0 0 0 100vmax rgba(4,7,18,.32)}
.gasse-an .tafel#recht[data-offen]{left:auto;right:clamp(.5rem,3vw,2.5rem);transform:none;width:min(58rem,calc(100% - 1rem),58%)}
.tafel .recht .wann time{font:700 1.1rem/1.2 var(--pixel);font-style:normal}
.tafel .formel-titel{text-transform:none;letter-spacing:0;font:700 clamp(1.4rem,2.6vw,2rem)/1.15 var(--pixel);margin:0 0 .8rem}
.gasse-an .schliessen{display:inline-block;position:sticky;top:0;float:right;z-index:2;margin:-.4rem -.4rem .6rem 1rem;
  font:700 .9rem/1 var(--pixel);color:var(--tinte);background:var(--papier-hell);border:3px solid var(--rahmen);padding:.45em .7em;cursor:pointer}

/* Das Blatt: im Zimmer des Nachbarn, dem es gehört, Brief links, Tafel
   rechts (Entwurf 3). Das Zimmer ist etwas abgedunkelt, damit Brief und
   Tafel vorne stehen. */
.blatt .brief{display:none}
.gasse-an .tafel.blatt[data-offen]{inset:0;transform:none;width:auto;max-height:none;border:0;padding:clamp(3.2rem,8vh,5rem) clamp(.8rem,4vw,3.5rem) clamp(3.5rem,9vh,5rem);
  background-color:#150f09;background-position:center;background-size:cover;background-repeat:no-repeat;image-rendering:pixelated;box-shadow:none;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(19rem,34rem);gap:clamp(1rem,4vw,4rem);align-items:center}
.gasse-an #blatt-kontomitteilung[data-offen]{background-image:linear-gradient(rgba(10,7,4,.42),rgba(10,7,4,.42)),url(/_v/e260f0c784ec/assets/strasse/raum-kontomitteilung.webp)}
.gasse-an #blatt-polizze[data-offen]{background-image:linear-gradient(rgba(10,7,4,.42),rgba(10,7,4,.42)),url(/_v/941b9742e135/assets/strasse/raum-polizze.webp)}
.gasse-an #blatt-basisinformationsblatt[data-offen]{background-image:linear-gradient(rgba(10,7,4,.42),rgba(10,7,4,.42)),url(/_v/dfed3c00e939/assets/strasse/raum-basisinformationsblatt.webp)}
.gasse-an #blatt-schadenmeldung[data-offen]{background-image:linear-gradient(rgba(10,7,4,.42),rgba(10,7,4,.42)),url(/_v/8ce62fcc2258/assets/strasse/raum-schadenmeldung.webp)}
.gasse-an #blatt-rehabilitationsgeld[data-offen]{background-image:linear-gradient(rgba(10,7,4,.42),rgba(10,7,4,.42)),url(/_v/9e43fa6d28a2/assets/strasse/raum-rehabilitationsgeld.webp)}
.gasse-an .tafel.blatt[data-offen] > .schliessen{position:absolute;top:1rem;right:1rem;margin:0;float:none}
.gasse-an .tafel.blatt[data-offen] .brief{display:block;justify-self:center;width:min(100%,30rem);aspect-ratio:3/4;background:#fbf8f1;color:#2d2b27;
  transform:rotate(-5deg);box-shadow:6px 8px 0 rgba(0,0,0,.4);padding:7% 8%;position:relative;
  background-image:repeating-linear-gradient(to bottom,transparent 0 1.6em,rgba(120,116,108,.35) 1.6em calc(1.6em + 6px),transparent calc(1.6em + 6px) 2.6em);
  background-position:0 8.5em;background-repeat:no-repeat;background-size:100% 62%}
.brief-stempel{position:absolute;right:7%;top:5%;margin:0;font:700 .78rem/1.15 var(--pixel);color:#b3262a;border:3px solid #b3262a;padding:.35em .5em;transform:rotate(4deg);max-width:12em;text-align:center;overflow-wrap:normal;hyphens:none}
.brief-titel{margin:2.9em 0 0;font:700 clamp(1.3rem,2.2vw,1.9rem)/1.1 var(--pixel)}
.brief-summe{position:absolute;right:9%;bottom:14%;margin:0;font:700 clamp(1.05rem,1.8vw,1.5rem)/1 var(--pixel);color:#b3262a;
  border:3px solid #b3262a;border-radius:50%;padding:.6em .9em;transform:rotate(-6deg)}
.brief-nummern{position:absolute;left:3%;top:22%;bottom:10%;margin:0;padding:0;list-style:none;display:flex;flex-direction:column;justify-content:space-between}
.brief-nummern li{width:1.7em;height:1.7em;display:grid;place-items:center;border:2px solid var(--kuli);border-radius:50%;font:700 .9rem/1 var(--f-hand);color:var(--kuli)}
.gasse-an .tafel.blatt[data-offen] .tafel-text{background:var(--papier-hell);border:4px solid var(--rahmen);
  box-shadow:inset 0 0 0 3px var(--papier-hell),inset 0 0 0 5px var(--rahmen-hell),0 6px 0 rgba(0,0,0,.45);padding:clamp(1rem,2.4vw,1.6rem);max-height:100%;overflow:auto}
.gasse-an .tafel.blatt .zeilen{list-style:none;margin:0;padding:0;display:block}
.tafel .zeilen h3{font:700 1.25rem/1.2 var(--pixel)}
.tafel .zeilen .wert{font:700 clamp(1.8rem,3.2vw,2.6rem)/1.05 var(--pixel);letter-spacing:0}
.gasse-an .tafel.blatt .zeilen > li{border:3px solid var(--rahmen);padding:1rem 1.1rem;background:#fbf6e9}
.gasse-an .tafel.blatt .zeilen > li[hidden]{display:none}
.gasse-an .tafel.blatt .wo{margin-top:1.2rem}
/* Im Fenster wie im Entwurf: Kopf und eine Zeile. Der Satz darunter und die
   Prüfdaten stehen auf der ganzen Seite; „Wo …“ nur, wenn man danach fragt. */
.gasse-an .tafel.blatt .kurz,.gasse-an .tafel.blatt .gezeichnet{display:none}
.gasse-an .tafel.blatt[data-teil="zeilen"] .wo{display:none}
.gasse-an .tafel.blatt[data-teil="wo"] :is(.zeilen,.kaestchen,.zeilen-name){display:none}
.zeilen-name{font:600 .9rem/1.2 var(--pixel);color:var(--leise);margin:.2rem 0 .5rem}
.ganze-seite{margin-top:1rem;font-size:.95rem}
.kaestchen{display:flex;flex-wrap:wrap;gap:.45rem;margin:.9rem 0 .2rem}
.kaestchen button{min-width:2.3rem;height:2.3rem;font:700 1rem/1 var(--pixel);background:#fbf6e9;border:3px solid var(--rahmen);cursor:pointer;color:var(--tinte)}
.kaestchen button[aria-pressed="true"]{background:var(--marker)}
html:not(.gasse-an) .kaestchen{display:none}

/* Über mich: im eigenen Arbeitszimmer, der Schreibtisch links bleibt zu
   sehen (Owner 23.09.2026: „家的那扇门也走进去“; bis dahin das Büro von
   außen, Entwurf 6). */
.gasse-an .tafel#ich[data-offen]{inset:0;transform:none;width:auto;max-height:none;border:0;padding:clamp(3.2rem,8vh,5rem) clamp(.8rem,4vw,3.5rem) clamp(3.5rem,9vh,5rem);
  background:linear-gradient(rgba(10,7,4,.3),rgba(10,7,4,.3)),url(/_v/cb4cf0a5697a/assets/strasse/raum-ich.webp) left center/cover no-repeat #0d0a07;image-rendering:pixelated;box-shadow:none;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(19rem,36rem);align-content:center;gap:1.4rem}
.gasse-an .tafel#ich[data-offen] > *:not(.schliessen){grid-column:2;background:var(--papier-hell);border:4px solid var(--rahmen);
  box-shadow:inset 0 0 0 3px var(--papier-hell),inset 0 0 0 5px var(--rahmen-hell),0 6px 0 rgba(0,0,0,.45);padding:clamp(1rem,2.4vw,1.6rem)}
.gasse-an .tafel#ich[data-offen] > .schliessen{position:absolute;top:1rem;right:1rem;margin:0;float:none}
.tafel#ich h2{font-size:clamp(1.8rem,3.6vw,2.8rem)}
.tafel#ich .markiert{background:var(--marker)}
.tafel#ich .einordnung{display:grid;gap:0;margin:0 0 .6rem}
.tafel#ich .einordnung p{margin:0}
/* Die vier Wege als Knöpfe wie im Entwurf 6; heft.css legt jede Zeile als
   zweispaltiges Raster an, hier ist jeder Weg ein Kasten mit einer Spalte. */
.tafel .kanaele{list-style:none;margin:.6rem 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.tafel .kanaele li{display:grid;grid-template-columns:minmax(0,1fr);gap:.25rem;align-content:start;border:3px solid var(--rahmen);border-top:3px solid var(--rahmen);padding:.6rem .7rem;background:#fbf6e9}
.tafel .kanaele li:first-child{border-top:3px solid var(--rahmen)}
.tafel .kanaele .art{display:block;font:700 1.05rem/1.1 var(--pixel);letter-spacing:0;text-transform:none;color:var(--tinte)}
.tafel .kanaele a{font:600 1rem/1.3 var(--f-text);overflow-wrap:anywhere}
.tafel .kanaele .weg,.tafel .kanaele .note{grid-column:1;display:block;font-size:.85rem;color:var(--leise)}
.tafel .kontakt h3{margin:0 0 .4rem}

/* Tafel und Säule: helle Tafel über der Gasse (Entwürfe 4 und 5). */
.tafel .formel{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.6rem 1rem;font:700 clamp(1.3rem,2.6vw,2rem)/1.1 var(--pixel)}
.tafel .formel .notiz{display:block;font:600 1.05rem/1.1 var(--f-hand);color:var(--kuli);margin-top:.3rem}
.tafel .markiert{background:var(--marker)}
.tafel input{font:700 1em/1 var(--pixel);width:5.5em;border:3px solid var(--rahmen);background:#fff;padding:.15em .3em}
.tafel .karte{margin-top:1rem;border:3px solid var(--rahmen);padding:1rem;background:#fbf6e9}
.tafel .gross{font:700 clamp(1.6rem,3vw,2.3rem)/1.1 var(--pixel)}
.tafel .quelle{font-size:.9rem;color:var(--leise)}
.tafel .recht article{display:grid;grid-template-columns:minmax(9rem,14rem) minmax(0,1fr);gap:1rem;border-top:3px solid var(--rahmen);padding:1rem 0}
.tafel .recht .zahl{font:700 clamp(1.5rem,3vw,2.2rem)/1 var(--pixel);background:var(--marker);display:inline-block;padding:.1em .25em;margin-top:.3rem}
.tafel .blaetter{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:.8rem}
.tafel .blaetter li{border:3px solid var(--rahmen);padding:.8rem 1rem;background:#fbf6e9}
.tafel .blaetter .absender{font-size:.85rem;color:var(--leise);margin:0}
.tafel .blaetter h3{margin:.2rem 0 .3rem}
.tafel .blaetter .hand{font-size:1.1rem}

/* Unter 1000 px wäre der Brief zu klein zum Lesen: dann nur die Tafel. */
@media (max-width:1000px){
  .gasse-an .tafel.blatt[data-offen]{grid-template-columns:minmax(0,1fr);align-content:start}
  .gasse-an .tafel.blatt[data-offen] .brief{display:none}
}

/* ---------------- Handy ---------------- */
@media (max-width:760px){
  .gassen-kopf{flex-wrap:wrap}
  .gassen-kopf .haupt,.gassen-kopf .rechts{gap:.7rem;padding:.35rem .55rem}
  .gassen-kopf .marke{padding:.35rem .55rem;font-size:.86rem}
  .gassen-kopf a{font-size:.86rem}
  .gassen-kopf .zaehler{font-size:.85rem}
  .dialog{bottom:3.1rem;padding-top:1.3rem}
  .gespraech{width:calc(100% - 1.2rem)}
  .portraet-rahmen{left:auto;right:0;bottom:calc(100% + .9rem);width:5.2rem}
  .hinweis{display:none}
  .gasse-an .tafel.blatt[data-offen],.gasse-an .tafel#ich[data-offen]{grid-template-columns:minmax(0,1fr);align-content:start}
  .gasse-an .tafel.blatt[data-offen] .brief{display:none}
  .gasse-an .tafel#ich[data-offen] > *:not(.schliessen){grid-column:1}
  .tafel .recht article{grid-template-columns:minmax(0,1fr)}
  .gasse-an .tafel#recht[data-offen]{width:calc(100% - 1rem);right:.5rem}
}