:root{
  --dark:#00365E;
  --cyan:#3FB9D4;
  --magenta:#A9398A;
  --gray:#CFD1D2;
  --white:#fff;
  --ink:#08213A;
  --yellow:#F6A91B;
}
*{box-sizing:border-box}
html,body{
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:var(--dark);
  color:var(--white);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
}
button{font:inherit;-webkit-tap-highlight-color:transparent}
#app,#gameWrap{
  position:relative;
  width:100vw;
  height:100vh;
  min-height:100dvh;
  overflow:hidden;
  background:linear-gradient(180deg,#004a78 0%,var(--dark) 100%);
}
#hud{
  position:absolute;
  left:0;top:0;z-index:5;
  width:100%;height:92px;
  padding:12px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:rgba(0,54,94,.95);
  border-bottom:2px solid rgba(207,209,210,.35);
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.brand{display:flex;align-items:center;gap:14px;min-width:325px}
.brand strong{display:block;font-size:33px;line-height:1;letter-spacing:-.03em}
.brand span{display:block;margin-top:7px;color:var(--cyan);font-size:16px;font-weight:800}
.bot{
  width:60px;height:60px;border:4px solid var(--white);border-radius:18px;
  display:grid;place-items:center;background:#061f37;color:var(--cyan);
  font-weight:1000;box-shadow:0 0 0 3px rgba(63,185,212,.45)
}
.mission{
  padding:15px 22px;border-radius:18px;background:var(--magenta);
  font-size:20px;font-weight:1000;box-shadow:0 7px 0 rgba(0,0,0,.25);white-space:nowrap
}
.progressBox{min-width:235px;text-align:right;font-weight:1000;font-size:20px}
.bar{height:22px;margin-top:10px;border-radius:999px;background:rgba(207,209,210,.8);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--cyan);border-radius:999px;transition:width .35s ease}
#game{
  position:absolute;left:0;top:92px;width:100vw;height:calc(100vh - 228px);
  background:#75c7f4;display:block
}
#touchControls{
  position:absolute;left:0;right:0;bottom:0;z-index:8;height:136px;
  display:grid;grid-template-columns:1fr 1fr .25fr 2.1fr;gap:22px;
  padding:18px 34px 22px;background:rgba(0,54,94,.98);
  border-top:2px solid rgba(207,209,210,.35)
}
.controlBtn{
  border:0;border-radius:28px;color:white;font-weight:1000;font-size:54px;
  box-shadow:0 10px 0 rgba(0,0,0,.3), inset 0 2px 0 rgba(255,255,255,.35);
  touch-action:none
}
.controlBtn:active,.controlBtn.pressed{
  transform:translateY(6px);
  box-shadow:0 4px 0 rgba(0,0,0,.3), inset 0 2px 0 rgba(255,255,255,.25)
}
.controlBtn.left{background:linear-gradient(180deg,#0B4B78,#052f53)}
.controlBtn.right{background:linear-gradient(180deg,#57d5e9,#1aa2c4)}
.controlBtn.jump{grid-column:4;background:linear-gradient(180deg,#c944a8,var(--magenta));font-size:42px;letter-spacing:.04em}
.infoCard{
  position:absolute;z-index:12;left:30px;top:118px;width:min(500px,43vw);
  padding:20px 22px;border-radius:24px;color:var(--ink);background:rgba(255,255,255,.96);
  border:4px solid rgba(63,185,212,.72);box-shadow:0 16px 45px rgba(0,0,0,.28)
}
.infoCard strong{display:block;color:var(--magenta);font-size:30px;margin-bottom:6px}
.infoCard span{display:block;font-size:20px;line-height:1.3;font-weight:750}
.hidden{display:none!important}
.screen{
  position:absolute;inset:0;z-index:30;display:none;align-items:center;justify-content:center;
  padding:28px;background:linear-gradient(rgba(0,54,94,.72),rgba(0,54,94,.88)),url("assets/schloss-stetten.jpg") center/cover no-repeat
}
.screen.active{display:flex}
.panel{
  width:min(850px,92vw);border-radius:34px;padding:42px;background:rgba(255,255,255,.96);
  color:var(--ink);box-shadow:0 20px 70px rgba(0,0,0,.38);border:4px solid rgba(63,185,212,.65)
}
.badge{display:inline-block;padding:10px 16px;border-radius:999px;background:var(--magenta);color:white;font-weight:1000;margin-bottom:18px}
.panel h1{margin:0;font-size:72px;line-height:1;color:var(--dark);letter-spacing:-.05em}
.subtitle{font-size:27px;line-height:1.25;font-weight:750;margin:18px 0 10px}
.hint{color:#35546c;font-size:20px;font-weight:700}
.primaryBtn{
  margin-top:24px;border:0;min-height:74px;padding:0 32px;border-radius:22px;
  background:var(--cyan);color:var(--dark);font-size:26px;font-weight:1000;box-shadow:0 9px 0 rgba(0,54,94,.3)
}
.optionBox{
  margin-top:22px;
  padding:18px 20px;
  border-radius:24px;
  background:#EEF7FA;
  border:3px solid rgba(63,185,212,.45);
}
.optionBox p{
  margin:10px 0 0;
  color:#35546c;
  font-size:17px;
  font-weight:700;
}
.toggle{
  display:flex;
  align-items:center;
  gap:14px;
  font-size:22px;
  font-weight:1000;
  color:var(--dark);
}
.toggle input{position:absolute;opacity:0}
.toggle span{
  width:72px;
  height:40px;
  border-radius:999px;
  background:#91A6B3;
  position:relative;
  flex:0 0 auto;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.28);
}
.toggle span::after{
  content:"";
  position:absolute;
  width:32px;
  height:32px;
  border-radius:50%;
  left:4px;
  top:4px;
  background:white;
  box-shadow:0 3px 8px rgba(0,0,0,.35);
  transition:transform .18s ease;
}
.toggle input:checked + span{background:var(--magenta)}
.toggle input:checked + span::after{transform:translateX(32px)}
@media (orientation:portrait){
  #gameWrap::after{
    content:"Bitte iPad quer halten";
    position:absolute;inset:0;z-index:100;display:grid;place-items:center;
    background:var(--dark);color:white;font-size:34px;font-weight:1000;text-align:center;padding:32px
  }
}
@media (max-height:720px){
  #hud{height:76px;padding:9px 18px}
  .brand strong{font-size:27px}.brand span{font-size:13px}.bot{width:52px;height:52px}
  .mission{font-size:17px;padding:12px 16px}
  #game{top:76px;height:calc(100vh - 192px)}
  #touchControls{height:116px}.controlBtn{font-size:44px;border-radius:24px}.controlBtn.jump{font-size:34px}
}


/* KI_SPRUNG_REVIEW_SUMMARY_STYLE_V2 */
.knowledge-review {
  width: min(880px, calc(100vw - 32px));
  max-height: min(58vh, 520px);
  margin: 22px auto 0;
  padding: 18px;
  overflow: auto;
  border-radius: 28px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 18px 45px rgba(0, 54, 94, .18);
  color: #00365E;
  text-align: left;
}

.knowledge-review:empty {
  display: none;
}

.knowledge-review h2 {
  margin: 0 0 8px;
  font-size: clamp(22px, 3vw, 34px);
  color: #00365E;
}

.knowledge-review .review-intro {
  margin: 0 0 18px;
  font-size: clamp(14px, 1.8vw, 17px);
  color: rgba(0,54,94,.78);
}

.review-level {
  margin-top: 18px;
}

.review-level h3 {
  margin: 0 0 10px;
  padding: 8px 12px;
  display: inline-block;
  border-radius: 999px;
  background: #00365E;
  color: white;
  font-size: clamp(14px, 1.8vw, 17px);
}

.review-card {
  margin: 10px 0;
  padding: 14px 16px;
  border-radius: 20px;
  background: white;
  border-left: 7px solid #3FB9D4;
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
}

.review-card strong {
  display: block;
  margin-bottom: 5px;
  color: #A9398A;
  font-size: clamp(16px, 2vw, 20px);
}

.review-card p {
  margin: 0;
  line-height: 1.45;
  font-size: clamp(14px, 1.8vw, 17px);
}

.review-empty {
  margin: 0;
  font-weight: 700;
}

@media (max-height: 720px) {
  .knowledge-review {
    max-height: 45vh;
    padding: 14px;
  }

  .review-card {
    padding: 11px 13px;
  }
}


/* KI_SPRUNG_V7_STYLE */
.infoCard.important {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 999999 !important;
  width: min(760px, calc(100vw - 38px)) !important;
  padding: clamp(24px, 4vw, 42px) !important;
  border-radius: 34px !important;
  border: 5px solid #F6A91B !important;
  background: rgba(255,255,255,.98) !important;
  color: #00365E !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.38) !important;
  text-align: center !important;
}

.infoCard.important::before {
  content: "STOPP · KNOW-HOW";
  display: inline-block;
  margin-bottom: 14px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #F6A91B;
  color: #00365E;
  font-size: clamp(13px, 2vw, 18px);
  font-weight: 900;
  letter-spacing: .05em;
}

.infoCard.important strong {
  display: block;
  margin-bottom: 12px;
  font-size: clamp(24px, 4vw, 42px);
  color: #A9398A;
}

.infoCard.important span {
  display: block;
  font-size: clamp(18px, 2.5vw, 28px);
  line-height: 1.35;
  font-weight: 750;
}

.infoOkBtn {
  margin: 24px auto 0;
  padding: 14px 24px;
  border: 0;
  border-radius: 999px;
  background: #00365E;
  color: white;
  font-size: clamp(16px, 2.3vw, 22px);
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(0,54,94,.28);
}

.infoOkBtn:active {
  transform: scale(.97);
}

.knowledge-review {
  width: min(880px, calc(100vw - 32px));
  max-height: min(56vh, 500px);
  margin: 22px auto 0;
  padding: 18px;
  overflow: auto;
  border-radius: 28px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 18px 45px rgba(0, 54, 94, .18);
  color: #00365E;
  text-align: left;
}

.knowledge-review:empty {
  display: none;
}

.knowledge-review h2 {
  margin: 0 0 8px;
  font-size: clamp(22px, 3vw, 34px);
  color: #00365E;
}

.review-intro {
  margin: 0 0 18px;
  font-size: clamp(14px, 1.8vw, 17px);
  color: rgba(0,54,94,.78);
}

.review-level {
  margin-top: 18px;
}

.review-level h3 {
  margin: 0 0 10px;
  padding: 8px 12px;
  display: inline-block;
  border-radius: 999px;
  background: #00365E;
  color: white;
  font-size: clamp(14px, 1.8vw, 17px);
}

.review-card {
  margin: 10px 0;
  padding: 14px 16px;
  border-radius: 20px;
  background: white;
  border-left: 7px solid #3FB9D4;
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
}

.review-card strong {
  display: block;
  margin-bottom: 5px;
  color: #A9398A;
  font-size: clamp(16px, 2vw, 20px);
}

.review-card p {
  margin: 0;
  line-height: 1.45;
  font-size: clamp(14px, 1.8vw, 17px);
}


/* KI_SPRUNG_RESPONSIVE_V1 */
/* Ziel: iPhone, iPad, Laptop und große Monitore ohne Verzerrung unterstützen */

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100svh;
}

#app {
  min-height: 100svh;
  width: 100vw;
  overflow: hidden;
}

#gameWrap {
  width: 100vw;
  height: 100svh;
  max-width: 100vw;
  max-height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding:
    max(8px, env(safe-area-inset-top))
    max(8px, env(safe-area-inset-right))
    calc(118px + env(safe-area-inset-bottom))
    max(8px, env(safe-area-inset-left));
}

#game {
  display: block;
  width: min(100%, calc((100svh - 138px) * 1.77777778));
  height: auto;
  max-width: 100%;
  max-height: calc(100svh - 138px);
  aspect-ratio: 16 / 9;
  border-radius: clamp(14px, 2vw, 28px);
  box-shadow: 0 18px 50px rgba(0, 54, 94, .22);
  object-fit: contain;
  touch-action: none;
}

/* Start- und Endscreen besser auf kleinen Displays */
.screen {
  min-height: 100svh;
  width: 100vw;
  box-sizing: border-box;
  padding:
    max(18px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
  overflow: auto;
}

.screen .panel,
.screen > div,
.startPanel,
.endPanel {
  max-width: min(920px, calc(100vw - 28px));
  margin-left: auto;
  margin-right: auto;
}

/* Neue Steuerung responsiv halten */
#kiSprungTouchControls {
  bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  padding-left: max(12px, env(safe-area-inset-left)) !important;
  padding-right: max(12px, env(safe-area-inset-right)) !important;
}

.ki-touch-btn {
  width: clamp(58px, 13vw, 112px) !important;
  height: clamp(58px, 13vw, 112px) !important;
  font-size: clamp(24px, 5vw, 46px) !important;
}

#kiJumpBtn {
  width: clamp(72px, 16vw, 128px) !important;
  height: clamp(72px, 16vw, 128px) !important;
}

