/* 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; }
/* ===== „UNTERRICHT HEUTE": LISTE LINKS, DETAIL RECHTS (v2.804.0) =========
   Wunsch Murat 22.09.2026: „gmail gibi". Dasselbe Bauprinzip wie die
   Nachrichten-Zentrale (.pf-shell in index.css): Karte, links 340 px Liste,
   rechts der Inhalt auf Papiergrund, beide rollen fuer sich. Schmal
   (<= 720 px, dieselbe Grenze wie das Postfach) steht nur eines von beiden.
   NUR TOKENS: der Waechter test_design_system.py laesst in dieser Datei
   keine weitere feste Farbe zu. JS: mtHeuteHtml/mtDetailHtml
   (index-aufgaben.js). Die Farbfelder (.t-ico-nb, .t-ico-lstd, .t-ico-fpl)
   kommen aus index.css - dieselben wie in der Cockpit-Karte. */
#mtasks-ov .mtg{ display:flex; background:var(--card); border:1.5px solid var(--line);
  border-radius:var(--r-panel); box-shadow:var(--shadow); overflow:hidden;
  height:calc(var(--vh100) - 215px); min-height:440px; }
#mtasks-ov .mtg-liste{ width:340px; flex:none; border-right:1px solid var(--line);
  overflow-y:auto; padding:4px 8px 14px; }
#mtasks-ov .mtg-detail{ flex:1; min-width:0; overflow-y:auto; background:var(--paper); }
#mtasks-ov .mtg-grp{ display:flex; align-items:center; gap:7px; font-size:10.5px; font-weight:800;
  color:var(--muted); text-transform:uppercase; letter-spacing:.06em; padding:13px 10px 5px; }
#mtasks-ov .mtg-grp span{ background:var(--brand-soft); color:var(--brand-dk); border-radius:var(--r-pill);
  padding:1px 7px; letter-spacing:0; }
#mtasks-ov .mtg-row{ width:100%; display:flex; align-items:center; gap:11px; padding:10px;
  border:0; background:transparent; border-radius:var(--r-card); cursor:pointer; text-align:left;
  font:inherit; color:var(--ink); transition:background .14s ease; }
#mtasks-ov .mtg-row:hover{ background:var(--hair); }
#mtasks-ov .mtg-row.on{ background:var(--brand-soft); }
#mtasks-ov .mtg-row:focus-visible{ outline:2px solid var(--brand); outline-offset:-2px; }
#mtasks-ov .mtg .t-ico{ flex:none; width:31px; height:31px; border-radius:9px;
  display:flex; align-items:center; justify-content:center; }
#mtasks-ov .mtg .t-ico svg{ width:17px; height:17px; stroke-width:2.25; }
#mtasks-ov .mtg-tx{ flex:1; min-width:0; }
/* Der Titel darf ZWEI Zeilen haben: „Stunde nachbereiten: …" frisst sonst die
   halbe Breite, und vom Stoff blieb in 340 px nur ein Buchstabe. */
#mtasks-ov .mtg-tx > b{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; font-size:13.5px; font-weight:700; line-height:1.3; overflow-wrap:anywhere; }
#mtasks-ov .mtg-tx small{ display:block; font-size:12px; color:var(--muted); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
#mtasks-ov .mtg-leer{ color:var(--muted); font-size:13.5px; text-align:center; padding:40px 16px; }
/* Rechts: nichts gewaehlt */
#mtasks-ov .mtg-platz{ min-height:100%; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:10px; padding:30px; color:var(--muted); font-size:14px; text-align:center; }
#mtasks-ov .mtg-platz svg{ width:40px; height:40px; stroke-width:1.5; opacity:.55; }
#mtasks-ov .mtg-platz p{ margin:0; }
/* Rechts: das Detail */
#mtasks-ov .mtg-dkopf{ background:var(--card); border-bottom:1px solid var(--line); padding:20px 26px 16px; }
#mtasks-ov .mtg-zurueck{ display:none; align-items:center; gap:4px; border:0; background:transparent;
  color:var(--brand); font:inherit; font-size:14px; font-weight:700; padding:4px 6px 4px 0;
  margin:0 0 8px; cursor:pointer; }
