/* 112 Dein Einsatz. Die Buehne ist immer 1920 mal 1080 und wird nur skaliert. */

@font-face { font-family: 'Chewy'; src: url(../assets/schriften/chewy-400-latin.woff2) format('woff2'); font-display: block; }
@font-face { font-family: 'Fredoka'; font-weight: 600; src: url(../assets/schriften/fredoka-600-latin.woff2) format('woff2'); font-display: block; unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: 'Fredoka'; font-weight: 600; src: url(../assets/schriften/fredoka-600-latin-ext.woff2) format('woff2'); font-display: block; unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: 'Caveat'; font-weight: 700; src: url(../assets/schriften/caveat-700-latin.woff2) format('woff2'); font-display: block; }
@font-face { font-family: 'Barlow Semi Condensed'; font-weight: 600; src: url(../assets/schriften/barlow-semi-condensed-600-latin.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-weight: 800; src: url(../assets/schriften/barlow-semi-condensed-800-latin.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 600; src: url(../assets/schriften/barlow-600-latin.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 800; src: url(../assets/schriften/barlow-800-latin.woff2) format('woff2'); }

:root {
  --marine: #08236A;
  --marine-tief: #061a52;
  --rot: #BC1010;
  --signal: #E2231A;
  --himmel: #DCEBFA;
  --gelb: #F4DE12;
  --creme: #FFF7EA;
  --gruen: #2f9e5b;
  --weiss: #ffffff;
  --schatten: 0 10px 0 rgba(6, 26, 82, 0.18), 0 22px 44px rgba(6, 26, 82, 0.22);
}

[hidden] { display: none !important; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0b1a3d; overflow: hidden; }
body { font-family: 'Fredoka', 'Nunito', system-ui, sans-serif; color: var(--marine); -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; touch-action: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

#buehne {
  position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px;
  transform: translate(-50%, -50%) scale(var(--skala, 0.5));
  overflow: hidden; background: #fff0d6;
}
#welt { position: absolute; inset: 0; width: 1920px; height: 1080px; display: block; }

.klein { display: block; font-size: 22px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.75; font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 600; }
.hand { font-family: 'Caveat', cursive; font-weight: 700; }
.hand .k { color: var(--signal); }

/* Tastenbild */
.taste { display: inline-flex; align-items: center; justify-content: center; min-width: 54px; height: 54px; padding: 0 14px; margin-right: 16px; border-radius: 27px; background: var(--marine); color: #fff; font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 800; font-size: 28px; box-shadow: inset 0 -5px 0 rgba(0,0,0,0.25); }
.taste.lang { font-size: 22px; }

/* Knoepfe */
.knopf { display: inline-flex; align-items: center; gap: 0; padding: 18px 34px 18px 18px; border-radius: 26px; background: #fff; color: var(--marine); font-size: 34px; box-shadow: var(--schatten); transition: transform 0.12s ease, box-shadow 0.12s ease; }
.knopf.haupt { background: var(--signal); color: #fff; }
.knopf.haupt .taste { background: #fff; color: var(--signal); }
.knopf.aus { opacity: 0.45; }
.fokus, .knopf:hover { outline: 6px solid var(--gelb); outline-offset: 4px; transform: translateY(-3px); }

/* Blasen */
.blase { position: relative; background: #fff; color: var(--marine); font-family: 'Chewy', cursive; font-size: 40px; line-height: 1.1; padding: 22px 30px; border-radius: 30px; box-shadow: var(--schatten); }
.blase::after { content: ''; position: absolute; left: var(--zipfel, 70%); bottom: -26px; border: 16px solid transparent; border-top: 18px solid #fff; border-bottom: 0; transform: translateX(-50%); }
.blase.gross { font-size: 52px; }

/* Bilder ueber der Welt */
.bild { position: absolute; inset: 0; }

/* ---------------- Start ---------------- */
#bild-start { background: linear-gradient(90deg, rgba(8,35,106,0.82) 0%, rgba(8,35,106,0.55) 42%, rgba(8,35,106,0) 70%); }
.logo-karte { position: absolute; left: 64px; top: 56px; background: #fff; border-radius: 22px; padding: 18px 26px; box-shadow: var(--schatten); }
.logo-karte img { display: block; height: 92px; }
.titel { position: absolute; left: 86px; top: 250px; color: #fff; }
.titel { top: 230px; }
.titel-wort { font-size: 250px; line-height: 0.82; color: #fff; text-shadow: 0 10px 0 rgba(6,26,82,0.45), 0 26px 50px rgba(0,0,0,0.3); transform: rotate(-4deg); transform-origin: left center; }
.titel-frage { font-size: 112px; line-height: 1; margin: 18px 0 0 26px; color: #fff; text-shadow: 0 7px 0 rgba(6,26,82,0.45); transform: rotate(-4deg); transform-origin: left center; }
.titel-unter { margin: 40px 0 0 34px; display: inline-block; background: rgba(255,255,255,0.94); color: var(--marine); font-family: 'Chewy', cursive; font-size: 40px; padding: 8px 26px; border-radius: 22px; box-shadow: var(--schatten); }
.start-knopf { position: absolute; left: 86px; bottom: 150px; display: flex; align-items: center; background: #fff; color: var(--marine); font-family: 'Chewy', cursive; font-size: 54px; padding: 20px 40px 20px 22px; border-radius: 40px; box-shadow: var(--schatten); animation: pulsieren 1.6s ease-in-out infinite; cursor: pointer; }
@keyframes pulsieren { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.start-steuerung { position: absolute; left: 90px; bottom: 76px; color: #fff; font-size: 28px; opacity: 0.9; }
.start-rangliste { position: absolute; left: 760px; top: 56px; width: 430px; background: rgba(255,255,255,0.94); border-radius: 26px; padding: 22px 28px; box-shadow: var(--schatten); }
.start-rangliste:empty { display: none; }
.start-rangliste h3 { margin: 0 0 10px; font-family: 'Chewy', cursive; font-size: 36px; font-weight: 400; }
.start-rangliste ol { margin: 0; padding: 0; list-style: none; font-size: 26px; }
.start-rangliste li { display: flex; justify-content: space-between; padding: 4px 0; border-top: 2px solid rgba(8,35,106,0.08); }
.start-rangliste li b { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 800; }

/* ---------------- Meldung ---------------- */
#bild-meldung { background: linear-gradient(90deg, rgba(8,35,106,0.8), rgba(8,35,106,0.35) 60%, rgba(8,35,106,0.1)); }
.melder { position: absolute; left: 90px; top: 110px; width: 900px; background: #22262d; border-radius: 48px; padding: 30px; box-shadow: 0 30px 60px rgba(0,0,0,0.4), inset 0 -10px 0 rgba(0,0,0,0.3); animation: melderRein 0.6s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes melderRein { from { transform: translateY(-60px) rotate(-4deg); opacity: 0; } }
.melder-kopf { display: flex; justify-content: space-between; align-items: center; color: #fff; font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 800; font-size: 34px; padding: 0 12px 18px; }
.alarm { background: var(--signal); padding: 6px 22px; border-radius: 14px; animation: blinken 0.5s steps(2) infinite; }
@keyframes blinken { 50% { opacity: 0.25; } }
.melder-anzeige { background: linear-gradient(180deg, #d8ecc2, #bcd9a0); border-radius: 22px; padding: 26px 34px; color: #1c2b14; box-shadow: inset 0 4px 12px rgba(0,0,0,0.25); }
.ml-zeile { padding: 10px 0; }
.ml-zeile + .ml-zeile { border-top: 2px dashed rgba(28,43,20,0.25); }
.ml-zeile b { display: block; font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 800; font-size: 44px; line-height: 1.12; }
.ml-zeile .klein { color: #3b5527; }
.meldung-steuerung { position: absolute; left: 90px; top: 700px; width: 900px; color: #fff; font-size: 32px; line-height: 1.35; }
.meldung-steuerung p { margin: 0 0 8px; display: flex; align-items: center; }
.knopf-zeile { position: absolute; left: 90px; bottom: 70px; display: flex; gap: 24px; }

/* ---------------- HUD ---------------- */
#hud { position: absolute; inset: 0; pointer-events: none; color: #fff; }
.weg { position: absolute; left: 50%; top: 34px; transform: translateX(-50%); width: 780px; height: 74px; display: flex; align-items: center; gap: 14px; background: rgba(8,35,106,0.86); border-radius: 37px; padding: 0 24px; box-shadow: var(--schatten); }
.weg-start, .weg-ziel { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #fff; position: relative; }
.weg-start::after { content: ''; position: absolute; inset: 9px; background: var(--signal); border-radius: 3px; }
.weg-ziel { background: var(--signal); }
.weg-ziel::after { content: ''; position: absolute; inset: 10px; background: #fff; border-radius: 50%; }
.weg-band { position: relative; flex: 1; height: 14px; border-radius: 7px; background: rgba(255,255,255,0.22); }
.weg-fuell { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 7px; background: var(--gelb); width: 0; }
.weg-rtw { position: absolute; top: 50%; width: 46px; height: 28px; margin-left: -23px; transform: translateY(-50%); background: var(--gelb); border: 4px solid var(--signal); border-radius: 8px; left: 0; }
.weg-uhr { flex: none; display: flex; align-items: center; gap: 10px; margin-right: -12px; background: rgba(255,255,255,0.14); border-radius: 26px; padding: 4px 18px 4px 8px; }
.weg-uhr b { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 800; font-size: 42px; min-width: 92px; text-align: right; }
.weg-uhr-zeiger { width: 40px; height: 40px; border-radius: 50%; border: 5px solid #fff; position: relative; }
.weg-uhr-zeiger::after { content: ''; position: absolute; left: 50%; top: 4px; width: 4px; height: 13px; margin-left: -2px; background: #fff; border-radius: 2px; transform-origin: 50% 100%; animation: zeiger 1s steps(8) infinite; }
@keyframes zeiger { to { transform: rotate(360deg); } }
.weg.knapp .weg-uhr { background: var(--signal); animation: uhrPuls 1s ease-in-out infinite; }
.weg.vorbei .weg-uhr { background: rgba(255,255,255,0.08); opacity: 0.7; }
.weg.vorbei .weg-uhr-zeiger::after { animation: none; }
@keyframes uhrPuls { 50% { transform: scale(1.08); } }
.horn { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; background: rgba(8,35,106,0.82); color: #fff; padding: 8px 10px 8px 16px; border-radius: 30px; font-size: 26px; box-shadow: var(--schatten); }
.horn b { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.7; }
.horn .taste { margin: 0 0 0 4px; min-width: 44px; height: 44px; font-size: 22px; background: #fff; color: var(--marine); }
.horn-licht { width: 22px; height: 22px; border-radius: 50%; background: #5b6476; }
.horn.an { background: var(--signal); }
.horn.an b { opacity: 1; }
.horn.an .horn-licht { background: #8fd0ff; box-shadow: 0 0 18px 6px rgba(80,160,255,0.85); animation: blinken 0.45s steps(2) infinite; }
.ml-schicht { position: absolute; left: 120px; top: 44px; background: var(--gelb); color: var(--marine); font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 800; font-size: 32px; padding: 6px 22px; border-radius: 18px; box-shadow: var(--schatten); }
.ml-schicht:empty { display: none; }
.sicherheit { position: absolute; right: 40px; top: 34px; width: 330px; background: rgba(8,35,106,0.86); border-radius: 26px; padding: 14px 22px; box-shadow: var(--schatten); }
.sicherheit .balken { height: 16px; border-radius: 8px; background: rgba(255,255,255,0.2); margin: 8px 70px 0 0; overflow: hidden; }
.sicherheit .balken div { height: 100%; width: 100%; background: linear-gradient(90deg, #6fd18a, #b9ef7a); border-radius: 8px; transition: width 0.4s ease; }
.sicherheit b { position: absolute; right: 22px; bottom: 10px; font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 800; font-size: 40px; }
.sicherheit.verlust { animation: verlust 0.5s ease; }
@keyframes verlust { 30% { transform: scale(1.08); background: rgba(226,35,26,0.95); } }
/* Navi unten links */
.navi { position: absolute; left: 36px; bottom: 34px; width: 452px; background: rgba(8,35,106,0.94); border-radius: 32px; padding: 12px 14px 14px; box-shadow: var(--schatten); border: 4px solid rgba(255,255,255,0.9); }
.navi-kopf { display: flex; align-items: center; gap: 14px; height: 70px; padding: 0 8px 8px; }
.navi-kopf b { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 800; font-size: 40px; white-space: nowrap; }
.navi-karte { position: relative; width: 420px; height: 270px; border-radius: 22px; overflow: hidden; background: #eef1e6; }
.navi-karte canvas { display: block; width: 420px; height: 270px; }
.navi-rest { position: absolute; right: 12px; bottom: 10px; background: rgba(8,35,106,0.88); color: #fff; font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 800; font-size: 26px; padding: 4px 14px; border-radius: 14px; }
.navi-pfeil { flex: none; width: 62px; height: 62px; border-radius: 16px; background: var(--gelb); position: relative; }
.navi-pfeil::before { content: ''; position: absolute; left: 50%; top: 52%; width: 22px; height: 26px; border: 8px solid var(--marine); border-left: 0; border-bottom: 0; transform: translate(-60%, -30%); border-top-right-radius: 10px; }
.navi-pfeil::after { content: ''; position: absolute; left: 50%; top: 20%; border: 13px solid transparent; border-left: 16px solid var(--marine); transform: translate(10%, -6%); }
.navi-pfeil.links { transform: scaleX(-1); }
.navi-pfeil.ziel { background: var(--signal); }
.navi-pfeil.ziel::before { border: 0; width: 10px; height: 34px; background: #fff; border-radius: 3px; transform: translate(-50%, -50%); top: 50%; }
.navi-pfeil.ziel::after { border: 0; width: 34px; height: 10px; background: #fff; border-radius: 3px; transform: translate(-50%, -50%); top: 50%; }
.abzug { position: absolute; right: 60px; top: 130px; font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 800; font-size: 54px; color: #fff; text-shadow: 0 4px 0 var(--signal), 0 8px 20px rgba(0,0,0,0.35); opacity: 0; }
.abzug.an { animation: abzug 1.4s ease-out; }
@keyframes abzug { 0% { opacity: 0; transform: translateY(-10px) scale(0.6); } 15% { opacity: 1; transform: none; } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(30px); } }
.tacho { position: absolute; right: 50px; bottom: 44px; width: 220px; height: 220px; border-radius: 50%; background: rgba(8,35,106,0.9); border: 8px solid #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: var(--schatten); }
.tacho b { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 800; font-size: 86px; line-height: 0.9; }
.tacho span { font-size: 26px; opacity: 0.8; }
.schild { position: absolute; left: -80px; top: -40px; width: 110px; height: 110px; border-radius: 50%; background: #fff; border: 14px solid var(--signal); color: #111; display: none; align-items: center; justify-content: center; font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 800; font-size: 48px; }
.tacho.kreuzung .schild { display: flex; }
.tacho.kreuzung.ok .schild { border-color: var(--gruen); }
.tacho.kreuzung:not(.ok) .schild { animation: pulsieren 0.6s ease-in-out infinite; }
#hud.cockpit .meldung { top: 300px; }
.meldung { position: absolute; left: 50%; top: 150px; transform: translateX(-50%); text-align: center; font-family: 'Chewy', cursive; font-size: 54px; color: #fff; text-shadow: 0 5px 0 rgba(6,26,82,0.6), 0 10px 26px rgba(0,0,0,0.3); white-space: nowrap; }
.meldung .zeile { display: inline-block; background: rgba(8,35,106,0.88); padding: 14px 34px; border-radius: 26px; text-shadow: none; animation: blaseRein 0.35s cubic-bezier(.2,1.5,.4,1) both; }
.meldung .zeile.warn { background: var(--signal); }
.meldung .zeile.gut { background: var(--gruen); }
.countdown { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); font-family: 'Chewy', cursive; font-size: 260px; color: #fff; text-shadow: 0 14px 0 var(--signal), 0 26px 50px rgba(0,0,0,0.35); }
.countdown .z { display: inline-block; animation: zaehler 0.9s ease-out both; }
@keyframes zaehler { from { transform: scale(2.2); opacity: 0; } 25% { transform: scale(1); opacity: 1; } to { transform: scale(0.9); opacity: 0; } }
.tasten-hilfe { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); display: flex; gap: 26px; font-size: 26px; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,0.5); }
.tasten-hilfe .taste { min-width: 44px; height: 44px; font-size: 22px; margin-right: 10px; }
.tasten-hilfe span { display: flex; align-items: center; }
.touch { position: absolute; inset: 0; pointer-events: auto; }
.touch button { position: absolute; bottom: 40px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255,255,255,0.25); border: 6px solid rgba(255,255,255,0.7); color: #fff; font-family: 'Chewy', cursive; font-size: 34px; }
.touch .t-links { left: 330px; } .touch .t-rechts { left: 560px; }
.touch .t-bremse { right: 520px; } .touch .t-gas { right: 290px; }
.touch .t-links::after, .touch .t-rechts::after { content: ''; position: absolute; left: 50%; top: 50%; border: 34px solid transparent; }
.touch .t-links::after { border-right: 46px solid #fff; transform: translate(-75%, -50%); }
.touch .t-rechts::after { border-left: 46px solid #fff; transform: translate(-25%, -50%); }

/* ---------------- Einsatz in 2D ---------------- */
#einsatz { position: absolute; inset: 0; background: #e9e2cf; }
.szene { position: absolute; inset: 0; transform-origin: 62% 70%; transition: transform 1.2s cubic-bezier(.4,0,.2,1); }
.szene.nah { transform: scale(1.12) translateX(-60px); }
.szene.wechsel { opacity: 0; }
.szene { transition: transform 1.2s cubic-bezier(.4,0,.2,1), opacity 0.5s ease; }
.hintergrund { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.blaulicht-schein { position: absolute; left: 230px; top: 470px; width: 520px; height: 260px; background: radial-gradient(ellipse at 50% 50%, rgba(90,160,255,0.55), rgba(90,160,255,0) 65%); mix-blend-mode: screen; animation: schein 0.9s steps(1) infinite; pointer-events: none; }
@keyframes schein { 0% { opacity: 1; } 12% { opacity: 0.15; } 24% { opacity: 0.9; } 36%, 100% { opacity: 0.1; } }
.blaetter { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.blatt { position: absolute; top: -40px; width: 22px; height: 14px; border-radius: 0 100% 0 100%; background: #8fb34a; animation: fallen linear infinite; opacity: 0.85; }
@keyframes fallen { to { transform: translate(var(--wind, -120px), 1150px) rotate(720deg); } }
.gruppe { position: absolute; left: 820px; top: 470px; width: 760px; height: 567px; }
.gruppe img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 1; }
.gruppe .schatten { position: absolute; left: 6%; right: 4%; bottom: 2%; height: 60px; border-radius: 50%; background: radial-gradient(ellipse, rgba(40,40,20,0.35), rgba(40,40,20,0) 70%); }
.kollegin { position: absolute; left: -400px; top: 430px; height: 600px; z-index: 2; }
.flug { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.flug img { position: absolute; width: 150px; height: 150px; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0,0,0,0.25)); }
.blasen { position: absolute; inset: 0; pointer-events: none; z-index: 7; }
.blasen .blase { position: absolute; font-size: 34px; max-width: 440px; animation: blaseRein 0.4s cubic-bezier(.2,1.5,.4,1) both; }
.blasen .blase.weg { animation: blaseRaus 0.3s ease forwards; }
/* Zipfel nach oben, wenn die Blase unter dem Gesicht steht */
.blasen .blase.unten::after { bottom: auto; top: -26px; border-top: 0; border-bottom: 18px solid #fff; }
@keyframes blaseRein { from { transform: scale(0.4); opacity: 0; } }
@keyframes blaseRaus { to { transform: scale(0.6); opacity: 0; } }
.puff { position: absolute; width: 360px; height: 360px; margin: -180px 0 0 -180px; pointer-events: none; z-index: 5; }
.puff i { position: absolute; left: 50%; top: 50%; width: var(--g); height: var(--g); margin: calc(var(--g) / -2) 0 0 calc(var(--g) / -2); border-radius: 50%; background: #fff; box-shadow: inset -10px -12px 0 rgba(200,215,235,0.8); animation: puffWolke 0.6s ease-out forwards; }
@keyframes puffWolke { 0% { transform: translate(0, 0) scale(0.2); opacity: 1; } 45% { opacity: 1; } 100% { transform: translate(var(--x), var(--y)) scale(1.1); opacity: 0; } }
.puff b { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; background: var(--gelb); clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%); animation: puffStern 0.7s ease-out forwards; }
@keyframes puffStern { 0% { transform: translate(-50%, -50%) scale(0); } 50% { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1.4) rotate(90deg); opacity: 1; } 100% { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(0) rotate(180deg); opacity: 0; } }

.kopfleiste { position: absolute; left: 24px; right: 24px; top: 20px; height: 84px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; z-index: 8; }
.einsatz-titel, .punktestand { background: rgba(8,35,106,0.9); color: #fff; border-radius: 24px; padding: 8px 26px; box-shadow: var(--schatten); }
.einsatz-titel b { font-family: 'Chewy', cursive; font-weight: 400; font-size: 36px; }
.punktestand { text-align: right; min-width: 200px; }
.punktestand b { display: block; font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 800; font-size: 44px; line-height: 1; }
.punktestand.plus { animation: verlust 0.5s ease reverse; }
.schritte { display: flex; gap: 14px; margin: 0; padding: 12px 20px; list-style: none; background: rgba(8,35,106,0.9); border-radius: 24px; box-shadow: var(--schatten); }
.schritte li { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,0.22); color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 800; font-size: 26px; }
.schritte li.jetzt { background: var(--gelb); color: var(--marine); }
.schritte li.gut { background: var(--gruen); }
.schritte li.daneben { background: var(--signal); }

.tafel { position: absolute; left: 24px; top: 124px; bottom: 24px; width: 760px; z-index: 9; display: flex; flex-direction: column; gap: 20px; transition: transform 0.6s cubic-bezier(.5,0,.2,1), opacity 0.4s; }
.tafel.raus { transform: translateX(-820px); opacity: 0; }
.karte { background: rgba(255,250,240,0.96); border-radius: 34px; padding: 30px 36px; box-shadow: var(--schatten); }
.karte h2 { margin: 0 0 10px; font-family: 'Chewy', cursive; font-weight: 400; font-size: 44px; color: var(--signal); }
.karte .frage { font-size: 38px; line-height: 1.22; margin: 0; }
.karte.kompakt { padding: 22px 30px; }
.karte.kompakt h2 { font-size: 38px; margin-bottom: 4px; }
.karte.kompakt .frage { font-size: 31px; line-height: 1.2; }
.karte.kompakt .platz { height: 100px; }
.karte.kompakt .platz img { width: 86px; height: 86px; }
.karte.kompakt .tafel-fuss { margin-top: 12px; }
.karte.kompakt .knopf { font-size: 30px; padding: 12px 26px 12px 14px; }
.karte.kompakt .zeitbonus { margin-top: 14px; }
.karte { position: relative; }
.uhr-ring { position: absolute; right: -34px; top: -36px; width: 96px; height: 96px; padding: 5px; box-sizing: border-box; background: #fffaf0; border-radius: 50%; box-shadow: var(--schatten); z-index: 2; }
.uhr-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.uhr-ring circle { fill: none; stroke-width: 9; }
.uhr-ring .grund { stroke: rgba(8,35,106,0.1); }
.uhr-ring .rest { stroke: var(--gelb); stroke-linecap: round; transition: stroke 0.2s; }
.uhr-ring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 800; font-size: 34px; color: var(--marine); }
.uhr-ring.knapp .rest { stroke: var(--signal); }
.uhr-ring.knapp { animation: uhrPuls 1s ease-in-out infinite; }
.uhr-ring.knapp b { color: var(--signal); }
.uhr-ring.vorbei { opacity: 0.35; animation: none; }
.karte h2 { padding-right: 40px; }
.antworten { display: flex; flex-direction: column; gap: 18px; }
.antwort { display: flex; align-items: center; text-align: left; width: 100%; background: #fff; border-radius: 28px; padding: 22px 26px; font-size: 32px; line-height: 1.2; box-shadow: var(--schatten); transition: transform 0.12s, background 0.2s; }
.antwort .buchstabe { flex: none; width: 58px; height: 58px; margin-right: 22px; border-radius: 50%; background: var(--himmel); display: flex; align-items: center; justify-content: center; font-family: 'Chewy', cursive; font-size: 34px; }
.antwort.richtig { background: #d9f3e1; outline: 6px solid var(--gruen); }
.antwort.falsch { background: #fde2df; outline: 6px solid var(--signal); }
.versorgungsfeld { display: flex; gap: 16px; margin-top: 18px; }
.platz { flex: 1; height: 118px; border-radius: 24px; border: 5px dashed rgba(8,35,106,0.25); display: flex; align-items: center; justify-content: center; background: rgba(220,235,250,0.5); transition: background 0.2s, border-color 0.2s; }
.platz.voll { border-style: solid; border-color: var(--marine); background: #fff; }
.platz img { width: 100px; height: 100px; object-fit: contain; animation: blaseRein 0.3s cubic-bezier(.2,1.5,.4,1); }
.versorgungsfeld.ziel .platz { border-color: var(--signal); background: rgba(226,35,26,0.08); }
.rucksack { background: linear-gradient(180deg, #d8261f, #b51c16); border-radius: 34px; padding: 22px 22px 26px; box-shadow: var(--schatten); position: relative; }
.rucksack::before { content: ''; position: absolute; left: 22px; right: 22px; top: 12px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #e9ecef, #c3c9cf); opacity: 0.8; }
.rucksack h3 { margin: 6px 6px 10px; color: #fff; font-family: 'Chewy', cursive; font-weight: 400; font-size: 34px; }
.faecher { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fach { position: relative; background: #fff7ea; border-radius: 22px; padding: 8px 8px 10px; display: flex; flex-direction: column; align-items: center; text-align: center; font-size: 22px; line-height: 1.1; min-height: 150px; box-shadow: inset 0 -6px 0 rgba(0,0,0,0.12); touch-action: none; }
.fach img { width: 110px; height: 86px; object-fit: contain; pointer-events: none; }
.fach span { margin-top: 6px; }
.fach.gewaehlt { opacity: 0.35; transform: scale(0.94); }
.fach.loesung { outline: 6px solid var(--gruen); }
.fach.irrtum { outline: 6px solid var(--signal); }
.tafel-fuss { display: flex; justify-content: space-between; align-items: center; }
.tafel-fuss { margin-top: 18px; }
.tafel-fuss .hinweis { font-size: 26px; opacity: 0.8; }
.tafel > .tafel-fuss .hinweis { color: #fff; opacity: 1; text-shadow: 0 2px 6px rgba(0,0,0,0.5); }
.vorgesehen { font-size: 26px !important; opacity: 0.75; margin: 0 0 6px !important; }
.loesung-teile { display: flex; gap: 14px; margin-bottom: 14px; }
.loesung-teile span { flex: 1; display: flex; align-items: center; gap: 10px; background: #d9f3e1; border-radius: 18px; padding: 8px 12px; font-size: 24px; line-height: 1.1; }
.loesung-teile img { width: 64px; height: 64px; object-fit: contain; }
.ergebnis-karte h2.gut { color: var(--gruen); }
.ergebnis-karte h2.daneben { color: var(--marine); }
.ergebnis-karte p { font-size: 34px; line-height: 1.28; margin: 0 0 12px; }
.ergebnis-karte .chip { display: inline-block; background: var(--gruen); color: #fff; font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 800; font-size: 36px; padding: 6px 22px; border-radius: 18px; margin-right: 12px; }
.ergebnis-karte .chip.null { background: rgba(8,35,106,0.35); }
.uebergabe { background: #fffdf4; border-radius: 34px; padding: 30px 36px; box-shadow: var(--schatten); border-top: 14px solid var(--signal); }
.uebergabe h2 { margin: 0 0 14px; font-family: 'Chewy', cursive; font-weight: 400; font-size: 46px; }
.uebergabe p { margin: 0 0 10px; font-size: 32px; line-height: 1.25; }
.zieh { position: absolute; width: 150px; height: 150px; pointer-events: none; z-index: 50; transform: translate(-50%, -50%) scale(1.1); filter: drop-shadow(0 16px 20px rgba(0,0,0,0.3)); }

/* ---------------- Ergebnis ---------------- */
#bild-ergebnis { background: linear-gradient(135deg, rgba(8,35,106,0.92), rgba(8,35,106,0.7)); display: flex; gap: 48px; padding: 70px 80px; }
.karte-einsatz { width: 860px; background: #fffaf0; border-radius: 40px; padding: 36px 44px; box-shadow: var(--schatten); animation: melderRein 0.6s cubic-bezier(.2,1.4,.4,1) both; }
.ek-kopf { display: flex; align-items: center; gap: 20px; border-bottom: 4px dashed rgba(8,35,106,0.15); padding-bottom: 18px; }
.ek-kopf b { flex: 1; font-family: 'Chewy', cursive; font-weight: 400; font-size: 46px; }
.ek-kopf > div { flex: 1; }
.ek-kopf > div b { display: block; }
.ek-kopf img { height: 64px; }
.ek-block { padding: 18px 0; border-bottom: 4px dashed rgba(8,35,106,0.15); }
.ek-block h3 { margin: 0 0 8px; font-family: 'Chewy', cursive; font-weight: 400; font-size: 36px; color: var(--signal); }
.ek-zeile { display: flex; justify-content: space-between; font-size: 28px; padding: 4px 0; }
.ek-zeile b { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 800; font-size: 32px; }
.ek-gesamt { display: flex; align-items: baseline; gap: 18px; padding-top: 18px; }
.ek-gesamt b { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 800; font-size: 120px; line-height: 0.9; color: var(--marine); }
.ek-gesamt .von { font-size: 30px; }
.ergebnis-rechts { flex: 1; display: flex; flex-direction: column; }
.name-eingabe { background: #fffaf0; border-radius: 40px; padding: 32px 40px; box-shadow: var(--schatten); }
.name-eingabe h2 { margin: 0 0 18px; font-family: 'Chewy', cursive; font-weight: 400; font-size: 46px; }
.name-feld { height: 92px; border-radius: 24px; background: #fff; border: 5px solid var(--marine); font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 800; font-size: 60px; display: flex; align-items: center; padding: 0 26px; letter-spacing: 0.04em; }
.name-feld::after { content: ''; width: 5px; height: 56px; background: var(--signal); margin-left: 6px; animation: blinken 1s steps(2) infinite; }
.tastatur { display: grid; grid-template-columns: repeat(10, 1fr); gap: 10px; margin-top: 22px; }
.tastatur button { height: 74px; border-radius: 18px; background: #fff; box-shadow: inset 0 -6px 0 rgba(8,35,106,0.14); font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 800; font-size: 34px; color: var(--marine); }
.tastatur button.breit { grid-column: span 3; font-family: 'Fredoka', sans-serif; font-size: 28px; }
.tastatur button.haupt { background: var(--signal); color: #fff; }
.rangliste { background: #fffaf0; border-radius: 40px; padding: 32px 40px; box-shadow: var(--schatten); }
.rangliste h2 { margin: 0 0 14px; font-family: 'Chewy', cursive; font-weight: 400; font-size: 46px; }
.rangliste ol { margin: 0; padding: 0; list-style: none; counter-reset: r; }
.rangliste li { display: flex; align-items: center; gap: 18px; padding: 10px 14px; border-radius: 18px; font-size: 32px; counter-increment: r; }
.rangliste li::before { content: counter(r); width: 52px; height: 52px; border-radius: 50%; background: var(--himmel); display: flex; align-items: center; justify-content: center; font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 800; }
.rangliste li span { flex: 1; }
.rangliste li b { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 800; }
.rangliste li.du { background: var(--gelb); }
.rangliste .knopf-zeile { position: static; margin-top: 24px; }

/* ---------------- Menue ---------------- */
.menue { background: rgba(6,26,82,0.8); display: flex; align-items: center; justify-content: center; }
.menue-karte { width: 900px; background: #fffaf0; border-radius: 40px; padding: 40px 48px; box-shadow: var(--schatten); }
.menue-karte h2 { margin: 0 0 22px; font-family: 'Chewy', cursive; font-weight: 400; font-size: 52px; }
.menue-liste { display: flex; flex-direction: column; gap: 16px; }
.menue-liste .knopf { justify-content: space-between; padding: 20px 30px; }
.menue-info { font-size: 28px; line-height: 1.3; min-height: 40px; }
.achsen { display: flex; gap: 8px; flex-wrap: wrap; font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 600; font-size: 22px; margin-top: 12px; }
.achsen span { background: var(--himmel); border-radius: 10px; padding: 4px 10px; }

/* ---------------- Ottma als Erklaerer ---------------- */
#ottma { position: absolute; left: 0; top: 0; width: 600px; height: 600px; z-index: 60; pointer-events: none;
  --x: 1250px; --y: 390px; --s: 0.95;
  transform-origin: 0 0; transform: translate(var(--x), var(--y)) scale(var(--s));
  transition: transform 0.85s cubic-bezier(.55,0,.2,1), opacity 0.4s ease; }
#ottma[data-platz="start"] { --x: 1272px; --y: 430px; --s: 0.9; }
#ottma[data-platz="meldung"] { --x: 1220px; --y: 300px; --s: 0.92; }
#ottma[data-platz="fahrt"] { --x: 34px; --y: 30px; --s: 0.44; }
#ottma[data-platz="einsatz"] { --x: 1668px; --y: 808px; --s: 0.37; }
#ottma[data-platz="einsatz"] .ottma-rahmen { border-radius: 50%; border-width: 18px; }
#ottma[data-platz="einsatz"] .ottma-rahmen::before { display: none; }
#ottma[data-platz="einsatz"] .ottma-rahmen::after { border-radius: 50%; }
#ottma[data-platz="einsatz"] .ottma-bild { inset: 0; transform: scale(1.75); transform-origin: 50% 18%; }
#ottma[data-platz="einsatz"] .ottma-name { left: 50%; bottom: -34px; transform: translateX(-50%); font-size: 62px; }
#ottma.still { opacity: 0; transform: translate(var(--x), calc(var(--y) + 40px)) scale(calc(var(--s) * 0.8)); }
#ottma[data-platz="ergebnis"] { --x: 1542px; --y: 712px; --s: 0.5; }
#ottma[data-platz="aus"] { opacity: 0; }
.ottma-rahmen { position: absolute; inset: 0; border-radius: 56px; overflow: hidden; border: 16px solid #fff; box-shadow: 0 18px 0 rgba(6,26,82,0.18), 0 34px 70px rgba(6,26,82,0.32);
  background: radial-gradient(circle at 50% 42%, #fffaf0 0%, #fbeacb 34%, #cfe2f4 78%, #b7d2ec 100%); }
.ottma-rahmen::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; z-index: 0;
  background: repeating-linear-gradient(-45deg, rgba(244,222,18,0.55) 0 22px, rgba(226,35,26,0.45) 22px 44px); }
.ottma-rahmen::after { content: ''; position: absolute; inset: 0; z-index: 3; border-radius: 40px; box-shadow: inset 0 0 0 3px rgba(8,35,106,0.08), inset 0 -30px 60px rgba(8,35,106,0.12); }
.ottma-bild { position: absolute; inset: 0; z-index: 1; }
.ottma-bild video, .ottma-standbild { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.ottma-bild video { opacity: 0; }
.ottma-bild video.an { opacity: 1; }
#ottma.laeuft .ottma-standbild { opacity: 0; }
.ottma-name { position: absolute; left: 34px; bottom: -26px; z-index: 4; font-family: 'Chewy', cursive; font-size: 50px; background: var(--signal); color: #fff; padding: 4px 30px 6px; border-radius: 28px; box-shadow: 0 6px 0 rgba(120,10,6,0.35); }
.ottma-blase { position: absolute; z-index: 5; width: max-content; max-width: calc(560px / var(--s)); background: #fff; color: var(--marine);
  font-family: 'Fredoka', sans-serif; font-size: calc(34px / var(--s)); line-height: 1.18; padding: calc(20px / var(--s)) calc(28px / var(--s));
  border-radius: calc(30px / var(--s)); box-shadow: 0 calc(8px / var(--s)) 0 rgba(6,26,82,0.16), 0 calc(20px / var(--s)) calc(40px / var(--s)) rgba(6,26,82,0.25);
  opacity: 0; transform: scale(0.6); transition: opacity 0.25s ease, transform 0.35s cubic-bezier(.2,1.5,.4,1); }
.ottma-blase:empty { display: none; }
.ottma-blase span { opacity: 0; transition: opacity 0.12s ease; }
.ottma-blase span.an { opacity: 1; }
.ottma-blase.da { opacity: 1; transform: none; }
.ottma-blase.weg { opacity: 0; transform: scale(0.8); }
.ottma-blase::after { content: ''; position: absolute; border: calc(18px / var(--s)) solid transparent; }
#ottma[data-blase="links"] .ottma-blase { right: calc(100% + 40px / var(--s)); top: 24%; transform-origin: 100% 50%; }
#ottma[data-blase="links"] .ottma-blase::after { left: 100%; top: 40%; border-left: calc(24px / var(--s)) solid #fff; border-right: 0; }
#ottma[data-blase="rechts"] .ottma-blase { left: calc(100% + 40px / var(--s)); top: 40%; transform-origin: 0 50%; }
#ottma[data-blase="rechts"] .ottma-blase::after { right: 100%; top: 40%; border-right: calc(24px / var(--s)) solid #fff; border-left: 0; }
#ottma[data-blase="oben"] .ottma-blase { right: 0; bottom: calc(100% + 40px / var(--s)); transform-origin: 80% 100%; }
#ottma[data-blase="oben"] .ottma-blase::after { top: 100%; right: 18%; border-top: calc(24px / var(--s)) solid #fff; border-bottom: 0; }
#ottma[data-blase="unten"] .ottma-blase { right: 0; top: calc(100% + 56px / var(--s)); transform-origin: 80% 0; }
#ottma[data-platz="einsatz"] .ottma-blase { max-width: calc(390px / var(--s)); }
#ottma[data-blase="unten"] .ottma-blase::after { bottom: 100%; right: 18%; border-bottom: calc(24px / var(--s)) solid #fff; border-top: 0; }

#blende { position: absolute; inset: 0; background: #fff7ea; opacity: 0; pointer-events: none; z-index: 100; transition: opacity 0.5s ease; }
#blende.an { opacity: 1; }
#quer-hinweis { display: none; }