#kiJumpBtn span {
  font-size: clamp(13px, 2.7vw, 22px) !important;
  line-height: 1 !important;
}

/* HUD kompakter auf kleinen Geräten */
.hud,
#hud {
  max-width: calc(100vw - 18px);
  box-sizing: border-box;
}

#levelLabel,
#progressText {
  font-size: clamp(11px, 2.5vw, 17px);
}

/* Know-how-Karte auf iPhone passend */
.infoCard.important {
  width: min(760px, calc(100vw - 24px)) !important;
  max-height: calc(100svh - 32px) !important;
  overflow: auto !important;
  padding: clamp(18px, 5vw, 36px) !important;
}

.infoCard.important strong {
  font-size: clamp(21px, 6vw, 38px) !important;
}

.infoCard.important span {
  font-size: clamp(16px, 4.4vw, 25px) !important;
}

.infoOkBtn {
  font-size: clamp(15px, 4vw, 21px) !important;
  padding: clamp(11px, 3vw, 15px) clamp(18px, 5vw, 26px) !important;
}

/* iPhone quer / kleine Höhen */
@media (max-height: 520px) and (orientation: landscape) {
  #gameWrap {
    padding-top: 4px;
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }

  #game {
    width: min(100%, calc((100svh - 84px) * 1.77777778));
    max-height: calc(100svh - 84px);
    border-radius: 14px;
  }

  .ki-touch-btn {
    width: clamp(48px, 12vh, 68px) !important;
    height: clamp(48px, 12vh, 68px) !important;
    font-size: clamp(22px, 6vh, 32px) !important;
  }

  #kiJumpBtn {
    width: clamp(60px, 15vh, 82px) !important;
    height: clamp(60px, 15vh, 82px) !important;
  }

  #kiJumpBtn span {
    font-size: clamp(11px, 3.5vh, 16px) !important;
  }

  #kiSprungTouchControls {
    bottom: calc(5px + env(safe-area-inset-bottom)) !important;
  }

  .mission,
  #levelLabel,
  #progressText {
    font-size: 11px !important;
  }
}

