04_Tablet-Quiz/app/index.html

@@ -55,22 +55,10 @@
   .progress { height: 6px; background: var(--line); }
   .progress > div { height: 100%; background: var(--accent); transition: width .3s; }
 
-  .layout { display: grid; grid-template-columns: 1fr; gap: 0; min-height: calc(100% - 55px); }
+  .layout { display: grid; grid-template-columns: 300px 1fr; gap: 0; min-height: calc(100% - 55px); }
+  @media (max-width: 820px) { .layout { grid-template-columns: 1fr; } aside { display:none; } }
 
-  /* Stationsliste als aufklappbares Overlay (Header-Button ☰ Stationen) */
+  aside { border-right: 1px solid var(--line); background: var(--panel); padding: 14px; overflow:auto; }
-  aside {
-    position: fixed; top:0; left:0; bottom:0; width: 320px; max-width: 86vw;
-    background: var(--panel); border-right:1px solid var(--line); padding: 14px;
-    overflow:auto; z-index: 30;
-    transform: translateX(-100%); transition: transform .22s ease;
-    box-shadow: 0 0 40px rgba(20,30,50,.18);
-  }
-  body.navOpen aside { transform: translateX(0); }
-  .navBackdrop { position:fixed; inset:0; background:rgba(15,22,35,.42); z-index:29; opacity:0; pointer-events:none; transition:opacity .2s; }
-  body.navOpen .navBackdrop { opacity:1; pointer-events:auto; }
-  .navTop { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
-  .navTop b { font-size:13px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); }
-  .navTop button { border:none; background:none; font-size:20px; line-height:1; color:var(--muted); cursor:pointer; padding:4px 8px; }
   aside h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); margin: 16px 0 6px; }
   .stationItem {
     display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px;
@@ -153,7 +141,6 @@
   body:not(.runMode) aside { display:none; }
   body:not(.runMode) .layout { grid-template-columns: 1fr; }
   body:not(.runMode) .progress { display:none; }
-  body:not(.runMode) #stationsBtn { display:none; }
   .cardBadge { display:none; align-items:center; gap:8px; font-size:13px; }
   .cardBadge .cb-svc { font-weight:600; }
   .setupHead { font-size:12px; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); }
@@ -192,11 +179,6 @@
   .choiceGrid{display:flex;flex-direction:column;gap:8px;margin:10px 0}
   .choiceGrid.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
   @media(max-width:440px){.choiceGrid.grid2{grid-template-columns:1fr}}
-  /* Klassifizieren: links große Karte, rechts Frage + Antworten */
-  .classifyTop{display:grid;grid-template-columns:minmax(220px,320px) 1fr;gap:26px;align-items:start;margin:18px 0 6px}
-  .classifyCard{display:block;width:100%;border-radius:12px;box-shadow:0 3px 16px rgba(0,0,0,.16)}
-  .classifyMain{min-width:0}
-  @media(max-width:680px){.classifyTop{grid-template-columns:1fr}.classifyCard{max-width:300px;margin:0 auto}.classifyMain{margin-top:6px}}
   .choice{text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;font-size:15px;font-weight:600}
   .choice:hover{border-color:var(--ink)}
   .choice.bad{border-color:var(--bad);background:#fdf3f3}
@@ -219,12 +201,10 @@
   <span class="tag">v0.6</span>
   <div id="cardBadge" class="cardBadge"></div>
   <div class="spacer"></div>
-  <button class="ghost" id="stationsBtn" title="Stationsübersicht">☰&nbsp;Stationen</button>
   <button class="ghost" id="resetBtn" title="Neue Action Card / Durchlauf zurücksetzen">Neu starten</button>
 </header>
 <div class="progress"><div id="progressBar" style="width:0%"></div></div>
 
-<div class="navBackdrop" id="navBackdrop"></div>
 <div class="layout">
   <aside id="stationList"></aside>
   <main><div class="card" id="panel"></div></main>
@@ -891,7 +871,7 @@ function cardMedia(si, ci){ const f = cardImg(si, ci);
 function renderList(){
   const groups = {};
   STATIONEN.forEach((st,i)=>{ (groups[st.phase]=groups[st.phase]||[]).push({st,i}); });
-  let html = `<div class="navTop"><b>Stationen</b><button id="navClose" title="Schließen">✕</button></div>`;
+  let html = "";
   for(const ph in PHASEN){
     if(!groups[ph]) continue;
     html += `<h3>${PHASEN[ph].label}</h3>`;
@@ -907,9 +887,8 @@ function renderList(){
   }
   $("#stationList").innerHTML = html;
   $("#stationList").querySelectorAll(".stationItem").forEach(el=>{
-    el.onclick = ()=>{ document.body.classList.remove("navOpen"); enterStation(+el.dataset.i); save(); draw(); };
+    el.onclick = ()=>{ enterStation(+el.dataset.i); save(); draw(); };
   });
-  const nc = $("#navClose"); if(nc) nc.onclick = ()=> document.body.classList.remove("navOpen");
   const pct = Math.round(Object.keys(S.done).length / STATIONEN.length * 100);
   $("#progressBar").style.width = pct+"%";
 }
@@ -917,7 +896,6 @@ function renderList(){
 /* ====================== VIEW DISPATCH ====================== */
 function draw(){
   document.body.classList.toggle("runMode", S.view==="run");
-  if(S.view!=="run") document.body.classList.remove("navOpen");
   renderCardBadge();
   if(S.view==="deck")     return renderDeck();
   if(S.view==="classify") return renderClassify();
@@ -971,15 +949,11 @@ function renderClassify(){
       ? `<div class="hint bad">Nicht ganz — überlegt nochmal und probiert es erneut.</div>` : ``;
     $("#panel").innerHTML = `
       <div class="setupHead">Schritt 2 · Change-Art bestimmen</div>
-      <div class="classifyTop">
+      ${thumb}
-        <img class="classifyCard" src="cards/s${S.service}-c${S.change}.png" alt="${card.titel}">
+      <h2 class="setupTitle">Welche Art von Change ist das?</h2>
-        <div class="classifyMain">
+      <p class="muted">Überlegt gemeinsam und wählt die passende Change-Art. Die Legende hilft beim Einordnen.</p>
-          <h2 class="setupTitle" style="margin-top:0">Welche Art von Change ist das?</h2>
+      ${hint}
-          <p class="muted">Überlegt gemeinsam und wählt die passende Change-Art. Die Legende hilft beim Einordnen.</p>
+      <div class="choiceGrid grid2">${choices}</div>
-          ${hint}
-          <div class="choiceGrid grid2">${choices}</div>
-        </div>
-      </div>
       ${legend}
       <div class="actions"><button class="ghost" id="backDeck">← Andere Karte</button></div>`;
     $("#panel").querySelectorAll(".choice").forEach(el=>{
@@ -1230,8 +1204,6 @@ function renderEnd(){
 /* ====================== INIT ====================== */
 (function init(){
   $("#resetBtn").onclick = ()=>{ if(confirm("Neue Action Card ziehen und Durchlauf zurücksetzen?")){ S=defaultState(); save(); draw(); } };
-  $("#stationsBtn").onclick = ()=> document.body.classList.toggle("navOpen");
-  $("#navBackdrop").onclick = ()=> document.body.classList.remove("navOpen");
   draw();
 })();