:root { --grund: #0e0a07; --papier: #1d1814; --tinte: #f2eadb; --leise: #b0a28e; --gold: #f0a050; --rot: #e0473a; --gut: #9dbca6;
  --schrift: 'Libre Baskerville', Georgia, serif; --kopf: 'Oswald', 'Arial Narrow', sans-serif; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--grund); color: var(--tinte); overflow: hidden; }
body { font-family: var(--schrift); -webkit-text-size-adjust: 100%; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
button { font: inherit; color: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

#szene { position: fixed; inset: 0; overflow: hidden; }
canvas.buehne { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#blende { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .4s ease; z-index: 9; }
#blende.zu { opacity: 1; }
#marken, #blasen { position: absolute; inset: 0; pointer-events: none; z-index: 3; }

.oben { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; z-index: 4;
  padding: max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left)); pointer-events: none; }
#ziel { margin: 0; pointer-events: none; font-family: var(--kopf); text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; color: var(--gold);
  background: rgba(14,10,7,.62); border-left: 3px solid var(--gold); padding: 7px 12px 6px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); max-width: 70vw; }
.knoepfe { pointer-events: auto; margin-left: auto; display: flex; gap: 8px; }
.rundknopf { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(242,234,219,.3); background: rgba(14,10,7,.6); cursor: pointer; font-size: 1.1rem; }
.rundknopf.aus { opacity: .45; text-decoration: line-through; }

/* Sprechblasen */
.blase { position: absolute; left: 0; top: 0; max-width: min(330px, 78vw); pointer-events: auto; cursor: pointer;
  background: rgba(250,244,232,.96); color: #2a2018; border-radius: 14px; padding: 10px 14px 10px; box-shadow: 0 8px 28px rgba(0,0,0,.45);
  font-size: .95rem; line-height: 1.45; opacity: 0; transition: opacity .2s; }
.blase.da { opacity: 1; }
.blase::after { content: ''; position: absolute; left: 50%; bottom: -9px; margin-left: -9px; border: 9px solid transparent; border-bottom: 0; border-top-color: rgba(250,244,232,.96); }
.blase .wer { display: block; font-family: var(--kopf); text-transform: uppercase; letter-spacing: .07em; font-size: .72rem; font-weight: 600; filter: brightness(.7) saturate(1.4); margin-bottom: 1px; }
.blase .tipp { float: right; margin-left: 8px; color: #a08060; font-size: .8rem; animation: wink 1.4s infinite; }
.blase.erzaehlt { left: 50%; top: max(64px, calc(env(safe-area-inset-top) + 52px)); transform: translateX(-50%) !important; background: rgba(14,10,7,.82); color: var(--tinte);
  font-style: italic; text-align: center; border: 1px solid rgba(242,234,219,.18); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); max-width: min(520px, 88vw); }
.blase.erzaehlt::after { display: none; }
.blase.erzaehlt .tipp { color: var(--gold); }
@keyframes wink { 50% { opacity: .3; } }

/* Takt-Spiel */
.ts-schirm { position: absolute; inset: 0; z-index: 6; touch-action: none; }
.taktspiel { position: absolute; left: 50%; transform: translateX(-50%); bottom: max(18px, env(safe-area-inset-bottom)); width: min(560px, calc(100vw - 24px));
  background: rgba(14,10,7,.88); border: 1px solid rgba(240,181,98,.35); border-radius: 16px; padding: 12px 14px 12px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 12px 40px rgba(0,0,0,.55); touch-action: none; }
