*{margin:0;padding:0;box-sizing:border-box}
    html,body{height:100%}
    body{
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
      line-height:1.6;
      color:var(--text-primary);
      background:var(--bg-primary);
    }

    :root{
      --accent:#0a84ff;

      --bg-primary:#f6f7fb;
      --bg-secondary:#eef2f7;
      --bg-card:rgba(255,255,255,.72);

      --text-primary:#0f172a;
      --text-secondary:#475569;

      --border:rgba(15,23,42,.10);
      --shadow:0 10px 28px rgba(15,23,42,.10);

      --ok:#16a34a;
      --bad:#dc2626;

      --radius:22px;
      --radius-sm:16px;
    }

    @media (prefers-color-scheme: dark){
      :root{
        --accent:#7aa2ff;

        --bg-primary:#0b1020;
        --bg-secondary:#0f1730;
        --bg-card:rgba(18,25,45,.58);

        --text-primary:#eef2ff;
        --text-secondary:rgba(238,242,255,.72);

        --border:rgba(238,242,255,.12);
        --shadow:0 16px 48px rgba(0,0,0,.45);

        --ok:#36d399;
        --bad:#fb7185;
      }
    }

    body{
      background:
        radial-gradient(900px 520px at 18% 8%, rgba(10,132,255,.10), transparent 60%),
        radial-gradient(900px 520px at 82% 12%, rgba(16,185,129,.08), transparent 62%),
        linear-gradient(180deg, var(--bg-primary), var(--bg-secondary));
        
    }

    body{
  padding-bottom: 32px;
}

    .container{
      min-height:100%;
      padding:34px 18px;
      max-width:600px;
      margin:0 auto;
    }

    /* Header */
    .header{ text-align:center; margin-bottom:18px; }
    .header-top{
      display:flex;
      align-items:center;
      justify-content:flex-start;
      margin-bottom:14px;
    }

    .pill{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      padding:10px 12px;
      border-radius:999px;
      border:1px solid var(--border);
      background:rgba(255,255,255,.35);
      color:var(--text-secondary);
      text-decoration:none;
      font-weight:800;
      min-height:44px;
      backdrop-filter:blur(12px) saturate(160%);
      -webkit-backdrop-filter:blur(12px) saturate(160%);
    }
    @media (prefers-color-scheme: dark){
      .pill{ background:rgba(18,25,45,.35); }
    }

    .header-title{
      font-size:14px;
      color:var(--text-secondary);
      font-weight:900;
      letter-spacing:.2px;
      margin-bottom:6px;
    }
    .header h1{
      font-size:34px;
      line-height:1.15;
      font-weight:900;
      letter-spacing:-.02em;
      margin-bottom:8px;
    }
    .header-intro{
      font-size:15.5px;
      color:var(--text-secondary);
      max-width:520px;
      margin:0 auto;
    }

    /* Cards */
    .card{
      backdrop-filter:blur(12px) saturate(160%);
      -webkit-backdrop-filter:blur(12px) saturate(160%);
      background:var(--bg-card);
      border:1px solid var(--border);
      border-radius:var(--radius);
      padding:18px;
      box-shadow:var(--shadow);
      margin:14px 0;
    }

    /* Phrase */
    .phrase{ text-align:center; }
    .chips{
      display:flex;
      gap:8px;
      justify-content:center;
      flex-wrap:wrap;
      margin-bottom:10px;
    }
    .chip{
      padding:7px 10px;
      border-radius:999px;
      border:1px solid var(--border);
      color:var(--text-secondary);
      font-weight:900;
      font-size:12.5px;
      background:rgba(255,255,255,.20);
    }
    @media (prefers-color-scheme: dark){
      .chip{ background:rgba(18,25,45,.18); }
    }

    .phrase h2{
      font-size:38px;
      font-weight:950;
      letter-spacing:-.02em;
      margin-bottom:6px;
      color:var(--accent);
    }
    .phrase h3{
      font-size:18px;
      font-weight:800;
      margin-bottom:8px;
      opacity:.95;
    }
    .phrase p{
      color:var(--text-secondary);
      font-size:15.5px;
      line-height:1.65;
      max-width:520px;
      margin:0 auto;
    }

    /* Section titles */
    .section-title{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-bottom:12px;
    }
    .section-title h2{
      font-size:16px;
      color:var(--text-secondary);
      font-weight:950;
      letter-spacing:.2px;
    }
    .count{
      font-size:12.5px;
      color:var(--text-secondary);
      font-weight:900;
      border:1px solid var(--border);
      border-radius:999px;
      padding:6px 10px;
      background:rgba(255,255,255,.18);
    }
    @media (prefers-color-scheme: dark){
      .count{ background:rgba(18,25,45,.18); }
    }

    /* Examples */
    .examples{display:grid;gap:10px}
    .example{
      background:rgba(255,255,255,.18);
      border:1px solid var(--border);
      border-radius:var(--radius-sm);
      padding:12px 12px;
    }
    @media (prefers-color-scheme: dark){
      .example{ background:rgba(18,25,45,.16); }
    }
    .example small{
      display:block;
      color:var(--text-secondary);
      font-weight:950;
      letter-spacing:.2px;
      margin-bottom:6px;
      font-size:12.5px;
    }
    .example div{font-size:15.5px;line-height:1.55}

    /* Übungen - slim */
    .taskbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-bottom:10px;
    }
    .task-meta{
      color:var(--text-secondary);
      font-weight:900;
      font-size:13px;
      letter-spacing:.2px;
      display:flex;
      align-items:center;
      gap:8px;
      white-space:nowrap;
    }
    .task-dots{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
    .dot{
      width:30px;height:30px;
      border-radius:11px;
      border:1px solid var(--border);
      background:rgba(255,255,255,.18);
      color:var(--text-secondary);
      font-weight:950;
      cursor:pointer;
    }
    @media (prefers-color-scheme: dark){
      .dot{ background:rgba(18,25,45,.16); }
    }
    .dot[aria-current="true"]{
      background:rgba(10,132,255,.12);
      border-color:rgba(10,132,255,.28);
      color:var(--text-primary);
    }

    .task-q{
      font-size:16.5px;
      font-weight:950;
      text-align:center;
      margin: 2px 0 12px;
      line-height:1.45;
    }

    .opts{display:grid;gap:10px}
    .opt{
      width:100%;
      border-radius:14px;
      padding:14px 14px;
      min-height:52px;
      border:1px solid var(--border);
      background:rgba(255,255,255,.18);
      cursor:pointer;
      text-align:left;
      font-size:15.5px;
      color:var(--text-primary);
      font-family:inherit;
      transition:background .2s ease,border-color .2s ease, transform .05s ease;
    }
    @media (prefers-color-scheme: dark){
      .opt{ background:rgba(18,25,45,.16); }
    }
    .opt:hover:not([disabled]){
      border-color:rgba(10,132,255,.28);
      background:rgba(10,132,255,.07);
    }
    .opt:active:not([disabled]){ transform: translateY(0.5px); }
    .opt[disabled]{opacity:.85;cursor:default}

    /* Feedback: only visual */
/* Feedback: only visual – stronger contrast */
.opt.is-correct{
  border-color: #16a34a; /* sattes Grün */
  box-shadow:
    0 0 0 3px rgba(22,163,74,.28) inset,
    0 0 0 1px rgba(22,163,74,.45);
}

.opt.is-wrong{
  border-color: #dc2626; /* sattes Rot */
  box-shadow:
    0 0 0 3px rgba(220,38,38,.28) inset,
    0 0 0 1px rgba(220,38,38,.45);
}
@media (prefers-color-scheme: dark){
  .opt.is-correct{
    border-color: #22c55e;
    box-shadow:
      0 0 0 3px rgba(34,197,94,.38) inset,
      0 0 0 1px rgba(34,197,94,.55);
  }

  .opt.is-wrong{
    border-color: #ef4444;
    box-shadow:
      0 0 0 3px rgba(239,68,68,.38) inset,
      0 0 0 1px rgba(239,68,68,.55);
  }
}

    .mini-feedback{
      margin-top:12px;
      display:none;
      justify-content:center;
    }
    .mini-feedback.show{ display:flex; }
    .signal{
      width:44px;height:44px;
      border-radius:999px;
      border:1px solid var(--border);
      display:flex;
      align-items:center;
      justify-content:center;
      background:rgba(255,255,255,.18);
      font-size:20px;
      box-shadow: var(--shadow);
    }
    @media (prefers-color-scheme: dark){
      .signal{ background:rgba(18,25,45,.16); }
    }
/* Signal dots – stronger visual feedback */
.signal.ok{
  border-color: #16a34a;
  box-shadow:
    0 0 0 2px rgba(22,163,74,.35),
    0 0 0 4px rgba(22,163,74,.22) inset;
}

.signal.bad{
  border-color: #dc2626;
  box-shadow:
    0 0 0 2px rgba(220,38,38,.35),
    0 0 0 4px rgba(220,38,38,.22) inset;
}
/* Signal dots – stronger visual feedback */
.signal.ok{
  border-color: #16a34a;
  box-shadow:
    0 0 0 2px rgba(22,163,74,.35),
    0 0 0 4px rgba(22,163,74,.22) inset;
}

.signal.bad{
  border-color: #dc2626;
  box-shadow:
    0 0 0 2px rgba(220,38,38,.35),
    0 0 0 4px rgba(220,38,38,.22) inset;
}


    .nav{
      display:flex;
      gap:10px;
      justify-content:center;
      margin-top:12px;
      flex-wrap:wrap;
    }
    .btn{
      border:1px solid var(--border);
      border-radius:999px;
      padding:10px 14px;
      min-height:44px;
      background:rgba(255,255,255,.18);
      color:var(--text-secondary);
      font-weight:950;
      cursor:pointer;
      font-family:inherit;
    }
    @media (prefers-color-scheme: dark){
      .btn{ background:rgba(18,25,45,.18); }
    }
    .btn.primary{
      color:var(--text-primary);
      background:rgba(10,132,255,.14);
      border-color:rgba(10,132,255,.28);
    }
    .btn:disabled{ opacity:.55; cursor: not-allowed; }

    /* CTA */
    .teacher-tip.refined{
      display:flex;
      gap:14px;
      align-items:stretch;
      padding:14px;
      border-radius:var(--radius);
      background:var(--bg-card);
      border:1px solid var(--border);
      box-shadow:var(--shadow);
      backdrop-filter:blur(12px) saturate(160%);
      -webkit-backdrop-filter:blur(12px) saturate(160%);
      margin-top:14px;
    }
  
    /* Footer */
    footer{
      text-align:center;
      margin-top:20px;
      color:var(--text-secondary);
      font-size:12.5px;
  padding-bottom: 18px; /* statt margin */
}

      
    
    footer a{
      color:var(--text-secondary);
      text-decoration:none;
      margin:0 10px;
      
    }
    footer a:hover{ text-decoration:underline; }

    /* Focus */
    :where(a,button):focus-visible{
      outline:3px solid rgba(10,132,255,.35);
      outline-offset:2px;
      border-radius:999px;
    }

    @media (prefers-reduced-motion: reduce){
      *{transition:none!important;animation:none!important}
      .opt:active:not([disabled]){transform:none}
    }

    /* Teacher Tip (clean card like screenshot) */
.teacher-tip-card{
  margin-top: 14px;
  padding: 18px;
  border-radius: var(--radius);
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  text-align: center;

  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
}

.teacher-tip-media{
  border-radius: 18px;
  padding: 14px;
  margin-bottom: 14px;
}

@media (prefers-color-scheme: dark){
  .teacher-tip-media{ background: rgba(18,25,45,.16); }
}

.teacher-tip-img{
  width: 100%;
  max-width: 360px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  margin: 0 auto;
}

.teacher-tip-title{
  font-size: 16px;
  font-weight: 950;
  color: #f59e0b; /* warmes Gelb wie im Screenshot */
  letter-spacing: .2px;
  margin-bottom: 8px;
}

@media (prefers-color-scheme: dark){
  .teacher-tip-title{ color: #fbbf24; }
}

.teacher-tip-text{
  font-size: 14.5px;
  color: var(--text-secondary);
  line-height: 1.65;
  max-width: 540px;
  margin: 0 auto 14px;
}

.teacher-tip-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 18px;

  text-decoration: none;
  font-weight: 950;
  letter-spacing: .2px;
  margin-bottom: 18px; /* mehr Luft nach unten */

  background: rgba(15,23,42,.90);
  color: #fff;
  border: 1px solid rgba(15,23,42,.40);
  box-shadow: 0 10px 22px rgba(15,23,42,.18);
}

@media (prefers-color-scheme: dark){
  .teacher-tip-btn{
    background: rgba(238,242,255,.10);
    border-color: rgba(238,242,255,.16);
    box-shadow: 0 12px 26px rgba(0,0,0,.45);
  }
}

.teacher-tip-btn:hover{
  filter: brightness(1.03);
}

.teacher-tip-btn:active{
  transform: translateY(0.5px);
}

@media (max-width: 520px){
  .teacher-tip-card{ padding: 16px; }
  .teacher-tip-media{ padding: 12px; }
  .teacher-tip-btn{ width: 100%; }
}