/* Team app ▸ Dashboard (23.10.2026, team/teamDashboard.js). Only tokens (design-tokens.css, web3-design.css); the accent is the Web3 accent where the Web3 design is on, else the strongest text colour. Light and dark follow the tokens. Every rule is scoped to #teamDashboardView and to the right rail #tdSeitenleiste (25.10.2026: Notizen and Termine can live there, same cards; layout and rail in team-dashboard-layout.css). */ :is(#teamDashboardView, #tdSeitenleiste) { --td-akzent: var(--w3-akzent, var(--text-1)); --td-akzent-flaeche: var(--w3-akzent-flaeche, var(--surface-3)); --td-akzent-hauch: var(--w3-akzent-hauch, var(--surface-2)); --td-akzent-rand: var(--w3-akzent-rand, var(--border-3)); --td-akzent-text: var(--w3-akzent-text, var(--text-inv)); --td-karte: var(--w3-karte, var(--surface-1)); --td-kante: var(--w3-kante, inset 0 0 0 1px var(--border-1)); --td-glanz: var(--w3-glanz, none); --td-fuellung: var(--w3-fuellung, var(--surface-2)); --td-fuellung-stark: var(--w3-fuellung-stark, var(--surface-3)); --td-radius: var(--w3-radius-karte, var(--radius-lg)); /* Status dots of bugs and tasks (28.10.2026, user: open white, in progress orange, rejected red, review pending = green ring, accepted / done = green filled). Same names as the Bug Report (bot-testing-neu.css). */ --st-neu: var(--text-1); --st-arbeit: var(--w3-warnung, var(--warning)); --st-abgelehnt: var(--w3-negativ-text, var(--danger)); --st-erledigt: var(--w3-positiv, var(--success)); } /* Light: a white dot would vanish on the white card. */ :root[data-theme="light"] :is(#teamDashboardView, #tdSeitenleiste) { --st-neu: var(--text-3); } :is(#teamDashboardView, #tdSeitenleiste) .td-mount { box-sizing: border-box; width: 100%; /* Full width (24.10.2026): the view already sits in the body gutter, so the content edges line up with the tab bar. No centered max-width; inner grids grow with the space (docs/TEAM-APP.md „Layout“). */ padding: var(--space-6) 0 var(--space-9); display: flex; flex-direction: column; gap: var(--space-6); color: var(--text-1); font-size: var(--fs-14); transition: opacity var(--t-base, .2s); position: relative; isolation: isolate; } /* Only a slow reload dims (as the Concierge, DIMM_NACH_MS): a refresh under 400 ms after an action or a live update leaves the page as it is (user 26.10.2026: the whole window went dark for a moment). Back at once. */ :is(#teamDashboardView, #tdSeitenleiste) .td-mount.td-laedt { opacity: .7; transition-delay: 400ms; } /* Running text keeps a readable line length on wide screens (low specificity: own max-widths win). */ :is(#teamDashboardView, #tdSeitenleiste) :where(.td-erklaerung, .td-text, .td-rueckfrage, .td-ruhig) { max-width: 72ch; } /* ── Head ── */ :is(#teamDashboardView, #tdSeitenleiste) .td-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; } :is(#teamDashboardView, #tdSeitenleiste) .td-kopf-text { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; } :is(#teamDashboardView, #tdSeitenleiste) .td-datum { font-size: var(--fs-13); color: var(--text-3); } :is(#teamDashboardView, #tdSeitenleiste) .td-gruss { margin: 0; font-size: var(--fs-24); font-weight: var(--fw-semibold); letter-spacing: -0.01em; } :is(#teamDashboardView, #tdSeitenleiste) .td-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); } :is(#teamDashboardView, #tdSeitenleiste) .td-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 var(--space-3); border-radius: var(--radius-pill); background: var(--td-fuellung); color: var(--text-2); font-size: var(--fs-12); } :is(#teamDashboardView, #tdSeitenleiste) .td-chip-akzent { background: var(--td-akzent-flaeche); color: var(--td-akzent); font-weight: var(--fw-medium); } :is(#teamDashboardView, #tdSeitenleiste) .td-punkt { width: 6px; height: 6px; border-radius: var(--radius-pill); background: currentColor; } :is(#teamDashboardView, #tdSeitenleiste) .td-kopf-knoepfe { display: flex; gap: var(--space-2); flex-wrap: wrap; } /* ── Buttons ── */ :is(#teamDashboardView, #tdSeitenleiste) .td-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-pill); background: var(--td-fuellung); box-shadow: var(--w3-kante-feld, inset 0 0 0 1px var(--border-2)); color: var(--text-1); font: inherit; font-size: var(--fs-13); font-weight: var(--fw-medium); white-space: nowrap; cursor: pointer; transition: background var(--t-fast, .12s), color var(--t-fast, .12s); } :is(#teamDashboardView, #tdSeitenleiste) .td-knopf:hover { background: var(--td-fuellung-stark); } :is(#teamDashboardView, #tdSeitenleiste) .td-knopf:focus-visible, :is(#teamDashboardView, #tdSeitenleiste) .td-symbol-knopf:focus-visible, :is(#teamDashboardView, #tdSeitenleiste) .td-textknopf:focus-visible, :is(#teamDashboardView, #tdSeitenleiste) .td-segment button:focus-visible, :is(#teamDashboardView, #tdSeitenleiste) .td-person:focus-visible, :is(#teamDashboardView, #tdSeitenleiste) .td-katalog-eintrag:focus-visible, :is(#teamDashboardView, #tdSeitenleiste) .td-chip-knopf:focus-visible, :is(#teamDashboardView, #tdSeitenleiste) .td-check:focus-visible, :is(#teamDashboardView, #tdSeitenleiste) .td-ablage:focus-visible, :is(#teamDashboardView, #tdSeitenleiste) .td-tag-knopf:focus-visible, :is(#teamDashboardView, #tdSeitenleiste) .td-chip-weg:focus-visible, :is(#teamDashboardView, #tdSeitenleiste) .td-link-chip a:focus-visible, :is(#teamDashboardView, #tdSeitenleiste) .td-bild a:focus-visible, :is(#teamDashboardView, #tdSeitenleiste) summary:focus-visible { outline: none; box-shadow: var(--focus-ring); } :is(#teamDashboardView, #tdSeitenleiste) .td-knopf:disabled { opacity: .5; cursor: default; } :is(#teamDashboardView, #tdSeitenleiste) .td-knopf-leise { background: transparent; box-shadow: none; color: var(--text-2); } :is(#teamDashboardView, #tdSeitenleiste) .td-knopf-leise:hover { color: var(--text-1); } :is(#teamDashboardView, #tdSeitenleiste) .td-knopf-primaer { background: var(--td-akzent); color: var(--td-akzent-text); box-shadow: none; font-weight: var(--fw-semibold); } :is(#teamDashboardView, #tdSeitenleiste) .td-knopf-primaer:hover { background: var(--td-akzent); filter: brightness(1.08); } :is(#teamDashboardView, #tdSeitenleiste) .td-knopf-gefahr { color: var(--danger); } :is(#teamDashboardView, #tdSeitenleiste) .td-knopf-klein { height: 30px; padding: 0 var(--space-3); } :is(#teamDashboardView, #tdSeitenleiste) .td-knopf.td-laeuft::after { content: ""; width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--radius-pill); animation: td-dreh .8s linear infinite; } @keyframes td-dreh { to { transform: rotate(360deg); } } :is(#teamDashboardView, #tdSeitenleiste) .td-symbol-knopf { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--radius-pill); background: var(--td-fuellung); color: var(--td-akzent); cursor: pointer; } :is(#teamDashboardView, #tdSeitenleiste) .td-symbol-knopf:hover { background: var(--td-fuellung-stark); } :is(#teamDashboardView, #tdSeitenleiste) .td-symbol-knopf:disabled { opacity: .35; cursor: default; } :is(#teamDashboardView, #tdSeitenleiste) .td-symbol-knopf.td-leise { background: transparent; color: var(--text-3); } :is(#teamDashboardView, #tdSeitenleiste) .td-symbol-knopf.td-leise:hover { color: var(--danger); } :is(#teamDashboardView, #tdSeitenleiste) .td-textknopf { border: 0; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: transparent; color: var(--td-akzent); font: inherit; font-size: var(--fs-12); font-weight: var(--fw-medium); cursor: pointer; } :is(#teamDashboardView, #tdSeitenleiste) .td-sym { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } :is(#teamDashboardView, #tdSeitenleiste) .td-sym-akzent { width: 18px; height: 18px; color: var(--td-akzent); } /* ── Grid and cards ── */ /* Two independent column stacks (left 7/12, right 5/12; three from 1760 px) plus full-width widgets below; narrow: one column in the chosen order (teamDashboard.js ordneRaster, td8). A short card never waits for a tall neighbour's row. */ :is(#teamDashboardView, #tdSeitenleiste) .td-raster { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; } :is(#teamDashboardView, #tdSeitenleiste) .td-spalten { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-5); align-items: start; } :is(#teamDashboardView, #tdSeitenleiste) .td-spalten.td-spalten-eins { grid-template-columns: minmax(0, 1fr); } /* Wide screens (min-width 1760px, BREIT in teamDashboard.js): three stacks, the first one a bit wider. */ :is(#teamDashboardView, #tdSeitenleiste) .td-spalten.td-spalten-drei { grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 3fr); } :is(#teamDashboardView, #tdSeitenleiste) .td-spalte { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; } :is(#teamDashboardView, #tdSeitenleiste) .td-karte { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; padding: var(--space-5); border-radius: var(--td-radius); background: var(--td-karte); background-image: var(--td-glanz); box-shadow: var(--td-kante); } :is(#teamDashboardView, #tdSeitenleiste) .td-karte-kopf { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding-bottom: var(--space-3); } :is(#teamDashboardView, #tdSeitenleiste) .td-karte-titel { display: flex; align-items: center; gap: var(--space-2); min-width: 0; } :is(#teamDashboardView, #tdSeitenleiste) .td-karte-titel h3 { margin: 0; font-size: var(--fs-15); font-weight: var(--fw-semibold); } :is(#teamDashboardView, #tdSeitenleiste) .td-zaehler { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: var(--radius-pill); background: var(--td-akzent-flaeche); color: var(--td-akzent); font-size: var(--fs-12); font-weight: var(--fw-semibold); } :is(#teamDashboardView, #tdSeitenleiste) .td-erklaerung { margin: calc(-1 * var(--space-2)) 0 0; font-size: var(--fs-13); color: var(--text-2); } :is(#teamDashboardView, #tdSeitenleiste) .td-klein { font-size: var(--fs-12); color: var(--text-3); } :is(#teamDashboardView, #tdSeitenleiste) .td-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } :is(#teamDashboardView, #tdSeitenleiste) .td-positiv { color: var(--w3-positiv, var(--success)); } :is(#teamDashboardView, #tdSeitenleiste) .td-ruhig { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-4); border-radius: var(--radius-md); background: var(--td-fuellung); color: var(--text-2); font-size: var(--fs-13); } :is(#teamDashboardView, #tdSeitenleiste) .td-hinweis { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--warning-soft); color: var(--text-1); font-size: var(--fs-13); } :is(#teamDashboardView, #tdSeitenleiste) .td-meldung { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--td-akzent-hauch); box-shadow: inset 0 0 0 1px var(--td-akzent-rand); font-size: var(--fs-13); } :is(#teamDashboardView, #tdSeitenleiste) .td-meldung[hidden] { display: none; } :is(#teamDashboardView, #tdSeitenleiste) .td-leer { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-9) var(--space-4); color: var(--text-2); text-align: center; } :is(#teamDashboardView, #tdSeitenleiste) .td-abschnitt { display: flex; flex-direction: column; gap: var(--space-2); } :is(#teamDashboardView, #tdSeitenleiste) .td-abschnitt h4, :is(#teamDashboardView, #tdSeitenleiste) .td-tag-name { margin: var(--space-1) 0 0; font-size: var(--fs-12); font-weight: var(--fw-medium); color: var(--text-3); } /* ── Rows ── */ :is(#teamDashboardView, #tdSeitenleiste) .td-liste { display: flex; flex-direction: column; gap: var(--space-2); } :is(#teamDashboardView, #tdSeitenleiste) .td-zeile { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); transition: background var(--t-fast, .12s); } :is(#teamDashboardView, #tdSeitenleiste) .td-aufgabe { flex-wrap: wrap; box-shadow: inset 0 0 0 1px var(--border-1); } :is(#teamDashboardView, #tdSeitenleiste) .td-zeile:hover { background: var(--w3-zeile-hover, var(--surface-2)); } :is(#teamDashboardView, #tdSeitenleiste) .td-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: var(--radius-pill); background: var(--td-akzent-flaeche); color: var(--td-akzent); font-size: var(--fs-12); font-weight: var(--fw-semibold); } :is(#teamDashboardView, #tdSeitenleiste) .td-avatar-klein { width: 24px; height: 24px; font-size: var(--fs-11); } :is(#teamDashboardView, #tdSeitenleiste) .td-aufgabe-text { display: flex; flex-direction: column; gap: var(--space-1); flex: 999 1 220px; min-width: 0; } :is(#teamDashboardView, #tdSeitenleiste) .td-aufgabe-titel { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-weight: var(--fw-medium); overflow-wrap: anywhere; } :is(#teamDashboardView, #tdSeitenleiste) .td-stufe { display: inline-flex; align-items: center; height: 20px; padding: 0 var(--space-2); border-radius: var(--radius-pill); font-size: var(--fs-11); font-weight: var(--fw-semibold); } :is(#teamDashboardView, #tdSeitenleiste) .td-stufe-dringlich { background: var(--danger-soft, rgba(239, 68, 68, .15)); color: var(--w3-negativ-text, var(--danger)); } :is(#teamDashboardView, #tdSeitenleiste) .td-stufe-noetig { background: var(--warning-soft); color: var(--w3-warnung, var(--warning)); } :is(#teamDashboardView, #tdSeitenleiste) .td-stufe-nice { background: var(--td-fuellung-stark); color: var(--text-2); } :is(#teamDashboardView, #tdSeitenleiste) .td-aktionen { display: flex; gap: var(--space-2); flex: 1 0 auto; justify-content: flex-end; } :is(#teamDashboardView, #tdSeitenleiste) .td-details summary { cursor: pointer; font-size: var(--fs-12); color: var(--text-2); border-radius: var(--radius-sm); width: fit-content; } :is(#teamDashboardView, #tdSeitenleiste) .td-text, :is(#teamDashboardView, #tdSeitenleiste) .td-rueckfrage { margin: var(--space-1) 0 0; font-size: var(--fs-13); color: var(--text-2); white-space: pre-line; overflow-wrap: anywhere; } :is(#teamDashboardView, #tdSeitenleiste) .td-inline-form { flex: 1 1 100%; display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-2); } /* Stats as one strip with hairlines (like Explore's key figures); state colour only on the number. */ :is(#teamDashboardView, #tdSeitenleiste) .td-zahlen { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 0; } /* Label row stretches (may wrap), value in the last row: all values share one baseline. */ :is(#teamDashboardView, #tdSeitenleiste) .td-zahl { display: grid; grid-template-rows: 1fr auto; row-gap: 2px; align-content: stretch; min-width: 0; padding: 0 var(--space-4); border-left: 1px solid var(--w3-rand-leise, var(--border-1)); background: none; } :is(#teamDashboardView, #tdSeitenleiste) .td-zahl:first-child { padding-left: 0; border-left: 0; } :is(#teamDashboardView, #tdSeitenleiste) .td-zahl > .td-klein { font-size: var(--fs-12); color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; overflow-wrap: anywhere; } :is(#teamDashboardView, #tdSeitenleiste) .td-zahl-wert { font-size: var(--fs-20); font-weight: var(--fw-medium); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } /* ── Appointments ── */ :is(#teamDashboardView, #tdSeitenleiste) .td-naechster { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border-radius: var(--td-radius); background: var(--td-akzent-hauch); box-shadow: inset 0 0 0 1px var(--td-akzent-rand); } :is(#teamDashboardView, #tdSeitenleiste) .td-naechster-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); } :is(#teamDashboardView, #tdSeitenleiste) .td-naechster-label { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-12); font-weight: var(--fw-semibold); color: var(--td-akzent); text-transform: uppercase; letter-spacing: .06em; } :is(#teamDashboardView, #tdSeitenleiste) .td-naechster-titel { font-size: var(--fs-15); } :is(#teamDashboardView, #tdSeitenleiste) .td-naechster-meet { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-1); } :is(#teamDashboardView, #tdSeitenleiste) .td-naechster-meet a { text-decoration: none; } :is(#teamDashboardView, #tdSeitenleiste) .td-agenda { display: flex; flex-direction: column; gap: var(--space-1); } :is(#teamDashboardView, #tdSeitenleiste) .td-tag { display: flex; flex-direction: column; } :is(#teamDashboardView, #tdSeitenleiste) .td-termin { padding: var(--space-2); } :is(#teamDashboardView, #tdSeitenleiste) .td-termin-zeit { width: 54px; flex: none; color: var(--text-2); font-size: var(--fs-13); } :is(#teamDashboardView, #tdSeitenleiste) .td-termin-punkt { flex: none; width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--text-3); } :is(#teamDashboardView, #tdSeitenleiste) .td-termin-punkt.td-call { background: var(--td-akzent); } :is(#teamDashboardView, #tdSeitenleiste) .td-termin-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; } :is(#teamDashboardView, #tdSeitenleiste) .td-termin-titel { font-weight: var(--fw-medium); overflow-wrap: anywhere; } :is(#teamDashboardView, #tdSeitenleiste) .td-termin .td-symbol-knopf.td-leise { opacity: 0; } :is(#teamDashboardView, #tdSeitenleiste) .td-termin:hover .td-symbol-knopf.td-leise, :is(#teamDashboardView, #tdSeitenleiste) .td-termin .td-symbol-knopf.td-leise:focus-visible { opacity: 1; } /* ── Dialogs ── */ :is(#teamDashboardView, #tdSeitenleiste) .td-dialog { box-sizing: border-box; width: min(520px, calc(100vw - 2 * var(--space-4))); max-height: calc(100vh - 2 * var(--space-6)); overflow: auto; padding: var(--space-5); border: 0; border-radius: var(--radius-xl); background: var(--w3-flaeche, var(--surface-2)); box-shadow: var(--w3-schatten, var(--shadow-lg)), var(--td-kante); color: var(--text-1); font-size: var(--fs-14); } :is(#teamDashboardView, #tdSeitenleiste) .td-dialog-breit { width: min(720px, calc(100vw - 2 * var(--space-4))); } :is(#teamDashboardView, #tdSeitenleiste) .td-dialog::backdrop { background: var(--overlay, rgba(0, 0, 0, .6)); } :is(#teamDashboardView, #tdSeitenleiste) .td-dialog-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); } :is(#teamDashboardView, #tdSeitenleiste) .td-dialog-kopf h3 { margin: 0; font-size: var(--fs-17); font-weight: var(--fw-semibold); } :is(#teamDashboardView, #tdSeitenleiste) .td-dialog-kopf .td-symbol-knopf { color: var(--text-2); background: transparent; } :is(#teamDashboardView, #tdSeitenleiste) .td-form { display: flex; flex-direction: column; gap: var(--space-4); } :is(#teamDashboardView, #tdSeitenleiste) .td-feld { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; } :is(#teamDashboardView, #tdSeitenleiste) .td-feld[hidden] { display: none; } :is(#teamDashboardView, #tdSeitenleiste) .td-feld-reihe { display: flex; gap: var(--space-3); flex-wrap: wrap; } :is(#teamDashboardView, #tdSeitenleiste) .td-feld-reihe > .td-feld { flex: 1 1 140px; } :is(#teamDashboardView, #tdSeitenleiste) .td-zwischen { align-items: center; justify-content: space-between; } :is(#teamDashboardView, #tdSeitenleiste) .td-zwischen .td-eingabe { flex: 1 1 220px; } :is(#teamDashboardView, #tdSeitenleiste) .td-label { font-size: var(--fs-12); font-weight: var(--fw-medium); color: var(--text-2); } :is(#teamDashboardView, #tdSeitenleiste) .td-eingabe { box-sizing: border-box; width: 100%; min-height: 38px; padding: var(--space-2) var(--space-3); border: 1px solid var(--input-border, var(--border-2)); border-radius: var(--radius-md); background: var(--input-bg, var(--td-fuellung)); color: var(--text-1); font: inherit; font-size: var(--fs-14); } :is(#teamDashboardView, #tdSeitenleiste) textarea.td-eingabe { resize: vertical; } :is(#teamDashboardView, #tdSeitenleiste) .td-eingabe::placeholder { color: var(--input-placeholder, var(--text-3)); } :is(#teamDashboardView, #tdSeitenleiste) .td-eingabe:focus { outline: none; border-color: var(--td-akzent-rand); box-shadow: var(--input-focus-ring, var(--focus-ring)); } :is(#teamDashboardView, #tdSeitenleiste) .td-segment { display: inline-flex; flex-wrap: wrap; gap: 2px; width: fit-content; max-width: 100%; padding: 2px; border-radius: var(--radius-pill); background: var(--td-fuellung); box-shadow: var(--w3-kante-feld, inset 0 0 0 1px var(--border-2)); } :is(#teamDashboardView, #tdSeitenleiste) .td-segment button { height: 30px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-2); font: inherit; font-size: var(--fs-13); cursor: pointer; } :is(#teamDashboardView, #tdSeitenleiste) .td-segment button:hover { color: var(--text-1); } :is(#teamDashboardView, #tdSeitenleiste) .td-segment button[aria-checked="true"] { background: var(--td-fuellung-stark); color: var(--text-1); font-weight: var(--fw-semibold); } :is(#teamDashboardView, #tdSeitenleiste) .td-personen { display: flex; flex-wrap: wrap; gap: var(--space-2); max-height: 172px; overflow: auto; } :is(#teamDashboardView, #tdSeitenleiste) .td-person { display: inline-flex; align-items: center; gap: var(--space-2); height: 34px; padding: 0 var(--space-3) 0 5px; border: 0; border-radius: var(--radius-pill); background: var(--td-fuellung); box-shadow: inset 0 0 0 1px var(--border-1); color: var(--text-1); font: inherit; font-size: var(--fs-13); cursor: pointer; } :is(#teamDashboardView, #tdSeitenleiste) .td-person[aria-checked="true"] { background: var(--td-akzent-flaeche); box-shadow: inset 0 0 0 1px var(--td-akzent-rand); color: var(--td-akzent); font-weight: var(--fw-semibold); } :is(#teamDashboardView, #tdSeitenleiste) .td-form-knoepfe { display: flex; justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap; } :is(#teamDashboardView, #tdSeitenleiste) .td-form-fehler { margin: 0; color: var(--w3-negativ-text, var(--danger)); font-size: var(--fs-13); } :is(#teamDashboardView, #tdSeitenleiste) .td-form-fehler[hidden] { display: none; } :is(#teamDashboardView, #tdSeitenleiste) .td-katalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-2); max-height: 50vh; overflow: auto; } :is(#teamDashboardView, #tdSeitenleiste) .td-katalog-eintrag { display: grid; grid-template-columns: 20px 1fr; grid-template-rows: auto auto; column-gap: var(--space-2); align-items: center; padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-md); background: var(--td-fuellung); color: var(--text-1); font: inherit; font-size: var(--fs-13); text-align: left; cursor: pointer; } :is(#teamDashboardView, #tdSeitenleiste) .td-katalog-eintrag .td-klein { grid-column: 2; } :is(#teamDashboardView, #tdSeitenleiste) .td-katalog-eintrag:disabled { opacity: .45; cursor: default; } :is(#teamDashboardView, #tdSeitenleiste) .td-katalog-eintrag[aria-checked="true"] { background: var(--td-akzent-flaeche); } :is(#teamDashboardView, #tdSeitenleiste) .td-haken { grid-row: span 2; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--border-3); color: var(--td-akzent); } :is(#teamDashboardView, #tdSeitenleiste) .td-katalog-eintrag[aria-checked="true"] .td-haken { box-shadow: inset 0 0 0 1px var(--td-akzent-rand); } :is(#teamDashboardView, #tdSeitenleiste) .td-haken .td-sym { width: 13px; height: 13px; stroke-width: 2.4; } :is(#teamDashboardView, #tdSeitenleiste) .td-anpassen { margin: 0; padding: 0; list-style: none; row-gap: var(--space-2); } /* One row per widget on the columns of .td-anpassen-tabelle (team-dashboard-layout.css). */ :is(#teamDashboardView, #tdSeitenleiste) .td-anpassen-zeile { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--td-fuellung); } :is(#teamDashboardView, #tdSeitenleiste) .td-anpassen-knoepfe { display: flex; gap: var(--space-1); } :is(#teamDashboardView, #tdSeitenleiste) .td-schalter { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; } :is(#teamDashboardView, #tdSeitenleiste) .td-schalter input { position: absolute; opacity: 0; width: 1px; height: 1px; } :is(#teamDashboardView, #tdSeitenleiste) .td-schalter-spur { position: relative; width: 34px; height: 20px; border-radius: var(--radius-pill); background: var(--td-fuellung-stark); box-shadow: inset 0 0 0 1px var(--border-2); transition: background var(--t-fast, .12s); } :is(#teamDashboardView, #tdSeitenleiste) .td-schalter-spur::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: var(--radius-pill); background: var(--text-2); transition: transform var(--t-fast, .12s); } :is(#teamDashboardView, #tdSeitenleiste) .td-schalter input:checked + .td-schalter-spur { background: var(--td-akzent-flaeche); box-shadow: inset 0 0 0 1px var(--td-akzent-rand); } :is(#teamDashboardView, #tdSeitenleiste) .td-schalter input:checked + .td-schalter-spur::after { transform: translateX(14px); background: var(--td-akzent); } :is(#teamDashboardView, #tdSeitenleiste) .td-schalter input:focus-visible + .td-schalter-spur { box-shadow: var(--focus-ring); } /* Light theme: "on" like the Web3 switch elsewhere (web3-design.css): track in the accent, knob in the accent text colour; "off" track a stronger fill. The notification rows get the stronger fill, like in dark. */ :root[data-theme="light"] :is(#teamDashboardView, #tdSeitenleiste) .td-schalter input:checked + .td-schalter-spur { background: var(--td-akzent); box-shadow: none; } :root[data-theme="light"] :is(#teamDashboardView, #tdSeitenleiste) .td-schalter input:checked + .td-schalter-spur::after { background: var(--td-akzent-text); } :root[data-theme="light"] :is(#teamDashboardView, #tdSeitenleiste) .td-schalter input:focus-visible + .td-schalter-spur { box-shadow: var(--focus-ring); } :root[data-theme="light"] :is(#teamDashboardView, #tdSeitenleiste) .td-anpassen-zeile { background: var(--td-fuellung-stark); } /* ── First load ── */ :is(#teamDashboardView, #tdSeitenleiste) .td-skelett { display: flex; flex-direction: column; gap: var(--space-6); } :is(#teamDashboardView, #tdSeitenleiste) .td-skel { border-radius: var(--td-radius); background: var(--td-fuellung); animation: td-puls 1.4s ease-in-out infinite; } :is(#teamDashboardView, #tdSeitenleiste) .td-skel-kopf { height: 88px; max-width: 420px; } :is(#teamDashboardView, #tdSeitenleiste) .td-skel-karte { height: 320px; } :is(#teamDashboardView, #tdSeitenleiste) .td-skel-karte.td-voll { height: 160px; } @keyframes td-puls { 50% { opacity: .55; } } @media (prefers-reduced-motion: reduce) { :is(#teamDashboardView, #tdSeitenleiste) .td-skel, :is(#teamDashboardView, #tdSeitenleiste) .td-knopf.td-laeuft::after { animation: none; } } /* ── Narrow ── */ @media (max-width: 1100px) { /* Same breakpoint as SCHMAL in teamDashboard.js; the skeleton stacks too. */ :is(#teamDashboardView, #tdSeitenleiste) .td-spalten { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { :is(#teamDashboardView, #tdSeitenleiste) .td-mount { padding: var(--space-4) 0 var(--space-8); gap: var(--space-4); } :is(#teamDashboardView, #tdSeitenleiste) .td-gruss { font-size: var(--fs-20); } :is(#teamDashboardView, #tdSeitenleiste) .td-karte { padding: var(--space-4); } /* Stats 2×2: the second row gets a hairline on top, the first item of each row none on the left. */ :is(#teamDashboardView, #tdSeitenleiste) .td-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-3); } :is(#teamDashboardView, #tdSeitenleiste) .td-zahl { padding: 0 var(--space-3); } :is(#teamDashboardView, #tdSeitenleiste) .td-zahl:nth-child(odd) { padding-left: 0; border-left: 0; } :is(#teamDashboardView, #tdSeitenleiste) .td-zahl:nth-child(n+3) { padding-top: var(--space-3); border-top: 1px solid var(--w3-rand-leise, var(--border-1)); } :is(#teamDashboardView, #tdSeitenleiste) .td-aktionen { justify-content: stretch; } :is(#teamDashboardView, #tdSeitenleiste) .td-aktionen .td-knopf { flex: 1 1 0; } :is(#teamDashboardView, #tdSeitenleiste) .td-termin .td-symbol-knopf.td-leise { opacity: 1; } } /* ── Tasks: details, deadline, links, checklist, images, reminders (23.10.2026) ── */ :is(#teamDashboardView, #tdSeitenleiste) .td-chip-warnung { background: var(--warning-soft); color: var(--w3-warnung, var(--warning)); font-weight: var(--fw-medium); } :is(#teamDashboardView, #tdSeitenleiste) .td-negativ { color: var(--w3-negativ-text, var(--danger)); } :is(#teamDashboardView, #tdSeitenleiste) .td-avatar-gruppe { background: transparent; box-shadow: inset 0 0 0 1px var(--td-akzent-rand); } :is(#teamDashboardView, #tdSeitenleiste) .td-aufgabe-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); } :is(#teamDashboardView, #tdSeitenleiste) .td-ueberfaellig { color: var(--w3-negativ-text, var(--danger)); font-weight: var(--fw-medium); } :is(#teamDashboardView, #tdSeitenleiste) .td-mit-symbol { display: inline-flex; align-items: center; gap: 3px; } :is(#teamDashboardView, #tdSeitenleiste) .td-mit-symbol .td-sym { width: 13px; height: 13px; } :is(#teamDashboardView, #tdSeitenleiste) .td-details-knopf { align-self: flex-start; padding-left: 0; } :is(#teamDashboardView, #tdSeitenleiste) .td-details-inhalt { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-1); } :is(#teamDashboardView, #tdSeitenleiste) .td-gefahr-text { color: var(--w3-negativ-text, var(--danger)); } :is(#teamDashboardView, #tdSeitenleiste) .td-vergeben > summary { list-style: none; cursor: pointer; width: fit-content; border-radius: var(--radius-sm); } :is(#teamDashboardView, #tdSeitenleiste) .td-vergeben > summary::-webkit-details-marker { display: none; } :is(#teamDashboardView, #tdSeitenleiste) .td-vergeben > summary h4::after { content: " ▾"; } :is(#teamDashboardView, #tdSeitenleiste) .td-vergeben[open] > summary h4::after { content: " ▴"; } :is(#teamDashboardView, #tdSeitenleiste) .td-link-chip { display: inline-flex; align-items: center; max-width: 100%; height: 28px; border-radius: var(--radius-pill); background: var(--td-fuellung-stark); box-shadow: inset 0 0 0 1px var(--border-1); font-size: var(--fs-12); } :is(#teamDashboardView, #tdSeitenleiste) .td-link-chip a { display: inline-flex; align-items: center; gap: 6px; min-width: 0; height: 100%; padding: 0 var(--space-3); border-radius: var(--radius-pill); color: var(--text-1); text-decoration: none; } :is(#teamDashboardView, #tdSeitenleiste) .td-link-chip a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :is(#teamDashboardView, #tdSeitenleiste) .td-link-chip a:hover { color: var(--td-akzent); } :is(#teamDashboardView, #tdSeitenleiste) .td-link-discord { background: var(--td-akzent-flaeche); box-shadow: inset 0 0 0 1px var(--td-akzent-rand); } :is(#teamDashboardView, #tdSeitenleiste) .td-chip-weg { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; margin-right: 3px; padding: 0; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-3); cursor: pointer; } :is(#teamDashboardView, #tdSeitenleiste) .td-chip-weg:hover { color: var(--w3-negativ-text, var(--danger)); background: var(--td-fuellung); } :is(#teamDashboardView, #tdSeitenleiste) .td-chip-weg .td-sym { width: 12px; height: 12px; } :is(#teamDashboardView, #tdSeitenleiste) .td-chip .td-sym { width: 13px; height: 13px; } :is(#teamDashboardView, #tdSeitenleiste) .td-checkliste { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-1); } :is(#teamDashboardView, #tdSeitenleiste) .td-checkliste li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-13); } :is(#teamDashboardView, #tdSeitenleiste) .td-check { display: inline-flex; align-items: center; gap: var(--space-2); width: 100%; padding: var(--space-1) var(--space-2); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-1); font: inherit; font-size: var(--fs-13); text-align: left; cursor: pointer; } :is(#teamDashboardView, #tdSeitenleiste) .td-check:hover { background: var(--td-fuellung-stark); } :is(#teamDashboardView, #tdSeitenleiste) .td-check:disabled { cursor: default; background: transparent; } :is(#teamDashboardView, #tdSeitenleiste) .td-check[aria-checked="true"] > span:last-child { color: var(--text-3); text-decoration: line-through; } :is(#teamDashboardView, #tdSeitenleiste) .td-check[aria-checked="true"] .td-haken { background: var(--td-akzent-flaeche); box-shadow: inset 0 0 0 1px var(--td-akzent-rand); } :is(#teamDashboardView, #tdSeitenleiste) .td-checkliste-bau li { padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--td-fuellung-stark); } :is(#teamDashboardView, #tdSeitenleiste) .td-checkliste-bau li > span:nth-child(2) { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } :is(#teamDashboardView, #tdSeitenleiste) .td-bilder { display: flex; flex-wrap: wrap; gap: var(--space-2); } :is(#teamDashboardView, #tdSeitenleiste) .td-bild { position: relative; display: block; width: 88px; height: 66px; border-radius: var(--radius-md); overflow: hidden; background: var(--td-fuellung-stark); box-shadow: inset 0 0 0 1px var(--border-1); } :is(#teamDashboardView, #tdSeitenleiste) .td-bild a { display: block; width: 100%; height: 100%; } :is(#teamDashboardView, #tdSeitenleiste) .td-bild img { display: block; width: 100%; height: 100%; object-fit: cover; } :is(#teamDashboardView, #tdSeitenleiste) .td-bild-weg { position: absolute; top: 4px; right: 4px; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: var(--radius-pill); background: var(--overlay-solid, rgba(0, 0, 0, .7)); color: var(--text-1); cursor: pointer; } :is(#teamDashboardView, #tdSeitenleiste) .td-bild-weg .td-sym { width: 12px; height: 12px; } :is(#teamDashboardView, #tdSeitenleiste) .td-erinnerungen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } :is(#teamDashboardView, #tdSeitenleiste) .td-menue { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); background: var(--td-fuellung-stark); } :is(#teamDashboardView, #tdSeitenleiste) .td-eigene-zeit { align-items: center; } /* ── Chips (multi-select, catalogue badge style) ── */ :is(#teamDashboardView, #tdSeitenleiste) .td-chip-knopf { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 var(--space-3) 0 6px; border: 0; border-radius: var(--radius-pill); background: var(--td-fuellung); box-shadow: inset 0 0 0 1px var(--border-1); color: var(--text-2); font: inherit; font-size: var(--fs-13); cursor: pointer; } :is(#teamDashboardView, #tdSeitenleiste) .td-chip-knopf:hover { color: var(--text-1); } :is(#teamDashboardView, #tdSeitenleiste) .td-chip-knopf > .td-sym { margin-left: 4px; } :is(#teamDashboardView, #tdSeitenleiste) .td-chip-knopf[aria-pressed="true"] { background: var(--td-akzent-flaeche); box-shadow: inset 0 0 0 1px var(--td-akzent-rand); color: var(--td-akzent); font-weight: var(--fw-semibold); } :is(#teamDashboardView, #tdSeitenleiste) .td-chip-knopf[aria-pressed="true"]::after { content: "✓"; font-size: var(--fs-12); } :is(#teamDashboardView, #tdSeitenleiste) .td-chip-zahl { font-size: var(--fs-11); color: var(--text-3); } :is(#teamDashboardView, #tdSeitenleiste) .td-avatar-mini { width: 22px; height: 22px; font-size: 10px; } :is(#teamDashboardView, #tdSeitenleiste) .td-empfaenger { max-height: 196px; overflow: auto; padding: 2px; } /* ── Dictation ── */ :is(#teamDashboardView, #tdSeitenleiste) .td-diktat { position: relative; } :is(#teamDashboardView, #tdSeitenleiste) .td-diktat > .td-eingabe { padding-right: 44px; } :is(#teamDashboardView, #tdSeitenleiste) .td-mikro { position: absolute; right: 6px; bottom: 6px; background: transparent; color: var(--text-2); } :is(#teamDashboardView, #tdSeitenleiste) .td-mikro.td-aufnahme { background: var(--danger-soft, rgba(239, 68, 68, .15)); color: var(--w3-negativ-text, var(--danger)); animation: td-puls 1.4s ease-in-out infinite; } /* ── Image drop zone ── */ :is(#teamDashboardView, #tdSeitenleiste) .td-ablage { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-4); border: 1px dashed var(--border-3); border-radius: var(--radius-md); color: var(--text-2); font-size: var(--fs-13); text-align: center; cursor: pointer; transition: background var(--t-fast, .12s), border-color var(--t-fast, .12s); } :is(#teamDashboardView, #tdSeitenleiste) .td-ablage:hover, :is(#teamDashboardView, #tdSeitenleiste) .td-ablage.td-ablage-aktiv { background: var(--td-akzent-hauch); border-color: var(--td-akzent-rand); color: var(--text-1); } :is(#teamDashboardView, #tdSeitenleiste) .td-ablage > .td-sym { width: 22px; height: 22px; color: var(--td-akzent); } :is(#teamDashboardView, #tdSeitenleiste) .td-unterstrichen { text-decoration: underline; text-underline-offset: 3px; } /* ── Date (catalogue picker, single day) + time ── */ :is(#teamDashboardView, #tdSeitenleiste) .td-zeitwahl { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: flex-start; } :is(#teamDashboardView, #tdSeitenleiste) .td-datumwahl { position: relative; flex: 1 1 200px; display: flex; flex-wrap: wrap; align-items: center; } :is(#teamDashboardView, #tdSeitenleiste) .td-datum-trigger { display: inline-flex; align-items: center; gap: var(--space-2); text-align: left; cursor: pointer; } :is(#teamDashboardView, #tdSeitenleiste) .td-datum-text.td-platzhalter { color: var(--input-placeholder, var(--text-3)); } :is(#teamDashboardView, #tdSeitenleiste) .td-datum-weg { position: absolute; right: 6px; top: 8px; } :is(#teamDashboardView, #tdSeitenleiste) .td-datum-weg[hidden] { display: none; } :is(#teamDashboardView, #tdSeitenleiste) .td-uhrzeit { width: 84px; flex: none; text-align: center; } :is(#teamDashboardView, #tdSeitenleiste) .td-datum-panel { flex: 1 0 100%; margin-top: 6px; box-sizing: border-box; width: 300px; max-width: calc(100vw - 2 * var(--space-6)); padding: var(--space-3); border-radius: 14px; background: var(--w3-flaeche, var(--surface-2)); box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--border-2); } :is(#teamDashboardView, #tdSeitenleiste) .td-datum-panel[hidden] { display: none; } :is(#teamDashboardView, #tdSeitenleiste) .td-datum-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); font-size: var(--fs-15); } :is(#teamDashboardView, #tdSeitenleiste) .td-datum-raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; } :is(#teamDashboardView, #tdSeitenleiste) .td-wochentag { padding: var(--space-1) 0; font-size: var(--fs-11); text-align: center; text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); } :is(#teamDashboardView, #tdSeitenleiste) .td-tag-knopf { height: 34px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-1); font: inherit; font-size: var(--fs-13); font-variant-numeric: tabular-nums; cursor: pointer; } :is(#teamDashboardView, #tdSeitenleiste) .td-tag-knopf:hover:not(:disabled) { background: var(--td-fuellung-stark); } :is(#teamDashboardView, #tdSeitenleiste) .td-tag-knopf.td-fremd { color: var(--text-3); } :is(#teamDashboardView, #tdSeitenleiste) .td-tag-knopf.td-heute { box-shadow: inset 0 0 0 1px var(--border-3); } :is(#teamDashboardView, #tdSeitenleiste) .td-tag-knopf[aria-selected="true"] { background: var(--td-akzent-flaeche); box-shadow: inset 0 0 0 1.5px var(--td-akzent); color: var(--td-akzent); font-weight: var(--fw-semibold); } :is(#teamDashboardView, #tdSeitenleiste) .td-tag-knopf:disabled { opacity: .3; cursor: default; } /* ── Notes ── */ :is(#teamDashboardView, #tdSeitenleiste) .td-karte-rechts { display: flex; align-items: center; gap: var(--space-2); } :is(#teamDashboardView, #tdSeitenleiste) .td-notizen { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-3); } :is(#teamDashboardView, #tdSeitenleiste) .td-notiz { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--td-fuellung); box-shadow: inset 0 0 0 1px var(--border-1); } :is(#teamDashboardView, #tdSeitenleiste) .td-notiz.td-angeheftet { box-shadow: inset 0 0 0 1px var(--td-akzent-rand); } :is(#teamDashboardView, #tdSeitenleiste) .td-notiz-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); } :is(#teamDashboardView, #tdSeitenleiste) .td-notiz-kopf .td-klein { display: inline-flex; align-items: center; gap: 4px; } :is(#teamDashboardView, #tdSeitenleiste) .td-notiz-knoepfe { display: flex; gap: 2px; } :is(#teamDashboardView, #tdSeitenleiste) .td-notiz-knoepfe .td-symbol-knopf.td-leise:hover { color: var(--text-1); } :is(#teamDashboardView, #tdSeitenleiste) .td-notiz-knoepfe .td-symbol-knopf.td-leise[aria-label="Löschen"]:hover { color: var(--danger); } :is(#teamDashboardView, #tdSeitenleiste) .td-notiz-knoepfe [aria-pressed="true"] { color: var(--td-akzent); } :is(#teamDashboardView, #tdSeitenleiste) .td-notiz-text { margin: 0; color: var(--text-1); display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; } :is(#teamDashboardView, #tdSeitenleiste) .td-notiz-form { padding: var(--space-3); border-radius: var(--radius-md); background: var(--td-fuellung); box-shadow: inset 0 0 0 1px var(--td-akzent-rand); } /* ── Notifications ── */ :is(#teamDashboardView, #tdSeitenleiste) .td-nicht-verbunden, :is(#teamDashboardView, #tdSeitenleiste) .td-verbunden { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-13); color: var(--text-2); } :is(#teamDashboardView, #tdSeitenleiste) .td-verbunden { color: var(--text-1); } :is(#teamDashboardView, #tdSeitenleiste) .td-verbunden .td-textknopf { margin-left: auto; } :is(#teamDashboardView, #tdSeitenleiste) .td-status-punkt { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--text-3); flex: none; } :is(#teamDashboardView, #tdSeitenleiste) .td-status-punkt.td-an { background: var(--w3-positiv, var(--success)); } :is(#teamDashboardView, #tdSeitenleiste) .td-telegram-link { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); } :is(#teamDashboardView, #tdSeitenleiste) .td-telegram-link a { text-decoration: none; } /* ── Create task: big modal, full-screen sheet on phones, buttons always reachable ── */ html.td-scroll-sperre, html.td-scroll-sperre body { overflow: hidden; } :is(#teamDashboardView, #tdSeitenleiste) .td-dialog-blatt { display: flex; flex-direction: column; padding: 0; overflow: hidden; } :is(#teamDashboardView, #tdSeitenleiste) .td-dialog-blatt:not([open]) { display: none; } :is(#teamDashboardView, #tdSeitenleiste) .td-dialog-blatt .td-dialog-kopf { margin: 0; padding: var(--space-4) var(--space-5); box-shadow: inset 0 -1px 0 var(--border-1); } :is(#teamDashboardView, #tdSeitenleiste) .td-aufgabe-form { flex: 1 1 auto; min-height: 0; gap: 0; } :is(#teamDashboardView, #tdSeitenleiste) .td-form-inhalt { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4) var(--space-5); } :is(#teamDashboardView, #tdSeitenleiste) .td-form-fuss { position: sticky; bottom: 0; padding: var(--space-3) var(--space-5); background: var(--w3-flaeche, var(--surface-2)); box-shadow: inset 0 1px 0 var(--border-1); } @media (max-width: 640px) { :is(#teamDashboardView, #tdSeitenleiste) .td-aufgabe-form .td-segment { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; } :is(#teamDashboardView, #tdSeitenleiste) .td-aufgabe-form .td-segment::-webkit-scrollbar { display: none; } :is(#teamDashboardView, #tdSeitenleiste) .td-aufgabe-form .td-segment button { flex: none; white-space: nowrap; } :is(#teamDashboardView, #tdSeitenleiste) .td-dialog-blatt { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; } :is(#teamDashboardView, #tdSeitenleiste) .td-form-fuss .td-knopf { flex: 1 1 0; height: 44px; } :is(#teamDashboardView, #tdSeitenleiste) .td-notizen { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { :is(#teamDashboardView, #tdSeitenleiste) .td-mikro.td-aufnahme { animation: none; } } /* ── Nutzer ▸ Teams (team/teamGruppen.js, 23.10.2026); scoped to the sub-tab, same tokens ── */ #teamGruppenBereich .tg-inhalt { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) var(--space-5) var(--space-5); } #teamGruppenBereich .tg-leer { margin: 0; color: var(--text-2); font-size: var(--fs-13); } #teamGruppenBereich .tg-klein { font-size: var(--fs-12); color: var(--text-3); } #teamGruppenBereich .tg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } #teamGruppenBereich .tg-primaer { background: var(--w3-akzent, var(--text-1)); color: var(--w3-akzent-text, var(--text-inv)); border-color: transparent; font-weight: var(--fw-semibold); } #teamGruppenBereich .tg-gefahr { color: var(--danger); } #teamGruppenBereich .tg-tabelle-huelle { min-width: 0; } #teamGruppenBereich .tg-tabelle { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-13); } #teamGruppenBereich .tg-tabelle thead th { position: sticky; top: 0; z-index: 1; padding: var(--space-2) var(--space-3); background: var(--w3-flaeche, var(--surface-2)); color: var(--text-3); font-size: var(--fs-12); font-weight: var(--fw-medium); text-align: left; box-shadow: inset 0 -1px 0 var(--border-2); } #teamGruppenBereich .tg-tabelle td { padding: var(--space-3); border-bottom: 1px solid var(--border-1); vertical-align: middle; } #teamGruppenBereich .tg-tabelle tbody tr:hover td { background: var(--w3-zeile-hover, var(--surface-2)); } #teamGruppenBereich .tg-tabelle tr.tg-offen td { background: var(--surface-2); } #teamGruppenBereich .tg-name { font-weight: var(--fw-medium); } #teamGruppenBereich .tg-mitglieder { color: var(--text-2); overflow-wrap: anywhere; } #teamGruppenBereich .tg-aktion { text-align: right; white-space: nowrap; } #teamGruppenBereich .tg-art { display: inline-flex; align-items: center; height: 22px; padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--surface-3); color: var(--text-2); font-size: var(--fs-11); font-weight: var(--fw-semibold); } #teamGruppenBereich .tg-art-team { box-shadow: inset 0 0 0 1px var(--border-3); color: var(--text-1); } #teamGruppenBereich .tg-editor { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-2); } #teamGruppenBereich .tg-reihe { display: flex; gap: var(--space-4); flex-wrap: wrap; } #teamGruppenBereich .tg-feld { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; flex: 1 1 220px; } #teamGruppenBereich .tg-label { font-size: var(--fs-12); font-weight: var(--fw-medium); color: var(--text-2); } #teamGruppenBereich .tg-eingabe { box-sizing: border-box; width: 100%; min-height: 38px; padding: var(--space-2) var(--space-3); border: 1px solid var(--input-border, var(--border-2)); border-radius: var(--radius-md); background: var(--input-bg, var(--surface-1)); color: var(--text-1); font: inherit; font-size: var(--fs-14); } #teamGruppenBereich .tg-eingabe:focus { outline: none; border-color: var(--border-3); box-shadow: var(--input-focus-ring, var(--focus-ring)); } #teamGruppenBereich .tg-segment { display: inline-flex; gap: 2px; width: fit-content; padding: 2px; border-radius: var(--radius-pill); background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--border-2); } #teamGruppenBereich .tg-segment button { height: 32px; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-2); font: inherit; font-size: var(--fs-13); cursor: pointer; } #teamGruppenBereich .tg-segment button[aria-checked="true"] { background: var(--surface-3); color: var(--text-1); font-weight: var(--fw-semibold); } #teamGruppenBereich .tg-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); } #teamGruppenBereich .tg-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-pill); background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--border-1); color: var(--text-2); font: inherit; font-size: var(--fs-13); cursor: pointer; } #teamGruppenBereich .tg-chip[aria-pressed="true"] { background: var(--w3-akzent-flaeche, var(--surface-3)); box-shadow: inset 0 0 0 1px var(--w3-akzent-rand, var(--border-3)); color: var(--text-1); font-weight: var(--fw-semibold); } #teamGruppenBereich .tg-chip[aria-pressed="true"]::after { content: "✓"; font-size: var(--fs-12); } #teamGruppenBereich .tg-chip:focus-visible, #teamGruppenBereich .tg-segment button:focus-visible { outline: none; box-shadow: var(--focus-ring); } #teamGruppenBereich .tg-fehler { margin: 0; color: var(--danger); font-size: var(--fs-13); } #teamGruppenBereich .tg-fehler[hidden] { display: none; } #teamGruppenBereich .tg-knoepfe { display: flex; justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap; } @media (max-width: 640px) { #teamGruppenBereich .tg-inhalt { padding: var(--space-3); } #teamGruppenBereich .tg-tabelle thead { display: none; } #teamGruppenBereich .tg-tabelle, #teamGruppenBereich .tg-tabelle tbody, #teamGruppenBereich .tg-tabelle tr, #teamGruppenBereich .tg-tabelle td { display: block; width: 100%; box-sizing: border-box; } #teamGruppenBereich .tg-tabelle tr { padding: var(--space-2) 0; border-bottom: 1px solid var(--border-1); } #teamGruppenBereich .tg-tabelle td { border: 0; padding: var(--space-1) var(--space-3); } #teamGruppenBereich .tg-aktion { text-align: left; } } /* ── Explore design language (23.10.2026, FRF Design): corner glow, head line, page glow, live dot, fade-in ── Colours only via color-mix from the accent or a state token. Every motion is off under reduced motion. */ /* Page glow behind the greeting, once per page, never in cards. Full width of the view behind the centred mount; the view clips it horizontally (no scrollbar), z-index -1 inside the isolated mount keeps it under content. The view ends inside the page frame, so a mask fades the glow out before its right edge (Explore's glow ends at the viewport edge instead; here it would leave a hard vertical line). */ :is(#teamDashboardView, #tdSeitenleiste) { overflow-x: clip; } :is(#teamDashboardView, #tdSeitenleiste) .td-mount::before { content: ""; position: absolute; top: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); height: 560px; z-index: -1; pointer-events: none; background: radial-gradient(116% 88% at 109% -37%, color-mix(in srgb, var(--td-akzent) 18%, transparent) 0%, transparent 100%); -webkit-mask-image: linear-gradient(to left, transparent, black 28%); mask-image: linear-gradient(to left, transparent, black 28%); } /* Light theme: no page glow (FRF Design 23.10.2026; the near-black accent reads as a grey haze). The app always sets data-theme on (modules/thema.js, default dark), so no prefers-color-scheme variant. */ :root[data-theme="light"] :is(#teamDashboardView, #tdSeitenleiste) .td-mount::before { display: none; } /* Accent glow in the corner + hover lift (task cards). The urgency sets the glow colour. */ :is(#teamDashboardView, #tdSeitenleiste) .td-aufgabe { position: relative; top: 0; transition: top 180ms ease-out, box-shadow 180ms ease-out; } :is(#teamDashboardView, #tdSeitenleiste) .td-aufgabe { --td-a: var(--td-akzent); --td-schein: 8%; background: linear-gradient(46deg, color-mix(in srgb, var(--td-a) var(--td-schein), transparent) -6%, transparent 60%), var(--td-fuellung); } :is(#teamDashboardView, #tdSeitenleiste) .td-aufgabe[data-stufe="dringlich"] { --td-a: var(--danger); } :is(#teamDashboardView, #tdSeitenleiste) .td-aufgabe[data-stufe="noetig"] { --td-a: var(--warning); } :is(#teamDashboardView, #tdSeitenleiste) .td-aufgabe:hover { --td-schein: 14%; background: linear-gradient(46deg, color-mix(in srgb, var(--td-a) var(--td-schein), transparent) -6%, transparent 60%), var(--td-fuellung); box-shadow: inset 0 0 0 1px var(--border-1), 0 0 0 1px color-mix(in srgb, var(--td-a) 25%, transparent); } /* Lift only closed cards: an open card holds fields and buttons that should not move under the pointer. */ @media (prefers-reduced-motion: no-preference) { :is(#teamDashboardView, #tdSeitenleiste) .td-aufgabe:not(.td-offen):not(:has(.td-inline-form)):hover { top: -2px; } } /* Card head: a gradient hairline from the accent instead of a hard separator. */ :is(#teamDashboardView, #tdSeitenleiste) .td-karte-kopf::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, color-mix(in srgb, var(--td-a, var(--td-akzent)) 22%, transparent), transparent 60%); } /* Live dot: only on the next call when it runs or starts within 15 minutes. */ :is(#teamDashboardView, #tdSeitenleiste) .td-live { width: 7px; height: 7px; flex: none; border-radius: var(--radius-pill); background: var(--w3-positiv, var(--success)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--w3-positiv, var(--success)) 25%, transparent); animation: td-live 2.4s ease-in-out infinite; } @keyframes td-live { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--w3-positiv, var(--success)) 0%, transparent); } } /* Staggered fade-in, first render with data only (teamDashboard.js einblenden, --i capped at 8). */ :is(#teamDashboardView, #tdSeitenleiste) .td-ein { animation: td-ein 500ms ease-out both; animation-delay: calc(var(--i, 0) * 60ms); } @keyframes td-ein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { :is(#teamDashboardView, #tdSeitenleiste) .td-live, :is(#teamDashboardView, #tdSeitenleiste) .td-ein { animation: none; } :is(#teamDashboardView, #tdSeitenleiste) .td-aufgabe { transition: none; } } /* ── Termine & Calls: list, „Kachel“ (small month), window „Öffnen“, task deadlines (24.10.2026, teamDashboard.js) ── Like the user's desktop calendar: month grid Mo–So, six weeks, other months dimmed, today with an amber frame and its number as an amber pill (the same everywhere, no surface tint). Colour per source (own = accent, Google = positive, deadlines = neutral with an urgency dot), past dates dimmed. Panels never scroll: chips that do not fit become „+N“ in the head of the day (counted in JS). */ :is(#teamDashboardView, #tdSeitenleiste) { --td-heute: var(--w3-warnung, var(--warning)); --td-quelle-eigen: var(--td-akzent); --td-quelle-google: var(--w3-positiv, var(--success)); --td-quelle-frist: var(--text-2); --td-ueberfaellig: var(--w3-negativ-text, var(--danger)); } :is(#teamDashboardView, #tdSeitenleiste) .td-termine-knoepfe { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } :is(#teamDashboardView, #tdSeitenleiste) .td-termine-knoepfe .td-segment button { height: 26px; font-size: var(--fs-12); } /* List: a day line with a hairline to the edge (like „Offen (15)“ in the Bug Report); whole rows open the details. */ :is(#teamDashboardView, #tdSeitenleiste) .td-tag-trenner { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-4) 0 var(--space-1); font-size: var(--fs-12); font-weight: var(--fw-semibold); color: var(--text-2); } :is(#teamDashboardView, #tdSeitenleiste) .td-tag-trenner::after { content: ""; flex: 1; border-top: 1px solid var(--border-2); } :is(#teamDashboardView, #tdSeitenleiste) .td-agenda > .td-tag:first-child > .td-tag-trenner, :is(#teamDashboardView, #tdSeitenleiste) .td-kachel-tag > .td-tag-trenner { margin-top: 0; } :is(#teamDashboardView, #tdSeitenleiste) .td-klickbar { cursor: pointer; } :is(#teamDashboardView, #tdSeitenleiste) .td-klickbar:hover { background: var(--surface-3); } :is(#teamDashboardView, #tdSeitenleiste) .td-klickbar:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* Deadline symbol and appointment dot share one fixed-width column, so all titles start on one line (design 24.10.2026). */ :is(#teamDashboardView, #tdSeitenleiste) .td-frist-zeichen { display: inline-flex; flex: none; justify-content: center; width: 14px; color: var(--text-3); } :is(#teamDashboardView, #tdSeitenleiste) .td-termin .td-termin-punkt { margin-inline: 3px; } /* Deadline colour = urgency (Dringlich red, Nötig amber, Nice muted); the legend keeps the neutral square. */ :is(#teamDashboardView, #tdSeitenleiste) .td-frist-zeichen[data-stufe="dringlich"] { color: var(--danger); } :is(#teamDashboardView, #tdSeitenleiste) .td-frist-zeichen[data-stufe="noetig"] { color: var(--warning); } :is(#teamDashboardView, #tdSeitenleiste) .td-frist-zeichen .td-sym { width: 14px; height: 14px; } :is(#teamDashboardView, #tdSeitenleiste) .td-frist-meta { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } :is(#teamDashboardView, #tdSeitenleiste) .td-zeile.td-frist-ueber { box-shadow: inset 0 0 0 1px var(--td-ueberfaellig); } :is(#teamDashboardView, #tdSeitenleiste) .td-stufe-punkt { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--text-3); } :is(#teamDashboardView, #tdSeitenleiste) .td-stufe-punkt[data-stufe="dringlich"] { background: var(--danger); } :is(#teamDashboardView, #tdSeitenleiste) .td-stufe-punkt[data-stufe="noetig"] { background: var(--warning); } /* Chips and dots */ :is(#teamDashboardView, #tdSeitenleiste) [data-quelle] { --td-q: var(--td-quelle-eigen); } :is(#teamDashboardView, #tdSeitenleiste) [data-quelle="google"] { --td-q: var(--td-quelle-google); } :is(#teamDashboardView, #tdSeitenleiste) [data-quelle="frist"] { --td-q: var(--td-quelle-frist); } :is(#teamDashboardView, #tdSeitenleiste) .td-kal-chip { display: flex; align-items: center; gap: 4px; flex: none; box-sizing: border-box; width: 100%; height: 18px; min-width: 0; padding: 0 5px 0 6px; border: 0; border-radius: 4px; background: color-mix(in srgb, var(--td-q) 14%, transparent); box-shadow: inset 2px 0 0 var(--td-q); color: var(--text-1); font: inherit; font-size: var(--fs-12); line-height: 18px; text-align: left; white-space: nowrap; cursor: pointer; } :is(#teamDashboardView, #tdSeitenleiste) .td-kal-chip:hover { background: color-mix(in srgb, var(--td-q) 26%, transparent); } :is(#teamDashboardView, #tdSeitenleiste) .td-kal-chip:focus-visible, :is(#teamDashboardView, #tdSeitenleiste) .td-kal-mehr:focus-visible, :is(#teamDashboardView, #tdSeitenleiste) .td-mtag-zahl:focus-visible, :is(#teamDashboardView, #tdSeitenleiste) .td-ktag:focus-visible { outline: none; box-shadow: var(--focus-ring); } :is(#teamDashboardView, #tdSeitenleiste) .td-kal-chip.td-vorbei { opacity: .45; } :is(#teamDashboardView, #tdSeitenleiste) .td-kal-zeit { flex: none; color: var(--text-2); font-size: var(--fs-11); } :is(#teamDashboardView, #tdSeitenleiste) .td-kal-titel { min-width: 0; overflow: hidden; text-overflow: ellipsis; } :is(#teamDashboardView, #tdSeitenleiste) .td-kal-meet { width: 12px; height: 12px; flex: none; margin-left: auto; color: var(--text-3); } :is(#teamDashboardView, #tdSeitenleiste) .td-frist-chip { box-shadow: none; background: var(--td-fuellung-stark); } :is(#teamDashboardView, #tdSeitenleiste) .td-frist-chip:hover { background: color-mix(in srgb, var(--td-q) 22%, transparent); } :is(#teamDashboardView, #tdSeitenleiste) .td-frist-chip .td-stufe-punkt { margin-left: auto; } :is(#teamDashboardView, #tdSeitenleiste) .td-frist-sym { width: 12px; height: 12px; color: var(--td-quelle-frist); } :is(#teamDashboardView, #tdSeitenleiste) .td-frist-chip.td-frist-ueber { box-shadow: inset 0 0 0 1px var(--td-ueberfaellig); } :is(#teamDashboardView, #tdSeitenleiste) .td-kal-punkt { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--td-q); } :is(#teamDashboardView, #tdSeitenleiste) .td-kal-punkt[data-quelle="frist"] { border-radius: 2px; } :is(#teamDashboardView, #tdSeitenleiste) .td-kal-punkt.td-vorbei { opacity: .45; } :is(#teamDashboardView, #tdSeitenleiste) .td-kal-punkt[data-quelle="frist"][data-stufe] { background: var(--text-3); } :is(#teamDashboardView, #tdSeitenleiste) .td-kal-punkt[data-quelle="frist"][data-stufe="dringlich"] { background: var(--danger); } :is(#teamDashboardView, #tdSeitenleiste) .td-kal-punkt[data-quelle="frist"][data-stufe="noetig"] { background: var(--warning); } /* Overdue: urgency fill keeps, a ring marks it. */ :is(#teamDashboardView, #tdSeitenleiste) .td-kal-punkt.td-frist-ueber { box-shadow: 0 0 0 1.5px var(--td-ueberfaellig); } :is(#teamDashboardView, #tdSeitenleiste) .td-kal-mehr { flex: none; height: 18px; padding: 0 6px; border: 0; border-radius: var(--radius-pill); background: var(--td-fuellung-stark); color: var(--text-2); font: inherit; font-size: var(--fs-11); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; cursor: pointer; } :is(#teamDashboardView, #tdSeitenleiste) .td-kal-mehr:hover { color: var(--text-1); } :is(#teamDashboardView, #tdSeitenleiste) .td-kal-leer { margin: 0; font-size: var(--fs-12); color: var(--text-3); } /* Widget view „Kachel“: the month small, the chosen day's entries below. */ :is(#teamDashboardView, #tdSeitenleiste) .td-kal-widget { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; transition: opacity var(--t-base, .2s); } :is(#teamDashboardView, #tdSeitenleiste) .td-kal-widget.td-laedt, :is(#teamDashboardView, #tdSeitenleiste) .td-kal.td-laedt { opacity: .6; } :is(#teamDashboardView, #tdSeitenleiste) .td-woche-nav { display: flex; align-items: center; gap: var(--space-2); min-width: 0; } :is(#teamDashboardView, #tdSeitenleiste) .td-woche-nav .td-symbol-knopf { width: 28px; height: 28px; } :is(#teamDashboardView, #tdSeitenleiste) .td-woche-titel { min-width: 0; margin-left: var(--space-1); font-size: var(--fs-13); } :is(#teamDashboardView, #tdSeitenleiste) .td-woche-nav .td-textknopf { margin-left: auto; } :is(#teamDashboardView, #tdSeitenleiste) .td-kachel { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; } :is(#teamDashboardView, #tdSeitenleiste) .td-ktag { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; min-width: 0; height: 44px; padding: 4px 2px; box-sizing: border-box; border: 0; border-radius: var(--radius-sm); background: var(--td-fuellung); box-shadow: inset 0 0 0 1px transparent; color: var(--text-1); font: inherit; cursor: pointer; transition: background var(--t-fast, .12s); } :is(#teamDashboardView, #tdSeitenleiste) .td-ktag:hover { background: var(--td-fuellung-stark); } :is(#teamDashboardView, #tdSeitenleiste) .td-ktag.td-fremd > * { opacity: .4; } :is(#teamDashboardView, #tdSeitenleiste) .td-ktag.td-vergangen .td-ktag-zahl { color: var(--text-3); } :is(#teamDashboardView, #tdSeitenleiste) .td-ktag.td-gewaehlt { box-shadow: inset 0 0 0 1.5px var(--td-akzent); } :is(#teamDashboardView, #tdSeitenleiste) .td-ktag.td-heute, :is(#teamDashboardView, #tdSeitenleiste) .td-ktag.td-heute.td-gewaehlt { box-shadow: inset 0 0 0 1.5px var(--td-heute); } :is(#teamDashboardView, #tdSeitenleiste) .td-ktag-zahl { min-width: 22px; padding: 0 5px; box-sizing: border-box; border-radius: var(--radius-pill); font-size: var(--fs-12); font-weight: var(--fw-semibold); line-height: 18px; font-variant-numeric: tabular-nums; text-align: center; } :is(#teamDashboardView, #tdSeitenleiste) .td-ktag.td-heute .td-ktag-zahl { background: var(--td-heute); color: var(--text-inv); } :is(#teamDashboardView, #tdSeitenleiste) .td-ktag-punkte { display: flex; align-items: center; justify-content: center; gap: 3px; min-height: 10px; } :is(#teamDashboardView, #tdSeitenleiste) .td-ktag-rest { font-size: 10px; line-height: 1; color: var(--text-3); font-variant-numeric: tabular-nums; } :is(#teamDashboardView, #tdSeitenleiste) .td-kachel-tag { display: flex; flex-direction: column; gap: var(--space-1); } /* Window „Öffnen“: nearly the whole viewport, the month over the full height. */ :is(#teamDashboardView, #tdSeitenleiste) .td-dialog-gross { width: calc(100vw - 2 * var(--space-6)); max-width: 1720px; height: calc(100dvh - 2 * var(--space-6)); max-height: none; display: flex; flex-direction: column; overflow: hidden; padding: var(--space-4) var(--space-5) var(--space-5); } :is(#teamDashboardView, #tdSeitenleiste) .td-dialog-gross:not([open]) { display: none; } :is(#teamDashboardView, #tdSeitenleiste) .td-dialog-gross .td-dialog-kopf { flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-3); } :is(#teamDashboardView, #tdSeitenleiste) .td-kal-nav { display: flex; align-items: center; gap: var(--space-2); min-width: 0; } :is(#teamDashboardView, #tdSeitenleiste) .td-kal-nav h3 { min-width: 9.5em; margin: 0 var(--space-2); } :is(#teamDashboardView, #tdSeitenleiste) .td-kal-info { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-left: auto; color: var(--text-2); font-size: var(--fs-12); } :is(#teamDashboardView, #tdSeitenleiste) .td-kal-legende { display: inline-flex; align-items: center; gap: var(--space-3); } :is(#teamDashboardView, #tdSeitenleiste) .td-kal-legende > span { display: inline-flex; align-items: center; gap: 6px; } :is(#teamDashboardView, #tdSeitenleiste) .td-kal-hinweis { color: var(--w3-warnung, var(--warning)); } :is(#teamDashboardView, #tdSeitenleiste) .td-kal { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; transition: opacity var(--t-base, .2s); } :is(#teamDashboardView, #tdSeitenleiste) .td-monat { flex: 1 1 auto; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: auto repeat(6, minmax(0, 1fr)); gap: 4px; min-height: 0; } :is(#teamDashboardView, #tdSeitenleiste) .td-monat-wt { padding: 0 6px 2px; font-size: var(--fs-11); font-weight: var(--fw-semibold); color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; text-align: center; } :is(#teamDashboardView, #tdSeitenleiste) .td-monat .td-monat-wt { text-align: left; } :is(#teamDashboardView, #tdSeitenleiste) .td-mtag { display: flex; flex-direction: column; gap: 2px; min-width: 0; min-height: 0; overflow: hidden; padding: 3px 5px 4px; box-sizing: border-box; border-radius: var(--radius-sm); background: var(--td-fuellung); box-shadow: inset 0 0 0 1px transparent; cursor: pointer; transition: background var(--t-fast, .12s); } :is(#teamDashboardView, #tdSeitenleiste) .td-mtag:hover { background: var(--td-fuellung-stark); } :is(#teamDashboardView, #tdSeitenleiste) .td-mtag.td-fremd > * { opacity: .45; } :is(#teamDashboardView, #tdSeitenleiste) .td-mtag.td-vergangen .td-mtag-zahl { color: var(--text-3); } :is(#teamDashboardView, #tdSeitenleiste) .td-mtag.td-gewaehlt { box-shadow: inset 0 0 0 1.5px var(--td-akzent); } :is(#teamDashboardView, #tdSeitenleiste) .td-mtag.td-heute, :is(#teamDashboardView, #tdSeitenleiste) .td-mtag.td-heute.td-gewaehlt { box-shadow: inset 0 0 0 1.5px var(--td-heute); } :is(#teamDashboardView, #tdSeitenleiste) .td-mtag-kopf { display: flex; align-items: center; gap: 4px; min-height: 20px; flex: none; } :is(#teamDashboardView, #tdSeitenleiste) .td-mtag-zahl { min-width: 22px; height: 20px; padding: 0 5px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-1); font: inherit; font-size: var(--fs-12); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; cursor: pointer; } :is(#teamDashboardView, #tdSeitenleiste) .td-mtag.td-heute .td-mtag-zahl { background: var(--td-heute); color: var(--text-inv); } :is(#teamDashboardView, #tdSeitenleiste) .td-mtag-rest { margin-left: auto; display: inline-flex; font-size: var(--fs-11); color: var(--text-3); } :is(#teamDashboardView, #tdSeitenleiste) .td-mtag-liste { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 2px; overflow: hidden; } :is(#teamDashboardView, #tdSeitenleiste) .td-termin-detail { gap: var(--space-3); } :is(#teamDashboardView, #tdSeitenleiste) .td-detail-zeit { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--text-2); font-size: var(--fs-13); } :is(#teamDashboardView, #tdSeitenleiste) .td-tag-dialog { gap: var(--space-1); } :is(#teamDashboardView, #tdSeitenleiste) .td-frist-dialog > .td-aufgabe { box-shadow: none; } /* Phones: full-screen sheet that scrolls as a page; month cells with dots. */ @media (max-width: 640px) { :is(#teamDashboardView, #tdSeitenleiste) .td-dialog-gross { width: 100vw; max-width: 100vw; height: 100dvh; margin: 0; border-radius: 0; overflow: auto; padding: var(--space-3) var(--space-4) var(--space-5); } :is(#teamDashboardView, #tdSeitenleiste) .td-dialog-gross .td-dialog-kopf { position: relative; padding-right: 40px; } :is(#teamDashboardView, #tdSeitenleiste) .td-dialog-gross .td-dialog-kopf > .td-symbol-knopf { position: absolute; top: 0; right: 0; } :is(#teamDashboardView, #tdSeitenleiste) .td-kal-nav { flex: 1 1 100%; } :is(#teamDashboardView, #tdSeitenleiste) .td-kal-nav h3 { min-width: 0; flex: 1 1 auto; font-size: var(--fs-15); } :is(#teamDashboardView, #tdSeitenleiste) .td-kal-info { margin-left: 0; gap: var(--space-2); } :is(#teamDashboardView, #tdSeitenleiste) .td-monat { flex: none; grid-template-rows: auto repeat(6, 56px); gap: 3px; } :is(#teamDashboardView, #tdSeitenleiste) .td-monat .td-monat-wt { text-align: center; } :is(#teamDashboardView, #tdSeitenleiste) .td-mtag { padding: 3px; align-items: center; } :is(#teamDashboardView, #tdSeitenleiste) .td-mtag-kopf { flex-direction: column; gap: 0; } :is(#teamDashboardView, #tdSeitenleiste) .td-mtag-rest { margin: 0; font-size: 10px; line-height: 1; } :is(#teamDashboardView, #tdSeitenleiste) .td-mtag-liste { flex-direction: row; justify-content: center; gap: 3px; flex: none; } :is(#teamDashboardView, #tdSeitenleiste) .td-termin .td-symbol-knopf.td-leise { opacity: 1; } } @media (prefers-reduced-motion: reduce) { :is(#teamDashboardView, #tdSeitenleiste) .td-kal-widget, :is(#teamDashboardView, #tdSeitenleiste) .td-kal, :is(#teamDashboardView, #tdSeitenleiste) .td-mtag, :is(#teamDashboardView, #tdSeitenleiste) .td-ktag { transition: none; } } /* ── Several Google calendars (24.10.2026): fixed palette from tokens, five different hues (design review): green, violet, pink, teal-green, sand. No blue (= own dates), no red or amber (= urgency); colour 0 is the green of before. ── */ :is(#teamDashboardView, #tdSeitenleiste) { --td-kal-farbe-0: var(--td-quelle-google); --td-kal-farbe-1: color-mix(in srgb, var(--w3-akzent-tief, var(--info)) 55%, var(--w3-negativ, var(--danger))); --td-kal-farbe-2: color-mix(in srgb, var(--w3-negativ, var(--danger)) 70%, var(--w3-akzent, var(--info))); --td-kal-farbe-3: color-mix(in srgb, var(--w3-positiv, var(--success)) 70%, var(--w3-akzent-tief, var(--info))); --td-kal-farbe-4: color-mix(in srgb, var(--w3-warnung, var(--warning)) 60%, var(--w3-positiv, var(--success))); } :is(#teamDashboardView, #tdSeitenleiste) [data-quelle="google"][data-farbe="1"] { --td-q: var(--td-kal-farbe-1); } :is(#teamDashboardView, #tdSeitenleiste) [data-quelle="google"][data-farbe="2"] { --td-q: var(--td-kal-farbe-2); } :is(#teamDashboardView, #tdSeitenleiste) [data-quelle="google"][data-farbe="3"] { --td-q: var(--td-kal-farbe-3); } :is(#teamDashboardView, #tdSeitenleiste) [data-quelle="google"][data-farbe="4"] { --td-q: var(--td-kal-farbe-4); } :is(#teamDashboardView, #tdSeitenleiste) .td-legende-mehr { padding: 0 var(--space-1); font-size: var(--fs-12); } :is(#teamDashboardView, #tdSeitenleiste) .td-kalender-kaputt { color: var(--w3-warnung, var(--warning)); } :is(#teamDashboardView, #tdSeitenleiste) .td-kal-quellen { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; } :is(#teamDashboardView, #tdSeitenleiste) .td-kal-quelle { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border-1); } :is(#teamDashboardView, #tdSeitenleiste) .td-kal-quelle:last-child { border-bottom: 0; } :is(#teamDashboardView, #tdSeitenleiste) .td-kal-quelle-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } :is(#teamDashboardView, #tdSeitenleiste) .td-kal-quelle-name { font-weight: var(--fw-medium); overflow-wrap: anywhere; cursor: pointer; } :is(#teamDashboardView, #tdSeitenleiste) .td-farbknopf { width: 20px; height: 20px; flex: none; padding: 0; border: 0; border-radius: var(--radius-pill); background: var(--td-q); box-shadow: inset 0 0 0 1px var(--border-2); cursor: pointer; } :is(#teamDashboardView, #tdSeitenleiste) .td-farbknopf:focus-visible { outline: none; box-shadow: var(--focus-ring); } :is(#teamDashboardView, #tdSeitenleiste) .td-farbknopf[aria-checked="true"] { box-shadow: 0 0 0 2px var(--td-karte), 0 0 0 3.5px var(--text-1); } :is(#teamDashboardView, #tdSeitenleiste) .td-farbwahl { grid-column: 1 / -1; display: flex; gap: var(--space-2); padding-left: calc(20px + var(--space-3)); } /* Remove in the calendar list: quiet until pointed at. */ :is(#teamDashboardView, #tdSeitenleiste) .td-entfernen { color: var(--text-3); } :is(#teamDashboardView, #tdSeitenleiste) .td-entfernen:is(:hover, :focus-visible) { color: var(--w3-negativ-text, var(--danger)); } :is(#teamDashboardView, #tdSeitenleiste) .td-kal-dazu { justify-content: space-between; align-items: center; } :is(#teamDashboardView, #tdSeitenleiste) .td-kalender-form { gap: var(--space-3); } /* iCal explanation: accordion (closed by default), each step text left with a number pill, its picture right. */ :is(#teamDashboardView, #tdSeitenleiste) .td-erklaerung-block { display: flex; flex-direction: column; gap: var(--space-2); } :is(#teamDashboardView, #tdSeitenleiste) .td-akkordeon { display: inline-flex; align-items: center; gap: var(--space-2); width: fit-content; padding: var(--space-1) 0; border: 0; background: none; color: var(--text-1); font: inherit; font-size: var(--fs-13); font-weight: var(--fw-semibold); cursor: pointer; } :is(#teamDashboardView, #tdSeitenleiste) .td-akkordeon:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); } :is(#teamDashboardView, #tdSeitenleiste) .td-akkordeon-pfeil { transform: rotate(-90deg); transition: transform var(--t-fast, .12s); color: var(--text-2); } :is(#teamDashboardView, #tdSeitenleiste) .td-akkordeon[aria-expanded="true"] .td-akkordeon-pfeil { transform: none; } :is(#teamDashboardView, #tdSeitenleiste) .td-schritte-neu { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; } :is(#teamDashboardView, #tdSeitenleiste) .td-schritte-neu[hidden] { display: none; } :is(#teamDashboardView, #tdSeitenleiste) .td-schritt { display: grid; grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); align-items: start; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--border-1); } :is(#teamDashboardView, #tdSeitenleiste) .td-schritt:last-child { border-bottom: 0; } :is(#teamDashboardView, #tdSeitenleiste) .td-schritt:not(:has(.td-schritt-bild)) .td-schritt-text { grid-column: 1 / -1; } :is(#teamDashboardView, #tdSeitenleiste) .td-schritt-text { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--text-1); font-size: var(--fs-13); line-height: var(--lh-relaxed, 1.55); } :is(#teamDashboardView, #tdSeitenleiste) .td-schritt-text strong { font-weight: var(--fw-semibold); } :is(#teamDashboardView, #tdSeitenleiste) .td-schritt-text a { color: var(--td-akzent); text-underline-offset: 3px; } :is(#teamDashboardView, #tdSeitenleiste) .td-schritt-nr { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: var(--radius-pill); background: var(--td-akzent-flaeche); color: var(--td-akzent); font-size: var(--fs-12); font-weight: var(--fw-semibold); line-height: 1; } :is(#teamDashboardView, #tdSeitenleiste) .td-schritt-bild { display: block; padding: 0; border: 1px solid var(--border-1); border-radius: var(--radius-md); background: none; overflow: hidden; cursor: zoom-in; } :is(#teamDashboardView, #tdSeitenleiste) .td-schritt-bild:focus-visible { outline: none; box-shadow: var(--focus-ring); } :is(#teamDashboardView, #tdSeitenleiste) .td-schritt-bild img { display: block; width: 100%; height: auto; } :is(#teamDashboardView, #tdSeitenleiste) .td-bild-gross { display: block; max-width: 100%; height: auto; border-radius: var(--radius-md); } @media (max-width: 640px) { :is(#teamDashboardView, #tdSeitenleiste) .td-schritt { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); } :is(#teamDashboardView, #tdSeitenleiste) .td-kal-quelle { grid-template-columns: auto minmax(0, 1fr) auto; } :is(#teamDashboardView, #tdSeitenleiste) .td-kal-quelle > .td-textknopf { grid-column: 2 / -1; justify-self: start; padding-left: 0; } } /* ── Task lists: at most six visible (24.10.2026). A deliberate exception to "panels never scroll": the list scrolls, its height comes from its first six cards (teamDashboard.js begrenzeListen), a fade while more follows. ── */ :is(#teamDashboardView, #tdSeitenleiste) .td-liste-scroll { position: relative; overflow-y: auto; overscroll-behavior: contain; padding: 1px 4px 1px 1px; margin: -1px -4px -1px -1px; scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb, var(--border-3)) transparent; } :is(#teamDashboardView, #tdSeitenleiste) .td-liste-scroll::-webkit-scrollbar { width: 6px; } :is(#teamDashboardView, #tdSeitenleiste) .td-liste-scroll::-webkit-scrollbar-thumb { border-radius: var(--radius-pill); background: var(--scrollbar-thumb, var(--border-3)); } :is(#teamDashboardView, #tdSeitenleiste) .td-liste-scroll:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-md); } :is(#teamDashboardView, #tdSeitenleiste) .td-liste-scroll.td-mehr-unten { -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 40px), transparent); mask-image: linear-gradient(to bottom, black calc(100% - 40px), transparent); } :is(#teamDashboardView, #tdSeitenleiste) .td-liste-scroll .td-aufgabe:hover { top: 0; } :is(#teamDashboardView, #tdSeitenleiste) .td-seitenliste { display: flex; flex-direction: column; gap: var(--space-3); } :is(#teamDashboardView, #tdSeitenleiste) .td-seiten { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); } :is(#teamDashboardView, #tdSeitenleiste) .td-seiten-info { font-size: var(--fs-12); color: var(--text-3); font-variant-numeric: tabular-nums; } :is(#teamDashboardView, #tdSeitenleiste) .td-seiten-knoepfe { display: flex; flex-wrap: wrap; gap: var(--space-1); } :is(#teamDashboardView, #tdSeitenleiste) .td-seite { min-width: 32px; height: 32px; padding: 0 var(--space-2); border: 0; border-radius: var(--radius-pill); background: var(--td-fuellung); box-shadow: var(--w3-kante-feld, inset 0 0 0 1px var(--border-2)); color: var(--text-2); font: inherit; font-size: var(--fs-13); font-variant-numeric: tabular-nums; cursor: pointer; } :is(#teamDashboardView, #tdSeitenleiste) .td-seite:hover:not([disabled]):not(.td-seite-luecke) { color: var(--text-1); background: var(--td-fuellung-stark); } :is(#teamDashboardView, #tdSeitenleiste) .td-seite:focus-visible { outline: none; box-shadow: var(--focus-ring); } :is(#teamDashboardView, #tdSeitenleiste) .td-seite[aria-current="page"] { background: var(--td-fuellung-stark); color: var(--text-1); font-weight: var(--fw-semibold); } :is(#teamDashboardView, #tdSeitenleiste) .td-seite[disabled] { opacity: .4; cursor: default; } :is(#teamDashboardView, #tdSeitenleiste) .td-seite-luecke { display: inline-grid; place-items: center; background: none; box-shadow: none; cursor: default; } @media (prefers-reduced-motion: reduce) { :is(#teamDashboardView, #tdSeitenleiste) .td-akkordeon-pfeil { transition: none; } } /* ── Widget „Links“ (24.10.2026): favourites of the Ablage and own links. No icon from the linked site: Ablage kinds get the Ablage's tiles (or this plain one), own links their first letter. At most eight rows, the rest on demand. ── */ :is(#teamDashboardView, #tdSeitenleiste) .td-links { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; } :is(#teamDashboardView, #tdSeitenleiste) .td-link-zeile { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-2); border-radius: var(--radius-md); transition: background var(--t-fast, .12s); } :is(#teamDashboardView, #tdSeitenleiste) .td-link-zeile:hover, :is(#teamDashboardView, #tdSeitenleiste) .td-link-zeile:focus-within { background: var(--w3-zeile-hover, var(--surface-2)); } :is(#teamDashboardView, #tdSeitenleiste) .td-link-bearbeiten { display: block; padding: var(--space-2) 0; background: none; } :is(#teamDashboardView, #tdSeitenleiste) .td-link-bearbeiten:hover, :is(#teamDashboardView, #tdSeitenleiste) .td-link-bearbeiten:focus-within { background: none; } :is(#teamDashboardView, #tdSeitenleiste) .td-link-zeichen { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; box-sizing: border-box; flex: none; border-radius: var(--radius-sm); background: var(--td-fuellung-stark); color: var(--text-2); } :is(#teamDashboardView, #tdSeitenleiste) .td-link-zeichen .td-sym { width: 15px; height: 15px; } :is(#teamDashboardView, #tdSeitenleiste) .td-link-zeichen[data-art="sheet"] { color: var(--success); } :is(#teamDashboardView, #tdSeitenleiste) .td-link-zeichen[data-art="doc"] { color: var(--td-akzent); } :is(#teamDashboardView, #tdSeitenleiste) .td-link-zeichen[data-art="slides"] { color: var(--warning); } :is(#teamDashboardView, #tdSeitenleiste) .td-link-zeichen[data-art="pdf"] { color: var(--danger); } :is(#teamDashboardView, #tdSeitenleiste) .td-link-initiale { background: var(--td-akzent-flaeche); color: var(--td-akzent); font-size: var(--fs-13); font-weight: var(--fw-semibold); } :is(#teamDashboardView, #tdSeitenleiste) .td-link-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } :is(#teamDashboardView, #tdSeitenleiste) .td-link-text > .td-klein { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :is(#teamDashboardView, #tdSeitenleiste) .td-link-titel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: var(--radius-sm); color: var(--text-1); font-weight: var(--fw-medium); text-decoration: none; } :is(#teamDashboardView, #tdSeitenleiste) a.td-link-titel:hover { color: var(--td-akzent); text-decoration: underline; text-underline-offset: 3px; } :is(#teamDashboardView, #tdSeitenleiste) a.td-link-titel:focus-visible { outline: none; box-shadow: var(--focus-ring); } :is(#teamDashboardView, #tdSeitenleiste) .td-link-aktionen { display: flex; gap: 2px; opacity: 0; transition: opacity var(--t-fast, .12s); } :is(#teamDashboardView, #tdSeitenleiste) .td-link-zeile:hover .td-link-aktionen, :is(#teamDashboardView, #tdSeitenleiste) .td-link-zeile:focus-within .td-link-aktionen { opacity: 1; } :is(#teamDashboardView, #tdSeitenleiste) .td-leise-knopf { width: 28px; height: 28px; background: transparent; color: var(--text-3); } :is(#teamDashboardView, #tdSeitenleiste) .td-leise-knopf:hover { color: var(--text-1); } :is(#teamDashboardView, #tdSeitenleiste) .td-link-weg:is(:hover, :focus-visible) { color: var(--w3-negativ-text, var(--danger)); } :is(#teamDashboardView, #tdSeitenleiste) .td-links-ablage { align-self: flex-start; text-decoration: none; } :is(#teamDashboardView, #tdSeitenleiste) .td-links-ablage:hover { text-decoration: underline; text-underline-offset: 3px; } :is(#teamDashboardView, #tdSeitenleiste) .td-links-mehr { align-self: flex-start; } :is(#teamDashboardView, #tdSeitenleiste) .td-link-form .td-feld-reihe > .td-feld:last-child { flex: 2 1 220px; } :is(#teamDashboardView, #tdSeitenleiste) .td-link-form .td-eingabe[aria-invalid="true"] { border-color: var(--w3-negativ-text, var(--danger)); } /* Touch and narrow screens have no hover: the actions stay visible. */ @media (hover: none), (max-width: 640px) { :is(#teamDashboardView, #tdSeitenleiste) .td-link-aktionen { opacity: 1; } } @media (max-width: 640px) { :is(#teamDashboardView, #tdSeitenleiste) .td-link-zeile { gap: var(--space-2); padding-inline: var(--space-1); } :is(#teamDashboardView, #tdSeitenleiste) .td-link-aktionen { gap: 0; } :is(#teamDashboardView, #tdSeitenleiste) .td-link-aktionen .td-leise-knopf { width: 26px; } } @media (prefers-reduced-motion: reduce) { :is(#teamDashboardView, #tdSeitenleiste) .td-link-zeile, :is(#teamDashboardView, #tdSeitenleiste) .td-link-aktionen { transition: none; } } /* ── „Für dich in Discord“ (Wega, 24.10.2026, teamDashboard.js baueDiscord) ── */ :is(#teamDashboardView, #tdSeitenleiste) .td-dc-rechts { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } :is(#teamDashboardView, #tdSeitenleiste) .td-dc-rechts .td-segment button { height: 26px; font-size: var(--fs-12); } :is(#teamDashboardView, #tdSeitenleiste) .td-dc-zeile { align-items: flex-start; flex-wrap: wrap; } :is(#teamDashboardView, #tdSeitenleiste) .td-dc-text { display: flex; flex-direction: column; gap: var(--space-1); flex: 999 1 220px; min-width: 0; } :is(#teamDashboardView, #tdSeitenleiste) .td-dc-kopf { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-1) var(--space-2); min-width: 0; } :is(#teamDashboardView, #tdSeitenleiste) .td-dc-autor { font-weight: var(--fw-semibold); font-size: var(--fs-13); overflow-wrap: anywhere; } :is(#teamDashboardView, #tdSeitenleiste) .td-dc-kanal { color: var(--text-2); font-size: var(--fs-12); overflow-wrap: anywhere; } :is(#teamDashboardView, #tdSeitenleiste) .td-dc-art { display: inline-flex; align-items: center; height: 20px; padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--td-fuellung); color: var(--text-2); font-size: var(--fs-11); } :is(#teamDashboardView, #tdSeitenleiste) .td-dc-weg { background: var(--warning-soft); color: var(--w3-warnung, var(--warning)); } :is(#teamDashboardView, #tdSeitenleiste) .td-dc-auszug { margin: 0; color: var(--text-1); font-size: var(--fs-13); line-height: var(--lh-normal, 1.45); white-space: pre-line; overflow-wrap: anywhere; max-width: 72ch; } :is(#teamDashboardView, #tdSeitenleiste) .td-dc-zu { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } :is(#teamDashboardView, #tdSeitenleiste) .td-dc-mehr { align-self: flex-start; } :is(#teamDashboardView, #tdSeitenleiste) .td-dc-hinweis { display: inline-flex; align-items: center; gap: var(--space-1); margin: 0; width: fit-content; padding: 2px var(--space-2); border-radius: var(--radius-pill); background: var(--td-akzent-flaeche); color: var(--td-akzent); font-size: var(--fs-12); font-weight: var(--fw-medium); } :is(#teamDashboardView, #tdSeitenleiste) .td-dc-hinweis .td-sym { width: 14px; height: 14px; } :is(#teamDashboardView, #tdSeitenleiste) .td-dc-beantwortet { box-shadow: inset 0 0 0 1px var(--td-akzent-rand); } :is(#teamDashboardView, #tdSeitenleiste) .td-dc-link { display: inline-flex; align-items: center; gap: var(--space-1); width: fit-content; color: var(--text-2); font-size: var(--fs-12); text-decoration: none; border-radius: var(--radius-sm); } :is(#teamDashboardView, #tdSeitenleiste) .td-dc-link:hover { color: var(--text-1); text-decoration: underline; } :is(#teamDashboardView, #tdSeitenleiste) .td-dc-link:focus-visible { outline: none; box-shadow: var(--focus-ring); } :is(#teamDashboardView, #tdSeitenleiste) .td-dc-link .td-sym { width: 14px; height: 14px; } :is(#teamDashboardView, #tdSeitenleiste) .td-dc-freigaben h4 { margin: 0; } :is(#teamDashboardView, #tdSeitenleiste) .td-dc-freigabe { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--td-akzent-hauch); box-shadow: inset 0 0 0 1px var(--td-akzent-rand); } :is(#teamDashboardView, #tdSeitenleiste) .td-dc-titel { overflow-wrap: anywhere; } :is(#teamDashboardView, #tdSeitenleiste) .td-dc-zitat { margin: 0; padding: var(--space-2) var(--space-3); border-left: 3px solid var(--td-akzent-rand); border-radius: var(--radius-sm); background: var(--td-fuellung); color: var(--text-1); font-size: var(--fs-13); white-space: pre-line; overflow-wrap: anywhere; } :is(#teamDashboardView, #tdSeitenleiste) .td-dc-rueck { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--td-fuellung); font-size: var(--fs-13); } :is(#teamDashboardView, #tdSeitenleiste) .td-dc-zuletzt { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; padding: var(--space-2) 0 0; list-style: none; border-top: 1px solid var(--border-1); } :is(#teamDashboardView, #tdSeitenleiste) .td-dc-zuletzt li { display: flex; align-items: center; gap: var(--space-2); min-width: 0; } :is(#teamDashboardView, #tdSeitenleiste) .td-dc-zuletzt li > .td-klein:first-of-type { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Pin (27.10.2026): quiet until pinned, then a filled pin in the warning orange; „Pinned“ counts in the same orange. */ :is(#teamDashboardView, #tdSeitenleiste) .td-dc-pin { width: 30px; height: 30px; } :is(#teamDashboardView, #tdSeitenleiste) .td-dc-pin.td-leise:hover { color: var(--text-1); } :is(#teamDashboardView, #tdSeitenleiste) .td-dc-pin.td-dc-pin-an, :is(#teamDashboardView, #tdSeitenleiste) .td-dc-pin.td-dc-pin-an:hover { color: var(--w3-warnung, var(--warning)); } :is(#teamDashboardView, #tdSeitenleiste) .td-dc-pin.td-dc-pin-an .td-sym path:first-child { fill: currentColor; } :is(#teamDashboardView, #tdSeitenleiste) .td-segment button.td-dc-pinned { display: inline-flex; align-items: center; gap: var(--space-1); } :is(#teamDashboardView, #tdSeitenleiste) .td-dc-pin-zahl { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: var(--radius-pill); background: var(--warning-soft); color: var(--w3-warnung, var(--warning)); font-size: var(--fs-11); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; } :is(#teamDashboardView, #tdSeitenleiste) .td-dc-status { flex: none; color: var(--text-3); } :is(#teamDashboardView, #tdSeitenleiste) .td-status-punkt.td-dc-punkt-warnung { background: var(--w3-warnung, var(--warning)); } @media (max-width: 600px) { :is(#teamDashboardView, #tdSeitenleiste) .td-dc-zeile .td-aktionen { flex-basis: 100%; } } /* ── Pass a task on (25.10.2026): inline form with the catalogue's searchable dropdown (Dropdown/searchable) ── */ :is(#teamDashboardView, #tdSeitenleiste) .td-aufgabe > .td-aktionen { flex-wrap: wrap; } :is(#teamDashboardView, #tdSeitenleiste) .td-dd { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; } :is(#teamDashboardView, #tdSeitenleiste) .td-dd-knopf { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: 100%; min-height: 38px; padding: 0 var(--space-3); border: 1px solid var(--input-border, var(--border-2)); border-radius: var(--radius-md); background: var(--input-bg, var(--td-fuellung)); color: var(--text-1); font: inherit; font-size: var(--fs-14); text-align: left; cursor: pointer; } :is(#teamDashboardView, #tdSeitenleiste) .td-dd-knopf:hover { border-color: var(--border-3); } :is(#teamDashboardView, #tdSeitenleiste) .td-dd-knopf:focus-visible { outline: none; border-color: var(--td-akzent-rand); box-shadow: var(--input-focus-ring, var(--focus-ring)); } :is(#teamDashboardView, #tdSeitenleiste) .td-dd-knopf[aria-expanded="true"] > .td-sym { transform: rotate(180deg); } :is(#teamDashboardView, #tdSeitenleiste) .td-dd-knopf > .td-sym { color: var(--text-3); transition: transform var(--t-fast, .12s); } :is(#teamDashboardView, #tdSeitenleiste) .td-dd-wert { display: flex; align-items: center; gap: var(--space-2); min-width: 0; } :is(#teamDashboardView, #tdSeitenleiste) .td-dd-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :is(#teamDashboardView, #tdSeitenleiste) .td-dd-platzhalter { color: var(--input-placeholder, var(--text-3)); } :is(#teamDashboardView, #tdSeitenleiste) .td-dd-panel { display: flex; flex-direction: column; padding: var(--space-2) 0; border-radius: var(--radius-lg); background: var(--w3-flaeche, var(--surface-2)); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--border-2); } :is(#teamDashboardView, #tdSeitenleiste) .td-dd-panel[hidden] { display: none; } :is(#teamDashboardView, #tdSeitenleiste) .td-dd-suchfeld { position: relative; padding: 0 var(--space-2); } :is(#teamDashboardView, #tdSeitenleiste) .td-dd-lupe { position: absolute; left: calc(var(--space-2) + 10px); top: 50%; width: 14px; height: 14px; transform: translateY(-50%); color: var(--text-3); pointer-events: none; } :is(#teamDashboardView, #tdSeitenleiste) .td-dd-suche { min-height: 34px; padding-left: 32px; font-size: var(--fs-13); } :is(#teamDashboardView, #tdSeitenleiste) .td-dd-trenner { height: 1px; margin: var(--space-2) var(--space-2) var(--space-1); background: var(--border-1); } :is(#teamDashboardView, #tdSeitenleiste) .td-dd-liste { max-height: 240px; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--space-1); } :is(#teamDashboardView, #tdSeitenleiste) .td-dd-option { display: flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: 0 var(--space-3); border-radius: var(--radius-sm); color: var(--text-1); font-size: var(--fs-13); font-weight: var(--fw-medium); cursor: pointer; } :is(#teamDashboardView, #tdSeitenleiste) .td-dd-option:hover, :is(#teamDashboardView, #tdSeitenleiste) .td-dd-option.td-dd-aktiv { background: var(--td-fuellung-stark); } :is(#teamDashboardView, #tdSeitenleiste) .td-dd-option[aria-selected="true"] { color: var(--td-akzent); } :is(#teamDashboardView, #tdSeitenleiste) .td-dd-option .td-dd-name { flex: 1 1 auto; } :is(#teamDashboardView, #tdSeitenleiste) .td-dd-meta { flex: none; color: var(--text-3); font-size: var(--fs-11); font-weight: var(--fw-regular); } :is(#teamDashboardView, #tdSeitenleiste) .td-dd-treffer { background: none; color: var(--td-akzent); font-weight: var(--fw-bold); } :is(#teamDashboardView, #tdSeitenleiste) .td-dd-leer { padding: var(--space-4) var(--space-3); color: var(--text-3); font-size: var(--fs-13); text-align: center; } @media (prefers-reduced-motion: reduce) { :is(#teamDashboardView, #tdSeitenleiste) .td-dd-knopf > .td-sym { transition: none; } } /* Passed on (25.10.2026): hint for the new assignee, „Antwort geht an“ for the giver. */ :is(#teamDashboardView, #tdSeitenleiste) .td-weitergabe-hinweis { display: flex; flex-direction: column; gap: var(--space-1); } :is(#teamDashboardView, #tdSeitenleiste) .td-weitergabe-hinweis > .td-klein { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--text-2); } :is(#teamDashboardView, #tdSeitenleiste) .td-weitergabe-hinweis .td-sym { width: 13px; height: 13px; color: var(--td-akzent); } :is(#teamDashboardView, #tdSeitenleiste) .td-weitergabe-hinweis strong, :is(#teamDashboardView, #tdSeitenleiste) .td-antwort-an strong { color: var(--text-1); font-weight: var(--fw-semibold); } :is(#teamDashboardView, #tdSeitenleiste) .td-antwort-an { margin: 0; color: var(--text-2); overflow-wrap: anywhere; } :is(#teamDashboardView, #tdSeitenleiste) .td-block { display: block; margin-top: 2px; } /* Giver's view: the assignee's account is gone (review round 2, 25.10.2026, teamDashboard.js stellvertretend). */ :is(#teamDashboardView, #tdSeitenleiste) .td-bearbeiter-weg { margin: 0; color: var(--text-2); } :is(#teamDashboardView, #tdSeitenleiste) .td-bearbeiter-weg > strong { color: var(--w3-warnung, var(--warning)); font-weight: var(--fw-medium); } /* Open team invitations on the button „Teams“ (26.10.2026, teamDashboard.js teamsKnopf). */ :is(#teamDashboardView, #tdSeitenleiste) .td-knopf-zahl { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: var(--space-1); border-radius: 999px; background: var(--primary-bg, var(--accent)); color: var(--primary-text, var(--text-inv)); font-size: var(--fs-11); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; line-height: 1; } :is(#teamDashboardView, #tdSeitenleiste) .td-knopf-zahl[hidden] { display: none; } /* ── Review and status updates (28.10.2026, SPEC team-bugreport-review „Frontend F2“, mockup scene 3) ── */ :is(#teamDashboardView, #tdSeitenleiste) .td-st-punkt { display: inline-block; position: relative; flex: none; width: 10px; height: 10px; border-radius: var(--radius-pill); box-sizing: border-box; } :is(#teamDashboardView, #tdSeitenleiste) .td-st-neu { background: var(--st-neu); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-neu) 12%, transparent); } :is(#teamDashboardView, #tdSeitenleiste) .td-st-in_arbeit { background: var(--st-arbeit); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-arbeit) 18%, transparent); } :is(#teamDashboardView, #tdSeitenleiste) .td-st-abgelehnt { background: var(--st-abgelehnt); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-abgelehnt) 16%, transparent); } :is(#teamDashboardView, #tdSeitenleiste) .td-st-review { border: 2px solid var(--st-erledigt); background: transparent; } :is(#teamDashboardView, #tdSeitenleiste) .td-st-erledigt { background: var(--st-erledigt); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-erledigt) 16%, transparent); } :is(#teamDashboardView, #tdSeitenleiste) .td-st-nacharbeit::after { content: ""; position: absolute; right: -4px; top: -4px; width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--st-abgelehnt); box-shadow: 0 0 0 2px var(--td-karte); } /* Task card head: „Aufgaben | Statusupdates“, unread count in orange. */ :is(#teamDashboardView, #tdSeitenleiste) .td-aufg-reiter { flex-wrap: nowrap; } :is(#teamDashboardView, #tdSeitenleiste) .td-aufg-reiter button { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } :is(#teamDashboardView, #tdSeitenleiste) .td-su-anzahl, :is(#teamDashboardView, #tdSeitenleiste) .td-su-zahl { font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--fs-12); color: var(--text-3); font-variant-numeric: tabular-nums; } :is(#teamDashboardView, #tdSeitenleiste) .td-su-zahl { color: var(--st-arbeit); font-weight: var(--fw-semibold); } :is(#teamDashboardView, #tdSeitenleiste) .td-su-zahl[hidden] { display: none; } /* Status updates list. */ :is(#teamDashboardView, #tdSeitenleiste) .td-su { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; } :is(#teamDashboardView, #tdSeitenleiste) .td-su-kopf { display: flex; align-items: center; gap: var(--space-2); justify-content: space-between; flex-wrap: wrap; color: var(--text-3); } :is(#teamDashboardView, #tdSeitenleiste) .td-su-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); } :is(#teamDashboardView, #tdSeitenleiste) .td-su-zeile { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: start; padding: var(--space-3); border-radius: var(--radius-md); } :is(#teamDashboardView, #tdSeitenleiste) .td-su-zeile.td-su-neu { background: var(--td-fuellung); } :is(#teamDashboardView, #tdSeitenleiste) .td-su-zeile.td-su-neu::before { content: ""; position: absolute; left: -2px; top: calc(var(--space-3) + 8px); width: 5px; height: 5px; border-radius: var(--radius-pill); background: var(--td-akzent); } :is(#teamDashboardView, #tdSeitenleiste) .td-su-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } :is(#teamDashboardView, #tdSeitenleiste) .td-su-was { margin: 0; font-size: var(--fs-13); color: var(--text-1); overflow-wrap: anywhere; } :is(#teamDashboardView, #tdSeitenleiste) .td-su-ziel { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: var(--space-2); min-width: 0; max-width: 100%; cursor: pointer; font-size: var(--fs-12); color: var(--text-2); border-radius: var(--radius-sm); } :is(#teamDashboardView, #tdSeitenleiste) .td-su-ziel:hover .td-su-titel { color: var(--text-1); text-decoration: underline; } :is(#teamDashboardView, #tdSeitenleiste) .td-su-ziel:focus-visible { box-shadow: var(--focus-ring); } :is(#teamDashboardView, #tdSeitenleiste) .td-su-titel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } :is(#teamDashboardView, #tdSeitenleiste) .td-su-zeit { white-space: nowrap; color: var(--text-3); } :is(#teamDashboardView, #tdSeitenleiste) .td-su-knoepfe, :is(#teamDashboardView, #tdSeitenleiste) .td-review-knoepfe { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); } :is(#teamDashboardView, #tdSeitenleiste) .td-su-form { margin-top: var(--space-2); } :is(#teamDashboardView, #tdSeitenleiste) .td-knopf-gruen { background: color-mix(in srgb, var(--st-erledigt) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st-erledigt) 50%, transparent); color: var(--st-erledigt); font-weight: var(--fw-semibold); } :is(#teamDashboardView, #tdSeitenleiste) .td-knopf-gruen:hover { background: color-mix(in srgb, var(--st-erledigt) 24%, transparent); } /* Review line of a task, history in its details. */ :is(#teamDashboardView, #tdSeitenleiste) .td-review { display: flex; flex-direction: column; gap: 2px; } :is(#teamDashboardView, #tdSeitenleiste) .td-review-zeile { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-1) 0 0; flex-wrap: wrap; color: var(--text-2); } :is(#teamDashboardView, #tdSeitenleiste) .td-review-nacharbeit strong { color: var(--st-arbeit); } :is(#teamDashboardView, #tdSeitenleiste) .td-review-hinweis { color: var(--text-3); } :is(#teamDashboardView, #tdSeitenleiste) .td-verlauf-box summary { cursor: pointer; font-size: var(--fs-12); color: var(--text-2); } :is(#teamDashboardView, #tdSeitenleiste) .td-verlauf { list-style: none; margin: var(--space-2) 0 0; padding: 0 0 0 var(--space-3); border-left: 1px solid var(--border-2); display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--fs-12); color: var(--text-2); } :is(#teamDashboardView, #tdSeitenleiste) .td-verlauf li { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); } :is(#teamDashboardView, #tdSeitenleiste) .td-verlauf-wer { color: var(--text-1); font-weight: var(--fw-medium); } /* New task: option „Review“ (explanation on hover / for screen readers) and „Zum Review freigeben“. */ :is(#teamDashboardView, #tdSeitenleiste) .td-review-label { display: inline-flex; align-items: center; gap: var(--space-2); width: fit-content; cursor: pointer; font-weight: var(--fw-medium); } :is(#teamDashboardView, #tdSeitenleiste) .td-review-haken { accent-color: var(--check, var(--td-akzent)); width: 16px; height: 16px; margin: 0; } :is(#teamDashboardView, #tdSeitenleiste) .td-review-info { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--border-3); color: var(--text-3); font-size: var(--fs-11); font-style: italic; } :is(#teamDashboardView, #tdSeitenleiste) .td-review-erkl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } :is(#teamDashboardView, #tdSeitenleiste) .td-review-feld { position: relative; } :is(#teamDashboardView, #tdSeitenleiste) .td-review-wahl { display: flex; flex-direction: column; gap: var(--space-2); } :is(#teamDashboardView, #tdSeitenleiste) .td-review-wahl:empty { display: none; } :is(#teamDashboardView, #tdSeitenleiste) .td-su-weg { cursor: default; text-decoration: line-through; color: var(--text-3); }