#mtasks-ov .mtg-zurueck svg{ width:18px; height:18px; stroke-width:2.2; }
#mtasks-ov .mtg-dtitel{ display:flex; align-items:flex-start; gap:13px; }
#mtasks-ov .mtg-dtitel .t-ico{ width:38px; height:38px; border-radius:11px; }
#mtasks-ov .mtg-dtitel .t-ico svg{ width:20px; height:20px; }
#mtasks-ov .mtg-dtitel h3{ margin:0; font-size:var(--fs-lg); line-height:1.3; font-weight:750;
  color:var(--ink); overflow-wrap:anywhere; }
#mtasks-ov .mtg-dmeta{ font-size:13px; color:var(--muted); margin-top:3px; }
#mtasks-ov .mtg-dbody{ padding:20px 26px 30px; }
#mtasks-ov .mtg-fakten{ display:grid; grid-template-columns:max-content minmax(0,1fr); gap:9px 20px;
  margin:0 0 20px; font-size:14px; }
#mtasks-ov .mtg-fakten dt{ color:var(--muted); }
#mtasks-ov .mtg-fakten dd{ margin:0; color:var(--ink); font-weight:600; overflow-wrap:anywhere;
  display:flex; align-items:center; gap:9px; }
#mtasks-ov .mtg-bar{ display:inline-block; width:90px; height:6px; border-radius:var(--r-pill);
  background:var(--line); overflow:hidden; flex:none; }
#mtasks-ov .mtg-bar span{ display:block; height:100%; border-radius:var(--r-pill); background:var(--ok); }
#mtasks-ov .mtg-text{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-card);
  padding:14px 16px; margin:0 0 18px; font-size:14px; line-height:1.55; color:var(--ink);
  white-space:pre-wrap; overflow-wrap:anywhere; }
#mtasks-ov .mtg-akt{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
#mtasks-ov .mtg-akt .btn{ width:auto; }
#mtasks-ov .mtg-akt .mini-btn{ display:inline-flex; align-items:center; gap:6px; }
/* Nachbereitung und Lernstaende laufen IM Detail - auf einer eigenen Flaeche. */
#mtasks-ov .mtg-flow{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-card);
  padding:18px 20px; }
