/* OKNXT Unterseite Aufgabenboard (Präfix tb-). Baut auf site.css, abschnitte.css und agenten-seite.css auf (Abstände 150 px wie überall).
   Software-Ansichten hell wie in OKNXT, in den OKNXT-Farben. Personen erfunden.
   Achtung: --w und --dreh sind seitenweit als Winkel registriert, hier nicht verwenden. */

.tb-seite{--h-grund:#F2F4F9;--h-linie:#E2E7F1;--h-text:#161B2E;--h-text-2:#667089;--h-text-3:#98A1B5;
  --tb-blau:#2F6BFF;--tb-cyan:#00A8C0;--tb-gruen:#16A36A;--tb-bern:#F59E0B;--tb-rot:#E5484D;--tb-pink:#D6338A;--tb-violett:#7B3BFF;--tb-tuerkis:#0FA3A3}
.tb-hell{color:var(--h-text)}

/* ---------- Board, Spalten, Karten ---------- */
.tb-board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px;align-items:start}
.tb-spalte{min-width:0;display:flex;flex-direction:column;gap:7px;padding:0 0 9px;border-radius:12px;background:var(--tb-spalte-bg,#E8ECF4)}
.tb-spalte>header{position:relative;display:flex;align-items:center;gap:7px;padding:9px 9px 9px 10px;border-radius:12px 12px 10px 10px;background:var(--tb-f1,#fff);box-shadow:0 6px 16px -12px rgba(22,27,46,.35)}
.tb-spalte>header::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:12px 12px 0 0;background:var(--f)}
.tb-nr{flex:none;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;font-size:.56rem;font-weight:700;color:var(--f);background:color-mix(in srgb,var(--f) var(--tb-mix-p,13%),var(--tb-mix,#fff))}
.tb-spalte>header b{flex:1;min-width:0;font-size:.7rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@property --tbp{syntax:"<number>";inherits:false;initial-value:0}
.tb-ring{--tbp:0;position:relative;flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:conic-gradient(var(--tb-gruen) calc(var(--tbp) * 360deg),var(--tb-ring-bahn,#E3E8F1) 0);transition:--tbp .7s ease}
.tb-ring::before{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--tb-f1,#fff)}
.tb-ring b{position:relative;font-size:.46rem!important;font-weight:700;color:var(--h-text-2);font-variant-numeric:tabular-nums}
.tb-ring.voll{animation:tb-voll .7s cubic-bezier(.34,1.56,.64,1)}
@keyframes tb-voll{40%{transform:scale(1.25);box-shadow:0 0 0 6px rgba(22,163,106,.18)}}
.tb-spalte ul{list-style:none;margin:0;padding:0 6px;display:grid;gap:6px}
.tb-karte{position:relative;display:flex;gap:8px;align-items:flex-start;padding:8px 9px;border-radius:9px;background:var(--tb-karte-bg,#fff);border:1px solid var(--h-linie);box-shadow:0 4px 10px -8px rgba(22,27,46,.4);transition:opacity .4s,background .4s,filter .4s,transform .4s,box-shadow .4s}
.tb-haken{position:relative;flex:none;width:13px;height:13px;margin-top:1px;border-radius:4px;border:1.5px solid var(--tb-haken-rand,#C3CCE0);background:var(--tb-haken-bg,#fff);transition:background .3s,border-color .3s}
.tb-haken::after{content:"";position:absolute;left:3.5px;top:.5px;width:3px;height:6.5px;border:solid #fff;border-width:0 1.6px 1.6px 0;transform:rotate(45deg) scale(0);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.erledigt>.tb-haken,.tb-check li.erledigt .tb-haken{background:var(--tb-gruen);border-color:var(--tb-gruen)}
.erledigt>.tb-haken::after,.tb-check li.erledigt .tb-haken::after{transform:rotate(45deg) scale(1)}
.tb-k-text{min-width:0;display:grid;gap:4px}
.tb-k-text b{font-size:.62rem;font-weight:600;line-height:1.3}
.tb-karte.erledigt{background:var(--tb-erledigt,#F7F9FC)}
.tb-karte.erledigt .tb-k-text b{color:var(--h-text-3);text-decoration:line-through;text-decoration-color:var(--tb-haken-rand,#C3CCE0)}
.tb-k-meta{display:flex;align-items:center;gap:6px;font-size:.5rem;color:var(--h-text-2)}
.tb-art{padding:2px 5px;border-radius:4px;font:700 .46rem/1.2 "JetBrains Mono",monospace;font-style:normal;letter-spacing:.06em}
.tb-art-auto{color:var(--tb-blau-t,#2457D6);background:var(--tb-blass,#E8F1FF)}
.tb-art-manuell{color:var(--tb-grau-t,#6B7489);background:var(--tb-grau,#EEF1F6)}
.tb-abt{display:inline-flex;align-items:center;gap:4px}
.tb-abt::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--a)}
.tb-karte.pulst{animation:tb-pulst .8s ease}
@keyframes tb-pulst{40%{transform:scale(1.04);box-shadow:0 0 0 3px rgba(22,163,106,.2)}}
.tb-zeiger{position:absolute;z-index:9;left:0;top:0;width:26px;height:26px;pointer-events:none;opacity:0;transform:translate(var(--zx,60%),var(--zy,60%));transition:transform .95s cubic-bezier(.65,0,.35,1),opacity .4s}
.tb-zeiger.da{opacity:1}
.tb-zeiger svg{width:26px;height:26px;fill:#161B2E;stroke:#fff;stroke-width:1.6;filter:drop-shadow(0 4px 8px rgba(0,0,0,.35))}
.tb-zeiger i{position:absolute;left:3px;top:2px;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;border:2px solid #2F6BFF;opacity:0}
.tb-zeiger.klick i{animation:tb-ring-klick .6s ease-out}
.tb-zeiger.klick svg{animation:tb-druck .3s ease}
@keyframes tb-ring-klick{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.4)}}
@keyframes tb-druck{50%{transform:scale(.82)}}

/* ---------- A1 · Einstieg ---------- */
.tb-start{position:relative;padding:clamp(28px,5vh,64px) var(--seitenrand) 0}
.tb-start-innen{max-width:var(--ab-breite);margin:0 auto;display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(24px,4vw,56px);align-items:center;min-height:calc(100svh - var(--oben-hoehe,100px) - 40px)}
.tb-start .h1{max-width:13ch;font-size:clamp(2.3rem,4.2vw,4rem)}
.tb-start .unterzeile{max-width:42ch}
.tb-fakten{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tb-fakten li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;font-size:.84rem;color:var(--text-2);border:1px solid var(--linie-stark);background:color-mix(in srgb,var(--panel) 80%,transparent)}
.tb-fakten li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--verlauf);box-shadow:0 0 8px rgba(47,107,255,.8)}
.tb-start .einstieg-aktionen{display:flex;margin-top:30px}
.tb-buehne{position:relative;perspective:1800px;padding:30px 0 0}
.tb-buehne::before{content:"";position:absolute;inset:-4% -8%;background:radial-gradient(50% 50% at 55% 50%,rgba(47,107,255,.4),transparent 70%),radial-gradient(35% 40% at 85% 80%,rgba(155,5,254,.28),transparent 70%);filter:blur(20px);pointer-events:none;opacity:0;transition:opacity 1.6s ease .2s}
.tb-an.tb-buehne::before{opacity:1}
.tb-schirm{--rx:18deg;--ry:-18deg;position:relative;overflow:hidden;display:grid;gap:10px;padding:12px;border-radius:20px;background:var(--h-grund);border:1px solid rgba(255,255,255,.6);
  box-shadow:0 60px 120px -40px rgba(0,0,0,.9),0 0 0 1px rgba(143,164,255,.25),0 0 90px -30px rgba(92,203,255,.6);
  transform:rotateX(var(--rx)) rotateY(var(--ry));opacity:0;translate:0 60px;transition:transform 1.1s cubic-bezier(.22,1,.36,1),opacity 1s ease,translate 1.3s cubic-bezier(.22,1,.36,1)}
.tb-an .tb-schirm{--rx:6deg;--ry:-10deg;opacity:1;translate:0 0}
.tb-buehne.tb-folgt .tb-schirm{transition:transform .5s cubic-bezier(.22,1,.36,1),opacity 1s ease,translate 1.3s cubic-bezier(.22,1,.36,1)}
.tb-stationen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px}
.tb-stationen li{padding-bottom:6px;font-size:.44rem;font-weight:600;color:var(--h-text-3);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:inset 0 -2px 0 #DCE3F0;transition:color .4s,box-shadow .4s}
.tb-stationen li.fertig{color:var(--h-text);box-shadow:inset 0 -2px 0 var(--f)}
.tb-stationen li.jetzt{color:var(--tb-violett);box-shadow:inset 0 -3px 0 var(--f)}
.tb-held{grid-auto-columns:minmax(118px,1fr);overflow:hidden;width:max-content;transition:transform 1s cubic-bezier(.65,0,.35,1)}
.tb-held .tb-spalte{width:132px;opacity:0;transform:translateY(22px);transition:opacity .6s ease calc(.5s + var(--n) * .08s),transform .8s cubic-bezier(.22,1.2,.4,1) calc(.5s + var(--n) * .08s),background .3s}
.tb-an .tb-held .tb-spalte{opacity:1;transform:none}
.tb-held .tb-spalte.jetzt{background:#DCE6FF}
.tb-chip{position:absolute;z-index:3;right:-2%;bottom:-8px;display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border-radius:999px;font-size:.78rem;color:var(--text);background:rgba(14,17,27,.86);border:1px solid rgba(143,164,255,.35);box-shadow:0 20px 40px -18px rgba(0,0,0,.9),0 0 30px -10px rgba(47,107,255,.8);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;translate:0 14px;transition:opacity .5s ease,translate .7s cubic-bezier(.22,1,.36,1)}
.tb-chip i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:linear-gradient(140deg,#16A36A,var(--cyan))}
.tb-chip svg{width:12px;height:12px;color:#fff}
.tb-chip.da{opacity:1;translate:0 0}

/* ---------- A2 · Vorlagen ---------- */
.tb-tpl-fenster{position:relative;max-width:1080px;margin:0 auto;padding:18px;border-radius:22px;background:var(--h-grund);border:1px solid rgba(255,255,255,.55);box-shadow:0 50px 100px -50px rgba(0,0,0,.95),0 0 120px -40px rgba(92,203,255,.45)}
.tb-tpl-kopf{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px;margin:0 2px 12px}
.tb-tpl-kopf>b{font-size:1.05rem;font-weight:700}
.tb-zaehler{font-size:.62rem;color:var(--h-text-2);letter-spacing:.06em}
.tb-zaehler b{font-family:"Manrope",sans-serif;font-size:.95rem;color:var(--h-text);font-variant-numeric:tabular-nums}
.tb-tpl-raster{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin-bottom:14px}
.tb-tpl{position:relative;display:grid;gap:3px;align-content:start;text-align:left;padding:11px 12px;border-radius:12px;border:1.5px solid var(--h-linie);background:var(--tb-f1,#fff);color:var(--h-text)}
.tb-tpl b{font-size:.76rem;line-height:1.25}
.tb-tpl small{font-size:.6rem;color:var(--h-text-2)}
.tb-tpl em{position:absolute;right:7px;top:-8px;padding:2px 6px;border-radius:6px;font:600 .52rem/1.3 "Manrope",sans-serif;font-style:normal;color:var(--tb-neu-t,#C2410C);background:var(--tb-neu-bg,#FFEDE3);border:1px solid var(--tb-neu-rand,#FDC9AE)}
.tb-tpl.an{border-color:#7B9BFF;background:var(--tb-zart,#F2F5FF);box-shadow:0 0 0 3px rgba(47,107,255,.12),0 14px 30px -18px rgba(47,107,255,.8)}
/* Board mit fünf sichtbaren Stationen; beim Scrollen gleitet es nach links (angeheftet ab 1101 px) */
.tb-tpl-bahn{overflow:hidden;border-radius:12px}
.tb-tpl-board{grid-auto-columns:calc((100% - 40px) / 5);min-height:300px;will-change:transform}
.tb-tpl-fuss{display:flex;align-items:center;gap:14px;margin-top:12px}
.tb-tpl-fort{flex:1;height:4px;border-radius:4px;background:var(--tb-bahn,#DCE3F0);overflow:hidden}
.tb-tpl-fort i{display:block;height:100%;width:calc(50% + var(--fp,0) * 50%);border-radius:inherit;background:linear-gradient(90deg,var(--cyan),var(--blau),var(--violett))}
.tb-tpl-info{font-size:.6rem;color:var(--h-text-2)}
.tb-tpl-info b{font-family:"Manrope",sans-serif;color:var(--h-text);font-size:.8rem}
.tb-leer{grid-column:1/-1;display:grid;place-items:center;gap:8px;min-height:230px;border-radius:14px;border:1.5px dashed var(--tb-gestrichelt,#C7D0E3);font-size:.86rem;color:var(--h-text-2);text-align:center;padding:20px}
.tb-leer b{display:block;color:var(--h-text);font-size:1rem}

/* ---------- A3 · Aufgabenkarte ---------- */
.tb-kt{position:relative;display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(18px,2.4vw,32px);max-width:1080px;margin:0 auto;align-items:start;perspective:1600px}
.tb-kt-spalte{box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
.tb-kt-spalte .tb-karte:first-child{border-color:#9DB6FF;box-shadow:0 0 0 3px rgba(47,107,255,.14);transition:box-shadow .4s,transform .4s}
.tb-kt-spalte .tb-karte:first-child.geoeffnet{transform:translateX(8px) scale(1.04);box-shadow:0 0 0 3px rgba(47,107,255,.25),0 18px 30px -12px rgba(47,107,255,.6)}
.tb-fenster{position:relative;padding:18px 20px 20px;border-radius:20px;background:#fff;border:1px solid rgba(255,255,255,.6);box-shadow:0 50px 100px -40px rgba(0,0,0,.95),0 0 120px -40px rgba(155,5,254,.45);transform-origin:0 30%;transition:opacity .7s ease,transform 1.1s cubic-bezier(.22,1,.36,1)}
.tb-kt.zu .tb-fenster{opacity:0;transform:translateX(-120px) rotateY(-28deg) scale(.6)}
.tb-f-kopf{position:relative;display:grid;gap:8px;padding-bottom:12px;border-bottom:1px solid var(--h-linie)}
.tb-f-tags{display:flex;flex-wrap:wrap;gap:5px}
.tb-f-tags em{padding:3px 8px;border-radius:6px;font-size:.62rem;font-style:normal;color:var(--h-text-2);background:#EEF1F6}
.tb-f-tags em:first-child{color:#5B2BC0;background:#F0E8FF}
.tb-f-kopf>b{font-size:1.15rem;font-weight:700}
.tb-f-zu{position:absolute;right:0;top:0;font-size:1.3rem;color:var(--h-text-3)}
.tb-f-leiste{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:12px 0}
.tb-f-faellig{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:9px;border:1px solid var(--h-linie);font-size:.74rem}
.tb-f-faellig svg{width:14px;height:14px;color:var(--h-text-2)}
.tb-schalter{display:inline-flex;align-items:center;gap:8px;font-size:.74rem;color:var(--h-text-2)}
.tb-schalter i{position:relative;width:30px;height:17px;border-radius:999px;background:#D5DBE7;transition:background .3s}
.tb-schalter i::after{content:"";position:absolute;left:2px;top:2px;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.tb-schalter.an i{background:var(--tb-gruen)}
.tb-schalter.an i::after{transform:translateX(13px)}
.tb-f-team{display:inline-flex;align-items:center;gap:6px;margin-left:auto}
.tb-avs{display:flex}
.tb-avs i,.tb-komm-liste i,.tb-team-avs i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font:700 .58rem/1 "Manrope",sans-serif;font-style:normal;color:#fff;background:var(--a);border:2px solid #fff}
.tb-avs i+i{margin-left:-8px}
.tb-av-neu{transform:scale(0);transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.tb-av-neu.da{transform:none}
.tb-f-plus{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1.5px dashed #C3CCE0;color:var(--h-text-2)}
.tb-f-plus svg{width:12px;height:12px}
.tb-f-raster{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tb-f-block{padding:12px 14px;border-radius:12px;background:var(--h-grund);opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.tb-kt.offen .tb-f-block{opacity:1;transform:none}
.tb-kt.offen .tb-f-block:nth-child(2){transition-delay:.08s}.tb-kt.offen .tb-f-block:nth-child(3){transition-delay:.16s}.tb-kt.offen .tb-f-block:nth-child(4){transition-delay:.24s}.tb-kt.offen .tb-f-block:nth-child(5){transition-delay:.32s}
.tb-f-beschr,.tb-f-komm{grid-column:1/-1}
.tb-f-titel{display:flex;justify-content:space-between;margin:0 0 8px;font-size:.58rem;font-weight:600;color:var(--h-text-2)}
.tb-f-beschr p:not(.tb-f-titel){margin:0 0 10px;font-size:.8rem;line-height:1.55;color:#3D4560}
.tb-f-knopf{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:9px;font-size:.74rem;font-weight:600;color:#fff;background:linear-gradient(100deg,#2F6BFF,#7B3BFF)}
.tb-f-knopf svg{width:14px;height:14px}
.tb-check{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.tb-check li{display:flex;align-items:center;gap:9px;font-size:.76rem;transition:color .3s}
.tb-check .tb-haken{width:16px;height:16px;margin:0}
.tb-check .tb-haken::after{left:4.5px;top:1.5px;width:4px;height:8px}
.tb-check li.erledigt{color:var(--h-text-3);text-decoration:line-through}
.tb-check-zahl{color:var(--tb-gruen);font-variant-numeric:tabular-nums}
.tb-doks{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.tb-doks li{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:9px;background:#fff;font-size:.72rem}
.tb-doks b{flex:1;min-width:0;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-doks em{font-style:normal;font-size:.62rem;color:var(--h-text-3)}
.tb-dokart{padding:2px 5px;border-radius:4px;font:700 .5rem/1.2 "Manrope",sans-serif;color:#C62828;background:#FFE9E9}
.tb-doks li+li .tb-dokart{color:#11804F;background:#E3F8EE}
.tb-links{display:flex;flex-wrap:wrap;gap:6px}
.tb-link{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:9px;font-size:.72rem;font-weight:600;color:#fff;background:#2F5BE3;transition:transform .3s,box-shadow .3s}
.tb-link svg{width:13px;height:13px}
.tb-link.glimmt{transform:translateY(-2px);box-shadow:0 10px 20px -8px rgba(47,91,227,.8)}
.tb-komm-feld{min-height:40px;padding:10px 12px;border-radius:10px;border:1px solid var(--h-linie);background:#fff;font-size:.78rem}
.tb-komm-text:empty::before{content:"Kommentar schreiben … (Kollegen oder Abteilung mit @ erwähnen)";color:var(--h-text-3)}
.tb-komm-text.tippt::after{content:"";display:inline-block;width:1.5px;height:1em;margin-left:1px;vertical-align:-2px;background:var(--blau);animation:tb-cursor .7s steps(2) infinite}
@keyframes tb-cursor{50%{opacity:0}}
.tb-erw{color:#2F6BFF;font-weight:600;background:#EEF2FF;border-radius:4px;padding:0 3px}
.tb-komm-liste{list-style:none;margin:8px 0 0;padding:0}
.tb-komm-liste li{display:flex;gap:9px;align-items:flex-start;animation:tb-karte-rein .5s cubic-bezier(.22,1,.36,1)}
.tb-komm-liste li>span{display:grid;gap:2px;font-size:.76rem;padding:8px 11px;border-radius:10px;background:#fff}
.tb-komm-liste li b{font-size:.7rem}
.tb-komm-neu[hidden]{display:none}
.tb-f-toast{position:absolute;left:50%;bottom:-18px;display:inline-flex;align-items:center;gap:8px;margin:0;padding:9px 15px;border-radius:999px;transform:translateX(-50%);background:#161B2E;color:#fff;font-size:.76rem;white-space:nowrap;box-shadow:0 18px 36px -14px rgba(22,27,46,.7);animation:tb-toast 3.4s ease both}
.tb-f-toast[hidden]{display:none}
.tb-f-toast svg{width:14px;height:14px;padding:3px;box-sizing:content-box;border-radius:50%;background:linear-gradient(140deg,#F59E0B,#D6338A)}
@keyframes tb-toast{0%{opacity:0;transform:translate(-50%,10px)}12%,82%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,6px)}}

/* ---------- A4 · Zuständigkeiten ---------- */
.tb-team{position:relative;max-width:1080px;margin:0 auto;padding:16px;border-radius:22px;background:var(--h-grund);border:1px solid rgba(255,255,255,.55);box-shadow:0 50px 100px -50px rgba(0,0,0,.95),0 0 120px -40px rgba(155,5,254,.4)}
.tb-team-kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-bottom:14px}
.tb-filter{display:flex;flex-wrap:wrap;gap:6px}
.tb-filter button{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;border:1px solid var(--h-linie);background:var(--tb-f1,#fff);font:600 .74rem/1 "Manrope",sans-serif;color:var(--h-text-2);cursor:pointer;transition:color .2s,border-color .2s,background .3s,box-shadow .3s}
.tb-filter button i{width:7px;height:7px;border-radius:50%;background:var(--a)}
.tb-filter button.an{color:#fff;border-color:transparent;background:linear-gradient(100deg,#00B4F9,#2F6BFF 55%,#9B05FE);box-shadow:0 8px 20px -10px rgba(47,107,255,.9)}
.tb-filter button.an i{background:#fff}
.tb-team-avs{list-style:none;margin:0;padding:0;display:flex;gap:6px}
.tb-team-avs li{display:flex;align-items:center;gap:7px;padding:4px 10px 4px 4px;border-radius:999px;background:var(--tb-f1,#fff);border:1px solid var(--h-linie);transition:opacity .3s,box-shadow .3s}
.tb-team-avs li span{display:grid;line-height:1.2}
.tb-team-avs b{font-size:.66rem}.tb-team-avs small{font-size:.56rem;color:var(--h-text-2)}
.tb-team-avs i{width:24px;height:24px;border:0}
.tb-team-avs li.leise{opacity:.35}
.tb-team-avs li.an{box-shadow:0 0 0 2px var(--a)}
.tb-team-board{grid-auto-columns:minmax(0,1fr)}
.tb-team-board .tb-karte.leise{opacity:.25;filter:saturate(0);transform:scale(.97)}
.tb-team-board .tb-karte:not(.leise){box-shadow:inset 3px 0 0 var(--a),0 4px 10px -8px rgba(22,27,46,.4)}
.tb-team-board .tb-k-text b{font-size:.66rem}
.tb-blitz{position:absolute;right:6px;top:6px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:linear-gradient(140deg,var(--cyan),var(--violett));color:#fff;animation:tb-blitz 1.1s ease forwards}
.tb-blitz svg{width:10px;height:10px}
@keyframes tb-blitz{0%{transform:scale(0)}30%{transform:scale(1.3)}60%{transform:scale(1)}100%{transform:scale(1);opacity:0}}

/* ---------- Schmalere Bildschirme ---------- */
@media (max-width:1100px){
  .tb-tpl-raster{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tb-team-board{grid-auto-columns:minmax(130px,1fr);overflow-x:auto;padding-bottom:4px}
  .tb-tpl-bahn{overflow-x:auto;scrollbar-width:thin;padding-bottom:4px}
  .tb-tpl-board{grid-auto-columns:minmax(170px,1fr);width:max-content}
  .tb-tpl-fuss{display:none}
}
@media (max-width:900px){
  .tb-start-innen{grid-template-columns:1fr;min-height:0}
  .tb-kt{grid-template-columns:1fr}
  .tb-kt-spalte{display:none}
  .tb-kt.zu .tb-fenster{transform:translateY(40px) scale(.9)}
}
@media (max-width:640px){
  .tb-schirm{--rx:0deg;--ry:0deg;padding:10px}
  .tb-an .tb-schirm{--rx:0deg;--ry:0deg}
  .tb-stationen{display:none}
  .tb-chip{right:2%;bottom:-16px;font-size:.7rem}
  .tb-tpl-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tb-tpl-fenster,.tb-team,.tb-fenster{padding:12px}
  .tb-f-raster{grid-template-columns:1fr}
  .tb-f-team{margin-left:0}
  .tb-team-avs li span{display:none}
  .tb-team-avs li{padding:3px}
  .tb-f-toast{white-space:normal;width:88%;text-align:center}
}
@media (min-width:901px) and (max-height:860px){
  .tb-start .h1{font-size:clamp(2.2rem,3.5vw,3.3rem)}
  .tb-fakten{margin-top:18px}
  .tb-start .einstieg-aktionen{margin-top:22px}
}
@media (prefers-reduced-motion:reduce){
  .tb-seite *,.tb-seite *::before,.tb-seite *::after{transition:none!important;animation:none!important}
  .tb-schirm,.tb-held .tb-spalte,.tb-f-block{opacity:1;translate:0 0;transform:none}
  .tb-kt.zu .tb-fenster{opacity:1;transform:none}
}
/* Feinschliff: Stationsnamen vollständig zeigen */
.tb-held .tb-spalte{width:156px}
.tb-held .tb-spalte>header b{font-size:.62rem}
.tb-held .tb-ring,.tb-tpl-board .tb-ring{width:26px;height:26px}

/* MWA-PowerPoint: Knopf und Vorschaufenster */
.tb-f-knopf{border:0;font-family:inherit;cursor:pointer;transition:transform .2s,box-shadow .3s,filter .3s}
.tb-f-knopf:hover{transform:translateY(-1px);box-shadow:0 10px 22px -10px rgba(47,107,255,.9)}
.tb-f-knopf.laedt{filter:saturate(.6)}
.tb-f-knopf.laedt svg{animation:tb-dreh .8s linear infinite}
@keyframes tb-dreh{to{transform:rotate(1turn)}}
.tb-kt .tb-zeiger{z-index:12}
.tb-mwa{position:absolute;inset:0;z-index:10;display:grid;place-items:center;padding:20px;border-radius:20px;background:rgba(14,17,27,.45);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:tb-mwa-bg .35s ease}
.tb-mwa[hidden]{display:none}
@keyframes tb-mwa-bg{from{opacity:0}}
.tb-mwa-fenster{width:min(520px,100%);padding:14px;border-radius:16px;background:#fff;box-shadow:0 40px 80px -24px rgba(0,0,0,.7);animation:tb-mwa-rein .55s cubic-bezier(.22,1.2,.4,1)}
@keyframes tb-mwa-rein{from{opacity:0;transform:translateY(24px) scale(.9)}}
.tb-mwa-kopf{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.tb-mwa-kopf b{display:inline-flex;align-items:center;gap:7px;font-size:.84rem}
.tb-mwa-kopf b svg{width:16px;height:16px;padding:3px;box-sizing:content-box;border-radius:5px;color:#fff;background:#D24726}
.tb-mwa-kopf small{font-size:.66rem;color:var(--h-text-2)}
.tb-mwa-zu{margin-left:auto;border:0;background:none;font-size:1.3rem;line-height:1;color:var(--h-text-3);cursor:pointer}
.tb-folien{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#0E1322;box-shadow:inset 0 0 0 1px var(--h-linie)}
.tb-folie{position:absolute;inset:0;padding:22px 24px;color:#fff;opacity:0;transform:translateX(30px);transition:opacity .5s ease,transform .6s cubic-bezier(.22,1,.36,1);background:radial-gradient(80% 90% at 100% 0%,rgba(47,107,255,.35),transparent 60%),radial-gradient(60% 70% at 0% 100%,rgba(155,5,254,.3),transparent 60%),#0E1322}
.tb-folie.an{opacity:1;transform:none}
.tb-folie small{display:block;font:600 .56rem/1.3 "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:#8FDCFF}
.tb-folie-titel{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:center}
.tb-folie-titel img{width:100%;height:100%;max-width:none;object-fit:cover;border-radius:8px;max-height:160px}
.tb-folie-titel b{display:block;margin:8px 0 10px;font-size:1.15rem;line-height:1.2}
.tb-folie-titel em{font-style:normal;font-size:.62rem;color:#B8BED0}
.tb-folie-wert b{display:block;margin:8px 0 14px;font-size:1.5rem;background:var(--verlauf);-webkit-background-clip:text;background-clip:text;color:transparent}
.tb-skala{position:relative;display:block;height:8px;border-radius:8px;background:linear-gradient(90deg,#16A36A,#F59E0B,#E5484D)}
.tb-skala i{position:absolute;left:44%;top:-4px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px #2F6BFF}
.tb-skala-text{display:flex;justify-content:space-between;margin-top:6px;font-size:.56rem;color:#B8BED0}
.tb-skala-text em{font-style:normal}
.tb-folie-wert ul{list-style:none;margin:14px 0 0;padding:0;display:flex;gap:10px}
.tb-folie-wert li{flex:1;padding:8px 10px;border-radius:8px;background:rgba(255,255,255,.07);font-size:.56rem;color:#B8BED0}
.tb-folie-wert li b{display:block;margin:0;font-size:.82rem;color:#fff;-webkit-text-fill-color:#fff;background:none}
.tb-folie-vgl ol{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:8px;counter-reset:v}
.tb-folie-vgl li{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:8px;background:rgba(255,255,255,.07);font-size:.7rem;counter-increment:v}
.tb-folie-vgl li b::before{content:counter(v);display:inline-grid;place-items:center;width:18px;height:18px;margin-right:8px;border-radius:50%;font-size:.56rem;background:linear-gradient(140deg,var(--cyan),var(--violett))}
.tb-folie-vgl li span{color:#B8BED0}
.tb-mwa-fuss{display:flex;align-items:center;gap:8px;margin-top:10px}
.tb-punkte{display:flex;gap:5px;margin-right:auto}
.tb-punkte i{width:7px;height:7px;border-radius:50%;background:#D5DBE7;transition:background .3s,width .3s}
.tb-punkte i.an{width:18px;border-radius:4px;background:#2F6BFF}
.tb-mwa-knopf{padding:7px 12px;border-radius:9px;font-size:.72rem;font-weight:600;color:#fff;background:linear-gradient(100deg,#2F6BFF,#7B3BFF)}
.tb-mwa-knopf-hell{color:var(--h-text);background:#EEF1F6}
@media (max-width:640px){.tb-folie-titel{grid-template-columns:1fr}.tb-folie-titel img{display:none}.tb-folie{padding:16px}}
.tb-folie:not(.an){transition:opacity .25s ease,transform .3s ease}
/* Angeheftete Vorlagen-Bühne muss in eine Bildhöhe passen */
.tb-tpl-board .tb-karte:nth-child(n+4){display:none}
.tb-tpl-board{min-height:0}
@media (min-width:1101px) and (max-height:860px){
  .tb-tpl-ab .ak-kopf{margin-bottom:22px}
  .tb-tpl-ab .ab-text{display:none}
  .tb-tpl-raster{margin-bottom:10px}
  .tb-tpl{padding:8px 10px}
}
/* Angeheftete Aufgabenkarte: Unterzeile ausblenden, Karte wird bei Bedarf verkleinert (Skript) */
.tb-kt-gepinnt .ak-kopf{margin-bottom:28px}
.tb-kt-unter{max-width:70ch;margin-left:auto;margin-right:auto}
.tb-kt-unter b{color:var(--text);font-weight:600}
.tb-kt-gepinnt .ak-kopf .ab-text{margin-top:10px;font-size:.98rem}
.tb-kt-gepinnt .tb-kt{transform-origin:50% 0}
/* Angeheftet: Platz für den Kommentar von Anfang an reservieren, damit die Höhe beim Scrollen gleich bleibt */
.tb-kt-gepinnt .tb-komm-neu[hidden]{display:flex;visibility:hidden}

/* ---------- Dunkle Abschnitte im Stil der übrigen Website (Karten wie auf KI-Agenten): Vorlagen, Zuständigkeiten ---------- */
.tb-dunkel{--h-grund:var(--panel);--h-linie:rgba(255,255,255,.09);--h-text:#F6F4EE;--h-text-2:#A7AAB6;--h-text-3:#6F7281;
  --tb-f1:#161A24;--tb-spalte-bg:rgba(255,255,255,.04);--tb-karte-bg:#1C2130;--tb-mix:#1C2130;--tb-mix-p:24%;--tb-ring-bahn:rgba(255,255,255,.12);
  --tb-haken-rand:rgba(255,255,255,.28);--tb-haken-bg:transparent;--tb-erledigt:#171B25;--tb-blau-t:#8FA4FF;--tb-blass:rgba(110,140,255,.14);
  --tb-grau-t:#A7AAB6;--tb-grau:rgba(255,255,255,.06);--tb-neu-t:#FBBF5A;--tb-neu-bg:#302B22;--tb-neu-rand:rgba(251,191,90,.35);
  --tb-zart:rgba(110,140,255,.12);--tb-bahn:rgba(255,255,255,.09);--tb-gestrichelt:rgba(255,255,255,.18);color:var(--h-text)}
.tb-tpl-fenster.tb-dunkel,.tb-team.tb-dunkel{background:var(--panel);border:1px solid var(--linie);box-shadow:var(--schatten)}
.tb-dunkel .tb-spalte>header{box-shadow:0 6px 16px -12px rgba(0,0,0,.8)}
.tb-dunkel .tb-karte{box-shadow:0 4px 10px -8px rgba(0,0,0,.7)}
.tb-dunkel .tb-team-board .tb-karte:not(.leise){box-shadow:inset 3px 0 0 var(--a),0 4px 10px -8px rgba(0,0,0,.7)}
/* Handy: das breite Board im Einstieg zog die Spalte auf 1.356 px, Text und Knöpfe liefen rechts aus dem Bild (18.10.2026) */
@media (max-width:900px){.tb-start-innen{grid-template-columns:minmax(0,1fr)}.tb-buehne{min-width:0;overflow:hidden}}
/* Handy: Stationsleiste im Einstieg wieder sichtbar (war ausgeblendet), als 5 × 2-Raster mit Umbruch statt zehn winziger Felder (18.10.2026) */
@media (max-width:640px){
  .tb-stationen{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px 4px}
  .tb-stationen li{display:flex;align-items:flex-end;justify-content:center;min-height:calc(2 * 1.15em + 5px);padding-bottom:5px;font-size:.52rem;line-height:1.15;white-space:normal;overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}
  .tb-schirm{grid-template-columns:minmax(0,1fr)}
  .tb-buehne{padding-bottom:30px}
  .tb-chip{bottom:-4px}
}
/* Handy: Vorlagen-Board gleitet wie am Desktop beim Scrollen von Station 1 bis 10 (Skript), statt dass acht Stationen
   seitlich außerhalb liegen; Fortschrittsleiste wieder sichtbar (18.10.2026) */
@media (max-width:640px){
  .tb-tpl-bahn{overflow:hidden;padding-bottom:0}
  .tb-tpl-board{grid-auto-columns:150px;gap:8px}
  .tb-tpl-board .tb-k-text b{overflow-wrap:anywhere}
  .tb-tpl-fuss{display:flex;gap:10px;margin-top:10px}
  .tb-tpl-fort i{width:calc(20% + var(--fp,0) * 80%)}
  .tb-tpl{padding:9px 10px}
  .tb-tpl-raster{gap:6px;margin-bottom:12px}
}
/* Handy: Zuständigkeiten als 2 × 2-Raster statt seitlich scrollender Spalten (Karten ragten über ihre Spalte),
   Namen und Abteilungen der vier Personen wieder sichtbar (18.10.2026) */
@media (max-width:640px){
  .tb-team-kopf{gap:10px}
  .tb-filter{gap:5px}
  .tb-filter button{padding:6px 10px;font-size:.7rem}
  .tb-team-avs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;width:100%}
  .tb-team-avs li{padding:3px 8px 3px 3px;min-width:0}
  .tb-team-avs li span{display:grid;min-width:0}
  .tb-team-avs b{font-size:.66rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tb-team-board{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-columns:auto;gap:8px;overflow:visible;padding-bottom:0;align-items:stretch}
  .tb-team-board .tb-spalte ul{grid-template-columns:minmax(0,1fr)}
  .tb-team-board .tb-karte{min-width:0;padding:7px 8px;gap:7px}
  .tb-team-board .tb-k-text b{font-size:.64rem;overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}
  .tb-team-board .tb-spalte>header b{font-size:.66rem}
}
/* Handy: Aufgabenkarte wuchs beim Kommentar um 112 px und schob den Rest der Seite nach unten; Platz für den
   neuen Kommentar und drei getippte Zeilen ist von Anfang an da (18.10.2026) */
@media (max-width:640px){
  .tb-komm-neu[hidden]{display:flex;visibility:hidden}
  .tb-komm-feld{min-height:calc(3 * 1.45em + 24px);line-height:1.45}
}
/* Handy: Stationsnamen in den schmalen Spalten vollständig (Umbruch mit Silbentrennung statt „Marktwerta…“) (18.10.2026) */
@media (max-width:640px){
  .tb-held .tb-spalte>header b,.tb-tpl-board .tb-spalte>header b,.tb-team-board .tb-spalte>header b{white-space:normal;line-height:1.2;overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}
  .tb-tpl-board .tb-ring,.tb-team-board .tb-ring{width:24px;height:24px}
}
/* Handy/Safari: Folienfläche ohne aspect-ratio (Safari macht sie sonst unter Umständen 0 px hoch), runde Ecken auch für
   bewegte Kinder per clip-path, kein hängenbleibender Hover auf Touch (18.10.2026) */
@media (max-width:640px){
  .tb-folien{aspect-ratio:auto;height:auto;clip-path:inset(0 round 10px)}
  .tb-folien::before{content:"";display:block;padding-top:56.25%}
  .tb-tpl-bahn{clip-path:inset(0 round 12px)}
}
@media (hover:none){
  .tb-f-knopf:hover{transform:none;box-shadow:none}
}