<style>
  :root{--ink:#2B1D37;--teal:#009999;--yellow:#F7BA20;--magenta:#E12B54;--blue:#1476B7;--space:#1f1429}
  *{box-sizing:border-box}
  html,body{
	  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* sorgt dafür, dass Inhalt oben ist */
  align-items: center; /* optional: zentriert horizontal */
  }
  body{margin:0;font-family:Arial, Helvetica, sans-serif;background:radial-gradient(1200px 800px at 70% 20%, #2B1D37 0%, #1b1124 60%, #0f0a12 100%);color:#fff;overflow:hidden}

  /* Himmel */
  .sky{position:fixed;inset:0;z-index:0;pointer-events:none}
  .star{position:absolute;width:6px;height:6px;background:var(--yellow);border-radius:50%;filter:drop-shadow(0 0 4px rgba(247,186,32,.6));animation:twinkle 2.2s infinite ease-in-out}
  .star.small{width:3px;height:3px;animation-duration:1.8s}
  .star.big{width:8px;height:8px;animation-duration:2.8s}
  @keyframes twinkle{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.25)}}

  /* Layout/Container */
  .wrap{position:relative;z-index:1;height:100%;display:grid;place-items:center;padding:24px}
  .card,.item-card,.feedback-page,.mc-card,.correct-page,.hint-page{
    width:min(720px,94vw);
    background:rgba(43,29,55,.75);
    border:3px solid var(--teal);
    border-radius:24px;
    padding:28px 24px 32px;
    box-shadow:0 10px 30px rgba(0,0,0,.35);
    backdrop-filter:blur(6px)
  }
  .card{text-align:center;position:relative;box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 0 0 6px rgba(0,153,153,.12)}
  .logo{width:140px;margin-bottom:16px}
  h1{margin:0 0 .25em 0;font-weight:800;font-size:clamp(28px,6vw,44px);color:var(--yellow);text-shadow:0 2px 0 rgba(0,0,0,.25);letter-spacing:.5px}
  .sub{font-size:clamp(16px,3.2vw,20px);margin:.1em 0 .5em;color:#fff}
  .hint{font-size:clamp(15px,3vw,18px);margin:0;color:#fff}

  /* Buttons */
  .cta,.submit,.continue,.next{
    margin-top:16px;display:inline-flex;align-items:center;gap:.55em;font-weight:800;border:none;cursor:pointer;color:#fff;background:var(--magenta) !important;padding:12px 22px;border-radius:14px;box-shadow:0 6px 0 #a5183a;text-decoration:none
  }
  .cta{font-size:clamp(18px,4vw,22px);padding:14px 26px}
  .cta:hover,.submit:hover,.continue:hover,.next:hover{background:var(--blue);box-shadow:0 6px 0 #0f5790}

  /* Rakete (inline SVG) */
  .rocket{position:absolute;top:-170px;left:50%;transform:translateX(-50%) rotate(-25deg);width:90px}

  /* Weiße Leseflächen */
  .item-text,.feedback-box,.mc-text,.correct-box,.hint-box{
    background:#fff;color:#000;padding:16px;border-radius:12px;text-align:left;margin-bottom:16px;font-size:1.1em;position:relative;overflow:hidden
  }
  textarea.answer{width:100%;min-height:110px;border-radius:12px;padding:12px;border:2px solid var(--teal);font-size:1em;resize:vertical}

  /* Optionen */
  .options{display:grid;grid-template-columns:1fr;gap:12px}
  .option{background:#fff;color:#000;border-radius:12px;border:2px solid var(--teal);padding:14px;cursor:pointer;user-select:none}
  .option.wrong{border-color:#E12B54;box-shadow:0 0 0 3px rgba(225,43,84,.15) inset}
  .option.correct{border-color:#2aa84a;box-shadow:0 0 0 3px rgba(42,168,74,.2) inset}

  /* Richtig-Animation (dezent) */
  .celebrate{animation:celebrateAnim 900ms ease-out}
  @keyframes celebrateAnim{0%{background:#fff}50%{background:#c8f7c5}100%{background:#fff}}
  .confetti-piece{position:absolute;width:6px;height:6px;opacity:.9;animation:fall 900ms ease-out forwards}
  @keyframes fall{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(40px) rotate(360deg);opacity:0}}

  /* Router-Screens */
  .screen{display:none}
  .screen.active{display:block}
</style>