/* Farben, Schriften und Formen wie auf egb-koeln.de:
   weißer Hintergrund, hellgraue Kacheln (#F0F0F0, 8px Ecken), EGB-Rot #C00C0D,
   dunkleres Rot #9D0D0D für Links, Text #333, Überschriften Inter, Fließtext Nunito Sans */
:root{
  --bg:#FFFFFF; --tile:#F0F0F0; --card:#FFFFFF; --ink:#333333; --muted:#5A5A5A; --slate:#3A4C54;
  --rule:#E2E2E2; --rule-2:#CFCFCF;
  --red:#C00C0D; --red-dark:#9D0D0D; --red-ink:#FFFFFF; --red-soft:#F9E3E3;
  --star-off:#D3D3D3; --star-on:#C00C0D;
  --c-teacher:#C00C0D; --c-peer:#3A4C54; --c-self:#D08A00;
  --ok:#C00C0D; --warn:#9D0D0D;
  --radius:8px;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 "Nunito Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-variant-numeric:tabular-nums}
h1,h2,h3,.box-h,.final-word,.grade-word{font-family:Inter,"Nunito Sans",system-ui,sans-serif}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--red-dark)}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}
[hidden]{display:none!important}
.muted{color:var(--muted)}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px 56px}

/* Kopfzeile wie auf der Schulseite */
.letterhead{background:#fff}
.letterhead .in{max-width:1160px;margin:0 auto;padding:20px 20px 8px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.letterhead img{height:44px;width:auto;display:block}
.logo-text{font-family:Inter,sans-serif;font-weight:700;line-height:1.15;color:var(--red)}
.logo-text small{display:block;font-weight:600;color:var(--slate);font-size:.85rem}
.lh-right{font-size:.95rem;color:var(--red);font-weight:600;text-align:right}
.lh-right a{color:var(--red);font-weight:700;text-decoration:none}
.lh-right a:hover{text-decoration:underline}

/* Seitentitel */
.doc-title{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:22px 0 14px}
.doc-title h1{font-size:1.75rem;font-weight:700;margin:0;line-height:1.2}
.doc-title p{margin:4px 0 0;color:var(--muted)}
.toolbar{display:flex;gap:8px;flex-wrap:wrap}
.btn{border:0;background:var(--tile);color:var(--red);padding:8px 14px;border-radius:6px;cursor:pointer;font-weight:700;font-size:.93rem}
.btn:hover{background:#E6E6E6;color:var(--red-dark)}
.btn.primary{background:var(--red);color:var(--red-ink)}
.btn.primary:hover{background:var(--red-dark);color:#fff}
.btn.danger{background:#fff;color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.btn.danger:hover{background:var(--red-soft)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.sm{padding:5px 10px;font-size:.85rem}
.arrow::after{content:"→";margin-left:6px}

.tabs{display:flex;gap:4px;border-bottom:2px solid var(--tile);margin-bottom:18px;flex-wrap:wrap}
.tabs button{border:0;background:none;padding:10px 16px;font-weight:700;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px}
.tabs button:hover{color:var(--red)}
.tabs button[aria-selected="true"]{color:var(--red);border-bottom-color:var(--red)}

.status{font-size:.85rem;color:var(--muted);margin:0 0 14px;display:flex;align-items:center;gap:7px}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:#3C9A5F}
.status.warn{color:var(--red-dark)} .status.warn::before{background:var(--red)}

/* Kacheln */
.sheet,.box{background:var(--tile);border-radius:var(--radius)}
.sheet{padding:24px 26px}
.box{padding:22px 24px}
.box-h{font-weight:700;font-size:1.3rem;margin:0 0 14px;color:var(--ink)}
.card{background:var(--card);border-radius:var(--radius)}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
@media (max-width:980px){.layout{grid-template-columns:1fr}}

/* Kopfdaten */
.meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--card);border-radius:var(--radius);margin-bottom:18px;overflow:hidden}
.meta>div{padding:10px 14px;border-right:1px solid var(--rule)}
.meta>div:last-child{border-right:0}
.meta .k{display:block;font-size:.8rem;color:var(--red);font-weight:700}
.meta .v{font-weight:700;min-height:1.5em}
.meta .wide{grid-column:span 2}
@media (max-width:700px){.meta{grid-template-columns:1fr 1fr}.meta>div{border-bottom:1px solid var(--rule)}.meta .wide{grid-column:1/-1}}
.meta select{width:100%;border:0;background:transparent;font-weight:700;padding:0;cursor:pointer}

.roles{display:inline-flex;background:var(--card);border-radius:6px;padding:3px;gap:3px;flex-wrap:wrap}
.roles button{border:0;background:transparent;padding:7px 14px;cursor:pointer;font-weight:700;border-radius:4px;color:var(--ink)}
.roles button:hover{color:var(--red)}
.roles button[aria-pressed="true"]{background:var(--red);color:#fff}
.role-row{display:flex;gap:12px 18px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.pw-inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px;padding:12px 14px;background:var(--card);border-radius:var(--radius);border-left:4px solid var(--red)}
.pw-inline input{border:1px solid var(--rule-2);background:#fff;padding:6px 10px;border-radius:6px}
.closed{margin:12px 0 0;padding:12px 14px;border-left:4px solid var(--red);background:var(--card);border-radius:var(--radius);color:var(--red-dark);font-weight:700}

/* Kriterien */
.crit-wrap{background:var(--card);border-radius:var(--radius);margin-top:16px;padding:4px 16px 8px}
.crit-tbl{width:100%;border-collapse:collapse}
.crit-tbl th,.crit-tbl td{border-bottom:1px solid var(--rule);padding:10px 8px;vertical-align:middle;text-align:left}
.crit-tbl thead th{font-size:.8rem;color:var(--muted);font-weight:700}
.crit-tbl .nr{width:38px;color:var(--muted);font-weight:700}
.crit-tbl .pkt{width:52px;text-align:right;font-weight:700;color:var(--red)}
.crit-tbl tr.cat td{font-family:Inter,sans-serif;font-weight:700;color:var(--red);padding:18px 8px 8px;border-bottom:2px solid var(--red);font-size:1.05rem}
.crit-tbl tr.cat .cat-meta{float:right;font-family:"Nunito Sans",sans-serif;font-weight:600;color:var(--muted);font-size:.86rem}
.crit-tbl tr.cat .cat-meta b{color:var(--ink)}
.crit-tbl .hint{display:block;font-size:.84rem;color:var(--muted)}
.stars{display:inline-flex;gap:1px;white-space:nowrap}
.stars button{border:0;background:none;padding:4px;cursor:pointer;line-height:0;border-radius:4px}
.stars svg{width:24px;height:24px;fill:var(--star-off)}
.stars button.on svg{fill:var(--star-on)}
.stars:hover button svg{fill:var(--star-on)}
.stars button:hover ~ button svg{fill:var(--star-off)}
@media (max-width:640px){
  .crit-wrap{padding:4px 8px 8px}
  .crit-tbl thead{display:none}
  .crit-tbl tr.c{display:grid;grid-template-columns:30px 1fr 40px;border-bottom:1px solid var(--rule)}
  .crit-tbl tr.c td{border:0;padding:8px 4px}
  .crit-tbl tr.c td.st{grid-column:2/4;padding-top:0}
  .crit-tbl tr.cat{display:grid;grid-template-columns:30px 1fr}
  .crit-tbl tr.cat td{padding:16px 4px 6px}
  .crit-tbl tr.cat .cat-meta{float:none;display:block}
  .stars svg{width:28px;height:28px}
}

.remarks{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
@media (max-width:700px){.remarks{grid-template-columns:1fr}}
.remarks label{font-weight:700;font-size:.92rem;display:flex;flex-direction:column;gap:6px}
.remarks textarea{min-height:96px;resize:vertical;border:0;background:var(--card);padding:10px 12px;border-radius:var(--radius);font-weight:400}

/* Ergebnis */
.side{position:sticky;top:calc(env(safe-area-inset-top,0px) + 14px)}
@media (max-width:980px){.side{position:static}}
.gradebox{width:96px;height:96px;border-radius:var(--radius);display:grid;place-items:center;background:var(--card);flex-shrink:0;box-shadow:inset 0 0 0 2px var(--rule-2)}
.gradebox span{font-family:"Caveat","Segoe Print","Comic Sans MS",cursive;font-weight:700;font-size:3.6rem;line-height:1;color:var(--red);transform:rotate(-6deg)}
.gradebox.big{width:110px;height:110px}.gradebox.big span{font-size:4.2rem}
.grade-row{display:flex;gap:16px;align-items:center}
.grade-word{font-weight:700;font-size:1.25rem;line-height:1.2}
.kv{width:100%;border-collapse:collapse;margin-top:16px;background:var(--card);border-radius:var(--radius);overflow:hidden}
.kv td{padding:8px 12px;border-bottom:1px solid var(--rule)}
.kv tr:last-child td{border-bottom:0}
.kv td:last-child{text-align:right;font-weight:700}
.bar{height:8px;background:var(--card);border-radius:99px;margin-top:18px;position:relative}
.bar i{position:absolute;left:0;top:0;bottom:0;background:var(--red);border-radius:99px;transition:width .25s}
.bar s{position:absolute;top:-4px;bottom:-4px;width:1px;background:var(--rule-2);text-decoration:none}
.bar-l{position:relative;height:18px;font-size:.75rem;color:var(--muted)}
.bar-l span{position:absolute;top:3px;transform:translateX(-50%)}
.key-mini{width:100%;border-collapse:collapse;margin-top:12px;font-size:.92rem;background:var(--card);border-radius:var(--radius);overflow:hidden}
.key-mini td{padding:6px 10px;border-bottom:1px solid var(--rule)}
.key-mini tr:last-child td{border-bottom:0}
.key-mini td:first-child{font-weight:800;width:30px}
.key-mini td:last-child{text-align:right;color:var(--muted)}
.key-mini tr.cur td{background:var(--red);color:#fff}
.save-row{margin-top:18px}
.save-row .btn{width:100%;padding:12px}
.small{font-size:.84rem;color:var(--muted);margin:8px 0 0}

/* Auswertung */
.res-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
@media (max-width:980px){.res-grid{grid-template-columns:1fr}}
.final{display:flex;gap:18px;align-items:center}
.final-word{font-weight:700;font-size:1.4rem}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:.88rem;margin-top:14px}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{width:11px;height:11px;display:inline-block;border-radius:2px}
.radar{background:var(--card);border-radius:var(--radius);margin-top:14px;padding:8px}
.radar svg{width:100%;height:auto;display:block}
.scroll{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;background:var(--card);border-radius:var(--radius);overflow:hidden}
.tbl th,.tbl td{padding:9px 10px;border-bottom:1px solid var(--rule);text-align:left;white-space:nowrap}
.tbl th{font-size:.8rem;color:var(--red);font-weight:700}
.tbl tr:last-child td{border-bottom:0}
.tbl tr.sum td{font-weight:800;border-top:2px solid var(--red)}
.num{text-align:right!important}
.gap-up{color:var(--red);font-weight:700}
.gap-down{color:var(--slate);font-weight:700}
.note-line{margin:12px 0 0}
.cmts{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.cmt{background:var(--card);border-radius:var(--radius);border-left:4px solid var(--slate);padding:12px 14px}
.cmt p{margin:4px 0 0;white-space:pre-wrap}
.cmt-role{display:inline-block;font-size:.78rem;font-weight:700;color:#fff;background:var(--red);padding:1px 8px;border-radius:4px}
.cmt-k{font-weight:700}
.empty{padding:30px;text-align:center;color:var(--muted);background:var(--tile);border-radius:var(--radius)}
.field{display:flex;flex-direction:column;gap:5px;font-weight:700;font-size:.92rem}
.field input,.field select{border:1px solid var(--rule-2);background:#fff;padding:9px 11px;border-radius:6px;font-weight:400}
.field input:focus,.field select:focus{border-color:var(--red);outline:none}

.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);transform:translateX(-50%);background:var(--red);color:#fff;padding:10px 18px;border-radius:6px;font-weight:700;opacity:0;pointer-events:none;transition:opacity .2s;z-index:30}
.toast.show{opacity:1}

/* Fußzeile wie auf der Schulseite */
.site-foot{border-top:6px solid var(--red);margin-top:48px}
.site-foot .in{max-width:1160px;margin:0 auto;padding:20px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:var(--muted);font-size:.95rem}
.site-foot a{color:var(--red);font-weight:700;text-decoration:none}
.site-foot a:hover{text-decoration:underline}
.site-foot .bar-red{background:var(--red);color:#fff}
.site-foot .bar-red .in{padding:8px 20px;color:#fff;font-size:.9rem}
.site-foot .bar-red a{color:#fff;font-weight:600}

@media print{
  .toolbar,.tabs,.status,.save-row,.small,.pw-inline,.site-foot{display:none!important}
  .sheet,.box,.crit-wrap,.meta{background:#fff}
  .layout{grid-template-columns:1fr 260px}
  .side{position:static}
}