diff --git a/app/static/css/style.css b/app/static/css/style.css
index 6da826b..2832e94 100755
--- a/app/static/css/style.css
+++ b/app/static/css/style.css
@@ -1,7 +1,7 @@
 :root {
     --bg-dark: #0b0b16;
-    --bg-card: rgba(22, 24, 44, 0.85);
-    --bg-card-hover: rgba(30, 33, 60, 0.95);
+    --bg-card: rgba(20, 22, 40, 0.9);
+    --bg-card-hover: rgba(28, 31, 56, 0.95);
     --gold: #c9a86a;
     --gold-bright: #ffd700;
     --gold-soft: #e6c98f;
@@ -13,64 +13,113 @@
     --danger: #e74c3c;
     --warning: #f39c12;
     --border-gold: rgba(201, 168, 106, 0.35);
+    --header-height: 56px;
 }
 
 * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
+    -webkit-tap-highlight-color: transparent;
 }
 
 body {
     background-color: var(--bg-dark);
     background-image: 
-        radial-gradient(circle at 20% 20%, rgba(201, 168, 106, 0.08) 0%, transparent 40%),
-        radial-gradient(circle at 80% 80%, rgba(116, 0, 1, 0.08) 0%, transparent 50%);
+        radial-gradient(circle at 15% 15%, rgba(201, 168, 106, 0.08) 0%, transparent 45%),
+        radial-gradient(circle at 85% 85%, rgba(116, 0, 1, 0.08) 0%, transparent 50%);
     color: var(--text-main);
-    font-family: "Georgia", "Cinzel", "Times New Roman", serif;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Georgia", "Times New Roman", serif;
     min-height: 100vh;
     display: flex;
     flex-direction: column;
     overflow-x: hidden;
+    line-height: 1.5;
 }
 
