/* ============================================================
   TRAINER.CSS — gemeinsames Aussehen aller Mathe-Trainer.
   Wird per <link rel="stylesheet" href="shared/trainer.css"> eingebunden,
   VOR dem eigenen <style>-Block des Trainers (der ergaenzt nur noch das
   Trainer-Eigene: eigenes Logo-Detail, eigene Farbe --mark, Dreieck-
   Zeichnung, Bruch-Darstellung usw.)

   Aenderung am Aussehen ALLER Trainer (Farbe, Abstand, Schriftgroesse):
   hier aendern, nicht in den einzelnen Trainer-Dateien.
   ============================================================ */

  :root{
    color-scheme: light;
    --serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', serif;
    --sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --paper:#EEF1F6;
    --card:#FFFFFF;
    --ink:#1B2A4A;
    --ink-soft:rgba(27,42,74,.62);
    --teal:#2F6F6E;
    --green:#2F8F4E;
    --amber:#C98A1F;
    --rust:#B0472E;
    --border:rgba(27,42,74,.14);
    --grid:rgba(27,42,74,.07);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:
      linear-gradient(var(--grid) 1px, transparent 1px) 0 0/28px 28px,
      linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0/28px 28px,
      var(--paper);
    color:var(--ink);
    font-family:var(--sans);
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
  }
  .page{max-width:480px;margin:0 auto;padding:20px 16px 48px;}
  .topbar{display:flex;align-items:center;gap:12px;margin-bottom:18px;}
  .back-link{display:inline-block;margin:0 0 12px;color:var(--ink-soft);font-size:.9rem;text-decoration:none;}
  .back-link:hover{color:var(--ink);text-decoration:underline;}
  .back-link:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:4px;}
  .logo{width:42px;height:42px;flex:none;}
  .logo .curve{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;}
  .logo .bar{stroke:var(--teal);stroke-width:2.4;stroke-linecap:round;}
  h1{font-family:var(--serif);font-weight:600;font-size:1.4rem;margin:0;line-height:1.15;}
  .tagline{margin:2px 0 0;font-size:.85rem;color:var(--ink-soft);}

  .levels{display:flex;gap:6px;margin-bottom:8px;}
  .level-btn{flex:1;padding:9px 0;border-radius:10px;border:1.5px solid var(--border);background:var(--card);color:var(--ink-soft);font-family:var(--serif);font-size:.98rem;font-weight:600;text-align:center;}
  .level-btn.active{border-color:var(--ink);color:var(--ink);background:#fff;box-shadow:0 2px 0 var(--ink);}
  /* Level nach Stufen gruppiert (Basis / Aufbau / Experte) */
  .levels.mit-stufen{gap:10px;align-items:flex-end;}
  .stufe-group{display:flex;flex-direction:column;gap:3px;flex-basis:0;min-width:0;}
  .stufe-name{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);border-bottom:1.5px solid var(--border);padding-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .stufe-group.active .stufe-name{color:var(--ink);font-weight:700;border-bottom-color:var(--ink);}
  .stufe-btns{display:flex;gap:6px;}
  .level-row + .level-kann{margin:-8px 0 16px;font-family:var(--serif);font-size:1.05rem;line-height:1.35;color:var(--ink);}
  .level-desc{margin:0 0 16px;font-size:.85rem;color:var(--ink-soft);}
  .level-desc strong{color:var(--ink);font-weight:600;}

  .dots-label{margin:0 0 6px;font-size:.72rem;color:var(--ink-soft);}
  .dots{display:flex;gap:7px;margin-bottom:6px;flex-wrap:wrap;min-height:13px;}
  .dot{width:13px;height:13px;border-radius:50%;border:1.5px solid var(--border);background:transparent;flex:none;}
  .dot.green{background:var(--green);border-color:var(--green);}
  .dot.yellow{background:var(--amber);border-color:var(--amber);}
  .dot.red{background:var(--rust);border-color:var(--rust);}
  .dots-empty{font-size:.78rem;color:var(--ink-soft);}

  .legend{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:18px;}
  .legend span{display:flex;align-items:center;gap:5px;font-size:.72rem;color:var(--ink-soft);}
  .legend i.dot{width:9px;height:9px;border:none;}

  .card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px 16px 20px;box-shadow:0 6px 18px rgba(27,42,74,.07);}
  .task-line{font-family:var(--serif);font-size:1.1rem;margin:0 0 16px;text-align:center;color:var(--ink);line-height:1.6;}

  .graph-wrap{display:flex;justify-content:center;margin:6px 0 14px;}
  .graph-svg{width:100%;max-width:280px;height:auto;display:block;}
  .gridline{stroke:var(--grid);stroke-width:1;}
  .axisline{stroke:var(--ink-soft);stroke-width:1.2;}
  .frame{fill:none;stroke:var(--border);stroke-width:1.2;}
  .axis-name{font-family:var(--serif);font-style:italic;font-size:11px;fill:var(--ink-soft);}
  .curve-line{fill:none;stroke:var(--teal);stroke-width:2.2;}
  .mark-pt{fill:var(--ink);cursor:pointer;}
  .mark-pt.selected{fill:var(--teal);}
  .mark-pt.correct{fill:var(--green);}
  .mark-pt.wrong{fill:var(--rust);}
  .mark-label{font-family:var(--serif);font-weight:600;font-size:11px;fill:var(--ink-soft);}
  .tangent-line{stroke-width:2;stroke-linecap:round;opacity:.85;}
  .tangent-1{stroke:var(--rust);}
  .tangent-2{stroke:var(--ink);}
  .tangent-3{stroke:var(--green);}

  .zero-choice{margin-bottom:14px;}
  .zero-choice-row{display:flex;gap:10px;align-items:flex-start;}
  .zero-choice-row .zero-choice{flex:1;margin-bottom:14px;min-width:0;}
  .zero-choice p{font-family:var(--serif);font-size:1rem;text-align:center;margin:0 0 8px;}
  .choice-col{display:flex;flex-direction:column;gap:8px;}
  .choice-btn{flex:1;padding:10px 6px;border-radius:10px;border:1.5px solid var(--border);background:#fff;font-family:var(--sans);font-size:.85rem;font-weight:600;color:var(--ink);cursor:pointer;}
  .choice-btn.selected{border-color:var(--teal);background:rgba(47,111,110,.12);color:var(--teal);}
  .choice-btn.correct{border-color:var(--green);background:rgba(47,143,78,.14);color:var(--green);}
  .choice-btn.wrong{border-color:var(--rust);background:rgba(176,71,46,.12);color:var(--rust);}
  .choice-btn[disabled]{cursor:default;}

  .answer-line{display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--serif);font-size:1.3rem;margin:10px 0 4px;flex-wrap:wrap;}
  .blank{font-family:var(--serif);font-size:1.3rem;color:var(--ink);padding:8px 10px;border-radius:10px;background:var(--paper);border:1.5px solid var(--border);width:6em;text-align:center;}
  .blank:focus{outline:2px solid var(--teal);outline-offset:1px;}

  .input-hint{text-align:center;font-size:.72rem;color:var(--ink-soft);margin:6px 0 6px;}
  .actions{display:flex;flex-direction:column;gap:8px;margin-top:12px;}
  button.btn{font-family:var(--sans);font-size:.92rem;font-weight:600;padding:11px 14px;border-radius:10px;border:1.5px solid transparent;cursor:pointer;}
  .btn-primary{background:var(--ink);color:#fff;}
  .btn-ghost{background:transparent;border-color:var(--border);color:var(--ink);}
  .btn-row{display:flex;gap:8px;}
  .btn-row .btn-ghost{flex:1;}
  button.btn:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}
  button.btn[disabled]{opacity:.45;cursor:default;}

  .feedback{min-height:1.3em;font-size:.9rem;margin:12px 0 4px;font-weight:600;text-align:center;}
  .feedback.ok{color:var(--green);}
  .feedback.bad{color:var(--rust);}
  .feedback.info{color:var(--ink-soft);font-weight:500;}

  .steps{margin-top:14px;padding-top:14px;border-top:1px dashed var(--border);}
  .steps ol{margin:0;padding-left:0;list-style:none;font-size:.88rem;}
  .steps li{margin-bottom:10px;}
  .steps .note{color:var(--teal);font-style:italic;}
  .solution-line{margin-top:14px;padding-top:14px;border-top:1px dashed var(--border);text-align:center;font-family:var(--serif);font-size:1.15rem;}

  @media (min-width:520px){ body{padding:24px 0;} }

  /* --- Level fixieren, goldene Ringe --- */
  :root{--gold:#D4A72C;}
  button.level-btn{cursor:pointer;-webkit-tap-highlight-color:transparent;}
  .dots{gap:10px;padding:3px;}
  .dot.fixed{box-shadow:0 0 0 1.5px var(--paper,#EEF1F6), 0 0 0 3.5px var(--gold);}
  .legend i.dot.fixed{margin:0 3px;}
  .level-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 16px;flex-wrap:wrap;}
  .level-row .level-desc{margin:0;}
  .lock-toggle{font-family:var(--sans,system-ui,sans-serif);font-size:.74rem;font-weight:600;padding:6px 10px;border-radius:999px;border:1.5px solid var(--border,rgba(27,42,74,.14));background:transparent;color:var(--ink-soft,rgba(27,42,74,.62));cursor:pointer;}
  .lock-toggle[aria-pressed="true"]{border-color:var(--teal,#2F6F6E);color:var(--teal,#2F6F6E);background:rgba(47,111,110,.10);}
  [hidden]{display:none !important;}