/* ClassReply: eigene Gestaltung, stabile UI-Schnittstellen. */
:root{--cr-primary:#783f59;--cr-primary-hover:#5e2b42;--cr-primary-soft:#eee0e6;--cr-canvas:#fbf8f9;--cr-text:#30232d;--cr-text-secondary:#55444d;--cr-ink:#30232d;--cr-copper:#bd8266;--cr-line:#9b7e8b}
body{font-family:"Segoe UI",system-ui,sans-serif!important;background:var(--cr-canvas);color:var(--cr-ink)}
button,input,select,textarea{font-family:inherit}
button,a.btn-primary,a.btn-secondary{border-radius:8px!important}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #bd8424!important;outline-offset:3px}
button:disabled{cursor:not-allowed;opacity:.62}
.cr-brand-mark{display:inline-flex;color:var(--cr-primary);width:40px;height:40px;flex:0 0 auto;vertical-align:middle}
.cr-brand-mark svg{display:block;width:100%;height:100%}
body[data-surface="home"] header.site{padding:20px max(24px,calc((100vw - 1120px)/2));border-bottom:1px solid var(--cr-line);background:#fff}
body[data-surface="home"] header .brand-text .title{font-size:1.3rem;letter-spacing:-.04em;font-weight:750;color:var(--cr-ink)}
body[data-surface="home"] header .brand-text .sub{font-size:.7rem}
body[data-surface="home"] section{max-width:1168px}
body[data-surface="home"] .hero{padding-top:68px;padding-bottom:64px}
body[data-surface="home"] .hero-inner{grid-template-columns:1.05fr 1fr;gap:66px}
body[data-surface="home"] .hero h1{font-size:clamp(2.5rem,4.6vw,4.4rem);font-weight:750;letter-spacing:-.065em;color:var(--cr-ink);line-height:1.08;margin:20px 0 24px}
body[data-surface="home"] .hero .lead{color:#755764;font-size:1.05rem;line-height:1.8}
body[data-surface="home"] .badge-free{background:#fff3da;color:#69501c;border-radius:6px;padding:6px 10px;font-size:.75rem}
body[data-surface="home"] .badge-free .dot{background:#be8527;animation:none}
body[data-surface="home"] .btn-primary,body[data-surface="home"] .btn-secondary{font-size:.9rem;padding:13px 19px}
body[data-surface="home"] .info-grid{gap:0;border:1px solid var(--cr-line);border-radius:14px;overflow:hidden;background:white}
body[data-surface="home"] .info-card{border:0;border-right:1px solid var(--cr-line);border-radius:0;padding:26px}
body[data-surface="home"] .info-card:hover{transform:none;box-shadow:none;background:#fefcfd}
body[data-surface="home"] .features{background:transparent;border:0}
body[data-surface="home"] .chip{background:#fff;border:1px solid var(--cr-line);border-radius:7px;padding:10px 14px;color:var(--cr-ink)}
body[data-surface="home"] .register{border-radius:20px;background:var(--cr-ink);color:white;margin-top:20px;margin-bottom:24px}
body[data-surface="home"] .register h2{color:white;font-size:2rem}
body[data-surface="home"] .register .intro{color:#e0ced6}
body[data-surface="home"] .register form{color:var(--cr-ink);box-shadow:none;border-radius:14px}
body[data-surface="home"] .contact .card{background:white;border:1px solid var(--cr-line)}
.footer-brand{display:flex;align-items:center;gap:10px;color:var(--cr-ink)}
.footer-brand .cr-brand-mark{width:30px;height:30px}
.cr-demo-board{width:100%;max-width:440px;background:white;border:1px solid var(--cr-line);border-radius:18px;padding:26px;box-shadow:14px 16px 0 #f4edf0}
.cr-demo-top{display:flex;align-items:center;gap:7px;font-size:.63rem;font-weight:700;letter-spacing:.09em;color:#866a77}
.cr-live-dot{width:7px;height:7px;background:#7a415b;border-radius:100%}
.cr-demo-pill{margin-left:auto;background:#f5edf1;color:#783f59;padding:5px 8px;border-radius:5px;white-space:nowrap}
.cr-demo-question{font-size:1.8rem;font-weight:700;letter-spacing:-.04em;line-height:1.25;margin:30px 0 26px;color:var(--cr-ink)}
.cr-demo-answer{position:relative;display:flex;justify-content:space-between;font-size:.78rem;padding:13px 0 18px;margin-bottom:9px;color:#664a57}
.cr-demo-answer:after{content:"";position:absolute;bottom:0;height:5px;background:#f4eff1;width:100%;border-radius:3px}
.cr-demo-answer i{position:absolute;left:0;bottom:0;height:5px;width:var(--fill);border-radius:3px;background:var(--cr-primary);z-index:1}
.cr-demo-foot{margin-top:28px;border-top:1px solid var(--cr-line);padding-top:16px;font-size:.66rem;color:#967f89}
body[data-surface="admin"]>header{background:var(--cr-ink)!important;border-bottom:3px solid var(--cr-copper)!important;color:white!important}
body[data-surface="admin"]>header a,body[data-surface="admin"]>header a div{color:white!important}
body[data-surface="admin"]>header .cr-brand-mark{color:#d6a2b8}
body[data-surface="admin"]>header button{color:#fbf7f9!important;background:#ffffff12!important;border-color:#ffffff38!important}
body[data-surface="admin"] .layout{grid-template-columns:272px minmax(0,1fr)}
body[data-surface="admin"] .sidebar{background:#f6f0f3;border-right:1px solid #e8dce1;padding:22px 16px}
body[data-surface="admin"] .sidebar h2{color:#755865;letter-spacing:.08em;text-transform:uppercase;font-size:.7rem}
body[data-surface="admin"] .exercise-item{border-radius:8px;border-width:1px;box-shadow:none}
body[data-surface="admin"] .exercise-item.active{box-shadow:inset 3px 0 0 #783f59}
body[data-surface="admin"] .new-btn{font-weight:650;min-height:43px}
body[data-surface="admin"] #loginOverlay{background:#30232df0!important}
body[data-surface="admin"] #loginForm{width:420px!important;max-width:calc(100vw - 32px);padding:38px!important;border-radius:18px!important;border-top:5px solid var(--cr-copper)}
body[data-surface="student"]{background:#f9f4f6;padding:24px 16px}
body[data-surface="student"] .seminar-header{background:var(--cr-ink);border:0;border-radius:14px;padding:12px 18px;margin-bottom:10px;gap:4px;box-shadow:none}
body[data-surface="student"] .seminar-header .seminar-name{color:white;font-size:1.1rem;line-height:1.2;font-weight:650}
body[data-surface="student"] .seminar-header .seminar-subtitle{color:#dac6cf;font-size:.85rem;line-height:1.2;margin-top:0}
body[data-surface="student"] .seminar-header .cr-brand-mark{color:#d6a2b8;width:32px;height:32px}
body[data-surface="student"] .card{border:1px solid var(--cr-line);border-radius:14px;box-shadow:0 8px 24px #30232d06}
body[data-surface="reset"] .card{border-top:5px solid var(--cr-copper);border-radius:16px}
.cr-legal{max-width:760px;margin:10vh auto;padding:32px;background:white;border:1px solid var(--cr-line);border-radius:16px;line-height:1.7}
@media(max-width:820px){body[data-surface="home"] .hero-inner{grid-template-columns:1fr;gap:32px}body[data-surface="home"] .hero-illu{order:0;max-width:440px;width:100%;margin:0 auto}body[data-surface="home"] .hero{padding:36px 22px}body[data-surface="home"] .info-grid{display:block}body[data-surface="home"] .info-card{border-bottom:1px solid var(--cr-line)}body[data-surface="home"] header.site{padding:15px 18px;gap:14px}}
@media(max-width:768px){body[data-surface="admin"] .layout{grid-template-columns:1fr}body[data-surface="admin"]>header{padding:12px!important;gap:12px!important;flex-wrap:wrap}body[data-surface="student"]{padding:12px}.cr-demo-board{box-shadow:7px 8px 0 #f4edf0;padding:22px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

body[data-surface="home"] .register .register-wrap h2{color:#30232d}
body[data-surface="home"] .register .register-wrap .intro{color:#755764}

/* Anmeldung und Übungsadmin verwenden dieselbe Primärfarbe und Auswahlfläche. */
body[data-surface="admin"] #loginForm button[type="submit"],
body[data-surface="admin"] .new-btn,
body[data-surface="admin"] .folder-add-btn,
body[data-surface="admin"] .btn-save,
body[data-surface="admin"] .btn-live,
body[data-surface="admin"] .btn-toggle-on{background:var(--cr-primary)!important;color:#fff!important}
body[data-surface="admin"] #loginForm button[type="submit"]:hover,
body[data-surface="admin"] .new-btn:hover,
body[data-surface="admin"] .folder-add-btn:hover,
body[data-surface="admin"] .btn-save:hover,
body[data-surface="admin"] .btn-live:hover{background:var(--cr-primary-hover)!important}
body[data-surface="admin"] .main h1,
body[data-surface="admin"] .sidebar h2,
body[data-surface="admin"] .live-controls h2{color:var(--cr-primary)}
body[data-surface="admin"] .sidebar{background:var(--cr-primary-soft);border-color:var(--cr-line)}
body[data-surface="admin"] .exercise-item.active{border-color:var(--cr-primary);background:var(--cr-primary-soft);box-shadow:inset 3px 0 0 var(--cr-primary)}
body[data-surface="admin"] .type-badge{background:var(--cr-primary-soft);color:var(--cr-primary-hover)}
body[data-surface="admin"] input[type="checkbox"],
body[data-surface="admin"] input[type="radio"]{accent-color:var(--cr-primary)}

/* Kräftige Textfarben und erkennbare Eingabefelder auf hellen Oberflächen. */
body{color:var(--cr-text)}
input::placeholder,textarea::placeholder{color:var(--cr-text-secondary)!important;opacity:1}
button:disabled{opacity:1;color:#49343e!important;background:#e7dce1!important;border:1px solid var(--cr-line)!important}
body[data-surface="admin"] #loginForm{color:var(--cr-text)}
body[data-surface="admin"] #loginForm label{color:var(--cr-text)!important}
body[data-surface="admin"] #loginForm input{border-color:var(--cr-line)!important;color:var(--cr-text);background:#fff}
body[data-surface="admin"] #loginForm input:focus{border-color:var(--cr-primary)!important}
body[data-surface="admin"] .sidebar h2,
body[data-surface="admin"] .folder-section label,
body[data-surface="admin"] .form-group label{color:var(--cr-text)}
body[data-surface="admin"] .hint,
body[data-surface="admin"] .empty-state,
body[data-surface="reset"] .sub,
body[data-surface="reset"] .hint{color:var(--cr-text-secondary)}
body[data-surface="admin"] .exercise-item{border-color:var(--cr-line)}
body[data-surface="admin"] .exercise-item.active{border-color:var(--cr-primary);border-width:2px}
body[data-surface="reset"] input{border-color:var(--cr-line)}
body[data-surface="student"] .traffic-btn.traffic-green.selected{color:#102a1c}
body[data-surface="student"] .traffic-btn.traffic-yellow.selected{color:#30232d}
body[data-surface="student"] .traffic-btn.traffic-red.selected{background:#b52637}