Design: Implement CodePen-style opening envelope with Hogwarts aesthetics, central wax seal, and subtle top-left return address

app/static/css/style.css

@@ -243,214 +243,185 @@ body {
     margin: 0 auto;
 }
 
-.antique-envelope-scene {
-    position: relative;
-    width: min(480px, 94vw);
-    height: min(280px, 60vw);
-    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 {
-    margin-top: 155px;
-    margin-bottom: 25px;
-}
-
-.envelope-base {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    border-radius: 6px;
-    box-shadow: 
-        0 20px 45px rgba(0, 0, 0, 0.75),
-        0 4px 14px rgba(0, 0, 0, 0.5);
-    transition: transform 0.6s ease;
-}
-
-/* Interior of envelope (visible when flap opens and letter rises) */
-.envelope-interior {
-    position: absolute;
-    inset: 0;
-    border-radius: 6px;
-    background-color: #d1be9b;
-    background-image: 
-        radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.55) 100%),
-        url('/static/img/parchment_texture.jpg');
-    background-size: cover;
-    border: 2px solid #7a5c36;
-    z-index: 1;
-}
-
-/* The Letter inside the envelope (slides up when opened) */
-.letter-sheet {
-    position: absolute;
-    top: 15px;
-    left: 4%;
-    width: 92%;
-    height: 440px;
-    max-height: 75vh;
-    background-color: #f7f0df;
-    background-image: 
-        radial-gradient(ellipse at 50% 25%, rgba(255, 255, 255, 0.6) 0%, rgba(140, 100, 50, 0.15) 100%),
-        url('/static/img/parchment_texture.jpg');
-    background-size: cover;
-    background-position: center;
-    border-radius: 4px;
-    border: 1.5px solid #8e6c43;
-    padding: 16px 20px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
-    z-index: 2;
-    /* In closed state: 100% completely hidden, invisible, non-rendered */
-    visibility: hidden;
-    opacity: 0;
-    transform: translateY(50px) scale(0.92);
-    pointer-events: none;
-    transition: transform 0.9s cubic-bezier(0.2, 0.85, 0.25, 1) 0.35s, 
-                opacity 0.6s ease 0.35s, 
-                visibility 0.6s ease 0.35s,
-                box-shadow 0.8s ease;
-    overflow-y: auto;
-    text-align: center;
-    outline: 1px dashed rgba(130, 95, 55, 0.45);
-    outline-offset: -5px;
-    scrollbar-width: thin;
-    scrollbar-color: #8c6838 transparent;
-}
-
-.letter-sheet::-webkit-scrollbar {
-    width: 6px;
-}
-
-.letter-sheet::-webkit-scrollbar-thumb {
-    background-color: #8c6838;
-    border-radius: 4px;
-}
-
 /* =========================================
-   ENVELOPE BACK WITH V-FLAP CLOSURE
+   CODEPEN ENVELOPE WITH HOGWARTS AESTHETICS
-   - Solid back body
+   - 4-Flap Envelope Back Geometry
-   - Sender address in top-left
+   - Realistic Parchment Textures
-   - Prominent triangular V-flap
+   - Wax Seal in the Exact Center (Mitte)
-   - Sketched wax seal at apex
+   - Small Handwriting Return Address (Top-Left)
+   - Clean Inner Letter Sheet
    ========================================= */
 