/* iPhone Hochformat: spielbar, aber Hinweis anzeigen */
.rotateHint {
  display: none;
}

@media (max-width: 700px) and (orientation: portrait) {
  .rotateHint {
    position: fixed;
    top: calc(10px + env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999999;
    width: min(360px, calc(100vw - 24px));
    box-sizing: border-box;
    padding: 10px 14px;
    border-radius: 18px;
    background: rgba(0, 54, 94, .92);
    color: white;
    text-align: center;
    box-shadow: 0 12px 32px rgba(0,0,0,.26);
    display: block;
    pointer-events: none;
  }

  .rotateHint strong {
    display: block;
    font-size: 15px;
    margin-bottom: 2px;
  }

  .rotateHint span {
    display: block;
    font-size: 12px;
    line-height: 1.25;
  }

  #gameWrap {
    padding-top: calc(74px + env(safe-area-inset-top));
    padding-bottom: calc(118px + env(safe-area-inset-bottom));
  }

  #game {
    width: 100%;
    max-height: calc(100svh - 210px);
  }

  #kiSprungTouchControls {
    align-items: flex-end;
  }

  .ki-touch-btn {
    width: clamp(58px, 18vw, 78px) !important;
    height: clamp(58px, 18vw, 78px) !important;
  }

  #kiJumpBtn {
    width: clamp(74px, 23vw, 96px) !important;
    height: clamp(74px, 23vw, 96px) !important;
  }
}

/* Große Monitore: nicht endlos aufblasen */
@media (min-width: 1500px) {
  #game {
    max-width: 1400px;
    max-height: 788px;
  }
}


/* KI_SPRUNG_ZEITREISE_MODES_STYLE_V1 */
.modeChoice {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  width: min(640px, 100%);
  margin: 22px auto 0;
}

.modeBtn {
  display: flex !important;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  padding: 16px 22px !important;
  white-space: normal;
  line-height: 1.15;
}

.modeBtn span {
  display: block;
  font-size: clamp(12px, 1.7vw, 15px);
  font-weight: 700;
  opacity: .9;
}

.secondaryBtn {
  border: 3px solid #00365E;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  color: #00365E;
  font-weight: 900;
  font-size: clamp(16px, 2.2vw, 23px);
  box-shadow: 0 12px 28px rgba(0,54,94,.16);
}

.secondaryBtn:active {
  transform: scale(.98);
}

@media (orientation: landscape) and (min-width: 900px) {
  .modeChoice {
    grid-template-columns: 1fr 1fr;
  }
}

/* KI_SPRUNG_UNIFIED_BUTTONS_V1 */
.modeBtn,
#startBtn,
#journeyBtn,
.primaryBtn,
.secondaryBtn {
  min-width: 270px;
  min-height: 92px;
  border-radius: 999px;
  border: 4px solid #00365E;
  font-weight: 900;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  line-height: 1.05;
  box-sizing: border-box;
}

.modeBtn {
  font-size: clamp(1.35rem, 2.4vw, 2rem);
}

.modeBtn span,
#startBtn span,
#journeyBtn span {
  font-size: clamp(.82rem, 1.3vw, 1rem);
  font-weight: 800;
  opacity: .92;
}

#startBtn,
.primaryBtn {
  background: #3FB9D4;
  color: #00365E;
  border-color: #3FB9D4;
  box-shadow: 0 10px 0 rgba(0, 54, 94, .22);
}

#journeyBtn,
.secondaryBtn {
  background: #ffffff;
  color: #00365E;
  border-color: #00365E;
  box-shadow: 0 10px 0 rgba(0, 54, 94, .10);
}

#startBtn:hover,
#journeyBtn:hover,
.primaryBtn:hover,
.secondaryBtn:hover {
  transform: translateY(-2px);
}

#startBtn:active,
#journeyBtn:active,
.primaryBtn:active,
.secondaryBtn:active {
  transform: translateY(3px);
  box-shadow: 0 4px 0 rgba(0, 54, 94, .18);
}

@media (max-width: 760px) {
  .modeBtn,
  #startBtn,
  #journeyBtn,
  .primaryBtn,
  .secondaryBtn {
    min-width: 220px;
    min-height: 76px;
    font-size: 1.35rem;
  }
}
/* /KI_SPRUNG_UNIFIED_BUTTONS_V1 */


/* KI_SPRUNG_UNIFIED_BUTTONS_FINAL_V1 */
#startBtn,
#journeyBtn,
.modeBtn {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 320px !important;
  min-width: 320px !important;
  max-width: 320px !important;
  min-height: 92px !important;
  padding: 16px 24px !important;
  border-radius: 999px !important;
  border: 4px solid #00365E !important;
  box-sizing: border-box !important;

  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;

  font-size: clamp(1.55rem, 2.2vw, 2.05rem) !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
  text-align: center !important;
  letter-spacing: -0.03em !important;
  color: #00365E !important;
  cursor: pointer !important;
}

#startBtn {
  background: #3FB9D4 !important;
  border-color: #3FB9D4 !important;
  box-shadow: 0 10px 0 rgba(0,54,94,.22) !important;
}

#journeyBtn {
  background: #ffffff !important;
  border-color: #00365E !important;
  box-shadow: 0 10px 0 rgba(0,54,94,.12) !important;
}

#startBtn span,
#journeyBtn span,
.modeBtn span {
  display: block !important;
  font-size: clamp(.82rem, 1.15vw, 1rem) !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  color: #00365E !important;
  opacity: .95 !important;
  margin-top: 2px !important;
}

#startBtn:hover,
#journeyBtn:hover {
  transform: translateY(-2px) !important;
}

#startBtn:active,
#journeyBtn:active {
  transform: translateY(3px) !important;
  box-shadow: 0 4px 0 rgba(0,54,94,.18) !important;
}

@media (max-width: 760px) {
  #startBtn,
  #journeyBtn,
  .modeBtn {
    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;
    min-height: 76px !important;
    font-size: 1.35rem !important;
    padding: 12px 18px !important;
  }

  #startBtn span,
  #journeyBtn span,
  .modeBtn span {
    font-size: .78rem !important;
  }
}
/* /KI_SPRUNG_UNIFIED_BUTTONS_FINAL_V1 */


/* KI_SPRUNG_START_BUTTONS_REPAIR_V1 */

