:root{
    --sky-top:#a5d8f0;
    --sky-mid:#8ecbe8;
    --sky-low:#79bfe0;
    --grass:#5c9c3d;
    --grass-dark:#3f732a;
    --dirt:#6e4626;
    --paper:#fffdf6;
    --ink:#2b2620;
    --deep:#1d5e7a;
    --akzent:#1f7a8c;       /* Ukulelen-Blaugruen wie auf der Startseite */
    --akzent-dark:#145563;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    font-family:'Nunito',system-ui,sans-serif;
    color:var(--ink);
    background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 55%,var(--sky-low) 100%);
    min-height:100vh;
    display:flex;flex-direction:column;align-items:center;
    padding:26px 14px 0;
    position:relative;
    overflow-x:hidden;
  }
  /* Pixelwolken und Sonne */
  .cloud{position:absolute;background:#ffffff;opacity:.85;z-index:0;
    box-shadow:22px 0 0 #fff,44px 0 0 #fff,66px 0 0 #fff,22px -14px 0 #fff,44px -14px 0 #fff;
    width:22px;height:14px}
  .cloud.c1{top:70px;left:6%}
  .cloud.c2{top:150px;right:8%;transform:scale(1.4)}
  .cloud.c3{top:420px;left:78%;opacity:.6}
  .sun{position:absolute;top:40px;right:18%;width:36px;height:36px;background:#ffd97a;z-index:0;
    box-shadow:0 0 0 7px rgba(255,217,122,.35)}
  .ground{position:fixed;left:0;right:0;bottom:0;height:34px;z-index:0;
    background:linear-gradient(180deg,var(--grass) 0 12px,var(--dirt) 12px)}
  .ground::before{content:"";position:absolute;top:12px;left:0;right:0;height:5px;
    background-image:repeating-linear-gradient(90deg,var(--grass-dark) 0 8px,transparent 8px 16px)}

  .app{position:relative;z-index:1;width:100%;max-width:1180px;padding-bottom:80px}

  .topbar{
    display:flex;align-items:center;justify-content:center;
    gap:16px;position:relative;margin-bottom:22px;flex-wrap:wrap;
  }
  h1{
    font-family:'Press Start 2P',monospace;
    font-size:clamp(15px,3.4vw,26px);
    text-align:center;color:#fff;
    text-shadow:0 4px 0 rgba(29,94,122,.55);
    letter-spacing:1px;
  }
  .zurueck{
    font-weight:800;font-size:14px;color:#fff;text-decoration:none;
    padding:8px 14px;border-radius:6px;
    border:3px solid var(--ink);
    background:var(--akzent);
    box-shadow:0 4px 0 var(--akzent-dark);
    display:inline-flex;align-items:center;gap:8px;
  }
  .zurueck:hover{filter:brightness(1.08)}
  .zurueck:active{transform:translateY(2px);box-shadow:0 2px 0 var(--akzent-dark)}
  .zurueck:focus-visible{outline:4px solid #fff;outline-offset:3px}

  /* ---------- Zwei Spalten ---------- */
  /* ---------- Uebungs-Layout ----------
     Hochkant: alles untereinander (Seite scrollt normal).
     Quer (Tablet/Desktop): links Player, Stimmenwahl und Instrumente,
     rechts bleiben die Noten beim Ueben im Blick (eigenes Scrollfenster). */
  .uebung{display:grid;grid-template-columns:1fr;gap:22px;align-items:start}
  .spalte-links{display:flex;flex-direction:column;gap:18px;min-width:0}
  .spalte-rechts{min-width:0}
  @media (orientation:landscape) and (min-width:700px){
    .uebung{grid-template-columns:minmax(310px,5fr) 7fr}
    .spalte-rechts{position:sticky;top:12px}
    .spalte-rechts .notenfenster{max-height:calc(100vh - 130px)}
  }
  /* Ist eine Uebespur gewaehlt, wandert Start/Stop im Querformat unter die
     Animation, damit Noten, Animation und Bedienung beieinander sind */
  @media (orientation:landscape) and (min-width:700px){
    body.stimme-gewaehlt .spalte-links #transportPanel{order:99}
  }
  .versteckt{display:none !important}

  /* Stimmen-Auswahl */
  .stimmen{display:flex;flex-wrap:wrap;gap:8px}
  .stimme-chip{
    font-family:'Press Start 2P',monospace;font-size:9px;padding:9px 12px;
    cursor:pointer;color:var(--deep);background:#fffdf6;
    border:3px solid var(--ink);border-radius:18px;
  }
  .stimme-chip.aktiv{background:#e8971d;color:#fffdf6;border-color:#8a5200}
  .stimmen-hinweis{margin-top:10px;font-size:14px;font-weight:700;color:#5a5142}

  .panel{
    background:var(--paper);
    border:3px solid var(--ink);
    border-radius:8px;
    box-shadow:0 6px 0 rgba(29,94,122,.4);
    overflow:hidden;
  }
  .panel + .panel{margin-top:22px}
  .panel-titel{
    font-family:'Press Start 2P',monospace;
    font-size:11px;line-height:1.5;color:#fff;
    background:var(--akzent);
    border-bottom:3px solid var(--ink);
    padding:10px 14px;
    display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  }
  .panel-inhalt{padding:14px}


  /* ---------- MIDI-Player ---------- */
  .player-zeile{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .player-zeile + .player-zeile{margin-top:12px}
  .playknopf{
    font-family:'Press Start 2P',monospace;
    font-size:13px;color:#fff;cursor:pointer;
    width:44px;height:44px;border-radius:6px;
    border:3px solid var(--ink);
    background:var(--grass);
    box-shadow:0 4px 0 var(--grass-dark);
    display:inline-flex;align-items:center;justify-content:center;
    user-select:none;flex:0 0 auto;
  }
  .playknopf:hover{filter:brightness(1.08)}
  .playknopf:active{transform:translateY(2px);box-shadow:0 2px 0 var(--grass-dark)}
  .playknopf:focus-visible{outline:4px solid var(--deep);outline-offset:2px}
  .playknopf[disabled]{opacity:.45;cursor:default}
  .playknopf.stop{background:#b0533a;box-shadow:0 4px 0 #7d3a29}
  .playknopf.stop:active{box-shadow:0 2px 0 #7d3a29}

  .fortschritt{
    flex:1;min-width:120px;height:18px;
    border:3px solid var(--ink);border-radius:5px;
    background:#e8e2d4;overflow:hidden;
  }
  .fortschritt-balken{
    height:100%;width:0%;
    background:repeating-linear-gradient(90deg,var(--akzent) 0 10px,#2b8ba0 10px 20px);
  }
  .zeitanzeige{font-weight:800;font-size:13px;min-width:86px;text-align:right;font-variant-numeric:tabular-nums}

  .reglerlabel{font-weight:800;font-size:14px;min-width:122px;display:inline-flex;gap:6px;align-items:center}
  .reglerlabel svg{width:20px;height:20px;flex:0 0 auto;display:block}
  input[type=range].regler{
    flex:1;min-width:110px;height:28px;cursor:pointer;
    accent-color:var(--akzent);
  }
  input[type=range].regler.tempo{accent-color:var(--grass)}
  .player-optionen{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px;
    font-weight:800;font-size:14px;color:#5a5142}
  .player-optionen label{display:flex;align-items:center;gap:7px;cursor:pointer}
  .player-optionen input{width:17px;height:17px;accent-color:#1f6b33;cursor:pointer}
  .player-optionen .opt-detail{font-weight:700;color:#8a8172}
  .reglerwert{font-weight:800;font-size:14px;min-width:52px;text-align:right;font-variant-numeric:tabular-nums}
  .player-meldung{font-size:13px;font-weight:700;color:#8a5a3a;margin-top:10px;display:none}

  /* ---------- Instrumenten-Kaestchen ---------- */
  .instrument{padding:14px}
  .griff-titel{
    font-family:'Press Start 2P',monospace;font-size:11px;
    color:var(--deep);text-align:center;margin-bottom:10px;
  }

  /* ---------- Noten (SVG, zoombar) ---------- */
  .zoomleiste{display:flex;align-items:center;gap:8px}
  .zoomknopf{
    font-family:'Press Start 2P',monospace;
    font-size:12px;color:#fff;cursor:pointer;
    width:34px;height:34px;border-radius:6px;
    border:3px solid var(--ink);
    background:var(--grass);
    box-shadow:0 3px 0 var(--grass-dark);
    display:inline-flex;align-items:center;justify-content:center;
    user-select:none;
  }
  .zoomknopf:hover{filter:brightness(1.08)}
  .zoomknopf:active{transform:translateY(2px);box-shadow:0 1px 0 var(--grass-dark)}
  .zoomknopf:focus-visible{outline:4px solid #fff;outline-offset:2px}
  .zoomwert{
    font-family:'Nunito',sans-serif;font-weight:800;font-size:13px;color:#fff;
    min-width:52px;text-align:center;
  }
  .notenfenster{
    overflow:auto;
    max-height:min(78vh,900px);
    background:#fff;
    border:3px solid var(--ink);border-radius:6px;
  }
  .notenfenster img{display:block;margin:0 auto;height:auto}
  /* Mehrere Seiten untereinander, wie in einem Notenheft */
  #notenSeiten img{background:#fff;margin:0 auto 16px;
                   box-shadow:0 3px 10px rgba(0,0,0,.18)}
  #notenSeiten img:last-child{margin-bottom:0}
  #notenSeiten svg{background:#fff;display:block;margin:0 auto 16px;
    max-width:100%;height:auto}
  #notenSeiten svg:last-child{margin-bottom:0}
  #notenSeiten{position:relative}
  /* Markierung: ein farbiges Feld HINTER der gespielten Stelle. Nicht als
     Schein um die Ziffer - auf schwarzen Tabulaturzahlen vor weissem Grund
     sieht man davon so gut wie nichts. */
  .notenmarke{position:absolute;pointer-events:none;border-radius:4px;
    background:rgba(244,196,48,.55);box-shadow:0 0 0 3px #f4c430;
    transition:left .12s ease-out,top .12s ease-out,width .12s,height .12s;
    opacity:0}
  .notenmarke.an{opacity:1}
  @media (prefers-reduced-motion:reduce){ .notenmarke{transition:none} }

  @media(prefers-reduced-motion:reduce){
    .zurueck:active,.zoomknopf:active,.playknopf:active{transform:none}
    /* kein Zoomen; der Griffpunkt wird nur hell */
    @keyframes griffBlitz{0%,100%{transform:none}}
  }

  /* ---------- Griffbretter ----------
     Hochkant stehen sie unter dem Player, im Querformat wandern sie in
     die linke Spalte direkt neben die Noten - wie die Instrumente der
     uebrigen Arrangements. Bei "Alle" liegen die Bretter nebeneinander,
     sobald eine Stimme gewaehlt ist, fuellt ihr Brett die Spalte. */
  .griffband{min-width:0}
  .griffband-innen{display:grid;gap:14px;
                   grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
  .griffband .panel + .panel{margin-top:0}
  .griffbrett svg{display:block;width:100%;height:auto}
  /* Ein Griff leuchtet nur, wenn er gerade klingt - sonst steht er blass
     als Uebersicht da ("das sind meine Griffe in diesem Lied"). */
  .griff{opacity:.28;transform-box:fill-box;transform-origin:center;
         transition:opacity .1s ease}
  .griff.aktiv{opacity:1;animation:griffBlitz .3s ease-out}
  @keyframes griffBlitz{
    0%  {transform:scale(1.45)}
    60% {transform:scale(1.08)}
    100%{transform:scale(1)}
  }
  .griff-leer{font-size:14px;font-weight:700;color:#8a5a3a;text-align:center;padding:14px}