.reflexion-app{max-width:900px;margin:0 auto;padding:1rem}.reflexion-header{text-align:center;margin-bottom:1.5rem}.reflexion-header h1{font-size:1.6rem;color:var(--primary-color);margin-bottom:.3rem}.reflexion-header .subtitle{color:var(--text-secondary);font-size:.95rem}.reflexion-content{display:flex;flex-direction:column;gap:1.5rem}.canvas-container{width:100%;height:420px;background:var(--card-bg);border-radius:12px;border:1px solid var(--border-color);overflow:hidden;cursor:grab;box-shadow:0 1px 3px #00000014}.canvas-container:active{cursor:grabbing}.reflexion-canvas{display:block;width:100%;height:100%}.controls-panel{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-start}.slider-group{display:flex;align-items:center;gap:.8rem;background:var(--card-bg);padding:.8rem 1.2rem;border-radius:10px;border:1px solid var(--border-color);flex:1;min-width:240px}.slider-group label{font-weight:600;white-space:nowrap;color:var(--text-primary)}.slider-group input[type=range]{flex:1;accent-color:var(--primary-color)}.angle-display{font-size:1.3rem;font-weight:700;color:var(--primary-color);min-width:3rem;text-align:right}.info-card{background:var(--card-bg);padding:1.2rem;border-radius:10px;border:1px solid var(--border-color);flex:1;min-width:240px}.info-card h3{font-size:1rem;color:var(--text-primary);margin-bottom:.6rem}.law-display{display:flex;align-items:center;justify-content:center;gap:.6rem;font-size:1.1rem;font-weight:600;margin-bottom:.3rem}.angle-values{display:flex;align-items:center;justify-content:center;gap:.6rem;font-size:1.4rem;font-weight:700;margin-bottom:.8rem}.angle-alpha{color:#3b82f6}.angle-beta{color:#ef4444}.equals{color:var(--text-secondary)}.info-text{font-size:.85rem;color:var(--text-secondary);line-height:1.5}@media (min-width: 640px){.reflexion-app{padding:2rem}.reflexion-header h1{font-size:1.8rem}.canvas-container{height:480px}.controls-panel{flex-wrap:nowrap;align-items:stretch}.slider-group{flex-direction:column;align-items:stretch;gap:.5rem;flex:0 0 auto;min-width:160px}}.brechungs-simulation{background:var(--card-bg, #fff);border-radius:8px;padding:.5rem}.brechungs-canvas{width:100%;max-width:800px;height:auto;display:block;border-radius:6px;border:1px solid #e2e8f0}.brechung-app{max-width:900px;margin:0 auto;padding:1rem}.brechung-header{text-align:center;margin-bottom:1.5rem}.brechung-header h1{font-size:1.6rem;color:var(--primary-color);margin-bottom:.3rem}.brechung-header .subtitle{color:var(--text-secondary);font-size:.95rem}.brechung-app h2{color:var(--text-primary);margin:2rem 0 1rem;font-size:1.3rem}.simulation-container{display:grid;grid-template-columns:1fr 280px;gap:1.5rem;margin-top:1rem}.parameter-panel{background:var(--card-bg);padding:1.25rem;border-radius:8px;border:1px solid var(--border-color)}.parameter-panel h3{font-size:1rem;margin-bottom:1rem;color:var(--primary-color)}.direction-toggle{display:flex;gap:.5rem;margin-bottom:1rem}.direction-toggle button{flex:1;padding:.6rem .8rem;border:2px solid var(--border-color);border-radius:6px;background:var(--bg-color);color:var(--text-primary);font-size:.85rem;cursor:pointer;transition:all .2s ease}.direction-toggle button:hover{border-color:var(--primary-light)}.direction-toggle button.active{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.parameter{margin-bottom:1.25rem}.parameter label{display:block;font-size:.9rem;margin-bottom:.5rem;color:var(--text-secondary)}.parameter input[type=range]{width:100%}.medium-select{display:block;width:100%;margin-top:.5rem;padding:.4rem;border-radius:4px;border:1px solid var(--border-color)}.laser-section{margin-bottom:1.25rem}.laser-section>label{display:block;font-size:.9rem;margin-bottom:.5rem;color:var(--text-secondary)}.laser-buttons{display:flex;gap:.5rem;margin-bottom:.5rem;flex-wrap:wrap}.laser-button{padding:.4rem .8rem;border:2px solid transparent;border-radius:4px;font-size:.85rem;font-weight:500;color:#fff;cursor:pointer;transition:all .2s ease}.laser-button:hover{transform:scale(1.05);box-shadow:0 2px 8px #0003}.laser-button.active{border-color:#fff;box-shadow:0 0 10px currentColor}.white-light-button{width:100%;padding:.5rem;margin-top:.5rem;border:2px solid var(--border-color);border-radius:4px;background:linear-gradient(to right,red,#f80,#ff0,#0f0,#08f,#80f);color:#fff;font-weight:500;text-shadow:0 1px 2px rgba(0,0,0,.5);cursor:pointer;transition:all .2s ease}.white-light-button:hover{transform:scale(1.02);box-shadow:0 2px 8px #0003}.white-light-button.active{border-color:#333;box-shadow:0 0 10px #0000004d}.calculated-values{background:var(--bg-color);padding:1rem;border-radius:6px;margin-top:1rem}.calculated-values h4{margin:0 0 .5rem;font-size:.9rem;color:var(--primary-color)}.calculated-values p{margin:.3rem 0;font-size:.85rem}.total-reflection{color:#d32f2f;font-weight:700}.critical-angle{color:#ed6c02;font-style:italic}.observations-section{margin:2rem 0}.observation-cards{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem}.observation-card{background:var(--card-bg);padding:1.25rem;border-radius:8px;border:1px solid var(--border-color)}.observation-card h4{color:var(--primary-color);margin:0 0 .75rem}.observation-card p{margin:.5rem 0}.formula-small{font-family:Times New Roman,Georgia,serif;font-size:1rem;color:var(--text-secondary)}.highlight{color:var(--accent-color);font-weight:600}.dispersion-section{background:#fef3c7;padding:1.5rem;border-radius:8px;margin:2rem 0;border-left:4px solid #d97706}.dispersion-section h2{color:#92400e;margin-top:0}.dispersion-section ul{margin:1rem 0 0 1.5rem}.dispersion-section li{margin:.5rem 0}.derivation-section{background:var(--card-bg);padding:1.5rem;border-radius:8px;margin:2rem 0}.formula.large{font-size:1.4rem;padding:.8rem 1.5rem;display:block;text-align:center;margin:1rem 0}.variables{background:var(--bg-color);padding:1rem;border-radius:4px;margin-top:1rem}.variables p{margin:.3rem 0;font-size:.95rem}.note{background:#ebf8ff;border-left:4px solid var(--primary-light);padding:1rem;margin:1rem 0;border-radius:0 4px 4px 0}.examples-section{margin:2rem 0}.example-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}.example-card{background:var(--card-bg);padding:1.25rem;border-radius:8px;border:1px solid var(--border-color)}.example-icon{font-size:1.8rem;margin-bottom:.75rem;display:block}.example-card h4{color:var(--primary-color);margin:0 0 .5rem}.example-card p{font-size:.9rem;margin:0;color:var(--text-secondary)}@media (max-width: 768px){.simulation-container,.observation-cards,.example-cards{grid-template-columns:1fr}}@media (pointer: coarse){.laser-button,.direction-toggle button,.white-light-button{min-height:44px;min-width:44px}.direction-toggle button{padding:.9rem 1rem;font-size:1rem}.direction-toggle{gap:.75rem}.white-light-button{padding:.75rem;font-size:1rem}.medium-select{min-height:44px;font-size:1rem}.observation-card,.example-card{padding:1.5rem}.laser-button:hover,.white-light-button:hover{transform:none}.laser-button:active,.white-light-button:active,.direction-toggle button:active{transform:scale(.97);opacity:.9}}.schatten-app{max-width:900px;margin:0 auto;padding:1rem}.schatten-header{text-align:center;margin-bottom:1.5rem}.schatten-header h1{font-size:1.6rem;color:var(--primary-color);margin-bottom:.3rem}.schatten-header .subtitle{color:var(--text-secondary);font-size:.95rem}.schatten-canvas-container{width:100%;background:#1a1a1a;border-radius:12px;border:2px solid #333;overflow:hidden;cursor:move;box-shadow:0 2px 8px #0000004d}.schatten-canvas{display:block;width:100%}.schatten-controls{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.5rem}.schatten-controls .control-group{background:var(--card-bg);padding:.8rem 1rem;border-radius:8px;border:1px solid var(--border-color);flex:1;min-width:200px}.schatten-controls .control-group label{display:block;font-size:.9rem;color:var(--text-primary);margin-bottom:.5rem}.button-group{display:flex;gap:.5rem}.button-group button{flex:1;padding:.5rem .8rem;border:2px solid var(--border-color);border-radius:6px;background:var(--bg-color);color:var(--text-primary);font-size:.85rem;cursor:pointer;transition:all .2s}.button-group button:hover{border-color:var(--primary-light)}.button-group button.active{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.schatten-controls input[type=range]{width:100%;accent-color:var(--primary-color)}.schatten-info{background:var(--card-bg);padding:1rem 1.2rem;border-radius:8px;border:1px solid var(--border-color);border-left:4px solid var(--primary-color);margin-top:1rem}.schatten-info p{margin:.3rem 0;font-size:.85rem;color:var(--text-secondary)}@media (max-width: 600px){.schatten-controls{flex-direction:column}}@media (pointer: coarse){.button-group button{min-height:44px;font-size:.95rem;padding:.7rem}.button-group button:hover{transform:none}.button-group button:active{transform:scale(.97);opacity:.9}}.mondphasen-app{max-width:900px;margin:0 auto;padding:1rem}.mondphasen-header{text-align:center;margin-bottom:1.5rem}.mondphasen-header h1{font-size:1.6rem;color:var(--primary-color);margin-bottom:.3rem}.mondphasen-header .subtitle{color:var(--text-secondary);font-size:.95rem}.canvas-label{color:var(--text-secondary);font-size:.8rem;text-align:center;margin-bottom:.3rem}.space-section{margin-bottom:1rem}.space-canvas-container{background:radial-gradient(ellipse at center,#0a0a15,#000005);border-radius:12px;border:2px solid #333;overflow:hidden}.space-canvas{display:block;width:100%;height:auto;cursor:pointer}.bottom-section{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-start}.earth-view-section{display:flex;flex-direction:column;align-items:center}.earth-view-canvas{border:2px solid #333;border-radius:8px;background:radial-gradient(ellipse at center,#0a0a20,#000010)}.phase-name{text-align:center;color:#d97706;font-size:1.1rem;font-weight:700;margin-top:.5rem}.controls-section{flex:1;min-width:280px;display:flex;flex-direction:column;gap:.75rem}.mondphasen-controls{display:flex;flex-wrap:wrap;gap:.75rem}.mondphasen-controls .control-group{background:var(--card-bg);padding:.8rem 1rem;border-radius:8px;border:1px solid var(--border-color);flex:1;min-width:140px}.mondphasen-controls .control-group label{display:block;font-size:.85rem;color:var(--text-primary);margin-bottom:.4rem}.mondphasen-controls .button-group{display:flex;gap:.4rem}.mondphasen-controls .button-group button{flex:1;padding:.4rem .6rem;border:2px solid var(--border-color);border-radius:6px;background:var(--bg-color);color:var(--text-primary);font-size:.85rem;cursor:pointer;transition:all .2s}.mondphasen-controls .button-group button:hover{border-color:var(--primary-light)}.mondphasen-controls .button-group button.active{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.mondphasen-controls input[type=range]{width:100%;accent-color:var(--primary-color)}.mondphasen-info{background:var(--card-bg);padding:.8rem 1rem;border-radius:8px;border:1px solid var(--border-color);border-left:4px solid var(--primary-color)}.mondphasen-info p{margin:.2rem 0;font-size:.8rem;color:var(--text-secondary)}@media (max-width: 600px){.bottom-section{flex-direction:column;align-items:center}.controls-section{width:100%}}@media (pointer: coarse){.mondphasen-controls .button-group button{min-height:44px;font-size:.95rem}.mondphasen-controls .button-group button:hover{transform:none}.mondphasen-controls .button-group button:active{transform:scale(.97);opacity:.9}}.spiegelbild-app{max-width:1000px;margin:0 auto;padding:1rem}.spiegelbild-header{text-align:center;margin-bottom:1rem}.spiegelbild-header h1{font-size:1.6rem;color:var(--primary-color)}.level-selector{display:flex;gap:.4rem;justify-content:center;margin-bottom:1rem;flex-wrap:wrap}.level-button{padding:.4rem .9rem;border:2px solid var(--border-color);border-radius:20px;background:var(--bg-color);color:var(--text-primary);font-size:.85rem;cursor:pointer;transition:all .2s}.level-button:hover{border-color:var(--primary-light)}.level-button.active{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.spiegelbild-layout{display:grid;grid-template-columns:1fr 260px;gap:1rem;align-items:start}.spiegelbild-canvas-container{background:var(--card-bg);border-radius:12px;border:1px solid var(--border-color);overflow:hidden;cursor:crosshair;box-shadow:0 1px 4px #00000014}.spiegelbild-canvas{display:block;width:100%}.spiegelbild-sidebar{display:flex;flex-direction:column;gap:.75rem}.instruction-panel{background:var(--card-bg);padding:1rem;border-radius:8px;border:1px solid var(--border-color);border-left:4px solid var(--primary-color)}.instruction-panel.complete{border-left-color:var(--success-color);background:#f0fff4}.instruction-panel h3{font-size:.95rem;color:var(--primary-color);margin-bottom:.4rem}.instruction-panel.complete h3{color:var(--success-color)}.instruction-panel p{font-size:.85rem;color:var(--text-secondary);line-height:1.5}.help-section{background:var(--card-bg);border-radius:8px;border:1px solid var(--border-color);overflow:hidden}.help-toggle{width:100%;padding:.6rem 1rem;background:var(--bg-color);border:none;color:var(--primary-color);font-size:.85rem;cursor:pointer;text-align:left;font-weight:500}.help-toggle:hover{background:#4299e114}.help-content{padding:.75rem 1rem;border-top:1px solid var(--border-color)}.help-content p{font-size:.8rem;color:var(--text-secondary);margin:.3rem 0;line-height:1.4}.progress-panel{background:var(--card-bg);padding:.75rem 1rem;border-radius:8px;border:1px solid var(--border-color)}.progress-panel h4{font-size:.85rem;color:var(--text-primary);margin-bottom:.5rem}.progress-points{display:flex;flex-wrap:wrap;gap:.4rem}.progress-dot{padding:.3rem .6rem;border-radius:4px;font-size:.8rem;background:var(--bg-color);color:var(--text-secondary);cursor:pointer;transition:all .2s;border:1px solid var(--border-color)}.progress-dot.active{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.progress-dot.done{background:#c6f6d5;color:#276749;border-color:#9ae6b4}.phase-indicator{display:flex;gap:.3rem}.phase-step{flex:1;text-align:center;padding:.35rem .3rem;font-size:.75rem;border-radius:6px;background:var(--bg-color);color:var(--text-secondary);border:1px solid var(--border-color);transition:all .2s}.phase-step.active{background:var(--primary-color);color:#fff;border-color:var(--primary-color);font-weight:600}.phase-step.done{background:#c6f6d5;color:#276749;border-color:#9ae6b4}.button-row{display:flex;gap:.5rem}.button-row .btn{flex:1;font-size:.85rem;padding:.5rem .8rem}.next-level-btn{width:100%;font-size:1rem!important;padding:.7rem!important;background:var(--success-color)!important}.next-level-btn:hover{background:#38a169!important}@media (max-width: 700px){.spiegelbild-layout{grid-template-columns:1fr}.spiegelbild-sidebar{flex-direction:row;flex-wrap:wrap}.spiegelbild-sidebar>*{flex:1;min-width:200px}.button-row{min-width:100%}}@media (pointer: coarse){.level-button{min-height:44px;padding:.6rem 1.2rem;font-size:.95rem}.button-row .btn,.help-toggle{min-height:44px}.progress-dot{min-height:36px;display:flex;align-items:center;padding:.4rem .8rem}.level-button:hover,.help-toggle:hover{transform:none}}.app{min-height:100vh;display:flex;flex-direction:column}.app-header{text-align:center;padding:1.2rem 1rem .5rem}.app-title-link{text-decoration:none;display:inline-flex;align-items:baseline;gap:.6rem}.app-header h1{font-size:1.8rem;color:var(--primary-color);margin:0}.app-subtitle{font-size:1rem;color:var(--text-secondary);font-weight:400}.module-tabs{display:flex;gap:.25rem;justify-content:center;padding:.5rem 1rem;flex-wrap:wrap}.tab-link{padding:.5rem 1.2rem;border-radius:8px 8px 0 0;text-decoration:none;color:var(--text-secondary);font-size:.95rem;font-weight:500;border:1px solid transparent;border-bottom:none;transition:all .2s;background:transparent}.tab-link:hover{color:var(--primary-color);background:#4299e114}.tab-link.active{color:var(--primary-color);background:var(--card-bg);border-color:var(--border-color);font-weight:600}.back-button-container{max-width:900px;margin:0 auto;padding:.5rem 1rem 0}.back-button{display:inline-flex;align-items:center;padding:.4rem .8rem;font-size:.9rem;color:var(--text-secondary);text-decoration:none;border-radius:6px;transition:all .2s}.back-button:hover{color:var(--primary-color);background:#4299e114}.module-content{flex:1;border-top:1px solid var(--border-color);padding:1rem}.home{max-width:800px;margin:0 auto;padding:1rem 0}.home-intro{text-align:center;margin-bottom:2rem}.home-intro h2{color:var(--primary-color);font-size:1.4rem;margin-bottom:.5rem}.home-intro p{color:var(--text-secondary)}.module-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.module-card{display:flex;flex-direction:column;align-items:center;gap:.8rem;padding:1.8rem 1rem;background:var(--card-bg);border-radius:12px;border:1px solid var(--border-color);text-decoration:none;transition:all .2s;box-shadow:0 1px 3px #0000000f}.module-card:hover{border-color:var(--primary-light);box-shadow:0 4px 12px #4299e126;transform:translateY(-2px)}.module-icon{font-size:2.2rem}.module-label{font-size:1rem;font-weight:600;color:var(--text-primary);text-align:center}.app-footer{text-align:center;padding:1rem;font-size:.8rem;border-top:1px solid var(--border-color);margin-top:2rem;display:flex;justify-content:center;gap:1.5rem}.app-footer a{color:var(--text-secondary);text-decoration:none}.app-footer a:hover{color:var(--primary-color)}@media (max-width: 500px){.module-grid{grid-template-columns:repeat(2,1fr)}.tab-link{padding:.5rem .8rem;font-size:.85rem}.app-header h1{font-size:1.5rem}}@media (pointer: coarse){.tab-link{min-height:44px;display:flex;align-items:center}.module-card{min-height:44px}}:root{--primary-color: #2c5282;--primary-light: #4299e1;--accent-color: #f59e0b;--success-color: #48bb78;--error-color: #f56565;--bg-color: #f7fafc;--card-bg: #ffffff;--text-primary: #2d3748;--text-secondary: #718096;--border-color: #e2e8f0;--font-family: "Segoe UI", system-ui, -apple-system, sans-serif;--ray-color: #f59e0b;--mirror-color: #64748b;--normal-color: #94a3b8;--angle-incident: #3b82f6;--angle-reflected: #ef4444}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-family);background-color:var(--bg-color);color:var(--text-primary);line-height:1.6}.formula{font-family:Times New Roman,serif;font-style:italic;background:#f0f4f8;padding:.5rem 1rem;border-radius:4px;display:inline-block}.formula sub{font-size:.75em}.btn{padding:.6rem 1.2rem;border:none;border-radius:6px;font-size:1rem;cursor:pointer;transition:all .2s}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--primary-color);color:#fff}.btn-primary:hover:not(:disabled){background:var(--primary-light)}@media (pointer: coarse){.btn,button{min-height:44px;min-width:44px;padding:.8rem 1.5rem}input[type=text],input[type=number],input[type=range]{min-height:44px;font-size:1.1rem}}