/* Touch-Steuerung auf Startscreen ausblenden */
body:not(.game-running) #touchControls,
body:not(.game-running) .touchControls,
body:not(.game-running) .mobileControls,
body:not(.game-running) .controls,
body:not(.game-running) #leftBtn,
body:not(.game-running) #rightBtn,
body:not(.game-running) #jumpBtn {
  display: none !important;
  pointer-events: none !important;
}

/* Startbutton-Zeile sauber ausrichten */
.modeActions,
.startActions,
.startButtons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 28px !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Beide Modusbuttons wirklich gleich groß */
#startBtn,
#journeyBtn,
.modeBtn {
  appearance: none !important;
  -webkit-appearance: none !important;

  width: 360px !important;
  min-width: 360px !important;
  max-width: 360px !important;
  height: 104px !important;
  min-height: 104px !important;
  max-height: 104px !important;

  padding: 16px 24px !important;
  border-radius: 999px !important;
  border-width: 4px !important;
  border-style: solid !important;
  box-sizing: border-box !important;

  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;

  font-size: 1.95rem !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.035em !important;
  text-align: center !important;
  color: #00365E !important;
  cursor: pointer !important;
}

#startBtn {
  background: #3FB9D4 !important;
  border-color: #3FB9D4 !important;
  box-shadow: 0 10px 0 rgba(0,54,94,.22) !important;
}

#journeyBtn {
  background: #ffffff !important;
  border-color: #00365E !important;
  box-shadow: 0 10px 0 rgba(0,54,94,.12) !important;
}

#startBtn span,
#journeyBtn span,
.modeBtn span {
  display: block !important;
  max-width: 100% !important;
  font-size: .98rem !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
  color: #00365E !important;
  opacity: .96 !important;
}

#startBtn:hover,
#journeyBtn:hover {
  transform: translateY(-2px) !important;
}

#startBtn:active,
#journeyBtn:active {
  transform: translateY(3px) !important;
  box-shadow: 0 4px 0 rgba(0,54,94,.18) !important;
}

@media (max-width: 860px) {
  .modeActions,
  .startActions,
  .startButtons {
    gap: 18px !important;
  }

  #startBtn,
  #journeyBtn,
  .modeBtn {
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
    height: 86px !important;
    min-height: 86px !important;
    max-height: 86px !important;
    font-size: 1.5rem !important;
  }

  #startBtn span,
  #journeyBtn span,
  .modeBtn span {
    font-size: .82rem !important;
  }
}
/* /KI_SPRUNG_START_BUTTONS_REPAIR_V1 */


/* KI_SPRUNG_SAFE_START_CSS_V1 */

/* Steuerbuttons auf der Startseite ausblenden.
   Sie erscheinen erst, wenn der Startscreen ausgeblendet ist. */
