/* ============================================================ GE-LERNWERKSTATT — Design Theme Dark Stadion (default) + Light Klassenzimmer (optional). Theme-Switch via [data-theme="..."] auf . Alle Design-Werte als CSS Custom Properties. ============================================================ */ /* ===== SHARED TOKENS (Themen-unabhängig) ===== */ :root { /* --- Farben: Akzente --- */ --ge-green: #4caf50; --ge-green-light: #e8f5e9; --ge-orange: #ff9800; --ge-orange-light: #fff3e0; --ge-red: #e53935; --ge-red-light: #ffebee; --ge-blue: #1565c0; --ge-blue-light: #e3f2fd; --ge-purple: #7b1fa2; --ge-purple-light: #f3e5f5; --ge-gold: #f9a825; --ge-gold-light: #fff8e1; /* --- Stufen-Farben (A = leicht, B = mittel, C = schwer) --- */ --ge-stufe-a: #4caf50; --ge-stufe-a-light: #e8f5e9; --ge-stufe-b: #ff9800; --ge-stufe-b-light: #fff3e0; --ge-stufe-c: #e53935; --ge-stufe-c-light: #ffebee; /* --- Feedback-Farben --- */ --ge-correct-bg: #e8f5e9; --ge-correct-text: #2e7d32; --ge-correct-border: #a5d6a7; --ge-wrong-bg: #fff8e1; --ge-wrong-text: #e65100; --ge-wrong-border: #ffcc80; /* --- Typografie --- */ --ge-font: 'Manrope', sans-serif; --ge-font-display: 'Bricolage Grotesque', sans-serif; --ge-size-xs: 12px; --ge-size-sm: 14px; --ge-size-base: 18px; --ge-size-md: 20px; --ge-size-lg: 24px; --ge-size-xl: 28px; --ge-size-2xl: 36px; --ge-weight-regular: 400; --ge-weight-semibold: 600; --ge-weight-bold: 700; --ge-weight-extrabold:800; --ge-line-height: 1.5; /* --- Layout --- */ --ge-radius: 16px; --ge-radius-sm: 10px; --ge-radius-full: 999px; --ge-gap: 16px; --ge-pad: 20px; --ge-max-width: 600px; --ge-header-height: 64px; /* --- Touch-Targets --- */ --ge-touch-min: 80px; --ge-touch-option: 100px; /* --- Schatten --- */ --ge-shadow-sm: 0 1px 4px rgba(0,0,0,.08); --ge-shadow-md: 0 4px 16px rgba(0,0,0,.10); --ge-shadow-lg: 0 8px 32px rgba(0,0,0,.12); /* --- Übergänge --- */ --ge-transition: 200ms ease; /* --- Pitch-Feld (themen-unabhängig) --- */ --ge-pitch-bg-a: #145228; --ge-pitch-bg-b: #187834; --ge-pitch-line: rgba(255,255,255,.75); --ge-zone-idle: rgba(255,255,255,.40); --ge-zone-hover: rgba(255,255,255,.55); --ge-zone-correct: rgba(76,175,80,.6); --ge-zone-wrong: rgba(229,57,53,.5); } /* ===== LIGHT KLASSENZIMMER (Default) ===== */ :root, [data-theme="light"] { --ge-bg: #fafaf5; --ge-bg-card: #ffffff; --ge-bg-card-hover: #f0f0eb; --ge-bg-header: rgba(26,58,26,.85); --ge-text: #2d2d2d; --ge-text-muted: #666666; --ge-border: rgba(0,0,0,.08); --ge-track: rgba(0,0,0,.08); --ge-shadow-card: 0 8px 24px rgba(26,58,26,.06); --ge-shadow-card-hover: 0 12px 32px rgba(26,58,26,.10); --ge-pitch-deco-opacity: .15; } /* ===== DARK STADION (Optional) ===== */ [data-theme="dark"] { --ge-bg: #0c2010; --ge-bg-card: #1a3a1a; --ge-bg-card-hover: #244b1f; --ge-bg-header: rgba(12,32,16,.85); --ge-text: #e0f0e0; --ge-text-muted: #94f990; --ge-border: rgba(255,255,255,.10); --ge-track: rgba(255,255,255,.12); --ge-shadow-card: 0 8px 24px rgba(0,0,0,.35); --ge-shadow-card-hover: 0 12px 32px rgba(0,0,0,.45); --ge-pitch-deco-opacity: .35; } /* ===== BASE RESET ===== */ .ge-body, .ge-body * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } .ge-body { font-family: var(--ge-font); font-size: var(--ge-size-base); font-weight: var(--ge-weight-regular); line-height: var(--ge-line-height); color: var(--ge-text); background: var(--ge-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; min-height: 100dvh; } .ge-body a { color: inherit; text-decoration: none; } .ge-body img, .ge-body svg { display: block; max-width: 100%; } .ge-body button { font-family: inherit; cursor: pointer; border: none; background: none; } /* ===== HEADER ===== */ .ge-header { position: sticky; top: 0; z-index: 100; height: var(--ge-header-height); background: var(--ge-bg-header); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); display: flex; align-items: center; gap: var(--ge-gap); padding: 0 var(--ge-pad); box-shadow: 0 2px 12px rgba(0,0,0,.18); } .ge-header-back { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--ge-radius-sm); color: rgba(255,255,255,.85); font-size: var(--ge-size-lg); flex-shrink: 0; transition: background var(--ge-transition); } .ge-header-back:hover, .ge-header-back:focus-visible { background: rgba(255,255,255,.12); outline: 2px solid rgba(255,255,255,.4); } .ge-header-title { flex: 1; font-family: var(--ge-font-display); font-size: var(--ge-size-md); font-weight: var(--ge-weight-bold); color: #ffffff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ge-header-subtitle { font-family: var(--ge-font); font-size: var(--ge-size-sm); font-weight: var(--ge-weight-regular); color: rgba(255,255,255,.6); display: block; margin-top: 2px; } .ge-header-tts { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--ge-radius-sm); color: rgba(255,255,255,.85); font-size: var(--ge-size-lg); flex-shrink: 0; transition: background var(--ge-transition); } .ge-header-tts:hover, .ge-header-tts:focus-visible { background: rgba(255,255,255,.12); outline: 2px solid rgba(255,255,255,.4); } .ge-header-tts.active { color: var(--ge-gold); } /* ===== CONTAINER ===== */ .ge-container { max-width: var(--ge-max-width); margin: 0 auto; padding: var(--ge-pad); } .ge-container--flush { padding-left: 0; padding-right: 0; } /* ===== GRIDS ===== */ .ge-grid { display: grid; gap: var(--ge-gap); } .ge-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ge-gap); } .ge-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ge-gap); } @media (max-width: 400px) { .ge-grid-3 { grid-template-columns: repeat(2, 1fr); } } /* ===== CARD ===== */ .ge-card { background: var(--ge-bg-card); border-radius: var(--ge-radius); padding: 24px var(--ge-pad); box-shadow: var(--ge-shadow-card); border: 3px solid transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; min-height: 140px; cursor: pointer; transition: box-shadow var(--ge-transition), border-color var(--ge-transition), transform 150ms ease; -webkit-user-select: none; user-select: none; } .ge-card:hover, .ge-card:focus-visible { box-shadow: var(--ge-shadow-card-hover); border-color: rgba(76,175,80,.35); outline: none; } .ge-card:active { transform: scale(0.95); box-shadow: var(--ge-shadow-sm); } /* Tier-Hintergründe via data-color */ .ge-card[data-color="green"] { background: var(--ge-green-light); border-color: var(--ge-green); } .ge-card[data-color="orange"] { background: var(--ge-orange-light); border-color: var(--ge-orange); } .ge-card[data-color="red"] { background: var(--ge-red-light); border-color: var(--ge-red); } .ge-card[data-color="blue"] { background: var(--ge-blue-light); border-color: var(--ge-blue); } .ge-card[data-color="purple"] { background: var(--ge-purple-light); border-color: var(--ge-purple); } .ge-card[data-color="gold"] { background: var(--ge-gold-light); border-color: var(--ge-gold); } .ge-card[data-color="stufe-a"] { background: var(--ge-stufe-a-light); border-color: var(--ge-stufe-a); } .ge-card[data-color="stufe-b"] { background: var(--ge-stufe-b-light); border-color: var(--ge-stufe-b); } .ge-card[data-color="stufe-c"] { background: var(--ge-stufe-c-light); border-color: var(--ge-stufe-c); } .ge-card-icon { font-size: 56px; line-height: 1; } .ge-card-label { font-family: var(--ge-font-display); font-size: var(--ge-size-md); font-weight: var(--ge-weight-bold); color: var(--ge-text); } .ge-card-sub { font-size: var(--ge-size-sm); color: var(--ge-text-muted); line-height: 1.3; } /* ===== QUIZ OPTION ===== */ .ge-option { background: var(--ge-bg-card); border-radius: var(--ge-radius); padding: var(--ge-pad); box-shadow: var(--ge-shadow-sm); border: 3px solid transparent; display: flex; align-items: center; gap: var(--ge-gap); min-height: var(--ge-touch-option); width: 100%; cursor: pointer; text-align: left; font-size: var(--ge-size-base); font-weight: var(--ge-weight-semibold); color: var(--ge-text); transition: box-shadow var(--ge-transition), border-color var(--ge-transition), transform var(--ge-transition); -webkit-user-select: none; user-select: none; } .ge-option:hover, .ge-option:focus-visible { border-color: var(--ge-green); box-shadow: var(--ge-shadow-md); outline: none; } .ge-option:active { transform: scale(0.98); } .ge-option.correct { background: var(--ge-correct-bg); border-color: var(--ge-correct-text); color: var(--ge-correct-text); animation: ge-pop 0.3s ease; } .ge-option.wrong { background: var(--ge-wrong-bg); border-color: var(--ge-wrong-border); color: var(--ge-wrong-text); animation: ge-shake 0.4s ease; } .ge-option-letter { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--ge-radius-full); background: var(--ge-track); font-family: var(--ge-font-display); font-size: var(--ge-size-md); font-weight: var(--ge-weight-extrabold); color: var(--ge-text); flex-shrink: 0; } .ge-option.correct .ge-option-letter { background: var(--ge-correct-text); color: #fff; } .ge-option.wrong .ge-option-letter { background: var(--ge-wrong-text); color: #fff; } .ge-option-text { flex: 1; line-height: var(--ge-line-height); } /* ===== FRAGE-BOX ===== */ .ge-question-box { background: var(--ge-bg-card); border-radius: var(--ge-radius); padding: var(--ge-pad); box-shadow: var(--ge-shadow-sm); margin-bottom: var(--ge-gap); } .ge-question-label { font-size: var(--ge-size-xs); font-weight: var(--ge-weight-bold); letter-spacing: 2px; text-transform: uppercase; color: var(--ge-text-muted); margin-bottom: 8px; } .ge-question-text { font-family: var(--ge-font-display); font-size: var(--ge-size-lg); font-weight: var(--ge-weight-bold); color: var(--ge-text); line-height: 1.3; } @media (max-width: 400px) { .ge-question-text { font-size: var(--ge-size-md); } } /* ===== FEEDBACK OVERLAY ===== */ .ge-feedback { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.55); display: flex; align-items: flex-end; justify-content: center; padding: var(--ge-pad); opacity: 0; pointer-events: none; transition: opacity var(--ge-transition); } .ge-feedback.visible { opacity: 1; pointer-events: auto; } .ge-feedback-box { width: 100%; max-width: var(--ge-max-width); border-radius: var(--ge-radius); padding: var(--ge-pad); box-shadow: var(--ge-shadow-lg); display: flex; flex-direction: column; gap: 12px; transform: translateY(40px); transition: transform var(--ge-transition); } .ge-feedback.visible .ge-feedback-box { transform: translateY(0); } .ge-feedback-box.correct { background: var(--ge-correct-bg); border: 3px solid var(--ge-correct-text); } .ge-feedback-box.wrong { background: var(--ge-wrong-bg); border: 3px solid var(--ge-wrong-border); } .ge-feedback-icon { font-size: 56px; line-height: 1; } .ge-feedback-title { font-family: var(--ge-font-display); font-size: var(--ge-size-xl); font-weight: var(--ge-weight-extrabold); color: var(--ge-text); } .ge-feedback-box.correct .ge-feedback-title { color: var(--ge-correct-text); } .ge-feedback-box.wrong .ge-feedback-title { color: var(--ge-wrong-text); } .ge-feedback-explanation { font-size: var(--ge-size-base); color: var(--ge-text); line-height: var(--ge-line-height); } .ge-feedback-btn { display: flex; align-items: center; justify-content: center; min-height: var(--ge-touch-min); border-radius: var(--ge-radius); font-family: var(--ge-font-display); font-size: var(--ge-size-md); font-weight: var(--ge-weight-extrabold); color: #ffffff; background: var(--ge-green); border: none; cursor: pointer; width: 100%; transition: filter var(--ge-transition), transform var(--ge-transition); padding: 0 var(--ge-pad); } .ge-feedback-btn:hover { filter: brightness(1.1); } .ge-feedback-btn:active { transform: scale(0.97); } .ge-feedback-btn.wrong { background: var(--ge-orange); } /* ===== PROGRESS BAR ===== */ .ge-progress-bar { width: 100%; height: 12px; background: var(--ge-track); border-radius: var(--ge-radius-full); overflow: hidden; } .ge-progress-fill { height: 100%; background: var(--ge-green); border-radius: var(--ge-radius-full); width: 0%; transition: width 0.5s cubic-bezier(.34,1.56,.64,1); } .ge-progress-fill.stufe-a { background: var(--ge-stufe-a); } .ge-progress-fill.stufe-b { background: var(--ge-stufe-b); } .ge-progress-fill.stufe-c { background: var(--ge-stufe-c); } .ge-progress-label { display: flex; justify-content: space-between; font-size: var(--ge-size-xs); font-weight: var(--ge-weight-bold); color: var(--ge-text-muted); margin-bottom: 4px; } /* ===== STERNE ===== */ .ge-stars { display: flex; gap: 6px; align-items: center; } .ge-star { font-size: 32px; line-height: 1; opacity: 0.25; transition: opacity var(--ge-transition), transform var(--ge-transition); } .ge-star.earned { opacity: 1; animation: ge-star-pop 0.4s cubic-bezier(.34,1.56,.64,1) forwards; } @media (max-width: 400px) { .ge-star { font-size: 26px; } } /* ===== PROFIL-BAR ===== */ .ge-profile { display: flex; align-items: center; gap: var(--ge-gap); background: var(--ge-bg-card); border-radius: var(--ge-radius); padding: var(--ge-pad); box-shadow: var(--ge-shadow-sm); } .ge-profile-avatar { width: var(--ge-touch-min); height: var(--ge-touch-min); border-radius: var(--ge-radius); display: flex; align-items: center; justify-content: center; font-size: 52px; line-height: 1; flex-shrink: 0; } .ge-profile-avatar.stufe-a { background: var(--ge-stufe-a-light); } .ge-profile-avatar.stufe-b { background: var(--ge-stufe-b-light); } .ge-profile-avatar.stufe-c { background: var(--ge-stufe-c-light); } .ge-profile-info { flex: 1; min-width: 0; } .ge-profile-name { font-family: var(--ge-font-display); font-size: var(--ge-size-lg); font-weight: var(--ge-weight-extrabold); color: var(--ge-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ge-profile-tier { font-size: var(--ge-size-sm); font-weight: var(--ge-weight-bold); color: var(--ge-text-muted); margin-top: 2px; } .ge-profile-stats { display: flex; gap: 12px; margin-top: 6px; } .ge-profile-stat { display: flex; flex-direction: column; align-items: flex-start; } .ge-profile-stat-val { font-family: var(--ge-font-display); font-size: var(--ge-size-md); font-weight: var(--ge-weight-extrabold); color: var(--ge-text); } .ge-profile-stat-lbl { font-size: var(--ge-size-xs); color: var(--ge-text-muted); text-transform: uppercase; letter-spacing: 1px; font-weight: var(--ge-weight-bold); } /* ===== BADGES ===== */ .ge-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--ge-radius-full); font-size: var(--ge-size-sm); font-weight: var(--ge-weight-bold); } .ge-badge.done { background: var(--ge-correct-bg); color: var(--ge-correct-text); } .ge-badge.active { background: var(--ge-gold-light); color: #b7690a; } .ge-badge.locked { background: var(--ge-track); color: var(--ge-text-muted); } /* ===== PITCH (FUSSBALLFELD) ===== */ .ge-pitch-wrap { width: 100%; padding: 0; } .ge-pitch { position: relative; width: 100%; aspect-ratio: 68 / 80; border-radius: var(--ge-radius); overflow: hidden; background: repeating-linear-gradient( 180deg, var(--ge-pitch-bg-a) 0, var(--ge-pitch-bg-a) 50%, var(--ge-pitch-bg-b) 50%, var(--ge-pitch-bg-b) 100% ); background-size: 100% 22%; box-shadow: var(--ge-shadow-md); } .ge-pitch-lines { position: absolute; inset: 0; pointer-events: none; } .ge-pitch-lines svg { width: 100%; height: 100%; } .ge-pitch-zones { position: absolute; inset: 0; } .ge-pitch-zone { position: absolute; border: 3px solid var(--ge-zone-idle); border-radius: var(--ge-radius-sm); background: var(--ge-zone-idle); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--ge-transition), border-color var(--ge-transition); -webkit-user-select: none; user-select: none; } .ge-pitch-zone:hover, .ge-pitch-zone:focus-visible { background: var(--ge-zone-hover); border-color: rgba(255,255,255,.5); outline: none; } .ge-pitch-zone.correct { background: var(--ge-zone-correct); border-color: #4caf50; animation: ge-pop 0.3s ease; } .ge-pitch-zone.wrong { background: var(--ge-zone-wrong); border-color: #e53935; animation: ge-shake 0.4s ease; } .ge-pitch-zone-label { color: #ffffff; font-size: var(--ge-size-base); font-weight: var(--ge-weight-bold); text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.6); pointer-events: none; line-height: 1.2; padding: 4px; white-space: pre-line; } /* ===== UTILITY ===== */ .ge-section-title { font-family: var(--ge-font-display); font-size: var(--ge-size-xl); font-weight: var(--ge-weight-extrabold); color: var(--ge-text); margin-bottom: var(--ge-gap); } .ge-divider { height: 1px; background: var(--ge-border); margin: var(--ge-gap) 0; } .ge-spacer { height: var(--ge-gap); } .ge-text-muted { color: var(--ge-text-muted); font-size: var(--ge-size-sm); } .ge-center { text-align: center; } .ge-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ===== MODUL-SHELL: PROFIL-BAR, TABS, PATHWAY ===== */ .ge-modul-shell { display: flex; flex-direction: column; gap: var(--ge-gap); } .ge-modul-profile .ge-profile-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .ge-modul-tabs { position: sticky; top: var(--ge-header-height); z-index: 50; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: var(--ge-bg); padding: 10px 0; border-bottom: 1px solid var(--ge-border); } .ge-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 80px; background: var(--ge-bg-card); border: 2px solid var(--ge-border); border-radius: var(--ge-radius); color: var(--ge-text); cursor: pointer; font-family: var(--ge-font); font-weight: var(--ge-weight-bold); transition: border-color var(--ge-transition), background var(--ge-transition), transform var(--ge-transition); } .ge-tab:hover, .ge-tab:focus-visible { background: var(--ge-bg-card-hover); border-color: var(--ge-green); outline: none; } .ge-tab:active { transform: scale(0.97); } .ge-tab.active { background: var(--ge-bg-card-hover); border-color: var(--ge-gold); border-bottom-width: 4px; } .ge-tab-icon { font-size: 28px; line-height: 1; } .ge-tab-label { font-size: var(--ge-size-sm); font-family: var(--ge-font-display); font-weight: var(--ge-weight-extrabold); text-transform: uppercase; letter-spacing: 1px; } .ge-tab-content { min-height: 200px; animation: ge-fade-in 0.35s ease; } .ge-pathway-strip { margin-top: var(--ge-gap); background: var(--ge-bg-card); border: 1px solid var(--ge-border); border-radius: var(--ge-radius); padding: var(--ge-pad); box-shadow: var(--ge-shadow-card); } .ge-pathway-title { font-family: var(--ge-font-display); font-weight: var(--ge-weight-extrabold); font-size: var(--ge-size-md); color: var(--ge-text); margin-bottom: 12px; text-align: center; } .ge-pathway-stages { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } .ge-pathway-stage { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 4px; background: var(--ge-track); border: 2px solid transparent; border-radius: var(--ge-radius-sm); color: var(--ge-text-muted); cursor: pointer; font-family: var(--ge-font); font-size: var(--ge-size-xs); font-weight: var(--ge-weight-bold); transition: transform var(--ge-transition), border-color var(--ge-transition); } .ge-pathway-stage:hover { transform: translateY(-2px); } .ge-pathway-stage.done { color: var(--ge-text); } .ge-pathway-stage.current { border-color: var(--ge-gold); color: var(--ge-text); background: var(--ge-bg-card-hover); box-shadow: 0 0 0 2px rgba(249,168,37,.25); } .ge-pathway-stage.locked { opacity: 0.55; } .ge-pathway-icon { font-size: 22px; line-height: 1; } .ge-pathway-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; } @media (max-width: 400px) { .ge-pathway-stage { padding: 8px 2px; } .ge-pathway-label { font-size: 10px; } .ge-tab-icon { font-size: 24px; } } /* ===== ZUGÄNGLICHKEIT: FOCUS-VISIBLE (Tastatur-Navigation) ===== */ .ge-option:focus-visible, .ge-tab:focus-visible, .ge-card:focus-visible, .ge-feedback-btn:focus-visible, .ge-lern-term:focus-visible, .ge-lern-done-btn:focus-visible, .ge-lern-speak-btn:focus-visible, .ge-header-back:focus-visible, .ge-header-tts:focus-visible, [data-idx]:focus-visible, [data-pidx]:focus-visible, [data-zone-id]:focus-visible, [data-dot-id]:focus-visible { outline: 4px solid var(--ge-gold) !important; outline-offset: 4px; box-shadow: 0 0 0 8px rgba(249,168,37,.3), var(--ge-shadow-card-hover); z-index: 10; position: relative; } /* ===== AUTISMUS-MODUS: Reduce Motion strict ===== */ [data-autism="true"] *, [data-autism="true"] *::before, [data-autism="true"] *::after { animation: none !important; transition: none !important; } [data-autism="true"] .ge-lern-term.pulse { animation: none !important; border-color: var(--ge-gold) !important; } /* ===== TOUCH-MODUS (normal/large/xlarge) ===== */ [data-touch="large"] { --ge-touch-min: 120px; --ge-touch-option: 140px; } [data-touch="xlarge"] { --ge-touch-min: 160px; --ge-touch-option: 180px; } [data-touch="large"] .ge-option, [data-touch="xlarge"] .ge-option { font-size: 22px; padding: 24px; } [data-touch="large"] .ge-lern-term, [data-touch="xlarge"] .ge-lern-term { min-height: 200px; } /* xlarge: nur 2 Optionen untereinander statt nebeneinander */ [data-touch="xlarge"] .ge-options-grid, [data-touch="xlarge"] .ge-quiz-options { grid-template-columns: 1fr !important; gap: 20px !important; } /* ===== STUFE BASAL (nur Bilder + Audio, kein sichtbarer Text) ===== */ [data-level="BASAL"] .ge-question-text, [data-level="BASAL"] .ge-option-text, [data-level="BASAL"] .ge-lern-term-text, [data-level="BASAL"] .ge-lern-hero-text { display: none !important; } [data-level="BASAL"] .ge-lern-term-emoji { font-size: 64px; } [data-level="BASAL"] .ge-lern-term { min-height: 180px; } [data-level="BASAL"] .ge-option { font-size: 0; padding: 32px; min-height: 180px; } [data-level="BASAL"] .ge-option-emoji { font-size: 72px !important; } /* Autismus: sanfte pulsierende statt harte Feedback-Farben bei Fehler */ [data-autism="true"] .ge-option.wrong, [data-autism="true"] .ge-option.incorrect { background: rgba(255,152,0,.12) !important; border-color: #ffa726 !important; animation: none !important; } /* ===== LERNEN-TAB (ge-lerntext.js) ===== */ .ge-lerntext { display: flex; flex-direction: column; gap: var(--ge-gap); animation: ge-fade-in .4s ease; } .ge-lern-hero { position: relative; border-radius: var(--ge-radius); padding: 40px var(--ge-pad) 32px; min-height: 220px; overflow: hidden; box-shadow: var(--ge-shadow-card); color: #fff; } .ge-lern-hero-overlay { position: relative; z-index: 1; text-align: center; } .ge-lern-hero-emoji { font-size: 72px; line-height: 1; margin-bottom: 8px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.3)); } .ge-lern-hero-title { font-family: var(--ge-font-display); font-size: 32px; font-weight: 900; color: #fff; margin-bottom: 8px; text-shadow: 0 2px 6px rgba(0,0,0,.45); } .ge-lern-hero-text { font-family: var(--ge-font); font-size: 18px; font-weight: 600; color: rgba(255,255,255,.95); line-height: 1.4; max-width: 480px; margin: 0 auto 16px; text-shadow: 0 1px 4px rgba(0,0,0,.35); } .ge-lern-speak-btn { background: rgba(255,255,255,.95); color: var(--ge-green); border: none; border-radius: var(--ge-radius-full); padding: 12px 24px; font-family: var(--ge-font-display); font-weight: 800; font-size: 16px; cursor: pointer; min-height: 48px; box-shadow: 0 4px 12px rgba(0,0,0,.2); transition: transform .15s ease; } .ge-lern-speak-btn:active { transform: scale(.96); } .ge-lern-speak-btn:focus-visible { outline: 3px solid var(--ge-gold); outline-offset: 3px; } .ge-lern-section-title { font-family: var(--ge-font-display); font-size: 20px; font-weight: 800; color: var(--ge-text); margin-bottom: 12px; text-align: center; } .ge-lern-terms-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } @media (max-width: 420px) { .ge-lern-terms-grid { grid-template-columns: 1fr; } } .ge-lern-term { position: relative; background: var(--ge-bg-card); border: 3px solid var(--ge-border); border-radius: var(--ge-radius); padding: 20px 16px 16px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; cursor: pointer; color: var(--ge-text); font-family: var(--ge-font); box-shadow: var(--ge-shadow-card); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; min-height: 160px; } .ge-lern-term:hover, .ge-lern-term:focus-visible { border-color: var(--ge-green); outline: none; transform: translateY(-2px); box-shadow: var(--ge-shadow-card-hover); } .ge-lern-term:active { transform: scale(.97); } .ge-lern-term.pulse { animation: ge-pulse-strong 1.6s ease; border-color: var(--ge-gold); } .ge-lern-term-emoji { font-size: 48px; line-height: 1; } .ge-lern-term-label { font-family: var(--ge-font-display); font-size: 18px; font-weight: 800; color: var(--ge-text); } .ge-lern-term-text { font-size: 15px; font-weight: 500; color: var(--ge-text-muted); line-height: 1.4; } .ge-lern-term-speak { position: absolute; top: 8px; right: 10px; font-size: 18px; opacity: .55; } .ge-lern-transition { text-align: center; padding: 16px 0 8px; } .ge-lern-transition-text { font-family: var(--ge-font-display); font-size: 18px; font-weight: 700; color: var(--ge-text); margin-bottom: 16px; } .ge-lern-done-btn { background: var(--ge-green); color: #fff; border: none; border-radius: var(--ge-radius); padding: 18px 32px; font-family: var(--ge-font-display); font-size: 20px; font-weight: 800; cursor: pointer; min-height: var(--ge-touch-min); box-shadow: 0 8px 24px rgba(76,175,80,.3); transition: transform .15s ease, filter .2s ease; } .ge-lern-done-btn:hover { filter: brightness(1.1); } .ge-lern-done-btn:active { transform: scale(.97); } .ge-lern-done-btn:focus-visible { outline: 4px solid var(--ge-gold); outline-offset: 4px; } @keyframes ge-pulse-strong { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.04); box-shadow: 0 0 0 8px rgba(249,168,37,.25); } 60% { transform: scale(1.02); } } /* ===== ANIMATIONEN ===== */ @keyframes ge-pop { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } @keyframes ge-star-pop { 0% { transform: scale(0) rotate(-20deg); opacity: 0.25; } 70% { transform: scale(1.25) rotate(6deg); } 100% { transform: scale(1) rotate(0deg); opacity: 1; } } @keyframes ge-shake { 0% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } 100% { transform: translateX(0); } } @keyframes ge-fade-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .ge-animate-in { animation: ge-fade-in 0.35s ease forwards; } /* ===== RESPONSIVE ===== */ @media (max-width: 400px) { :root { --ge-size-base: 18px; /* Pflichtminimum halten */ --ge-size-md: 18px; --ge-size-lg: 22px; --ge-size-xl: 26px; --ge-pad: 16px; --ge-gap: 12px; --ge-touch-min: 72px; --ge-touch-option: 88px; } .ge-header { height: 56px; } } @media (prefers-reduced-motion: reduce) { .ge-animate-in, .ge-star, .ge-pitch-zone, .ge-option, .ge-card, .ge-feedback-box { animation: none !important; transition: none !important; } } /* ===== MINI-GAMES (Spielen-Tab) ===== */ .ge-mg-intro, .ge-mg-end, .ge-mg-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 32px 16px; text-align: center; min-height: 60vh; } .ge-mg-icon { font-size: 64px; line-height: 1; } .ge-mg-title { font-family: 'Bricolage Grotesque', sans-serif; font-size: 28px; font-weight: 800; margin: 0; } .ge-mg-instruction { font-size: 18px; line-height: 1.5; max-width: 480px; } .ge-mg-best { font-size: 16px; color: var(--ge-text-muted, #6f7a6b); margin: 0; } .ge-mg-start-btn, .ge-mg-replay-btn { background: var(--ge-green, #4caf50); color: #fff; border: none; border-radius: 16px; padding: 20px 32px; font-size: 18px; font-weight: 800; font-family: 'Bricolage Grotesque', sans-serif; cursor: pointer; min-height: 64px; box-shadow: 0 4px 12px rgba(76,175,80,.25); } .ge-mg-end-score { font-family: 'Bricolage Grotesque', sans-serif; font-size: 32px; margin: 0; } .ge-mg-end-msg { font-size: 18px; color: var(--ge-text-muted, #6f7a6b); margin: 0; } .ge-mg-end-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } .ge-mg-home-link { display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--ge-text, #2d2d2d); border: 2px solid var(--ge-border, rgba(0,0,0,.1)); border-radius: 16px; padding: 18px 28px; font-size: 16px; font-weight: 700; text-decoration: none; min-height: 60px; } /* tap-target */ .ge-mg-tt-stage { position: relative; width: 100%; aspect-ratio: 4/3; border-radius: 16px; overflow: hidden; background: repeating-linear-gradient(180deg, #145228 0, #145228 50%, #187834 50%, #187834 100%); background-size: 100% 22%; box-shadow: 0 4px 16px rgba(0,0,0,.15); } .ge-mg-tt-hud { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; font-family: 'Bricolage Grotesque', sans-serif; font-size: 18px; font-weight: 700; } .ge-mg-tt-symbol { position: absolute; background: rgba(255,255,255,.55); border: 3px solid #fff; border-radius: 16px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 16px rgba(0,0,0,.25); transition: transform 120ms ease; } .ge-mg-tt-symbol:active { transform: scale(.95); } .ge-mg-tt-symbol.ge-mg-tt-pop { animation: ge-mg-tt-pop 300ms ease-out forwards; } @keyframes ge-mg-tt-pop { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } } /* drag-to-position */ .ge-mg-dtp-instructions { text-align: center; font-size: 16px; padding: 8px 16px; color: var(--ge-text-muted, #6f7a6b); } .ge-mg-dtp-board { display: grid; grid-template-rows: auto 1fr; gap: 12px; padding: 12px; } .ge-mg-dtp-pieces { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; background: var(--ge-bg-card, #fff); border: 2px dashed var(--ge-border, rgba(0,0,0,.15)); border-radius: 12px; padding: 16px; min-height: 100px; } .ge-mg-dtp-piece { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 88px; height: 88px; background: #fff; border: 3px solid var(--ge-green, #4caf50); border-radius: 16px; font-size: 40px; cursor: grab; user-select: none; touch-action: none; box-shadow: 0 4px 8px rgba(0,0,0,.08); } .ge-mg-dtp-piece.ge-mg-dtp-dragging { opacity: 0.5; cursor: grabbing; } .ge-mg-dtp-piece-label { font-size: 12px; font-weight: 700; } .ge-mg-dtp-zones { display: grid; gap: 12px; } .ge-mg-dtp-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 88px; background: #fff; border: 3px dashed var(--ge-border, rgba(0,0,0,.2)); border-radius: 12px; padding: 16px; font-weight: 700; text-align: center; transition: background 200ms, border-color 200ms; } .ge-mg-dtp-zone.ge-mg-dtp-hover { background: rgba(76,175,80,.15); border-color: var(--ge-green, #4caf50); } .ge-mg-dtp-zone.ge-mg-dtp-correct { background: rgba(76,175,80,.25); border-color: var(--ge-green, #4caf50); border-style: solid; } .ge-mg-dtp-zone-label { font-size: 16px; opacity: .7; } .ge-mg-dtp-zone-emoji { font-size: 36px; } /* memory-match */ .ge-mg-mm-hud { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; font-family: 'Bricolage Grotesque', sans-serif; font-size: 18px; font-weight: 700; } .ge-mg-mm-grid { display: grid; gap: 8px; padding: 12px; } .ge-mg-mm-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); } .ge-mg-mm-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); } .ge-mg-mm-card { position: relative; aspect-ratio: 1; background: var(--ge-green, #4caf50); color: #fff; border: none; border-radius: 12px; font-size: 36px; font-weight: 800; cursor: pointer; transition: transform 200ms; } .ge-mg-mm-card.ge-mg-mm-flipped { background: #fff; color: var(--ge-text, #2d2d2d); border: 3px solid var(--ge-border, rgba(0,0,0,.15)); } .ge-mg-mm-card.ge-mg-mm-matched { background: rgba(76,175,80,.25); border: 3px solid var(--ge-green, #4caf50); cursor: default; pointer-events: none; } /* sequence-build */ .ge-mg-sb-hud { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; font-family: 'Bricolage Grotesque', sans-serif; font-size: 18px; font-weight: 700; } .ge-mg-sb-pool { display: flex; flex-wrap: wrap; gap: 12px; padding: 12px; justify-content: center; } .ge-mg-sb-item { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 100px; min-height: 88px; background: #fff; border: 3px solid var(--ge-blue, #1565c0); border-radius: 16px; padding: 12px; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 8px rgba(0,0,0,.08); } .ge-mg-sb-item.ge-mg-sb-done { background: rgba(76,175,80,.25); border-color: var(--ge-green, #4caf50); cursor: default; pointer-events: none; } .ge-mg-sb-item.ge-mg-sb-shake { animation: ge-mg-sb-shake 400ms ease; } @keyframes ge-mg-sb-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } } .ge-mg-sb-item-emoji { font-size: 32px; } .ge-mg-sb-progress { display: flex; gap: 6px; padding: 12px; justify-content: center; } .ge-mg-sb-progress-step { width: 32px; height: 32px; background: var(--ge-bg-card, #fff); border: 2px solid var(--ge-border, rgba(0,0,0,.15)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-family: 'Bricolage Grotesque', sans-serif; } .ge-mg-sb-progress-step.ge-mg-sb-progress-done { background: var(--ge-green, #4caf50); color: #fff; border-color: var(--ge-green, #4caf50); } /* quick-quiz */ .ge-mg-qq-hud { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; font-family: 'Bricolage Grotesque', sans-serif; font-size: 18px; font-weight: 700; } .ge-mg-qq-question { text-align: center; font-size: 22px; font-weight: 700; padding: 16px; line-height: 1.3; } .ge-mg-qq-options { display: grid; gap: 12px; padding: 12px; } .ge-mg-qq-option { background: #fff; color: var(--ge-text, #2d2d2d); border: 3px solid var(--ge-border, rgba(0,0,0,.15)); border-radius: 12px; padding: 16px; font-size: 16px; font-weight: 700; text-align: left; cursor: pointer; min-height: 60px; } .ge-mg-qq-option.ge-mg-qq-correct { background: rgba(76,175,80,.25); border-color: var(--ge-green, #4caf50); } .ge-mg-qq-option.ge-mg-qq-wrong { background: rgba(229,57,53,.15); border-color: var(--ge-red, #e53935); } .ge-mg-qq-bar { height: 6px; background: var(--ge-border, rgba(0,0,0,.1)); border-radius: 3px; overflow: hidden; margin: 0 12px; } .ge-mg-qq-bar-fill { height: 100%; background: var(--ge-green, #4caf50); transition: width 1s linear; }