:root{
      --bg: linear-gradient(180deg,#f3f7ff 0%,#f7f9ff 50%,#faf8f3 100%);
      --card: rgba(255,255,255,0.78);
      --card-border: rgba(255,255,255,0.7);
      --text: #162033;
      --muted: #5f6b7a;
      --shadow: 0 18px 50px rgba(20, 30, 50, 0.10);
      --accent: #1f6fff;
      --accent-soft: rgba(31,111,255,0.10);
      --success: #1d9b5f;
      --radius-xl: 28px;
      --radius-lg: 20px;
    }

    * { box-sizing: border-box; }

    body{
      margin:0;
      min-height:100vh;
      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: var(--bg);
      color: var(--text);
      display:flex;
      align-items:center;
      justify-content:center;
      padding: 28px 16px;
    }

    .app{
      width:100%;
      max-width:760px;
    }

    .card{
      background: var(--card);
      border: 1px solid var(--card-border);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow);
      backdrop-filter: blur(18px) saturate(150%);
      -webkit-backdrop-filter: blur(18px) saturate(150%);
      padding: 26px;
    }

    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 14px;
      border-radius:999px;
      background: rgba(255,255,255,0.7);
      border: 1px solid rgba(255,255,255,0.8);
      color: var(--muted);
      font-size: 0.84rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      margin-bottom: 16px;
    }

    h1{
      margin:0;
      font-size: clamp(2rem, 4vw, 2.8rem);
      line-height:1.05;
      letter-spacing:-0.03em;
      text-align: center;
    }

h1 {
  text-align: center;
  margin-bottom: 8px;
}

.subtitle {
  text-align: center;
  max-width: 500px;
  margin: 0 auto;
}
    .mission-board{
      margin-top: 28px;
      display:grid;
      gap:16px;
    }

    .mission-item{
      background: rgba(255,255,255,0.62);
      border: 1px solid rgba(255,255,255,0.75);
      border-radius: var(--radius-lg);
      padding: 18px 18px 16px;
    }

    .mission-label{
      display:block;
      font-size: 0.82rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--muted);
      margin-bottom: 8px;
    }

    .mission-value{
      font-size: clamp(1.2rem, 2vw, 1.5rem);
      line-height:1.3;
      font-weight: 700;
      letter-spacing: -0.02em;
    }

    .helper{
      margin-top: 18px;
      background: var(--accent-soft);
      border: 1px solid rgba(31,111,255,0.14);
      border-radius: var(--radius-lg);
      padding: 18px;
    }

    .helper-title{
      margin:0 0 8px;
      font-size: 0.9rem;
      font-weight: 800;
      color: var(--accent);
      letter-spacing: 0.03em;
      text-transform: uppercase;
    }

    .helper-text{
      margin:0;
      font-size: 1.02rem;
      line-height:1.55;
      font-weight: 600;
    }

    .actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-top: 24px;
      justify-content: center;
    }

    button{
      appearance:none;
      border:none;
      cursor:pointer;
      font: inherit;
      transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease, background .16s ease;
    }





.btn-primary {
  margin-top: 24px;

  padding: 16px 22px;
  border-radius: 18px;

  background: #162033;
  color: #fff;

  font-weight: 700;
  font-size: 1rem;

  box-shadow: 0 12px 28px rgba(22,32,51,0.18);

  transition: all 0.18s ease;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(22,32,51,0.22);
}

.btn-primary:active {
  transform: scale(0.98);
}

