/* Team app ▸ Dashboard: layout and right rail (25.10.2026, team/teamDashboard.js ordneRaster, passeHoeheAn, richteFlaechen, „Seitenleiste“). User: „teile das dashboard besser auf, mittig viel freier platz und man soll nicht scrollen müssen, alles direkt sichtbar“ and „notizen auch als ausklappbare leiste rechts“. Desktop and tablet rules only (classes the script sets, min-width queries); phone rules stay in team-dashboard.css. Tokens only; light and dark follow the tokens. Cards in the rail use the dashboard styles (scoped to #tdSeitenleiste as well). */ :root { --tsl-breite: 56px; --tsl-panel: 380px; } /* ── Page width: at most ~2200 px, centred (2560 × 1440 must not stretch the cards) ── */ #teamDashboardView .td-mount { max-width: 2200px; margin-inline: auto; } /* ── Three columns (effective width ≥ 1280 px, layout „drei“): tall widgets outside, small ones in the middle ── */ #teamDashboardView .td-spalten.td-spalten-drei[data-muster="gross-klein-gross"] { grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 3fr); } #teamDashboardView .td-spalten.td-spalten-drei[data-muster="gross-klein"] { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); } #teamDashboardView .td-spalten.td-spalten-drei[data-muster="gross-gross"] { grid-template-columns: minmax(0, 4fr) minmax(0, 3fr); } #teamDashboardView .td-spalten.td-spalten-drei[data-muster="klein-klein"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } #teamDashboardView .td-spalten.td-spalten-drei:is([data-muster="gross"], [data-muster="klein"]) { grid-template-columns: minmax(0, 1fr); } /* ── Two columns (761–1279 px, layout „zwei“): Aufgaben | Termine, the small cards in a row of two below ── */ #teamDashboardView .td-spalten.td-spalten-zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); } #teamDashboardView .td-spalten.td-spalten-zwei.td-spalten-eins { grid-template-columns: minmax(0, 1fr); } #teamDashboardView .td-klein-reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); align-items: start; } /* ── Head in one row (≥ 1280 px): date, greeting, chips, then the buttons on the right ── */ @media (min-width: 1280px) { #teamDashboardView .td-kopf { align-items: center; flex-wrap: nowrap; } #teamDashboardView .td-kopf-text { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: var(--space-3); row-gap: var(--space-1); } #teamDashboardView .td-datum { white-space: nowrap; } #teamDashboardView .td-gruss { font-size: var(--fs-20); white-space: nowrap; } #teamDashboardView .td-chips { margin-top: 0; } #teamDashboardView .td-kopf-knoepfe { flex: none; flex-wrap: nowrap; } } /* ── Fitted (≥ 1280 × 760, `td-passend`): the grid ends at the window's bottom edge (height from passeHoeheAn), each column is a stack, lists scroll inside their cards. Ask FRF's button keeps its own strip in the last column. ── */ #teamDashboardView .td-mount.td-mount-passend { padding-top: var(--space-4); padding-bottom: var(--space-4); gap: var(--space-4); } #teamDashboardView .td-raster.td-passend { min-height: 0; } #teamDashboardView .td-passend > .td-spalten { height: 100%; grid-template-rows: minmax(0, 1fr); align-items: stretch; } #teamDashboardView .td-passend .td-spalte { min-height: 0; } #teamDashboardView .td-passend .td-spalte[data-rolle="gross"] > .td-karte { flex: 1 1 0; min-height: 0; } /* A message appears over the grid instead of pushing it down (the page must not grow). */ #teamDashboardView .td-mount-passend > .td-meldung { position: absolute; top: var(--space-3); left: 50%; z-index: 3; transform: translateX(-50%); width: max-content; max-width: min(560px, 90%); background: linear-gradient(var(--td-akzent-hauch), var(--td-akzent-hauch)), var(--w3-flaeche, var(--surface-2)); box-shadow: inset 0 0 0 1px var(--td-akzent-rand), var(--shadow-sm); } html.td-passend-an body:has(> .akf-fab:not([hidden])) { padding-bottom: 0; } html.td-passend-an:has(body > .akf-fab:not([hidden])) #teamDashboardView .td-passend .td-spalte:last-child { padding-bottom: calc(56px + var(--space-6)); } /* Card parts keep their height; only the scroll areas (teamDashboard.js FLAECHEN) give way, never below their minimum `--td-min` (or their content when that is less). teamDashboard.js pruefePlatz turns these into inline minimums of the areas and the cards; when the columns cannot hold them, the page scrolls instead (never a clip). */ :is(#teamDashboardView, #tdSeitenleiste) .td-passend .td-karte > * { flex-shrink: 0; } :is(#teamDashboardView, #tdSeitenleiste) .td-passend .td-flaeche { min-height: 0; overflow-y: auto; overscroll-behavior: contain; /* Room for focus rings and the cards' hover lift inside the clipped area. */ padding: 3px 6px 3px 2px; margin: -3px -6px -3px -2px; scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb, var(--border-3)) transparent; } :is(#teamDashboardView, #tdSeitenleiste) .td-passend .td-flaeche > * { flex-shrink: 0; } :is(#teamDashboardView, #tdSeitenleiste) .td-passend .td-flaeche::-webkit-scrollbar { width: 6px; } :is(#teamDashboardView, #tdSeitenleiste) .td-passend .td-flaeche::-webkit-scrollbar-thumb { border-radius: var(--radius-pill); background: var(--scrollbar-thumb, var(--border-3)); } :is(#teamDashboardView, #tdSeitenleiste) .td-passend .td-flaeche:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-md); } :is(#teamDashboardView, #tdSeitenleiste) .td-passend .td-flaeche.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); } /* Aufgaben: new tasks and questions back scroll as one area that fills the card (at least three tasks); the running tasks (at least one), „given by me“ and the numbers row stay at the bottom. */ :is(#teamDashboardView, #tdSeitenleiste) .td-aufg-rumpf { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; } :is(#teamDashboardView, #tdSeitenleiste) .td-passend .td-karte-aufgaben .td-aufg-rumpf { flex: 1 1 0; --td-min: 360px; } /* Inside a scroll area the six-row list („Neue Aufgaben“, „Rückfragen“) is no scroll container of its own (user 26.10.2026: „aufgabenliste lässt sich nicht scrollen“). It had no height limit here, so it never scrolled, but its `overscroll-behavior: contain` kept the wheel and touch from reaching the area around it: only the headings scrolled. */ :is(#teamDashboardView, #tdSeitenleiste) .td-passend .td-flaeche .td-liste-scroll { overflow: visible; overscroll-behavior: auto; -webkit-mask-image: none; mask-image: none; } :is(#teamDashboardView, #tdSeitenleiste) .td-passend .td-aufg-teil > .td-liste { max-height: 20vh; --td-min: 96px; } :is(#teamDashboardView, #tdSeitenleiste) .td-passend .td-vergeben.td-aufg-teil[open] > .td-liste { overflow-y: auto; } /* Termine & Calls: the next call stays, the agenda (at least three entries) scrolls. */ :is(#teamDashboardView, #tdSeitenleiste) .td-passend .td-karte-termine .td-agenda { flex: 1 1 0; --td-min: 170px; } /* Small column: Notizen takes what is left (at least its first note, up to 170 px), Discord (one whole message) and Links (two rows) keep their height up to a share of the column and scroll inside beyond it. */ #teamDashboardView .td-passend .td-spalte > .td-karte { flex: 0 1 auto; } #teamDashboardView .td-passend .td-spalte[data-rolle="klein"] { gap: var(--space-4); } /* Small cards a bit tighter in the fitted layout; the notes' hint gives its line to the notes (it repeats in the composer's placeholder). */ #teamDashboardView .td-passend .td-spalte[data-rolle="klein"] > .td-karte:not(.td-karte-kompakt) { padding: var(--space-4); gap: var(--space-3); } #teamDashboardView .td-passend .td-spalte[data-rolle="klein"] .td-karte-kopf { padding-bottom: var(--space-2); } #teamDashboardView .td-passend .td-karte-notizen > .td-erklaerung { display: none; } :is(#teamDashboardView, #tdSeitenleiste) .td-passend :is(.td-spalte, .tsl-rumpf) > .td-karte.td-karte-notizen { flex: 1 1 0; } :is(#teamDashboardView, #tdSeitenleiste) .td-passend .td-karte-notizen .td-notizen { flex: 1 1 0; align-content: start; --td-min-anzahl: 1; --td-min: 170px; } #teamDashboardView .td-passend .td-karte-discord { max-height: 30%; } #teamDashboardView .td-passend .td-karte-discord .td-liste { flex: 0 1 auto; --td-min-anzahl: 1; } #teamDashboardView .td-passend .td-karte-links { max-height: 28%; } #teamDashboardView .td-passend .td-karte-links .td-links-rumpf { flex: 0 1 auto; --td-min: 128px; } #teamDashboardView .td-passend .td-spalte > .td-karte.td-karte-kompakt { flex: none; } #teamDashboardView .td-passend .td-spalte > .td-karte.td-karte-notizen.td-karte-leer { flex: none; } /* ── Compact cards: empty Discord and Links, Benachrichtigungen (one line under the head, no inner box) ── */ :is(#teamDashboardView, #tdSeitenleiste) .td-links-rumpf { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; } :is(#teamDashboardView, #tdSeitenleiste) .td-karte.td-karte-kompakt { padding: var(--space-3) var(--space-4); gap: var(--space-2); } :is(#teamDashboardView, #tdSeitenleiste) .td-karte-kompakt .td-karte-kopf { padding-bottom: var(--space-2); } :is(#teamDashboardView, #tdSeitenleiste) .td-leer-zeile { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--text-2); font-size: var(--fs-13); } :is(#teamDashboardView, #tdSeitenleiste) .td-leer-zeile .td-sym { color: var(--text-3); } :is(#teamDashboardView, #tdSeitenleiste) .td-telegram-text { min-width: 0; } :is(#teamDashboardView, #tdSeitenleiste) .td-nicht-verbunden .td-knopf { margin-left: auto; } :is(#teamDashboardView, #tdSeitenleiste) .td-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; } /* „Dashboard anpassen“ (26.10.2026, user: „schalter immer in einer reihe … immer nur 2 schalter einmal für Dashboard und einmal Seitenleiste“): one row per widget, the two switches in fixed columns under their heads, the order buttons last. Head, list and rows share the table's columns (subgrid), so every switch lines up; on phones the columns narrow and long names break, still one row per widget. */ :is(#teamDashboardView, #tdSeitenleiste) .td-anpassen-tabelle { --td-ort-spalte: 96px; display: grid; grid-template-columns: minmax(0, 1fr) var(--td-ort-spalte) var(--td-ort-spalte) max-content; column-gap: var(--space-3); row-gap: var(--space-1); } :is(#teamDashboardView, #tdSeitenleiste) .td-anpassen-tabelle > :is(.td-anpassen-kopf, .td-anpassen) { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; } :is(#teamDashboardView, #tdSeitenleiste) .td-anpassen-kopf { align-items: end; padding: 0 var(--space-3); font-size: var(--fs-12); font-weight: var(--fw-semibold); color: var(--text-3); line-height: 1.3; } :is(#teamDashboardView, #tdSeitenleiste) .td-anpassen-kopf > :is(:nth-child(2), :nth-child(3)) { text-align: center; } :is(#teamDashboardView, #tdSeitenleiste) .td-anpassen-name { min-width: 0; overflow-wrap: anywhere; hyphens: auto; } :is(#teamDashboardView, #tdSeitenleiste) .td-anpassen-aus .td-anpassen-name { color: var(--text-3); } :is(#teamDashboardView, #tdSeitenleiste) .td-anpassen-hinweis { margin-top: var(--space-1); } /* The whole cell is the switch's target (at least 36 px high), the switch sits in its middle. */ :is(#teamDashboardView, #tdSeitenleiste) .td-anpassen-ort { justify-self: stretch; justify-content: center; min-height: 36px; border-radius: var(--radius-md); } :is(#teamDashboardView, #tdSeitenleiste) .td-anpassen-ort:has(input:disabled) { cursor: not-allowed; opacity: .45; } @media (max-width: 480px) { :is(#teamDashboardView, #tdSeitenleiste) .td-anpassen-tabelle { --td-ort-spalte: 68px; column-gap: var(--space-2); } /* The heads may reach into the column gaps (web3 sets --fs-11 to 12 px), never onto the next head. */ :is(#teamDashboardView, #tdSeitenleiste) .td-anpassen-kopf { padding: 0 var(--space-2); font-size: var(--fs-11); white-space: nowrap; } :is(#teamDashboardView, #tdSeitenleiste) .td-anpassen-tabelle .td-anpassen-zeile { padding: var(--space-1) var(--space-2); font-size: var(--fs-13); } :is(#teamDashboardView, #tdSeitenleiste) .td-anpassen-tabelle .td-anpassen-knoepfe .td-symbol-knopf { width: 28px; height: 28px; } } /* ── Right rail „Seitenleiste“ (teamDashboard.js leisteZeichnen): mirror of the shortcut rail on the left (shortcut-leiste.css): same surface, 56 px, buttons 40 × 40. The panel slides in over the content (light shadow, no dimming); pinned, the page makes room. Ask FRF's button moves left by the rail (and the open panel). ── */ .tsl { --tsl-karte: var(--w3-karte, var(--surface-1)); --tsl-glanz: var(--w3-glanz, none); --tsl-kante: var(--w3-kante, inset 0 0 0 1px var(--border-1)); --tsl-text: var(--w3-text, var(--text-1)); --tsl-text-2: var(--w3-text-2, var(--text-2)); --tsl-fuellung-stark: var(--w3-fuellung-stark, var(--surface-3)); --tsl-akzent: var(--w3-akzent, var(--text-1)); --tsl-akzent-flaeche: var(--w3-akzent-flaeche, var(--surface-3)); --tsl-akzent-rand: var(--w3-akzent-rand, var(--border-3)); --tsl-akzent-text: var(--w3-akzent-text, var(--text-inv)); --tsl-ring: var(--w3-ring, var(--focus-ring)); --tsl-radius: var(--w3-radius-karte, var(--radius-lg)); --tsl-radius-feld: var(--w3-radius-feld, var(--radius-pill)); --tsl-dauer: .18s; font-family: var(--frf-font); } .tsl[hidden] { display: none; } .tsl-schiene { position: fixed; top: 0; right: 0; bottom: 0; /* Same layer as the shortcut rail: above the bar, below drawers and modals. */ z-index: calc(var(--z-drawer, 150) - 10); box-sizing: border-box; width: var(--tsl-breite); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: calc(var(--space-3) + 20px) 8px var(--space-3); border-radius: var(--tsl-radius) 0 0 var(--tsl-radius); background: var(--tsl-glanz), var(--tsl-karte); box-shadow: var(--tsl-kante); } .tsl-knopf { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--tsl-radius-feld); background: transparent; color: var(--tsl-text-2); cursor: pointer; transition: background var(--t-fast, .12s), color var(--t-fast, .12s); } .tsl-knopf:hover { background: var(--tsl-fuellung-stark); color: var(--tsl-text); } .tsl-knopf:focus-visible { outline: none; box-shadow: var(--tsl-ring); color: var(--tsl-text); } .tsl-knopf[aria-expanded="true"] { background: var(--tsl-akzent-flaeche); box-shadow: inset 0 0 0 1px var(--tsl-akzent-rand); color: var(--tsl-akzent); } .tsl-knopf[aria-expanded="true"]:focus-visible { box-shadow: inset 0 0 0 1px var(--tsl-akzent-rand), var(--tsl-ring); } #tdSeitenleiste .tsl-sym { width: 20px; height: 20px; stroke-width: 1.8; } .tsl-zahl { position: absolute; top: 1px; right: -1px; box-sizing: border-box; min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--radius-pill); background: var(--tsl-akzent); color: var(--tsl-akzent-text); font-size: var(--fs-11); font-weight: var(--fw-semibold); line-height: 17px; text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--tsl-karte); } .tsl-panel { position: fixed; top: 0; bottom: 0; right: var(--tsl-breite); z-index: calc(var(--z-drawer, 150) - 10); box-sizing: border-box; width: var(--tsl-panel); display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5); border-radius: var(--tsl-radius) 0 0 var(--tsl-radius); background: var(--tsl-glanz), var(--w3-flaeche, var(--surface-1)); box-shadow: var(--tsl-kante), var(--shadow-sm); color: var(--text-1); font-size: var(--fs-14); transition: transform var(--tsl-dauer) ease-out, opacity var(--tsl-dauer) ease-out; } .tsl-panel[hidden] { display: none; } @starting-style { .tsl-panel { transform: translateX(24px); opacity: 0; } } /* Pinned: part of the page, no shadow over the content. */ .tsl[data-art="fest"] .tsl-panel { box-shadow: var(--tsl-kante); border-radius: 0; } .tsl-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 34px; } .tsl-kopf-knoepfe { display: flex; gap: 2px; margin-left: auto; } #tdSeitenleiste .tsl-kopf .td-symbol-knopf.td-leise:hover { color: var(--text-1); } #tdSeitenleiste .tsl-pin[aria-pressed="true"] { color: var(--td-akzent); background: var(--td-akzent-flaeche); } #tdSeitenleiste .tsl-pin[aria-disabled="true"] { opacity: .45; cursor: default; } #tdSeitenleiste .tsl-rumpf { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; } /* The card sits flush in the panel (the panel is the surface). */ #tdSeitenleiste .tsl-rumpf > .td-karte { flex: 1 1 0; min-height: 0; padding: 0; background: none; box-shadow: none; border-radius: 0; } #tdSeitenleiste .tsl-rumpf .td-notizen { grid-template-columns: minmax(0, 1fr); } /* Page: the rail keeps its margin (the page never reflows under it); a pinned panel takes its width too. */ @media (min-width: 761px) { html.tsl-an body:not(.akf-offen) { margin-right: var(--tsl-breite); } html.tsl-angeheftet body:not(.akf-offen) { margin-right: calc(var(--tsl-breite) + var(--tsl-panel)); } } /* Ask FRF's floating button moves left of the rail and of the open panel (its own code stays untouched). */ html.tsl-an .akf-fab { right: calc(var(--space-6) + var(--tsl-breite)); } html.tsl-panel-offen .akf-fab { right: calc(var(--space-6) + var(--tsl-breite) + var(--tsl-panel)); } /* While Ask FRF's own panel is open on the right, the rail steps back under it. */ body.akf-offen .tsl { display: none; } @media (prefers-reduced-motion: reduce) { .tsl-panel { transition: none; } @starting-style { .tsl-panel { transform: none; opacity: 1; } } .tsl-knopf { transition: none; } } /* ── Ziehgriffe (25.10.2026, teamDashboard.js setzeGriffe): column widths and card heights. The handle sits in the gap (12 px hit area, a thin line on hover/focus/drag); cards with a chosen height (`data-hoehe`) take it in the fitted layout, their scroll area fills them. ── */ #teamDashboardView .td-spalten[data-muster] > .td-spalte { position: relative; } #teamDashboardView .td-griff { position: absolute; z-index: 2; touch-action: none; border-radius: var(--radius-pill); } #teamDashboardView .td-griff::after { content: ''; position: absolute; border-radius: var(--radius-pill); background: var(--td-akzent, var(--text-2)); opacity: 0; transition: opacity var(--t-fast, .12s); } #teamDashboardView .td-griff:is(:hover, .td-griff-aktiv)::after { opacity: .55; } #teamDashboardView .td-griff:focus-visible { outline: none; } #teamDashboardView .td-griff:focus-visible::after { opacity: 1; box-shadow: var(--focus-ring); } #teamDashboardView .td-griff-spalte { top: 0; bottom: 0; right: calc(var(--space-5) / -2 - 6px); width: 12px; cursor: col-resize; } #teamDashboardView .td-griff-spalte::after { top: 0; bottom: 0; left: 5px; width: 2px; } /* Card handles sit between two cards of the small column and take no room (the column's gap stays as it was). */ #teamDashboardView .td-griff-karte { position: relative; flex: none; height: 0; margin-block: calc(var(--space-4) / -2); cursor: row-resize; } #teamDashboardView .td-griff-karte::before { content: ''; position: absolute; left: 0; right: 0; top: -6px; height: 12px; } #teamDashboardView .td-griff-karte::after { left: 25%; right: 25%; top: -1px; height: 2px; } #teamDashboardView .td-raster:not(.td-passend) .td-griff-karte { display: none; } #teamDashboardView .td-passend .td-spalte > .td-karte[data-hoehe] { flex: 0 0 var(--td-hoehe); max-height: none; } #teamDashboardView .td-passend .td-karte[data-hoehe] .td-flaeche { flex: 1 1 0; } /* While dragging: no text selection, the resize cursor everywhere. */ html.td-zieht, html.td-zieht * { user-select: none; } html.td-zieht:has(.td-griff-spalte.td-griff-aktiv) * { cursor: col-resize !important; } html.td-zieht:has(.td-griff-karte.td-griff-aktiv) * { cursor: row-resize !important; } @media (hover: none) { /* Touch: the line stays faintly visible so the handle can be found. */ #teamDashboardView .td-griff::after { opacity: .25; } } @media (prefers-reduced-motion: reduce) { #teamDashboardView .td-griff::after { transition: none; } } :is(#teamDashboardView, #tdSeitenleiste, .td-dialog) .td-anpassen-groessen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); } /* ── Termine & Calls head (25.10.2026): view and „Öffnen“ as symbols, Google Kalender as a connect button (teamDashboard.js kalenderKnopf): green = connected and fetched, orange = a calendar failed. ── */ :is(#teamDashboardView, #tdSeitenleiste) .td-segment button.td-segment-sym { display: inline-flex; align-items: center; justify-content: center; width: 30px; padding: 0; } :is(#teamDashboardView, #tdSeitenleiste) .td-termine-knoepfe .td-segment button.td-segment-sym { width: 28px; } :is(#teamDashboardView, #tdSeitenleiste) .td-termine-knoepfe > .td-symbol-knopf { width: 30px; height: 30px; color: var(--text-2); } :is(#teamDashboardView, #tdSeitenleiste) .td-termine-knoepfe > .td-symbol-knopf:hover { color: var(--text-1); } :is(#teamDashboardView, #tdSeitenleiste) .td-termine-knoepfe > .td-kal-knopf.td-kal-an { background: color-mix(in srgb, var(--w3-positiv, var(--success)) 14%, transparent); color: var(--w3-positiv, var(--success)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--w3-positiv, var(--success)) 45%, transparent); } :is(#teamDashboardView, #tdSeitenleiste) .td-termine-knoepfe > .td-kal-knopf.td-kal-fehler { background: var(--warning-soft); color: var(--w3-warnung, var(--warning)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--w3-warnung, var(--warning)) 45%, transparent); } :is(#teamDashboardView, #tdSeitenleiste) .td-termine-knoepfe > .td-symbol-knopf:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* ── Rail panel width (teamDashboard.js leisteGriff): a separator at the panel's left edge; tabs as symbols when more than three widgets live in the rail. ── */ #tdSeitenleiste .tsl-griff { position: absolute; top: 0; bottom: 0; left: -6px; z-index: 2; width: 12px; cursor: col-resize; touch-action: none; } #tdSeitenleiste .tsl-griff::after { content: ''; position: absolute; top: var(--space-6); bottom: var(--space-6); left: 5px; width: 2px; border-radius: var(--radius-pill); background: var(--td-akzent, var(--text-2)); opacity: 0; transition: opacity var(--t-fast, .12s); } #tdSeitenleiste .tsl-griff:is(:hover, .td-griff-aktiv)::after { opacity: .55; } #tdSeitenleiste .tsl-griff:focus-visible { outline: none; } #tdSeitenleiste .tsl-griff:focus-visible::after { opacity: 1; box-shadow: var(--focus-ring); } html.td-zieht:has(.tsl-griff.td-griff-aktiv) * { cursor: col-resize !important; } @media (hover: none) { #tdSeitenleiste .tsl-griff::after { opacity: .25; } } @media (prefers-reduced-motion: reduce) { #tdSeitenleiste .tsl-griff::after { transition: none; } } /* A card shown twice: its inline forms only in the copy the person works in (teamDashboard.js markiereDoppelt). */ html[data-td-form-ort="raster"] #tdSeitenleiste .td-karte.td-doppelt .td-inline-form, html[data-td-form-ort="leiste"] #teamDashboardMount .td-karte.td-doppelt .td-inline-form { display: none; } /* ── Free layout (26.10.2026, rows since 27.10.2026; teamDashboard.js ordneFrei/richteFrei). Rows top to bottom, each a flex line of columns that wraps when its columns no longer keep their least width (Aufgaben/Termine 460 px, others 300 px); a column is a stack of cells, a cell holds one card. A card is as tall as its content; a cell with a fixed height (`td-passend`, style height) lets the card fill it and its lists scroll inside (the fitted rules of team-dashboard-layout.css apply inside the cell). The page scrolls. ── */ #teamDashboardView .td-fzeilen { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; } #teamDashboardView .td-fzeile { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-5); min-width: 0; } #teamDashboardView .td-fzeile > .td-spalte[data-rolle="frei"] { position: relative; flex: 1 1 0; min-width: min(300px, 100%); gap: var(--space-5); } #teamDashboardView .td-fzeile > .td-spalte[data-rolle="frei"][data-breit] { min-width: min(460px, 100%); } #teamDashboardView .td-zelle { position: relative; display: flex; flex-direction: column; min-width: 0; } #teamDashboardView .td-zelle > .td-karte { flex: 1 1 auto; min-width: 0; } /* A fixed height: the card fills the cell, its main list takes the room (Discord and Links too, not only a share). */ #teamDashboardView .td-zelle.td-passend > .td-karte { min-height: 0; max-height: none; } #teamDashboardView .td-zelle.td-passend :is(.td-karte-discord .td-liste, .td-links-rumpf) { flex: 1 1 0; } /* While dragging: a column or row the card left is not shown. */ #teamDashboardView .td-fzeile > .td-spalte[data-rolle="frei"]:not(.td-spalte-neu):not(:has(> .td-zelle)) { display: none; } #teamDashboardView .td-fzeilen > .td-fzeile:not(.td-fzeile-neu):not(:has(.td-zelle)) { display: none; } /* Drop zones: a new column in a row, a new row (the card sits in it as the preview). */ #teamDashboardView .td-spalte-neu { border-radius: var(--td-radius); box-shadow: 0 0 0 2px var(--td-akzent-rand); background: var(--td-akzent-hauch); } #teamDashboardView .td-fzeile-neu > .td-spalte-neu { flex: 1 1 100%; } /* Height handle on every card's bottom edge (in the gap below it); width handles between the columns of a row. */ #teamDashboardView .td-griff-hoehe { left: 0; right: 0; bottom: calc(var(--space-5) / -2 - 6px); height: 12px; cursor: row-resize; } #teamDashboardView .td-griff-hoehe::after { left: 25%; right: 25%; top: 5px; height: 2px; } html.td-zieht:has(.td-griff-hoehe.td-griff-aktiv) * { cursor: row-resize !important; } /* Arrange mode: cards outlined, contents calmer, the „Verschieben“ handle on the top edge, the size handles with knobs. */ #teamDashboardView .td-raster-bearbeiten .td-karte[data-widget] { position: relative; outline: 1px dashed var(--td-akzent-rand); outline-offset: 3px; } #teamDashboardView .td-raster-bearbeiten .td-karte[data-widget] > [inert] { opacity: .6; } #teamDashboardView .td-raster-bearbeiten > .td-fzeilen { padding-top: var(--space-3); } #teamDashboardView .td-verschieben { /* Left, not centred: the height handle of the card above has its knob in the middle of the gap. */ position: absolute; top: calc(var(--space-3) * -1 - 2px); left: var(--space-5); z-index: 3; display: inline-flex; align-items: center; gap: var(--space-1); height: 28px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-pill); background: var(--td-akzent-flaeche); box-shadow: inset 0 0 0 1px var(--td-akzent-rand), var(--shadow-sm); color: var(--td-akzent); font: inherit; font-size: var(--fs-12); font-weight: var(--fw-semibold); white-space: nowrap; cursor: grab; touch-action: none; } #teamDashboardView .td-verschieben .td-sym { width: 16px; height: 16px; } #teamDashboardView .td-verschieben:hover { background: var(--td-fuellung-stark); } #teamDashboardView .td-verschieben:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--td-akzent-rand), var(--focus-ring); } #teamDashboardView .td-karte.td-wird-verschoben { opacity: .45; outline-style: solid; } #teamDashboardView .td-raster-bearbeiten .td-griff-spalte::after { top: 50%; bottom: auto; left: 3px; width: 6px; height: 48px; transform: translateY(-50%); opacity: .85; background: var(--td-akzent-flaeche); box-shadow: inset 0 0 0 1px var(--td-akzent-rand); } #teamDashboardView .td-raster-bearbeiten .td-griff-hoehe::after { left: calc(50% - 24px); right: auto; top: 3px; width: 48px; height: 6px; opacity: .85; background: var(--td-akzent-flaeche); box-shadow: inset 0 0 0 1px var(--td-akzent-rand); } #teamDashboardView .td-raster-bearbeiten .td-griff:is(:hover, .td-griff-aktiv)::after { background: var(--td-akzent); opacity: 1; } html.td-verschiebt #teamDashboardView .td-griff { display: none; } html.td-zieht.td-verschiebt * { cursor: grabbing !important; } .td-geist { position: fixed; top: 0; left: 0; z-index: var(--z-tooltip, 1000); pointer-events: none; display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill); background: var(--w3-karte, var(--surface-2)); color: var(--w3-text, var(--text-1)); box-shadow: var(--w3-kante, inset 0 0 0 1px var(--border-2)), var(--shadow-md); font-family: var(--frf-font, inherit); font-size: var(--fs-13); font-weight: var(--fw-semibold); white-space: nowrap; } .td-geist .td-sym { width: 16px; height: 16px; } /* Hover handle in a card's head outside arrange mode (mouse only): appears while the pointer is on the card. */ #teamDashboardView .td-verschieben-hover { position: absolute; top: calc(var(--space-4) * -1 - 4px); left: 0; z-index: 3; display: none; align-items: center; justify-content: center; width: 44px; height: 20px; padding: 0; border: 0; border-radius: var(--radius-pill); background: var(--td-akzent-flaeche); box-shadow: inset 0 0 0 1px var(--td-akzent-rand); color: var(--td-akzent); cursor: grab; touch-action: none; opacity: 0; transition: opacity var(--t-fast, .12s); } #teamDashboardView .td-verschieben-hover .td-sym { width: 16px; height: 16px; transform: rotate(90deg); } @media (hover: hover) { #teamDashboardView .td-verschieben-hover { display: inline-flex; } #teamDashboardView .td-karte:hover > .td-karte-kopf > .td-verschieben-hover { opacity: 1; } } /* Arrange bar in the head (replaces the head's buttons; may wrap under the greeting). */ #teamDashboardView .td-kopf.td-kopf-bearbeiten { flex-wrap: wrap; } #teamDashboardView .td-bearbeiten-leiste { align-items: center; } #teamDashboardView .td-kopf-bearbeiten .td-bearbeiten-leiste { flex-wrap: wrap; justify-content: flex-end; margin-left: auto; } #teamDashboardView .td-bearbeiten-hinweis { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--text-2); font-size: var(--fs-13); } #teamDashboardView .td-bearbeiten-gruppe { display: inline-flex; align-items: center; gap: var(--space-2); } #teamDashboardView .td-bearbeiten-label { color: var(--text-2); font-size: var(--fs-13); } #teamDashboardView .td-bearbeiten-spalten button { min-width: 32px; } #teamDashboardView .td-bearbeiten-zurueck { display: inline-flex; align-items: center; gap: var(--space-2); } #teamDashboardView .td-bearbeiten-frage { color: var(--text-1); font-size: var(--fs-13); font-weight: var(--fw-medium); } #teamDashboardView .td-bearbeiten-leiste .td-knopf:disabled { opacity: .45; cursor: not-allowed; } @media (max-width: 760px) { /* Phone: the hint on its own line, the buttons left-aligned under it. */ #teamDashboardView .td-kopf-bearbeiten .td-bearbeiten-leiste { justify-content: flex-start; margin-left: 0; } #teamDashboardView .td-bearbeiten-hinweis { flex-basis: 100%; } } @media (prefers-reduced-motion: reduce) { #teamDashboardView :is(.td-verschieben, .td-verschieben-hover) { transition: none; } } /* A fixed height may go below the fitted dashboard's minimum: two tasks stay in view (user: heights of every card). */ #teamDashboardView .td-zelle.td-passend .td-karte-aufgaben .td-aufg-rumpf { --td-min: 160px; } /* The dragged card's cell: a short strip while it moves, so drop targets stay where the eye expects them. */ #teamDashboardView .td-zelle.td-zelle-zieht { height: 96px !important; min-height: 0 !important; overflow: hidden; } /* An open form in a card with a fixed height keeps its own height (it took the whole card and pushed the list out). */ #teamDashboardView .td-zelle.td-passend .td-inline-form { flex: 0 0 auto; } /* Bounded desktop layout: resizing redistributes a column, never extends the page. */ #teamDashboardView .td-raster.td-viewport { min-height: 0; overflow: visible; } #teamDashboardView .td-viewport > .td-fzeilen { height: 100%; min-height: 0; padding-top: 0; } #teamDashboardView .td-viewport :is(.td-fzeile, .td-spalten, .td-klein-reihe) { min-height: 0; flex: none; align-items: stretch; } #teamDashboardView .td-viewport .td-fzeile { flex-wrap: nowrap; } #teamDashboardView .td-viewport .td-fzeile > .td-spalte[data-rolle="frei"] { min-width: 0; } #teamDashboardView .td-viewport .td-spalte { min-height: 0; padding-bottom: 0; } #teamDashboardView .td-viewport :is(.td-spalte > .td-karte, .td-zelle) { flex: none !important; min-height: 0 !important; max-height: none; } #teamDashboardView .td-viewport .td-zelle > .td-karte { height: 100%; min-height: 0; } #teamDashboardView .td-viewport .td-karte { box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain; } #teamDashboardView .td-viewport .td-flaeche { min-height: 0 !important; } #teamDashboardView .td-raster:not(.td-raster-bearbeiten) .td-griff { display: none; } /* Bug Report uses the existing category dropdown and segmented status controls. */ :is(#teamDashboardView, #tdSeitenleiste) .td-karte-bugs { --bgn-fuellung: var(--td-fuellung); --bgn-fuellung-stark: var(--td-fuellung-stark); --bgn-radius-feld: var(--radius-pill); --bgn-radius-karte: var(--td-radius); --bgn-kante-feld: var(--td-kante); --bgn-kante: var(--td-kante); } :is(#teamDashboardView, #tdSeitenleiste) .td-karte-bugs > .td-karte-kopf { flex-wrap: wrap; } :is(#teamDashboardView, #tdSeitenleiste) .td-bugs-controls { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); min-width: 0; } :is(#teamDashboardView, #tdSeitenleiste) .td-bugs-filter { min-width: 0; } :is(#teamDashboardView, #tdSeitenleiste) .td-bugs-dropdown { display: block; width: auto; } :is(#teamDashboardView, #tdSeitenleiste) .td-bugs-dropdown .bgn-dd-knopf { min-height: var(--space-7); font-size: var(--fs-12); } :is(#teamDashboardView, #tdSeitenleiste) .td-bugs-option { grid-template-columns: auto minmax(0, 1fr); } :is(#teamDashboardView, #tdSeitenleiste) .td-bugs-option input { accent-color: var(--check); } :is(#teamDashboardView, #tdSeitenleiste) .td-bugs-tabs { flex-wrap: wrap; } :is(#teamDashboardView, #tdSeitenleiste) .td-bugs-tabs .td-knopf { font-size: var(--fs-11); padding: var(--space-1) var(--space-2); } :is(#teamDashboardView, #tdSeitenleiste) .td-bugs-body { min-height: 0; overflow-y: auto; flex: 1 1 auto; } :is(#teamDashboardView, #tdSeitenleiste) .td-bugs-list { list-style: none; margin: 0; padding: 0; } :is(#teamDashboardView, #tdSeitenleiste) .td-bugs-row { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: var(--space-3); align-items: start; padding-block: var(--space-2); border-bottom: 1px solid var(--border-1); } :is(#teamDashboardView, #tdSeitenleiste) .td-bugs-row > .td-st-punkt { margin-top: 5px; } :is(#teamDashboardView, #tdSeitenleiste) .td-bugs-zeile { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; } :is(#teamDashboardView, #tdSeitenleiste) .td-bugs-dein-review { color: var(--st-erledigt); font-weight: var(--fw-medium); } :is(#teamDashboardView, #tdSeitenleiste) .td-bugs-link { color: var(--text-1); overflow-wrap: anywhere; text-decoration: none; font-weight: var(--fw-medium); } :is(#teamDashboardView, #tdSeitenleiste) .td-bugs-link:hover { text-decoration: underline; } :is(#teamDashboardView, #tdSeitenleiste) .td-bugs-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-2); }