-/* Solid Envelope Back Body */
+.envelope-outer-wrap {
-.envelope-back-body {
+    width: 100%;
-    position: absolute;
+    max-width: 480px;
-    inset: 0;
+    margin: 15px auto 25px;
-    border-radius: 6px;
+}
-    background-color: #ebd8ae;
+
-    background-image: 
+.envelope-form {
-        radial-gradient(ellipse at 50% 60%, rgba(255, 255, 255, 0.22) 0%, rgba(130, 95, 45, 0.22) 100%),
+    width: 100%;
-        url('/static/img/parchment_texture.jpg');
+    perspective: 1200px;
-    background-size: cover;
+}
-    border: 1.5px solid #8e6c43;
+
-    z-index: 3;
+.env-wrap {
+    position: relative;
     overflow: hidden;
+    width: 100%;
+    padding-top: 86%; /* Aspect ratio for envelope body + rising letter */
+    background: transparent;
 }
 
-/* Absender oben links auf der Rückseite (sonst kein Text) */
+/* Interior Back Wall of the Envelope (Bottom 55%) */
-.envelope-sender-block {
+.env-body-back {
     position: absolute;
-    top: 14px;
+    bottom: 0;
-    left: 16px;
-    z-index: 8;
-    text-align: left;
-    font-family: 'Marck Script', 'Caveat', cursive;
-    color: #0d3820; /* Authentic Hogwarts Emerald Ink */
-    max-width: 48%;
-    line-height: 1.25;
-    pointer-events: none;
-    transition: opacity 0.4s ease;
-}
-
-.envelope-opened .envelope-sender-block {
-    opacity: 0;
-}
-
-.sender-label {
-    display: block;
-    font-size: clamp(0.72rem, 2.2vw, 0.85rem);
-    font-family: 'MedievalSharp', serif;
-    color: #4a6352;
-    text-transform: uppercase;
-    letter-spacing: 0.8px;
-    margin-bottom: 2px;
-}
-
-.sender-name {
-    font-size: clamp(0.92rem, 2.9vw, 1.15rem);
-    font-weight: 700;
-    color: #082816;
-    margin-bottom: 1px;
-    text-shadow: 0 0 1px rgba(8, 40, 22, 0.35);
-}
-
-.sender-location {
-    font-size: clamp(0.78rem, 2.4vw, 0.95rem);
-    font-style: italic;
-    color: #1e4530;
-}
-
-/* Distinct Triangular V-Closure Flap */
-.envelope-closing-flap.envelope-v-flap {
-    position: absolute;
-    top: 0;
     left: 0;
     width: 100%;
-    height: 100%;
+    height: 55%;
-    background-color: #dfcd9b;
+    background-color: #2e2014;
     background-image: 
-        radial-gradient(ellipse at 50% 18%, rgba(255, 255, 255, 0.35) 0%, rgba(125, 90, 40, 0.28) 100%),
+        radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.8) 100%),
         url('/static/img/parchment_texture.jpg');
     background-size: cover;
-    clip-path: polygon(0 0, 100% 0, 50% 56%);
+    border-radius: 0 0 6px 6px;
-    transform-origin: top center;
+    border: 1.5px solid #6b4a24;
-    transform-style: preserve-3d;
+    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.75);
-    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
-    z-index: 6;
-    border-top: 2px solid #7c5830;
-    filter: drop-shadow(0 7px 14px rgba(35, 18, 5, 0.65));
-}
-
-.envelope-opened .envelope-closing-flap.envelope-v-flap {
-    transform: rotateX(180deg);
     z-index: 1;
-    filter: drop-shadow(0 -4px 6px rgba(50, 35, 10, 0.4));
 }
 
-.v-flap-sketch-line {
+/* Top V-Flap (Hinged at 45% Top Edge of Envelope Body) */
+.env-top {
     position: absolute;
-    inset: 4px;
+    width: 100%;
-    clip-path: polygon(2% 2%, 98% 2%, 50% 53.5%);
+    height: 33%;
-    border-top: 1.5px dashed rgba(110, 75, 35, 0.45);
+    top: 45%;
+    z-index: 8;
+    transform-origin: top center;
+    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), z-index 0s 0.25s;
+}
+
+.env-top:before {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: #ebd8ae;
+    background-image: 
+        radial-gradient(ellipse at 50% 20%, rgba(255, 255, 255, 0.3) 0%, rgba(130, 95, 45, 0.2) 100%),
+        url('/static/img/parchment_texture.jpg');
+    background-size: cover;
+    clip-path: polygon(50% 100%, 0 0, 100% 0);
+    filter: drop-shadow(0px 8px 12px rgba(35, 18, 5, 0.6));
+    border-top: 1px solid #7c5830;
+}
+
+/* Sketched Dashed Line on Top Flap */
+.env-top:after {
+    content: '';
+    position: absolute;
+    top: 2px;
+    left: 4%;
+    width: 92%;
+    height: 94%;
+    clip-path: polygon(50% 96%, 2% 2%, 98% 2%);
+    border-top: 1.5px dashed rgba(110, 75, 35, 0.4);
     pointer-events: none;
 }
 
