/* SchlauStart – Styles der Zusatz-Module (Reflexion, Ticket-Center,
   Aufgaben, Tafel-Editor) – aus templates/index.html ausgelagert (A1). */

.rfxr-ov{position:fixed;inset:0;background:rgba(20,28,48,.55);z-index:120;display:none;align-items:flex-start;justify-content:center;padding:24px 14px;overflow-y:auto;}
.rfxr-ov.show{display:flex;}
.rfxr{background:var(--card,#fff);border-radius:18px;width:100%;max-width:760px;box-shadow:0 24px 70px rgba(20,30,60,.3);overflow:hidden;margin:auto;}
.rfxr-head{padding:18px 20px 0;}
.rfxr-head h2{font-size:19px;margin:0 0 2px;}
.rfxr-head .sub{color:var(--muted);font-size:13.5px;margin:0 0 14px;}
.rfxr-tabs{display:flex;gap:6px;padding:0 20px;border-bottom:1px solid var(--line);}
.rfxr-tab{appearance:none;border:none;background:transparent;font-family:inherit;font-weight:700;font-size:14.5px;color:var(--muted);padding:11px 6px;margin-right:14px;cursor:pointer;border-bottom:2.5px solid transparent;}
.rfxr-tab.active{color:var(--brand);border-bottom-color:var(--brand);}
.rfxr-body{padding:18px 20px 22px;max-height:64vh;overflow-y:auto;}
.rfxr-x{position:absolute;top:18px;right:20px;width:36px;height:36px;border:none;border-radius:10px;background:var(--paper);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.rfxr-x:hover{background:var(--bad-soft);color:var(--bad);}
.rfxr-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;}
.rfx-sess{border:1px solid var(--line);border-radius:13px;padding:14px;margin-bottom:14px;}
.rfx-sess-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;flex-wrap:wrap;gap:6px;}
.rfx-sess-h .kl{font-weight:800;font-size:15px;}
.rfx-sess-h .meta{font-size:12.5px;color:var(--muted);font-weight:600;}
.rfx-bars{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:560px){.rfx-bars{grid-template-columns:1fr;}}
.rfx-bargroup .lbl{font-size:12px;font-weight:800;color:var(--muted);letter-spacing:.03em;margin-bottom:6px;}
.rfx-bar{display:flex;align-items:center;gap:8px;margin-bottom:5px;font-size:12.5px;}
.rfx-bar .bn{width:64px;flex:none;color:var(--ink);font-weight:600;}
.rfx-bar .track{flex:1;height:9px;background:var(--paper);border-radius:6px;overflow:hidden;}
.rfx-bar .fill{height:100%;border-radius:6px;}
.rfx-bar .bv{width:28px;flex:none;text-align:right;font-weight:700;color:var(--muted);}
.rfx-texts{margin-top:12px;display:flex;flex-direction:column;gap:8px;}
.rfx-txt{background:var(--paper);border-radius:10px;padding:9px 11px;font-size:13.5px;}
.rfx-txt .who{font-size:11.5px;color:var(--muted);font-weight:700;margin-top:4px;}
.rfx-stud{border:1px solid var(--line);border-radius:13px;padding:13px 14px;margin-bottom:11px;}
.rfx-stud-h{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;}
.rfx-stud-h .nm{font-weight:800;font-size:15px;}
.rfx-chip{font-size:11px;font-weight:800;padding:2px 8px;border-radius:99px;}
.rfx-chip.list{background:var(--ok-soft);color:#0e7a43;}
.rfx-chip.free{background:var(--paper);color:var(--muted);}
.rfx-chip.warn{background:var(--bad-soft);color:var(--bad);}
.rfx-entry-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);}
.rfx-tag{font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:7px;}
.rfx-tag.s-leicht{background:#E4F6EC;color:#0e7a43;} .rfx-tag.s-mittel{background:#FFF6E6;color:#9a6a00;} .rfx-tag.s-schwer{background:#FCE9E7;color:#b33027;}
.rfx-tag.g-gut{background:#E4F6EC;color:#0e7a43;} .rfx-tag.g-mittel{background:#FFF6E6;color:#9a6a00;} .rfx-tag.g-schlecht{background:#FCE9E7;color:#b33027;}
.rfx-perf{font-weight:800;font-size:13px;color:var(--brand-dk);background:var(--brand-soft);padding:2px 9px;border-radius:7px;}
.rfx-date{font-size:11.5px;color:var(--muted);font-weight:600;}
.rfx-empty{text-align:center;color:var(--muted);padding:30px 12px;font-size:14px;}
.rfx-note{font-size:12px;color:var(--muted);background:var(--paper);border-radius:9px;padding:9px 11px;margin-bottom:14px;line-height:1.5;}


#tcRoot{ --tc-ink:#1d1d1f; --tc-ink2:#424245; --tc-mut:#86868b; --tc-line:#e6e6eb; --tc-line2:#d2d2d7; --tc-card:#fff; --tc-bg:#f5f5f7; --tc-blue:#0071e3; --tc-blueD:#0060c0; --tc-green:#34c759; --tc-red:#ff3b30; --tc-amber:#ff9f0a; color:var(--tc-ink); font-size:15px; }
#tcRoot *{ box-sizing:border-box; }
#tcRoot .tc-ic{ width:20px;height:20px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;display:block; }
#tcRoot .tc-ic.sm{ width:16px;height:16px; }
#tcRoot .tc-ic.lg{ width:24px;height:24px; }
#tcRoot .tc-head{ display:flex;align-items:center;gap:14px;margin:2px 2px 20px; }
#tcRoot .tc-head h2{ margin:0;font-size:24px;font-weight:700;letter-spacing:-.02em; }
#tcRoot .tc-head p{ margin:2px 0 0;color:var(--tc-mut);font-size:13.5px; }
#tcRoot .tc-back{ display:inline-flex;align-items:center;gap:3px;color:var(--tc-blue);font-size:14.5px;font-weight:500;cursor:pointer;border:0;background:transparent;padding:6px 8px 6px 2px;margin-bottom:8px;border-radius:8px; }
#tcRoot .tc-back:hover{ opacity:.65; }
#tcRoot .tc-seg{ display:inline-flex;background:#ececf0;border-radius:11px;padding:3px;gap:2px;margin-bottom:18px; }
#tcRoot .tc-seg button{ border:0;background:transparent;padding:8px 18px;font-size:14px;font-weight:600;color:var(--tc-ink2);border-radius:8px;cursor:pointer;transition:background .15s,color .15s; }
#tcRoot .tc-seg button.on{ background:#fff;color:var(--tc-ink);box-shadow:0 1px 2px rgba(0,0,0,.09); }
#tcRoot .tc-grid{ display:grid;gap:13px;grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); }
#tcRoot .tc-card{ background:var(--tc-card);border:1px solid var(--tc-line);border-radius:16px;box-shadow:0 1px 2px rgba(0,0,0,.03),0 8px 22px rgba(0,0,0,.04); }
#tcRoot .tc-dep{ padding:16px 16px 15px;cursor:pointer;position:relative;overflow:hidden;transition:transform .12s,box-shadow .12s; }
#tcRoot .tc-dep:hover{ transform:translateY(-2px);box-shadow:0 4px 10px rgba(0,0,0,.06),0 14px 30px rgba(0,0,0,.08); }
#tcRoot .tc-dep .tc-bar{ position:absolute;left:0;top:0;bottom:0;width:5px; }
#tcRoot .tc-drow{ display:flex;align-items:center;gap:11px; }
#tcRoot .tc-dot{ width:36px;height:36px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:15px; }
#tcRoot .tc-dep h3{ margin:0;font-size:16px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
#tcRoot .tc-sub{ font-size:12.5px;color:var(--tc-mut); }
#tcRoot .tc-chips{ display:flex;flex-wrap:wrap;gap:6px;margin-top:12px; }
#tcRoot .tc-chip{ font-size:11.5px;font-weight:500;padding:4px 9px;border-radius:8px;background:#f0f0f3;color:var(--tc-ink2);display:inline-flex;align-items:center;gap:4px; }
#tcRoot .tc-chip.mut{ color:var(--tc-mut); }
#tcRoot .tc-chip.on{ background:rgba(52,199,89,.14);color:#1f9d47; }
#tcRoot .tc-foot{ display:flex;align-items:center;gap:14px;margin-top:13px;font-size:12.5px;color:var(--tc-mut); }
#tcRoot .tc-foot span{ display:inline-flex;align-items:center;gap:5px; }
#tcRoot .tc-list{ background:var(--tc-card);border:1px solid var(--tc-line);border-radius:16px;overflow:hidden; }
#tcRoot .tc-row{ display:flex;align-items:center;gap:13px;padding:12px 16px;cursor:pointer;border-top:1px solid var(--tc-line);transition:background .12s; }
#tcRoot .tc-row:first-child{ border-top:0; }
#tcRoot .tc-row:hover{ background:#fafafa; }
#tcRoot .tc-av{ width:38px;height:38px;border-radius:50%;flex:none;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:15px; }
#tcRoot .tc-av img{ width:100%;height:100%;object-fit:cover; }
#tcRoot .tc-who{ min-width:0;flex:1; }
#tcRoot .tc-nm{ font-weight:600;font-size:14.5px;letter-spacing:-.01em;display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
#tcRoot .tc-em{ font-size:12.5px;color:var(--tc-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
#tcRoot .tc-badge{ font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;color:#fff;display:inline-flex;align-items:center;gap:4px;white-space:nowrap; }
#tcRoot .tc-badge.soft{ background:#ececf0;color:var(--tc-ink2); }
#tcRoot .tc-badge.super{ background:linear-gradient(135deg,#1d1d1f,#3a3a3c); }
#tcRoot .tc-warn{ display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:600;color:#b06a00;background:rgba(255,159,10,.15);padding:3px 8px 3px 6px;border-radius:20px; }
#tcRoot .tc-warn .tc-ic{ width:12px;height:12px;stroke-width:2.4; }
#tcRoot .tc-chev{ color:var(--tc-line2);flex:none; }
#tcRoot .tc-panel{ padding:20px;margin-bottom:13px; }
#tcRoot .tc-lbl{ font-size:12px;font-weight:600;color:var(--tc-mut);text-transform:uppercase;letter-spacing:.04em;margin:24px 2px 11px;display:flex;align-items:center;gap:7px; }
#tcRoot .tc-field{ margin-bottom:15px; }
#tcRoot .tc-field label{ display:block;font-size:13px;font-weight:600;color:var(--tc-ink2);margin-bottom:6px; }
#tcRoot .tc-in,#tcRoot .tc-sel,#tcRoot textarea.tc-in{ width:100%;border:1px solid var(--tc-line2);border-radius:11px;padding:10px 12px;font-size:14.5px;font-family:inherit;color:var(--tc-ink);background:#fff;outline:none;transition:border .15s,box-shadow .15s; }
#tcRoot .tc-in:focus,#tcRoot .tc-sel:focus,#tcRoot textarea.tc-in:focus{ border-color:var(--tc-blue);box-shadow:0 0 0 3px rgba(0,113,227,.15); }
#tcRoot textarea.tc-in{ resize:vertical;min-height:58px; }
#tcRoot .tc-sw{ display:flex;gap:8px;flex-wrap:wrap; }
#tcRoot .tc-swatch{ width:28px;height:28px;border-radius:50%;cursor:pointer;border:2px solid #fff;box-shadow:0 0 0 1px var(--tc-line2);transition:transform .1s; }
#tcRoot .tc-swatch:hover{ transform:scale(1.1); }
#tcRoot .tc-swatch.on{ box-shadow:0 0 0 2px var(--tc-blue);transform:scale(1.1); }
#tcRoot .tc-perm{ display:flex;align-items:center;gap:13px;padding:12px 2px;border-top:1px solid var(--tc-line); }
#tcRoot .tc-perm:first-child{ border-top:0; }
#tcRoot .tc-pi{ width:34px;height:34px;border-radius:9px;background:#f0f0f3;color:var(--tc-ink2);display:flex;align-items:center;justify-content:center;flex:none; }
#tcRoot .tc-pt{ min-width:0;flex:1; }
#tcRoot .tc-pn{ font-weight:600;font-size:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
#tcRoot .tc-pd{ font-size:12px;color:var(--tc-mut);margin-top:1px; }
#tcRoot .tc-tstd{ font-size:10px;font-weight:700;letter-spacing:.03em;color:var(--tc-mut);background:#f0f0f3;padding:2px 6px;border-radius:6px;text-transform:uppercase; }
#tcRoot .tc-tdev{ font-size:10px;font-weight:700;letter-spacing:.03em;color:#b06a00;background:rgba(255,159,10,.16);padding:2px 6px;border-radius:6px;text-transform:uppercase; }
#tcRoot .tc-tg{ position:relative;width:48px;height:29px;flex:none;cursor:pointer; }
#tcRoot .tc-tg input{ opacity:0;width:0;height:0;position:absolute; }
#tcRoot .tc-tg .tc-tk{ position:absolute;inset:0;background:#e3e3e8;border-radius:99px;transition:background .2s; }
#tcRoot .tc-tg .tc-tk:before{ content:"";position:absolute;width:25px;height:25px;left:2px;top:2px;background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.22);transition:transform .2s; }
#tcRoot .tc-tg input:checked + .tc-tk{ background:var(--tc-green); }
#tcRoot .tc-tg input:checked + .tc-tk:before{ transform:translateX(19px); }
#tcRoot .tc-tg input:disabled + .tc-tk{ opacity:.5;cursor:not-allowed; }
#tcRoot .tc-btn{ display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:11px;padding:10px 17px;font-size:14.5px;font-weight:600;cursor:pointer;background:var(--tc-blue);color:#fff;transition:background .15s,transform .08s;white-space:nowrap; }
#tcRoot .tc-btn:hover{ background:var(--tc-blueD); }
#tcRoot .tc-btn:active{ transform:scale(.98); }
#tcRoot .tc-btn.ghost{ background:#f0f0f3;color:var(--tc-ink); }
#tcRoot .tc-btn.ghost:hover{ background:#e7e7ec; }
#tcRoot .tc-btn.danger{ background:rgba(255,59,48,.12);color:var(--tc-red); }
#tcRoot .tc-btn.danger:hover{ background:rgba(255,59,48,.2); }
#tcRoot .tc-btn.sm{ padding:8px 13px;font-size:13px;border-radius:9px; }
#tcRoot .tc-btns{ display:flex;gap:10px;flex-wrap:wrap;align-items:center; }
#tcRoot .tc-codebox{ border:1px solid var(--tc-line);border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:12px;margin-top:10px;background:#fbfbfd; }
#tcRoot .tc-mono{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15.5px;font-weight:600;letter-spacing:.05em; }
#tcRoot .tc-meta{ font-size:11.5px;color:var(--tc-mut);display:flex;gap:9px;flex-wrap:wrap;margin-top:2px; }
#tcRoot .tc-pill{ font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:20px;background:#f0f0f3;color:var(--tc-ink2); }
#tcRoot .tc-pill.exp{ background:rgba(255,59,48,.12);color:var(--tc-red); }
#tcRoot .tc-iconbtn{ border:0;background:transparent;color:var(--tc-mut);cursor:pointer;padding:7px;border-radius:8px;transition:background .12s,color .12s; }
#tcRoot .tc-iconbtn:hover{ background:#f0f0f3;color:var(--tc-ink); }
#tcRoot .tc-iconbtn.danger:hover{ color:var(--tc-red);background:rgba(255,59,48,.1); }
#tcRoot .tc-search{ position:relative;flex:1;min-width:200px; }
#tcRoot .tc-search .tc-ic{ position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--tc-mut);width:18px;height:18px; }
#tcRoot .tc-search input{ width:100%;border:1px solid var(--tc-line2);border-radius:11px;padding:10px 12px 10px 38px;font-size:14.5px;font-family:inherit;outline:none;background:#fff; }
#tcRoot .tc-search input:focus{ border-color:var(--tc-blue);box-shadow:0 0 0 3px rgba(0,113,227,.15); }
#tcRoot .tc-toolbar{ display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:16px; }
#tcRoot .tc-empty{ text-align:center;padding:36px 18px;color:var(--tc-mut);border:1px dashed var(--tc-line2);border-radius:14px; }
#tcRoot .tc-empty .tc-ic{ width:34px;height:34px;margin:0 auto 10px;color:var(--tc-line2);stroke-width:1.4; }
#tcRoot .tc-stat{ background:var(--tc-card);border:1px solid var(--tc-line);border-radius:13px;padding:14px 16px; }
#tcRoot .tc-stat .n{ font-size:23px;font-weight:700;letter-spacing:-.02em; }
#tcRoot .tc-stat .l{ font-size:12.5px;color:var(--tc-mut);margin-top:1px; }
#tcRoot .tc-statrow{ display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:11px;margin-bottom:6px; }
#tcRoot .tc-tabbar{ display:flex;gap:4px;border-bottom:1px solid var(--tc-line);margin-top:4px;flex-wrap:wrap; }
#tcRoot .tc-tabbar button{ border:0;background:transparent;padding:10px 14px;font-size:14px;font-weight:600;color:var(--tc-mut);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;display:inline-flex;align-items:center;gap:7px;transition:color .15s,border-color .15s; }
#tcRoot .tc-tabbar button .tc-ic{ width:16px;height:16px; }
#tcRoot .tc-tabbar button:hover{ color:var(--tc-ink2); }
#tcRoot .tc-tabbar button.on{ color:var(--tc-blue);border-bottom-color:var(--tc-blue); }
#tcRoot .tc-kboard{ display:grid;grid-template-columns:repeat(3,1fr);gap:12px; }
#tcRoot .tc-kcol{ background:#f5f5f7;border-radius:14px;padding:10px 10px 12px;min-height:80px; }
#tcRoot .tc-khead{ font-size:12.5px;font-weight:700;color:var(--tc-ink2);padding:6px 6px 10px;display:flex;align-items:center;gap:7px; }
#tcRoot .tc-kdot{ width:9px;height:9px;border-radius:50%;flex:none; }
#tcRoot .tc-kcard{ background:#fff;border:1px solid var(--tc-line);border-radius:11px;padding:11px 12px;margin-bottom:8px;box-shadow:0 1px 2px rgba(0,0,0,.04);cursor:grab; }
#tcRoot .tc-kcard:active{ cursor:grabbing; }
#tcRoot .tc-kcard.tc-dragging{ opacity:.45;box-shadow:0 8px 24px rgba(0,0,0,.14); }
#tcRoot .tc-kcol.tc-drop{ outline:2px dashed var(--tc-blue);outline-offset:-3px;background:rgba(0,113,227,.06); }
#tcRoot .tc-grip{ color:var(--tc-line2);display:inline-flex;cursor:grab; }
#tcRoot .tc-grip .tc-ic{ width:15px;height:15px; }
#tcRoot .tc-ktitle{ font-weight:600;font-size:13.5px;line-height:1.35;cursor:pointer;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; }
#tcRoot .tc-kdesc{ font-size:12px;color:var(--tc-mut);margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
#tcRoot .tc-kwho{ display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--tc-ink2);font-weight:600;margin-top:8px;background:#f0f0f3;padding:3px 9px;border-radius:20px; }
#tcRoot .tc-kwho .tc-ic{ width:13px;height:13px; }
#tcRoot .tc-kacts{ display:flex;gap:6px;flex-wrap:wrap;margin-top:10px; }
#tcRoot .tc-kacts .tc-btn{ padding:6px 11px;font-size:12.5px;border-radius:8px; }
@media (max-width:720px){ #tcRoot .tc-kboard{ grid-template-columns:1fr; } }
#tcRoot .tc-tablewrap{ overflow-x:auto;border:1px solid var(--tc-line);border-radius:14px;background:#fff; }
#tcRoot .tc-table{ width:100%;border-collapse:collapse;font-size:13px;min-width:640px; }
#tcRoot .tc-table th{ text-align:left;font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--tc-mut);padding:11px 12px;border-bottom:1px solid var(--tc-line);background:#fafafb;position:sticky;top:0; }
#tcRoot .tc-table td{ padding:11px 12px;border-bottom:1px solid var(--tc-line);vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
#tcRoot .tc-table tbody tr:last-child td{ border-bottom:0; }
#tcRoot .tc-table tbody tr:hover{ background:#fafafa; }


/* "Meine Aufgaben": rendert seit 2026-07 IN der App-Shell (Section
   #screen-mtasks, siehe index-aufgaben.js) statt als fixed-Overlay – daher
   kein position:fixed/z-index/eigener Hintergrund mehr; das weisse Panel der
   Shell traegt den Rahmen, die Section scrollt intern (generische Shell-Regel
   in index.css). */
#mtasks-ov{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:#1d1d1f; }
/* Fallback: haengt das Div doch mal direkt am <body> (alte Einbettung),
   verhaelt es sich wie frueher als Vollflaechen-Overlay. */
body > #mtasks-ov{ position:fixed;inset:0;z-index:10050;background:#f5f5f7;overflow:auto; }
/* Jira-Umbau 2026-07-20: volle Panelbreite (vorher max-width:1000px zentriert),
   Tab-Leiste oben (Unterricht heute | Team) und Listen-Tabellen (.mtl-*) statt
   Kanban-Spalten. Die alten .mt-board/.mt-col/.mt-card-Regeln sind entfernt –
   die Karten-Ansicht existiert nicht mehr (index-aufgaben.js). */
#mtasks-ov .mt-wrap{ max-width:none;margin:0;padding:10px 4px 40px; }
body > #mtasks-ov .mt-wrap{ padding:22px 20px 70px;max-width:1100px;margin:0 auto; }
#mtasks-ov h2{ margin:0;font-size:24px;font-weight:700;letter-spacing:-.02em; }
#mtasks-ov .mt-sub{ font-size:13.5px;color:#86868b;margin-top:2px; }
/* .mt-btn und die SVG-Grundform gelten AUCH ausserhalb von #mtasks-ov:
   das Popup "Neues Ticket" (.mt-popov) haengt an <body>, nicht im Board.
   Ohne die zweite Selektorgruppe waeren dort Knoepfe und Icons nackt. */
#mtasks-ov .mt-btn, .mt-popov .mt-btn{ border:0;border-radius:8px;padding:7px 12px;font-size:12.5px;font-weight:600;cursor:pointer;background:#0071e3;color:#fff;display:inline-flex;align-items:center;gap:6px;font-family:inherit; }
#mtasks-ov .mt-btn:hover, .mt-popov .mt-btn:hover{ background:#0060c0; }
#mtasks-ov .mt-btn.ghost, .mt-popov .mt-btn.ghost{ background:#f0f0f3;color:#1d1d1f; }
#mtasks-ov .mt-btn.ghost:hover, .mt-popov .mt-btn.ghost:hover{ background:#e2e2e7; }
#mtasks-ov .mt-empty{ text-align:center;padding:50px 20px;color:#86868b; }
#mtasks-ov /* Gruppen-Ueberschrift auf der Seite "Meine Aufgaben" (v2.58.0): trennt
   Handlung von Kenntnisnahme. Steht ZWISCHEN zwei Tabellen, nicht in
   einer - eine Ueberschrift mitten in einer Tabelle waere fuer
   Screenreader eine Datenzeile ohne Daten.
   MIT WEM: mtHeuteHtml() in index-aufgaben.js. */
.mt-grp{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;
  letter-spacing:.06em;margin:16px 2px 6px;}
.mt-grp:first-child{margin-top:2px;}
.mt-hint{ font-size:12px;color:#86868b;margin-top:10px;line-height:1.5; }
#mtasks-ov svg, .mt-popov svg{ fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round; }
/* Tab-Leiste (gleiches Muster wie das Ticket-Center, tc-tabbar) */
#mtasks-ov .mt-tabbar{ display:flex;gap:2px;border-bottom:1.5px solid #e6e6eb;margin-bottom:16px; }
#mtasks-ov .mt-tabbar button{ border:0;background:transparent;font:inherit;font-size:14px;font-weight:600;color:#86868b;padding:9px 14px;cursor:pointer;border-bottom:2.5px solid transparent;margin-bottom:-1.5px;display:inline-flex;align-items:center;gap:7px; }
#mtasks-ov .mt-tabbar button.on{ color:#0071e3;border-bottom-color:#0071e3; }
#mtasks-ov .mt-tabn{ background:#0071e3;color:#fff;font-size:11px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px; }
/* Listen-Tabelle (Jira-artig; gleiches Muster wie tc-table) */
#mtasks-ov .mtl-wrap{ overflow-x:auto;border:1px solid #e6e6eb;border-radius:14px;background:#fff; }
#mtasks-ov .mtl-table{ width:100%;border-collapse:collapse;font-size:13px;min-width:680px; }
#mtasks-ov .mtl-table th{ text-align:left;font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#86868b;padding:11px 12px;border-bottom:1px solid #e6e6eb;background:#fafafb;position:sticky;top:0;white-space:nowrap; }
#mtasks-ov .mtl-table td{ padding:11px 12px;border-bottom:1px solid #ececf0;vertical-align:middle;white-space:nowrap; }
#mtasks-ov .mtl-table tbody tr:last-child td{ border-bottom:0; }
#mtasks-ov .mtl-table tbody tr{ cursor:pointer; }
#mtasks-ov .mtl-table tbody tr:hover{ background:#fafafa; }
#mtasks-ov .mtl-table tr.mtl-done td{ opacity:.55; }
#mtasks-ov .mtl-cb{ width:34px; }
#mtasks-ov .mtl-id{ font-size:11.5px;font-weight:700;color:#0071e3;letter-spacing:.03em; }
/* Titel-Spalte: EINE Zeile, Rest mit … abgeschnitten (2026-07-20 abends).
   WARUM: einzelne Commit-/Ticket-Titel sind mehrere hundert Zeichen lang;
   vorher wuchs damit die ganze Tabelle nach rechts und die letzten Spalten
   (Quelle, Chevron) lagen ausserhalb des Bildes - man musste scrollen, um zu
   sehen, was rechts steht. Der volle Text steht im title-Tooltip der Zeile
   (und im Detail), gekuerzt wird NUR die Anzeige.
   ACHTUNG CSS-FALLE: max-width auf <td> ignoriert der Browser im normalen
   (auto) Tabellen-Layout - die Begrenzung muss auf einem BLOCK-Kind sitzen
   (hier b/small). Darum kein max-width auf .mtl-t selbst.
   VERBUNDEN MIT: mtDevHtml/mtTeamHtml (index-aufgaben.js),
   Test qa/integration/test_routing.py (§5). */
#mtasks-ov .mtl-t{ white-space:nowrap;line-height:1.35; }
#mtasks-ov .mtl-t b,
#mtasks-ov .mtl-t small{ display:block;max-width:520px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
#mtasks-ov .mtl-t small{ color:#86868b;font-size:11.5px;margin-top:2px; }
/* Titel + Verweis-Chip ("→ #12") in EINER Zeile: der Titel schrumpft
   (min-width:0 ist noetig, damit ellipsis im Flex-Kind greift), der Chip
   bleibt immer sichtbar. */
#mtasks-ov .mtl-tw{ display:flex;align-items:center;gap:7px;min-width:0; }
#mtasks-ov .mtl-tw b{ flex:1;min-width:0; }
#mtasks-ov .mtl-tw .mtl-chip{ flex:none; }
@media (max-width:900px){ #mtasks-ov .mtl-t b, #mtasks-ov .mtl-t small{ max-width:260px; } }
#mtasks-ov .mtl-ico{ display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;vertical-align:middle;margin-right:2px; }
#mtasks-ov .mtl-chip{ display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:2px 9px;border-radius:20px; }
#mtasks-ov .mtl-who{ display:inline-flex;align-items:center;gap:5px;font-size:12px;color:#424245;font-weight:600;background:#f0f0f3;padding:3px 10px;border-radius:20px; }
#mtasks-ov .mtl-sel{ font:inherit;font-size:12.5px;font-weight:600;border:1px solid #d2d2d7;border-radius:8px;padding:5px 8px;background:#fff;cursor:pointer;outline:none; }
#mtasks-ov .mtl-prog{ display:inline-block;width:74px;height:6px;border-radius:3px;background:#ececf0;vertical-align:middle;margin-right:7px;overflow:hidden; }
#mtasks-ov .mtl-prog span{ display:block;height:100%;border-radius:3px;background:#34c759; }
#mtasks-ov .mtl-chev{ color:#c0c0c5;width:26px; }
#mtasks-ov .mtl-open{ border:0;background:#f0f0f3;color:#424245;border-radius:8px;padding:5px 10px;font:600 12px inherit;cursor:pointer;display:inline-flex;align-items:center;gap:5px; }
#mtasks-ov .mtl-open:hover{ background:#e2e2e7;color:#0071e3; }
/* Seitenzahlen der Log-Ansicht (Zeilen pro Seite waehlbar: 10/15/25/50/100) */
#mtasks-ov .mtl-pg{ border:1px solid #d2d2d7;background:#fff;color:#1d1d1f;border-radius:8px;min-width:30px;height:30px;padding:0 8px;font:600 12.5px inherit;cursor:pointer; }
#mtasks-ov .mtl-pg:hover{ border-color:#0071e3;color:#0071e3; }
#mtasks-ov .mtl-pg.on{ background:#0071e3;border-color:#0071e3;color:#fff;cursor:default; }
/* ===== BACKLOG: links Menue, rechts Liste (Faz 5, 2026-07-20) =============
   Vorher standen beide Listen untereinander - man scrollte an der einen
   vorbei. Jetzt traegt das Menue die Zahlen, rechts steht immer genau EINE
   Liste. Unter 760px klappt es auf eine Spalte (Menue wird zur Chipreihe). */
#mtasks-ov .mt-bkwrap{ display:flex;gap:18px;align-items:flex-start; }
#mtasks-ov .mt-bkside{ flex:none;width:216px;display:flex;flex-direction:column;gap:4px; }
#mtasks-ov .mt-bknav{ display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;
  font:600 13.5px inherit;color:#424245;padding:9px 12px;border-radius:11px;cursor:pointer;text-align:left; }
#mtasks-ov .mt-bknav:hover{ background:#f2f2f5; }
#mtasks-ov .mt-bknav.on{ background:rgba(0,113,227,.1);color:#0071e3; }
#mtasks-ov .mt-bknav-ico{ display:inline-flex;color:currentColor;opacity:.85; }
#mtasks-ov .mt-bknav-tx{ flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
#mtasks-ov .mt-bknav-n{ flex:none;background:#0071e3;color:#fff;font-size:11px;font-weight:700;
  min-width:19px;height:19px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px; }
#mtasks-ov .mt-bknav.on .mt-bknav-n{ background:#0071e3; }
/* "Neues Ticket" ist die Haupt-Handlung des Backlog-Tabs und steht deshalb
   seit 2026-07-21 OBEN im Menü (vorher unter den Listen). */
#mtasks-ov .mt-bknew{ margin:0 0 4px;justify-content:center; }
#mtasks-ov .mt-bkmain{ flex:1;min-width:0; }
#mtasks-ov .mt-bkhead{ margin:0 2px 10px; }
#mtasks-ov .mt-bkhead b{ display:block;font-size:15px;color:#1d1d1f; }
#mtasks-ov .mt-bkhead span{ display:block;font-size:12.5px;color:#86868b;margin-top:2px; }
/* Abschnitts-Überschriften im Seitenmenü (2026-07-21). Das Menü trägt jetzt
   zwei benannte Blöcke ("Tickets" / "Verwaltung"); ohne Überschrift stand
   alles als eine lange Reihe untereinander und man sah nicht, was wozu
   gehört. Die Trennlinie über einem Block (außer dem ersten) macht den
   Schnitt auch ohne Lesen sichtbar. */
#mtasks-ov .mt-bksec{ margin:16px 12px 6px;padding-top:14px;border-top:1px solid #ececf0;
  font:700 11px inherit;letter-spacing:.06em;text-transform:uppercase;color:#86868b; }
#mtasks-ov .mt-bkside > .mt-bksec:first-child{ margin-top:2px;padding-top:0;border-top:0; }
/* Abteilungs-Auswahl: Zubehör der Ticket-Ansichten, deshalb eingerückt und
   mit kleiner Beschriftung statt als eigener Menüpunkt. */
#mtasks-ov .mt-bkfilter{ display:block;margin:8px 2px 2px 12px; }
#mtasks-ov .mt-bkfilter > span{ display:block;font:600 11.5px inherit;color:#86868b;margin:0 0 4px 2px; }
#mtasks-ov .mt-bkdep{ width:100%;border:1px solid #d2d2d7;border-radius:10px;padding:7px 9px;
  font:600 12.5px inherit;color:#1d1d1f;background:#fff;outline:none;cursor:pointer; }
#mtasks-ov .mt-bkdep:focus{ border-color:#0071e3;box-shadow:0 0 0 3px rgba(0,113,227,.12); }
@media (max-width:760px){
  #mtasks-ov .mt-bkwrap{ flex-direction:column;gap:12px; }
  #mtasks-ov .mt-bkside{ width:100%;flex-direction:row;flex-wrap:wrap;align-items:center; }
  #mtasks-ov .mt-bknav{ width:auto; }
  /* Mobil sitzt der Knopf am Ende der Chipreihe – oben wuerde er die
     Zeile sprengen; die Reihenfolge macht CSS-order, nicht das HTML. */
  #mtasks-ov .mt-bknew{ margin:0;order:9; }
  /* Mobil wird das Menü zur Chipreihe: Überschriften und Trennlinien würden
     die Zeile zerreißen, die Auswahl reiht sich als weiterer Chip ein. */
  #mtasks-ov .mt-bksec{ display:none; }
  #mtasks-ov .mt-bkfilter{ margin:0;flex:1;min-width:160px; }
  #mtasks-ov .mt-bkfilter > span{ display:none; }
  #mtasks-ov .mt-bkdep{ width:100%; }
}

/* ===== KANBAN (Team-Tab, 2026-07-21) ======================================
   Zusatz-Ansicht neben der Liste: eine Spalte je Status (MT_ST). Die Karten
   sind HTML5-draggable; der Drop ruft mtStatus() – denselben Weg wie das
   Status-Dropdown der Liste. Auf schmalen Schirmen scrollen die Spalten
   waagerecht (kein Umbruch – ein Kanban mit gestapelten Spalten wäre eine
   schlechtere Liste). */
#mtasks-ov .mt-kb{ display:flex;gap:12px;align-items:flex-start;overflow-x:auto;padding-bottom:6px; }
#mtasks-ov .mt-kbs{ flex:1 1 0;min-width:236px;background:#f5f5f7;border-radius:16px;padding:10px 10px 12px; }
#mtasks-ov .mt-kbs-h{ display:flex;align-items:center;gap:7px;font:700 13px inherit;color:#424245;padding:2px 4px 9px; }
#mtasks-ov .mt-kbs-h b{ margin-left:auto;font-size:12px;color:#86868b; }
#mtasks-ov .mt-kbs-dot{ width:8px;height:8px;border-radius:50%;flex:none; }
#mtasks-ov .mt-kbs-b{ display:flex;flex-direction:column;gap:8px;min-height:60px; }
#mtasks-ov .mt-kbs-leer{ font-size:12.5px;color:#a1a1a6;padding:10px 4px; }
#mtasks-ov .mt-kbc{ background:#fff;border:1px solid #e8e8ed;border-radius:13px;padding:10px 11px;
  cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.04); }
#mtasks-ov .mt-kbc:hover{ border-color:#d2d2d7;box-shadow:0 3px 10px rgba(0,0,0,.07); }
#mtasks-ov .mt-kbc:active{ cursor:grabbing; }
#mtasks-ov .mt-kbc-top{ display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:6px; }
#mtasks-ov .mt-kbc-t{ font:600 13.5px inherit;color:#1d1d1f;line-height:1.35; }
#mtasks-ov .mt-kbc-f{ display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:9px; }

/* ===== POPUP "Neues Ticket" (Faz 5 neu gebaut) ============================
   Die alte Fassung war ein Stapel randloser Felder ohne Beschriftung; das X
   war ein leerer grauer Kasten. Hier: klare Feld-Labels, Typ als farbige
   Chip-Reihe (Farbe = spaeteres Etikett in der Liste), echtes rundes X. */
/* Das Popup haengt an <body>, NICHT in #mtasks-ov - deshalb hier ohne
   #mtasks-ov-Praefix (sonst greift keine einzige Regel). */
.mt-popov{ position:fixed;inset:0;z-index:10050;background:rgba(0,0,0,.38);
  display:flex;align-items:center;justify-content:center;padding:18px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
.mt-pop{ background:#fff;border-radius:20px;box-shadow:0 24px 70px rgba(0,0,0,.3);
  width:100%;max-width:540px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden; }
.mt-pop-h{ display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:18px 20px 14px;border-bottom:1px solid #ececf0; }
.mt-pop-h b{ font-size:17px;color:#1d1d1f; }
.mt-pop-x{ flex:none;width:32px;height:32px;border:0;border-radius:50%;background:#f0f0f3;color:#424245;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center; }
.mt-pop-x:hover{ background:#e2e2e7;color:#1d1d1f; }
.mt-pop-x svg{ width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round; }
.mt-pop-b{ padding:16px 20px;overflow:auto;display:flex;flex-direction:column;gap:14px; }
.mt-popf{ display:block; }
.mt-popf > span{ display:block;font-size:12.5px;font-weight:700;color:#424245;margin:0 0 6px 2px; }
.mt-popf > span i{ font-style:normal;font-weight:600;color:#86868b; }
.mt-popf input, .mt-popf select, .mt-popf textarea{
  width:100%;font:inherit;font-size:14px;color:#1d1d1f;background:#fff;
  border:1px solid #d2d2d7;border-radius:11px;padding:10px 12px;outline:none;box-sizing:border-box; }
.mt-popf textarea{ resize:vertical;min-height:84px;line-height:1.45; }
.mt-popf input:focus, .mt-popf select:focus, .mt-popf textarea:focus{
  border-color:#0071e3;box-shadow:0 0 0 3px rgba(0,113,227,.14); }
.mt-poptyps{ display:flex;gap:7px;flex-wrap:wrap; }
.mt-poptyp{ border:1.5px solid #e0e0e5;background:#fff;color:#424245;font:700 12.5px inherit;
  padding:7px 14px;border-radius:20px;cursor:pointer; }
.mt-poptyp:hover{ border-color:var(--c,#0071e3); }
/* Kein color-mix: das gaebe es zwar in aktuellen Browsern, aber ein heller
   neutraler Ton reicht und funktioniert ueberall gleich. */
.mt-poptyp.on{ border-color:var(--c,#0071e3);color:var(--c,#0071e3);background:#fafafb;box-shadow:inset 0 0 0 1px var(--c,#0071e3); }
.mt-popprio{ display:flex;align-items:flex-start;gap:10px;cursor:pointer;
  border:1px solid #ececf0;border-radius:12px;padding:11px 13px;background:#fafafb; }
.mt-popprio input{ width:17px;height:17px;margin-top:1px;accent-color:#c0392b;cursor:pointer;flex:none; }
.mt-popprio b{ display:block;font-size:13.5px;color:#1d1d1f; }
.mt-popprio i{ display:block;font-style:normal;font-size:12px;color:#86868b;margin-top:1px; }
.mt-pop-warn{ font-size:13px;color:#c0392b;background:rgba(255,59,48,.08);
  border-radius:10px;padding:9px 12px; }
.mt-pop-f{ display:flex;justify-content:flex-end;gap:8px;padding:14px 20px 18px;border-top:1px solid #ececf0; }
.mt-pop-f .mt-btn[disabled]{ opacity:.45;cursor:not-allowed; }

#mtasks-ov .mtl-bulk{ display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;background:#eef4ff;border:1px solid #cfe0ff;border-radius:12px;padding:8px 12px;margin-bottom:10px; }
#mtasks-ov .mtl-bulk.hidden{ display:none; }
#mtasks-ov .mtl-table input[type="checkbox"]{ width:16px;height:16px;accent-color:#0071e3;cursor:pointer; }


#tk-ov{ position:fixed;inset:0;z-index:10100;background:rgba(0,0,0,.34);display:flex;align-items:flex-start;justify-content:center;padding:34px 18px;overflow:auto;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:#1d1d1f; }
/* 2026-07-20: von 640px auf 920px verbreitert – der Jira-artige Detail-Dialog
   (Notizen, Verlauf, Original-Meldung) war zu schmal. */
#tk-ov .tk-box{ background:#fff;border-radius:20px;box-shadow:0 24px 70px rgba(0,0,0,.32);width:100%;max-width:920px;overflow:hidden; }
#tk-ov .tk-h{ padding:18px 20px;border-bottom:1px solid #ececf0;display:flex;align-items:flex-start;gap:12px; }
#tk-ov .tk-num{ font-size:12px;font-weight:700;color:#0071e3;letter-spacing:.03em; }
#tk-ov .tk-title{ font-size:18px;font-weight:700;letter-spacing:-.01em;margin-top:2px;line-height:1.3; }
#tk-ov .tk-meta{ font-size:12px;color:#86868b;margin-top:5px;display:flex;gap:8px;flex-wrap:wrap;align-items:center; }
#tk-ov .tk-close{ border:0;background:#f0f0f3;width:32px;height:32px;border-radius:50%;cursor:pointer;flex:none;display:flex;align-items:center;justify-content:center; }
#tk-ov .tk-close:hover{ background:#e6e6eb; }
#tk-ov .tk-body{ padding:16px 20px;max-height:calc(100vh - 220px);overflow:auto; }
#tk-ov .tk-desc{ font-size:13.5px;color:#424245;white-space:pre-wrap;background:#f7f7f9;border-radius:12px;padding:12px 14px;line-height:1.5; }
#tk-ov .tk-badge{ display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:2px 8px;border-radius:20px; }
#tk-ov .tk-sec{ font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#86868b;margin:20px 0 10px;display:flex;align-items:center;gap:7px; }
#tk-ov .tk-note{ border:1px solid #ececf0;border-radius:12px;padding:11px 13px;margin-bottom:9px; }
#tk-ov .tk-note-h{ display:flex;align-items:center;gap:8px;font-size:12px;color:#86868b;margin-bottom:6px; }
#tk-ov .tk-note-au{ font-weight:700;color:#1d1d1f; }
#tk-ov .tk-note-body{ font-size:13.5px;line-height:1.5;word-break:break-word; }
#tk-ov .tk-note-body img{ max-width:100%;border-radius:8px;margin:6px 0;border:1px solid #ececf0; }
#tk-ov .tk-note-del{ margin-left:auto;border:0;background:transparent;color:#c0c0c5;cursor:pointer;padding:3px;border-radius:6px; }
#tk-ov .tk-note-del:hover{ color:#ff3b30;background:rgba(255,59,48,.1); }
#tk-ov .tk-tools{ display:flex;gap:4px;flex-wrap:wrap;align-items:center;padding:7px;background:#f5f5f7;border:1px solid #e6e6eb;border-bottom:0;border-radius:12px 12px 0 0; }
#tk-ov .tk-tb{ border:0;background:transparent;width:32px;height:32px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#1d1d1f; }
#tk-ov .tk-tb:hover{ background:#e6e6eb; }
#tk-ov .tk-sw{ width:19px;height:19px;border-radius:50%;cursor:pointer;border:2px solid #fff;box-shadow:0 0 0 1px #d2d2d7; }
#tk-ov .tk-ed{ min-height:96px;border:1px solid #e6e6eb;border-radius:0 0 12px 12px;padding:11px 13px;font-size:14px;line-height:1.5;outline:none;background:#fff; }
#tk-ov .tk-ed:empty:before{ content:attr(data-ph);color:#b0b0b5; }
#tk-ov .tk-ed img{ max-width:100%;border-radius:8px;margin:4px 0; }
#tk-ov .tk-actions{ display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:14px 20px;border-top:1px solid #ececf0;background:#fbfbfd; }
#tk-ov .tk-btn{ border:0;border-radius:10px;padding:9px 15px;font-size:13.5px;font-weight:600;cursor:pointer;background:#0071e3;color:#fff;display:inline-flex;align-items:center;gap:7px; }
#tk-ov .tk-btn:hover{ background:#0060c0; }
#tk-ov .tk-btn.ghost{ background:#f0f0f3;color:#1d1d1f; }
#tk-ov .tk-btn.danger{ background:rgba(255,59,48,.12);color:#ff3b30; }
#tk-ov svg{ fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round; }

/* ===== SCHULSEITE: Umbruch auf schmalen Bildschirmen (2026-07) =============
   Der Kopf ist ein 2-Spalten-Grid (Logo/Name links, Kennzahlen rechts) und
   der Bewertungsblock ein 3-Spalten-Grid (Schnitt, Verteilung, Aufruf).
   Beide Grids stehen inline im JS (index-app.js schulseiteHtml/ssBewertungHtml)
   - die Media-Queries koennen dort nicht stehen, deshalb leben sie hier.
   Klassen NICHT umbenennen, ohne das JS mitzuziehen.                        */
@media (max-width: 980px){
  .ss-head-grid{ grid-template-columns:1fr !important; }
  .ss-bew-panel{ grid-template-columns:1fr 1fr !important; }
}
@media (max-width: 640px){
  .ss-bew-panel{ grid-template-columns:1fr !important; }
}

/* Anklickbare Funktionskarte auf der Schulseite: leichtes Anheben beim
   Ueberfahren, damit sichtbar ist, dass sie ein Einstieg ist und kein Bild.
   Erzeugt in index-app.js ssFunktionsKarte() (Klasse nur bei bekanntem Ziel). */
.ss-fn-karte{ transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.ss-fn-karte:hover{ transform:translateY(-2px); border-color:var(--brand); }
.ss-fn-karte:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ .ss-fn-karte{ transition:none; } .ss-fn-karte:hover{ transform:none; } }

/* ===== BACKLOG: sortierbare Spaltenköpfe (2026-07) ========================
   Erzeugt in static/js/index-aufgaben.js (mtBkThs). Nur Spalten MIT
   Sortierfunktion bekommen die Klasse - Aktions-Spalten bleiben normal,
   damit kein Klick ins Leere einlädt. Pfeil zeigt die aktive Richtung.   */
.mtl-table th.mtl-th-sort{ cursor:pointer;user-select:none;white-space:nowrap;
  transition:color .12s ease,background .12s ease; }
.mtl-table th.mtl-th-sort:hover{ color:#0071e3;background:#f0f0f3; }
.mtl-table th.mtl-th-sort.on{ color:#0071e3; }