-/* Header Audio & Navigation Bar */
-.audio-control-bar {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 10px 20px;
-    background: rgba(11, 11, 22, 0.7);
-    backdrop-filter: blur(10px);
+/* =========================================
+   HEADER & NAVIGATION (Mobile-First)
+   ========================================= */
+.site-header {
+    background: rgba(11, 11, 22, 0.85);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
     border-bottom: 1px solid var(--border-gold);
     position: sticky;
     top: 0;
-    z-index: 100;
+    z-index: 200;
+    width: 100%;
+}
+
+.header-inner {
+    max-width: 900px;
+    margin: 0 auto;
+    padding: 0 16px;
+    height: var(--header-height);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: relative;
+}
+
+.brand-link {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    text-decoration: none;
+    color: var(--gold);
+    font-weight: bold;
+    font-size: 1.15rem;
+    letter-spacing: 0.5px;
+}
+
+.brand-sparkle {
+    font-size: 1.25rem;
+}
+
+.header-right {
+    display: flex;
+    align-items: center;
+    gap: 10px;
 }
 
 .audio-btn {
     background: rgba(201, 168, 106, 0.15);
     border: 1px solid var(--gold);
     color: var(--gold-soft);
-    padding: 6px 14px;
+    padding: 6px 12px;
     border-radius: 20px;
     cursor: pointer;
     font-size: 0.85rem;
-    display: flex;
+    display: inline-flex;
     align-items: center;
     gap: 6px;
     transition: all 0.2s ease;
+    min-height: 36px;
 }
 
 .audio-btn:hover {
     background: var(--gold);
     color: #000;
-    box-shadow: 0 0 10px rgba(201, 168, 106, 0.5);
+}
+
+.menu-toggle-btn {
+    display: none;
+    background: transparent;
+    border: 1px solid var(--border-gold);
+    color: var(--gold);
+    font-size: 1.3rem;
+    width: 38px;
+    height: 38px;
+    border-radius: 8px;
+    cursor: pointer;
+    align-items: center;
+    justify-content: center;
 }
 
 .nav-links {
     display: flex;
-    gap: 15px;
+    gap: 18px;
     align-items: center;
 }
 
@@ -78,67 +127,87 @@ body {
     color: var(--text-muted);
     text-decoration: none;
     font-size: 0.9rem;
-    transition: color 0.2s ease;
+    padding: 8px 12px;
+    border-radius: 6px;
+    transition: all 0.2s ease;
+    white-space: nowrap;
 }
 
 .nav-link:hover {
-    color: var(--gold);
-    text-shadow: 0 0 5px rgba(201, 168, 106, 0.5);
+    color: var(--gold-bright);
+    background: rgba(201, 168, 106, 0.1);
 }
 
-/* Container */
+/* =========================================
+   CONTAINER & LAYOUT
+   ========================================= */
 .container {
     flex: 1;
-    max-width: 800px;
-    width: 92%;
-    margin: 30px auto;
+    max-width: 760px;
+    width: 100%;
+    margin: 20px auto;
+    padding: 0 16px;
 }
 
 .admin-wrapper {
-    max-width: 950px;
-    width: 95%;
-    margin: 30px auto;
+    max-width: 900px;
+    width: 100%;
+    margin: 20px auto;
+    padding: 0 16px;
+}
+
+.quiz-wrapper {
+    width: 100%;
+}
+
+.quiz-header {
+    text-align: center;
+    margin-bottom: 20px;
 }
 
-/* Titles */
 .glow-title {
     color: var(--gold);
-    font-size: 2rem;
-    text-align: center;
-    letter-spacing: 1px;
-    text-shadow: 0 0 12px rgba(201, 168, 106, 0.4);
-    margin-bottom: 8px;
+    font-size: clamp(1.35rem, 5vw, 2.1rem);
+    letter-spacing: 0.5px;
+    text-shadow: 0 0 14px rgba(201, 168, 106, 0.4);
+    margin-bottom: 6px;
+    word-break: break-word;
 }
 
 .subtitle {
-    text-align: center;
     color: var(--text-muted);
+    font-size: clamp(0.85rem, 3vw, 1rem);
     font-style: italic;
-    margin-bottom: 25px;
+    margin-bottom: 15px;
 }
 
-/* Card Styling */
+/* =========================================
+   CARD COMPONENT
+   ========================================= */
 .card {
     background: var(--bg-card);
     border: 1px solid var(--border-gold);
-    border-radius: 12px;
-    padding: 30px;
-    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
+    border-radius: 14px;
+    padding: clamp(16px, 4vw, 28px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.45);
     backdrop-filter: blur(8px);
-    margin-bottom: 25px;
-    transition: border-color 0.3s ease;
+    -webkit-backdrop-filter: blur(8px);
+    margin-bottom: 20px;
+    width: 100%;
 }
 
-.card:hover {
-    border-color: rgba(201, 168, 106, 0.6);
+/* =========================================
+   ENVELOPE INTRO ANIMATION
+   ========================================= */
+.intro-card {
+    text-align: center;
 }
 
-/* Envelope Intro Animation */
 .intro-envelope {
     position: relative;
-    width: 240px;
-    height: 160px;
-    margin: 20px auto 35px;
+    width: min(220px, 70vw);
+    height: min(140px, 45vw);
+    margin: 15px auto 25px;
     perspective: 800px;
 }
 
@@ -149,7 +218,7 @@ body {
     border-radius: 6px;
     border: 2px solid var(--gold);
     position: relative;
-    box-shadow: 0 10px 25px rgba(0,0,0,0.6);
+    box-shadow: 0 8px 20px rgba(0,0,0,0.5);
 }
 
 .envelope-flap {
@@ -161,7 +230,7 @@ body {
     background: #d8c9ad;
     clip-path: polygon(0 0, 50% 55%, 100% 0);
     transform-origin: top;
-    transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
     z-index: 3;
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;
@@ -172,45 +241,46 @@ body {
     top: 45%;
     left: 50%;
     transform: translate(-50%, -50%);
-    width: 44px;
-    height: 44px;
+    width: 42px;
+    height: 42px;
     background: radial-gradient(circle, #a81c1c 40%, #680d0d 100%);
     border-radius: 50%;
     border: 2px solid #500606;
     color: #ffd700;
     font-weight: bold;
-    font-size: 1.4rem;
+    font-size: 1.3rem;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 4;
     box-shadow: 0 4px 8px rgba(0,0,0,0.5);
-    transition: opacity 0.5s ease;
+    transition: opacity 0.4s ease;
 }
 
 .letter-preview {
     position: absolute;
-    bottom: 5px;
+    bottom: 4px;
     left: 50%;
     transform: translateX(-50%);
-    width: 88%;
+    width: 90%;
     height: 80%;
     background: #fffdfa;
     border: 1px solid #d4c5a9;
     border-radius: 4px;
-    padding: 10px;
+    padding: 8px;
     z-index: 2;
-    transition: transform 0.8s ease 0.3s;
+    transition: transform 0.7s ease 0.2s;
 }
 
 .letter-text {
-    font-size: 0.7rem;
+    font-size: 0.65rem;
     color: #443;
     text-align: center;
     font-style: italic;
+    line-height: 1.3;
 }
 
-/* Open Animation */
+/* Open state */
 .envelope-opened .envelope-flap {
     transform: rotateX(180deg);
     z-index: 1;
@@ -222,32 +292,34 @@ body {
 }
 
 .envelope-opened .letter-preview {
-    transform: translate(-50%, -40px);
-}
-
-.intro-content {
-    text-align: center;
+    transform: translate(-50%, -30px);
 }
 
 .intro-text {
-    font-size: 1.15rem;
+    font-size: clamp(0.95rem, 3.5vw, 1.15rem);
     line-height: 1.6;
-    margin-bottom: 25px;
+    margin-bottom: 20px;
     color: var(--text-muted);
 }
 
-/* Buttons */
+/* =========================================
+   BUTTONS
+   ========================================= */
 .btn {
-    display: inline-block;
-    padding: 12px 24px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 12px 22px;
     border-radius: 8px;
-    font-size: 1rem;
+    font-size: 0.95rem;
     font-weight: bold;
     cursor: pointer;
     text-decoration: none;
     transition: all 0.2s ease;
     border: none;
     font-family: inherit;
+    min-height: 46px;
+    touch-action: manipulation;
 }
 
 .btn-primary {
@@ -256,7 +328,7 @@ body {
     box-shadow: 0 4px 15px rgba(201, 168, 106, 0.3);
 }
 
-.btn-primary:hover {
+.btn-primary:hover:not(:disabled) {
     background: linear-gradient(135deg, #ffd700 0%, var(--gold) 100%);
     box-shadow: 0 6px 20px rgba(201, 168, 106, 0.5);
     transform: translateY(-2px);
@@ -268,7 +340,7 @@ body {
     border: 1px solid var(--gold);
 }
 
-.btn-secondary:hover {
+.btn-secondary:hover:not(:disabled) {
     background: rgba(201, 168, 106, 0.2);
 }
 
@@ -278,7 +350,7 @@ body {
     border: 1px solid var(--danger);
 }
 
-.btn-danger:hover {
+.btn-danger:hover:not(:disabled) {
     background: var(--danger);
     color: #fff;
 }
@@ -289,39 +361,51 @@ body {
     border: 1px solid var(--success);
 }
 
-.btn-success:hover {
+.btn-success:hover:not(:disabled) {
     background: var(--success);
     color: #000;
 }
 
 .btn-large {
-    font-size: 1.15rem;
-    padding: 14px 32px;
+    font-size: 1.05rem;
+    padding: 14px 28px;
+    min-height: 50px;
 }
 
 .btn-sm {
     font-size: 0.85rem;
-    padding: 6px 12px;
+    padding: 8px 14px;
+    min-height: 38px;
 }
 
 .btn-group {
     display: flex;
-    gap: 12px;
+    gap: 10px;
     justify-content: center;
-    margin-top: 20px;
-    flex-wrap: wrap;
+    margin-top: 18px;
+    width: 100%;
 }
 
-/* Status & Progress Bar */
+.btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    transform: none !important;
+}
+
+/* =========================================
+   STATUS & PROGRESS
+   ========================================= */
 .status-panel {
-    margin-bottom: 20px;
+    margin-bottom: 16px;
+    width: 100%;
 }
 
 .progress-info {
     display: flex;
     justify-content: space-between;
+    align-items: center;
     margin-bottom: 8px;
-    font-size: 0.95rem;
+    font-size: clamp(0.8rem, 3vw, 0.95rem);
 }
 
 .points-badge {
@@ -332,10 +416,10 @@ body {
 
 .progress-container {
     width: 100%;
-    height: 12px;
+    height: 10px;
     background: rgba(255, 255, 255, 0.08);
     border: 1px solid var(--border-gold);
-    border-radius: 10px;
+    border-radius: 8px;
     overflow: hidden;
 }
 
@@ -343,26 +427,34 @@ body {
     height: 100%;
     width: 0%;
     background: linear-gradient(90deg, var(--gold) 0%, #ffd700 100%);
-    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
-    transition: width 0.4s ease;
+    box-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
+    transition: width 0.35s ease;
+}
+
+/* =========================================
+   QUESTION CARD & ANSWERS
+   ========================================= */
+.question-card {
+    text-align: center;
 }
 
-/* Question Card */
 .question-meta {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 15px;
+    margin-bottom: 14px;
+    gap: 8px;
 }
 
 .badge {
     padding: 4px 10px;
     border-radius: 12px;
-    font-size: 0.8rem;
+    font-size: 0.75rem;
     font-weight: bold;
     background: rgba(201, 168, 106, 0.15);
     border: 1px solid var(--gold);
     color: var(--gold-soft);
+    white-space: nowrap;
 }
 
 .badge-warning {
@@ -390,37 +482,42 @@ body {
 }
 
 .attempt-badge {
-    font-size: 0.85rem;
+    font-size: 0.8rem;
     color: var(--text-muted);
+    white-space: nowrap;
 }
 
 .question-text {
-    font-size: 1.4rem;
-    line-height: 1.5;
+    font-size: clamp(1.15rem, 4.5vw, 1.45rem);
+    line-height: 1.4;
     text-align: center;
-    margin: 20px 0 25px;
+    margin: 15px 0 20px;
     color: var(--text-main);
+    word-break: break-word;
 }
 
+/* Freitext Input */
 .answer-form {
     display: flex;
     flex-direction: column;
     align-items: center;
+    width: 100%;
 }
 
 .input-answer {
     width: 100%;
-    max-width: 420px;
-    padding: 14px 18px;
-    font-size: 1.15rem;
+    max-width: 450px;
+    padding: 14px;
+    font-size: 16px; /* Prevents iOS auto-zoom */
     text-align: center;
     border-radius: 8px;
     border: 2px solid var(--border-gold);
-    background: rgba(0, 0, 0, 0.3);
+    background: rgba(0, 0, 0, 0.35);
     color: var(--text-main);
     outline: none;
     transition: all 0.2s ease;
     font-family: inherit;
+    min-height: 48px;
 }
 
 .input-answer:focus {
@@ -428,48 +525,47 @@ body {
     box-shadow: 0 0 12px rgba(201, 168, 106, 0.4);
 }
 
-/* Multiple Choice Styles */
+/* Multiple Choice Grid */
 .choice-group {
     width: 100%;
-    margin-top: 10px;
+    margin-top: 5px;
 }
 
 .choice-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-    gap: 14px;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 12px;
     width: 100%;
-    max-width: 650px;
-    margin: 0 auto;
 }
 
 .choice-btn {
     background: rgba(255, 255, 255, 0.05);
     border: 2px solid var(--border-gold);
     border-radius: 10px;
-    padding: 14px 18px;
+    padding: 12px 14px;
     color: var(--text-main);
-    font-size: 1.05rem;
+    font-size: clamp(0.9rem, 3.5vw, 1.05rem);
     font-family: inherit;
     cursor: pointer;
     text-align: left;
     display: flex;
     align-items: center;
-    gap: 12px;
-    transition: all 0.25s ease;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    gap: 10px;
+    transition: all 0.2s ease;
+    min-height: 52px;
+    width: 100%;
+    word-break: break-word;
+    touch-action: manipulation;
 }
 
 .choice-btn:hover:not(:disabled) {
-    background: rgba(201, 168, 106, 0.18);
+    background: rgba(201, 168, 106, 0.2);
     border-color: var(--gold);
-    box-shadow: 0 0 15px rgba(201, 168, 106, 0.4);
     transform: translateY(-2px);
 }
 
-.choice-btn:disabled {
-    cursor: not-allowed;
-    opacity: 0.7;
+.choice-btn:active:not(:disabled) {
+    transform: scale(0.98);
 }
 
 .choice-letter {
@@ -483,7 +579,7 @@ body {
     border-radius: 50%;
     color: var(--gold-bright);
     font-weight: bold;
-    font-size: 0.9rem;
+    font-size: 0.85rem;
     flex-shrink: 0;
 }
 
@@ -500,38 +596,40 @@ body {
     background: rgba(46, 204, 113, 0.25) !important;
     border-color: #2ecc71 !important;
     color: #55efc4 !important;
-    box-shadow: 0 0 15px rgba(46, 204, 113, 0.6) !important;
+    box-shadow: 0 0 12px rgba(46, 204, 113, 0.6) !important;
 }
 
 .choice-wrong {
     background: rgba(231, 76, 60, 0.25) !important;
     border-color: #e74c3c !important;
     color: #ff7675 !important;
-    box-shadow: 0 0 15px rgba(231, 76, 60, 0.5) !important;
+    box-shadow: 0 0 12px rgba(231, 76, 60, 0.5) !important;
 }
 
 .hint-box {
-    margin-top: 20px;
-    padding: 15px;
+    margin-top: 15px;
+    padding: 12px 14px;
     border-radius: 8px;
     background: rgba(201, 168, 106, 0.1);
     border-left: 4px solid var(--gold);
-    font-size: 0.95rem;
+    font-size: 0.9rem;
     color: var(--gold-soft);
     text-align: left;
+    word-break: break-word;
 }
 
 .feedback-box {
-    margin-top: 20px;
-    font-size: 1.1rem;
+    margin-top: 15px;
+    font-size: clamp(0.95rem, 3.5vw, 1.1rem);
     text-align: center;
-    min-height: 30px;
+    min-height: 28px;
     font-weight: bold;
+    word-break: break-word;
 }
 
 .feedback-correct {
     color: var(--success);
-    text-shadow: 0 0 10px rgba(46, 204, 113, 0.4);
+    text-shadow: 0 0 8px rgba(46, 204, 113, 0.4);
 }
 
 .feedback-wrong {
@@ -540,18 +638,21 @@ body {
 
 .feedback-revealed {
     color: var(--warning);
-    font-size: 0.95rem;
+    font-size: 0.9rem;
+    margin-top: 4px;
 }
 
-/* Animations */
+/* =========================================
+   ANIMATIONS
+   ========================================= */
 .sparkle-effect {
     animation: sparkle-glow 0.8s ease forwards;
 }
 
 @keyframes sparkle-glow {
     0% { box-shadow: 0 0 5px rgba(255, 215, 0, 0.2); }
-    50% { box-shadow: 0 0 30px rgba(255, 215, 0, 0.8), inset 0 0 20px rgba(255, 215, 0, 0.4); border-color: #ffd700; }
-    100% { box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); }
+    50% { box-shadow: 0 0 25px rgba(255, 215, 0, 0.8), inset 0 0 15px rgba(255, 215, 0, 0.4); border-color: #ffd700; }
+    100% { box-shadow: 0 8px 25px rgba(0, 0, 0, 0.45); }
 }
 
 .shake-effect {
@@ -560,11 +661,13 @@ body {
 
 @keyframes shake {
     0%, 100% { transform: translateX(0); }
-    20%, 60% { transform: translateX(-8px); }
-    40%, 80% { transform: translateX(8px); }
+    20%, 60% { transform: translateX(-6px); }
+    40%, 80% { transform: translateX(6px); }
 }
 
-/* Finale Page */
+/* =========================================
+   FINALE PAGE
+   ========================================= */
 .finale-card {
     text-align: center;
 }
@@ -573,103 +676,111 @@ body {
     display: flex;
     justify-content: center;
     align-items: center;
-    gap: 15px;
-    margin-bottom: 20px;
+    gap: 10px;
+    margin-bottom: 15px;
 }
 
 .sparkle-icon {
-    font-size: 2rem;
+    font-size: 1.5rem;
 }
 
 .score-banner {
     background: rgba(201, 168, 106, 0.1);
     border: 1px dashed var(--gold);
     border-radius: 8px;
-    padding: 15px;
-    margin-bottom: 25px;
+    padding: 14px;
+    margin-bottom: 20px;
 }
 
 .score-highlight {
-    font-size: 1.25rem;
+    font-size: clamp(1rem, 4vw, 1.25rem);
 }
 
 .gold-text {
     color: var(--gold-bright);
     font-weight: bold;
-    font-size: 1.5rem;
+    font-size: 1.35rem;
 }
 
 .reward-box {
-    background: rgba(0, 0, 0, 0.25);
+    background: rgba(0, 0, 0, 0.3);
     border-radius: 10px;
-    padding: 25px;
-    margin-bottom: 25px;
+    padding: 18px 14px;
+    margin-bottom: 20px;
     border-left: 4px solid var(--gold);
+    text-align: left;
 }
 
 .reward-box h2 {
     color: var(--gold-soft);
-    font-size: 1.4rem;
-    margin-bottom: 15px;
+    font-size: clamp(1.1rem, 4vw, 1.35rem);
+    margin-bottom: 12px;
 }
 
 .reward-description {
-    font-size: 1.1rem;
+    font-size: clamp(0.95rem, 3.5vw, 1.05rem);
     line-height: 1.6;
-    margin-bottom: 15px;
+    margin-bottom: 12px;
     color: var(--text-main);
 }
 
 .love-note {
     font-style: italic;
     color: var(--gold);
-    font-size: 1.15rem;
+    font-size: 1rem;
 }
 
-/* Forms & Inputs */
+/* =========================================
+   FORMS & INPUTS
+   ========================================= */
 .magic-form {
     display: flex;
     flex-direction: column;
-    gap: 18px;
+    gap: 16px;
     text-align: left;
+    width: 100%;
 }
 
 .form-group {
     display: flex;
     flex-direction: column;
     gap: 6px;
+    width: 100%;
 }
 
 .form-group label {
-    font-size: 0.95rem;
+    font-size: 0.9rem;
     font-weight: bold;
     color: var(--gold-soft);
 }
 
 .input-text, .textarea, select.input-text {
-    padding: 12px 15px;
-    border-radius: 6px;
+    padding: 12px 14px;
+    border-radius: 8px;
     border: 1px solid var(--border-gold);
     background: rgba(0, 0, 0, 0.4);
     color: var(--text-main);
-    font-size: 1rem;
+    font-size: 16px; /* Prevents auto zoom */
     font-family: inherit;
     outline: none;
     width: 100%;
+    min-height: 46px;
 }
 
 .input-text:focus, .textarea:focus {
     border-color: var(--gold);
-    box-shadow: 0 0 10px rgba(201, 168, 106, 0.3);
+    box-shadow: 0 0 8px rgba(201, 168, 106, 0.3);
 }
 
 .input-text-sm {
-    padding: 6px 10px;
-    border-radius: 4px;
+    padding: 8px 10px;
+    border-radius: 6px;
     border: 1px solid var(--border-gold);
     background: rgba(0,0,0,0.3);
     color: var(--text-main);
-    font-size: 0.9rem;
+    font-size: 15px;
+    min-height: 38px;
+    width: 100%;
 }
 
 .field-help {
@@ -680,10 +791,10 @@ body {
 .info-alert {
     background: rgba(41, 128, 185, 0.15);
     border-left: 4px solid #3498db;
-    padding: 15px;
-    border-radius: 6px;
-    margin-bottom: 25px;
-    font-size: 0.95rem;
+    padding: 14px;
+    border-radius: 8px;
+    margin-bottom: 20px;
+    font-size: 0.9rem;
     line-height: 1.5;
 }
 
@@ -693,53 +804,62 @@ body {
     color: #ff7675;
     padding: 12px;
     border-radius: 6px;
-    margin-bottom: 20px;
+    margin-bottom: 16px;
     text-align: center;
+    font-size: 0.9rem;
 }
 
-/* Admin Specific */
+/* =========================================
+   ADMIN COCKPIT (Mobile Responsive)
+   ========================================= */
 .admin-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 25px;
+    margin-bottom: 20px;
     flex-wrap: wrap;
-    gap: 15px;
+    gap: 12px;
 }
 
 .admin-top-actions {
     display: flex;
-    gap: 10px;
+    gap: 8px;
 }
 
+/* Horizontal Scrollable Tabs on Mobile */
 .tabs-nav {
     display: flex;
-    gap: 8px;
+    gap: 6px;
     border-bottom: 1px solid var(--border-gold);
-    margin-bottom: 25px;
-    flex-wrap: wrap;
+    margin-bottom: 20px;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none; /* Firefox */
+    padding-bottom: 2px;
+}
+
+.tabs-nav::-webkit-scrollbar {
+    display: none; /* Chrome/Safari */
 }
 
 .tab-btn {
     background: rgba(255, 255, 255, 0.05);
     border: none;
     color: var(--text-muted);
-    padding: 12px 18px;
+    padding: 10px 14px;
     border-top-left-radius: 8px;
     border-top-right-radius: 8px;
     cursor: pointer;
-    font-size: 0.95rem;
+    font-size: 0.85rem;
     font-family: inherit;
     font-weight: bold;
-    display: flex;
+    display: inline-flex;
     align-items: center;
-    gap: 8px;
-    transition: all 0.2s ease;
-}
-
-.tab-btn:hover {
-    color: var(--text-main);
-    background: rgba(255, 255, 255, 0.1);
+    gap: 6px;
+    white-space: nowrap;
+    flex-shrink: 0;
+    min-height: 42px;
+    touch-action: manipulation;
 }
 
 .tab-btn.active {
@@ -758,15 +878,18 @@ body {
 }
 
 .question-admin-card {
-    margin-bottom: 15px;
+    margin-bottom: 14px;
+    padding: 16px;
 }
 
 .q-header {
     display: flex;
     justify-content: space-between;
-    align-items: center;
+    align-items: flex-start;
     margin-bottom: 10px;
-    font-size: 0.85rem;
+    font-size: 0.8rem;
+    flex-wrap: wrap;
+    gap: 8px;
 }
 
 .highlight-answer {
@@ -775,11 +898,12 @@ body {
     background: rgba(255, 215, 0, 0.1);
     padding: 2px 6px;
     border-radius: 4px;
+    word-break: break-word;
 }
 
 .test-matcher-box {
-    margin-top: 15px;
-    padding: 12px;
+    margin-top: 12px;
+    padding: 10px;
     background: rgba(0, 0, 0, 0.25);
     border-radius: 6px;
     border: 1px solid rgba(255, 255, 255, 0.1);
@@ -787,40 +911,43 @@ body {
 
 .test-input-group {
     display: flex;
-    gap: 8px;
+    gap: 6px;
     margin-top: 6px;
 }
 
 .test-result-feedback {
     margin-top: 8px;
-    font-size: 0.9rem;
+    font-size: 0.85rem;
+    word-break: break-word;
 }
 
 .q-actions {
     display: flex;
-    gap: 10px;
-    margin-top: 15px;
+    gap: 8px;
+    margin-top: 14px;
     flex-wrap: wrap;
 }
 
 .inline-edit-form {
-    margin-top: 15px;
-    padding-top: 15px;
+    margin-top: 14px;
+    padding-top: 14px;
     border-top: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .empty-state {
     text-align: center;
-    padding: 40px;
+    padding: 30px 10px;
     color: var(--text-muted);
 }
 
-/* Footer */
+/* =========================================
+   FOOTER
+   ========================================= */
 .footer {
     text-align: center;
-    padding: 20px;
+    padding: 16px;
     color: var(--text-muted);
-    font-size: 0.85rem;
+    font-size: 0.75rem;
     border-top: 1px solid rgba(255, 255, 255, 0.05);
     margin-top: auto;
 }
@@ -829,23 +956,103 @@ body {
     display: none !important;
 }
 
-@media (max-width: 600px) {
-    .audio-control-bar {
+/* =========================================
+   MOBILE RESPONSIVENESS (max-width: 640px)
+   ========================================= */
+@media (max-width: 640px) {
+    .container {
+        margin: 10px auto 25px;
+        padding: 0 10px;
+    }
+
+    .admin-wrapper {
+        margin: 10px auto 25px;
+        padding: 0 10px;
+    }
+
+    .card {
+        padding: 16px 12px;
+        border-radius: 12px;
+    }
+
+    /* Mobile Hamburger Menu */
+    .menu-toggle-btn {
+        display: inline-flex;
+    }
+
+    .nav-links {
+        display: none;
+        position: absolute;
+        top: var(--header-height);
+        left: 0;
+        right: 0;
+        background: rgba(11, 11, 22, 0.98);
+        border-bottom: 2px solid var(--gold);
         flex-direction: column;
+        padding: 14px 16px;
+        gap: 8px;
+        box-shadow: 0 15px 30px rgba(0,0,0,0.8);
+    }
+
+    .nav-links.nav-open {
+        display: flex;
+    }
+
+    .nav-link {
+        width: 100%;
+        padding: 12px 14px;
+        font-size: 1rem;
+        background: rgba(255, 255, 255, 0.04);
+        border: 1px solid rgba(201, 168, 106, 0.2);
+    }
+
+    .audio-label {
+        display: none; /* Show only 🔇/🔊 on small phones */
+    }
+
+    .audio-btn {
+        padding: 6px 10px;
+    }
+
+    /* Quiz Question layout */
+    .choice-grid {
+        grid-template-columns: 1fr; /* Single column on mobile */
         gap: 10px;
     }
-    .glow-title {
-        font-size: 1.5rem;
-    }
-    .card {
-        padding: 20px 15px;
+
+    .choice-btn {
+        min-height: 48px;
+        padding: 10px 12px;
+        font-size: 0.95rem;
     }
+
     .btn-group {
         flex-direction: column;
+    }
+
+    .btn-group .btn {
         width: 100%;
     }
-    .btn {
+
+    .test-input-group {
+        flex-direction: column;
+    }
+
+    .test-input-group .btn {
         width: 100%;
+    }
+
+    .q-actions .btn {
+        flex: 1 1 100%;
+    }
+
+    .admin-header {
+        flex-direction: column;
+        align-items: stretch;
         text-align: center;
     }
+
+    .admin-top-actions {
+        justify-content: center;
+    }
 }
diff --git a/app/templates/base.html b/app/templates/base.html
index cfdc688..ce012b1 100755
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -2,7 +2,7 @@
 <html lang="de">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <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">
@@ -11,17 +11,31 @@
 <body>
     <audio id="bgm" src="/static/audio/music.mp3" loop preload="auto"></audio>
 
-    <div class="audio-control-bar">
-        <button id="audioToggle" class="audio-btn" title="Musik an/aus" onclick="toggleAudio()">
-            <span id="audioIcon">🔇</span>
-            <span id="audioText">Musik: Aus</span>
-        </button>
-        <div class="nav-links">
-            <a href="/" class="nav-link">✨ Zum Quiz</a>
-            <a href="/vorschlag" class="nav-link">✍️ Frage einreichen</a>
-            <a href="/admin" class="nav-link">🔒 Zaubereiministerium (Admin)</a>
+    <header class="site-header">
+        <div class="header-inner">
+            <a href="/" class="brand-link">
+                <span class="brand-sparkle">⚡</span>
+                <span class="brand-title">Hogwarts Quiz</span>
+            </a>
+
+            <div class="header-right">
+                <button id="audioToggle" class="audio-btn" title="Musik an/aus" onclick="toggleAudio()">
+                    <span id="audioIcon">🔇</span>
+                    <span id="audioText" class="audio-label">Musik: Aus</span>
+                </button>
+
+                <button id="menuToggle" class="menu-toggle-btn" aria-label="Menü öffnen" onclick="toggleMobileMenu()">
+                    <span id="menuIcon">☰</span>
+                </button>
+            </div>
+
+            <nav id="navLinks" class="nav-links">
+                <a href="/" class="nav-link" onclick="closeMobileMenu()">✨ Zum Quiz</a>
+                <a href="/vorschlag" class="nav-link" onclick="closeMobileMenu()">✍️ Frage einreichen</a>
+                <a href="/admin" class="nav-link" onclick="closeMobileMenu()">🔒 Admin-Cockpit</a>
+            </nav>
         </div>
-    </div>
+    </header>
 
     <main class="container">
         {% block content %}{% endblock %}
@@ -35,6 +49,8 @@
         const bgm = document.getElementById("bgm");
         const audioIcon = document.getElementById("audioIcon");
         const audioText = document.getElementById("audioText");
+        const navLinks = document.getElementById("navLinks");
+        const menuIcon = document.getElementById("menuIcon");
 
         function toggleAudio() {
             if (bgm.paused) {
@@ -53,6 +69,16 @@
             }
         }
 
+        function toggleMobileMenu() {
+            const isOpen = navLinks.classList.toggle("nav-open");
+            menuIcon.innerText = isOpen ? "✕" : "☰";
+        }
+
+        function closeMobileMenu() {
+            navLinks.classList.remove("nav-open");
+            menuIcon.innerText = "☰";
+        }
+
         // Auto-resume audio if previously enabled
         document.addEventListener("click", function initAudioOnInteraction() {
             if (localStorage.getItem("bgm_enabled") === "true" && bgm.paused) {