/* ============================================================ 🎨 Buchstabensalat Design mit Light & Dark Mode (Farben basierend auf deinen Screenshots) ============================================================ */ :root { /* 🌞 LIGHT MODE */ --bg: #f5f6f8; --card-bg: #ffffff; --text: #1f2937; --accent-yellow: #fdd835; --accent-blue: #0d47a1; --accent-red: #e57373; --accent-green: #50c554; --border: #e0e0e0; --button-bg: #f0f0f0; --button-text: #1f2937; --shadow: 0 6px 20px rgba(0, 0, 0, 0.08); } /* 🌙 DARK MODE (automatisch per System oder ) */ @media (prefers-color-scheme: dark) { :root { --bg: #1e2633; --card-bg: #2b3443; --text: #e4e7ec; --accent-yellow: #fdd835; --accent-blue: #90caf9; --accent-red: #ef9a9a; --accent-green: #a5d6a7; --border: #3c4656; --button-bg: #384356; --button-text: #e4e7ec; --shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } } /* ============================================ 🧱 Grundlayout ============================================ */ body { font-family: "Inter", system-ui, sans-serif; background: var(--bg); color: var(--text); display: flex; align-items: center; justify-content: center; min-height: 100vh; margin: 0; transition: background 0.3s ease, color 0.3s ease; } .game-container { background: var(--card-bg); padding: 2rem; border-radius: 20px; box-shadow: var(--shadow); text-align: center; max-width: 480px; width: 90%; margin: 1.5rem auto; transition: background 0.3s ease, color 0.3s ease; } h1 { font-size: 1.8rem; font-weight: 700; color: var(--accent-blue); margin-bottom: 0.4rem; } h2 { font-size: 1.1rem; font-weight: 600; color: var(--accent-blue); margin-top: 0.2rem; /* geringer Abstand zu h1 */ margin-bottom: 1rem; letter-spacing: 0.3px; } .hint { font-size: 1.1rem; margin-bottom: 1.5rem; } .answer-area { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1rem; min-height: 70px; padding-bottom: 0.5rem; } .answer-area .letter-tile { background: #e8f1ff; border: 2px solid #9cb8e0; color: #0d47a1; } /* ============================================ 🔠 Buchstaben-Kacheln (hellblau, gleichmäßig) ============================================ */ .letters-container { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.5rem; } .letter-tile { width: 60px; height: 60px; font-size: 1.4rem; font-weight: 600; color: #0d47a1; background-color: #e8f1ff; /* hellblau */ border: 2px solid #9cb8e0; /* etwas dunklerer Rahmen */ border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; } /* Hover- und Aktivzustand */ .letter-tile:hover { background-color: #d7e7ff; } .letter-tile:active, .letter-tile[disabled] { background-color: #7da0d8; border-color: #7da0d8; color: #0a2e7a; transform: scale(0.97); opacity: 0.85; } /* ============================================ 🔘 Buttons ============================================ */ .btn { border: none; border-radius: 6px; padding: 0.7rem 1.4rem; font-size: 1rem; cursor: pointer; background-color: #0d47a1; color: #ffffff; font-weight: 500; margin: 0.4rem; transition: background 0.2s ease; } .btn:hover { background-color: #0a3a8a; } .btn.red { background-color: #e53935; } .btn.red:hover { background-color: #d32f2f; } .btn.green { background-color: #2e7d32; color: #fff; } .btn.green:hover { background-color: #256b2a; } .hidden { display: none; } /* ============================================ 💬 Feedback ============================================ */ .feedback { margin-top: 1.2rem; font-size: 1.1rem; font-weight: 600; min-height: 1.2em; transition: all 0.3s ease; } .feedback.success { color: var(--accent-green); } .feedback.error { color: var(--accent-red); } /* ============================================ ✨ Transition für Light/Dark Mode Toggle ============================================ */ * { transition: background 0.3s ease, color 0.3s ease; } @media (prefers-color-scheme: dark) { .letter-tile { background-color: #2e3b54; border: 2px solid #506383; color: #e4e7ec; } .letter-tile:hover { background-color: #3b4e68; } .letter-tile:active, .letter-tile[disabled] { background-color: #3b4e68; border-color: #6c7da0; } .answer-area .letter-tile { background: #2a3345; border: 2px solid #5b6d8a; color: #e4e7ec; } .btn { background-color: #90caf9; color: #1e2633; } .btn:hover { background-color: #a9d6fb; } .btn.red { background-color: #ef9a9a; color: #1e2633; } .btn.red:hover { background-color: #f3b1b1; } } /* 📱 Mobile Optimierung */ @media (max-width: 600px) { .game-container { width: 92%; padding: 1.2rem 1rem; border-radius: 14px; margin: 1rem auto; } .letter-tile { width: 48px; height: 48px; font-size: 1.2rem; } .btn { padding: 0.6rem 1rem; font-size: 0.95rem; } } @media (max-width: 540px) { .game-container { width: 94%; padding: 1.2rem 0.9rem; border-radius: 14px; margin: 0.8rem auto; } .letter-tile { width: 46px; height: 46px; font-size: 1.1rem; } .btn { padding: 0.55rem 0.9rem; font-size: 0.9rem; } .hint { font-size: 1rem; } h1 { font-size: 1.4rem; } } /* ============================================ 🔙 Minimalistischer Zurück-Pfeil (flat style) ============================================ */ .back-arrow { position: fixed; top: 1.2rem; left: 1rem; font-size: 2.5rem; color: var(--accent-blue); cursor: pointer; z-index: 100; user-select: none; transition: transform 0.15s ease, color 0.2s ease; } .back-arrow::before { content: "←"; display: inline-block; line-height: 1; } .back-arrow:hover { transform: translateX(-2px); color: #0d47a1; /* dezenter Hover-Farbakzent */ } /* 🌙 Dark Mode Anpassung */ @media (prefers-color-scheme: dark) { .back-arrow { color: #e4e7ec; } .back-arrow:hover { color: #90caf9; } } /* Fortschrittszähler über der Überschrift */ .progress-top { display: flex; justify-content: flex-end; margin-bottom: -0.5rem; } .progress { font-weight: 600; color: var(--accent-blue); font-size: 1rem; margin: 0; } @media (prefers-color-scheme: dark) { .progress { color: #bbdefb; } } /* Optionaler "Flash"-Effekt bei Fortschritt */ .progress.flash { animation: flash 0.35s ease; } @keyframes flash { 0% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } /* =========================== Cookie-Banner (Light + Dark) =========================== */ :root { --cbg: #ffffff; --ctxt: #1f2937; --clink: #0d47a1; --cbtn-bg: #0d47a1; /* Primär-Button */ --cbtn-txt: #ffffff; --cbtn-alt-bg: #e5e7eb; /* Sekundär-Button */ --cbtn-alt-txt: #1f2937; --cshadow: 0 10px 30px rgba(0,0,0,0.15); --cradius: 16px; --cmaxw: 780px; --cgap: 12px; } @media (prefers-color-scheme: dark) { :root { --cbg: #12161c; --ctxt: #e5e7eb; --clink: #90caf9; --cbtn-bg: #1e88e5; --cbtn-txt: #0b1220; --cbtn-alt-bg: #1f2937; --cbtn-alt-txt: #e5e7eb; --cshadow: 0 10px 30px rgba(0,0,0,0.5); } } #cookie-banner { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(92vw, var(--cmaxw)); background: var(--cbg); color: var(--ctxt); box-shadow: var(--cshadow); border-radius: var(--cradius); padding: 16px 18px; z-index: 1000; display: grid; grid-template-columns: 1fr auto; gap: var(--cgap); align-items: center; animation: cb-slide-up 300ms ease-out both; } #cookie-banner p { margin: 0 0 6px 0; line-height: 1.45; font-size: 0.95rem; } #cookie-banner a { color: var(--clink); text-decoration: underline; text-underline-offset: 2px; } #cookie-banner .cookie-buttons { display: flex; gap: 10px; flex-wrap: wrap; justify-self: end; } #cookie-banner .cookie-buttons button { appearance: none; border: none; border-radius: 10px; font-weight: 600; padding: 10px 14px; cursor: pointer; transition: transform 0.08s ease, opacity 0.2s ease, background 0.2s ease; } /* Primär: Zustimmen */ #accept-cookies { background: var(--cbtn-bg); color: var(--cbtn-txt); } /* Sekundär: Ablehnen */ #decline-cookies { background: var(--cbtn-alt-bg); color: var(--cbtn-alt-txt); } /* Hover / Active */ #cookie-banner .cookie-buttons button:hover { transform: translateY(-1px); } #cookie-banner .cookie-buttons button:active { transform: translateY(0); } /* Tastatur-Fokus sichtbar */ #cookie-banner .cookie-buttons button:focus-visible, #cookie-banner a:focus-visible { outline: 2px solid var(--clink); outline-offset: 3px; border-radius: 12px; } /* Kompakt auf sehr kleinen Screens */ @media (max-width: 480px) { #cookie-banner { grid-template-columns: 1fr; padding: 14px; gap: 10px; } #cookie-banner .cookie-buttons { justify-self: stretch; } #cookie-banner .cookie-buttons button { flex: 1 1 auto; text-align: center; } } /* Ein-/Ausblenden via Klasse */ #cookie-banner.is-hidden { display: none !important; } /* Sanfte Eintrittsanimation (deaktivierbar per System-Einstellung) */ @keyframes cb-slide-up { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } } @media (prefers-reduced-motion: reduce) { #cookie-banner { animation: none; } } /* 🌞 LIGHT MODE */ h2 { font-size: 1.1rem; font-weight: 600; color: var(--accent-blue); /* #0d47a1 */ margin-top: 0.2rem; margin-bottom: 1rem; letter-spacing: 0.3px; text-align: center; } h2 a { color: var(--accent-blue); text-decoration: underline; text-underline-offset: 3px; /* moderner Abstand */ text-decoration-thickness: 1.5px; transition: color 0.3s ease, text-decoration-color 0.3s ease; font-weight: 600; } h2 a:hover { color: #1565c0; text-decoration-color: #1565c0; } h2 a strong { color: var(--accent-yellow); /* Gelb für „2“ */ } /* 🌙 DARK MODE */ @media (prefers-color-scheme: dark) { h2 { color: #bbdefb; /* hellblau, sanft */ } h2 a { color: #90caf9; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; text-decoration-color: #90caf9; transition: color 0.3s ease, text-decoration-color 0.3s ease; } h2 a:hover { color: #bbdefb; text-decoration-color: #bbdefb; } h2 a strong { color: #fdd835; /* Gelb bleibt im Dark Mode sichtbar */ } }