@media (prefers-color-scheme: dark) {

  .btn-primary {
    background: #eef4ff;
    color: #0b1220;
  }
}

    .mini-note{
      margin-top: 16px;
      color: var(--muted);
      font-size: 0.92rem;
      line-height:1.5;
    }

    .reward{
      margin-top: 18px;
      min-height: 26px;
      font-weight: 800;
      color: var(--success);
      opacity:0;
      transform: translateY(4px);
      transition: opacity .2s ease, transform .2s ease;
    }

    .reward.show{
      opacity:1;
      transform: translateY(0);
    }

    @media (prefers-color-scheme: dark){
      :root{
        --bg: radial-gradient(circle at 20% 20%,#0e1a2a 0%,#0a111a 70%) fixed;
        --card: rgba(16,24,38,0.72);
        --card-border: rgba(255,255,255,0.08);
        --text: #eef4ff;
        --muted: #b5c0d0;
        --shadow: 0 18px 50px rgba(0,0,0,0.35);
        --accent: #8eb8ff;
        --accent-soft: rgba(142,184,255,0.10);
        --success: #7ee2a8;
      }

      .eyebrow,
      .mission-item,
      .btn-secondary{
        background: rgba(255,255,255,0.05);
        border-color: rgba(255,255,255,0.08);
      }

      .btn-primary{
        background:#eef4ff;
        color:#0b1220;
        box-shadow: 0 10px 24px rgba(0,0,0,0.26);
      }
    }

    /* 🔥 MISSION HERO BLOCK */
.mission-hero {
  margin-top: 28px;
  padding: 24px 22px;

  border-radius: 22px;

  background: linear-gradient(
    180deg,
    rgba(31, 111, 255, 0.08),
    rgba(31, 111, 255, 0.03)
  );

  border: 1px solid rgba(31, 111, 255, 0.15);

  box-shadow:
    0 10px 30px rgba(20, 30, 50, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.6);

  text-align: center;
}

/* Label klein + ruhig */
.mission-label {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  color: #5f6b7a;

  margin-bottom: 10px;
}

/* 🔥 DIE WICHTIGE ZEILE */
.mission-text {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;

  color: #1f6fff;
}

@media (prefers-color-scheme: dark) {

  .mission-hero {
    background: linear-gradient(
      180deg,
      rgba(142,184,255,0.12),
      rgba(142,184,255,0.05)
    );

    border: 1px solid rgba(142,184,255,0.2);

    box-shadow:
      0 12px 40px rgba(0,0,0,0.35),
      inset 0 1px 0 rgba(255,255,255,0.05);
  }

  .mission-label {
    color: #b5c0d0;
  }

  .mission-text {
    color: #8eb8ff;
  }
}

/* 🔹 INFO CARD (ROLLE + SITUATION) */
.info-card {
  margin-top: 20px;
  padding: 20px 20px;

  border-radius: 20px;

  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(255,255,255,0.7);

  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);

  box-shadow: 0 10px 30px rgba(20,30,50,0.08);
}

/* einzelne Zeile */
.info-row {
  display: flex;
  align-items: center;
  gap: 10px;

  font-size: 1rem;
  color: #5f6b7a;

  margin-bottom: 10px;
}

.info-row:last-child {
  margin-bottom: 0;
}

/* Label klein */
.info-label {
  font-weight: 700;
  opacity: 0.7;
}

/* 🔥 Value klar hervorgehoben */
.info-value {
  font-weight: 700;
  color: #162033;
  font-size: 1.15rem;
}

@media (prefers-color-scheme: dark) {

  .info-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
  }

  .info-row {
    color: #b5c0d0;
  }

  .info-value {
    color: #eef4ff;
  }
}

 .helper-box {
  margin-top: 20px;
  padding: 18px 20px;

  border-radius: 20px;

  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(0,0,0,0.04);

  box-shadow:
    0 6px 18px rgba(20,30,50,0.06),
    inset 0 1px 0 rgba(255,255,255,0.6);

  backdrop-filter: blur(10px);
}

.helper-title {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  color: #1f6fff;
  opacity: 0.7;

  margin-bottom: 6px;
}

.helper-text {
  font-weight: 400; /* vorher zu fett */
  font-size: 1.05rem;
  line-height: 1.5;

  color: #162033;
}

@media (prefers-color-scheme: dark) {

  .helper-box {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);

    box-shadow:
      0 8px 24px rgba(0,0,0,0.35),
      inset 0 1px 0 rgba(255,255,255,0.04);
  }

  .helper-text {
    color: #eef4ff;
  }

  .helper-title {
    color: #8eb8ff;
  }
}


/* 🔹 Seite richtig aufbauen */
html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

/* 🔹 Main wächst → Footer wird nach unten gedrückt */
main {
  flex: 1;
}

/* 🔹 FOOTER */
.section--footer {
  margin-top: auto;

  padding: 18px 0 24px;

  text-align: center;

  font-size: 0.85rem;
  color: #8a94a6;
}

/* Links */
.footer-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;

  margin-bottom: 6px;
}

.footer-links a {
  color: inherit;
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.footer-links a:hover {
  opacity: 1;
}

/* Separator */
.footer-sep {
  opacity: 0.4;
}

/* Copy */
.footer-copy {
  font-size: 0.8rem;
  opacity: 0.5;
}

@media (prefers-color-scheme: dark) {

  .section--footer {
    color: #6f7c91;
  }

  .footer-links a {
    opacity: 0.6;
  }

  .footer-copy {
    opacity: 0.4;
  }
}

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

main.app {
  flex: 1;
  padding-top: 80px; /* 🔥 wichtig */
}