:root {
  --primary: #2B726D;
  --primary-dark: #205753;
  --bg: #f4f7f6;
  --card: #ffffff;
  --text: #1f2928;
  --muted: #6b7776;
  --border: #d8e1e0;
  --danger: #a52a2a;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text); background: var(--bg); }
body { display: block; min-height: 100vh; }
.shell { width: min(960px, 100%); margin: 0 auto; padding: 24px; }
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.brand-mark { width: 42px; height: 42px; border-radius: 12px; background: var(--primary); color: white; display: grid; place-items: center; font-weight: 800; }
h1, h2, h3 { margin-top: 0; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 22px; box-shadow: 0 8px 24px rgba(43,114,109,.06); }
.login-card { max-width: 460px; margin: 0 auto; }
label { display:block; font-weight: 650; margin-bottom: 7px; }
input[type=text], input[type=password], input[type=file] { width: 100%; padding: 13px 14px; border: 1px solid #b9c7c5; border-radius: 10px; font: inherit; background:white; }
input:focus { outline: 3px solid rgba(43,114,109,.15); border-color: var(--primary); }
button, .button { display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:10px; background:var(--primary); color:#fff; padding:12px 17px; font:inherit; font-weight:700; cursor:pointer; text-decoration:none; }
button:hover, .button:hover { background:var(--primary-dark); }
.button.secondary { background:#e7efee; color:var(--primary-dark); }
.actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.muted { color:var(--muted); }
.error { background:#fff0f0; border:1px solid #efcaca; color:#7f2020; padding:11px 13px; border-radius:10px; margin-bottom:14px; }
.success { background:#eef8f6; border:1px solid #bedbd6; color:#174944; padding:11px 13px; border-radius:10px; margin-bottom:14px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin:16px 0; }
.stat { background:#f7faf9; border:1px solid var(--border); border-radius:12px; padding:14px; }
.stat strong { display:block; font-size:1.55rem; color:var(--primary); }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; border-bottom:1px solid var(--border); padding:9px 8px; vertical-align:top; }
th { color:var(--primary-dark); }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px; }
.small-link { color:var(--primary); text-decoration:none; font-weight:650; }
@media (max-width:600px){ .shell{padding:16px}.card{padding:18px}.topbar{align-items:flex-start;flex-direction:column} }
.shell.wide { width: min(1240px, 100%); }
select { width:100%; padding:12px 13px; border:1px solid #b9c7c5; border-radius:10px; background:#fff; font:inherit; }
.test-filter { display:grid; grid-template-columns:minmax(160px,1fr) minmax(210px,1fr) auto; gap:12px; align-items:end; }
.filter-button { padding-bottom:0; }
.table-scroll { overflow-x:auto; }
.timetable { min-width:800px; table-layout:fixed; }
.timetable th:first-child { width:60px; text-align:center; }
.timetable td { height:42px; }
.timetable tbody tr:nth-child(even) td, .timetable tbody tr:nth-child(even) th { background:#f3f6f5; }
.group-detail { padding:10px 0; border-top:1px solid var(--border); line-height:1.55; }
.group-detail:first-of-type { border-top:0; }
@media (max-width:700px){ .test-filter{grid-template-columns:1fr}.filter-button button{width:100%} }

/* v0.3 Admin-Navigation */
.admin-nav { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:-4px 0 18px; padding:7px; background:#e7efee; border:1px solid var(--border); border-radius:12px; }
.admin-nav a, .admin-nav .nav-logout { appearance:none; border:0; background:transparent; color:var(--primary-dark); padding:9px 11px; border-radius:8px; text-decoration:none; font:inherit; font-weight:700; cursor:pointer; }
.admin-nav a:hover, .admin-nav a.active, .admin-nav .nav-logout:hover { background:#fff; color:var(--primary); }
.admin-nav .logout-form { margin-left:auto; }
.admin-nav .nav-logout { min-width:auto; }
.admin-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
@media (max-width:760px){ .admin-grid{grid-template-columns:1fr}.admin-nav .logout-form{margin-left:0} }

/* v0.4 Schüler-Stundenplan / Mapping-Test */
.student-filter { display:grid; grid-template-columns:minmax(180px,.8fr) minmax(260px,1.3fr) auto; gap:12px; align-items:end; }
.student-filter-note { margin:14px 0 0; }
.student-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.student-head h2 { margin-bottom:4px; }
.pill { display:inline-flex; align-items:center; padding:7px 11px; border-radius:999px; background:#e7efee; color:var(--primary-dark); font-weight:750; white-space:nowrap; }
.mapping-table { min-width:900px; }
.map-status { display:inline-block; padding:4px 8px; border-radius:999px; font-size:.88rem; font-weight:750; }
.map-status.eindeutig { background:#e6f4ef; color:#18584e; }
.map-status.mehrdeutig { background:#fff5df; color:#765414; }
.map-status.offen { background:#fbeaea; color:#842c2c; }
.mapping-stats .stat strong { font-size:1.35rem; }
@media (max-width:800px){ .student-filter{grid-template-columns:1fr}.student-filter .filter-button button{width:100%}.student-head{flex-direction:column}.pill{align-self:flex-start} }

/* v0.4.5: Schuljahres-Reset */
.button.danger-button, button.danger-button { background:var(--danger); color:#fff; }
.button.danger-button:hover, button.danger-button:hover { filter:brightness(.9); }
.danger-card { border:1px solid rgba(165,42,42,.28); }
.admin-nav a.danger-link { color:var(--danger); }
.admin-nav a.danger-link.active { color:#fff; background:var(--danger); }
.error-box { margin:14px 0; padding:12px 14px; border-radius:10px; background:#f7eaea; color:#7d2020; }


/* v0.4.7: aufklappbare Schülerlisten in der Zuordnungsprüfung */
.affected-students summary{cursor:pointer;font-weight:600;white-space:nowrap;color:#2B726D}
.affected-students[open] summary{margin-bottom:7px}
.affected-list{min-width:190px;padding:8px 10px;border-left:3px solid #2B726D;background:rgba(43,114,109,.06);border-radius:6px}
.affected-list>div{padding:3px 0;white-space:nowrap}

/* v0.5.0: persönlicher Schüler-Stundenplan im kompakten GG-go-Stil */
.personal-plan-card{padding:0;overflow:hidden}
.personal-plan-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:22px 22px 16px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,#fff,#f8fbfa)}
.personal-plan-head h2{margin:2px 0 0;font-size:1.55rem}
.personal-plan-class{font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:var(--primary);font-weight:800}
.plan-warning{margin:16px 22px 0;padding:10px 12px;border-radius:10px;background:#fff7e6;border:1px solid #ecd6a3;color:#6a5119}
.personal-plan-scroll{padding:16px 22px 22px}
.personal-timetable{min-width:880px;table-layout:fixed;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#fff}
.personal-timetable th,.personal-timetable td{border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:0}
.personal-timetable tr:last-child th,.personal-timetable tr:last-child td{border-bottom:0}
.personal-timetable th:last-child,.personal-timetable td:last-child{border-right:0}
.personal-timetable thead th{padding:10px 8px;text-align:center;background:#e7efee;color:var(--primary-dark);font-size:.93rem}
.personal-timetable .hour-head{width:54px}
.personal-timetable .hour-cell{width:54px;text-align:center;background:#f4f7f6;color:var(--primary-dark);vertical-align:middle}
.personal-timetable .hour-cell span{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#e7efee;font-weight:800}
.plan-cell{height:58px;vertical-align:top;background:#fff}
.personal-timetable tbody tr:nth-child(even) .plan-cell{background:#fbfcfc}
.lesson-chip{min-height:57px;padding:8px 9px;border-left:4px solid var(--primary);display:flex;flex-direction:column;justify-content:center}
.lesson-chip+.lesson-chip{border-top:1px dashed var(--border)}
.lesson-subject{font-weight:850;font-size:1.02rem;color:#172522;line-height:1.15}
.lesson-meta{display:flex;gap:5px;align-items:center;flex-wrap:wrap;margin-top:4px;color:#5f6d6b;font-size:.86rem;line-height:1.15}
.lesson-meta .dot{color:#9aa6a4}
@media(max-width:700px){.personal-plan-head{padding:18px}.personal-plan-scroll{padding:12px}.plan-warning{margin:12px 18px 0}.personal-plan-head h2{font-size:1.35rem}.personal-timetable{min-width:760px}.plan-cell{height:54px}.lesson-chip{min-height:53px;padding:7px 8px}.lesson-subject{font-size:.96rem}.lesson-meta{font-size:.8rem}}


/* v0.5.2: persönlicher Stundenplan – GG-Go-Optik mit GG-neo-Farbe */
.personal-plan-card{
  padding:0;
  overflow:visible;
  background:transparent;
  border:0;
  box-shadow:none;
}
.gggo-plan-title{
  display:block;
  text-align:center;
  padding:0 0 12px;
  border:0;
  background:transparent;
}
.gggo-plan-title h1{margin:0 0 -4px;font:700 22px Arial,Helvetica,sans-serif;color:#17201f}
.gggo-plan-title h2{margin:8px 0 0;font:400 14px Arial,Helvetica,sans-serif;color:#17201f}
.personal-plan-scroll{padding:0;overflow-x:auto}
.personal-timetable{
  min-width:760px;
  width:100%;
  table-layout:fixed;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid #000;
  border-radius:3px;
  overflow:hidden;
  background:#fff;
  font:normal 12px/150% Arial,Helvetica,sans-serif;
}
.personal-timetable th,.personal-timetable td{
  height:31px;
  padding:5px 5px;
  border-right:1px solid #000;
  border-bottom:0;
  vertical-align:middle;
}
.personal-timetable th:last-child,.personal-timetable td:last-child{border-right:0}
.personal-timetable thead th{
  text-align:center;
  background:#2B726D;
  color:#fff;
  font-size:15px;
  font-weight:bold;
  border-bottom:1px solid #000;
}
.personal-timetable .hour-head{width:60px}
.personal-timetable .hour-cell{
  width:60px;
  text-align:center;
  background:#fff;
  color:#2B726D;
  font-size:12px;
  font-weight:normal;
}
.personal-timetable .hour-cell span{display:inline;background:transparent;width:auto;height:auto;border-radius:0;font-weight:normal}
.personal-timetable .plan-cell{
  height:31px;
  padding:5px 5px!important;
  background:#fff;
  color:#2B726D;
  font-size:12px;
  font-weight:normal;
  line-height:1.5;
}
.personal-timetable tbody tr:nth-child(even) .plan-cell,
.personal-timetable tbody tr:nth-child(even) .hour-cell{background:#F1F1F1;color:#17201f}
.lesson-line{padding:0;line-height:1.5;white-space:nowrap;color:inherit;font-weight:normal}
.lesson-line+.lesson-line{border-top:1px dotted #aaa}
@media(max-width:700px){
  .personal-timetable{min-width:700px}
  .personal-timetable .hour-head,.personal-timetable .hour-cell{width:52px}
}


/* v0.5.3: alternierende Zeilen auch gegen allgemeine Tabellenregeln erzwingen */
.personal-timetable tbody tr.alt-row > th,
.personal-timetable tbody tr.alt-row > td {
  background:#F1F1F1 !important;
  color:#17201f;
}
.personal-timetable tbody tr:not(.alt-row) > th,
.personal-timetable tbody tr:not(.alt-row) > td {
  background:#FFFFFF !important;
}
.personal-timetable thead th {
  background:#2B726D !important;
  color:#FFFFFF !important;
}

/* v0.5.5: Schüler-Startseite und vorbereitete Module */
.app-shell{padding-top:22px}
.student-app-nav{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px;padding:7px;background:#e7efee;border:1px solid var(--border);border-radius:12px}
.student-app-nav a{padding:9px 12px;border-radius:8px;color:var(--primary-dark);font-weight:750;text-decoration:none}
.student-app-nav a:hover,.student-app-nav a.active{background:#2B726D;color:#fff}
.student-home-plan{margin-top:0}
.student-home-plan .error{margin:0 0 16px}
.module-placeholder{min-height:180px}
@media(max-width:600px){.student-app-nav{gap:4px}.student-app-nav a{flex:1 1 calc(50% - 4px);text-align:center}}

/* v0.7.0 – persönliche Vertretungen / Live-Stundenplan */
.substitution-list{margin-top:14px}.subst-date{margin:20px 0 7px;font-size:16px}.subst-row{display:grid;grid-template-columns:44px 1fr;gap:10px;padding:9px 4px;border-top:1px solid #d7e0de}.subst-hour{font-weight:700;color:#164f4b}.subst-kind{display:inline-block;margin-left:8px;font-size:11px;font-weight:700;padding:2px 7px;border-radius:999px}.subst-kind.cancel{background:#ececec;color:#666}.subst-kind.change{background:#fde9e8;color:#a71912}.live-plan-details>summary{cursor:pointer;font-weight:700;font-size:17px;color:#164f4b}.live-plan-form{display:flex;align-items:end;gap:10px;flex-wrap:wrap;margin:18px 0}.live-plan-form label{display:block;font-size:12px;font-weight:700}.live-plan-form input{min-width:170px}.live-legend{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;margin:8px 0 12px}.legend-grey,.legend-red{display:inline-flex;align-items:center;gap:6px}.legend-grey:before,.legend-red:before{content:"";width:16px;height:4px;border-radius:2px;background:#9a9a9a}.legend-red:before{background:#c3261f}.live-timetable thead th small{display:block;font-size:9px;font-weight:400;opacity:.85}.live-timetable .live-cancelled{color:#999!important;text-decoration:none;opacity:.72}.live-timetable .live-changed{color:#c3261f!important;font-weight:700}.live-timetable .live-normal{color:inherit}


/* v0.7.1 – Wochen-Navigation ohne Datumsfeld */
.live-week-nav{display:flex;align-items:center;justify-content:flex-start;gap:10px;margin:14px 0 12px;font-size:14px}
.live-week-arrow{display:inline-flex;align-items:center;justify-content:center;width:30px;height:28px;border-radius:7px;background:#e4ecea;color:#55706d;text-decoration:none;font-size:16px;font-weight:400;line-height:1}
.live-week-arrow:hover{background:#d5e1df;color:#2B726D}
.live-week-arrow.disabled{background:#d9e1df;color:#8b9795;cursor:default}


/* v0.7.5 – kompakte Vertretungszeilen */
.subst-compact-list{margin-top:10px;border-top:1px solid #d7e0de}
.subst-compact-row{display:grid;grid-template-columns:155px 1fr;gap:10px;align-items:baseline;padding:6px 2px;border-bottom:1px solid #d7e0de;font-size:13px;line-height:1.25}
.subst-when{font-weight:700;color:#164f4b;white-space:nowrap}
.subst-main{min-width:0}
.subst-old{color:#6f7776}
.subst-new{color:#c3261f;font-weight:750}
.subst-cancel-text{color:#8a8a8a;font-weight:700}
.subst-note{color:#6f7776;font-size:12px}
@media(max-width:650px){.subst-compact-row{grid-template-columns:1fr;gap:2px}.subst-when{font-size:12px}}


/* v0.8.0 – ruhiger, von oben aufgebauter App-Rahmen */
.app-shell{margin:0 auto;padding-top:22px;padding-bottom:32px}
.app-topbar{min-height:72px;margin-bottom:18px}
.app-topbar .brand{margin-bottom:0}
.student-app-nav{margin-top:0}
@media(max-width:600px){
  .app-topbar{min-height:92px}
}


/* v0.8.1: Login als einzige vertikal zentrierte Ansicht */
body.login-page { min-height:100vh; display:flex; align-items:center; }
body.login-page .shell { width:min(960px,100%); }
.secret-field { position:relative; }
.secret-field input { padding-right:52px; }
.secret-toggle { position:absolute; right:5px; top:50%; transform:translateY(-50%); width:42px; height:42px; padding:0; border-radius:8px; background:transparent; color:var(--primary); }
.secret-toggle:hover { background:#edf4f3; }
.secret-toggle:focus-visible { outline:3px solid rgba(43,114,109,.15); }
.secret-toggle svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.secret-toggle .eye-closed { display:none; }
.secret-toggle.is-visible .eye-open { display:none; }
.secret-toggle.is-visible .eye-closed { display:block; }
@media (max-height:520px) { body.login-page { align-items:flex-start; } }

/* v0.8.2 – neues GG-neo-Branding */
.brand-logo { display:block; width:52px; height:52px; object-fit:contain; flex:0 0 auto; }
.login-brand-logo { width:58px; height:58px; border-radius:15px; }

.card-divider{border:0;border-top:1px solid #d7e2e1;margin:24px 0;}
.upload-form input[type=file]{display:block;width:100%;max-width:720px;margin-top:8px;padding:12px;border:1px solid #c8d7d5;border-radius:10px;background:#fff;}


/* v0.8.9 – kompakter Live-Stundenplan / Meine Woche */
.live-timetable .plan-cell,
.live-timetable .hour-cell,
.live-timetable .lesson-line.live-normal { color:#000 !important; }
.live-timetable tbody tr.alt-row > th,
.live-timetable tbody tr.alt-row > td,
.live-timetable tbody tr:not(.alt-row) > th,
.live-timetable tbody tr:not(.alt-row) > td { color:#000; }
.live-timetable thead th { padding-top:5px; padding-bottom:5px; height:31px; white-space:nowrap; }
.live-timetable thead th .live-day-label { display:inline; }
.live-timetable thead th small { display:inline; margin-left:5px; font-size:9px; font-weight:400; opacity:.9; }
.live-timetable .live-cancelled { color:#999 !important; }
.live-timetable .live-changed { color:#c3261f !important; font-weight:700; }
.live-legend-bottom { margin:10px 0 0; }


/* v0.9.1 – kompaktere Markenleiste und dezentere Navigation */
.login-brand { gap:10px; margin-bottom:18px; }
.login-brand .brand-copy,
.app-brand .brand-copy { display:flex; flex-direction:column; justify-content:center; min-width:0; }
.login-brand .brand-copy h1 { margin:0; font-size:1.72rem; line-height:1.02; font-weight:750; letter-spacing:-.02em; }
.login-brand .brand-copy .muted { margin-top:4px; font-size:.92rem; line-height:1.05; }
.login-brand-logo { width:58px; height:58px; }

.app-brand { gap:10px; }
.app-brand .brand-copy h1 { margin:0; font-size:1.72rem; line-height:1.02; font-weight:750; letter-spacing:-.02em; }
.app-brand .brand-copy .muted { margin-top:4px; font-size:.92rem; line-height:1.05; }
.app-brand .brand-mark { width:52px; height:52px; border-radius:14px; font-size:1rem; }

.student-app-nav a { font-weight:600; }
.student-app-nav a.active { font-weight:650; }

@media(max-width:600px){
  .login-brand .brand-copy h1,
  .app-brand .brand-copy h1 { font-size:1.55rem; }
  .login-brand .brand-copy .muted,
  .app-brand .brand-copy .muted { font-size:.86rem; }
}

/* v0.9.1 – ruhigeres Branding */
.login-brand .brand-copy h1,
.app-brand .brand-copy h1 { font-weight:600; }
.app-brand-logo { width:52px; height:52px; border-radius:14px; object-fit:contain; flex:0 0 auto; }
@media (max-width:640px){
  .app-brand-logo { width:48px; height:48px; border-radius:13px; }
}

/* v0.9.2: compact branding */
.login-brand .brand-copy h1,.app-brand .brand-copy h1{font-size:1.48rem;font-weight:600;}
@media(max-width:700px){.login-brand .brand-copy h1,.app-brand .brand-copy h1{font-size:1.40rem;}}

/* GG neo: school name gives way to the login, without moving the logo. */
.animated-login { --logo-size:58px; --brand-gap:14px; max-width:460px; }
.animated-login .login-brand { align-items:flex-start; gap:var(--brand-gap); margin:0; height:36px; }
.animated-login .login-brand-logo { width:var(--logo-size); height:var(--logo-size); }
.animated-login .brand-copy { padding-top:3px; }
.animated-login .login-entry { position:relative; margin-left:calc(var(--logo-size) + var(--brand-gap)); }
.animated-login .login-school { position:absolute; top:4px; left:0; font-size:.92rem; line-height:1.4; pointer-events:none; animation:neo-school-out .55s ease .85s both; }
.animated-login .login-label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.animated-login .secret-field { animation:neo-field-in .8s cubic-bezier(.22,1,.36,1) .85s both; }
.animated-login .secret-field input { height:52px; font-size:16px; border-radius:13px; box-shadow:0 6px 22px rgba(43,114,109,.07); }
.animated-login .secret-field input::placeholder { color:var(--muted); opacity:1; }
.animated-login .login-actions { margin-top:14px; animation:neo-button-in .4s ease 1.65s both; }
.animated-login .login-actions button { gap:22px; min-height:46px; border-radius:12px; }
.animated-login .error { margin-top:16px; }
@keyframes neo-school-out { from { opacity:1; } to { opacity:0; visibility:hidden; transform:translateY(-5px); } }
@keyframes neo-field-in { from { visibility:hidden; opacity:0; clip-path:inset(-5px 100% -24px -5px); } to { visibility:visible; opacity:1; clip-path:inset(-5px -5px -24px -5px); } }
@keyframes neo-button-in { from { visibility:hidden; opacity:0; transform:translateY(7px); } to { visibility:visible; opacity:1; transform:translateY(0); } }
.animated-login.login-ready .login-school { display:none; }
.animated-login.login-ready .secret-field, .animated-login.login-ready .login-actions { animation:none; }
@media (prefers-reduced-motion:reduce) {
  .animated-login .login-school { display:none; }
  .animated-login .secret-field, .animated-login .login-actions { animation:none; }
}
@media (max-width:380px) {
  .animated-login { --logo-size:48px; --brand-gap:10px; }
  .animated-login .secret-field input { padding-left:10px; }
}