diff --git a/app/static/css/style.css b/app/static/css/style.css
index b8581c5..580ffd7 100755
--- a/app/static/css/style.css
+++ b/app/static/css/style.css
@@ -243,38 +243,13 @@ body {
     margin: 0 auto;
 }
 
-/* =========================================
-   CODEPEN ENVELOPE WITH HOGWARTS AESTHETICS
-   - 4-Flap Envelope Back Geometry
-   - Realistic Parchment Textures
-   - Wax Seal in the Exact Center (Mitte)
-   - Small Handwriting Return Address (Top-Left)
-   - Clean Inner Letter Sheet
-   ========================================= */
-
-/* =========================================
-   AUTHENTIC VINTAGE HOGWARTS CLOSED ENVELOPE
-   - Clean Antique Paper Colors (NO muddy image textures)
-   - Sharp, Clear Flap Outlines & Fold Lines
-   - Return Address Top-Left
-   - Distinct V-Flap Closure with Wax Seal at Apex
-   - Majestic Rise-Out Letter Reveal
-   ========================================= */
-
 .antique-envelope-scene {
     position: relative;
-    width: min(480px, 94vw);
-    height: min(280px, 60vw);
+    width: min(440px, 92vw);
+    height: min(260px, 58vw);
     margin: 25px auto 35px;
     perspective: 1200px;
     perspective-origin: center top;
-    transition: margin-top 0.8s cubic-bezier(0.25, 1, 0.5, 1);
-}
-
-.antique-envelope-scene.envelope-opened,
-.antique-envelope-scene:has(.envelope-opened) {
-    margin-top: 155px;
-    margin-bottom: 25px;
 }
 
 .envelope-base {
@@ -282,204 +257,150 @@ body {
     width: 100%;
     height: 100%;
     border-radius: 6px;
-    border: 2px solid #7c5830;
     box-shadow: 
         0 20px 45px rgba(0, 0, 0, 0.75),
         0 4px 14px rgba(0, 0, 0, 0.5);
-    background-color: #ebdcb9;
+    transition: transform 0.6s ease;
 }
 
-/* Interior Back Wall of the Envelope */
+/* Interior of envelope (visible when flap opens and letter rises) */
 .envelope-interior {
     position: absolute;
     inset: 0;
-    border-radius: 4px;
-    background: linear-gradient(180deg, #2b1d12 0%, #3a2618 60%, #4a3220 100%);
-    border: 2px solid #5a3c1e;
+    border-radius: 6px;
+    background-color: #2b1d12;
+    background-image: 
+        radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.65) 100%);
+    border: 2px solid #7a5c36;
     z-index: 1;
 }
 