.ts-kopf { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--kopf); text-transform: uppercase; letter-spacing: .08em; }
.ts-titel { color: var(--gold); font-size: .9rem; }
.ts-zaehler { color: var(--leise); font-size: .8rem; }
.taktspiel canvas { width: 100%; height: 132px; display: block; margin: 6px 0 2px; }
.ts-hinweis { margin: 0; font-size: .9rem; line-height: 1.45; color: #e2d8c6; text-align: center; min-height: 2.6em; }
.taktspiel[data-phase="Jetzt du"] .ts-titel::after { content: ' · Jetzt du!'; color: #fff; }
.taktspiel[data-phase="Hör zu"] .ts-titel::after { content: ' · Hör zu'; color: var(--leise); }
.taktspiel[data-phase="Jetzt du"] { border-color: rgba(255,236,200,.8); }
.ts-start { position: absolute; inset: 0; display: flex; gap: 14px; justify-content: center; align-items: flex-end; padding-bottom: 64px; background: rgba(14,10,7,.35); border-radius: 16px; }
.ts-start[hidden] { display: none; }
.ts-start .knopf { width: auto; padding: 12px 34px; margin: 0; }
.ts-spaeter { background: none; border: 0; color: var(--leise); font: inherit; font-size: .85rem; text-decoration: underline; padding: 12px 6px; cursor: pointer; }
.taktspiel.gelungen { border-color: var(--gut); }
.taktspiel.gescheitert { border-color: var(--rot); }

/* Vorhänge */
.vorhang { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 20px;
  background: linear-gradient(to bottom, rgba(10,7,5,.35), rgba(10,7,5,.82)); }
.vorhang[hidden] { display: none; }
.karte { width: min(460px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto; background: rgba(24,19,15,.9); border: 1px solid rgba(242,234,219,.14);
  border-radius: 18px; padding: 28px 26px 22px; box-shadow: 0 20px 60px rgba(0,0,0,.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.karte h1, .karte h2 { font-family: var(--kopf); text-transform: uppercase; letter-spacing: .14em; margin: 0 0 10px; color: var(--gold); }
.karte h1 { font-size: 2.6rem; }
.karte h2 { font-size: 1.5rem; }
.unter { font-style: italic; font-size: 1.05rem; line-height: 1.55; margin: 0 0 12px; }
.kurz { list-style: none; padding: 0; margin: 0 0 8px; font-size: .92rem; line-height: 1.8; color: #d8ccb8; }
.kurz b { font-family: var(--kopf); font-weight: 400; text-transform: uppercase; letter-spacing: .06em; color: var(--gold); font-size: .82rem; }
.leise { color: var(--leise); font-size: .84rem; line-height: 1.5; margin: 10px 0 0; }
.knopf { display: block; width: 100%; margin: 14px 0 4px; padding: 14px; background: #c2352a; border: 0; color: #fff; cursor: pointer; border-radius: 10px;
  font-family: var(--kopf); text-transform: uppercase; letter-spacing: .14em; font-size: 1rem; box-shadow: 0 6px 18px rgba(194,53,42,.35); }
.knopf.zweit { background: transparent; border: 1px solid var(--gold); color: var(--gold); box-shadow: none; }
ul.bilanz { padding-left: 1.1em; line-height: 1.6; font-size: .95rem; }

/* Fahrt: Lenkflächen, Krachkanone, Strecke, Kisten, Meldungen */
.fahrt-ui { display: none; }
body[data-modus="fahrt"] .fahrt-ui { display: block; }
body.spielt .fahrt-ui { display: none !important; }
/* Lenken am Telefon wie bei den Schrott-Karts: Finger auflegen und zur Seite ziehen, am Anschlag driftet der Bus */
#lenkfeld { position: absolute; z-index: 4; left: 0; bottom: 0; width: 70%; height: 60%; touch-action: none; cursor: grab; }
#lenkfeld .hinweis { position: absolute; left: max(20px, env(safe-area-inset-left)); bottom: max(40px, calc(env(safe-area-inset-bottom) + 20px)); padding: 10px 16px; border-radius: 24px;
  background: rgba(14,10,7,.55); border: 2px solid rgba(255,214,140,.45); color: #ffe0a8; font: 600 .9rem var(--kopf); letter-spacing: .1em; text-transform: uppercase; transition: opacity .2s; pointer-events: none; }
#lenkfeld.an .hinweis { opacity: 0; }
#schiene { display: none; position: absolute; width: 220px; height: 10px; margin-left: -110px; border-radius: 5px; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,140,40,.6) 0 6%, rgba(255,255,255,.14) 6% 94%, rgba(255,140,40,.6) 94%); border: 1px solid rgba(255,255,255,.25); }
#lenkfeld.an #schiene { display: block; }
#schiene i { position: absolute; top: -9px; left: calc(50% + var(--x, 0) * 110px - 14px); width: 28px; height: 28px; border-radius: 50%; background: #ffd080; box-shadow: 0 0 10px rgba(255,180,60,.7); }
#schiene.drift i { background: #ff8a30; box-shadow: 0 0 16px rgba(255,120,30,.95); }
#krach { position: absolute; z-index: 5; right: max(18px, env(safe-area-inset-right)); bottom: max(22px, env(safe-area-inset-bottom)); width: 96px; height: 96px; border-radius: 50%;
  border: 0; cursor: pointer; touch-action: none; color: #fff; font-family: var(--kopf); letter-spacing: .1em; font-size: 1rem; text-transform: uppercase;
  background: conic-gradient(#ff6a30 calc(var(--laden, 1) * 360deg), rgba(60,40,30,.8) 0); box-shadow: 0 6px 22px rgba(0,0,0,.5); }
#krach::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #5a2a18, #1a0e08); z-index: -1; }
#krach { isolation: isolate; }
#krach.bereit { animation: pochen2 .9s infinite; }
#krach:not(.bereit) { color: rgba(255,255,255,.4); }
#krach.feuer { transform: scale(1.15); }
@keyframes pochen2 { 50% { box-shadow: 0 0 0 10px rgba(255,120,50,.18), 0 6px 22px rgba(0,0,0,.5); } }
#strecke { position: absolute; z-index: 4; left: 50%; transform: translateX(-50%); top: max(58px, calc(env(safe-area-inset-top) + 48px)); width: min(420px, 74vw); height: 6px; border-radius: 3px; background: rgba(255,255,255,.18); }
#strecke i { position: absolute; top: -7px; width: 20px; height: 20px; margin-left: -10px; border-radius: 4px; background: #e8c890; box-shadow: 0 0 8px rgba(255,200,120,.6); }
#strecke b { position: absolute; right: 0; top: 10px; font: 600 .7rem var(--kopf); letter-spacing: .08em; color: #ff8a40; text-transform: uppercase; white-space: nowrap; }
#strecke em { position: absolute; left: 0; top: 10px; font: .7rem var(--kopf); font-style: normal; letter-spacing: .08em; color: #ff6a58; text-transform: uppercase; white-space: nowrap; }
body[data-modus="fahrt"] .blase.erzaehlt { top: max(118px, calc(env(safe-area-inset-top) + 108px)); }
#kisten { position: absolute; z-index: 4; left: 50%; transform: translateX(-50%); top: max(84px, calc(env(safe-area-inset-top) + 74px)); display: flex; gap: 5px; }
#kisten span { width: 18px; height: 16px; border-radius: 3px; background: #c8964e; box-shadow: inset 0 0 0 2px #7a5228; }
#kisten span.leer { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 2px rgba(255,255,255,.2); }
#meldung { position: absolute; z-index: 5; left: 50%; top: 36%; transform: translate(-50%, -50%) scale(.9); max-width: 86vw; text-align: center; pointer-events: none;
  font: 600 1.15rem var(--kopf); letter-spacing: .06em; text-transform: uppercase; color: #fff2dc; text-shadow: 0 2px 10px rgba(0,0,0,.8); opacity: 0; transition: opacity .25s, transform .25s; }
#meldung.da { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#meldung.warn { color: #ffb070; } #meldung.gut { color: #a8f0b0; }

/* Stadtplan */
canvas.plan, #plan canvas { width: 100%; aspect-ratio: 1 / 1; display: block; border-radius: 12px; margin: 6px 0 10px; }
#plan .karte { cursor: pointer; }

/* Namensschilder über antippbaren Dingen */
#schilder { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.schild { position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer; border: 0; white-space: nowrap;
  font: 600 .72rem var(--kopf); letter-spacing: .08em; text-transform: uppercase; color: #f2e6d2; padding: 5px 10px 4px; border-radius: 12px;
  background: rgba(14,10,7,.62); box-shadow: 0 2px 8px rgba(0,0,0,.4); transition: background .15s, color .15s; }
.schild.ziel { background: rgba(240,160,80,.92); color: #241408; animation: pochen3 1.2s infinite; }
.schild.schweb, .schild:hover { background: #ffe0a8; color: #241408; }
.schild.nah::after { content: 'E'; display: inline-block; margin-left: 7px; padding: 0 5px; border-radius: 4px; background: #241408; color: #ffd890; font-size: .66rem; }
@keyframes pochen3 { 50% { box-shadow: 0 0 0 6px rgba(240,160,80,.25), 0 2px 8px rgba(0,0,0,.4); } }

/* Fahrt: Blitz, Tacho, Gefahr, Takt am Krach-Knopf, Desktop-Hilfe */
#blitz { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 60%, rgba(255,230,190,.9), rgba(255,140,60,.4) 60%, transparent); }
body.gefahr #szene::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2; box-shadow: inset 0 0 90px rgba(255,40,20,.45); animation: wink 0.5s infinite; }
#tacho-box { position: absolute; z-index: 4; right: max(16px, env(safe-area-inset-right)); top: max(112px, calc(env(safe-area-inset-top) + 100px)); text-align: right; font-family: var(--kopf); color: #ffe0b0; text-shadow: 0 2px 8px rgba(0,0,0,.7); }
#tacho { font-size: 1.6rem; font-weight: 600; } #tacho-box small { display: block; font-size: .65rem; letter-spacing: .1em; opacity: .7; }
#krach.schlag.bereit { box-shadow: 0 0 0 12px rgba(255,200,120,.35), 0 0 30px rgba(255,140,60,.8); }
#krach.schlag:not(.bereit) { box-shadow: 0 0 0 4px rgba(255,200,120,.15); }
#meldung.takt { color: #fff; font-size: 1.6rem; text-shadow: 0 0 18px #ff9a40, 0 2px 10px rgba(0,0,0,.8); }
#tasten-hilfe { display: none; position: absolute; z-index: 4; left: 50%; transform: translateX(-50%); bottom: 132px; margin: 0; width: max-content; max-width: 92vw; text-align: center; line-height: 1.9;
  font: .78rem var(--kopf); letter-spacing: .06em; color: rgba(255,236,210,.75); text-shadow: 0 1px 6px rgba(0,0,0,.8); }
#tasten-hilfe b { color: #ffd890; font-weight: 600; padding: 1px 5px; border: 1px solid rgba(255,216,144,.5); border-radius: 4px; }
@media (hover: hover) and (pointer: fine) {
  #lenkfeld { display: none; }
  #tasten-hilfe { display: block; }
  #krach { width: 84px; height: 84px; right: auto; left: 50%; transform: translateX(-50%); }
  #krach.feuer { transform: translateX(-50%) scale(1.15); }
}
body.tasten #lenkfeld { display: none; }
body.tasten #tasten-hilfe { display: block; }
body.tasten #krach { right: auto; left: 50%; transform: translateX(-50%); }
body.tasten #krach.feuer { transform: translateX(-50%) scale(1.15); }

/* Ruf: Meldung rechts oben, wenn ein Genre dich besser kennt */
#ruf { position: absolute; z-index: 6; right: max(14px, env(safe-area-inset-right)); top: max(70px, calc(env(safe-area-inset-top) + 60px)); width: min(270px, 70vw);
  padding: 10px 12px; border-radius: 12px; background: rgba(20,14,10,.88); border: 1px solid var(--farbe, #e0a060); box-shadow: 0 6px 22px rgba(0,0,0,.5), 0 0 18px color-mix(in srgb, var(--farbe, #e0a060) 35%, transparent);
  opacity: 0; transform: translateX(20px); transition: opacity .3s, transform .3s; pointer-events: none; font-family: var(--kopf); color: #f2e6d2; }
#ruf.da { opacity: 1; transform: none; }
#ruf .kopf { margin: 0 0 6px; font-size: .8rem; letter-spacing: .06em; }
#ruf .kopf b { color: var(--farbe); text-transform: uppercase; } #ruf .kopf span { opacity: .7; font-size: .72rem; }
#ruf .neu { margin: 8px 0 0; font-size: .82rem; line-height: 1.35; } #ruf .neu b { color: var(--farbe); text-transform: uppercase; letter-spacing: .1em; }
.leiste { position: relative; height: 7px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; }
.leiste i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--farbe); border-radius: 4px; transition: width .8s; }
.leiste s { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: rgba(0,0,0,.55); }
.rufliste { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 10px; }
.rufliste li { font-family: var(--kopf); }
.rufliste p { margin: 0 0 4px; display: flex; justify-content: space-between; font-size: .82rem; letter-spacing: .06em; }
.rufliste p b { color: var(--farbe); text-transform: uppercase; } .rufliste p span { opacity: .75; }
.rufliste small { display: block; font-size: .72rem; opacity: .5; margin-top: 3px; } .rufliste small.frei { opacity: 1; color: #a8f0b0; }

/* Figur bauen: unten als Blatt (Telefon), rechts als Spalte (Desktop) */
#bau { position: fixed; z-index: 21; left: 0; right: 0; bottom: 0; max-height: 56dvh; overflow-y: auto; padding: 14px max(16px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgba(24,19,15,.93); border-top: 1px solid rgba(242,234,219,.16); border-radius: 18px 18px 0 0; color: #f2e6d2; }
#bau[hidden] { display: none; }
#bau h2 { margin: 0; font-family: var(--kopf); text-transform: uppercase; letter-spacing: .14em; color: var(--gold); font-size: 1.3rem; }
#bau .leise { margin: 2px 0 10px; }
.bau-zeile { display: flex; align-items: center; gap: 10px; margin: 0 0 9px; }
.bau-name { flex: 0 0 82px; font: .74rem var(--kopf); letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.bau-wahl { display: flex; flex-wrap: wrap; gap: 6px; }
.bau-wahl button { border: 1px solid rgba(242,234,219,.25); background: rgba(255,255,255,.05); color: #f2e6d2; border-radius: 16px; padding: 6px 11px; font: .8rem var(--kopf); letter-spacing: .04em; cursor: pointer; }
.bau-wahl button.an { background: var(--gold); color: #241408; border-color: var(--gold); }
.bau-wahl button.farbe { width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 2px solid rgba(0,0,0,.4); }
.bau-wahl button.farbe.an { outline: 3px solid var(--gold); outline-offset: 2px; }
.bau-knoepfe { display: flex; gap: 10px; position: sticky; bottom: calc(-1 * max(14px, env(safe-area-inset-bottom))); padding: 8px 0 max(14px, env(safe-area-inset-bottom)); margin-bottom: calc(-1 * max(14px, env(safe-area-inset-bottom))); background: rgba(24,19,15,.97); } .bau-knoepfe .knopf { margin: 0; }
@media (min-aspect-ratio: 1/1) {
  #bau { left: auto; right: 24px; bottom: auto; top: 50%; transform: translateY(-50%); width: 400px; max-height: calc(100dvh - 48px); border-radius: 18px; border: 1px solid rgba(242,234,219,.16); }
}
body[data-modus="bau"] .oben #ziel { display: none; }

/* Antworten: unten in der Mitte, groß genug für den Daumen */
.wahl { position: absolute; z-index: 7; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translate(-50%, 10px); width: min(480px, calc(100vw - 24px));
  display: grid; gap: 8px; padding: 12px; border-radius: 16px; background: rgba(14,10,7,.88); border: 1px solid rgba(240,208,160,.35); box-shadow: 0 12px 40px rgba(0,0,0,.55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity .2s, transform .2s; }
.wahl.da { opacity: 1; transform: translate(-50%, 0); }
.wahl .wer { font: 600 .72rem var(--kopf); letter-spacing: .08em; text-transform: uppercase; color: #f0d0a0; }
.wahl button { display: flex; gap: 10px; align-items: baseline; text-align: left; padding: 11px 14px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(242,234,219,.2); background: rgba(250,244,232,.06); color: var(--tinte); font-size: .95rem; line-height: 1.4; }
.wahl button:hover, .wahl button:focus-visible { background: rgba(240,160,80,.22); border-color: var(--gold); outline: none; }
.wahl button i { font: 600 .7rem var(--kopf); font-style: normal; color: var(--gold); flex: 0 0 auto; }
@media (pointer: coarse) { .wahl button i { display: none; } }

/* Belauschte Gespräche: kleiner, durchscheinend, nicht antippbar */
.blase.murmel { pointer-events: none; max-width: min(250px, 66vw); font-size: .82rem; padding: 7px 11px; background: rgba(250,244,232,.78); }
.blase.murmel::after { border-top-color: rgba(250,244,232,.78); }
.blase.murmel.da { opacity: .92; }

/* Funk Fünf während der Fahrt */
#funk { position: absolute; z-index: 4; left: max(14px, env(safe-area-inset-left)); top: max(112px, calc(env(safe-area-inset-top) + 100px)); width: min(300px, 62vw); margin: 0;
  padding: 8px 11px; border-radius: 10px; background: rgba(14,10,7,.7); border-left: 3px solid #c8e040; font-size: .8rem; line-height: 1.4; color: #e8e8d0;
  opacity: 0; transform: translateX(-12px); transition: opacity .3s, transform .3s; pointer-events: none; }
#funk.da { opacity: 1; transform: none; }
#funk b { display: block; font: 600 .66rem var(--kopf); letter-spacing: .1em; text-transform: uppercase; color: #c8e040; margin-bottom: 2px; }
#funk b::before { content: '◉ '; animation: wink 1s infinite; }

/* Kapitelkarte */
#kapitel { position: absolute; z-index: 8; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; opacity: 0; transition: opacity .6s;
  background: radial-gradient(circle, rgba(10,7,5,.75), rgba(10,7,5,.35) 70%); }
#kapitel.da { opacity: 1; }
#kapitel small { font: .9rem var(--kopf); letter-spacing: .3em; text-transform: uppercase; color: var(--leise); }
#kapitel b { font: 600 clamp(2rem, 8vw, 3.6rem) var(--kopf); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); text-shadow: 0 4px 30px rgba(0,0,0,.8); }

/* Notizbuch */
#knopf-notizen.neu { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(240,160,80,.25); animation: pochen3 1.2s infinite; }
#ruf .notiz { margin: 0; font-family: var(--schrift); font-style: italic; font-size: .88rem; }
.notizbuch h4 { margin: 14px 0 6px; font: 600 .78rem var(--kopf); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.notizbuch p { margin: 0 0 8px; font-size: .88rem; line-height: 1.5; color: #e2d8c6; }
.notizbuch p b { display: block; color: var(--tinte); }
.notizbuch p.leer { color: var(--leise); font-style: italic; }
#ende h3 { margin: 18px 0 4px; font: 600 .82rem var(--kopf); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
#ende .vorweg { margin: 0 0 2px; text-transform: uppercase; letter-spacing: .2em; }
body.skizze #szene > :not(canvas), body.skizze .vorhang, body.skizze #bau { display: none !important; }

/* Uhr und Ziel oben links */
.oben .links { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; pointer-events: none; }
#uhr { margin: 0; font: 600 .78rem var(--kopf); letter-spacing: .1em; text-transform: uppercase; color: #e8e0d0; background: rgba(14,10,7,.62); padding: 5px 10px 4px; border-radius: 4px; }
body[data-modus="menue"] #uhr, body[data-modus="bau"] #uhr { display: none; }
.notizbuch p.person { position: relative; padding-bottom: 8px; }
.notizbuch p.person span { color: var(--farbe); }
.notizbuch p.person::after { content: ''; position: absolute; left: 0; bottom: 0; height: 4px; width: var(--wert); background: var(--farbe); border-radius: 2px; opacity: .7; }
@media (max-aspect-ratio: 1/1) { #ruf { top: max(150px, calc(env(safe-area-inset-top) + 140px)); } }

/* Nachtschicht: Rückspiegel oben, darunter Strecke und Säcke, darunter Fahrgäste und Funk; Halteknopf rechts unten */
.fahrt-ui { --sp-top: max(50px, calc(env(safe-area-inset-top) + 42px)); --sp-w: min(400px, 60vw); --sp-h: calc(var(--sp-w) * .36); }
body[data-modus="fahrt"] #ziel { display: none; }
#spiegel { position: absolute; z-index: 4; left: 50%; top: var(--sp-top); transform: translateX(-50%); width: var(--sp-w); height: var(--sp-h); pointer-events: none;
  border: 5px solid #141210; border-radius: 16px / 22px; box-shadow: 0 6px 24px rgba(0,0,0,.6), inset 0 0 18px rgba(0,0,0,.8); }
#spiegel b { position: absolute; left: 8px; bottom: 5px; font: 600 .62rem var(--kopf); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,240,210,.8); text-shadow: 0 1px 4px #000; }
body[data-modus="fahrt"] #strecke { top: calc(var(--sp-top) + var(--sp-h) + 16px); }
body[data-modus="fahrt"] #kisten { top: calc(var(--sp-top) + var(--sp-h) + 38px); }
body[data-modus="fahrt"] #tacho-box { top: calc(var(--sp-top) + 4px); }
#funk { display: none !important; }
#fahrgast { position: absolute; z-index: 5; left: 50%; transform: translateX(-50%); top: calc(var(--sp-top) + var(--sp-h) + 64px); width: min(480px, 92vw); pointer-events: none; display: grid; gap: 8px; }
#fahrgast .zeile { margin: 0; padding: 8px 12px; border-radius: 10px; background: rgba(10,10,14,.78); color: #ece6da; font-size: .92rem; line-height: 1.45; text-align: center;
  opacity: 0; transform: translateY(-4px); transition: opacity .3s, transform .3s; text-shadow: 0 1px 3px #000; }
#fahrgast .zeile.da { opacity: 1; transform: none; }
#fahrgast .zeile.erzaehlt { font-style: italic; color: #cfc8bc; }
#fahrgast .zeile b { display: block; font: 600 .66rem var(--kopf); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1px; }
.nachtwahl { position: relative; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; pointer-events: auto; padding-top: 6px; }
.nachtwahl i { position: absolute; left: 10%; right: 10%; top: 0; height: 3px; border-radius: 2px; background: #f0b060; transform-origin: left; animation: ablauf linear forwards; }
@keyframes ablauf { to { transform: scaleX(0); } }
.nachtwahl button { border: 1px solid rgba(240,200,140,.6); background: rgba(20,16,12,.88); color: #f6ead6; border-radius: 18px; padding: 8px 14px; font-size: .88rem; cursor: pointer; touch-action: manipulation; }
.nachtwahl button:hover { background: rgba(240,160,80,.3); }
#halten { position: absolute; z-index: 5; right: max(16px, env(safe-area-inset-right)); bottom: calc(max(22px, env(safe-area-inset-bottom)) + 112px); min-width: 130px; padding: 9px 16px 8px;
  border: 0; border-radius: 14px; background: #f0c020; color: #1a1408; cursor: pointer; touch-action: none; box-shadow: 0 6px 20px rgba(0,0,0,.5); text-align: center; font-family: var(--kopf); }
#halten span { display: block; font-weight: 600; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
#halten b { display: block; font-size: 1.15rem; letter-spacing: .04em; }
#halten small { display: block; font-size: .7rem; opacity: .75; }
#halten.wunsch { background: #ff5a3a; color: #fff; animation: pochen2 .8s infinite; }
#halten.null { background: rgba(60,64,72,.8); color: #c8ccd4; }
@media (hover: hover) and (pointer: fine) { #halten { bottom: max(22px, env(safe-area-inset-bottom)); } }
body.tasten #halten { bottom: max(22px, env(safe-area-inset-bottom)); }
@media (max-aspect-ratio: 1/1) { .fahrt-ui { --sp-w: 66vw; } }
body[data-modus="fahrt"] #meldung { top: 58%; }
#kassette { position: absolute; z-index: 5; right: max(16px, env(safe-area-inset-right)); top: calc(var(--sp-top) + 64px); padding: 6px 12px 5px; border-radius: 10px; cursor: pointer; touch-action: none;
  border: 1px solid rgba(240,200,140,.5); background: rgba(20,16,12,.8); color: #f0e0c8; font-family: var(--kopf); text-align: left; }
#kassette span { display: block; font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
#kassette b { font-size: .9rem; letter-spacing: .04em; }
#kassette b::before { content: '▶ '; color: #f0b060; }
.notizbuch p.regel { cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.notizbuch p.regel.hand-maschine { font-family: 'Courier New', monospace; font-size: .84rem; }
.notizbuch p.regel.hand-hannes { font-family: 'Caveat', 'Segoe Print', cursive; font-size: 1.15rem; line-height: 1.25; color: #c8d8f0; }
.notizbuch p.regel.hand-fremd { font-family: 'Caveat', 'Segoe Print', cursive; font-size: 1.15rem; line-height: 1.25; color: #e07060; }
.notizbuch p.regel.zweifel { text-decoration: line-through; opacity: .6; }
.notizbuch p.regel.zweifel::after { content: '  ? zweifelhaft'; font: italic .72rem var(--schrift); color: #f0b060; text-decoration: none; display: inline-block; }