@media (max-width:720px){
  #mtasks-ov .mtg{ display:block; height:auto; min-height:0; border-radius:var(--r-card); }
  #mtasks-ov .mtg-liste{ width:auto; border-right:0; padding:2px 6px 10px; }
  #mtasks-ov .mtg-detail{ display:none; }
  #mtasks-ov .mtg.offen .mtg-liste{ display:none; }
  #mtasks-ov .mtg.offen .mtg-detail{ display:block; }
  #mtasks-ov .mtg-zurueck{ display:inline-flex; }
  #mtasks-ov .mtg-dkopf{ padding:12px 14px 14px; }
  #mtasks-ov .mtg-dbody{ padding:14px 14px 22px; }
  #mtasks-ov .mtg-fakten{ gap:7px 14px; }
  #mtasks-ov .mtg-flow{ padding:14px; }
}
/* ===== 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; }

/* ===========================================================================
   KLASSENRECHNER (v2.295.0) - static/js/rechner.js
   ---------------------------------------------------------------------------
   ZWEI DINGE MACHEN DIESEN BILDSCHIRM AUS, und beide stehen hier:

   1. DIE NATUERLICHE SCHREIBWEISE ist reines CSS. Ein Bruch ist ein
      gestapeltes Kaestchen mit Strich dazwischen (.rc-frac), eine Wurzel ein
      Haken mit Ueberstrich (.rc-wur). Deshalb braucht die Anzeige keine
      Mathe-Bibliothek und keinen Neusatz bei jedem Tastendruck - sie ist
      Text, den der Browser ohnehin zeichnet.

   2. KEINE EIGENEN FARBWERTE. Die farbigen Tasten des Vorbilds sind hier
      Bedeutungsfarben aus dem Woerterbuch: SHIFT gelb (--amber), ALPHA gruen
      (--ok), AC rot (--bad), Gleich blau (--brand). Dadurch stimmt der
      Rechner im dunklen Design automatisch mit.

   NACHGEBESSERT v2.308.0 (Befund Murat 19.08.2026: "görünüs normal hesap
   makinesine benzemiyo, tuslarida öyle ... sürekli oynak, yazdigim seye göre
   büyüyüp kücülüyor"). Drei Fehler, und alle drei waren hier im Stylesheet:

   A) DAS GERAET WUCHS MIT DER EINGABE. `.rc-anzeige` hatte nur ein
      `min-height`; ein Bruch ist zwei Zeilen hoch, eine Wurzel anderthalb.
      Also wurde die Anzeige hoeher, das Gehaeuse zog nach, und das ganze
      Tastenfeld rutschte nach unten - waehrend man tippte. Ein Rechner, bei
      dem die 7 nicht dort bleibt, wo sie war, ist unbenutzbar: man tippt
      blind auf eine Stelle, die inzwischen die 8 ist. Jetzt hat die Anzeige
      eine FESTE Hoehe, und zu Grosses rollt INNERHALB des Displays.

   B) DIE ZIFFERNTASTEN WAREN DIE FARBE DES GEHAEUSES. `.rc-geraet` war
      `--paper`, `.rc-n` und `.rc-o` ebenfalls - Kontrast 1.0, also gar
      keiner. Sichtbar waren die Tasten nur durch ihren 2px-Schatten;
      ausgerechnet die Funktionstasten (weiss) stachen hervor, obwohl die
      Ziffern die wichtigsten sind. Auf einem echten Geraet ist es umgekehrt.
      Jetzt tragen die drei Familien drei Flaechen: Ziffern hell und gross,
      Rechenzeichen im Markenhauch, Funktionen ruhig auf dunklerem Grund.

   C) DIE MERKER SPRANGEN. Sie werden in rechner.js jetzt immer alle
      gezeichnet (Begruendung dort); hier bekommen sie feste Plaetze und
      genug Kontrast - vorher war ihre Ruhefarbe `--line`, ein Kastenrand-Ton
      auf Weiss (Kontrast 1.24, praktisch unsichtbar).
   =========================================================================== */
/* DREI SPALTEN (v2.309.0): Verlauf - Geraet - Rechenweg. Das Geraet hat eine
   feste Breite, die beiden Seiten teilen sich den Rest; unter 1100px bricht
   alles untereinander, und dann steht das Geraet OBEN - es ist die
   Hauptsache, nicht der Verlauf. */
#screen-rechner .rc-buehne{ display:grid; gap:18px; align-items:start;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  padding:6px 0 24px; }
@media (max-width:1100px){
  #screen-rechner .rc-buehne{ grid-template-columns:minmax(0,1fr); justify-items:center; }
  .rc-verlauf{ order:2; } .rc-geraet{ order:1; } .rc-solver{ order:3; }
  .rc-seite{ width:min(430px, 100%); }
}
/* DAS GEHAEUSE IST HELL - UND IN BEIDEN DESIGNS DASSELBE (Anweisung Murat
   19.08.2026: "acik renk yap bide ya hesap makinesini"; die dunkle Fassung
   aus v2.309.0 ist damit erledigt). Ein Rechner ist ein GEGENSTAND und keine
   Flaeche der App: er sieht auf dem Beamer gleich aus, egal ob die Lehrkraft
   hell oder dunkel eingestellt hat - deshalb bleibt dies die eine Stelle, an
   der die Flaeche nicht dem Design folgt, nur eben hell.
   DER EIGENTLICHE FEHLER VON FRUEHER BLEIBT BEHOBEN, und darauf kommt es an:
   nicht die Helligkeit war das Problem, sondern dass Gehaeuse und
   Zifferntasten EXAKT dieselbe Farbe hatten (Kontrast 1.0). Das Gehaeuse ist
   deshalb ein spuerbar dunkleres Grau als die weissen Tasten darauf.
   Kein Hex: gemischt aus `white` und dem Markenton - das haelt die Zusage
   "keine eigenen Farbwerte" (test_der_bildschirm_bleibt_ohne_eigene_farben). */
.rc-geraet{ width:min(430px, 100%); border-radius:var(--r-panel);
  background:color-mix(in srgb, white 82%, var(--brand));
  padding:16px 16px 18px; box-shadow:var(--e-2);
  border:1px solid color-mix(in srgb, white 62%, var(--brand)); }
