Design: Antique Hogwarts parchment letter with light marbling, realistic shading, sketched seal, and handwriting font

app/templates/base.html

@@ -5,7 +5,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
     <title>{% block title %}Magisches Harry-Potter-Escape-Quiz{% endblock %}</title>
     <link rel="icon" href="/static/favicon.ico">
-    <link rel="stylesheet" href="/static/css/style.css?v=2.3">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=Marck+Script&family=MedievalSharp&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/static/css/style.css?v=2.4">
     {% block head %}{% endblock %}
 </head>
 <body>

app/templates/index.html

@@ -10,20 +10,61 @@
     </header>
 
     <!-- Brief-Intro / Startmaske -->
-    <div id="introCard" class="card intro-card">
-        <div class="intro-envelope" id="envelope">
-            <div class="envelope-body">
-                <div class="envelope-flap"></div>
-                <div class="wax-seal">H</div>
-                <div class="letter-preview">
-                    <p class="letter-text" id="envelopeLetter">Hogwarts-Schule für Hexerei und Zauberei</p>
+    <div id="introCard" class="card intro-card intro-parchment-wrapper">
+        <!-- Antiker Hogwarts-Brief -->
+        <div class="hogwarts-parchment-letter" id="envelope">
+            <!-- Marmorierte Pergament-Textur & Lichteffekte -->
+            <div class="parchment-texture-layer"></div>
+            <div class="parchment-vignette"></div>
+            <div class="parchment-sketch-border"></div>
+
+            <!-- Handgezeichnetes Wachssiegel -->
+            <div class="sketched-wax-seal" id="waxSeal" onclick="startGame()" title="Siegel brechen & Prüfung beginnen">
+                <img src="/static/img/hogwarts_seal.jpg" alt="Hogwarts-Wappen Siegel" class="seal-crest-img">
+                <div class="seal-emboss-ring"></div>
+                <div class="seal-glow"></div>
+            </div>
+
+            <!-- Briefinhalt -->
+            <div class="letter-inner">
+                <header class="letter-header">
+                    <div class="letter-crest-box">
+                        <img src="/static/img/hogwarts_seal.jpg" alt="Hogwarts Crest" class="letter-crest-sketch">
+                    </div>
+                    <h2 class="letter-school-name" id="letterSchoolTitle">Hogwarts-Schule für Hexerei und Zauberei</h2>
+                    <p class="letter-headmaster" id="letterHeadmaster">Schulleiter: Albus Dumbledore<br><span>(Großhexenmeister, Träger des Merlin-Ordens Erster Klasse)</span></p>
+                    <div class="letter-ornament-line">
+                        <span class="ornament-leaf">❦</span>
+                        <span class="ornament-rule"></span>
+                        <span class="ornament-shield">✦</span>
+                        <span class="ornament-rule"></span>
+                        <span class="ornament-leaf">❧</span>
+                    </div>
+                </header>
+
+                <div class="letter-body-handwritten">
+                    <p class="letter-salutation" id="letterSalutation">Liebe Hexe, lieber Zauberer,</p>
+                    <p class="letter-paragraph" id="letterParagraph1">
+                        wir freuen uns, dir mitteilen zu dürfen, dass du zu den <strong>Magischen Z.A.G.-Prüfungen</strong> des Zaubereiministeriums zugelassen bist.
+                    </p>
+                    <p class="letter-paragraph" id="letterParagraph2">
+                        Zehn anspruchsvolle Prüfungsfragen entscheiden über deinen Rang in den Chroniken von Hogwarts. Zeige deinen Scharfsinn und sichere bis zu <strong>1.000 Hauspunkte</strong> für dein Haus!
+                    </p>
                 </div>
+
+                <footer class="letter-signature-block">
+                    <p class="letter-closing" id="letterClosing">Mit vorzüglicher Hochachtung,</p>
+                    <p class="letter-signature-ink" id="letterSignature">Minerva McGonagall</p>
+                    <p class="letter-sign-title" id="letterSignTitle">Stellvertretende Schulleiterin</p>
+                </footer>
             </div>
         </div>
-        <div class="intro-content">
-            <p class="intro-text" id="introDesc">
-                Ein verzauberter Brief aus Hogwarts schwebt vor dir in der Luft.<br>
-                Bist du bereit, die Prüfungen abzulegen und deine Hauspunkte zu sichern?
+
+        <!-- Auswahlbereich unter dem Pergament -->
+        <div class="intro-content intro-controls-panel">
+            <p class="intro-subnote" id="introDesc">
+                Ein verzauberter Pergamentbrief aus Hogwarts liegt vor dir.<br>
+                Wähle deinen Schwierigkeitsgrad und brich das rote Zaubersiegel:
             </p>
 
             <!-- Difficulty Selector Chips -->
@@ -45,7 +86,7 @@
                 </div>
             </div>
 
-            <button id="startBtn" class="btn btn-primary btn-large" onclick="startGame()">
+            <button id="startBtn" class="btn btn-primary btn-large btn-break-seal" onclick="startGame()">
                 📜 Siegel brechen & Brief öffnen
             </button>
         </div>
@@ -113,5 +154,5 @@
 {% endblock %}
 
 {% block scripts %}
-<script src="/static/js/quiz.js?v=2.3"></script>
+<script src="/static/js/quiz.js?v=2.4"></script>
 {% endblock %}