/* ---------- Chips (Slider-Row, mobil & Desktop) ---------- */
  .chips{
    display:flex; gap:8px; flex-wrap:nowrap;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    /*
      Bugfix Windows/Edge: die Leiste war mit der Maus nicht scrollbar.
      overflow-y MUSS explizit hidden sein. Mit "overflow-x:auto;
      overflow-y:visible" rechnet der Browser overflow-y zu "auto" — die
      Leiste meldete damit faelschlich, sie koenne auch vertikal
      scrollen, und das Mausrad ging an die Seite statt an die Leiste.
      Gemessen: 3x deltaY ueber der Leiste -> chips.scrollLeft blieb bei 2,
      window.scrollY stieg auf 141.

      "hidden" allein reicht aber NICHT: damit bleibt die Leiste in
      Chromium weiterhin stehen (nachgemessen, chipsBewegt:false). Die
      Umleitung des vertikalen Rads auf eine waagerechte Achse macht der
      Browser hier nicht. Deshalb uebernimmt der Wheel-Handler in
      app-active.js die Umleitung selbst.
    */
    overflow-y:hidden;
    scroll-snap-type:x proximity;
    scrollbar-width:none; -ms-overflow-style:none;
    padding:2px 2px 4px; margin-bottom:18px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%);
  }
  .chips::-webkit-scrollbar{display:none;}
  .chip{
    border:2px solid var(--line); background:var(--panel); color:var(--ink);
    border-radius:999px; padding:8px 15px; font-family:'Fredoka',sans-serif; font-weight:600;
    font-size:.85rem; cursor:pointer; transition:all .15s ease; user-select:none;
    flex:0 0 auto; scroll-snap-align:start; white-space:nowrap;
  }
  .chip-divider{
    flex:0 0 auto; align-self:center; color:var(--line);
    font-size:.9rem; user-select:none; pointer-events:none;
  }
    .chip:hover{border-color:var(--violet); transform:translateY(-1px);}
  .chip.active{background:var(--ink); border-color:var(--ink); color:#fff;}
  /* P4.3: Wissens-Ampel — subtiler Hintergrund-Verlauf im Ampelfarbton */
  .chip.ampel-rot{box-shadow:inset 0 0 0 1000px rgba(220,38,38,.08);}
  .chip.ampel-gelb{box-shadow:inset 0 0 0 1000px rgba(250,204,21,.08);}
  .chip.ampel-gruen{box-shadow:inset 0 0 0 1000px rgba(34,197,94,.08);}

    /* P4.2/P4.4: Kompakte Wochenziel-Balken — Headline + 3 Balken + Labels in einer Zeile */
  .weekly-row{ margin:12px 0; font-family:"Fredoka",sans-serif; display:flex; align-items:center; gap:8px; }
  .weekly-headline{ font-size:.8rem; font-weight:600; color:var(--muted); white-space:nowrap; flex-shrink:0; }
  .weekly-bars{ display:flex; gap:12px; align-items:center; flex:1; min-width:0; }
  .weekly-goal{ display:flex; align-items:center; gap:5px; flex:1; min-width:0; cursor:pointer; }
  .weekly-goal:hover .weekly-bar{ border-color:var(--violet); }
  .weekly-goal.active .weekly-bar{ box-shadow:0 0 0 2px var(--gold); }
  .weekly-bar{
    flex:1; min-width:24px; height:10px; border-radius:6px; background:var(--line);
    border:1px solid var(--line); overflow:hidden; display:block;
  }
  .weekly-bar-fill{
    display:block; height:100%; border-radius:6px; width:0%;
    background:linear-gradient(90deg, var(--gold), var(--triangle));
    transition:width .5s cubic-bezier(.4,1.4,.6,1);
  }
  .weekly-goal.fertig .weekly-bar-fill{ background:linear-gradient(90deg, #6FBF5A, #8FCF79); }
  .weekly-bar-label{ font-size:.68rem; font-weight:600; color:var(--muted); white-space:nowrap; }
  .weekly-goal.fertig .weekly-bar-label{ color:#3F8F3B; }
  .weekly-details{
    width:100%; margin-top:6px; padding:12px; background:#F7FAF5;
    border-radius:12px; font-size:.82rem; border:1px solid var(--line);
  }

  /* ---------- Main card ---------- */
  .board{
    background:var(--panel); border:1px solid var(--line); border-radius:22px;
    padding:22px; box-shadow:0 10px 0 var(--line), 0 12px 24px rgba(31,46,69,.08);
    display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start;
  }
  @media (max-width:680px){ .board{grid-template-columns:1fr; padding:16px;} }

  .figure-panel{
    background:var(--paper); border:1px dashed var(--line); border-radius:16px;
    padding:10px; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; min-height:220px;
    position:relative;
  }
  .figure-panel svg{width:100%; height:auto; max-height:260px; display:block;}
  .figure-badges{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    margin-bottom:6px; min-height:26px;
  }
  .topic-badge{
    position:static; font-family:'Fredoka',sans-serif; font-weight:600;
    font-size:.68rem; text-transform:uppercase; letter-spacing:.5px;
    padding:4px 10px; border-radius:999px; color:#fff;
    max-width:70%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }

  /* Curriculum Badge – kleines Notiz-Icon, hand-written-Style (in der Kopfzeile, nicht absolut) */
  .curriculum-badge{
    position:static;
    display:flex; align-items:center; gap:5px;
    background:#fff; border:1px solid var(--line);
    border-radius:8px; padding:4px 8px;
    font-family:'Fredoka',sans-serif; font-weight:600;
    font-size:.65rem; color:var(--muted);
    cursor:pointer; transition:all 0.15s ease;
    box-shadow:0 1px 3px rgba(0,0,0,0.08);
  }
  .curriculum-badge:hover{
    background:var(--paper); border-color:var(--muted);
    transform:translateY(-1px);
    box-shadow:0 2px 6px rgba(0,0,0,0.12);
  }
  .curriculum-icon{ font-size:.75rem; }
  .curriculum-text{ white-space:nowrap; }

  /* Curriculum Modal */
  .curriculum-modal{
    position:fixed; top:0; left:0; width:100%; height:100%;
    background:rgba(0,0,0,0.5); z-index:1000;
    display:flex; align-items:center; justify-content:center;
    padding:20px;
  }
  .curriculum-modal-content{
    background:#fff; border:1px solid var(--line);
    border-radius:16px; max-width:520px; width:100%;
    max-height:80vh; overflow-y:auto;
    padding:24px; position:relative;
    box-shadow:0 8px 32px rgba(0,0,0,0.15);
  }
  .curriculum-modal-close{
    position:absolute; top:12px; right:12px;
    background:none; border:none; font-size:1.5rem;
    cursor:pointer; color:var(--muted); line-height:1;
    width:32px; height:32px; border-radius:6px;
    display:flex; align-items:center; justify-content:center;
  }
  .curriculum-modal-close:hover{ background:var(--paper); color:var(--ink); }
  .curriculum-modal-title{
    font-family:'Fredoka',sans-serif; font-weight:600;
    font-size:1.2rem; margin:0 0 16px 0; color:var(--ink);
  }
  .curriculum-modal-body{ line-height:1.6; font-size:.9rem; }
  .curriculum-modal-body .curriculum-block{
    border:1px dashed var(--line); border-radius:8px;
    padding:12px; margin-bottom:12px; background:var(--paper);
  }
  .curriculum-modal-block .code{
    font-family:'JetBrains Mono',monospace; font-weight:700;
    font-size:.8rem; color:var(--viereck); margin-bottom:4px;
  }
  .curriculum-modal-block .desc{ color:var(--ink); }
  .curriculum-modal-block .kompetenz{
    font-size:.82rem; color:var(--muted); margin-top:4px;
    font-style:italic;
  }
  .curriculum-modal-block .grades{
    display:inline-block; margin-top:6px;
    font-family:'JetBrains Mono',monospace; font-weight:600;
    font-size:.75rem; color:var(--gold);
  }

  .question-panel{display:flex; flex-direction:column; gap:14px;}
  .question-eyebrow{
    font-family:'Fredoka',sans-serif; font-weight:600; font-size:.75rem; text-transform:uppercase;
    letter-spacing:.6px; color:var(--muted);
  }
  .question-text{font-size:1.08rem; font-weight:600; line-height:1.45; margin:0;}
  .hint-text{font-size:.82rem; color:var(--muted); margin:0;}

  .answer-row{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
  .answer-input{
    font-family:'JetBrains Mono',monospace; font-weight:700; font-size:1.2rem;
    border:2px solid var(--line); border-radius:12px; padding:10px 14px; width:120px;
    background:#fff; color:var(--ink);
  }
  .answer-input:focus{outline:none; border-color:var(--violet);}
  .unit-label{font-weight:700; color:var(--muted); font-family:'JetBrains Mono',monospace;}

  .choice-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
  @media (max-width:420px){ .choice-grid{grid-template-columns:1fr;} }
  .choice-btn{
    border:2px solid var(--line); background:#fff; border-radius:12px; padding:11px 12px;
    font-family:'Inter',sans-serif; font-weight:600; font-size:.92rem; text-align:left; cursor:pointer;
    transition:all .12s ease;
  }
  .choice-btn:hover{border-color:var(--violet); background:var(--violet-soft);}
  .choice-btn.correct{background:var(--success-soft); border-color:var(--success); color:var(--success);}
  .choice-btn.wrong{background:var(--error-soft); border-color:var(--error); color:var(--error);}
  .choice-btn:disabled{cursor:default;}

  .btn{
    font-family:'Fredoka',sans-serif; font-weight:600; font-size:.95rem; border:none; border-radius:12px;
    padding:11px 20px; cursor:pointer; color:#fff; background:var(--ink);
    box-shadow:0 3px 0 rgba(0,0,0,.25); transition:transform .1s ease;
  }
  .btn:hover{transform:translateY(-1px);}
  .btn:active{transform:translateY(1px); box-shadow:0 1px 0 rgba(0,0,0,.25);}
  .btn.primary{background:var(--violet);}
  .btn.next{background:var(--viereck); display:none;}
  .btn:disabled{opacity:.45; cursor:default; transform:none;}

  .feedback{
    border-radius:14px; padding:12px 14px; font-size:.9rem; font-weight:600; display:none;
    align-items:flex-start; gap:8px; line-height:1.4;
  }
  .feedback.show{display:flex;}
  .feedback.ok{background:var(--success-soft); color:var(--success);}
  .feedback.bad{background:var(--error-soft); color:var(--error);}
  .feedback .explain{display:block; font-weight:500; color:var(--ink); margin-top:4px;}

  /* ---------- Footer progress ---------- */
  .session-row{
    display:flex; justify-content:space-between; align-items:center; margin-top:16px;
    font-size:.78rem; color:var(--muted); font-weight:600; flex-wrap:wrap; gap:6px;
  }
  .badges{display:flex; gap:6px; flex-wrap:wrap;}
  .badge{
    font-family:'Fredoka',sans-serif; font-size:.7rem; font-weight:600; padding:4px 9px;
    border-radius:999px; background:var(--gold-soft); color:#8a5c0e; border:1px solid var(--gold);
  }

  .shape-outline{ fill-opacity:.9; }
  .measure-line{stroke:var(--muted); stroke-width:1.2; stroke-dasharray:3 3;}
  .dim-label{font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700; fill:#444444;}
  .angle-label{font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:700;}
  .tick{stroke:var(--ink); stroke-width:2;}
  .right-angle{fill:none; stroke:var(--ink); stroke-width:1.6;}

  /* Stufen-Wechsel-Vorschlag (P2.2) */
  .step-sug{margin-top:8px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; background:var(--gold-soft); border:1px solid var(--gold); border-radius:10px; padding:8px 10px; font-size:.82rem; font-weight:600; color:#8a5c0e;}
  .step-sug .mini{border:0; background:var(--gold); color:#fff; font-family:'Fredoka',sans-serif; font-weight:600; font-size:.78rem; padding:6px 12px; border-radius:8px; cursor:pointer;}
  .step-sug .mini:hover{filter:brightness(.95);}