/* Das Display: FESTE Hoehe (siehe A oben - der Kern der Ruhe) und der
   gruenliche Ton eines LCD. Er gehoert zum Gegenstand, deshalb ebenfalls in
   beiden Designs gleich - dunkle Schrift auf hellem Feld, wie beim Original. */
.rc-anzeige{ background:color-mix(in srgb, var(--ok) 13%, white);
  border:1px solid color-mix(in srgb, black 40%, var(--ok));
  border-radius:var(--r-control); padding:8px 12px 10px; height:112px;
  display:flex; flex-direction:column;
  color:color-mix(in srgb, black 88%, var(--ok)); }
/* Die Merker sitzen auf festen Plaetzen und werden nur hell oder dunkel -
   wie Segmente, die angehen. `min-width` je Feld, damit ein eingeschaltetes
   FIX die Zeile nicht breiter macht als ein ausgeschaltetes. */
.rc-merker{ display:flex; gap:7px; font-size:var(--fs-3xs); font-weight:800;
  color:color-mix(in srgb, currentColor 22%, transparent);
  letter-spacing:.06em; height:13px; flex:none; }
.rc-merker span{ min-width:11px; text-align:center; }
.rc-merker .rc-mrk-w{ min-width:13px; }
.rc-merker .an{ color:inherit; }
/* Eingabe und Ergebnis teilen sich den Rest - beide mit `min-height:0`,
   sonst dehnt ein hoher Bruch den Flex-Kasten trotz fester Gehaeusehoehe
   wieder auf. Zu Grosses rollt hier drin, nicht draussen. */
.rc-eingabe{ flex:1; min-height:0; display:flex; align-items:center;
  font-size:21px; color:inherit; line-height:1.35;
  overflow:auto; white-space:nowrap; }
.rc-ergebnis{ flex:none; height:40px; display:flex; align-items:center;
  justify-content:flex-end; font-size:27px; font-weight:800; color:inherit;
  overflow:auto; white-space:nowrap; }
.rc-fehler{ font-size:var(--fs-md); font-weight:700; color:var(--bad-ink); }
/* Der Cursor sitzt auf dem Display und nicht auf der Seite - er muss die
   Schriftfarbe des Displays tragen, nicht den Markenton. */
.rc-anzeige .rc-cur{ background:currentColor; }
/* Der Cursor blinkt - sonst sieht man auf der Leinwand nicht, wo man ist. */
.rc-cur{ display:inline-block; width:1.5px; height:1.05em; background:var(--brand);
  vertical-align:-.15em; animation:rcBlink 1.05s step-end infinite; }
@keyframes rcBlink{ 50%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){ .rc-cur{ animation:none; } }
/* Bruch: zwei Kaestchen uebereinander, der Strich ist die Kante dazwischen. */
.rc-frac{ display:inline-flex; flex-direction:column; vertical-align:middle;
  text-align:center; margin:0 2px; }
.rc-frac>.rc-zae{ padding:0 4px 1px; }
.rc-frac>.rc-nen{ padding:1px 4px 0; border-top:1.4px solid currentColor; }
/* WARUM DIE KLASSEN rc-zae/rc-nen HEISSEN UND NICHT rc-z/rc-n: rc-n ist
   weiter unten die ZAHLENTASTE. Beim ersten Anlauf trugen Nenner und
   Zifferntaste denselben Namen - der Nenner bekam die graue Tastenflaeche
   mitten in die Formel. Zwei Bedeutungen unter einem Klassennamen faellt
   genau dann auf, wenn beide auf demselben Bildschirm stehen.
   Alles in der Anzeige steht MITTIG zueinander (vertical-align:middle):
   sonst klebt das Pluszeichen zwischen zwei Bruechen an deren Oberkante. */
