Verbessere Einstieg und TechTacular-Fragen

src/main/resources/static/css/auth.css

@@ -6,6 +6,12 @@
 @property --mf-ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
 
 .auth-stage { width:100%; display:flex; flex-direction:column; align-items:center; gap:1.4rem; }
+.auth-intro { width:100%; max-width:840px; padding:1.25rem 1.4rem; border:1px solid var(--border); border-radius:16px; background:var(--surface); box-shadow:var(--g-soft); }
+.auth-intro h1 { color:var(--heading); font-size:clamp(1.35rem,3vw,1.85rem); line-height:1.18; margin:.35rem 0 .6rem; }
+.auth-intro p { color:var(--muted); line-height:1.6; max-width:72ch; }
+.auth-intro ul { display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem 1rem; list-style:none; margin-top:.9rem; padding:0; }
+.auth-intro li { color:var(--muted); font-size:.82rem; line-height:1.45; }
+.auth-intro li b { color:var(--accent); }
 
 /* ---- Dual-Panel-Container (Bild 2) ---- */
 .auth-container {
@@ -149,6 +155,8 @@
 
 /* ---- Responsiv: gestapelt, ohne Overlay ---- */
 @media (max-width:760px) {
+    .auth-intro { padding:1rem; }
+    .auth-intro ul { grid-template-columns:1fr; gap:.45rem; }
     .auth-container { max-width:420px; min-height:auto; }
     .overlay-container { display:none; }
     .form-box {

src/main/resources/static/css/techtacular.css

@@ -216,6 +216,9 @@ body.tt-body {
 }
 .tt-q-cat { color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85rem; }
 .tt-q-points { color: var(--accent); font-weight: 800; font-size: 1.3rem; }
+.tt-q-close { margin-left:.35rem; width:32px; height:32px; border:1px solid var(--border); border-radius:8px; background:transparent; color:var(--muted); font:400 1.5rem/1 inherit; cursor:pointer; }
+.tt-q-close:hover { color:var(--accent); border-color:var(--border-accent); background:var(--surface-2); }
+.tt-q-close:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
 
 .tt-q-instruction { color: var(--muted); font-size: 0.85rem; font-weight: 700; margin-bottom: 0.35rem; }
 .tt-q-text {

src/main/resources/static/js/techtacular.js

@@ -21,6 +21,7 @@
   const qAnswers  = document.getElementById('tt-q-answers');
   const qFeedback = document.getElementById('tt-q-feedback');
   const qNext     = document.getElementById('tt-q-next');
+  const qClose    = document.getElementById('tt-q-close');
   const jokerBtn  = document.getElementById('tt-fifty-fifty');
   const jokerNote = document.getElementById('tt-joker-note');
 
@@ -212,6 +213,12 @@
     }
   }
 
+  function dismissQuestion() {
+    if (!current || current.answered) return;
+    current = null;
+    qOverlay.hidden = true;
+  }
+
   async function finishGame() {
     if (!running) return;
     running = false;
@@ -301,7 +308,16 @@
   finishBtn.addEventListener('click', finishGame);
   cancelBtn.addEventListener('click', cancelGame);
   qNext.addEventListener('click', closeQuestion);
+  qClose.addEventListener('click', dismissQuestion);
   jokerBtn.addEventListener('click', useFiftyFifty);
+  qOverlay.addEventListener('click', (event) => {
+    if (event.target === qOverlay) dismissQuestion();
+  });
+  document.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape' && !qOverlay.hidden) {
+      dismissQuestion();
+    }
+  });
 
   loadStats();
   newGame();

src/main/resources/templates/dashboard.html

@@ -46,6 +46,11 @@
     .challenge .bolt { color:var(--accent); flex:0 0 auto; filter:drop-shadow(0 0 6px var(--glow-s)); }
     .challenge h5 { color:var(--accent); font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; margin-bottom:.3rem; }
     .challenge p { color:var(--muted); font-size:.78rem; line-height:1.45; }