-/* The Letter Sheet (Slides Up Out of the Envelope) */
+/* The Letter inside the envelope (slides up when opened) */
 .letter-sheet {
     position: absolute;
-    top: 10px;
+    bottom: 8px;
     left: 4%;
     width: 92%;
-    height: 380px;
-    max-height: 65vh;
-    background: linear-gradient(145deg, #fffdf8 0%, #f7efe0 50%, #ecdcb8 100%);
-    border-radius: 5px;
-    border: 1.5px solid #8e6c43;
-    outline: 1px dashed rgba(130, 95, 55, 0.4);
-    outline-offset: -5px;
-    padding: 16px 20px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
-    z-index: 3;
-    /* Closed state: tucked completely inside, hidden */
-    visibility: hidden;
-    opacity: 0;
-    transform: translateY(40px) scale(0.92);
-    pointer-events: none;
-    transition: transform 0.85s cubic-bezier(0.2, 0.85, 0.25, 1) 0.3s, 
-                opacity 0.5s ease 0.3s, 
-                visibility 0.5s ease 0.3s,
-                box-shadow 0.8s ease;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-}
-
-.envelope-opened .letter-sheet {
-    visibility: visible;
-    opacity: 1;
-    pointer-events: auto;
-    transform: translateY(-145px) scale(1.02);
-    z-index: 12;
-    box-shadow: 
-        0 24px 60px rgba(0, 0, 0, 0.85),
-        0 0 35px rgba(201, 168, 106, 0.4);
-}
-
-.letter-crest-small {
-    width: 48px;
-    height: 48px;
-    border-radius: 50%;
-    border: 2px solid #7c5830;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
-    margin-bottom: 8px;
-    object-fit: cover;
-}
-
-.letter-title {
-    font-family: 'Cinzel', serif;
-    font-size: clamp(0.95rem, 2.8vw, 1.2rem);
-    color: #2b1704;
-    letter-spacing: 1px;
-    font-weight: 700;
-    margin-bottom: 3px;
-    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
-}
-
-.letter-subtitle {
-    font-family: 'MedievalSharp', serif;
-    font-size: clamp(0.75rem, 2vw, 0.9rem);
-    color: #5a3d1e;
-    font-style: italic;
-    margin-bottom: 14px;
-}
-
-.btn-launch-express {
-    background: linear-gradient(135deg, #a62b2b 0%, #6e1010 100%);
-    color: #ffd700;
-    border: 1.5px solid #ffd700;
-    border-radius: 25px;
-    padding: 9px 18px;
-    font-family: 'Cinzel', serif;
-    font-size: clamp(0.78rem, 2.2vw, 0.92rem);
-    font-weight: 700;
-    cursor: pointer;
-    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 10px rgba(255, 215, 0, 0.3);
-    transition: all 0.3s ease;
-    text-decoration: none;
-    display: inline-block;
-}
-
-.btn-launch-express:hover {
-    transform: scale(1.04);
-    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), 0 0 18px rgba(255, 215, 0, 0.6);
-    color: #ffffff;
-}
-
-/* Solid Envelope Back Body with Subtle Paper Gradient */
-.envelope-back-body {
-    position: absolute;
-    inset: 0;
+    height: 92%;
+    background-color: #fcf8ee;
+    background-image: 
+        radial-gradient(ellipse at 50% 25%, rgba(255, 255, 255, 0.6) 0%, rgba(210, 180, 130, 0.25) 100%);
+    background-position: center;
     border-radius: 4px;
-    background: linear-gradient(135deg, #f4ecd5 0%, #ebdcb9 50%, #dfc99b 100%);
-    border: 2px solid #7c5830;
-    z-index: 4;
+    border: 1.5px solid #8e6c43;
+    padding: 16px 18px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
+    z-index: 2;
+    transition: transform 1.1s cubic-bezier(0.2, 0.8, 0.25, 1) 0.35s, box-shadow 0.8s ease, z-index 0.2s 0.35s;
     overflow: hidden;
-    box-shadow: inset 0 0 15px rgba(120, 85, 40, 0.15);
+    text-align: center;
+    outline: 1px dashed rgba(130, 95, 55, 0.45);
+    outline-offset: -5px;
 }
 
-.envelope-body-folds {
+/* Front Pocket of envelope (covers the lower portion of the letter) */
+.envelope-front-pocket {
     position: absolute;
     inset: 0;
-    width: 100%;
-    height: 100%;
+    border-radius: 6px;
+    background-color: #ebdcb9;
+    background-image: 
+        radial-gradient(ellipse at 50% 65%, rgba(255, 255, 255, 0.35) 0%, rgba(160, 120, 60, 0.2) 100%);
+    clip-path: polygon(0 32%, 50% 54%, 100% 32%, 100% 100%, 0 100%);
+    z-index: 4;
+    border: 2px solid #8e6c43;
+    filter: drop-shadow(0 -3px 6px rgba(60, 40, 15, 0.3));
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    padding-bottom: 20px;
     pointer-events: none;
 }
 
-/* Small Handwriting Return Address in Top-Left ("Abs.: Hogwarts...") */
-.env-sender-line {
+.envelope-sketch-border {
     position: absolute;
-    top: 12px;
-    left: 14px;
-    font-family: 'Caveat', 'Marck Script', cursive;
-    font-size: clamp(0.78rem, 2.2vw, 0.92rem);
-    color: #0d3820; /* Authentic Hogwarts Emerald Ink */
-    font-weight: 600;
-    z-index: 8;
+    bottom: 8px;
+    left: 8px;
+    right: 8px;
+    height: 48%;
+    border: 1px dashed rgba(120, 85, 45, 0.4);
+    border-radius: 3px;
     pointer-events: none;
-    letter-spacing: 0.2px;
-    text-shadow: 0 0 1px rgba(13, 56, 32, 0.25);
-    transition: opacity 0.4s ease;
-    white-space: nowrap;
 }
 
-.envelope-opened .env-sender-line {
-    opacity: 0;
+/* Handwritten Address in Emerald Ink on Envelope Front */
+.envelope-address-block {
+    position: relative;
+    z-index: 5;
+    text-align: center;
+    font-family: 'Marck Script', 'Caveat', cursive;
+    color: #0d3820; /* Authentic Hogwarts Emerald Ink */
+    padding: 0 15px;
+    text-shadow: 0 0 1px rgba(13, 56, 32, 0.35);
 }
 
-/* Top Triangular V-Flap (Folds Down to Apex at 55%) */
+.addr-school {
+    font-size: clamp(0.92rem, 3.2vw, 1.15rem);
+    font-weight: 700;
+    color: #082816;
+    margin-bottom: 2px;
+}
+
+.addr-recipient {
+    font-size: clamp(1.15rem, 3.8vw, 1.4rem);
+    font-weight: 700;
+    color: #0b3a20;
+    margin-bottom: 2px;
+}
+
+.addr-location {
+    font-size: clamp(0.85rem, 2.8vw, 1.02rem);
+    font-style: italic;
+    color: #1e4530;
+}
+
+/* Top Triangular Flap (folds down over the pocket) */
 .envelope-closing-flap {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    clip-path: polygon(0 0, 100% 0, 50% 55%);
-    background: linear-gradient(180deg, #faeedb 0%, #ecdcb9 70%, #dfc99b 100%);
+    background-color: #dfcd9f;
+    background-image: 
+        radial-gradient(ellipse at 50% 25%, rgba(255, 255, 255, 0.4) 0%, rgba(150, 110, 55, 0.25) 100%);
+    clip-path: polygon(0 0, 100% 0, 50% 57%);
     transform-origin: top center;
     transform-style: preserve-3d;
-    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), z-index 0s 0.35s;
-    z-index: 10;
-    border-top: 2px solid #7c5830;
-    filter: drop-shadow(0 6px 12px rgba(35, 18, 5, 0.55));
+    transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1);
+    z-index: 6;
+    border-top: 2px solid #8e6c43;
+    filter: drop-shadow(0 5px 8px rgba(50, 35, 10, 0.5));
 }
 
-.envelope-opened .envelope-closing-flap {
-    transform: rotateX(180deg);
-    z-index: 2;
-    filter: drop-shadow(0 -4px 6px rgba(50, 35, 10, 0.4));
-}
-
-.v-flap-outline {
+.flap-sketch-line {
     position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 55%;
+    inset: 4px;
+    clip-path: polygon(2% 2%, 98% 2%, 50% 54%);
+    border-top: 1px dashed rgba(120, 85, 45, 0.4);
     pointer-events: none;
 }
 
-/* Hand-Sketched Hogwarts Wax Seal in the Exact Mitte (Center 50% 55%) */
+/* Sketched Wax Seal placed right over the flap tip */
 .sketched-wax-seal {
     position: absolute;
-    top: 55%;
+    top: 56%;
     left: 50%;
     transform: translate(-50%, -50%) rotate(-3deg);
     width: 72px;
     height: 72px;
     border-radius: 50%;
     cursor: pointer;
-    z-index: 20;
+    z-index: 7;
     transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, opacity 0.4s ease;
     box-shadow: 
-        0 8px 22px rgba(0, 0, 0, 0.75),
-        0 2px 6px rgba(0, 0, 0, 0.45);
+        0 8px 20px rgba(0, 0, 0, 0.7),
+        0 2px 5px rgba(0, 0, 0, 0.45);
 }
 
 .sketched-wax-seal:hover {
@@ -495,8 +416,8 @@ body {
     border-radius: 50%;
     object-fit: cover;
     display: block;
-    border: 2.5px solid #4a0d0d;
-    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.7);
+    border: 3px solid #4a0d0d;
+    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.7);
 }
 
 .seal-emboss-ring {
@@ -522,10 +443,23 @@ body {
     opacity: 1;
 }
 
-/* Seal Break Golden Animation */
+/* Open state: Flap opens, seal dissolves, letter slides out */
 .envelope-opened .sketched-wax-seal {
     animation: breakSealAnim 0.7s forwards;
-    pointer-events: none;
+}
+
+.envelope-opened .envelope-closing-flap {
+    transform: rotateX(180deg);
+    z-index: 1;
+    filter: drop-shadow(0 -4px 6px rgba(50, 35, 10, 0.4));
+}
+
+.envelope-opened .letter-sheet {
+    transform: translateY(-135px) scale(1.06);
+    z-index: 10;
+    box-shadow: 
+        0 20px 48px rgba(0, 0, 0, 0.85),
+        0 0 25px rgba(201, 168, 106, 0.35);
 }
 
 @keyframes breakSealAnim {
@@ -534,6 +468,134 @@ body {
     100% { transform: translate(-50%, -50%) rotate(25deg) scale(0.3); opacity: 0; filter: drop-shadow(0 0 40px #ffd700); }
 }
 
+/* Letter Content Styles */
+.letter-header {
+    margin-bottom: 8px;
+}
+
+.letter-crest-box {
+    width: 48px;
+    height: 48px;
+    margin: 0 auto 4px;
+    border-radius: 50%;
+    overflow: hidden;
+    box-shadow: 0 2px 6px rgba(90, 60, 20, 0.25);
+    border: 1px solid rgba(139, 105, 60, 0.3);
+}
+
+.letter-crest-sketch {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    filter: sepia(0.65) contrast(1.15) brightness(0.92);
+}
+
+.letter-school-name {
+    font-family: 'MedievalSharp', Georgia, serif;
+    font-size: clamp(0.95rem, 2.8vw, 1.25rem);
+    color: #2c1a0c;
+    text-transform: uppercase;
+    letter-spacing: 1.2px;
+    font-weight: 700;
+    margin-bottom: 2px;
+    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
+}
+
+.letter-headmaster {
+    font-family: 'Caveat', 'Georgia', cursive;
+    font-size: 0.95rem;
+    color: #4a331c;
+    font-style: italic;
+    line-height: 1.25;
+    margin-bottom: 6px;
+}
+
+.letter-headmaster span {
+    font-size: 0.82rem;
+    color: #6a4c28;
+}
+
+.letter-ornament-line {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    color: #8c6838;
+    margin: 4px auto 8px;
+    max-width: 260px;
+}
+
+.ornament-rule {
+    flex: 1;
+    height: 1px;
+    background: linear-gradient(to right, transparent, #8c6838, transparent);
+}
+
+.ornament-leaf, .ornament-shield {
+    font-size: 0.85rem;
+}
+
+/* Handwritten Body in Emerald Ink */
+.letter-body-handwritten {
+    font-family: 'Marck Script', 'Caveat', cursive;
+    color: #0f3d24; /* Authentic Hogwarts Emerald Ink */
+    text-align: left;
+    padding: 0 4px;
+    line-height: 1.5;
+    text-shadow: 0 0 1px rgba(15, 61, 36, 0.25);
+}
+
+.letter-salutation {
+    font-size: clamp(1.15rem, 3.5vw, 1.4rem);
+    font-weight: 700;
+    margin-bottom: 6px;
+    color: #0a301c;
+}
+
+.letter-paragraph {
+    font-size: clamp(1.02rem, 3.0vw, 1.2rem);
+    margin-bottom: 8px;
+    text-indent: 1.2em;
+}
+
+.letter-paragraph strong {
+    color: #052414;
+    font-weight: 700;
+}
+
+/* Signature Block */
+.letter-signature-block {
+    margin-top: 10px;
+    text-align: right;
+    padding-right: 8px;
+    font-family: 'Marck Script', 'Caveat', cursive;
+    color: #0f3d24;
+}
+
+.letter-closing {
+    font-size: 1.1rem;
+    font-style: italic;
+    color: #2b4533;
+    margin-bottom: 2px;
+}
+
+.letter-signature-ink {
+    font-size: clamp(1.4rem, 4.2vw, 1.8rem);
+    font-weight: 700;
+    color: #082816;
+    letter-spacing: 0.5px;
+    transform: rotate(-2deg);
+    display: inline-block;
+    margin-bottom: 1px;
+    text-shadow: 0 0 1px rgba(8, 40, 22, 0.35);
+}
+
+.letter-sign-title {
+    font-size: 0.88rem;
+    color: #4a6352;
+    font-style: italic;
+}
+
 /* Controls Below Parchment */
 .intro-controls-panel {
     margin-top: 20px;
@@ -545,30 +607,6 @@ body {
     color: var(--text-muted);
     line-height: 1.5;
     margin-bottom: 14px;
-    transition: all 0.3s ease;
-}
-
-.intro-action-container {
-    margin-top: 14px;
-    display: flex;
-    justify-content: center;
-}
-
-.letter-actions {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 12px;
-    width: 100%;
-}
-
-.fade-in-action {
-    animation: fadeInActionAnim 0.5s ease forwards;
-}
-
-@keyframes fadeInActionAnim {
-    0% { opacity: 0; transform: translateY(12px); }
-    100% { opacity: 1; transform: translateY(0); }
 }
 
 .btn-break-seal {
@@ -583,95 +621,22 @@ body {
     box-shadow: 0 10px 28px rgba(201, 168, 106, 0.6);
 }
 
-.btn-launch-quiz {
-    font-size: clamp(1.05rem, 3.4vw, 1.22rem);
-    padding: 14px 28px;
-    font-weight: 700;
-    letter-spacing: 0.5px;
-    border-radius: 10px;
-    cursor: pointer;
-    background: linear-gradient(135deg, #e6c564 0%, #c9a86a 50%, #8c6838 100%);
-    color: #1a0f05;
-    border: 1px solid #ffd700;
-    box-shadow: 0 6px 25px rgba(201, 168, 106, 0.5), 0 0 15px rgba(255, 215, 0, 0.35);
-    transition: all 0.3s ease;
-}
-
-.btn-launch-quiz:hover {
-    transform: translateY(-2px) scale(1.02);
-    box-shadow: 0 10px 32px rgba(201, 168, 106, 0.75), 0 0 25px rgba(255, 215, 0, 0.6);
-}
-
-.glow-pulse {
-    animation: glowPulseAnim 2.6s infinite alternate ease-in-out;
-}
-
-@keyframes glowPulseAnim {
-    0% { box-shadow: 0 6px 20px rgba(201, 168, 106, 0.45); }
-    100% { box-shadow: 0 10px 32px rgba(201, 168, 106, 0.8), 0 0 25px rgba(255, 215, 0, 0.6); }
-}
-
-.btn-close-letter {
-    font-size: 0.92rem;
-    color: var(--text-muted);
-    background: transparent;
-    border: 1px solid rgba(201, 168, 106, 0.25);
-    padding: 8px 18px;
-    border-radius: 6px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-}
-
-.btn-close-letter:hover {
-    color: var(--gold-bright);
-    border-color: var(--gold);
-    background: rgba(201, 168, 106, 0.1);
-}
-
 @media (max-width: 480px) {
     .antique-envelope-scene {
-        width: min(360px, 94vw);
-        height: min(210px, 58vw);
+        width: min(320px, 92vw);
+        height: min(205px, 58vw);
         margin: 15px auto 25px;
     }
-    .antique-envelope-scene.envelope-opened,
-    .antique-envelope-scene:has(.envelope-opened) {
-        margin-top: 115px;
-        margin-bottom: 20px;
+    .sketched-wax-seal {
+        width: 60px;
+        height: 60px;
+        top: 56%;
     }
     .envelope-opened .letter-sheet {
-        transform: translateY(-110px) scale(1.02);
-        height: 310px;
-        padding: 12px 14px;
+        transform: translateY(-100px) scale(1.04);
     }
-    .sketched-wax-seal {
-        width: 56px;
-        height: 56px;
-    }
-    .env-sender-line {
-        font-size: 0.72rem;
-        left: 10px;
-        top: 8px;
-    }
-    .letter-crest-small {
-        width: 38px;
-        height: 38px;
-        margin-bottom: 5px;
-    }
-    .letter-title {
-        font-size: 0.94rem;
-    }
-    .letter-subtitle {
-        font-size: 0.74rem;
-        margin-bottom: 10px;
-    }
-    .btn-launch-express {
-        padding: 7px 13px;
-        font-size: 0.75rem;
-    }
-    .btn-launch-quiz {
-        padding: 12px 18px;
-        font-size: 0.95rem;
+    .envelope-front-pocket {
+        padding-bottom: 14px;
     }
 }
 
diff --git a/app/static/js/quiz.js b/app/static/js/quiz.js
index 19b663a..0c68e8d 100755
--- a/app/static/js/quiz.js
+++ b/app/static/js/quiz.js
@@ -14,22 +14,25 @@ const UI_TEXT = {
     de: {
         pageTitle: "✨ Magisches Hogwarts-Escape-Quiz ✨",
         pageSubtitle: "10 knifflige Rätsel aus der Zauberwelt warten auf dich",
-        senderLine: "Abs.: Hogwarts Schule für Hexerei und Zauberei",
-        letterTitle: "Hogwarts-Schule",
-        letterSubtitle: "für Hexerei und Zauberei",
-        introDescClosed: "Ein verzauberter Pergamentbrief aus Hogwarts liegt vor dir.<br>Wähle deinen Schwierigkeitsgrad und brich das rote Zaubersiegel:",
-        introDescOpened: "Lies die Botschaft der Schulleitung aufmerksam.<br>Sobald du bereit bist, besteige den Hogwarts-Express zur Prüfung:",
+        envelopeLetter: "Hogwarts-Schule für Hexerei und Zauberei",
+        envelopeRecipient: "An den ehrenwerten Zauberschüler",
+        envelopeLocation: "Auf dem Prüfungspfad • Schloss Hogwarts",
+        letterSchoolTitle: "Hogwarts-Schule für Hexerei und Zauberei",
+        letterHeadmaster: "Schulleiter: Albus Dumbledore<br><span>(Großhexenmeister, Träger des Merlin-Ordens Erster Klasse)</span>",
+        letterSalutation: "Liebe Hexe, lieber Zauberer,",
+        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.",
+        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!",
+        letterClosing: "Mit vorzüglicher Hochachtung,",
+        letterSignature: "Minerva McGonagall",
+        letterSignTitle: "Stellvertretende Schulleiterin",
         introDesc: "Ein verzauberter Pergamentbrief aus Hogwarts liegt vor dir.<br>Wähle deinen Schwierigkeitsgrad und brich das rote Zaubersiegel:",
         diffLabel: "Schwierigkeitsgrad wählen:",
         diffAll: "Alle gemischt",
         diffEasy: "Leicht",
         diffMed: "Mittel",
         diffHard: "Schwer",
-        breakSealBtn: "📜 Siegel brechen & Brief öffnen",
-        startQuizBtn: "🚂 Hogwarts-Express besteigen & Prüfung beginnen ➔",
-        closeLetterBtn: "↩ Brief wieder schließen",
         startBtn: "📜 Siegel brechen & Brief öffnen",
-        startBtnCasting: "✨ Zauberstab wird vorbereitet...",
+        startBtnCasting: "✨ Zauber wird gewirkt...",
         pointsLabel: "🏆 Hauspunkte",
         questionLabel: "Frage",
         ofLabel: "von",
@@ -50,22 +53,25 @@ const UI_TEXT = {
     en: {
         pageTitle: "✨ Magical Hogwarts Escape Quiz ✨",
         pageSubtitle: "10 tricky wizarding world puzzles await you",
-        senderLine: "Sender: Hogwarts School of Witchcraft and Wizardry",
-        letterTitle: "Hogwarts School",
-        letterSubtitle: "of Witchcraft and Wizardry",
-        introDescClosed: "An enchanted Hogwarts parchment letter lies before you.<br>Choose your difficulty and break the crimson magical seal:",
-        introDescOpened: "Read the message from Hogwarts leadership carefully.<br>When you are ready, board the Hogwarts Express for your trial:",
+        envelopeLetter: "Hogwarts School of Witchcraft and Wizardry",
+        envelopeRecipient: "To the Esteemed Wizarding Student",
+        envelopeLocation: "On the Path of Trials • Hogwarts Castle",
+        letterSchoolTitle: "Hogwarts School of Witchcraft and Wizardry",
+        letterHeadmaster: "Headmaster: Albus Dumbledore<br><span>(Order of Merlin, First Class, Grand Sorc.)</span>",
+        letterSalutation: "Dear Witch or Wizard,",
+        letterParagraph1: "we are pleased to inform you that you have been admitted to the <strong>Magical O.W.L. Examinations</strong> of the Ministry of Magic.",
+        letterParagraph2: "Ten demanding examination questions will determine your rank in the Hogwarts archives. Show your wisdom and claim up to <strong>1,000 House Points</strong> for your house!",
+        letterClosing: "Yours sincerely,",
+        letterSignature: "Minerva McGonagall",
+        letterSignTitle: "Deputy Headmistress",
         introDesc: "An enchanted Hogwarts parchment letter lies before you.<br>Choose your difficulty and break the crimson magical seal:",
         diffLabel: "Choose difficulty level:",
         diffAll: "All mixed",
         diffEasy: "Easy",
         diffMed: "Medium",
         diffHard: "Hard",
-        breakSealBtn: "📜 Break Seal & Open Letter",
-        startQuizBtn: "🚂 Board Hogwarts Express & Begin Trials ➔",
-        closeLetterBtn: "↩ Close letter again",
         startBtn: "📜 Break Seal & Open Letter",
-        startBtnCasting: "✨ Preparing wand...",
+        startBtnCasting: "✨ Casting spell...",
         pointsLabel: "🏆 House Points",
         questionLabel: "Question",
         ofLabel: "of",
@@ -152,39 +158,37 @@ function applyQuizTranslations(lang) {
     const hintHeading = document.getElementById("hintHeading");
     const answerInput = document.getElementById("answerInput");
 
-    const envSenderLine = document.getElementById("envSenderLine");
-    const letterTitle = document.getElementById("letterTitle");
-    const letterSubtitle = document.getElementById("letterSubtitle");
-    const startQuizBtnInLetter = document.getElementById("startQuizBtnInLetter");
-    const breakSealBtn = document.getElementById("breakSealBtn");
-    const startQuizBtn = document.getElementById("startQuizBtn");
-    const closeLetterBtn = document.getElementById("closeLetterBtn");
+    const letterSchoolTitle = document.getElementById("letterSchoolTitle");
+    const letterHeadmaster = document.getElementById("letterHeadmaster");
+    const letterSalutation = document.getElementById("letterSalutation");
+    const letterParagraph1 = document.getElementById("letterParagraph1");
+    const letterParagraph2 = document.getElementById("letterParagraph2");
+    const letterClosing = document.getElementById("letterClosing");
+    const letterSignature = document.getElementById("letterSignature");
+    const letterSignTitle = document.getElementById("letterSignTitle");
+
+    const envelopeRecipient = document.getElementById("envelopeRecipient");
+    const envelopeLocation = document.getElementById("envelopeLocation");
 
     if (pageTitle) pageTitle.innerText = t.pageTitle;
     if (pageSubtitle) pageSubtitle.innerText = t.pageSubtitle;
-    if (envSenderLine && t.senderLine) envSenderLine.innerText = t.senderLine;
-    if (letterTitle && t.letterTitle) letterTitle.innerText = t.letterTitle;
-    if (letterSubtitle && t.letterSubtitle) letterSubtitle.innerText = t.letterSubtitle;
-    if (startQuizBtnInLetter && t.startQuizBtn) startQuizBtnInLetter.innerText = t.startQuizBtn;
-    
-    const envelope = document.getElementById("envelope");
-    if (introDesc) {
-        if (envelope && envelope.classList.contains("envelope-opened") && t.introDescOpened) {
-            introDesc.innerHTML = t.introDescOpened;
-        } else if (t.introDescClosed) {
-            introDesc.innerHTML = t.introDescClosed;
-        } else if (t.introDesc) {
-            introDesc.innerHTML = t.introDesc;
-        }
-    }
+    if (envelopeLetter) envelopeLetter.innerText = t.envelopeLetter;
+    if (envelopeRecipient && t.envelopeRecipient) envelopeRecipient.innerText = t.envelopeRecipient;
+    if (envelopeLocation && t.envelopeLocation) envelopeLocation.innerText = t.envelopeLocation;
+    if (letterSchoolTitle && t.letterSchoolTitle) letterSchoolTitle.innerText = t.letterSchoolTitle;
+    if (letterHeadmaster && t.letterHeadmaster) letterHeadmaster.innerHTML = t.letterHeadmaster;
+    if (letterSalutation && t.letterSalutation) letterSalutation.innerText = t.letterSalutation;
+    if (letterParagraph1 && t.letterParagraph1) letterParagraph1.innerHTML = t.letterParagraph1;
+    if (letterParagraph2 && t.letterParagraph2) letterParagraph2.innerHTML = t.letterParagraph2;
+    if (letterClosing && t.letterClosing) letterClosing.innerText = t.letterClosing;
+    if (letterSignature && t.letterSignature) letterSignature.innerText = t.letterSignature;
+    if (letterSignTitle && t.letterSignTitle) letterSignTitle.innerText = t.letterSignTitle;
+    if (introDesc) introDesc.innerHTML = t.introDesc;
     if (diffLabel) diffLabel.innerText = t.diffLabel;
     if (diffAllText) diffAllText.innerText = t.diffAll;
     if (diffEasyText) diffEasyText.innerText = t.diffEasy;
     if (diffMedText) diffMedText.innerText = t.diffMed;
     if (diffHardText) diffHardText.innerText = t.diffHard;
-    if (breakSealBtn && !breakSealBtn.disabled) breakSealBtn.innerText = t.breakSealBtn || t.startBtn;
-    if (startQuizBtn && !startQuizBtn.disabled) startQuizBtn.innerText = t.startQuizBtn;
-    if (closeLetterBtn) closeLetterBtn.innerText = t.closeLetterBtn;
     if (startBtn && !startBtn.disabled) startBtn.innerText = t.startBtn;
     if (checkBtn) checkBtn.innerText = t.checkBtn;
     if (hintBtn) hintBtn.innerText = t.hintBtn;
@@ -249,14 +253,16 @@ function saveRecentQuestions(ids) {
     } catch(e) {}
 }
 
-function breakSealAndOpenLetter() {
+async function startGame() {
     const envelope = document.getElementById("envelope");
-    const scene = document.getElementById("envelopeScene");
-    if (!envelope || envelope.classList.contains("envelope-opened")) return;
+    const startBtn = document.getElementById("startBtn");
+    const t = UI_TEXT[currentLang] || UI_TEXT.de;
 
-    playSound('magic');
+    startBtn.disabled = true;
+    startBtn.innerText = t.startBtnCasting;
     envelope.classList.add("envelope-opened");
-    if (scene) scene.classList.add("envelope-opened");
+    playSound('magic');
+    sessionQuestionIds = [];
 
     // Start background music if enabled or first click
     const bgm = document.getElementById("bgm");
@@ -272,73 +278,6 @@ function breakSealAndOpenLetter() {
         }).catch(() => {});
     }
 
-    const breakSealBtn = document.getElementById("breakSealBtn");
-    const startBtn = document.getElementById("startBtn");
-    const letterActions = document.getElementById("letterActions");
-    const introDesc = document.getElementById("introDesc");
-    const t = UI_TEXT[currentLang] || UI_TEXT.de;
-
-    if (breakSealBtn) breakSealBtn.classList.add("hidden");
-    if (startBtn) startBtn.classList.add("hidden");
-    if (letterActions) {
-        letterActions.classList.remove("hidden");
-        letterActions.classList.add("fade-in-action");
-    }
-    if (introDesc && t.introDescOpened) {
-        introDesc.innerHTML = t.introDescOpened;
-    }
-}
-
-function closeLetter() {
-    const envelope = document.getElementById("envelope");
-    const scene = document.getElementById("envelopeScene");
-    if (!envelope) return;
-
-    envelope.classList.remove("envelope-opened");
-    if (scene) scene.classList.remove("envelope-opened");
-
-    const breakSealBtn = document.getElementById("breakSealBtn");
-    const startBtn = document.getElementById("startBtn");
-    const letterActions = document.getElementById("letterActions");
-    const introDesc = document.getElementById("introDesc");
-    const startQuizBtn = document.getElementById("startQuizBtn");
-    const startQuizBtnInLetter = document.getElementById("startQuizBtnInLetter");
-    const t = UI_TEXT[currentLang] || UI_TEXT.de;
-
-    if (startQuizBtn) {
-        startQuizBtn.disabled = false;
-        startQuizBtn.innerText = t.startQuizBtn;
-    }
-    if (startQuizBtnInLetter) {
-        startQuizBtnInLetter.disabled = false;
-        startQuizBtnInLetter.innerText = t.startQuizBtn;
-    }
-
-    if (letterActions) letterActions.classList.add("hidden");
-    if (breakSealBtn) breakSealBtn.classList.remove("hidden");
-    if (startBtn) startBtn.classList.remove("hidden");
-    if (introDesc && t.introDescClosed) {
-        introDesc.innerHTML = t.introDescClosed;
-    }
-}
-
-async function startQuizFromLetter() {
-    const startQuizBtn = document.getElementById("startQuizBtn");
-    const startQuizBtnInLetter = document.getElementById("startQuizBtnInLetter");
-    const t = UI_TEXT[currentLang] || UI_TEXT.de;
-
-    if (startQuizBtn) {
-        startQuizBtn.disabled = true;
-        startQuizBtn.innerText = t.startBtnCasting;
-    }
-    if (startQuizBtnInLetter) {
-        startQuizBtnInLetter.disabled = true;
-        startQuizBtnInLetter.innerText = t.startBtnCasting;
-    }
-
-    playSound('magic');
-    sessionQuestionIds = [];
-
     try {
         const recentIds = getRecentQuestionIds();
         const wrongIds = getWrongQuestionIds();
@@ -365,40 +304,18 @@ async function startQuizFromLetter() {
         currentScore = data.score;
         attemptsUsed = data.attempts_used;
 
-        const introCard = document.getElementById("introCard");
-        if (introCard) {
-            introCard.style.transition = "opacity 0.4s ease, transform 0.4s ease";
-            introCard.style.opacity = "0";
-            introCard.style.transform = "scale(0.97)";
-        }
-
         setTimeout(() => {
-            if (introCard) {
-                introCard.classList.add("hidden");
-                introCard.style.opacity = "";
-                introCard.style.transform = "";
-            }
+            document.getElementById("introCard").classList.add("hidden");
             document.getElementById("gameCard").classList.remove("hidden");
             startTimer();
             renderQuestion(data);
-        }, 400);
+        }, 1800);
 
     } catch (err) {
         alert(t.startError + err.message);
-        if (startQuizBtn) {
-            startQuizBtn.disabled = false;
-            startQuizBtn.innerText = t.startQuizBtn;
-        }
-    }
-}
-
-// Fallback alias for startGame
-function startGame() {
-    const envelope = document.getElementById("envelope");
-    if (envelope && !envelope.classList.contains("envelope-opened")) {
-        breakSealAndOpenLetter();
-    } else {
-        startQuizFromLetter();
+        startBtn.disabled = false;
+        startBtn.innerText = t.startBtn;
+        envelope.classList.remove("envelope-opened");
     }
 }
 
diff --git a/app/templates/base.html b/app/templates/base.html
index 4ba65c9..46528f3 100755
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -8,7 +8,7 @@
     <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=Cinzel:wght@600;700&family=Marck+Script&family=MedievalSharp&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="/static/css/style.css?v=3.1">
+    <link rel="stylesheet" href="/static/css/style.css?v=3.2">
     {% block head %}{% endblock %}
 </head>
 <body>
diff --git a/app/templates/index.html b/app/templates/index.html
index af98e40..761ec6e 100755
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -12,46 +12,63 @@
     <!-- Brief-Intro / Startmaske -->
     <div id="introCard" class="card intro-card intro-parchment-wrapper">
         <!-- Antiker geschlossener Hogwarts-Umschlag (öffnet sich bei Klick auf das Siegel) -->
-        <!-- Antiker geschlossener Hogwarts-Umschlag (öffnet sich bei Klick auf das Siegel) -->
-        <div class="antique-envelope-scene" id="envelopeScene">
-            <div class="envelope-base" id="envelope">
-                <!-- Dunklere Pergament-Innenwand (hinter dem Briefbogen) -->
+        <div class="antique-envelope-scene" id="envelope">
+            <div class="envelope-base">
+                <!-- Dunkleres Pergament-Innenfutter -->
                 <div class="envelope-interior"></div>
 
                 <!-- Der darin liegende Briefbogen (gleitet beim Öffnen majestätisch hervor) -->
                 <div class="letter-sheet" id="letterSheet">
-                    <img src="/static/img/hogwarts_seal.jpg" alt="Hogwarts-Wappen" class="letter-crest-small">
-                    <h3 class="letter-title" id="letterTitle">Hogwarts-Schule</h3>
-                    <p class="letter-subtitle" id="letterSubtitle">für Hexerei und Zauberei</p>
-                    <button id="startQuizBtnInLetter" class="btn-launch-express" onclick="startQuizFromLetter()">
-                        🚂 Hogwarts-Express besteigen & Prüfung beginnen ➔
-                    </button>
+                    <div class="sheet-parchment-layer"></div>
+                    <header class="letter-header">
+                        <div class="letter-crest-box">
+                            <img src="/static/img/hogwarts_seal.jpg" alt="Hogwarts Crest" class="letter-crest-sketch">
+                        </div>
+                        <h3 class="letter-school-name" id="letterSchoolTitle">Hogwarts-Schule für Hexerei und Zauberei</h3>
+                        <p class="letter-headmaster" id="letterHeadmaster">Schulleiter: Albus Dumbledore<br><span>(Großhexenmeister, Träger des Merlin-Ordens 1. 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> an der Hogwarts-Schule zugelassen bist.
+                        </p>
+                        <p class="letter-paragraph" id="letterParagraph2">
+                            Zehn anspruchsvolle Prüfungsfragen entscheiden über deinen Rang in den Chroniken. 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>
 
-                <!-- Solide Rückseite des Briefumschlags mit Nahtlinien -->
-                <div class="envelope-back-body">
-                    <!-- Schöne diagonale Faltungsnähte auf der Rückseite -->
-                    <svg class="envelope-body-folds" viewBox="0 0 100 100" preserveAspectRatio="none">
-                        <line x1="0" y1="100" x2="50" y2="55" stroke="#7a5528" stroke-width="1.2" stroke-dasharray="3 2" />
-                        <line x1="100" y1="100" x2="50" y2="55" stroke="#7a5528" stroke-width="1.2" stroke-dasharray="3 2" />
-                    </svg>
+                <!-- Vordere Umschlagtasche mit handschriftlicher Smaragd-Anschrift -->
+                <div class="envelope-front-pocket">
+                    <div class="envelope-sketch-border"></div>
+                    <div class="envelope-address-block">
+                        <p class="addr-line addr-school" id="envelopeLetter">Hogwarts-Schule für Hexerei und Zauberei</p>
+                        <p class="addr-line addr-recipient" id="envelopeRecipient">An den ehrenwerten Zauberschüler</p>
+                        <p class="addr-line addr-location" id="envelopeLocation">Auf dem Prüfungspfad • Schloss Hogwarts</p>
+                    </div>
                 </div>
 
-                <!-- Absender oben links auf der Rückseite (dezent, handschriftlich) -->
-                <div class="env-sender-line" id="envSenderLine">
-                    Abs.: Hogwarts Schule für Hexerei und Zauberei
+                <!-- Obere Klappe des Umschlags (überdeckt die Tasche und wird vom Siegel gehalten) -->
+                <div class="envelope-closing-flap">
+                    <div class="flap-sketch-line"></div>
                 </div>
 
-                <!-- Markante obere V-Klappe mit klarer Kontur & Schattierung -->
-                <div class="envelope-closing-flap" id="envelopeFlap">
-                    <svg class="v-flap-outline" viewBox="0 0 100 55" preserveAspectRatio="none">
-                        <polyline points="0,0 50,55 100,0" fill="none" stroke="#7a5528" stroke-width="1.6" stroke-dasharray="3 2" />
-                        <polyline points="1,0 50,53.5 99,0" fill="none" stroke="rgba(255,255,255,0.45)" stroke-width="1" />
-                    </svg>
-                </div>
-
-                <!-- Handgezeichnetes Hogwarts-Wachssiegel exakt auf der Klappenspitze -->
-                <div class="sketched-wax-seal" id="waxSeal" onclick="breakSealAndOpenLetter()" title="Siegel brechen & Brief öffnen">
+                <!-- Handgezeichnetes Wachssiegel über der Klappenspitze -->
+                <div class="sketched-wax-seal" id="waxSeal" onclick="startGame()" title="Siegel brechen & Brief öffnen">
                     <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>
@@ -60,7 +77,7 @@
         </div>
 
         <!-- Auswahlbereich unter dem Pergament -->
-        <div class="intro-content intro-controls-panel" id="introControls">
+        <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:
@@ -85,19 +102,9 @@
                 </div>
             </div>
 
-            <div class="intro-action-container">
-                <button id="breakSealBtn" class="btn btn-primary btn-large btn-break-seal" onclick="breakSealAndOpenLetter()">
-                    📜 Siegel brechen & Brief öffnen
-                </button>
-                <div id="letterActions" class="letter-actions hidden">
-                    <button id="startQuizBtn" class="btn btn-primary btn-large btn-launch-quiz glow-pulse" onclick="startQuizFromLetter()">
-                        🚂 Hogwarts-Express besteigen & Prüfung beginnen ➔
-                    </button>
-                    <button id="closeLetterBtn" class="btn btn-secondary btn-close-letter" onclick="closeLetter()">
-                        ↩ Brief wieder schließen
-                    </button>
-                </div>
-            </div>
+            <button id="startBtn" class="btn btn-primary btn-large btn-break-seal" onclick="startGame()">
+                📜 Siegel brechen & Brief öffnen
+            </button>
         </div>
     </div>
 
@@ -163,5 +170,5 @@
 {% endblock %}
 
 {% block scripts %}
-<script src="/static/js/quiz.js?v=3.1"></script>
+<script src="/static/js/quiz.js?v=3.2"></script>
 {% endblock %}