.rc-eingabe .rc-t, .rc-eingabe .rc-kl, .rc-eingabe .rc-fn,
.rc-ergebnis .rc-t{ vertical-align:middle; }
.rc-wur{ vertical-align:middle; }
/* Wurzel: Haken + Ueberstrich ueber dem Radikanden. */
.rc-wur{ display:inline-flex; align-items:flex-start; margin:0 1px; }
.rc-wgrad{ font-size:.62em; margin-right:-.35em; margin-top:-.15em; }
.rc-wzeichen{ font-size:1.06em; }
.rc-wunter{ border-top:1.4px solid currentColor; padding:1px 3px 0; margin-top:.14em; }
.rc-pot, .rc-nach{ font-size:.66em; vertical-align:.62em; }
.rc-fnname{ font-weight:600; }
.rc-t, .rc-kl{ white-space:pre; }
/* SETUP-Klappe (MODE): nur das, was eine Lehrkraft im Unterricht umstellt. */
/* Die SETUP-Klappe sitzt IM Gehaeuse und traegt deshalb dessen Welt, nicht
   die der Seite - eine weisse Karte mitten auf dem schwarzen Geraet sah aus
   wie ein Fremdkoerper, der versehentlich darauf liegt. */
.rc-setup{ margin:10px 0 2px; border-radius:var(--r-control); padding:8px 10px;
  background:white; border:1px solid color-mix(in srgb, white 62%, var(--brand)); }
.rc-setup-zeile{ display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:4px 0; font-size:var(--fs-xs); font-weight:700;
  color:color-mix(in srgb, black 55%, var(--brand)); }
.rc-setup-k{ appearance:none; font:inherit; font-size:var(--fs-xs); font-weight:800;
  cursor:pointer; border-radius:var(--r-pill); padding:4px 11px; margin-left:5px;
  background:color-mix(in srgb, white 88%, var(--brand));
  color:color-mix(in srgb, black 60%, var(--brand));
  border:1px solid color-mix(in srgb, white 66%, var(--brand)); }
.rc-setup-k.an{ background:var(--brand); border-color:var(--brand); color:var(--on-brand); }
/* Tastenblock: fuenf Spalten - dieselbe Rasterbreite wie auf dem Geraet. */
.rc-kopf{ display:grid; grid-template-columns:repeat(5, 1fr); gap:7px;
  align-items:center; margin:14px 0 9px; }
.rc-feld{ display:grid; grid-template-columns:repeat(5, 1fr); gap:7px; }
/* EINE Taste, drei Familien. Die gemeinsame Form steht hier, die Flaeche
   entscheidet die Familie darunter - so bleibt der Unterschied EINE Zeile
   und nicht drei vollstaendige Regelsaetze, die auseinanderlaufen. */
.rc-k{ appearance:none; border:none; cursor:pointer; font:inherit; font-weight:800;
  font-size:var(--fs-sm); color:color-mix(in srgb, black 84%, var(--brand));
  background:white;
  border-radius:var(--r-control); padding:11px 4px 9px; position:relative;
  line-height:1.15;
  box-shadow:0 2px 0 color-mix(in srgb, white 55%, var(--brand)),
             0 3px 7px rgba(20,30,60,.13);
  transition:transform .06s ease, box-shadow .06s ease, background .12s ease,
             filter .12s ease; }
/* Der Druckpunkt: die Taste faellt um genau die 2px ihres Sockels. Ohne das
   quittiert nichts den Druck, und auf dem Tablet weiss man nicht, ob man
   getroffen hat. */
.rc-k:active{ transform:translateY(2px); box-shadow:0 0 0 var(--line); }
.rc-k:hover{ filter:brightness(1.04); }
.rc-k:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
/* Die Zweitbelegung steht KLEIN UEBER der Taste - wie aufgedruckt. Wer an der
   Tafel "SHIFT und dann Wurzel" sagt, zeigt damit auf dasselbe Bild, das die
   Kinder auf ihrem Geraet sehen. */
.rc-zweit{ display:block; font-size:9px; font-weight:800; color:var(--amber-ink);
  line-height:1; margin-bottom:3px; min-height:9px; }
.rc-haupt{ display:block; }
/* DIE DREI FAMILIEN, von hinten nach vorne gelesen:
   Funktionen (rc-f) sind die ruhigsten - es sind 20 Tasten, und wer sie
   braucht, sucht sie gezielt. Sie sitzen auf einem Ton zwischen Gehaeuse und
   Karte, damit die Reihe als BLOCK liest und nicht als 20 Einzelstuecke.
   Ziffern (rc-n) sind hell und am groessten - sie werden am haeufigsten und
   am schnellsten getroffen.
   Rechenzeichen (rc-o) tragen den Markenhauch: sie gehoeren nicht zur Zahl,
   und genau das muss man ohne Lesen sehen. */
