*{box-sizing:border-box}body{margin:0;background:#ddd5bd;color:#302331;font-family:"DM Sans",sans-serif;overflow:hidden}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;border:0;background:#faf6eb;border-radius:5px;padding:13px 19px;box-shadow:0 3px 0 #30233120}button:hover{background:#fffdf5}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #b96743;outline-offset:5px}#viewport{position:fixed;inset:0;overflow:hidden;touch-action:none;cursor:grab;background:radial-gradient(ellipse at 60% 45%,#eee8d3,#c5c3a6);transition:background 1s}#viewport:active{cursor:grabbing}#world{position:absolute;left:50%;top:50%;width:1500px;transform-origin:center;will-change:transform;filter:drop-shadow(0 45px 40px #30233125)}svg{width:100%;height:auto;overflow:visible}.building{cursor:pointer;transition:filter .3s}.building:hover,.building:focus{filter:brightness(1.13) drop-shadow(0 0 8px #faf6eb)}.building:focus{outline:none}.building.chosen{filter:drop-shadow(0 0 18px #f9d88b)}header{position:fixed;top:28px;left:32px;right:32px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}header>*{pointer-events:auto}header img{width:190px;filter:drop-shadow(0 5px 12px #30233122)}.welcome{position:fixed;left:4vw;top:26vh;pointer-events:none;transition:opacity .5s,transform .5s}.welcome span,#eyebrow{font-size:10px;letter-spacing:2px;font-weight:bold}.welcome h1{font-family:Fraunces,Georgia,serif;font-size:clamp(36px,4.5vw,68px);line-height:1.04;margin:20px 0}.welcome p{font-size:14px;line-height:1.7}.welcome button{pointer-events:auto;background:#50374f;color:#faf6eb;margin-top:10px}.exploring .welcome{opacity:0;transform:translateX(-30px);pointer-events:none}.exploring .welcome button{pointer-events:none}.hint{position:fixed;bottom:112px;left:50%;transform:translateX(-50%);font-size:11px;color:#50374f;background:#faf6ebd9;padding:9px 14px;border-radius:20px;white-space:nowrap;pointer-events:none}nav{position:fixed;bottom:49px;left:50%;transform:translateX(-50%);display:flex;gap:6px;padding:7px;background:#faf6ebdc;backdrop-filter:blur(12px);border:1px solid #fff9;border-radius:12px;box-shadow:0 12px 35px #30233120}nav button{padding:10px 16px;background:transparent;box-shadow:none}nav label{display:flex;align-items:center;gap:7px;padding:0 12px;font-size:14px}input{width:110px;accent-color:#50374f}.ticket{position:fixed;right:32px;bottom:52px;background:#50374f;color:#faf6eb;font-size:12px}footer{position:fixed;bottom:14px;left:24px;right:24px;display:flex;gap:16px;font-size:10px}footer a{color:inherit}footer span{margin-left:auto;opacity:.6}dialog{border:0;border-radius:9px;padding:38px;width:min(470px,calc(100vw - 32px));background:#faf6eb;color:#302331;box-shadow:0 30px 100px #30233150}dialog::backdrop{background:#30233135;backdrop-filter:blur(5px)}dialog h2{font-family:Fraunces,Georgia,serif;font-size:37px;line-height:1.1;margin:18px 0}dialog p{line-height:1.65;font-size:14px}.close{position:absolute;right:12px;top:10px;font-size:25px;background:transparent;box-shadow:none;padding:0 10px}.choices{display:grid;gap:10px;margin:25px 0}.choices button{text-align:left;background:#eae2cf}.choices button:hover{background:#d8dabe}#toast{position:fixed;top:110px;left:50%;transform:translate(-50%,-15px);opacity:0;background:#50374f;color:#faf6eb;padding:14px 24px;border-radius:6px;transition:.4s;pointer-events:none;text-align:center}#toast.show{opacity:1;transform:translate(-50%,0)}.window{transition:fill 1s}.vehicle{animation:drive 22s linear infinite}.walker{animation:walk 15s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}.walker-1,.walker-4{animation-delay:-7s;animation-duration:19s}.walker-2,.walker-5{animation-delay:-11s;animation-direction:alternate-reverse}.lamp-glow,.shop-glow{opacity:var(--glow,.15);transition:opacity 1s}.paused *{animation-play-state:paused!important}.cat{animation:cat 19s ease-in-out infinite;cursor:pointer}.location-label{font:600 12px "DM Sans",sans-serif;fill:#faf6eb;pointer-events:none}.pin{fill:#50374f;stroke:#faf6eb;stroke-width:2;filter:drop-shadow(0 3px 4px #30233140)}@keyframes drive{0%,8%{transform:translate(-160px,-80px);opacity:0}12%{opacity:1}65%{transform:translate(180px,90px);opacity:1}72%,100%{transform:translate(240px,120px);opacity:0}}@keyframes walk{from{translate:-12px -6px}to{translate:16px 8px}}@keyframes cat{0%,20%,100%{transform:translate(0,0)}45%,65%{transform:translate(95px,47px)}}@media(max-width:760px){header{top:18px;left:18px;right:18px}header img{width:145px}header button{font-size:12px;padding:10px}.welcome{left:24px;top:15vh}.welcome h1{font-size:42px}.welcome p{font-size:12px}.welcome span{font-size:8px}.ticket{right:18px;bottom:124px;font-size:11px}.hint{bottom:181px;font-size:9px}nav{bottom:55px;gap:0;width:calc(100% - 32px);justify-content:center}nav button{padding:10px 12px}nav label{padding:0 8px}input{width:75px}footer{font-size:9px;gap:10px;left:18px;right:18px}footer span{display:none}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}.paused-hidden *{animation-play-state:paused!important}

/* Move actors only in world coordinates; paint order is controlled by ground depth. */
#depth-layer .walker,#depth-layer .vehicle,#depth-layer .cat{animation:none!important;translate:none!important}.location-label{font-size:12px;letter-spacing:.1px}.welcome{max-width:380px;background:linear-gradient(90deg,#e7e3cfee 65%,#e7e3cf00);padding:22px 35px 24px 0}.welcome h1{font-size:clamp(36px,3.6vw,54px)}

body:not(.exploring) .place-marker{visibility:hidden}.exploring .welcome{visibility:hidden}
dialog{max-height:calc(100dvh - 40px);overflow-y:auto}dialog h2{font-size:32px}.chapter-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:18px 0}.chapter-tabs button{font-size:12px;background:#eae2cf;padding:10px 14px;box-shadow:none}.chapter-tabs button[aria-pressed=true]{background:#50374f;color:#faf6eb}.chapter-note{background:#eee6d3;padding:18px;border-left:3px solid #879a68;min-height:170px}.chapter-note h3{font-family:Fraunces,Georgia,serif;margin:0;font-size:21px}.chapter-note p{margin-bottom:0}.caption{font-size:11px!important;line-height:1.5!important;color:#746875}.story-next{display:block;margin-top:14px;background:#50374f;color:#faf6eb;width:100%;text-align:left}.story-next:hover{background:#654963}.choices button strong,.choices button span{display:block}.choices button span{font-size:12px;margin-top:6px}.game-screen{margin:20px 0;background:#302331;border-radius:6px;overflow:hidden}.game-screen img{display:block;width:100%;height:280px;object-fit:contain;background:#302331}.game-screen figcaption{padding:13px;color:#faf6eb;font-size:12px}.game-screen figcaption span{display:block;opacity:.75;font-size:10px;margin-top:5px}.departure-board{display:grid;gap:10px;padding:22px;background:#302331;color:#faf6eb;border-radius:5px;margin:24px 0}.departure-board span{font-size:9px;letter-spacing:2px;color:#d7c5a6}.departure-board strong{font-size:15px;margin-bottom:8px}.quiet-link{display:block;margin-top:20px;font-size:12px;color:#50374f}@media(max-width:600px){dialog{padding:30px 23px}.game-screen img{height:240px}}

header{justify-content:flex-start;gap:12px}header img{margin-right:auto}.language-switch{color:#302331;background:#faf6eb;padding:12px;border-radius:5px;text-decoration:none;font-size:12px;font-weight:700}.beta-direct{background:#50374f;color:#faf6eb;padding:13px 18px;border-radius:5px;text-decoration:none;font-size:12px;font-weight:bold}.beta-link{text-decoration:none;padding:15px 18px}@media(max-width:760px){header{gap:6px;flex-wrap:wrap}header img{width:125px}.beta-direct{position:fixed;right:18px;top:76px;font-size:11px}.language-switch{padding:10px}}
/* Quiet enamel-sign navigation, matched to the miniature town. */
header{top:22px;left:26px;right:26px;gap:8px}header #directory,.language-switch,.beta-direct{height:40px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #6b53613d;box-shadow:0 2px 0 #30233115;border-radius:7px;font-size:11px;letter-spacing:.2px;padding:0 15px}.language-switch{background:#f4ebd6;color:#50374f;min-width:40px}.beta-direct{background:#e5e9d8;color:#3e5145;border-color:#879a6870}.beta-direct:hover{background:#d5dec3}header #directory{background:#faf6eb;color:#50374f}.ticket{background:#faf6eb;color:#50374f;border:1px solid #6b53613d;border-radius:7px;box-shadow:0 2px 0 #30233115}@media(max-width:760px){header{left:16px;right:16px;top:16px;gap:5px}header #directory,.language-switch{padding:0 10px;height:35px}.beta-direct{top:65px;right:16px;height:35px;padding:0 12px}}

/* Intro text sits directly on the town background, without a separate gradient panel. */
.welcome{background:none;}
/* Feather the reading area in every direction instead of ending a rectangular gradient. */
.welcome{background:none;isolation:isolate}
.welcome::before{content:"";position:absolute;z-index:-1;inset:-75px -115px -75px -85px;pointer-events:none;background:radial-gradient(ellipse at 30% 50%,rgba(228,225,204,.88) 0%,rgba(228,225,204,.65) 31%,rgba(228,225,204,.25) 55%,rgba(228,225,204,0) 74%);filter:blur(14px)}
@media(max-width:760px){.welcome::before{inset:-45px -60px -50px -55px;filter:blur(10px)}}

/* Wortmarke: Hoehe aus dem Seitenverhaeltnis, nicht aus dem height-Attribut. */
header img{height:auto}
/* Fusszeile lesbar in jeder Tageszeit, ohne durchgehendes Band am Seitenfuss. */
footer{gap:10px}
footer a,footer span{padding:5px 11px;border-radius:13px;background:radial-gradient(ellipse at 50% 50%,rgba(250,246,235,.88) 0%,rgba(250,246,235,.62) 52%,rgba(250,246,235,0) 82%)}
footer span{opacity:.72}
/* Schliessknopf: volles Touchziel, und die Augenbrauenzeile bricht davor um,
   statt darunter durchzulaufen. 72 px decken Knopf, Abstand und Scrollbalken. */
.close{right:8px;top:8px;min-width:44px;min-height:44px;padding:0;display:inline-flex;align-items:center;justify-content:center;line-height:1}
#eyebrow{display:block;padding-right:72px;line-height:1.5}
/* Lange Komposita ("Laufkundschaft.", "Unternehmerische") liefen bei 320 px aus
   dem Dialog heraus - gemessen 8 bzw. 42 px, der Dialog bekam Querscroll. */
dialog h2{overflow-wrap:break-word;hyphens:auto}