-/* Sketched Wax Seal placed right at the tip of the V-flap */
+/* Bottom Pocket Wrap */
+.env-bottom-wrap {
+    height: 55%;
+    width: 100%;
+    z-index: 4;
+    bottom: 0;
+    position: absolute;
+    filter: drop-shadow(0px -4px 6px rgba(30, 15, 5, 0.3));
+}
+
+/* Bottom Flap */
+.env-bottom {
+    clip-path: polygon(50% 50%, 100% 0, 100% 100%, 0 100%, 0 0);
+    background-color: #e5cf9f;
+    background-image: 
+        radial-gradient(ellipse at 50% 80%, rgba(255, 255, 255, 0.25) 0%, rgba(120, 85, 40, 0.25) 100%),
+        url('/static/img/parchment_texture.jpg');
+    background-size: cover;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    border-radius: 0 0 6px 6px;
+}
+
+/* Side Flaps Inside Bottom Pocket */
+.env-bottom:before, .env-bottom:after {
+    content: '';
+    position: absolute;
+    width: 50%;
+    height: 100%;
+    background-size: cover;
+}
+
+/* Left Side Flap */
+.env-bottom:before {
+    left: 0;
+    clip-path: polygon(100% 50%, 0 0, 0 100%);
+    background-color: #dfc794;
+    background-image: 
+        linear-gradient(135deg, rgba(0, 0, 0, 0.12) 0%, rgba(255, 255, 255, 0.15) 100%),
+        url('/static/img/parchment_texture.jpg');
+    box-shadow: inset -2px 0 6px rgba(60, 40, 15, 0.2);
+}
+
+/* Right Side Flap */
+.env-bottom:after {
+    right: 0;
+    clip-path: polygon(0 50%, 100% 0, 100% 100%);
+    background-color: #dbc38f;
+    background-image: 
+        linear-gradient(-135deg, rgba(0, 0, 0, 0.12) 0%, rgba(255, 255, 255, 0.15) 100%),
+        url('/static/img/parchment_texture.jpg');
+    box-shadow: inset 2px 0 6px rgba(60, 40, 15, 0.2);
+}
+
+/* Small Handwriting Return Address in Top Left ("Abs.: Hogwarts Schule...") */
+.env-sender-line {
+    position: absolute;
+    top: 47%;
+    left: 14px;
+    font-family: 'Caveat', 'Marck Script', cursive;
+    font-size: clamp(0.76rem, 2.1vw, 0.88rem);
+    color: #0d3820; /* Authentic Hogwarts Emerald Ink */
+    font-weight: 600;
+    z-index: 7;
+    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;
+}
+
+/* Hand-Sketched Hogwarts Wax Seal in the Exact Mitte (Center) */
 .sketched-wax-seal {
     position: absolute;
-    top: 56%;
+    top: 72.5%; /* Exact point where top flap and pocket meet */
     left: 50%;
     transform: translate(-50%, -50%) rotate(-3deg);
-    width: 74px;
+    width: 68px;
-    height: 74px;
+    height: 68px;
     border-radius: 50%;
     cursor: pointer;
-    z-index: 7;
+    z-index: 9;
     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 8px 20px rgba(0, 0, 0, 0.75),
-        0 2px 6px rgba(0, 0, 0, 0.45);
+        0 2px 5px rgba(0, 0, 0, 0.5);
 }
 
 .sketched-wax-seal:hover {
     transform: translate(-50%, -50%) rotate(0deg) scale(1.1);
     box-shadow: 
-        0 12px 28px rgba(0, 0, 0, 0.8),
+        0 12px 26px rgba(0, 0, 0, 0.85),
-        0 0 16px rgba(218, 165, 32, 0.45);
+        0 0 16px rgba(218, 165, 32, 0.5);
 }
 
 .seal-crest-img {
@@ -459,8 +430,8 @@ body {
     border-radius: 50%;
     object-fit: cover;
     display: block;
-    border: 3px solid #4a0d0d;
+    border: 2.5px solid #4a0d0d;
-    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.7);
+    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.7);
 }
 
 .seal-emboss-ring {
@@ -486,162 +457,114 @@ body {
     opacity: 1;
 }
 
-/* Open state: Flap opens, seal dissolves, letter slides out */
+/* Inner Letter Sheet (Clean, No Distracting Text - "Den Text lassen wir erstmal weg") */
+.env-letter-sheet {
+    width: calc(100% - 2.5rem);
+    left: 1.25rem;
+    position: absolute;
+    height: 68%;
+    top: 46%; /* Tucked safely inside pocket when closed */
+    background-color: #f7f0de;
+    background-image: 
+        radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, 0.7) 0%, rgba(140, 100, 50, 0.15) 100%),
+        url('/static/img/parchment_texture.jpg');
+    background-size: cover;
+    border-radius: 5px;
+    border: 1px solid #8e6c43;
+    outline: 1px dashed rgba(130, 95, 55, 0.4);
+    outline-offset: -5px;
+    z-index: 3; /* Behind bottom pocket (z-index: 4), in front of interior back (z-index: 1) */
+    transition: transform 0.7s cubic-bezier(0.2, 0.85, 0.25, 1) 0.15s, box-shadow 0.6s ease;
+    transform: translateY(0);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 16px 20px;
+    text-align: center;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+.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;
+}
+
+/* =========================================
+   OPENED STATE (via .envelope-opened class OR hover)
+   ========================================= */
+
+.envelope-opened .env-top,
+.envelope-form:hover .env-top {
+    transform: rotateX(-180deg);
+    z-index: 2;
+    transition-delay: 0s;
+}
+
 .envelope-opened .sketched-wax-seal {
-    animation: breakSealAnim 0.7s forwards;
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.3) rotate(25deg);
     pointer-events: none;
 }
 