/* Die Ziffern sind WEISS und am groessten, die Funktionen sitzen auf einem
   leicht getoenten Grund - damit die zwanzig oberen Tasten als Block lesen
   und der Zahlenblock darunter hervortritt. Zwischen Gehaeuse (82% Weiss)
   und Zifferntaste (reines Weiss) liegt immer ein sichtbarer Sprung; genau
   der fehlte vor v2.309.0 vollstaendig. */
.rc-f{ background:color-mix(in srgb, white 90%, var(--brand)); font-size:var(--fs-xs); }
.rc-n{ background:white; font-size:var(--fs-lg); }
.rc-o{ background:var(--brand-soft); color:var(--brand-dk); font-size:var(--fs-md); }
.rc-w{ background:color-mix(in srgb, white 93%, var(--brand)); font-size:var(--fs-xs); }
.rc-r{ background:var(--bad); color:white; font-size:var(--fs-md); }
.rc-g{ background:var(--ok); color:white; font-size:var(--fs-lg); }
.rc-shift{ background:var(--amber); color:white; font-size:var(--fs-2xs); }
.rc-alpha{ background:var(--ok); color:white; font-size:var(--fs-2xs); }
/* Eingeschaltet: ein heller Ring. Auf dem dunklen Gehaeuse ist das die
   einzige Erhebung, die man aus drei Metern Entfernung noch sieht. */
.rc-shift.an, .rc-alpha.an{ box-shadow:0 0 0 3px var(--brand), 0 2px 0 rgba(20,30,60,.2); }
.rc-mode, .rc-on{ font-size:var(--fs-2xs); }
/* Steuerkreuz: ein Kreis mit vier Feldern - die Bewegung, die die Kinder vom
   Geraet kennen (links/rechts im Term, oben/unten im Verlauf). Derselbe
   Sockel wie eine Taste, sonst schwebt er als einziges Teil ueber dem
   Gehaeuse statt darauf zu liegen. */
.rc-kreuz{ position:relative; width:62px; height:62px; margin:0 auto;
  border-radius:50%; background:white;
  box-shadow:0 2px 0 color-mix(in srgb, white 55%, var(--brand)),
             0 3px 7px rgba(20,30,60,.13); }
.rc-kr{ position:absolute; appearance:none; border:none; background:transparent;
  cursor:pointer; color:var(--brand-dk); font-size:var(--fs-3xs); padding:0; }
.rc-kr-o{ top:2px; left:0; right:0; height:20px; }
.rc-kr-u{ bottom:2px; left:0; right:0; height:20px; }
.rc-kr-l{ left:2px; top:0; bottom:0; width:20px; }
.rc-kr-r{ right:2px; top:0; bottom:0; width:20px; }
.rc-kr:hover{ color:var(--brand); }
/* Tafelmodus: alles groesser, und daneben die gedrueckte Tastenfolge.
   Die Anzeige waechst hier MIT - das ist der einzige Ort, an dem sie das
   darf, und sie tut es beim Umschalten, nicht beim Tippen. */
.rc-tafel .rc-geraet{ width:min(560px, 100%); }
.rc-tafel .rc-anzeige{ height:150px; }
.rc-tafel .rc-eingabe{ font-size:27px; }
.rc-tafel .rc-ergebnis{ height:54px; font-size:38px; }
.rc-tafel .rc-k{ font-size:17px; padding:15px 4px 13px; }
.rc-tafel .rc-n{ font-size:21px; }
.rc-spur{ width:min(240px, 100%); background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-card); padding:12px 14px; }
.rc-spur-liste{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.rc-spur-liste span{ background:var(--paper); border-radius:var(--r-control); padding:4px 8px;
  font-size:var(--fs-sm); font-weight:800; color:var(--ink); }
.rc-spur-leer{ background:transparent !important; color:var(--muted) !important;
  font-weight:600 !important; }
/* ---- DIE ZWEI SEITENSPALTEN (v2.309.0) ---------------------------------
   Verlauf links, Rechenweg rechts. Anders als das Geraet gehoeren sie zur
   APP und nicht zum Gegenstand - sie folgen deshalb dem Design der Seite
   (hell/dunkel) und benutzen die gewohnten Tokens. Genau diese Trennung
   macht den Bildschirm lesbar: in der Mitte liegt ein Ding, links und
   rechts steht Text darueber. */
.rc-seite{ background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-card); padding:14px 16px 16px; min-width:0;
  max-height:76vh; overflow:auto; }
