/** * Layout Mode C: Scroll-Content * * Für Lernpfad-Seiten mit linearem Scroll-Content. * Optional: Sticky-Iframe für interaktive Demos. * * Aktivierung: * * Kompatibel mit bestehenden Klassen: * .lp-container, .lp-header, .lp-content, * .lp-navigation, .lp-block, .game-wrapper * * Breakpoints: * Desktop (>1024px) — max-width 900px, sticky iframe 60vh * Tablet (768–1024px) — max-width 700px, sticky iframe 50vh * Phone (<768px) — full-width, iframe inline (nicht sticky) * * Zusätzlich: Sidebar-Variante (.lp-layout-game) mit eigenem * Responsive-Verhalten (bottom-sheet auf mobile). * * @version 1.0 * @see docs/conventions/UI_STYLE_PLAN.md */ /* ========================================= 1. BASE LAYOUT (Desktop – Scroll Mode) ========================================= */ .scroll-content { overflow-y: auto !important; height: auto !important; margin: 0; background: var(--color-bg, #f0f2f5); } /* Zentriertes Content-Column */ .scroll-content .lp-container { max-width: 900px; margin: 0 auto; padding: var(--space-lg, 1.5rem) var(--space-xl, 2rem); background: var(--color-surface, #ffffff); min-height: 100vh; display: flex; flex-direction: column; box-shadow: 0 0 20px var(--color-shadow, rgba(0, 0, 0, 0.05)); } /* Header mit Fortschrittsbalken */ .scroll-content .lp-header { margin-bottom: var(--space-lg, 1.5rem); padding-bottom: var(--space-md, 1rem); border-bottom: 1px solid var(--color-border-light, #eee); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-sm, 0.5rem); } /* Content-Blöcke */ .scroll-content .lp-content { flex: 1; } .scroll-content .lp-block { margin-bottom: var(--space-md, 1rem); padding: var(--space-md, 1rem) var(--space-lg, 1.5rem); border-radius: var(--border-radius, 6px); background: var(--color-surface, #ffffff); border: 1px solid var(--color-border-light, #eee); box-shadow: 0 2px 4px var(--color-shadow, rgba(0, 0, 0, 0.02)); } /* Sticky Iframe für Game-Demos */ .scroll-content .game-wrapper, .scroll-content .lp-game-embed { position: sticky; top: var(--space-md, 1rem); height: 60vh; margin-bottom: var(--space-lg, 1.5rem); border-radius: var(--border-radius, 6px); overflow: hidden; box-shadow: 0 4px 16px var(--color-shadow, rgba(0, 0, 0, 0.08)); z-index: 5; } .scroll-content .game-wrapper iframe, .scroll-content .lp-game-embed iframe { width: 100%; height: 100%; border: none; display: block; } /* Footer-Navigation */ .scroll-content .lp-navigation { padding: var(--space-md, 1rem) 0; border-top: 1px solid var(--color-border-light, #eee); margin-top: var(--space-lg, 1.5rem); display: flex; justify-content: space-between; gap: var(--space-sm, 0.5rem); } /* ========================================= 2. SIDEBAR-VARIANTE (.lp-layout-game) Lernpfad mit Sidebar + voller Iframe ========================================= */ /* (Die bestehenden .lp-layout-game Regeln in learning-path.css bleiben aktiv. Hier nur responsive Ergänzungen.) */ .scroll-content.lp-layout-game { overflow: hidden !important; height: 100dvh !important; height: 100vh !important; } /* ========================================= 3. TABLET (768px – 1024px) ========================================= */ @media (max-width: 1024px) { .scroll-content .lp-container { max-width: 700px; padding: var(--space-md, 1rem); } .scroll-content .game-wrapper, .scroll-content .lp-game-embed { height: 50vh; } /* Sidebar-Variante: schmalere Sidebar */ .scroll-content .lp-sidebar { width: 280px; } /* Split-Layout: vertikaler Stack */ .scroll-content .lp-layout-split { grid-template-columns: 1fr; height: auto; } } /* ========================================= 4. PHONE (<768px) ========================================= */ @media (max-width: 768px) { .scroll-content .lp-container { max-width: 100%; padding: var(--space-sm, 0.5rem); box-shadow: none; } .scroll-content .lp-header { flex-direction: column; align-items: flex-start; } /* Iframe nicht mehr sticky, inline fließend */ .scroll-content .game-wrapper, .scroll-content .lp-game-embed { position: relative; top: auto; height: 40vh; } .scroll-content .lp-block { padding: var(--space-sm, 0.5rem) var(--space-md, 1rem); } /* Navigation-Buttons vergrößern */ .scroll-content .lp-navigation .lp-btn { min-height: var(--touch-target-min, 44px); flex: 1; text-align: center; } /* Sidebar-Variante: Sidebar wird Bottom-Sheet */ .scroll-content .lp-layout-game-container { flex-direction: column; position: relative; } .scroll-content .lp-sidebar { position: fixed; bottom: 0; left: 0; right: 0; width: 100% !important; height: auto; max-height: 50vh; border-right: none; border-top: 1px solid var(--color-border, #ddd); border-radius: var(--border-radius-lg, 8px) var(--border-radius-lg, 8px) 0 0; box-shadow: 0 -4px 16px var(--color-shadow, rgba(0, 0, 0, 0.1)); z-index: 100; background: var(--glass-bg, rgba(255, 255, 255, 0.92)); backdrop-filter: blur(var(--glass-blur, 10px)); -webkit-backdrop-filter: blur(var(--glass-blur, 10px)); transform: translateY(calc(100% - 48px)); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .scroll-content .lp-sidebar.open { transform: translateY(0); } /* Drag-Handle */ .scroll-content .lp-sidebar-header { cursor: grab; text-align: center; } .scroll-content .lp-sidebar-header::before { content: ''; display: block; width: 40px; height: 4px; background: var(--color-border, #ccc); border-radius: 2px; margin: 0 auto var(--space-xs, 0.25rem); } .scroll-content .lp-main-content { width: 100%; height: 100dvh; height: 100vh; } /* Backdrop-filter Fallback */ @supports not (backdrop-filter: blur(1px)) { .scroll-content .lp-sidebar { background: rgba(255, 255, 255, 0.97); } } } /* ========================================= 5. VERY SMALL PHONES (<480px) ========================================= */ @media (max-width: 480px) { .scroll-content .lp-container { padding: var(--space-xs, 0.25rem); } .scroll-content .game-wrapper, .scroll-content .lp-game-embed { height: 35vh; } .scroll-content .lp-block { font-size: var(--font-size-sm, 0.85rem); } /* Progress-Bar unter Titel */ .scroll-content .lp-header { gap: var(--space-xs, 0.25rem); } }