-.envelope-opened .envelope-closing-flap.flap-top {
+.envelope-form:hover .sketched-wax-seal {
-    transform: rotateX(180deg);
+    opacity: 0.2;
-    z-index: 1;
+    transform: translate(-50%, -50%) scale(0.85);
-    filter: drop-shadow(0 -4px 6px rgba(50, 35, 10, 0.4));
 }
 
-.envelope-opened .letter-sheet {
+.envelope-opened .env-letter-sheet,
-    visibility: visible;
+.envelope-form:hover .env-letter-sheet {
-    opacity: 1;
+    transform: translateY(-56%);
-    pointer-events: auto;
+    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(218, 165, 32, 0.35);
-    transform: translateY(-145px) scale(1.02);
-    z-index: 25;
-    box-shadow: 
-        0 24px 60px rgba(0, 0, 0, 0.85),
-        0 0 35px rgba(201, 168, 106, 0.4);
 }
 
-@keyframes breakSealAnim {
+.envelope-opened .env-sender-line {
-    0% { transform: translate(-50%, -50%) rotate(-3deg) scale(1); opacity: 1; filter: none; }
+    opacity: 0;
-    50% { transform: translate(-50%, -50%) rotate(10deg) scale(1.2); opacity: 0.8; filter: drop-shadow(0 0 25px #ffd700); }
-    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.0rem, 2.9vw, 1.16rem);
-    margin-bottom: 8px;
-    text-indent: 1.2em;
-    line-height: 1.48;
-}
-
-.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 */
@@ -739,44 +662,37 @@ body {
 }
 
 @media (max-width: 480px) {
-    .antique-envelope-scene {
+    .envelope-outer-wrap {
-        width: min(340px, 94vw);
+        max-width: 360px;
-        height: min(215px, 60vw);
+        margin: 10px auto 20px;
-        margin: 15px auto 25px;
-    }
-    .antique-envelope-scene.envelope-opened {
-        margin-top: 135px;
-        margin-bottom: 20px;
     }
     .sketched-wax-seal {
-        width: 62px;
+        width: 58px;
-        height: 62px;
+        height: 58px;
-        top: 56%;
     }
-    .envelope-sender-block {
+    .env-sender-line {
-        top: 10px;
+        font-size: 0.72rem;
-        left: 12px;
+        left: 10px;
-        max-width: 55%;
     }
-    .letter-sheet {
+    .letter-crest-small {
-        top: 10px;
+        width: 40px;
-        left: 2%;
+        height: 40px;
-        width: 96%;
-        height: 400px;
-        max-height: 72vh;
-        padding: 12px 14px;
-    }
-    .envelope-opened .letter-sheet {
-        transform: translateY(-120px) scale(1.01);
-    }
-    .letter-paragraph {
-        font-size: 0.96rem;
-        line-height: 1.42;
         margin-bottom: 6px;
     }
+    .letter-title {
+        font-size: 0.96rem;
+    }
+    .letter-subtitle {
+        font-size: 0.76rem;
+        margin-bottom: 10px;
+    }
+    .btn-launch-express {
+        padding: 7px 14px;
+        font-size: 0.76rem;
+    }
     .btn-launch-quiz {
-        padding: 12px 20px;
+        padding: 12px 18px;
-        font-size: 1.0rem;
+        font-size: 0.95rem;
     }
 }
 

app/static/js/quiz.js

@@ -14,18 +14,9 @@ const UI_TEXT = {
     de: {
         pageTitle: "✨ Magisches Hogwarts-Escape-Quiz ✨",
         pageSubtitle: "10 knifflige Rätsel aus der Zauberwelt warten auf dich",
-        senderLabel: "Absender:",
+        senderLine: "Abs.: Hogwarts Schule für Hexerei und Zauberei",
-        envelopeSender: "Hogwarts-Schule für Hexerei und Zauberei",
+        letterTitle: "Hogwarts-Schule",
-        envelopeSenderLocation: "Schulleitung • Schloss Hogwarts",
+        letterSubtitle: "für Hexerei und Zauberei",
-        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: "die schwebenden Kerzen der Großen Halle flackern in unruhigem Schein, und der Sprechende Hut hat nach Jahrhunderten des Schweigens ein wohlbehütetes Geheimnis preisgegeben: Tief in den uralten Gewölben des Schlosses – verborgen hinter den wachsamen Wasserspeiern und den staubigen Bänden der Verbotenen Abteilung – wurde eine magische Prüfungsurkunde versiegelt.",
-        letterParagraph2: "Zehn arkanische Prüfungen des Scharfsinns, der Zauberkunde und der Entschlossenheit liegen vor dir. Nur wer wahren Mut beweist und die uralten Rätsel meistert, sichert sich seinen ehrenvollen Platz in den Chroniken von Hogwarts und trägt bis zu <strong>1.000 Hauspunkte</strong> für sein Haus davon!",
-        letterParagraph3: "Halte deinen Zauberstab bereit, besinne dich auf deine Flüche und Gegenzauber und nimm dich vor verhexten Trugschlüssen in Acht. Wir erwarten deine Eule nicht später als mit dem nächsten Glockenschlag des Uhrenturms.",
-        letterClosing: "Mit vorzüglicher Hochachtung,",
-        letterSignature: "Minerva McGonagall",
-        letterSignTitle: "Stellvertretende Schulleiterin",
         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:",
         introDesc: "Ein verzauberter Pergamentbrief aus Hogwarts liegt vor dir.<br>Wähle deinen Schwierigkeitsgrad und brich das rote Zaubersiegel:",
@@ -59,18 +50,9 @@ const UI_TEXT = {
     en: {
         pageTitle: "✨ Magical Hogwarts Escape Quiz ✨",
         pageSubtitle: "10 tricky wizarding world puzzles await you",
-        senderLabel: "Sender:",
+        senderLine: "Sender: Hogwarts School of Witchcraft and Wizardry",
-        envelopeSender: "Hogwarts School of Witchcraft and Wizardry",
+        letterTitle: "Hogwarts School",
-        envelopeSenderLocation: "Headmaster's Office • Hogwarts Castle",
+        letterSubtitle: "of Witchcraft and Wizardry",
-        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: "The floating candles of the Great Hall flicker with restless anticipation, and the Sorting Hat has stirred after centuries of silence to unveil a closely guarded secret: Deep within the ancient castle vaults—past the watchful gargoyles and the dust of the Restricted Section—a legendary trial has been unsealed.",
-        letterParagraph2: "Ten arcane trials of wit, magical lore, and courage lie ahead of you. Only those who prove true valor and decipher the hidden mysteries shall claim their place in the eternal Hogwarts archives and earn up to <strong>1,000 House Points</strong> for their house!",
-        letterParagraph3: "Ready your wand, recall your spells and counter-curses, and beware of enchanted trickery. We await your owl by no later than the next chime of the clock tower.",
-        letterClosing: "Yours sincerely,",
-        letterSignature: "Minerva McGonagall",
-        letterSignTitle: "Deputy Headmistress",
         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:",
         introDesc: "An enchanted Hogwarts parchment letter lies before you.<br>Choose your difficulty and break the crimson magical seal:",
@@ -170,37 +152,20 @@ function applyQuizTranslations(lang) {
     const hintHeading = document.getElementById("hintHeading");
     const answerInput = document.getElementById("answerInput");
 
-    const letterSchoolTitle = document.getElementById("letterSchoolTitle");
+    const envSenderLine = document.getElementById("envSenderLine");
-    const letterHeadmaster = document.getElementById("letterHeadmaster");
+    const letterTitle = document.getElementById("letterTitle");
-    const letterSalutation = document.getElementById("letterSalutation");
+    const letterSubtitle = document.getElementById("letterSubtitle");
-    const letterParagraph1 = document.getElementById("letterParagraph1");
+    const startQuizBtnInLetter = document.getElementById("startQuizBtnInLetter");
-    const letterParagraph2 = document.getElementById("letterParagraph2");
-    const letterParagraph3 = document.getElementById("letterParagraph3");
-    const letterClosing = document.getElementById("letterClosing");
-    const letterSignature = document.getElementById("letterSignature");
-    const letterSignTitle = document.getElementById("letterSignTitle");
-
-    const senderLabel = document.getElementById("senderLabel");
-    const envelopeSender = document.getElementById("envelopeSender");
-    const envelopeSenderLocation = document.getElementById("envelopeSenderLocation");
     const breakSealBtn = document.getElementById("breakSealBtn");
     const startQuizBtn = document.getElementById("startQuizBtn");
     const closeLetterBtn = document.getElementById("closeLetterBtn");
 
     if (pageTitle) pageTitle.innerText = t.pageTitle;
     if (pageSubtitle) pageSubtitle.innerText = t.pageSubtitle;
-    if (senderLabel && t.senderLabel) senderLabel.innerText = t.senderLabel;
+    if (envSenderLine && t.senderLine) envSenderLine.innerText = t.senderLine;
-    if (envelopeSender && t.envelopeSender) envelopeSender.innerText = t.envelopeSender;
+    if (letterTitle && t.letterTitle) letterTitle.innerText = t.letterTitle;
-    if (envelopeSenderLocation && t.envelopeSenderLocation) envelopeSenderLocation.innerText = t.envelopeSenderLocation;
+    if (letterSubtitle && t.letterSubtitle) letterSubtitle.innerText = t.letterSubtitle;
-    if (letterSchoolTitle && t.letterSchoolTitle) letterSchoolTitle.innerText = t.letterSchoolTitle;
+    if (startQuizBtnInLetter && t.startQuizBtn) startQuizBtnInLetter.innerText = t.startQuizBtn;
-    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 (letterParagraph3 && t.letterParagraph3) letterParagraph3.innerHTML = t.letterParagraph3;
-    if (letterClosing && t.letterClosing) letterClosing.innerText = t.letterClosing;
-    if (letterSignature && t.letterSignature) letterSignature.innerText = t.letterSignature;
-    if (letterSignTitle && t.letterSignTitle) letterSignTitle.innerText = t.letterSignTitle;
     
     const envelope = document.getElementById("envelope");
     if (introDesc) {
@@ -332,8 +297,19 @@ function closeLetter() {
     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");
@@ -344,12 +320,17 @@ function closeLetter() {
 
 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 = [];

app/templates/base.html

@@ -7,8 +7,8 @@
     <link rel="icon" href="/static/favicon.ico">
     <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 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=2.8">
+    <link rel="stylesheet" href="/static/css/style.css?v=2.9">
     {% block head %}{% endblock %}
 </head>
 <body>

app/templates/index.html

@@ -12,69 +12,44 @@
     <!-- Brief-Intro / Startmaske -->
     <div id="introCard" class="card intro-card intro-parchment-wrapper">
         <!-- Antiker geschlossener Hogwarts-Umschlag (öffnet sich bei Klick auf das Siegel) -->
-        <div class="antique-envelope-scene" id="envelope">
+        <!-- Briefumschlag (CodePen-Faltarchitektur mit Hogwarts-Optik) -->
-            <div class="envelope-base">
+        <div class="envelope-outer-wrap">
-                <!-- Dunkleres Pergament-Innenfutter -->
+            <div class="envelope-form" id="envelope">
-                <div class="envelope-interior"></div>
+                <div class="env-wrap">
 
-                <!-- Der darin liegende Briefbogen (gleitet beim Öffnen majestätisch hervor) -->
+                    <!-- Dunklere Pergament-Innenwand (hinter dem Briefbogen) -->
-                <div class="letter-sheet" id="letterSheet">
+                    <div class="env-body-back"></div>
-                    <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">
+                    <!-- Der innenliegende Briefbogen (ohne lange Texte, gleitet beim Öffnen heraus) -->
-                        <p class="letter-salutation" id="letterSalutation">Liebe Hexe, lieber Zauberer,</p>
+                    <div class="env-letter-sheet" id="letterSheet">
-                        <p class="letter-paragraph" id="letterParagraph1">
+                        <img src="/static/img/hogwarts_seal.jpg" alt="Hogwarts-Wappen" class="letter-crest-small">
-                            die schwebenden Kerzen der Großen Halle flackern in unruhigem Schein, und der Sprechende Hut hat nach Jahrhunderten des Schweigens ein wohlbehütetes Geheimnis preisgegeben: Tief in den uralten Gewölben des Schlosses – verborgen hinter den wachsamen Wasserspeiern und den staubigen Bänden der Verbotenen Abteilung – wurde eine magische Prüfungsurkunde versiegelt.
+                        <h3 class="letter-title" id="letterTitle">Hogwarts-Schule</h3>
-                        </p>
+                        <p class="letter-subtitle" id="letterSubtitle">für Hexerei und Zauberei</p>
-                        <p class="letter-paragraph" id="letterParagraph2">
+                        <button id="startQuizBtnInLetter" class="btn-launch-express" onclick="startQuizFromLetter()">
-                            Zehn arkanische Prüfungen des Scharfsinns, der Zauberkunde und der Entschlossenheit liegen vor dir. Nur wer wahren Mut beweist und die uralten Rätsel meistert, sichert sich seinen ehrenvollen Platz in den Chroniken von Hogwarts und trägt bis zu <strong>1.000 Hauspunkte</strong> für sein Haus davon!
+                            🚂 Hogwarts-Express besteigen & Prüfung beginnen ➔
-                        </p>
+                        </button>
-                        <p class="letter-paragraph" id="letterParagraph3">
-                            Halte deinen Zauberstab bereit, besinne dich auf deine Flüche und Gegenzauber und nimm dich vor verhexten Trugschlüssen in Acht. Wir erwarten deine Eule nicht später als mit dem nächsten Glockenschlag des Uhrenturms.
-                        </p>
                     </div>
 
-                    <footer class="letter-signature-block">
+                    <!-- Obere V-Klappe (schließt von oben nach unten zur Mitte) -->
-                        <p class="letter-closing" id="letterClosing">Mit vorzüglicher Hochachtung,</p>
+                    <div class="env-top" id="envelopeFlap"></div>
-                        <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 -->
+                    <!-- Untere Tasche mit Seiten- und Bodenfalzen (CodePen-Taschenfalz) -->
-                <div class="envelope-back-body">
+                    <div class="env-bottom-wrap">
-                    <!-- Absender oben links auf der Rückseite (sonst kein Text) -->
+                        <div class="env-bottom"></div>
-                    <div class="envelope-sender-block" id="envelopeSenderBlock">
-                        <span class="sender-label" id="senderLabel">Absender:</span>
-                        <p class="sender-name" id="envelopeSender">Hogwarts-Schule für Hexerei und Zauberei</p>
-                        <p class="sender-location" id="envelopeSenderLocation">Schulleitung • Schloss Hogwarts</p>
                     </div>
-                </div>
 
-                <!-- Markante dreieckige V-Verschluss-Lasche -->
+                    <!-- Absender oben links (dezent, klein, wie auf einem echten Brief) -->
-                <div class="envelope-closing-flap envelope-v-flap" id="envelopeFlap">
+                    <div class="env-sender-line" id="envSenderLine">
-                    <div class="v-flap-sketch-line"></div>
+                        Abs.: Hogwarts Schule für Hexerei und Zauberei
-                </div>
+                    </div>
+
+                    <!-- Handgezeichnetes Hogwarts-Wachssiegel exakt in der Mitte -->
+                    <div class="sketched-wax-seal" id="waxSeal" onclick="breakSealAndOpenLetter()" 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>
+                    </div>
 
-                <!-- Handgezeichnetes Wachssiegel über der Klappenspitze -->
-                <div class="sketched-wax-seal" id="waxSeal" onclick="breakSealAndOpenLetter()" 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>
                 </div>
             </div>
         </div>
@@ -183,5 +158,5 @@
 {% endblock %}
 
 {% block scripts %}
-<script src="/static/js/quiz.js?v=2.8"></script>
+<script src="/static/js/quiz.js?v=2.9"></script>
 {% endblock %}