:root{
  --bg:#f6efe5;
  --panel:#fffdf9;
  --panel2:#fbf6ef;
  --gold:#8a570d;
  --gold2:#a66b13;
  --ink:#14110e;
  --muted:#6f655a;
  --line:#e7d9c8;
  --green:#18763c;
  --greenbg:#e1f4e5;
  --red:#a42b22;
  --redbg:#fde3e0;
  --shadow:0 12px 32px rgba(90,54,9,.11)
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--ink);background:radial-gradient(circle at 45% 0,#fffdf8 0,#f8f1e8 40%,#f3eadf 100%)}
button,input{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}
.app{min-height:100vh;display:grid;grid-template-columns:305px 1fr}
.sidebar{position:fixed;inset:0 auto 0 0;width:305px;padding:14px 22px 24px;background:rgba(255,251,246,.88);border-right:1px solid rgba(138,87,13,.12);backdrop-filter:blur(12px);z-index:20;overflow:auto}
.logo{width:100%;height:132px;object-fit:contain;object-position:left center;display:block;margin-bottom:18px}
.nav-section{display:grid;gap:8px}
.nav-label{font-size:13px;font-weight:800;color:var(--gold);letter-spacing:.05em;margin:28px 14px 8px;text-transform:uppercase}
.nav-btn{width:100%;border:0;background:transparent;border-radius:11px;padding:13px 15px;text-align:left;font-weight:650;display:flex;gap:13px;align-items:center;color:#1e1914}
.nav-btn:hover{background:#f0e3d2}
.nav-btn.active{background:linear-gradient(135deg,#9b6518,#7f4d08);color:white;box-shadow:0 7px 20px rgba(128,77,8,.20)}
.ico{width:26px;text-align:center;font-size:19px}
.divider{height:1px;background:var(--line);margin:20px 0}
.logout{color:#b5231c}
.main{grid-column:2;min-width:0;padding:0 20px 26px}
.topbar{height:124px;display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:18px 4px}
.greeting{text-align:right}
.greeting b{color:var(--gold)}
.greeting strong{display:block;font-size:20px}
.greeting span{font-size:14px}
.avatar{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:white;font-size:27px}
.content{background:rgba(255,253,249,.92);border:1px solid rgba(138,87,13,.13);border-radius:16px;box-shadow:var(--shadow);padding:22px;min-height:calc(100vh - 148px)}
.hero{display:flex;justify-content:space-between;gap:24px;align-items:center;padding:4px 40px 20px;border-bottom:1px solid var(--line)}
.hero h1{font-size:26px;margin:0 0 5px}
.hero p{margin:0;color:#25201b}
.token-card{min-width:255px;border:1px solid var(--line);border-radius:12px;padding:13px 20px;display:flex;align-items:center;gap:18px;background:#fffdfa}
.token-card .coins{font-size:42px;color:var(--gold)}
.token-card b{font-size:42px;color:var(--gold);line-height:1}
.token-card small{display:block}
.section{padding:14px 0}
.section h2{font-size:19px;color:#6f4408;margin:0 0 12px}
.week-strip{display:grid;grid-template-columns:repeat(5,minmax(150px,1fr));gap:18px}
.week-card{border:1px solid var(--line);border-radius:11px;background:#fff;padding:10px;text-align:center;min-height:105px}
.week-card.active{border:1.7px solid var(--gold);box-shadow:0 0 0 1px rgba(138,87,13,.08)}
.week-card button{border:0;background:transparent;width:100%;height:100%;color:inherit}
.week-card b{font-size:20px;display:block}
.week-card small{display:block;margin:3px 0 8px}
.pill{display:inline-block;border-radius:999px;padding:4px 13px;font-size:12px;font-weight:700}
.pill.ok{background:var(--greenbg);color:var(--green)}
.pill.lock{background:var(--redbg);color:var(--red)}
.course-title{border-top:1px solid var(--line);padding-top:15px;margin-top:2px!important}
.course-list{display:grid;gap:0}
.course{display:grid;grid-template-columns:145px 235px 1fr 230px 170px;align-items:center;min-height:66px;padding:8px 18px;border:1px solid var(--line);border-bottom:0;background:#fff}
.course:first-child{border-radius:12px 12px 0 0}
.course:last-child{border-bottom:1px solid var(--line);border-radius:0 0 12px 12px}
.course .date strong,.course .time strong,.course .teacher strong{display:block}
.sub{font-size:13px;color:var(--muted)}
.time,.teacher{padding-left:18px;border-left:1px solid var(--line)}
.capacity-label{display:flex;gap:8px;align-items:center;font-size:14px}
.bar{height:8px;background:#eadfd3;border-radius:99px;margin-top:6px;overflow:hidden}
.bar span{display:block;height:100%;background:linear-gradient(90deg,#9e6512,#754406);border-radius:99px}
.action-btn{border:0;border-radius:9px;padding:10px 14px;font-weight:750;background:linear-gradient(135deg,#a66b13,#7c4906);color:white;min-width:145px}
.action-btn.wait{background:#f8dca0;color:#71450d}
.action-btn.cancel{background:#f7ded9;color:#9f3027}
.action-btn.secondary{background:#eee4d7;color:#5f431d}
.action-btn:disabled{opacity:.45;cursor:not-allowed}
.info-grid{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:12px;margin-top:14px}
.info{border:1px solid var(--line);border-radius:12px;padding:14px;background:#fff}
.info h3{margin:0 0 7px;color:#704509;font-size:16px}
.info p{margin:5px 0;font-size:13px;line-height:1.4}
.page{display:none}
.page.active{display:block}
.list-card{border:1px solid var(--line);border-radius:12px;background:white;overflow:hidden}
.list-row{display:grid;grid-template-columns:1fr auto;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);align-items:center}
.list-row:last-child{border-bottom:0}
.empty{padding:35px;text-align:center;color:var(--muted)}
.admin-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.stat{border:1px solid var(--line);border-radius:12px;padding:17px;background:white}
.stat b{display:block;font-size:30px;color:var(--gold)}
.admin-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.admin-actions input{width:78px;padding:8px;border:1px solid var(--line);border-radius:8px}
.status{display:inline-block;border-radius:999px;padding:4px 9px;font-size:12px;font-weight:700}
.status.active{background:var(--greenbg);color:var(--green)}
.status.inactive{background:var(--redbg);color:var(--red)}
.auth{min-height:100vh;display:grid;place-items:center;padding:20px}
.auth-card{width:min(980px,100%);display:grid;grid-template-columns:1fr 420px;background:rgba(255,253,249,.96);border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:var(--shadow)}
.auth-brand{padding:55px;background:linear-gradient(145deg,#f9f0e4,#e8d3b6);display:flex;flex-direction:column;justify-content:center}
.auth-brand img{width:100%;max-height:260px;object-fit:contain}
.auth-brand h1{font-size:36px;margin:28px 0 8px}
.auth-brand p{line-height:1.55;color:var(--muted)}
.auth-form{padding:42px}
.tabs{display:flex;background:#f0e4d5;border-radius:11px;padding:4px;margin-bottom:22px}
.tab{flex:1;border:0;border-radius:8px;padding:10px;background:transparent;font-weight:750}
.tab.active{background:white;color:var(--gold)}
label{font-size:13px;font-weight:750;display:block;margin:12px 0 6px}
.field{width:100%;padding:12px;border:1px solid var(--line);border-radius:9px;background:white}
.primary{width:100%;margin-top:17px;border:0;border-radius:9px;padding:12px;background:var(--gold);color:white;font-weight:750}
.msg{margin-top:12px;font-size:13px;color:var(--red);min-height:18px}
.mobile-menu{display:none}
.toast{position:fixed;right:22px;bottom:22px;z-index:100;background:#2d241c;color:white;padding:13px 16px;border-radius:10px;box-shadow:var(--shadow);max-width:min(420px,calc(100vw - 44px))}
.toast.error{background:#7f231d}
@media(max-width:1100px){.course{grid-template-columns:110px 180px 1fr 190px 150px}.week-strip{gap:10px}}
@media(max-width:900px){
  .app{display:block}
  .sidebar{transform:translateX(-100%);transition:.25s}
  .sidebar.open{transform:translateX(0)}
  .main{grid-column:auto;padding:0 12px 18px}
  .topbar{height:86px;justify-content:space-between}
  .mobile-menu{display:block;border:0;background:var(--gold);color:white;border-radius:9px;padding:9px 12px}
  .content{min-height:calc(100vh - 102px);padding:15px}
  .hero{padding:5px 4px 16px}
  .week-strip{grid-template-columns:repeat(5,180px);overflow:auto}
  .course{grid-template-columns:1fr 1fr;gap:10px;padding:14px}
  .time,.teacher{border:0;padding-left:0}
  .capacity,.course .action{grid-column:auto}
  .info-grid{grid-template-columns:1fr}
  .auth-card{grid-template-columns:1fr}
  .auth-brand{display:none}
  .admin-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .hero{display:block}
  .token-card{margin-top:15px;min-width:0}
  .course{grid-template-columns:1fr}
  .course .action{grid-column:1}
  .action-btn{width:100%}
  .admin-grid{grid-template-columns:1fr}
  .greeting span{display:none}
  .list-row{grid-template-columns:1fr}
  .admin-actions{justify-content:flex-start}
}


/* Lehrerbereich */
.teacher-intro{margin:0 0 18px;color:var(--muted)}
.teacher-course-list{display:grid;gap:16px}
.teacher-week{display:grid;gap:12px}
.teacher-week h2{margin:10px 0 0;color:#704509;font-size:20px}
.teacher-course-card{background:#fff;border:1px solid var(--line);border-radius:13px;padding:16px}
.teacher-course-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;padding-bottom:13px;border-bottom:1px solid var(--line)}
.teacher-course-head h3{margin:0 0 5px;color:#704509}
.teacher-meta{font-size:13px;color:var(--muted)}
.teacher-capacity{font-weight:800;color:var(--gold);white-space:nowrap}
.teacher-columns{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding-top:14px}
.teacher-columns h4{margin:0 0 9px}
.teacher-person{padding:8px 0;border-bottom:1px solid #f0e7dc}
.teacher-person:last-child{border-bottom:0}
.teacher-person strong{display:block}
.teacher-empty{font-size:13px;color:var(--muted);padding:6px 0}
.readonly-badge{display:inline-block;margin-left:8px;padding:3px 8px;border-radius:999px;background:#eee4d7;color:#6a4b1e;font-size:12px;font-weight:700}
@media(max-width:700px){
  .teacher-course-head{display:block}
  .teacher-capacity{margin-top:8px}
  .teacher-columns{grid-template-columns:1fr}
}
/* Anwesenheit */
.attendance-person{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
}
.attendance-control{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  font-size:13px;
  font-weight:700;
  color:var(--gold);
  white-space:nowrap;
}
.attendance-control input{
  width:18px;
  height:18px;
  accent-color:var(--gold);
}
@media(max-width:560px){
  .attendance-person{
    align-items:flex-start;
    flex-direction:column;
  }
}
/* Lehrer-Dashboard Professional – Schritt 1 */
.teacher-status-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(78px,1fr));
  gap:8px;
  min-width:360px;
}
.teacher-status-grid>div{
  background:#fbf6ef;
  border:1px solid var(--line);
  border-radius:10px;
  padding:9px 10px;
  text-align:center;
}
.teacher-status-grid b{
  display:block;
  color:var(--gold);
  font-size:20px;
  line-height:1.1;
}
.teacher-status-grid span{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:11px;
}
.attendance-person{
  border-radius:9px;
  padding-left:9px;
  padding-right:9px;
  transition:background .18s,border-color .18s;
}
.attendance-person.is-attended{
  background:var(--greenbg);
  box-shadow:inset 3px 0 0 var(--green);
}
.attendance-person.is-attended .attendance-control{
  color:var(--green);
}
@media(max-width:900px){
  .teacher-status-grid{
    min-width:0;
    margin-top:12px;
  }
}
@media(max-width:560px){
  .teacher-status-grid{
    grid-template-columns:1fr 1fr;
  }
}


/* Passwort-Reset v1.2.0 */
.auth-link{
  display:block;
  width:100%;
  border:0;
  background:transparent;
  color:var(--gold);
  padding:10px 4px 2px;
  text-align:center;
  font-weight:700;
}
.auth-link:hover{text-decoration:underline}
.auth-help{
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
  margin:0 0 14px;
}
.code-field{
  letter-spacing:.22em;
  font-size:18px;
  font-weight:800;
}
.msg.neutral{color:var(--muted)}
.success-msg{color:var(--green)!important}
.reset-code-card{
  margin:0 0 16px;
  padding:16px;
  border:1px solid #d9c49f;
  background:#fff8e9;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.reset-code-label{
  display:block;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.reset-code{
  display:block;
  color:var(--gold);
  font-size:32px;
  letter-spacing:.06em;
  margin:4px 0;
}
.reset-code-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
@media(max-width:650px){
  .reset-code-card{
    align-items:flex-start;
    flex-direction:column;
  }
  .reset-code-actions{
    width:100%;
    justify-content:flex-start;
  }
}


/* PDF-Teilnehmerlisten v1.3.0 */
.teacher-pdf-btn{
  display:block;
  margin:10px 0 0 auto;
  min-width:180px;
  width:auto;
}
@media(max-width:700px){
  .teacher-pdf-btn{
    margin:10px 0 0;
    width:100%;
  }
}


/* Version 1.4.0 - Vertretung und Kursabsage */
.course-cancelled{
  background:#fff5f3;
  border-color:#e6b4ae;
}
.cancelled-course-label,
.cancelled-booking-note,
.cancelled-course-reason{
  color:var(--red);
  font-size:13px;
  font-weight:800;
}
.booking-cancelled{
  background:#fff5f3;
}
.course-status-badge{
  display:inline-block;
  margin-left:8px;
  padding:3px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  vertical-align:middle;
}
.course-status-badge.cancelled{
  background:var(--redbg);
  color:var(--red);
}
.course-status-badge.substitute{
  background:#eee4d7;
  color:#684718;
}
.teacher-course-card.is-cancelled{
  background:#fff8f6;
  border-color:#e6b4ae;
}
.teacher-course-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}
.substitute-editor{
  display:grid;
  grid-template-columns:1fr minmax(200px,280px) auto;
  align-items:end;
  gap:12px;
  margin-top:14px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fbf6ef;
}
.substitute-editor .field{
  margin:0;
}
.admin-occurrence-row.is-cancelled{
  background:#fff8f6;
}
.occurrence-actions{
  min-width:360px;
}
.occurrence-teacher-select{
  width:210px!important;
  min-width:210px;
}
@media(max-width:780px){
  .substitute-editor{
    grid-template-columns:1fr;
  }
  .occurrence-actions{
    min-width:0;
  }
  .occurrence-teacher-select{
    width:100%!important;
  }
}