:root {
    --st-primary: #255c4d;
    --st-primary-dark: #183f35;
    --st-primary-light: #e2f1ea;
    --st-accent: #e6a93d;
    --st-ink: #1c2b27;
    --st-muted: #65736e;
    --st-border: #dce5e1;
    --st-surface: #ffffff;
    --st-background: #f4f7f5;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--st-ink); background: var(--st-background); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
.topbar { background: rgba(255, 255, 255, .94); border-bottom: 1px solid var(--st-border); box-shadow: 0 4px 20px rgba(26, 61, 51, .04); }
.brand { display: inline-flex; align-items: center; gap: .75rem; color: var(--st-ink); font-size: 1.28rem; font-weight: 750; text-decoration: none; letter-spacing: -.03em; }
.brand > span:last-child > span { color: var(--st-primary); }
.brand-mark { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; color: white; border-radius: .8rem; background: var(--st-primary); box-shadow: 0 7px 15px rgba(37, 92, 77, .2); }
.brand-mark svg { width: 1.35rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.school-badge { align-items: center; gap: .55rem; padding: .5rem .85rem; color: var(--st-muted); background: var(--st-background); border: 1px solid var(--st-border); border-radius: 999px; font-size: .84rem; font-weight: 650; }
.status-dot { width: .5rem; height: .5rem; border-radius: 50%; background: #41a47c; box-shadow: 0 0 0 4px #dcefe7; }
.school-name { max-width: 18rem; overflow: hidden; color: var(--st-muted); font-size: .82rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.hero { position: relative; display: flex; align-items: center; min-height: 245px; overflow: hidden; padding: clamp(2rem, 5vw, 4rem); color: white; border-radius: 1.6rem; background: linear-gradient(125deg, var(--st-primary-dark), var(--st-primary)); box-shadow: 0 18px 45px rgba(29, 70, 59, .15); }
.hero::before { content: ""; position: absolute; right: 8%; bottom: -85%; width: 22rem; height: 22rem; border: 1px solid rgba(255, 255, 255, .1); border-radius: 50%; }
.hero-content { position: relative; z-index: 1; max-width: 670px; }
.hero h1 { margin: 0 0 .85rem; font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 780; letter-spacing: -.045em; }
.hero-copy { max-width: 590px; color: rgba(255,255,255,.78); font-size: clamp(1rem, 2vw, 1.14rem); line-height: 1.65; }
.hero-decoration { position: absolute; right: 5%; color: rgba(255,255,255,.11); }
.hero-decoration svg { width: 10rem; fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.eyebrow { color: var(--st-accent); font-size: .76rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.section-heading h2 { margin: 0; font-size: 1.7rem; font-weight: 750; letter-spacing: -.03em; }
.module-count { padding: .35rem .75rem; color: var(--st-primary); background: var(--st-primary-light); border-radius: 999px; font-size: .78rem; font-weight: 700; }
.module-card { height: 100%; min-height: 205px; display: flex; align-items: flex-start; gap: 1.15rem; position: relative; padding: 1.6rem; color: inherit; background: var(--st-surface); border: 1px solid var(--st-border); border-radius: 1.25rem; text-decoration: none; box-shadow: 0 8px 24px rgba(34, 68, 58, .05); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.module-card:hover, .module-card:focus-visible { color: inherit; transform: translateY(-4px); border-color: #a9c9bd; box-shadow: 0 16px 36px rgba(34, 68, 58, .11); }
.module-card:focus-visible { outline: 3px solid rgba(230, 169, 61, .45); outline-offset: 3px; }
.module-icon { flex: 0 0 auto; width: 3.2rem; height: 3.2rem; display: grid; place-items: center; color: var(--st-primary); background: var(--st-primary-light); border-radius: 1rem; }
.module-icon svg, .module-arrow svg { width: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.module-card-body { display: flex; flex-direction: column; padding-top: .1rem; }
.module-card-body strong { margin: .35rem 0 .55rem; font-size: 1.18rem; }
.module-card-body > span:last-child { color: var(--st-muted); font-size: .92rem; line-height: 1.55; }
.module-label { color: var(--st-primary); font-size: .7rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.module-arrow { position: absolute; right: 1.4rem; bottom: 1.4rem; display: grid; place-items: center; width: 2rem; height: 2rem; color: var(--st-primary); border-radius: 50%; background: var(--st-background); transition: transform .2s ease, background .2s ease; }
.module-card:hover .module-arrow { transform: translateX(3px); background: var(--st-primary-light); }
footer { color: var(--st-muted); font-size: .82rem; text-align: center; }
.copyright { font-size: .76rem; }
@media (max-width: 575.98px) { main.container { padding-top: 1.5rem !important; } .hero { min-height: 285px; padding: 2rem 1.5rem; } .hero-decoration { right: -3.5rem; bottom: -2rem; } .module-card { min-height: 185px; } }
@media (max-width: 767.98px) { .topbar .school-name { display: none; } }
@media (prefers-reduced-motion: reduce) { .module-card, .module-arrow { transition: none; } }

/* Schüler- und Klassenverwaltung */
.back-link { color: var(--st-primary); font-size: .88rem; font-weight: 700; text-decoration: none; }
.back-link:hover { color: var(--st-primary-dark); }
.management-heading h1 { margin: 0 0 .45rem; font-size: clamp(2rem, 4vw, 2.7rem); font-weight: 780; letter-spacing: -.045em; }
.management-heading > p:last-child { margin: 0; color: var(--st-muted); }
.stat-card { padding: 1.15rem 1.3rem; background: white; border: 1px solid var(--st-border); border-radius: 1rem; box-shadow: 0 6px 20px rgba(34,68,58,.04); }
.stat-card span { display: block; margin-bottom: .15rem; color: var(--st-muted); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.stat-card strong { color: var(--st-primary); font-size: 1.8rem; line-height: 1; }
.management-tabs { gap: .25rem; padding-left: .75rem; border-bottom: 1px solid var(--st-border); }
.management-tabs .nav-link { padding: .8rem 1.2rem; color: var(--st-muted); border: 0; border-bottom: 3px solid transparent; font-weight: 700; }
.management-tabs .nav-link:hover { color: var(--st-primary); }
.management-tabs .nav-link.active { color: var(--st-primary); background: transparent; border-bottom-color: var(--st-primary); }
.management-panel { overflow: hidden; background: white; border: 1px solid var(--st-border); border-top: 0; border-radius: 0 0 1.2rem 1.2rem; box-shadow: 0 12px 35px rgba(34,68,58,.06); }
.panel-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem; border-bottom: 1px solid var(--st-border); }
.panel-toolbar h2 { margin: 0 0 .2rem; font-size: 1.3rem; font-weight: 750; }
.panel-toolbar p { margin: 0; color: var(--st-muted); font-size: .88rem; }
.toolbar-actions { display: flex; gap: .65rem; }
.btn-school { color: white; background: var(--st-primary); border-color: var(--st-primary); font-weight: 650; }
.btn-school:hover, .btn-school:focus { color: white; background: var(--st-primary-dark); border-color: var(--st-primary-dark); }
.management-table thead th { padding: .85rem 1.5rem; color: var(--st-muted); background: #f7f9f8; border-bottom-color: var(--st-border); font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; }
.management-table tbody td { padding: 1rem 1.5rem; border-color: #edf1ef; }
.person-cell { display: flex; align-items: center; gap: .8rem; }
.person-cell > div { display: flex; flex-direction: column; }
.person-cell strong { font-size: .92rem; }
.person-cell small { color: var(--st-muted); font-size: .72rem; }
.person-link { display: inline-block; color: inherit; text-decoration: none; border-radius: .8rem; }
.person-link:hover strong, .person-link:focus-visible strong { color: var(--st-primary); text-decoration: underline; text-underline-offset: .2rem; }
.person-link:focus-visible { outline: 3px solid rgba(230, 169, 61, .45); outline-offset: 3px; }
.avatar { width: 2.45rem; height: 2.45rem; display: grid; place-items: center; flex: 0 0 auto; color: var(--st-primary); background: var(--st-primary-light); border-radius: .75rem; font-size: .75rem; font-weight: 800; }
.class-pill { display: inline-block; min-width: 2.3rem; padding: .3rem .65rem; color: var(--st-primary); background: var(--st-primary-light); border-radius: 999px; font-size: .78rem; font-weight: 750; text-align: center; }
.unassigned { color: var(--st-muted); font-size: .82rem; font-style: italic; }
.actions form, .class-actions form { display: inline; }
.empty-state { padding: 4rem 1.5rem; text-align: center; }
.empty-state > span { display: block; margin-bottom: .75rem; font-size: 2rem; }
.empty-state h3 { font-size: 1.1rem; }
.empty-state p { margin: 0; color: var(--st-muted); }
.class-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; padding: 1.5rem; }
.class-card { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; border: 1px solid var(--st-border); border-radius: 1rem; }
.class-card-icon { width: 3rem; height: 3rem; display: grid; place-items: center; color: var(--st-primary); background: var(--st-primary-light); border-radius: .85rem; font-size: 1.3rem; }
.class-card span { color: var(--st-muted); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.class-card h3 { margin: .05rem 0; font-size: 1.25rem; }
.class-card p { margin: 0; color: var(--st-muted); font-size: .8rem; }
.class-actions { display: flex; align-items: end; flex-direction: column; gap: .25rem; }
.modal-content { border: 0; border-radius: 1.15rem; box-shadow: 0 24px 70px rgba(24,63,53,.2); }
.modal-header, .modal-footer { border-color: var(--st-border); }
.form-control:focus, .form-select:focus { border-color: #75a796; box-shadow: 0 0 0 .25rem rgba(37,92,77,.12); }
.student-filters { display: grid; grid-template-columns: minmax(220px, 2fr) minmax(150px, 1fr) minmax(150px, 1fr) auto auto; gap: .65rem; padding: 1rem 1.5rem; background: #f7f9f8; border-bottom: 1px solid var(--st-border); }
.filter-search { position: relative; }
.filter-search > span { position: absolute; z-index: 1; left: .9rem; top: 50%; color: var(--st-muted); font-size: 1.15rem; transform: translateY(-54%); }
.filter-search .form-control { padding-left: 2.4rem; }
.student-filters .form-control, .student-filters .form-select, .student-filters .btn { min-height: 2.65rem; font-size: .86rem; }
.student-filters .btn { display: grid; place-items: center; white-space: nowrap; }
.filter-result { padding: .65rem 1.5rem; color: var(--st-muted); background: white; border-bottom: 1px solid var(--st-border); font-size: .8rem; }
.csv-example { padding: 1rem; background: #f4f7f5; border: 1px solid var(--st-border); border-radius: .75rem; }
.csv-example span { display: block; margin-bottom: .4rem; color: var(--st-muted); font-size: .72rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.csv-example code { color: var(--st-primary-dark); line-height: 1.7; }
@media (max-width: 575.98px) { .back-link { font-size: 0; } .back-link::after { content: "←"; font-size: 1.25rem; } .panel-toolbar { align-items: flex-start; flex-direction: column; } .panel-toolbar .btn, .toolbar-actions { width: 100%; } .toolbar-actions { flex-direction: column; } .management-table thead th, .management-table tbody td { padding-left: .8rem; padding-right: .8rem; } .actions .btn { display: block; margin-left: auto; } }
@media (max-width: 991.98px) { .student-filters { grid-template-columns: 1fr 1fr; } .filter-search { grid-column: 1 / -1; } }
@media (max-width: 575.98px) { .student-filters { grid-template-columns: 1fr; padding: 1rem; } .filter-search { grid-column: auto; } }

/* Anmeldungen und Angebote */
.registration-filters { display: grid; grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(135px, 1fr)) auto auto; gap: .65rem; padding: 1rem 1.5rem; background: #f7f9f8; border-bottom: 1px solid var(--st-border); }
.registration-filters .form-control, .registration-filters .form-select, .registration-filters .btn { min-height: 2.65rem; font-size: .86rem; }
.registration-filters .btn { display: grid; place-items: center; white-space: nowrap; }
.setup-hint { padding: .8rem 1.5rem; color: #72520f; background: #fff8e7; border-bottom: 1px solid #f0dfb9; font-size: .84rem; }
.status-pill { display: inline-block; padding: .32rem .68rem; border-radius: 999px; font-size: .75rem; font-weight: 750; }
.status-angemeldet { color: #24567b; background: #e6f2fa; }
.status-bestaetigt { color: var(--st-primary); background: var(--st-primary-light); }
.status-warteliste { color: #795814; background: #fff3d5; }
.status-storniert { color: #8b2e34; background: #fbeaec; }
.offer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 1rem; padding: 1.5rem; }
.offer-card { display: flex; align-items: flex-start; gap: 1rem; min-height: 145px; padding: 1.25rem; border: 1px solid var(--st-border); border-radius: 1rem; }
.offer-card-icon { width: 3rem; height: 3rem; display: grid; place-items: center; flex: 0 0 auto; color: var(--st-primary); background: var(--st-primary-light); border-radius: .85rem; font-size: 1.15rem; font-weight: 800; }
.offer-card span { color: var(--st-muted); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.offer-card h3 { margin: .15rem 0 .35rem; font-size: 1.12rem; }
.offer-card p { max-width: 38rem; margin: 0; color: var(--st-muted); font-size: .82rem; line-height: 1.5; }
.offer-card .offer-teacher { margin-top: .55rem; color: var(--st-primary); font-weight: 700; }
.student-profile { display: flex; align-items: center; gap: 1.35rem; padding: 1.6rem; background: white; border: 1px solid var(--st-border); border-radius: 1.2rem; box-shadow: 0 8px 24px rgba(34,68,58,.05); }
.profile-avatar { width: 4.6rem; height: 4.6rem; display: grid; place-items: center; flex: 0 0 auto; color: white; background: var(--st-primary); border-radius: 1.2rem; font-size: 1.25rem; font-weight: 800; }
.student-profile h1 { margin: 0 0 .25rem; font-size: clamp(1.75rem, 4vw, 2.4rem); font-weight: 780; letter-spacing: -.04em; }
.student-profile p:last-child { margin: 0; color: var(--st-muted); font-size: .88rem; }
.student-registration-panel { border-top: 1px solid var(--st-border); border-radius: 1.2rem; }
.offer-description { display: block; max-width: 30rem; margin-top: .2rem; color: var(--st-muted); font-size: .75rem; font-weight: 400; }
@media (max-width: 575.98px) { .student-profile { align-items: flex-start; padding: 1.25rem; } .profile-avatar { width: 3.7rem; height: 3.7rem; } }
@media (max-width: 1199.98px) { .registration-filters { grid-template-columns: repeat(2, 1fr); } .registration-filters .filter-search { grid-column: 1 / -1; } }
@media (max-width: 575.98px) { .registration-filters { grid-template-columns: 1fr; padding: 1rem; } .registration-filters .filter-search { grid-column: auto; } .offer-grid { grid-template-columns: 1fr; padding: 1rem; } .offer-card { flex-wrap: wrap; } .offer-card .class-actions { width: 100%; align-items: flex-start; } }

/* Anmeldung */
.logout-button { padding: .48rem .8rem; color: var(--st-muted); background: transparent; border: 1px solid var(--st-border); border-radius: .65rem; font-size: .82rem; font-weight: 650; }
.logout-button:hover { color: var(--st-primary); background: var(--st-background); }
.login-page { min-height: 100vh; background: white; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, 44%) 1fr; }
.login-brand-panel { position: relative; display: flex; align-items: center; overflow: hidden; padding: clamp(2.5rem, 6vw, 6rem); color: white; background: linear-gradient(145deg, var(--st-primary-dark), var(--st-primary)); }
.login-brand-panel::after { content: ""; position: absolute; width: 26rem; height: 26rem; right: -13rem; bottom: -13rem; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; box-shadow: 0 0 0 4rem rgba(255,255,255,.025), 0 0 0 8rem rgba(255,255,255,.02); }
.login-brand-content { position: relative; z-index: 1; max-width: 520px; }
.login-logo { display: flex; align-items: center; gap: .8rem; margin-bottom: clamp(4rem, 12vh, 8rem); }
.login-logo strong { font-size: 1.45rem; letter-spacing: -.03em; }
.login-logo strong span { color: #9ed4bf; }
.login-brand-content h1 { margin: .7rem 0 1.2rem; font-size: clamp(2.4rem, 4vw, 4.1rem); font-weight: 780; letter-spacing: -.055em; line-height: 1.07; }
.login-brand-content > p:last-child { max-width: 450px; color: rgba(255,255,255,.7); font-size: 1.05rem; line-height: 1.65; }
.login-form-panel { display: grid; place-items: center; padding: 2rem; background: var(--st-background); }
.login-card { width: min(100%, 430px); padding: clamp(1.8rem, 4vw, 3rem); background: white; border: 1px solid var(--st-border); border-radius: 1.35rem; box-shadow: 0 20px 55px rgba(34,68,58,.09); }
.login-card h2 { margin: 0; font-size: 2rem; font-weight: 780; letter-spacing: -.04em; }
.login-intro { margin: .55rem 0 1.8rem; color: var(--st-muted); }
.login-form { display: grid; gap: 1.15rem; }
.login-form .form-label { font-size: .82rem; font-weight: 700; }
.login-form .form-control { min-height: 3.2rem; border-color: var(--st-border); font-size: 1rem; }
.login-form .btn { display: flex; align-items: center; justify-content: space-between; margin-top: .35rem; padding: .85rem 1.15rem; font-size: .95rem; }
.login-message { margin-bottom: 1rem; padding: .8rem 1rem; border-radius: .7rem; font-size: .84rem; }
.login-error { color: #8b2e34; background: #fbeaec; border: 1px solid #f4cbd0; }
.login-success { color: var(--st-primary-dark); background: var(--st-primary-light); border: 1px solid #c5dfd4; }
.login-note { margin: 1.5rem 0 0; color: var(--st-muted); font-size: .75rem; text-align: center; }
.login-copyright { margin: .65rem 0 0; color: var(--st-muted); font-size: .72rem; text-align: center; }
.login-note span { color: #41a47c; }
.login-mobile-logo { display: none; }
@media (max-width: 800px) { .login-shell { grid-template-columns: 1fr; } .login-brand-panel { display: none; } .login-form-panel { padding: 1.25rem; } .login-mobile-logo { display: flex; align-items: center; gap: .7rem; margin-bottom: 2.5rem; } .login-mobile-logo .brand-mark { width: 2.2rem; height: 2.2rem; } }