/* Reflexionstool — gemeinsames Design für alle Kurse (franke-lab.de) */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#ffffff;--fg:#0a0a0a;--card:#ffffff;--border:#e2e8f0;
  --secondary:#f1f5f9;--muted:#64748b;--primary:#2563eb;
  --primary-hover:#1d4ed8;--primary-light:#eff6ff;
  --radius:0.625rem;
  --shadow:0 1px 3px rgba(0,0,0,0.07),0 1px 2px rgba(0,0,0,0.04);
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh;font-size:16px;line-height:1.6}

nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,0.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);padding:0 1.5rem;height:56px;display:flex;align-items:center;justify-content:space-between}
.nav-brand{display:flex;align-items:center;gap:0.5rem;text-decoration:none;color:var(--fg)}
.nav-brand img{width:26px;height:26px;object-fit:contain}
.nav-name{font-weight:700;font-size:0.9375rem;letter-spacing:-0.02em}
.nav-name span{color:var(--primary)}
.nav-right{display:flex;align-items:center;gap:0.75rem}
.nav-right .phw{height:28px;width:auto;object-fit:contain}
.lang-switch{display:flex;background:rgba(255,255,255,0.6);border-radius:8px;padding:4px 10px;box-shadow:0 2px 6px rgba(0,0,0,0.1)}
.lang-switch button{background:none;border:none;font-size:0.8125rem;font-weight:600;cursor:pointer;padding:0.25rem 0.5rem;border-radius:4px;font-family:inherit;color:#94a3b8}
.lang-switch button.active{color:#0a0a0a}

.page{max-width:720px;margin:0 auto;padding:2rem 1.5rem 4rem}
.page-header{margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border)}
.page-header h1{font-size:1.5rem;font-weight:700;letter-spacing:-0.02em}
.page-header .meta{color:var(--muted);font-size:0.9375rem;margin-top:0.25rem}
.page-header .intro{color:var(--muted);font-size:0.9375rem;margin-top:0.75rem;line-height:1.7}
.draft-note{font-size:0.8125rem;color:var(--muted);margin-top:0.75rem}

.section{margin-bottom:1.5rem}
.section-label{font-size:0.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:#0f172a;margin-bottom:0.5rem}
.section-hint{font-size:0.875rem;color:#1e293b;margin-bottom:0.5rem;line-height:1.6}
.section-img{text-align:center;margin:0.5rem 0 0.75rem}
.section-img img{max-width:100%;max-height:240px;border-radius:8px;border:1px solid var(--border);box-shadow:var(--shadow)}
.section-links{font-size:0.875rem;margin:0.25rem 0 0.6rem}
.section-links a{color:var(--primary)}

.editor-wrap{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.editor-wrap:focus-within{border-color:var(--primary)}
.toolbar{display:flex;flex-wrap:wrap;gap:0.125rem;padding:0.375rem 0.5rem;background:var(--secondary);border-bottom:1px solid var(--border)}
.toolbar button{background:none;border:1px solid transparent;border-radius:4px;padding:0.375rem 0.625rem;font-size:0.8125rem;font-weight:600;color:var(--muted);cursor:pointer;font-family:inherit}
.toolbar button:hover{background:var(--card);border-color:var(--border);color:var(--fg)}
.editor{min-height:120px;padding:0.875rem;outline:none;font-size:0.9375rem;line-height:1.7}
.editor:empty::before{content:attr(data-placeholder);color:#9ca3af;white-space:pre-line}
.editor ul,.editor ol{margin-left:1.25rem}
.editor p{margin-bottom:0.25rem}

.feedback-section{margin-bottom:2rem}
.feedback-card{background:var(--secondary);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.25rem}
.feedback-card.closed{opacity:0.5;pointer-events:none}
.slider-group{margin-bottom:0.875rem}
.slider-label{display:flex;justify-content:space-between;font-size:0.8125rem;font-weight:600}
.slider-val{color:var(--primary);min-width:1rem;text-align:right}
.slider-ends{display:flex;justify-content:space-between;font-size:0.6875rem;color:var(--muted);margin-bottom:0.25rem}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:var(--border);outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--primary);cursor:pointer;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,0.15)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--primary);cursor:pointer;border:2px solid #fff}
input[type=range].untouched::-webkit-slider-thumb{background:#cbd5e1}
input[type=range].untouched::-moz-range-thumb{background:#cbd5e1}
.fb-msg{text-align:center;font-size:0.8125rem;margin-top:0.5rem;min-height:1.25rem;color:var(--muted)}
.fb-msg.ok{color:#059669}.fb-msg.err{color:#dc2626}

.output-section{display:none;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border)}
.output-section.visible{display:block}
.output-label{font-size:0.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--muted);margin-bottom:0.75rem}
.output-preview{background:var(--secondary);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem 1.5rem;font-size:0.9375rem;line-height:1.7;max-height:500px;overflow-y:auto}
.output-preview h3{font-size:0.875rem;font-weight:600;margin:1rem 0 0.25rem}
.output-preview p{margin-bottom:0.375rem}
.output-preview ul,.output-preview ol{margin-left:1.25rem}

.btn-row{display:flex;gap:0.5rem;margin-top:1.5rem;flex-wrap:wrap}
.btn{padding:0.625rem 1.5rem;border-radius:var(--radius);font-size:0.9375rem;font-weight:600;font-family:inherit;cursor:pointer;border:1px solid var(--border)}
.btn:disabled{opacity:0.5;cursor:not-allowed}
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn-primary:hover:not(:disabled){background:var(--primary-hover)}
.btn-secondary{background:var(--card);color:var(--fg)}
.btn-success{background:#059669;color:#fff;border-color:#059669}
.btn-link{background:none;border:none;color:var(--muted);font-size:0.8125rem;text-decoration:underline;cursor:pointer;font-family:inherit;padding:0}

.toast{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%);background:var(--fg);color:#fff;padding:0.5rem 1.25rem;border-radius:var(--radius);font-size:0.8125rem;opacity:0;transition:opacity 0.3s;pointer-events:none;z-index:200}
.toast.show{opacity:1}
footer{border-top:1px solid var(--border);padding:1rem 1.5rem;text-align:center;font-size:0.75rem;color:var(--muted);background:var(--secondary)}

@media(max-width:520px){
  .page{padding:1.5rem 1rem 3rem}
  .btn-row{flex-direction:column}
  .btn{width:100%}
  .nav-right .phw{display:none}
}