+    .platform-intro { margin-bottom:1.1rem; }
+    .platform-intro h2 { color:var(--heading); font-size:1.15rem; margin:.25rem 0 .45rem; }
+    .platform-intro p { color:var(--muted); line-height:1.55; font-size:.88rem; }
+    .platform-intro ul { display:flex; flex-wrap:wrap; gap:.45rem .75rem; list-style:none; margin-top:.8rem; padding:0; }
+    .platform-intro li { color:var(--text); font-size:.76rem; padding:.32rem .55rem; border:1px solid var(--border); border-radius:99px; background:var(--surface-2); }
   </style>
 </head>
 <body>
@@ -79,7 +84,19 @@
   </header>
 
   <!-- ===== Spielkarten ===== -->
-  <main class="mf-main"><div class="mf-grid" id="grid"></div></main>
+  <main class="mf-main">
+    <section class="mf-panel platform-intro" aria-labelledby="platform-intro-title">
+      <div class="mf-eyebrow">Dein Lernbereich</div>
+      <h2 id="platform-intro-title">Was du mit SysnaptiK Neural machst</h2>
+      <p>Du bereitest dich praxisnah auf AP1 und AP2 der Fachinformatiker-Ausbildung vor: Wissen kurz einordnen, in Lernspielen anwenden und deinen Fortschritt gezielt weiterentwickeln.</p>
+      <ul aria-label="Lernangebote">
+        <li>Interaktive IT-Szenarien</li>
+        <li>Prüfungsthemen &amp; Übungen</li>
+        <li>Gespeicherter Lernfortschritt</li>
+      </ul>
+    </section>
+    <div class="mf-grid" id="grid"></div>
+  </main>
 
   <!-- ===== Rechte Spalte ===== -->
   <aside class="mf-rightbar">

src/main/resources/templates/index.html

@@ -15,6 +15,17 @@
 <div class="mf-center">
   <div class="auth-stage">
 
+    <section class="auth-intro" aria-labelledby="auth-intro-title">
+      <p class="mf-eyebrow">IT-Ausbildung · AP1 &amp; AP2</p>
+      <h1 id="auth-intro-title">Lerne Fachinformatik praktisch statt nur zu lesen.</h1>
+      <p>SysnaptiK Neural ist eine kostenlose Lernplattform für angehende Fachinformatiker:innen. Sie verbindet kurze Erklärungen mit interaktiven Spielen, Prüfungstraining und sichtbarem Lernfortschritt.</p>
+      <ul>
+        <li><b>Trainieren:</b> Netzwerke, Programmierung, Security und IT-Service anwenden.</li>
+        <li><b>Verstehen:</b> FinalProtocol bündelt AP1- und AP2-Themen mit Übungen.</li>
+        <li><b>Dranbleiben:</b> Ein Account speichert Fortschritt, Bestwerte und Lernziele.</li>
+      </ul>
+    </section>
+
     <div class="auth-container" id="authContainer">
 
       <!-- ===== Sign In ===== -->

src/main/resources/templates/techtacular.html

@@ -47,6 +47,7 @@
       <div class="tt-q-head">
         <span id="tt-q-cat" class="tt-q-cat">Kategorie</span>
         <span id="tt-q-points" class="tt-q-points">100</span>
+        <button type="button" id="tt-q-close" class="tt-q-close" aria-label="Frage ohne Antwort schließen" title="Frage ohne Antwort schließen">×</button>
       </div>
       <p class="tt-q-instruction">Antwort – finde die passende Frage:</p>
       <h2 id="tt-q-text" class="tt-q-text"></h2>
@@ -76,7 +77,7 @@
     </div>
   </div>
 
-  <script src="/js/techtacular.js?v=4" defer></script>
+  <script src="/js/techtacular.js?v=5" defer></script>
   <footer th:replace="~{fragments/layout :: footer}"></footer>
 </body>
 </html>