.rc-seite-kopf{ font-size:var(--fs-3xs); font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.rc-seite-leer{ font-size:var(--fs-sm); color:var(--muted); line-height:1.55; }
.rc-vliste{ display:flex; flex-direction:column; gap:6px; }
.rc-veintrag{ appearance:none; text-align:left; font:inherit; cursor:pointer;
  display:flex; flex-direction:column; gap:2px; width:100%; min-width:0;
  border:1px solid transparent; border-radius:var(--r-control);
  background:var(--paper); color:var(--ink); padding:7px 10px;
  transition:border-color .12s ease, background .12s ease; }
.rc-veintrag:hover{ border-color:var(--brand); background:var(--brand-soft); }
.rc-vterm{ font-size:var(--fs-sm); overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
.rc-vwert{ font-size:var(--fs-sm); font-weight:800; color:var(--brand-dk); }
.rc-sv-satz{ font-size:var(--fs-sm); color:var(--muted); line-height:1.55;
  margin-bottom:10px; }
.rc-sv-zeile{ display:flex; gap:8px; flex-wrap:wrap; }
#rc-sv-feld{ flex:1; min-width:140px; font:inherit; font-size:var(--fs-md);
  border:1px solid var(--line); border-radius:var(--r-control);
  background:var(--paper); color:var(--ink); padding:9px 11px; }
#rc-sv-feld:focus{ outline:2px solid var(--brand); outline-offset:1px; }
.rc-sv-los{ appearance:none; border:none; cursor:pointer; font:inherit;
  font-size:var(--fs-sm); font-weight:800; border-radius:var(--r-control);
  background:var(--brand); color:var(--on-brand); padding:9px 14px; }
.rc-sv-bsp{ display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  margin-top:12px; font-size:var(--fs-xs); color:var(--muted); }
.rc-sv-bsp button{ appearance:none; cursor:pointer; font:inherit;
  font-size:var(--fs-xs); font-weight:800; border-radius:var(--r-pill);
  border:1px solid var(--line); background:var(--paper); color:var(--brand-dk);
  padding:3px 10px; }
.rc-sv-bsp button:hover{ border-color:var(--brand); background:var(--brand-soft); }
.rc-sv-fehler{ margin-top:12px; font-size:var(--fs-sm); line-height:1.5;
  border-radius:var(--r-control); padding:9px 11px;
  background:var(--bad-soft); color:var(--bad-ink); }
/* DIE SCHRITTE SIND NUMMERIERT, und das ist keine Zierde: die Klasse sagt
   "ich haenge bei Schritt 3" - ohne Nummern gibt es dafuer kein Wort. */
.rc-schritte{ list-style:none; counter-reset:rcs; margin:14px 0 0; padding:0;
  display:flex; flex-direction:column; gap:2px; }
.rc-schritte li{ counter-increment:rcs; position:relative;
  padding:8px 0 10px 30px; border-bottom:1px solid var(--line); }
.rc-schritte li:last-child{ border-bottom:0; }
.rc-schritte li::before{ content:counter(rcs); position:absolute; left:0; top:8px;
  width:20px; height:20px; border-radius:var(--r-pill); display:flex;
  align-items:center; justify-content:center; font-size:var(--fs-3xs);
  font-weight:800; background:var(--paper); color:var(--muted); }
.rc-schritte li.letzt::before{ background:var(--ok-soft); color:var(--ok-ink); }
.rc-sch-zeile{ font-size:var(--fs-md); font-weight:750; color:var(--ink);
  overflow-x:auto; }
.rc-schritte li.letzt .rc-sch-zeile{ font-weight:830; }
.rc-sch-wort{ font-size:var(--fs-xs); color:var(--muted); margin-top:2px;
  line-height:1.45; }
/* SCHMALE SCHIRME: nur enger, nicht anders. Die Anzeige behaelt ihre feste
   Hoehe - sie ist hier sogar wichtiger als am Computer, weil ein Daumen auf
   einer Taste liegt, die nicht wandern darf. */
@media (max-width:640px){
  .rc-geraet{ padding:12px 11px 14px; }
  .rc-k{ font-size:var(--fs-xs); padding:10px 2px 8px; }
  .rc-n{ font-size:var(--fs-md); }
  .rc-anzeige{ height:100px; }
  .rc-eingabe{ font-size:var(--fs-lg); }
  .rc-ergebnis{ height:34px; font-size:23px; }
  .rc-tafel .rc-geraet{ width:100%; }
}
/* ---- DAS FENSTER (v2.899.0, rechner.js Abschnitt 9) ----------------------
   Derselbe Gegenstand wie auf der Seite, nur kleiner: das Gehaeuse traegt
   die Flaeche, der Kopf ist ein schmaler Griff darauf (ziehen), Minus legt
   es als Pille in die Ecke.
   `zoom` STATT `transform:scale`: zoom veraendert das LAYOUT - Tasten und
   Schrift bleiben scharf und genau dort treffbar, wo man sie sieht;
   transform verschiebt nur das Bild. Ein Browser ohne zoom zeigt das Geraet
   in Seitengroesse - groesser, nicht kaputt.
   z-index 9650: ueber dem Heft im Vollbild (9000) und der Stoppuhr (9600),
   unter den Menues des Hefts (10020). `right:96px`: die Ecke rechts unten
   gehoert dem Maskottchen des Assistenten - die Pille laege sonst darauf. */
.rc-fenster{ position:fixed; right:96px; bottom:24px; z-index:9650;
  border-radius:var(--r-panel); padding:4px 6px 6px;
  background:color-mix(in srgb, white 82%, var(--brand));
  border:1px solid color-mix(in srgb, white 62%, var(--brand));
  box-shadow:var(--e-3); user-select:none; -webkit-user-select:none; }
.rc-fenster .rc-geraet{ zoom:.72; width:430px; box-shadow:none; border:0; padding-top:6px; }
.rc-fe-kopf{ display:flex; align-items:center; gap:6px; padding:2px 2px 0 8px;
  cursor:grab; touch-action:none;
  color:color-mix(in srgb, black 62%, var(--brand)); }
.rc-fe-zieht .rc-fe-kopf, .rc-fe-zieht .rc-fe-mini{ cursor:grabbing; }
.rc-fe-kopf > svg, .rc-fe-knopf svg, .rc-fe-mini svg{ fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.rc-fe-kopf > svg{ width:16px; height:16px; }
.rc-fe-titel{ flex:1; font-size:var(--fs-xs); font-weight:800; letter-spacing:.02em; }
.rc-fe-knopf{ appearance:none; border:none; background:transparent; cursor:pointer;
  display:flex; padding:7px; border-radius:var(--r-control); color:inherit; }
.rc-fe-knopf:hover{ background:color-mix(in srgb, white 64%, var(--brand)); }
.rc-fe-knopf:focus-visible, .rc-fe-mini:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.rc-fe-knopf svg{ width:18px; height:18px; }
/* Eingeklappt: die Pille mit dem letzten Ergebnis - gross genug, um es vom
   Pult aus zu lesen. */
.rc-fenster.rc-fe-klein{ padding:0; border-radius:var(--r-pill); }
.rc-fe-mini{ appearance:none; border:none; background:transparent; font:inherit;
  display:flex; align-items:center; gap:9px; cursor:grab; touch-action:none;
  padding:10px 20px 10px 16px; border-radius:var(--r-pill);
  font-size:var(--fs-lg); font-weight:800; font-variant-numeric:tabular-nums;
  color:color-mix(in srgb, black 84%, var(--brand)); }
.rc-fe-mini svg{ width:22px; height:22px; }
@media (max-width:640px){
  .rc-fenster{ right:10px; bottom:10px; }
  .rc-fenster .rc-geraet{ zoom:.66; }
}