/* ============================================================
   Musik-Baumeister · Komponisten-Galerie · gemeinsames Aussehen
   Galerie-Saal · So war die Welt damals · Mein Leben (Stationen) ·
   Meine Musik · Mach mit (Reiter) · Eddies Frage · Quellen
   Die Seiten legen nur ihre Kulissen-Farben (--saal, --saal-2) und
   ihre Hands-On-Station selbst fest.
   © Michael Fromm · musikbaumeister.de
   ============================================================ */
  :root{
    --sky:#8ec9ea; --sky-deep:#5ea8d6;
    --papier:#fffdf6; --papier-2:#f4ecdb; --tinte:#2b2620;
    --c-galerie:#6b3556; --c-galerie-hell:#8a4a72;
    --gold:#c9a516; --gold-hell:#f0cd5a; --messing:#b8923a;
    --saal:#2d2440; --saal-2:#3b2f55;
    --rot:#b3402f; --gruen:#1f6b33;
  }
  [hidden]{display:none !important;}
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }
  html,body{margin:0; padding:0;}
  body{font-family:'Nunito',sans-serif; color:var(--tinte);
    background:linear-gradient(180deg,var(--sky) 0%,var(--sky-deep) 100%); background-attachment:fixed;
    padding:12px 12px 110px;}
  .boden{position:fixed; left:0; right:0; bottom:0; height:60px; z-index:0; pointer-events:none;
    background:linear-gradient(180deg,#3f8f3a 0 16px,#2f6b2d 16px 24px,#6b4a2c 24px 100%);}
  main{position:relative; z-index:1; max-width:1040px; margin:0 auto;}
  .pixel{font-family:'Press Start 2P',monospace;}
  .kasten{background:var(--papier); border:4px solid var(--tinte); border-radius:6px;
    box-shadow:0 6px 0 rgba(43,38,32,.45); padding:18px; margin:0 0 20px;}
  .kasten-titel{font-family:'Press Start 2P',monospace; font-size:14px; line-height:1.7; color:var(--c-galerie);
    margin:0 0 14px; display:flex; align-items:center; gap:10px;}
  .kasten-titel svg{flex:0 0 auto;}
  .knopf{font-family:'Press Start 2P',monospace; font-size:11px; line-height:1.6; color:#fff; cursor:pointer;
    background:var(--c-galerie); border:3px solid var(--tinte); border-radius:6px; padding:11px 14px;
    box-shadow:0 4px 0 rgba(43,38,32,.45); touch-action:manipulation; text-decoration:none; display:inline-block;}
  .knopf:active{transform:translateY(3px); box-shadow:0 1px 0 rgba(43,38,32,.45);}
  .knopf.gold{background:var(--gold); color:var(--tinte);}
  .knopf.blau{background:#20475e;}
  .knopf:focus-visible,.station:focus-visible,.reiter:focus-visible,.geheimnis:focus-visible{outline:4px solid #fff; outline-offset:3px;}

  /* ---------- Kopfzeile ---------- */
  .kopfzeile{display:flex; align-items:center; gap:12px; margin:0 0 12px; flex-wrap:wrap;}
  .zurueck{font-family:'Press Start 2P',monospace; font-size:11px; color:#fff; text-decoration:none;
    background:rgba(32,71,94,.8); padding:10px 12px; border:3px solid var(--tinte); border-radius:6px;
    box-shadow:0 4px 0 rgba(43,38,32,.45);}
  .kopfzeile .pixel{font-size:10px; color:#fff; letter-spacing:1px; text-shadow:0 2px 0 rgba(43,38,32,.45);}

  /* ---------- 1) Galerie-Saal ---------- */
  .saal{position:relative; overflow:hidden; border:4px solid var(--tinte); border-radius:6px;
    box-shadow:0 6px 0 rgba(43,38,32,.45); margin:0 0 20px;
    background:linear-gradient(180deg,var(--saal) 0%,var(--saal-2) 72%,#5a3d28 72%,#4a3220 100%);}
  .saal-pfeifen,.saal-kulisse{position:absolute; inset:0 0 28% 0; width:100%; height:72%; opacity:.55; pointer-events:none;}
  .saal-inhalt{position:relative; display:grid; grid-template-columns:minmax(220px,340px) 1fr; gap:28px;
    align-items:center; padding:28px 28px 34px;}
  .bild{display:flex; flex-direction:column; align-items:center;}
  .lampe{width:120px; height:14px; background:var(--tinte); border-radius:3px 3px 0 0; position:relative; margin-bottom:6px;}
  .lampe::after{content:""; position:absolute; left:10px; right:10px; top:14px; height:40px;
    background:linear-gradient(180deg,rgba(255,236,160,.45),rgba(255,236,160,0)); pointer-events:none;}
  .rahmen{background:linear-gradient(135deg,#f0cd5a,#c9a516 40%,#8a6d0c); padding:12px; border:4px solid var(--tinte);
    border-radius:4px; box-shadow:0 8px 0 rgba(0,0,0,.35);}
  .rahmen-innen{border:4px solid #6d550a; background:#cfe3ee;}
  .rahmen svg{display:block; width:clamp(180px,26vw,280px); height:auto;}
  .schild{margin-top:14px; background:linear-gradient(180deg,#e2c170,#b8923a); border:3px solid var(--tinte);
    border-radius:4px; padding:8px 12px; text-align:center; box-shadow:0 4px 0 rgba(0,0,0,.3);}
  .schild .name{font-family:'Press Start 2P',monospace; font-size:11px; line-height:1.7;}
  .schild .daten{font-weight:900; font-size:14px; margin-top:4px;}
  .blase{position:relative; background:#fff; border:4px solid var(--tinte); border-radius:8px; padding:20px 22px;
    box-shadow:0 6px 0 rgba(0,0,0,.3); font-size:18px; font-weight:700; line-height:1.55;}
  .blase::before{content:""; position:absolute; left:-22px; top:48px; border:11px solid transparent;
    border-right-color:var(--tinte); border-right-width:18px;}
  .blase::after{content:""; position:absolute; left:-14px; top:51px; border:8px solid transparent;
    border-right-color:#fff; border-right-width:14px;}
  .blase .gruss{display:block; font-family:'Press Start 2P',monospace; font-size:14px; line-height:1.7;
    color:var(--c-galerie); margin-bottom:10px;}
  .sprung{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px;}
  .sprung a{font-family:'Press Start 2P',monospace; font-size:10px; line-height:1.5; color:var(--tinte); text-decoration:none;
    background:var(--gold-hell); border:3px solid var(--tinte); border-radius:6px; padding:8px 10px; box-shadow:0 3px 0 rgba(0,0,0,.35);}
  @media (max-width:760px){
    .saal-inhalt{grid-template-columns:1fr; padding:22px 16px 26px;}
    .blase::before{left:50%; top:-22px; transform:translateX(-50%); border-right-color:transparent; border-bottom-color:var(--tinte);
      border-width:11px; border-bottom-width:18px; border-right-width:11px;}
    .blase::after{left:50%; top:-14px; transform:translateX(-50%); border-right-color:transparent; border-bottom-color:#fff;
      border-width:8px; border-bottom-width:14px; border-right-width:8px;}
    .blase{font-size:16.5px;}
  }

  /* ---------- 2) So war die Welt damals ---------- */
  .welt{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
  .welt-karte{background:var(--papier-2); border:3px solid var(--tinte); border-radius:6px; padding:14px 12px;
    text-align:center; font-weight:800; font-size:15px; line-height:1.4; box-shadow:0 4px 0 rgba(43,38,32,.3);}
  .welt-karte svg{display:block; margin:0 auto 10px; width:56px; height:56px;}
  @media (max-width:760px){ .welt{grid-template-columns:repeat(2,1fr);} }

  /* ---------- 3) Mein Leben: Weg mit Stationen ---------- */
  .weg{position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:6px 0 18px;}
  .weg::before{content:""; position:absolute; left:10%; right:10%; top:44px; height:10px;
    background:repeating-linear-gradient(90deg,#c9b48a 0 18px,transparent 18px 26px); border-radius:4px;}
  .station{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:8px;
    background:none; border:0; cursor:pointer; font-family:'Nunito',sans-serif; color:var(--tinte); padding:4px;}
  .station .stein{width:88px; height:88px; background:var(--papier-2); border:4px solid var(--tinte); border-radius:10px;
    display:flex; align-items:center; justify-content:center; box-shadow:0 5px 0 rgba(43,38,32,.35); position:relative;}
  .station .stein svg{width:56px; height:56px;}
  .station .nr{position:absolute; top:-12px; left:-12px; width:30px; height:30px; background:var(--c-galerie); color:#fff;
    border:3px solid var(--tinte); border-radius:50%; font-family:'Press Start 2P',monospace; font-size:11px;
    display:flex; align-items:center; justify-content:center;}
  .station .haken{position:absolute; bottom:-10px; right:-10px; width:28px; height:28px; background:var(--gruen); color:#fff;
    border:3px solid var(--tinte); border-radius:50%; font-weight:900; display:none; align-items:center; justify-content:center;}
  .station.besucht .haken{display:flex;}
  .station .titel{font-weight:900; font-size:14.5px; text-align:center; line-height:1.3;}
  .station[aria-pressed="true"] .stein{background:var(--gold-hell); transform:translateY(-4px); box-shadow:0 9px 0 rgba(43,38,32,.35);}
  .erzaehlung{display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start;
    background:#fff; border:4px solid var(--tinte); border-radius:8px; padding:18px 20px;}
  .erzaehlung .mini{width:96px;}
  .erzaehlung h3{font-family:'Press Start 2P',monospace; font-size:13px; line-height:1.7; color:var(--c-galerie); margin:0 0 10px;}
  .erzaehlung p{font-size:17px; font-weight:700; line-height:1.6; margin:0 0 10px;}
  .erzaehlung .weiter{margin-top:6px;}
  .fortschritt{font-weight:900; font-size:14px; margin-top:10px; opacity:.8;}
  .geheimnisse{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:4px 0 10px;}
  .geheimnis{min-height:150px; border:4px solid var(--tinte); border-radius:8px; cursor:pointer; padding:14px;
    background:repeating-linear-gradient(45deg,#6b3556 0 12px,#7a4062 12px 24px); color:#fff; font-family:'Nunito',sans-serif;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; box-shadow:0 5px 0 rgba(43,38,32,.35);}
  .geheimnis .schloss{font-family:'Press Start 2P',monospace; font-size:12px; line-height:1.7; text-align:center;}
  .geheimnis.offen{display:block; background:var(--papier-2); color:var(--tinte); cursor:default; font-size:16px; font-weight:700; line-height:1.5;
    text-align:left;}
  @media (max-width:760px){
    .weg{grid-template-columns:repeat(2,1fr); row-gap:18px;} .weg::before{display:none;}
    .erzaehlung{grid-template-columns:1fr;} .erzaehlung .mini{width:72px;}
    .geheimnisse{grid-template-columns:1fr;}
  }

  /* ---------- 4) Meine Musik ---------- */
  .musik{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
  .werk{display:flex; flex-direction:column; gap:10px; background:#fff; border:4px solid var(--tinte); border-radius:8px;
    padding:16px; box-shadow:0 5px 0 rgba(43,38,32,.3);}
  .werk .instrument{height:96px; display:flex; align-items:flex-end; justify-content:center;
    background:var(--papier-2); border:3px solid var(--tinte); border-radius:6px; padding:8px;}
  .werk .instrument svg{height:80px; width:auto;}
  .werk h3{font-family:'Press Start 2P',monospace; font-size:12px; line-height:1.7; margin:0; color:var(--c-galerie);}
  .werk .wer{font-weight:900; font-size:13px; opacity:.75; margin-top:-6px;}
  .werk p{margin:0; font-size:15.5px; font-weight:700; line-height:1.5; flex:1;}
  .spiegel{display:flex; align-items:flex-end; gap:4px; height:36px; padding:0 2px;}
  .spiegel i{flex:1; background:#e2d8c2; height:6px; border-radius:2px 2px 0 0; transition:height .08s, background .08s;}
  .werk.spielt .spiegel i{background:var(--gold);}
  .hinweis{font-size:13.5px; font-weight:700; opacity:.75; margin:14px 0 0;}
  .quelle{font-size:12px; font-weight:700; line-height:1.4; opacity:.7; margin:0;}
  .quelle a{color:inherit;}
  .echt{display:inline-block; font-family:'Press Start 2P',monospace; font-size:8px; line-height:1.6; color:#fff;
    background:var(--gruen); border:2px solid var(--tinte); border-radius:4px; padding:3px 5px; margin-left:6px; vertical-align:2px;}
  @media (max-width:860px){ .musik{grid-template-columns:1fr;} .werk{flex-direction:column;} }

  /* ---------- 5) Mach mit: Reiter ---------- */
  .reiterleiste{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 -4px; position:relative; z-index:2;}
  .reiter{font-family:'Press Start 2P',monospace; font-size:11px; line-height:1.6; cursor:pointer; color:var(--tinte);
    background:var(--papier-2); border:4px solid var(--tinte); border-bottom:0; border-radius:8px 8px 0 0; padding:12px 14px;}
  .reiter[aria-selected="true"]{background:var(--papier); color:var(--c-galerie); padding-bottom:16px; margin-bottom:-4px;}
  .reiter-inhalt{border-top-left-radius:0;}
  .reiter-einleitung{font-size:16.5px; font-weight:700; line-height:1.55; margin:0 0 14px;}

  /* ---------- Gemeinsame Bedienelemente der Hands-On-Stationen ---------- */
  .modi{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px;}
  .modus{font-family:'Press Start 2P',monospace; font-size:10px; line-height:1.6; cursor:pointer; color:var(--tinte);
    background:var(--papier-2); border:3px solid var(--tinte); border-radius:6px; padding:8px 10px;}
  .modus[aria-pressed="true"]{background:var(--c-galerie); color:#fff;}
  .modus small{display:block; font-family:'Nunito',sans-serif; font-size:11.5px; font-weight:800; opacity:.85;}
  .stueckwahl{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 8px;}
  .stueckwahl .modus{font-size:9px;}
  .zaehl{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px;}
  .zaehl div{flex:1 1 150px; background:#fff; border:3px solid var(--tinte); border-radius:6px; padding:8px 10px; text-align:center;
    font-weight:900; font-size:14px;}
  .zaehl b{display:block; font-family:'Press Start 2P',monospace; font-size:18px; line-height:1.6;}
  .quellen{font-size:14px; font-weight:700; line-height:1.55;}
  .quellen li{margin-bottom:6px;}
  .quellen a{color:var(--c-galerie);}
  /* ---------- 6) Eddie ---------- */
  .eddie{display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start;}
  .antworten{display:grid; gap:10px; margin-top:12px;}
  .antworten .knopf{text-align:left; font-family:'Nunito',sans-serif; font-weight:800; font-size:16px; background:#20475e;}
  .antworten .knopf.richtig{background:var(--gruen);} .antworten .knopf.falsch{background:var(--rot);}
  #echo{margin-top:12px; background:#fff; border:3px solid var(--tinte); border-radius:6px; padding:12px 14px;
    font-size:16px; font-weight:700; line-height:1.5;}
  .fuss{position:relative; z-index:2; text-align:center; color:#fff; font-size:12.5px; font-weight:800;
    text-shadow:0 2px 0 rgba(43,38,32,.45); margin-top:18px;}
  .fuss a{color:inherit;}
  .entwurf{position:fixed; right:10px; bottom:70px; z-index:5; font-family:'Press Start 2P',monospace; font-size:9px;
    background:#b3402f; color:#fff; border:3px solid var(--tinte); border-radius:6px; padding:6px 8px;}

  /* ---------- Lernweg (nur mit lernweg:true): Folie, kleiner Test, Stopp ---------- */
  .zu{position:relative; min-height:220px;}
  .zu > :not(.folie){opacity:.3; filter:blur(1.5px) grayscale(.4); pointer-events:none; user-select:none;}
  .auf > *{transition:opacity .6s, filter .6s;}
  .folie{position:absolute; inset:0; z-index:5; border-radius:6px; background:rgba(255,253,246,.35);
    display:flex; align-items:flex-start; justify-content:center; padding:70px 16px 16px; transition:opacity .6s;}
  .folie.weg{opacity:0;}
  .folie-schild{position:sticky; top:40px; max-width:480px; text-align:center; background:#fff; border:4px solid var(--tinte);
    border-radius:8px; box-shadow:0 6px 0 rgba(43,38,32,.4); padding:14px 18px; font-size:18px; font-weight:800; line-height:1.5;}
  .folie-schild small{font-size:14px; opacity:.75;}
  .station.gesperrt{opacity:.45; cursor:not-allowed;}
  .station.gesperrt .stein::after{content:"🔒"; position:absolute; bottom:-10px; right:-10px; font-size:20px;}
  .test{margin-top:16px; background:#fff8dc; border:4px dashed var(--gold); border-radius:8px; padding:14px 16px;}
  .test-kopf{font-family:'Press Start 2P',monospace; font-size:11px; line-height:1.6; color:var(--c-galerie); margin-bottom:6px;}
  .test-auftrag{font-size:15px !important; font-weight:800; margin:0 0 8px !important; opacity:.8;}
  .erzaehlung .test-satz{font-size:20px; font-weight:800; line-height:2.1; margin:0 0 12px;}
  .luecke{display:inline-block; min-width:110px; min-height:1.4em; vertical-align:bottom; text-align:center; padding:0 8px;
    border-bottom:4px solid var(--tinte); background:#fff; border-radius:4px 4px 0 0; line-height:1.4;}
  .luecke:not(.voll){animation:lueckeBlink 1.4s infinite;}
  @keyframes lueckeBlink{0%,100%{background:#fff}50%{background:#fbe9a6}}
  .luecke.voll{background:#c9ecb0; color:var(--gruen);}
  .test-woerter{display:flex; flex-wrap:wrap; gap:10px;}
  .wort{font-family:'Nunito',sans-serif; font-weight:900; font-size:18px; color:var(--tinte); cursor:pointer; touch-action:manipulation;
    background:#fff; border:3px solid var(--tinte); border-radius:999px; padding:8px 16px; box-shadow:0 4px 0 rgba(43,38,32,.35);}
  .wort:active{transform:translateY(3px); box-shadow:0 1px 0 rgba(43,38,32,.35);}
  .wort.benutzt{visibility:hidden;}
  .wort:disabled{cursor:default;}
  .wort.falsch{background:#f6c3b8; animation:wortWackel .4s;}
  @keyframes wortWackel{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
  .test-melde{min-height:24px; font-size:16px; font-weight:800; margin-top:8px;}
  .test-weiter .weiter{margin-top:14px;}
  .weg-weiter{margin-top:14px;}
  .reiter-stopp{margin-left:auto; align-self:center; font-family:'Press Start 2P',monospace; font-size:11px; line-height:1.6; cursor:pointer;
    color:#fff; background:var(--rot); border:3px solid var(--tinte); border-radius:6px; padding:9px 12px; margin-bottom:8px;
    box-shadow:0 4px 0 rgba(43,38,32,.45); touch-action:manipulation;}
  .reiter-stopp:active{transform:translateY(3px); box-shadow:0 1px 0 rgba(43,38,32,.45);}
  @media (prefers-reduced-motion:reduce){ .luecke:not(.voll){animation:none; background:#fbe9a6;} .wort.falsch{animation:none;} }

  /* Wort-Erklärungen */
  .begriff{color:var(--c-galerie); border-bottom:3px dotted var(--c-galerie); cursor:help; border-radius:2px;
    touch-action:manipulation; -webkit-tap-highlight-color:transparent;}
  .begriff:hover,.begriff[aria-expanded="true"]{background:var(--gold-hell);}
  .begriff:focus-visible{outline:3px solid var(--c-galerie); outline-offset:2px;}
  .begriff-fenster{position:absolute; z-index:50; background:#fff; color:var(--tinte); border:4px solid var(--tinte); border-radius:8px;
    box-shadow:0 5px 0 rgba(43,38,32,.35); padding:12px 38px 12px 14px; font-family:'Nunito',sans-serif; font-size:16px;
    font-weight:700; line-height:1.45; text-align:left;}
  .begriff-fenster b{display:block; font-family:'Press Start 2P',monospace; font-size:10px; line-height:1.6; color:var(--c-galerie); margin-bottom:4px;}
  .begriff-fenster::before{content:""; position:absolute; top:-14px; left:calc(var(--pfeil,50%) - 10px);
    border:10px solid transparent; border-bottom-color:var(--tinte); border-top:0; border-bottom-width:12px;}
  .begriff-fenster.drueber::before{top:auto; bottom:-14px; border-bottom:0; border-top:12px solid var(--tinte);}
  .begriff-zu{position:absolute; top:6px; right:6px; width:28px; height:28px; border:0; background:none; font-size:18px;
    font-weight:900; cursor:pointer; color:var(--tinte); line-height:1;}