/* =========================
       Grund-Design / Glas-Optik
       ========================= */
    :root{
      --bg-grad-start:#64baff;   /* helles Himmelblau */
      --bg-grad-mid:#8d7eff;     /* weiches Violett */
      --bg-grad-end:#c55ee9;     /* pink-lila Akzent */
      --text-main:#ffffff;
      --text-muted:rgba(255,255,255,.9);
      --radius-card:26px;
      margin:0;
        padding: 0;
        background-color:#0c538d;
    }

    

    body{
        height: 100%;
        width: auto;
        margin:0;
        padding: 0;
  min-height:100vh;
background-color:#0c538d;
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,
              'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,
              'Open Sans','Helvetica Neue',sans-serif;

  color:var(--text-main);

  background:linear-gradient(
    135deg,
    var(--bg-grad-start) 0%,
    var(--bg-grad-mid) 40%,
    var(--bg-grad-end) 100%
  );
  background-attachment:fixed; /* Hintergrund feststehend */
    }

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

    /* Glas-Karte (für alle Hauptbereiche) */
    .glass{
      background:rgba(255,255,255,.14);
      backdrop-filter:blur(18px) saturate(180%);
      -webkit-backdrop-filter:blur(18px) saturate(180%);
      border:1px solid rgba(255,255,255,.22);
      border-radius:var(--radius-card);
      padding:20px;
      box-shadow:0 20px 45px rgba(8,20,50,.25);
    }
    /* dunkle Tailwind-Textfarben in Glaskarten aufhellen, ohne Inhalte zu ändern */
    .glass .text-gray-800,
    .glass .text-gray-700,
    .glass .text-gray-600,
    .glass .text-gray-500 { color:rgba(255,255,255,.92)!important; }
    .glass .bg-green-50,
    .glass .bg-blue-50,
    .glass .bg-yellow-50 { background:rgba(255,255,255,.08)!important; color:#fff!important; }

    /* Header / Sonnen-Icon */
    .header{text-align:center;margin-bottom:22px}
    .palm{
      width:60px;height:60px;margin:0 auto 10px;border-radius:50%;
      background:radial-gradient(circle at center,#ffdf6a 0%,#ffb347 45%,rgba(255,255,255,0) 50%);
      position:relative;box-shadow:0 0 10px rgba(255,255,255,.3);
    }
    .palm::after{
      content:"";position:absolute;bottom:5px;left:50%;transform:translateX(-50%) rotate(2deg);
      width:10px;height:28px;background:#d3832a;border-radius:999px;
      box-shadow:-14px -10px 0 4px #13a05c,14px -10px 0 4px #0d7a46;
    }
    .title{font-size:2.1rem;font-weight:700;margin-bottom:6px;letter-spacing:-.3px;text-shadow:0 2px 6px rgba(0,0,0,.25)}
    .subtitle{font-size:.95rem;color:var(--text-muted);text-shadow:0 1px 3px rgba(0,0,0,.15)}

    /* Quiz-Card (Stil beibehalten) */
    .quiz-card{background:rgba(255,255,255,.14);backdrop-filter:blur(18px) saturate(180%);border:1px solid rgba(255,255,255,.22);
      border-radius:var(--radius-card);padding:22px 20px 26px;box-shadow:0 20px 45px rgba(8,20,50,.25)}
    .quiz-top-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:.85rem;color:var(--text-muted);font-weight:500}
    .progress-bar{width:100%;height:10px;background:rgba(255,255,255,.2);border-radius:999px;overflow:hidden;margin-bottom:20px}
    .progress-bar__value{width:15%;height:100%;background:linear-gradient(90deg,#fff 0%,#d5d5ff 100%);border-radius:999px;box-shadow:0 0 8px rgba(255,255,255,.5)}
    .question{font-size:1.25rem;font-weight:700;line-height:1.4;margin-bottom:18px;text-shadow:0 1px 4px rgba(0,0,0,.25)}
    .answer{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:14px 16px;margin-bottom:12px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:all .2s ease-out}
    .answer:hover{background:rgba(255,255,255,.25);transform:translateY(-1px);box-shadow:0 5px 15px rgba(0,0,0,.15)}
    .answer-label{font-weight:600;min-width:26px;opacity:.9}
    .answer-text{font-weight:500;flex:1}

    /* Blink (unverändert) */
    .blink-text{animation:blinker 2s linear infinite;color:#fff867;font-weight:600;text-shadow:0 0 6px rgba(255,255,255,.6)}
    @keyframes blinker{50%{opacity:0}}

    /* Sticky Bottom Navigation – halbtransparent, ohne weißen Hintergrund, vollbreit verteilt */
    .sticky-nav{
      position:fixed;bottom:0;left:0;right:0;width:100%;height:68px;
      display:flex;justify-content:space-around;align-items:center;
      background:linear-gradient(135deg,rgba(90,181,255,.20) 0%,rgba(114,115,255,.22) 50%,rgba(192,68,212,.20) 100%);
      backdrop-filter:blur(20px) saturate(180%);border-top:1px solid rgba(255,255,255,.25);
      box-shadow:0 -8px 25px rgba(0,0,0,.25);z-index:1000;
    }
    .sticky-nav a{
      flex:1;text-align:center;color:#fff;font-size:.8rem;font-weight:600;text-decoration:none;
      padding:10px 0 6px;background:transparent;border:none;transition:all .3s ease;
      display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:14px;
    }
    .sticky-nav a div{font-size:1.5rem;margin-bottom:3px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2))}
    .sticky-nav a:hover{background:rgba(160,190,255,.25);transform:translateY(-2px);box-shadow:0 0 10px rgba(120,170,255,.4)}
    @media (max-width:480px){
      .sticky-nav{height:60px}
      .sticky-nav a div{font-size:1.3rem}
      .sticky-nav a{font-size:.7rem}
    }

    /* Abstand unten, damit Inhalt nicht unter die Sticky-Bar rutscht */
    .main-content{padding-bottom:90px}

    /* Kleinere mobile Anpassungen */
    @media (max-width:440px){
      .title{font-size:1.8rem}
      .quiz-card{padding:18px 14px 22px}
      .question{font-size:1.1rem}
    }

    /* ========================================
   Responsive Tablet & Desktop Layout
   ======================================== */

/* Tablet-Ansicht (z. B. iPad Hoch- und Querformat) */
@media (min-width: 768px) and (max-width: 1199px) {
  body {
    padding: 48px 32px 100px;
  }

  .app-wrapper {
    max-width: 720px;
    margin: 0 auto;
  }

  .glass, .quiz-card {
    max-width: 700px;
    margin: 0 auto 32px;
  }

  .title {
    font-size: 2.3rem;
  }

  .subtitle {
    font-size: 1.1rem;
  }

  .question {
    font-size: 1.4rem;
  }

  .sticky-nav {
    height: 72px;
  }

  .sticky-nav a div {
    font-size: 1.7rem;
  }

  .sticky-nav a {
    font-size: 0.9rem;
  }
}

/* Desktop-Ansicht (ab ca. Laptopgröße) */
@media (min-width: 1200px) {
  body {
    padding: 60px 64px 120px;
  }
}

  .app-wrapper {
    max-width: 960px;
    margin: 0 auto;
  }

  /* Zwei Spalten für Karten, gleichmäßig verteilt */
  section .glass > .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }

  .title {
    font-size: 2.6rem;
  }

  .subtitle {
    font-size: 1.2rem;
  }

  .question {
    font-size: 1.5rem;
  }

  /* -------------------------------------------------------
       Blink-Effekt
       ------------------------------------------------------- */
    .blinki-text {
        animation: blinker 2s linear infinite;
        color: #fff867;
        font-weight: 600;
        text-shadow: 0 0 6px rgba(255,255,255,0.6);
    }
    @keyframes blinker {
        50% { opacity: 0; }
    }