body:has(#startScreen:not(.hidden)) #leftBtn,
body:has(#startScreen:not(.hidden)) #rightBtn,
body:has(#startScreen:not(.hidden)) #jumpBtn,
body:has(#startScreen:not(.hidden)) #touchControls,
body:has(#startScreen:not(.hidden)) .touchControls,
body:has(#startScreen:not(.hidden)) .mobileControls,
body:has(#startScreen:not(.hidden)) .controls {
  display: none !important;
  pointer-events: none !important;
}

/* Modusbuttons einheitlich */
#startBtn,
#journeyBtn,
.modeBtn {
  width: 340px !important;
  min-width: 340px !important;
  max-width: 340px !important;
  height: 96px !important;
  min-height: 96px !important;
  max-height: 96px !important;

  padding: 14px 24px !important;
  border-radius: 999px !important;
  border: 4px solid #00365E !important;
  box-sizing: border-box !important;

  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;

  font-size: 1.8rem !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.03em !important;
  text-align: center !important;
  color: #00365E !important;
}

#startBtn {
  background: #3FB9D4 !important;
  border-color: #3FB9D4 !important;
  box-shadow: 0 10px 0 rgba(0,54,94,.22) !important;
}

#journeyBtn {
  background: #ffffff !important;
  border-color: #00365E !important;
  box-shadow: 0 10px 0 rgba(0,54,94,.12) !important;
}

#startBtn span,
#journeyBtn span,
.modeBtn span {
  display: block !important;
  font-size: .92rem !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  color: #00365E !important;
  opacity: .96 !important;
}

@media (max-width: 860px) {
  #startBtn,
  #journeyBtn,
  .modeBtn {
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
    height: 84px !important;
    min-height: 84px !important;
    max-height: 84px !important;
    font-size: 1.45rem !important;
  }

  #startBtn span,
  #journeyBtn span,
  .modeBtn span {
    font-size: .8rem !important;
  }
}
/* /KI_SPRUNG_SAFE_START_CSS_V1 */

/* KI_SPRUNG_MOBILE_LAYOUT_V1 */
/*
  Mobile-Anpassung:
  Nur Layout/CSS. Keine Spielmechanik.
  Ziel: Handy und kleine Tablets besser spielbar machen.
*/

html,
body {
  max-width: 100%;
  overflow-x: hidden;
  touch-action: manipulation;
}

button,
.primaryBtn,
.secondaryBtn {
  -webkit-tap-highlight-color: transparent;
}

/* Kleine Bildschirme allgemein */
@media (max-width: 780px) {
  body {
    min-height: 100svh;
  }

  .app,
  .gameApp,
  .screen,
  .gameScreen,
  .gameShell,
  .gameWrapper,
  .stageWrapper {
    max-width: 100vw !important;
    width: 100vw !important;
    overflow: hidden !important;
  }

  header,
  .header,
  .topbar,
  .gameHeader,
  .hud,
  .topHud {
    min-height: auto !important;
    padding: 8px 10px !important;
    gap: 8px !important;
  }

  .logo,
  .brandLogo,
  .appLogo {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }

  h1,
  .brandTitle,
  .title,
  .gameTitle {
    font-size: clamp(1.25rem, 6vw, 2rem) !important;
    line-height: 1.05 !important;
  }

  .subtitle,
  .brandSubtitle,
  .tagline {
    font-size: clamp(0.85rem, 3.7vw, 1.05rem) !important;
    line-height: 1.15 !important;
  }

  .levelTitle,
  .levelBadge,
  .levelLabel {
    max-width: 70vw !important;
    font-size: clamp(0.9rem, 3.8vw, 1.15rem) !important;
    line-height: 1.15 !important;
    padding: 10px 14px !important;
    border-radius: 18px !important;
  }

  .timeBox,
  .scoreBox,
  .pointsBox,
  .timer,
  .timeSaved {
    font-size: clamp(0.85rem, 3.4vw, 1rem) !important;
    line-height: 1.1 !important;
  }

  .progress,
  .progressBar,
  .timeProgress {
    height: 18px !important;
    max-width: 28vw !important;
  }

  .infoBox,
  .knowhowBox,
  .questionBox,
  .modal,
  .dialog,
  .card,
  .messageBox {
    max-width: calc(100vw - 24px) !important;
    width: auto !important;
    left: 12px !important;
    right: 12px !important;
    padding: 18px 20px !important;
    border-radius: 22px !important;
    font-size: clamp(1rem, 4.4vw, 1.25rem) !important;
  }

  .infoBox h2,
  .knowhowBox h2,
  .questionBox h2,
  .modal h2,
  .dialog h2 {
    font-size: clamp(1.35rem, 6vw, 1.8rem) !important;
    line-height: 1.1 !important;
  }

  .infoBox p,
  .knowhowBox p,
  .questionBox p,
  .modal p,
  .dialog p {
    font-size: clamp(1rem, 4.2vw, 1.2rem) !important;
    line-height: 1.25 !important;
  }

  .controls,
  .mobileControls,
  .touchControls {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: env(safe-area-inset-bottom, 0) !important;
    z-index: 50 !important;
    pointer-events: none !important;
  }

  .controls button,
  .mobileControls button,
  .touchControls button,
  .controlBtn,
  .jumpBtn,
  #leftBtn,
  #rightBtn,
  #jumpBtn {
    pointer-events: auto !important;
    width: clamp(72px, 18vw, 104px) !important;
    height: clamp(72px, 18vw, 104px) !important;
    min-width: clamp(72px, 18vw, 104px) !important;
    min-height: clamp(72px, 18vw, 104px) !important;
    font-size: clamp(1.8rem, 7vw, 2.4rem) !important;
    border-radius: 999px !important;
  }

  #jumpBtn,
  .jumpBtn {
    width: clamp(86px, 22vw, 122px) !important;
    height: clamp(86px, 22vw, 122px) !important;
    font-size: clamp(1rem, 4.5vw, 1.45rem) !important;
  }

  .primaryBtn,
  .secondaryBtn,
  .modeBtn {
    width: min(100%, 430px) !important;
    min-height: 56px !important;
    font-size: clamp(1rem, 4.2vw, 1.25rem) !important;
    padding: 12px 16px !important;
  }

  .modeBtn span {
    font-size: clamp(0.78rem, 3.2vw, 0.95rem) !important;
  }
}

/* Handy im Querformat: Spielfläche priorisieren */
@media (max-width: 940px) and (orientation: landscape) {
  header,
  .header,
  .topbar,
  .gameHeader,
  .hud,
  .topHud {
    padding: 5px 8px !important;
  }

  .logo,
  .brandLogo,
  .appLogo {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }

  h1,
  .brandTitle,
  .title,
  .gameTitle {
    font-size: 1.25rem !important;
  }

  .subtitle,
  .brandSubtitle,
  .tagline {
    font-size: 0.8rem !important;
  }

  .levelTitle,
  .levelBadge,
  .levelLabel {
    font-size: 0.9rem !important;
    padding: 7px 12px !important;
    border-radius: 16px !important;
  }

  .timeBox,
  .scoreBox,
  .pointsBox,
  .timer,
  .timeSaved {
    font-size: 0.8rem !important;
  }

  .progress,
  .progressBar,
  .timeProgress {
    height: 14px !important;
  }

  .infoBox,
  .knowhowBox,
  .questionBox,
  .modal,
  .dialog,
  .card,
  .messageBox {
    top: 58px !important;
    max-height: calc(100svh - 120px) !important;
    overflow-y: auto !important;
    padding: 14px 16px !important;
  }

  .controls button,
  .mobileControls button,
  .touchControls button,
  .controlBtn,
  #leftBtn,
  #rightBtn {
    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    min-height: 62px !important;
    font-size: 1.8rem !important;
  }

  #jumpBtn,
  .jumpBtn {
    width: 78px !important;
    height: 78px !important;
    min-width: 78px !important;
    min-height: 78px !important;
    font-size: 0.95rem !important;
  }
}

/* Sehr schmale Geräte */
@media (max-width: 420px) {
  .levelTitle,
  .levelBadge,
  .levelLabel {
    max-width: 64vw !important;
  }

  .progress,
  .progressBar,
  .timeProgress {
    max-width: 24vw !important;
  }

  .infoBox,
  .knowhowBox,
  .questionBox,
  .modal,
  .dialog,
  .card,
  .messageBox {
    padding: 14px 16px !important;
  }

  .primaryBtn,
  .secondaryBtn,
  .modeBtn {
    min-height: 52px !important;
  }
}
/* /KI_SPRUNG_MOBILE_LAYOUT_V1 */


/* KI_SPRUNG_MOBILE_STARTSCREEN_FIX_V1 */
/*
  Behebt: Startbildschirm überdeckt auf Handy alles.
  Ziel: Startbereich wird kleiner, scrollbar und blockiert die Steuerung nicht dauerhaft.
  Nur CSS, keine Spiellogik.
*/

@media (max-width: 780px) {
  #startScreen,
  .startScreen,
  .introScreen,
  .startOverlay,
  .menuScreen,
  .welcomeScreen {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100svh !important;
    max-height: 100svh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 14px 14px calc(150px + env(safe-area-inset-bottom, 0px)) 14px !important;
    box-sizing: border-box !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }

  #startScreen > *,
  .startScreen > *,
  .introScreen > *,
  .startOverlay > *,
  .menuScreen > *,
  .welcomeScreen > * {
    max-width: calc(100vw - 28px) !important;
  }

  .startCard,
  .introCard,
  .welcomeCard,
  .menuCard,
  .heroCard,
  .startPanel,
  .introPanel {
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    max-height: none !important;
    padding: 18px 16px !important;
    margin: 0 auto 14px auto !important;
    border-radius: 24px !important;
    box-sizing: border-box !important;
  }

  #startScreen h1,
  .startScreen h1,
  .introScreen h1,
  .startOverlay h1,
  .welcomeScreen h1 {
    font-size: clamp(1.7rem, 8vw, 2.3rem) !important;
    line-height: 1.05 !important;
    margin: 0 0 8px 0 !important;
  }

  #startScreen h2,
  .startScreen h2,
  .introScreen h2,
  .startOverlay h2,
  .welcomeScreen h2 {
    font-size: clamp(1.15rem, 5.4vw, 1.55rem) !important;
    line-height: 1.12 !important;
    margin: 8px 0 !important;
  }

  #startScreen p,
  .startScreen p,
  .introScreen p,
  .startOverlay p,
  .welcomeScreen p {
    font-size: clamp(0.95rem, 4vw, 1.08rem) !important;
    line-height: 1.25 !important;
    margin: 8px 0 !important;
  }

  .modeButtons,
  .buttonRow,
  .startButtons,
  .menuButtons {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 12px !important;
  }

  #startBtn,
  #journeyBtn,
  #easyBtn,
  .modeBtn,
  .primaryBtn,
  .secondaryBtn {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 52px !important;
    padding: 11px 14px !important;
    font-size: clamp(1rem, 4.4vw, 1.18rem) !important;
    line-height: 1.15 !important;
    border-radius: 18px !important;
  }

  #startBtn span,
  #journeyBtn span,
  #easyBtn span,
  .modeBtn span {
    display: block !important;
    font-size: clamp(0.78rem, 3.3vw, 0.92rem) !important;
    line-height: 1.15 !important;
    margin-top: 3px !important;
  }
}

/* Handy quer: Startbildschirm besonders kompakt */
@media (max-width: 940px) and (orientation: landscape) {
  #startScreen,
  .startScreen,
  .introScreen,
  .startOverlay,
  .menuScreen,
  .welcomeScreen {
    padding: 8px 12px calc(96px + env(safe-area-inset-bottom, 0px)) 12px !important;
  }

  .startCard,
  .introCard,
  .welcomeCard,
  .menuCard,
  .heroCard,
  .startPanel,
  .introPanel {
    padding: 12px 14px !important;
    border-radius: 18px !important;
    margin-bottom: 8px !important;
  }

  #startScreen h1,
  .startScreen h1,
  .introScreen h1,
  .startOverlay h1,
  .welcomeScreen h1 {
    font-size: 1.45rem !important;
    margin-bottom: 4px !important;
  }

  #startScreen h2,
  .startScreen h2,
  .introScreen h2,
  .startOverlay h2,
  .welcomeScreen h2 {
    font-size: 1.05rem !important;
    margin: 4px 0 !important;
  }

  #startScreen p,
  .startScreen p,
  .introScreen p,
  .startOverlay p,
  .welcomeScreen p {
    font-size: 0.88rem !important;
    line-height: 1.18 !important;
    margin: 4px 0 !important;
  }

  .modeButtons,
  .buttonRow,
  .startButtons,
  .menuButtons {
    gap: 7px !important;
    margin-top: 8px !important;
  }

  #startBtn,
  #journeyBtn,
  #easyBtn,
  .modeBtn,
  .primaryBtn,
  .secondaryBtn {
    min-height: 42px !important;
    padding: 8px 12px !important;
    font-size: 0.95rem !important;
    border-radius: 14px !important;
  }

  #startBtn span,
  #journeyBtn span,
  #easyBtn span,
  .modeBtn span {
    font-size: 0.72rem !important;
    margin-top: 1px !important;
  }
}

/* /KI_SPRUNG_MOBILE_STARTSCREEN_FIX_V1 */


/* KI_SPRUNG_MOBILE_GAME_FIT_V1 */
/*
  Ziel:
  Die eigentliche Spielfläche soll auf Handy-Displays passen.
  Nur CSS/Layout. Keine Änderung an Leveln, Steuerung oder Spiellogik.
*/

@media (max-width: 780px) {
  html,
  body {
    width: 100%;
    height: 100%;
    min-height: 100svh;
    margin: 0;
    padding: 0;
    overflow: hidden !important;
  }

  body {
    position: fixed;
    inset: 0;
  }

  #game,
  canvas,
  .gameCanvas,
  .stage,
  .gameStage,
  .playfield,
  .gameArea,
  .world,
  .level,
  .levelArea {
    max-width: 100vw !important;
    max-height: 100svh !important;
    box-sizing: border-box !important;
  }

  .gameScreen,
  #gameScreen,
  .gameShell,
  .gameWrapper,
  .stageWrapper,
  .playWrapper,
  .gameContainer {
    width: 100vw !important;
    height: 100svh !important;
    max-width: 100vw !important;
    max-height: 100svh !important;
    overflow: hidden !important;
    position: relative !important;
    box-sizing: border-box !important;
  }

  /*
    Obere HUD-Leiste kompakter machen,
    damit darunter mehr echte Spielfläche bleibt.
  */
  .gameHeader,
  .hud,
  .topHud,
  header {
    height: auto !important;
    max-height: 76px !important;
    min-height: 56px !important;
    overflow: hidden !important;
  }

  /*
    Die Spielfläche bekommt Platz zwischen Kopfbereich und Steuerung.
    Wichtig für Handy: unten bleibt Raum für Touch-Buttons.
  */
  .stage,
  .gameStage,
  .playfield,
  .gameArea,
  .world,
  .level,
  .levelArea,
  #game,
  canvas {
    width: 100vw !important;
    height: calc(100svh - 76px) !important;
    min-height: 0 !important;
    object-fit: contain !important;
  }

  /*
    Falls das Spiel eine feste innere Breite nutzt:
    optisch auf Displaybreite begrenzen.
  */
  .stageInner,
  .worldInner,
  .gameInner,
  .levelInner,
  .camera,
  .cameraLayer {
    max-width: 100vw !important;
    max-height: calc(100svh - 76px) !important;
    overflow: hidden !important;
  }

  /*
    Touch-Steuerung bleibt sichtbar, aber kompakter.
  */
  .controls,
  .mobileControls,
  .touchControls {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    height: 92px !important;
    max-height: 92px !important;
    z-index: 100 !important;
  }

  #leftBtn,
  #rightBtn,
  .controlBtn {
    width: 68px !important;
    height: 68px !important;
    min-width: 68px !important;
    min-height: 68px !important;
    font-size: 1.9rem !important;
  }

  #jumpBtn,
  .jumpBtn {
    width: 86px !important;
    height: 86px !important;
    min-width: 86px !important;
    min-height: 86px !important;
    font-size: 1rem !important;
  }
}

/* Handy quer: bevorzugte Spielansicht */
@media (max-width: 940px) and (orientation: landscape) {
  html,
  body {
    overflow: hidden !important;
  }

  .gameHeader,
  .hud,
  .topHud,
  header {
    max-height: 52px !important;
    min-height: 42px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  .stage,
  .gameStage,
  .playfield,
  .gameArea,
  .world,
  .level,
  .levelArea,
  #game,
  canvas {
    width: 100vw !important;
    height: calc(100svh - 52px) !important;
    max-height: calc(100svh - 52px) !important;
  }

  .controls,
  .mobileControls,
  .touchControls {
    height: 72px !important;
    max-height: 72px !important;
    bottom: calc(4px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #leftBtn,
  #rightBtn,
  .controlBtn {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    font-size: 1.6rem !important;
  }

  #jumpBtn,
  .jumpBtn {
    width: 74px !important;
    height: 74px !important;
    min-width: 74px !important;
    min-height: 74px !important;
    font-size: 0.9rem !important;
  }

  .infoBox,
  .knowhowBox,
  .questionBox,
  .modal,
  .dialog,
  .messageBox {
    max-height: calc(100svh - 82px) !important;
    overflow-y: auto !important;
  }
}

/* Sehr kleine Hochformat-Handys */
@media (max-width: 420px) and (orientation: portrait) {
  .gameHeader,
  .hud,
  .topHud,
  header {
    max-height: 68px !important;
  }

  .stage,
  .gameStage,
  .playfield,
  .gameArea,
  .world,
  .level,
  .levelArea,
  #game,
  canvas {
    height: calc(100svh - 68px) !important;
  }

  .controls,
  .mobileControls,
  .touchControls {
    height: 84px !important;
  }

  #leftBtn,
  #rightBtn,
  .controlBtn {
    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    min-height: 62px !important;
  }

  #jumpBtn,
  .jumpBtn {
    width: 78px !important;
    height: 78px !important;
    min-width: 78px !important;
    min-height: 78px !important;
  }
}
/* /KI_SPRUNG_MOBILE_GAME_FIT_V1 */




/* KI_SPRUNG_MOBILE_FIX_V2 */
/*
  Ziel:
  - Keine überlaufenden Texte mehr.
  - Spielbereich bleibt innerhalb des Handy-Displays.
  - Figur und Plattformen sollen sichtbar bleiben.
  - Keine Startlogik, keine Leveländerung, keine Buttonlogik.
*/

@media (max-width: 940px) {
  html,
  body {
    width: 100%;
    min-width: 0 !important;
    max-width: 100vw !important;
    min-height: 100dvh;
    margin: 0;
    padding: 0;
    overflow: hidden !important;
  }

  * {
    box-sizing: border-box;
  }

  /*
    Wichtig gegen dein Screenshot-Problem:
    Lange Überschriften dürfen nicht mehr über die Box laufen.
  */
  h1,
  h2,
  h3,
  p,
  span,
  div,
  button,
  .levelTitle,
  .levelBadge,
  .levelLabel,
  .title,
  .gameTitle,
  .cardTitle,
  .hudTitle,
  .infoTitle,
  .questionTitle {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    white-space: normal !important;
  }

  /*
    Große Level-/Infokarten kompakter und begrenzt.
  */
  .levelTitle,
  .levelBadge,
  .levelLabel,
  .hudTitle,
  .infoTitle,
  .questionTitle,
  .cardTitle {
    font-size: clamp(1rem, 4.2vw, 1.45rem) !important;
    line-height: 1.1 !important;
  }

  .levelCard,
  .statusCard,
  .infoCard,
  .questionCard,
  .panel,
  .hudPanel,
  .messageBox,
  .infoBox,
  .knowhowBox,
  .questionBox {
    max-width: calc(100vw - 24px) !important;
    overflow: hidden !important;
  }

  /*
    Spielscreen hart auf sichtbaren Bereich begrenzen.
  */
  #gameScreen,
  .gameScreen,
  .gameShell,
  .gameWrapper,
  .stageWrapper,
  .playWrapper,
  .gameContainer {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    position: relative !important;
  }

  /*
    HUD oben kleiner, damit mehr Platz für das eigentliche Spiel bleibt.
  */
  header,
  .header,
  .gameHeader,
  .topbar,
  .hud,
  .topHud {
    max-width: 100vw !important;
    min-height: 0 !important;
    max-height: 72px !important;
    padding: 6px 8px !important;
    overflow: hidden !important;
  }

  .brand,
  .logoArea,
  .titleArea,
  .hudLeft,
  .hudCenter,
  .hudRight {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .brandTitle,
  .gameTitle,
  header h1,
  .header h1 {
    font-size: clamp(1.15rem, 5vw, 1.65rem) !important;
    line-height: 1 !important;
  }

  .brandSubtitle,
  .tagline,
  .subtitle {
    font-size: clamp(0.72rem, 3.2vw, 0.95rem) !important;
    line-height: 1.05 !important;
  }

  /*
    Bühne nicht mehr frei über den Bildschirm hinausragen lassen.
    Unten bleibt Platz für Touch-Steuerung.
  */
  #game,
  canvas,
  .stage,
  .gameStage,
  .playfield,
  .gameArea,
  .world,
  .level,
  .levelArea {
    width: 100vw !important;
    max-width: 100vw !important;
    height: calc(100dvh - 72px) !important;
    max-height: calc(100dvh - 72px) !important;
    overflow: hidden !important;
  }

  /*
    Falls die Welt breiter ist: nicht den Text aufblasen, sondern den sichtbaren Bereich clippen.
  */
  .stageInner,
  .worldInner,
  .gameInner,
  .levelInner,
  .camera,
  .cameraLayer {
    max-width: 100vw !important;
    overflow: hidden !important;
  }

  /*
    Touch-Steuerung sichtbar und kleiner.
  */
  .controls,
  .mobileControls,
  .touchControls {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 9999 !important;
    height: 82px !important;
    max-height: 82px !important;
    pointer-events: none !important;
  }

  .controls button,
  .mobileControls button,
  .touchControls button,
  #leftBtn,
  #rightBtn,
  #jumpBtn {
    pointer-events: auto !important;
  }

  #leftBtn,
  #rightBtn,
  .controlBtn {
    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    min-height: 62px !important;
    font-size: 1.7rem !important;
  }

  #jumpBtn,
  .jumpBtn {
    width: 76px !important;
    height: 76px !important;
    min-width: 76px !important;
    min-height: 76px !important;
    font-size: 0.9rem !important;
  }
}

/*
  Handy quer ist die Haupt-Spielansicht.
  Hier muss fast alles kompakter werden.
*/
@media (max-width: 940px) and (orientation: landscape) {
  header,
  .header,
  .gameHeader,
  .topbar,
  .hud,
  .topHud {
    max-height: 54px !important;
    padding: 3px 6px !important;
  }

  .brandTitle,
  .gameTitle,
  header h1,
  .header h1 {
    font-size: 1.1rem !important;
  }

  .brandSubtitle,
  .tagline,
  .subtitle {
    font-size: 0.72rem !important;
  }

  .levelTitle,
  .levelBadge,
  .levelLabel,
  .hudTitle,
  .infoTitle,
  .questionTitle,
  .cardTitle {
    font-size: clamp(0.9rem, 3vw, 1.2rem) !important;
    line-height: 1.05 !important;
  }

  .levelCard,
  .statusCard,
  .infoCard,
  .questionCard,
  .panel,
  .hudPanel,
  .messageBox,
  .infoBox,
  .knowhowBox,
  .questionBox {
    max-width: min(44vw, 360px) !important;
    padding: 10px 12px !important;
    border-radius: 16px !important;
  }

  #game,
  canvas,
  .stage,
  .gameStage,
  .playfield,
  .gameArea,
  .world,
  .level,
  .levelArea {
    height: calc(100dvh - 54px) !important;
    max-height: calc(100dvh - 54px) !important;
  }

  .controls,
  .mobileControls,
  .touchControls {
    height: 66px !important;
    max-height: 66px !important;
    bottom: calc(4px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #leftBtn,
  #rightBtn,
  .controlBtn {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    font-size: 1.45rem !important;
  }

  #jumpBtn,
  .jumpBtn {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    font-size: 0.82rem !important;
  }
}

/* /KI_SPRUNG_MOBILE_FIX_V2 */


/* KI_SPRUNG_MOBILE_TOPIC_TEXT_FIX_V1 */
/*
  Problem:
  Lange Leveltitel laufen auf Handy über die Boxen.
  Lösung:
  Auf kleinen Displays werden Titelkarten kompakter, begrenzt und umbrechbar.
  Das Thema muss nicht über die ganze Seite gehen.
*/

@media (max-width: 940px) {
  .levelTitle,
  .levelBadge,
  .levelLabel,
  .hudTitle,
  .cardTitle,
  .statusCard h1,
  .statusCard h2,
  .levelCard h1,
  .levelCard h2,
  .panel h1,
  .panel h2 {
    max-width: min(78vw, 520px) !important;
    width: auto !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    line-height: 1.08 !important;
    font-size: clamp(1rem, 4.4vw, 1.55rem) !important;
  }

  .statusCard,
  .levelCard,
  .hudPanel,
  .panel {
    max-width: min(82vw, 560px) !important;
    overflow: hidden !important;
  }
}

/* Handy quer: Titel deutlich kürzer und schmaler halten */
@media (max-width: 940px) and (orientation: landscape) {
  .levelTitle,
  .levelBadge,
  .levelLabel,
  .hudTitle,
  .cardTitle,
  .statusCard h1,
  .statusCard h2,
  .levelCard h1,
  .levelCard h2,
  .panel h1,
  .panel h2 {
    max-width: min(42vw, 430px) !important;
    font-size: clamp(0.9rem, 2.7vw, 1.25rem) !important;
    line-height: 1.05 !important;
  }

  .statusCard,
  .levelCard,
  .hudPanel,
  .panel {
    max-width: min(44vw, 460px) !important;
  }
}
/* /KI_SPRUNG_MOBILE_TOPIC_TEXT_FIX_V1 */


/* KI_SPRUNG_MOBILE_COMPACT_HUD_V1 */
/*
  Ziel:
  - Handy nutzt den vorhandenen Platz besser.
  - Kopfbereich wird kompakter.
  - Der lange Leveltitel läuft nicht mehr über.
  - Untertitel im Logo-Bereich wird auf Handy reduziert/ausgeblendet.
  - Keine Änderung an Spiellogik, Leveln oder Startlogik.
*/

@media (max-width: 940px) {
  body {
    overflow: hidden !important;
  }

  /*
    Kopfbereich: auf Handy deutlich kompakter.
  */
  header,
  .header,
  .gameHeader,
  .topbar,
  .hud,
  .topHud {
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    padding: 4px 8px !important;
    gap: 8px !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  /*
    Logo und Titel kleiner.
  */
  .logo,
  .brandLogo,
  .appLogo {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
  }

  .brand,
  .brandArea,
  .logoArea,
  .titleArea,
  .hudLeft {
    min-width: 0 !important;
    max-width: 30vw !important;
    overflow: hidden !important;
  }

  .brandTitle,
  .gameTitle,
  header h1,
  .header h1 {
    font-size: 1.35rem !important;
    line-height: 1 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /*
    Der Untertitel frisst auf Handy zu viel Platz.
    Inhaltlich reicht der Titel KI-Sprung.
  */
  .brandSubtitle,
  .tagline,
  .subtitle {
    display: none !important;
  }

  /*
    Level-Pille: nicht mehr breit über die Seite,
    sondern kurz und sauber umbrechbar.
  */
  .levelTitle,
  .levelBadge,
  .levelLabel,
  .hudCenter {
    max-width: 38vw !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .levelTitle,
  .levelBadge,
  .levelLabel,
  .hudCenter h1,
  .hudCenter h2,
  .hudCenter div,
  .hudCenter span {
    font-size: 0.92rem !important;
    line-height: 1.08 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    max-height: 42px !important;
    overflow: hidden !important;
  }

  /*
    Zeitbereich rechts kompakter.
  */
  .timeBox,
  .scoreBox,
  .pointsBox,
  .timer,
  .timeSaved,
  .hudRight {
    max-width: 30vw !important;
    min-width: 0 !important;
    font-size: 0.9rem !important;
    line-height: 1.05 !important;
    overflow: hidden !important;
  }

  .progress,
  .progressBar,
  .timeProgress {
    height: 12px !important;
    max-width: 25vw !important;
    border-radius: 999px !important;
  }

  /*
    Spielbereich direkt unter dem kompakten Kopf beginnen lassen.
    Der unnötige große Leerstreifen wird reduziert.
  */
  #gameScreen,
  .gameScreen,
  .gameShell,
  .gameWrapper,
  .stageWrapper,
  .playWrapper,
  .gameContainer {
    width: 100vw !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  #game,
  canvas,
  .stage,
  .gameStage,
  .playfield,
  .gameArea,
  .world,
  .level,
  .levelArea {
    width: 100vw !important;
    max-width: 100vw !important;
    height: calc(100dvh - 58px) !important;
    max-height: calc(100dvh - 58px) !important;
    overflow: hidden !important;
  }

  /*
    Große Info-/Statusbox innerhalb des Spiels nicht über die ganze Breite.
  */
  .statusCard,
  .levelCard,
  .hudPanel,
  .panel,
  .infoBox,
  .knowhowBox,
  .questionBox,
  .messageBox {
    max-width: min(78vw, 520px) !important;
    padding: 10px 14px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  .statusCard h1,
  .statusCard h2,
  .levelCard h1,
  .levelCard h2,
  .panel h1,
  .panel h2,
  .infoBox h1,
  .infoBox h2,
  .knowhowBox h1,
  .knowhowBox h2 {
    font-size: clamp(1rem, 3.6vw, 1.35rem) !important;
    line-height: 1.08 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    max-width: 100% !important;
  }
}

/*
  Querformat: Hauptansicht für das Handyspiel.
  Noch kompakter, damit Spielfigur und Plattformen sichtbar bleiben.
*/
@media (max-width: 940px) and (orientation: landscape) {
  header,
  .header,
  .gameHeader,
  .topbar,
  .hud,
  .topHud {
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding: 2px 8px !important;
  }

  .logo,
  .brandLogo,
  .appLogo {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
  }

  .brand,
  .brandArea,
  .logoArea,
  .titleArea,
  .hudLeft {
    max-width: 24vw !important;
  }

  .brandTitle,
  .gameTitle,
  header h1,
  .header h1 {
    font-size: 1.05rem !important;
  }

  .levelTitle,
  .levelBadge,
  .levelLabel,
  .hudCenter {
    max-width: 34vw !important;
  }

  .levelTitle,
  .levelBadge,
  .levelLabel,
  .hudCenter h1,
  .hudCenter h2,
  .hudCenter div,
  .hudCenter span {
    font-size: 0.78rem !important;
    line-height: 1.05 !important;
    max-height: 34px !important;
  }

  .timeBox,
  .scoreBox,
  .pointsBox,
  .timer,
  .timeSaved,
  .hudRight {
    max-width: 28vw !important;
    font-size: 0.78rem !important;
  }

  .progress,
  .progressBar,
  .timeProgress {
    height: 10px !important;
    max-width: 23vw !important;
  }

  #game,
  canvas,
  .stage,
  .gameStage,
  .playfield,
  .gameArea,
  .world,
  .level,
  .levelArea {
    height: calc(100dvh - 46px) !important;
    max-height: calc(100dvh - 46px) !important;
  }

  .statusCard,
  .levelCard,
  .hudPanel,
  .panel,
  .infoBox,
  .knowhowBox,
  .questionBox,
  .messageBox {
    max-width: min(42vw, 380px) !important;
    padding: 8px 10px !important;
    border-radius: 14px !important;
  }

  .statusCard h1,
  .statusCard h2,
  .levelCard h1,
  .levelCard h2,
  .panel h1,
  .panel h2,
  .infoBox h1,
  .infoBox h2,
  .knowhowBox h1,
  .knowhowBox h2 {
    font-size: clamp(0.85rem, 2.6vw, 1.05rem) !important;
    line-height: 1.05 !important;
  }

  /*
    Steuerung kleiner und weiter nach unten,
    damit sie weniger Spielfeld verdeckt.
  */
  .controls,
  .mobileControls,
  .touchControls {
    height: 58px !important;
    max-height: 58px !important;
    bottom: calc(3px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #leftBtn,
  #rightBtn,
  .controlBtn {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    font-size: 1.35rem !important;
  }

  #jumpBtn,
  .jumpBtn {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    font-size: 0.76rem !important;
    line-height: 1 !important;
  }
}

/* /KI_SPRUNG_MOBILE_COMPACT_HUD_V1 */