/* Team app ▸ Verwaltung (23.10.2026, team/teamVerwaltung.js, stamp tn4). Only tokens (design-tokens.css, web3-design.css): Web3 accent where the Web3 design is on, else the strongest text colour. Light and dark follow the tokens. Toggle from Designkatalog/Toggle/standard. Every rule is scoped to #teamVerwaltungView. */ #teamVerwaltungView { --tv-akzent: var(--w3-akzent, var(--text-1)); --tv-akzent-flaeche: var(--w3-akzent-flaeche, var(--surface-3)); --tv-akzent-rand: var(--w3-akzent-rand, var(--border-3)); --tv-akzent-text: var(--w3-akzent-text, var(--text-inv)); --tv-karte: var(--w3-karte, var(--surface-1)); --tv-kante: var(--w3-kante, inset 0 0 0 1px var(--border-1)); --tv-glanz: var(--w3-glanz, none); --tv-fuellung: var(--w3-fuellung, var(--surface-2)); --tv-fuellung-stark: var(--w3-fuellung-stark, var(--surface-3)); --tv-kopf: var(--w3-flaeche, var(--surface-2)); --tv-zeile-hover: var(--w3-zeile-hover, var(--surface-2)); --tv-rand: var(--w3-rand, var(--border-1)); --tv-radius: var(--w3-radius-karte, var(--radius-lg)); --tv-positiv: var(--w3-positiv, var(--success)); } /* Full page width (user 24.10.2026: "immer die komplette Seite nutzen, nicht rechts und links Platz lassen, stets responsive"): the view already sits in the gutter of the tab bar, so the mount adds no side padding and the cards line up with the bar at every width. */ #teamVerwaltungView .tv-mount { box-sizing: border-box; width: 100%; padding: var(--space-6) 0 var(--space-9); display: flex; flex-direction: column; gap: var(--space-4); color: var(--text-1); font-size: var(--fs-14); transition: opacity var(--t-base, .2s); } /* 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. */ #teamVerwaltungView .tv-mount.tv-laedt { opacity: .7; transition-delay: 400ms; } /* ── Head and sub-tabs ── */ #teamVerwaltungView .tv-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; } #teamVerwaltungView .tv-kopf-text { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; } #teamVerwaltungView .tv-titel { margin: 0; font-size: var(--fs-24); font-weight: var(--fw-semibold); letter-spacing: -0.01em; } #teamVerwaltungView .tv-unterzeile { margin: 0; color: var(--text-2); font-size: var(--fs-13); } #teamVerwaltungView .tv-unterleiste { display: inline-flex; gap: 2px; width: fit-content; max-width: 100%; padding: 2px; border-radius: var(--radius-pill); background: var(--tv-fuellung); box-shadow: var(--w3-kante-feld, inset 0 0 0 1px var(--border-2)); } #teamVerwaltungView .tv-unter { 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; } #teamVerwaltungView .tv-unter:hover { color: var(--text-1); } #teamVerwaltungView .tv-unter[aria-selected="true"] { background: var(--tv-fuellung-stark); color: var(--text-1); font-weight: var(--fw-semibold); } /* ── Buttons, notice ── */ #teamVerwaltungView .tv-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(--tv-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; } #teamVerwaltungView .tv-knopf:hover { background: var(--tv-fuellung-stark); } #teamVerwaltungView .tv-knopf:disabled { opacity: .6; cursor: default; } #teamVerwaltungView .tv-knopf.tv-laeuft::after, #teamVerwaltungView .tv-recht-zelle.tv-laeuft::after { content: ""; width: 10px; height: 10px; border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--radius-pill); animation: tv-dreh .8s linear infinite; } @keyframes tv-dreh { to { transform: rotate(360deg); } } #teamVerwaltungView .tv-unter:focus-visible, #teamVerwaltungView .tv-knopf:focus-visible, #teamVerwaltungView .tv-suche:focus-visible, #teamVerwaltungView .value-tip:focus-visible { outline: none; box-shadow: var(--focus-ring); } #teamVerwaltungView .tv-meldung { margin: 0; padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); background: var(--tv-fuellung); color: var(--text-1); font-size: var(--fs-13); } #teamVerwaltungView .tv-meldung[data-art="ok"] { background: color-mix(in srgb, var(--tv-positiv) 12%, transparent); } #teamVerwaltungView .tv-meldung[data-art="fehler"] { background: color-mix(in srgb, var(--danger) 14%, transparent); } /* ── Card ── */ #teamVerwaltungView .tv-karte { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border-radius: var(--tv-radius); background: var(--tv-karte); background-image: var(--tv-glanz); box-shadow: var(--tv-kante); } #teamVerwaltungView .tv-werkzeuge { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; } #teamVerwaltungView .tv-suche { flex: 1 1 220px; max-width: 320px; height: 36px; box-sizing: border-box; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-pill); background: var(--input-bg, var(--tv-fuellung)); box-shadow: var(--w3-kante-feld, inset 0 0 0 1px var(--input-border, var(--border-2))); color: var(--text-1); font: inherit; font-size: var(--fs-13); } #teamVerwaltungView .tv-suche::placeholder { color: var(--input-placeholder, var(--text-3)); } #teamVerwaltungView .tv-filter { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-13); color: var(--text-2); } #teamVerwaltungView .tv-zahl { margin-left: auto; font-size: var(--fs-12); color: var(--text-3); font-variant-numeric: tabular-nums; } #teamVerwaltungView .tv-legende { margin: 0; color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-relaxed, 1.6); } #teamVerwaltungView .tv-klein { font-size: var(--fs-12); color: var(--text-3); } #teamVerwaltungView .tv-leer { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-8) var(--space-4); color: var(--text-2); text-align: center; } #teamVerwaltungView .tv-leer p { margin: 0; } /* ── Toggle (Designkatalog/Toggle/standard) ── */ #teamVerwaltungView .tv-schalter { position: relative; display: inline-flex; align-items: center; cursor: pointer; } #teamVerwaltungView .tv-schalter input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; } #teamVerwaltungView .tv-spur { position: relative; flex-shrink: 0; width: 40px; height: 22px; box-sizing: border-box; background: var(--surface-3); border: 1px solid var(--border-2); border-radius: var(--radius-pill); transition: background var(--t-fast, .12s), border-color var(--t-fast, .12s); } #teamVerwaltungView .tv-knauf { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-2); transition: transform var(--t-fast, .12s), background var(--t-fast, .12s); } /* "On" in the accent like the Dashboard switch (team-dashboard.css .td-schalter, tv3); green stays for status dots. Dark: accent tint with the accent knob; light: track filled with the accent, knob in the accent text colour. */ #teamVerwaltungView .tv-schalter input:checked + .tv-spur { background: var(--tv-akzent-flaeche); border-color: var(--tv-akzent-rand); } #teamVerwaltungView .tv-schalter input:checked + .tv-spur .tv-knauf { transform: translateX(18px); background: var(--tv-akzent); } :root[data-theme="light"] #teamVerwaltungView .tv-schalter input:checked + .tv-spur { background: var(--tv-akzent); border-color: var(--tv-akzent); } :root[data-theme="light"] #teamVerwaltungView .tv-schalter input:checked + .tv-spur .tv-knauf { background: var(--tv-akzent-text); } #teamVerwaltungView .tv-schalter input:focus-visible + .tv-spur { outline: 2px solid var(--focus-color, var(--text-1)); outline-offset: 3px; } #teamVerwaltungView .tv-schalter:has(input:disabled) { cursor: not-allowed; opacity: .55; } #teamVerwaltungView .tv-schalter-sm .tv-spur { width: 32px; height: 18px; } #teamVerwaltungView .tv-schalter-sm .tv-knauf { width: 12px; height: 12px; } #teamVerwaltungView .tv-schalter-sm input:checked + .tv-spur .tv-knauf { transform: translateX(14px); } /* ── User table (24.10.2026, like FRF ▸ Nutzer: users-matrix in nutzer.css) ── Person (sticky left) · Team (chips + popover) · the categories of the Team bar, below one column per tab with a horizontal label (user 24.10.2026: "genug Platz, kann ruhig etwas mehr verteilt werden"). table-layout: fixed with a colgroup: Person and Team get set widths, the rights share the rest evenly over the full width. From 1100 px (like FRF) the hull is no scroll container and the head sticks under the bar; below, the hull scrolls sideways with a fade at the right edge while there is more. */ /* 25.10.2026 (lists fit the screen, team/teamListen.js): the hull is the scroll container on every width; mode „Scrollen“ sets its max-height to the bottom of the viewport (head and person column stick inside), mode „Seiten“ shows the rows that fit and the pager below (.tv-seiten-fuss). */ #teamVerwaltungView .tv-tabelle-huelle { margin: 0 calc(-1 * var(--space-5)); overflow: auto; overscroll-behavior: contain; } #teamVerwaltungView .tv-matrix thead { position: sticky; top: 0; z-index: 4; } #teamVerwaltungView .tv-seiten-fuss { display: flex; justify-content: flex-end; } #teamVerwaltungView .tv-seiten-fuss:empty { display: none; } #teamVerwaltungView .tv-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; border-radius: var(--radius-pill); background: var(--tv-akzent-flaeche); color: var(--tv-akzent); font-size: var(--fs-11); font-weight: var(--fw-semibold); letter-spacing: 0; } #teamVerwaltungView .tv-tabelle-huelle.tv-mehr-rechts { -webkit-mask-image: linear-gradient(to left, transparent, black var(--space-8)); mask-image: linear-gradient(to left, transparent, black var(--space-8)); } #teamVerwaltungView .tv-matrix { width: 100%; min-width: 960px; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: var(--fs-13); } #teamVerwaltungView .tv-matrix col.tv-col-person { width: clamp(184px, 14vw, 280px); } #teamVerwaltungView .tv-matrix col.tv-col-team { width: clamp(200px, 17vw, 380px); } #teamVerwaltungView .tv-matrix thead th { padding: var(--space-2) var(--space-3); background: var(--tv-karte); color: var(--text-3); font-size: var(--fs-12); font-weight: var(--fw-medium); text-align: left; vertical-align: bottom; white-space: nowrap; } #teamVerwaltungView .tv-matrix thead th > span { cursor: default; } #teamVerwaltungView .tv-matrix thead th.tv-person-kopf, #teamVerwaltungView .tv-matrix thead th.tv-team-kopf { padding-bottom: var(--space-3); box-shadow: inset 0 -1px 0 var(--tv-rand); } #teamVerwaltungView .tv-matrix thead th.tv-person-kopf { position: sticky; left: 0; z-index: 2; padding-left: var(--space-5); } /* Group row: the category with a rule below, like the FRF head groups (users-kopf-gruppe). */ #teamVerwaltungView .tv-matrix thead th.tv-kopf-gruppe { padding: var(--space-3) 2px 2px; text-align: center; font-weight: var(--fw-semibold); letter-spacing: var(--tracking-wide, .02em); text-transform: uppercase; } #teamVerwaltungView .tv-matrix thead th.tv-kopf-gruppe > span { display: block; margin: 0 var(--space-1); padding-bottom: var(--space-1); border-bottom: 2px solid var(--tv-rand); overflow: hidden; text-overflow: ellipsis; } /* One column per tab: horizontal label, breaks only between words and after hyphens (never inside a word). */ #teamVerwaltungView .tv-matrix thead th.tv-recht-kopf { padding: var(--space-2) var(--space-1) var(--space-3); text-align: center; white-space: normal; box-shadow: inset 0 -1px 0 var(--tv-rand); } #teamVerwaltungView .tv-recht-titel { display: block; color: var(--text-2); font-size: var(--fs-12); font-weight: var(--fw-semibold); line-height: var(--lh-tight, 1.2); hyphens: manual; overflow-wrap: normal; } #teamVerwaltungView .tv-recht-zusatz { display: block; margin-top: 2px; color: var(--text-3); font-size: var(--fs-11); font-weight: var(--fw-regular); line-height: var(--lh-tight, 1.2); } #teamVerwaltungView .tv-matrix thead th.tv-recht-kopf:hover .tv-recht-titel { color: var(--text-1); } #teamVerwaltungView .tv-matrix .ist-gruppenstart { border-left: 1px solid var(--tv-rand); } /* Narrower desktops: a one-tab category (MODERATION) still fits its column. */ @media (max-width: 1279px) { #teamVerwaltungView .tv-matrix thead th.tv-kopf-gruppe > span { margin: 0 2px; letter-spacing: normal; } } /* Narrower rows (25.10.2026): 6 px top/bottom, name + one identity line. */ #teamVerwaltungView .tv-matrix td, #teamVerwaltungView .tv-matrix tbody th { padding: calc(var(--space-1) + 2px) var(--space-3); border-bottom: 1px solid var(--tv-rand); vertical-align: middle; background: var(--tv-karte); } #teamVerwaltungView .tv-matrix tbody tr:last-child > * { border-bottom: 0; } #teamVerwaltungView .tv-matrix tbody tr:hover > * { background: var(--tv-zeile-hover); } /* Person: sticky, opaque (cards and row hover are opaque tokens). */ #teamVerwaltungView .tv-matrix tbody th.tv-person { position: sticky; left: 0; z-index: 1; padding-left: var(--space-5); text-align: left; font-weight: var(--fw-regular); min-width: 0; box-shadow: inset -1px 0 0 var(--tv-rand); } #teamVerwaltungView .tv-person-inhalt { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-width: 0; } #teamVerwaltungView .tv-name { font-weight: var(--fw-medium); color: var(--text-1); overflow-wrap: anywhere; unicode-bidi: isolate; } #teamVerwaltungView .tv-rolle { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--tv-fuellung); color: var(--text-3); font-size: var(--fs-11); font-weight: var(--fw-medium); white-space: nowrap; } #teamVerwaltungView .tv-rolle-admin { background: var(--tv-akzent-flaeche); color: var(--tv-akzent); } #teamVerwaltungView .tv-rolle-team { color: var(--text-2); } /* Without Team access: faded content (not the cell, it is sticky and must stay opaque); boxes stay usable. */ #teamVerwaltungView .tv-matrix tbody tr.tv-ohne .tv-person-inhalt, #teamVerwaltungView .tv-matrix tbody tr.tv-ohne .tv-team-inhalt { opacity: .55; } #teamVerwaltungView .tv-matrix tbody tr.tv-ohne .tv-name { cursor: help; } #teamVerwaltungView .tv-leise { color: var(--text-3); } /* Discord and login name under the shown name (24.10.2026), on one line since 25.10.2026 ("Discord: … · Login: …"), cut with an ellipsis (full text in the title); a missing Discord link is marked for Team members. */ #teamVerwaltungView .tv-ident { display: block; margin-top: 1px; min-width: 0; max-width: 100%; font-size: var(--fs-11); line-height: 1.35; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #teamVerwaltungView .tv-ident > span { unicode-bidi: isolate; } #teamVerwaltungView .tv-ident[data-tip] { cursor: help; } #teamVerwaltungView .tv-ident > .tv-ident-trenner { unicode-bidi: normal; } #teamVerwaltungView .tv-ident-fehlt { color: var(--text-warning); font-weight: var(--fw-medium); cursor: help; } #teamVerwaltungView .tv-matrix tbody tr.tv-ohne .tv-ident { opacity: .55; } /* Row „Ganzes Team“ (25.10.2026): pinned first, the role's rights; set apart by a stronger bottom line and the fill. */ #teamVerwaltungView .tv-matrix tbody tr.tv-team-rolle > * { background: var(--tv-kopf); border-bottom: 2px solid var(--border-2); } /* It stays under the head while the persons scroll (user 25.10.2026, height from teamVerwaltung.js setzeTeamZeileOben); above the person rows, below the head; its person cell sticks left as well. */ #teamVerwaltungView .tv-matrix tbody tr.tv-team-rolle > * { position: sticky; top: var(--tv-thead-h, 0px); z-index: 2; } #teamVerwaltungView .tv-matrix tbody tr.tv-team-rolle > :first-child { left: 0; z-index: 3; } #teamVerwaltungView .tv-matrix tbody tr.tv-team-rolle:hover > * { background: var(--surface-3, var(--tv-zeile-hover)); } #teamVerwaltungView .tv-matrix tbody tr.tv-team-rolle .tv-name { font-weight: var(--fw-semibold); cursor: help; } /* Here the role is where the right is set: its ticks in full strength (the person rows below show them pale). */ #teamVerwaltungView .tv-matrix tbody tr.tv-team-rolle input.tv-box[data-art="rolle"]:checked { opacity: 1; } /* Team chips under the name: only on phones (≤ 640 px), where the Team column folds away. */ #teamVerwaltungView .tv-person-team { display: none; } /* ── Team column: chips (team filled, category outlined) and the edit control ── */ #teamVerwaltungView .tv-team-inhalt { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } #teamVerwaltungView .tv-chip { display: inline-flex; align-items: center; height: 22px; max-width: 160px; padding: 0 var(--space-2); box-sizing: border-box; border-radius: var(--radius-pill); font-size: var(--fs-12); font-weight: var(--fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; } #teamVerwaltungView .tv-chip-team { background: var(--tv-fuellung-stark); color: var(--text-1); } #teamVerwaltungView .tv-chip-kategorie { background: transparent; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--border-3); } #teamVerwaltungView .tv-chip-mini { height: 18px; font-size: var(--fs-11); } #teamVerwaltungView .tv-team-knopf { display: inline-flex; align-items: center; gap: 4px; height: 24px; min-width: 24px; padding: 0 6px; box-sizing: border-box; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-3); font: inherit; font-size: var(--fs-12); cursor: pointer; } #teamVerwaltungView .tv-team-knopf:hover, #teamVerwaltungView .tv-team-knopf[aria-expanded="true"] { background: var(--tv-fuellung); color: var(--text-1); } #teamVerwaltungView .tv-team-knopf[aria-disabled="true"] { cursor: not-allowed; opacity: .5; } #teamVerwaltungView .tv-team-knopf[aria-disabled="true"]:hover { background: transparent; color: var(--text-3); } #teamVerwaltungView .tv-team-knopf:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* Delete a person (25.10.2026): small bin after the role pill, shown on row hover/focus, always on touch. */ #teamVerwaltungView .tv-loeschen-knopf { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: auto; padding: 0; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-3); cursor: pointer; opacity: 0; } #teamVerwaltungView .tv-matrix tbody tr:hover .tv-loeschen-knopf, #teamVerwaltungView .tv-loeschen-knopf:focus-visible, #teamVerwaltungView .tv-loeschen-knopf[aria-expanded="true"] { opacity: 1; } #teamVerwaltungView .tv-loeschen-knopf:hover, #teamVerwaltungView .tv-loeschen-knopf[aria-expanded="true"] { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); } #teamVerwaltungView .tv-loeschen-knopf:focus-visible { outline: none; box-shadow: var(--focus-ring); } @media (hover: none) { #teamVerwaltungView .tv-loeschen-knopf { opacity: 1; } } #teamVerwaltungView .tv-pop-hinweis.tv-pop-warnung { color: var(--text-warning); } /* ── Checkboxes (Designkatalog/Toggle checkbox, drawn like FRF users-perm-box) ── Real checkboxes: keyboard, change and indeterminate stay native. Checked = accent; über Rolle = paler; entzogen = empty with a danger border; teilweise = dash; Admin = checked and locked. .tv-kbox draws the same in the legend. */ #teamVerwaltungView .tv-recht-zelle { padding: calc(var(--space-1) + 2px) 0 !important; text-align: center; } /* Box and ⌄ of a tab with sub-rights (FRF users-zusatz-wahl / users-zusatz-pfeil, nutzer.css). */ #teamVerwaltungView .tv-zusatz-wahl { gap: var(--space-2); vertical-align: middle; } /* Sub-rights dropdown: FRF panel classes (catalog-popup hedged-more-panel users-tracking-panel); hung into the view. */ /* One column as wide as the panel (300 px set by teamVerwaltung.js): without it the implicit column took the widest no-wrap line and „Ganzes Team“, „1 von 2“ and the hint ran past the panel (probe dep175, 26.10.2026). */ #teamVerwaltungView .tv-unter-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1); text-align: left; } #teamVerwaltungView .tv-unter-panel > * { min-width: 0; } #teamVerwaltungView .tv-unter-panel .users-tracking-titel { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #teamVerwaltungView .tv-unter-panel .users-tracking-zahl { flex: 0 1 auto; max-width: 45%; } #teamVerwaltungView .tv-unter-panel .users-tracking-hinweis { white-space: normal; overflow-wrap: anywhere; } #teamVerwaltungView .tv-unter-panel .tv-personen-eintrag { min-width: 0; } #teamVerwaltungView .tv-unter-panel .users-tracking-zahl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #teamVerwaltungView .tv-unter-panel .hedged-more-item.ist-gesperrt { cursor: default; opacity: .6; } #teamVerwaltungView .tv-unter-panel .users-tracking-hinweis { margin: var(--space-1) var(--space-2) 0; } #teamVerwaltungView .tv-recht-zelle.tv-laeuft { position: relative; } #teamVerwaltungView .tv-recht-zelle.tv-laeuft::after { position: absolute; right: 2px; top: 6px; color: var(--text-3); } #teamVerwaltungView input.tv-box, #teamVerwaltungView .tv-kbox { -webkit-appearance: none; appearance: none; display: inline-grid; place-items: center; box-sizing: border-box; width: var(--space-4); height: var(--space-4); margin: 0; padding: 0; flex-shrink: 0; border: 1.5px solid var(--border-3); border-radius: calc(var(--radius-sm) / 2); background: transparent; vertical-align: middle; cursor: pointer; outline: none; transition: background var(--t-fast, .12s), border-color var(--t-fast, .12s); } #teamVerwaltungView input.tv-box:hover { border-color: var(--text-2); } /* Hit area ≥ 24 px around the 16 px box (narrower rows, 25.10.2026): an invisible ring, outside the grid flow. */ #teamVerwaltungView input.tv-box { position: relative; } #teamVerwaltungView input.tv-box::before { content: ''; position: absolute; inset: calc(-1 * var(--space-1) - 1px); border-radius: var(--radius-sm); } #teamVerwaltungView input.tv-box:checked, #teamVerwaltungView input.tv-box:indeterminate, #teamVerwaltungView .tv-kbox-einzeln, #teamVerwaltungView .tv-kbox-rolle, #teamVerwaltungView .tv-kbox-teilweise { background: var(--tv-akzent); border-color: var(--tv-akzent); } #teamVerwaltungView input.tv-box:checked::after, #teamVerwaltungView .tv-kbox-einzeln::after, #teamVerwaltungView .tv-kbox-rolle::after { content: ''; width: var(--space-2); height: var(--space-1); border: 2px solid var(--tv-akzent-text); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); } #teamVerwaltungView input.tv-box:indeterminate::after, #teamVerwaltungView .tv-kbox-teilweise::after { content: ''; width: var(--space-2); height: 2px; background: var(--tv-akzent-text); } #teamVerwaltungView input.tv-box[data-art="rolle"]:checked, #teamVerwaltungView .tv-kbox-rolle { opacity: .55; } #teamVerwaltungView input.tv-box[data-art="entzogen"], #teamVerwaltungView .tv-kbox-entzogen { border-color: var(--danger); } #teamVerwaltungView input.tv-box[data-art="admin"]:disabled { opacity: .4; cursor: default; } #teamVerwaltungView input.tv-box[data-art="nur-team"]:disabled { opacity: .35; cursor: not-allowed; border-style: dashed; } /* Role limit in the legend: same dashed box, a little stronger so it reads at 12 px. */ #teamVerwaltungView .tv-kbox-nur-team { border-style: dashed; opacity: .6; } #teamVerwaltungView .tv-recht-zelle[data-tip] { cursor: help; } /* Access review 24.10.2026: a right without Dashboard has no effect (greyed, still switchable); a column whose feature switch is off carries the marker „Funktion aus“ (only admins see the tab). */ #teamVerwaltungView .tv-recht-zelle.tv-braucht-dashboard input.tv-box, #teamVerwaltungView .tv-legende .tv-kbox-braucht { opacity: .3; filter: grayscale(1); } #teamVerwaltungView .tv-recht-zelle.tv-braucht-dashboard .tv-unter-pfeil { opacity: .45; } #teamVerwaltungView .tv-matrix td.tv-funktion-aus, #teamVerwaltungView .tv-matrix tbody tr:hover > td.tv-funktion-aus { background-image: repeating-linear-gradient(135deg, transparent 0 6px, var(--tv-fuellung) 6px 7px); } #teamVerwaltungView .tv-funktion-aus-marke { display: inline-flex; align-items: center; margin-top: var(--space-1); padding: 0 6px; height: 16px; border-radius: var(--radius-pill); border: 1px dashed var(--text-warning); color: var(--text-warning); font-size: var(--fs-11); font-weight: var(--fw-medium); letter-spacing: normal; text-transform: none; white-space: nowrap; cursor: help; } #teamVerwaltungView .tv-funktion-aus-mini { margin-top: 0; cursor: default; } /* Phones and tablets (responsive pass 25.10.2026): below 1100 px the rights columns shrank to ~62 px, so one-word heads („Verwarnungen“, „Userbetreuung“) and the marker ran into the next column. Each right gets 96 px instead; with table-layout: fixed the table grows to the sum of its columns and the hull scrolls sideways (Person stays sticky). The marker wraps inside its column instead of running into the next one. */ @media (max-width: 1099px) { #teamVerwaltungView .tv-matrix col.tv-col-recht { width: 96px; } #teamVerwaltungView th .tv-funktion-aus-marke { height: auto; max-width: 100%; padding: 1px 4px; white-space: normal; line-height: 1.15; text-align: center; } } #teamVerwaltungView .tv-laeuft input.tv-box:disabled { cursor: progress; opacity: .5; } #teamVerwaltungView input.tv-box:focus-visible { box-shadow: var(--focus-ring); } /* Legend: one short line. */ #teamVerwaltungView .tv-legende { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-4); } #teamVerwaltungView .tv-legende-eintrag { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } #teamVerwaltungView .tv-legende .tv-kbox { width: 12px; height: 12px; cursor: default; } #teamVerwaltungView .tv-legende .tv-kbox::after { transform: rotate(-45deg) translate(1px, -1px) scale(.8); } #teamVerwaltungView .tv-legende .tv-kbox-teilweise::after { transform: none; width: 6px; } #teamVerwaltungView .tv-legende .tv-legende-pfeil { width: var(--space-4); height: var(--space-4); cursor: default; font-size: var(--fs-11); } #teamVerwaltungView .tv-legende .tv-legende-pfeil:hover { background: transparent; border-color: var(--border-2); color: var(--text-2); } #teamVerwaltungView .tv-legende-rest { color: var(--text-3); } /* ── Popover: Team multi-select (Designkatalog/Dropdown/searchable) ── */ #teamVerwaltungView .tv-pop { position: fixed; z-index: var(--z-dropdown, 100); display: flex; flex-direction: column; gap: var(--space-2); max-height: min(440px, calc(100vh - 16px)); box-sizing: border-box; padding: var(--space-3); border-radius: var(--radius-lg); background: var(--w3-flaeche, var(--surface-2)); box-shadow: var(--w3-kante, inset 0 0 0 1px var(--border-2)), var(--w3-schatten, var(--shadow-lg)); color: var(--text-1); font-size: var(--fs-13); animation: tv-pop-rein var(--t-fast, .12s) ease both; } @keyframes tv-pop-rein { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } } #teamVerwaltungView .tv-pop-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); padding: 0 var(--space-1); } #teamVerwaltungView .tv-pop-kopf strong { font-weight: var(--fw-semibold); overflow-wrap: anywhere; } #teamVerwaltungView .tv-pop-suche { flex: 0 0 auto; max-width: none; width: 100%; height: 32px; } #teamVerwaltungView .tv-pop-liste { flex: 1 1 auto; min-height: 0; max-height: 260px; overflow-y: auto; overscroll-behavior: contain; margin: 0 calc(-1 * var(--space-3)); padding: var(--space-1) var(--space-3); border-top: 1px solid var(--tv-rand); border-bottom: 1px solid var(--tv-rand); } #teamVerwaltungView .tv-pop-gruppe + .tv-pop-gruppe { margin-top: var(--space-2); } #teamVerwaltungView .tv-pop-label { padding: var(--space-2) var(--space-1) var(--space-1); color: var(--text-3); font-size: var(--fs-11); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-wide, .02em); text-transform: uppercase; } #teamVerwaltungView .tv-pop-item { display: flex; align-items: center; gap: var(--space-2); min-height: 34px; padding: 0 var(--space-2); border-radius: var(--radius-md); cursor: pointer; } #teamVerwaltungView .tv-pop-item:hover { background: var(--tv-fuellung); } #teamVerwaltungView .tv-pop-item-aus { cursor: not-allowed; opacity: .5; } #teamVerwaltungView .tv-pop-item-aus:hover { background: transparent; } #teamVerwaltungView .tv-pop-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } #teamVerwaltungView .tv-pop-meta { color: var(--text-3); font-size: var(--fs-12); white-space: nowrap; font-variant-numeric: tabular-nums; } #teamVerwaltungView .tv-treffer { background: transparent; color: var(--tv-akzent); font-weight: var(--fw-semibold); } #teamVerwaltungView .tv-pop-leer { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-4) var(--space-2); color: var(--text-2); text-align: center; } #teamVerwaltungView .tv-pop-leer p { margin: 0; } #teamVerwaltungView .tv-pop-hinweis { margin: 0; padding: 0 var(--space-1); color: var(--text-3); font-size: var(--fs-12); } #teamVerwaltungView .tv-pop-fehler { margin: 0; padding: 0 var(--space-1); color: var(--danger); font-size: var(--fs-12); } #teamVerwaltungView .tv-pop-fehler[hidden] { display: none; } #teamVerwaltungView .tv-pop-knoepfe { display: flex; justify-content: flex-end; gap: var(--space-2); } /* Delete popover (review round 2, 25.10.2026): both steps keep one height (min-height from teamVerwaltung.js), the buttons stay at the bottom, so a second click on „Weiter“ hits the (locked) final button instead of the page. */ #teamVerwaltungView .tv-pop-loeschen .tv-pop-knoepfe { margin-top: auto; } /* ── Person picker of the row „Ganzes Team“ (26.10.2026, teamVerwaltung.js oeffnePersonen) ── Button in a locked „nur einzeln“ cell (like the ⌄ beside a box) and under each sub-right of the ⌄ panel; the picker is the catalog popover above (.tv-pop) with bulk buttons, an inline confirmation and per-row progress and errors. */ #teamVerwaltungView .tv-personen-zellknopf { display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-width: var(--space-5); height: var(--space-5); padding: 0 4px; border: 1px solid var(--border-2); border-radius: var(--radius-sm); background: transparent; color: var(--text-2); font: inherit; font-size: var(--fs-11); font-variant-numeric: tabular-nums; line-height: 1; cursor: pointer; } #teamVerwaltungView .tv-personen-zellknopf:hover, #teamVerwaltungView .tv-personen-zellknopf[aria-expanded="true"] { background: var(--tv-fuellung-stark); border-color: var(--border-3); color: var(--text-1); } #teamVerwaltungView td.tv-recht-zelle.tv-personen-zelle, #teamVerwaltungView td.tv-recht-zelle.tv-personen-zelle[data-tip] { cursor: pointer; } /* The dashed box is locked: a click on it goes to the cell, which opens the picker. */ #teamVerwaltungView td.tv-personen-zelle input.tv-box:disabled { pointer-events: none; } #teamVerwaltungView .tv-unter-eintrag { display: grid; gap: 2px; } #teamVerwaltungView .tv-personen-eintrag { display: flex; align-items: center; gap: var(--space-2); min-height: 32px; margin: 0 0 var(--space-1) var(--space-3); padding: 0 var(--space-2); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-2); font: inherit; font-size: var(--fs-12); text-align: left; cursor: pointer; } #teamVerwaltungView .tv-personen-eintrag:hover { background: var(--tv-fuellung); color: var(--text-1); } #teamVerwaltungView .tv-personen-eintrag-text { flex: 1 1 auto; min-width: 0; } #teamVerwaltungView .tv-personen-eintrag-zahl { color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; } #teamVerwaltungView .tv-personen-zellknopf:focus-visible, #teamVerwaltungView .tv-personen-eintrag:focus-visible { outline: none; box-shadow: var(--focus-ring); } #teamVerwaltungView .tv-personen-aktion { display: flex; flex-wrap: wrap; gap: var(--space-2); } #teamVerwaltungView .tv-personen-aktion > .tv-knopf { flex: 1 1 auto; min-width: 0; } #teamVerwaltungView .tv-personen-frage { display: grid; gap: var(--space-2); width: 100%; padding: var(--space-2) var(--space-3); box-sizing: border-box; border-radius: var(--radius-md); background: var(--tv-fuellung); box-shadow: var(--tv-kante); } #teamVerwaltungView .tv-personen-frage strong { overflow-wrap: anywhere; } #teamVerwaltungView .tv-personen-frage .tv-pop-hinweis { padding: 0; } #teamVerwaltungView .tv-personen-frage .tv-pop-knoepfe { flex-wrap: wrap; } #teamVerwaltungView .tv-personen-zeile .tv-pop-fehler { padding: 0 var(--space-2) var(--space-1) calc(var(--space-4) + 22px + 3 * var(--space-2)); } #teamVerwaltungView .tv-personen-zeile.tv-laeuft .tv-pop-item { cursor: progress; } #teamVerwaltungView .tv-personen-zeile.tv-laeuft input.tv-box { opacity: .5; } #teamVerwaltungView .tv-personen-zeile.tv-laeuft .tv-pop-meta { display: inline-flex; align-items: center; gap: 6px; } #teamVerwaltungView .tv-personen-zeile.tv-laeuft .tv-pop-meta::before { content: ""; width: 10px; height: 10px; border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--radius-pill); animation: tv-dreh .8s linear infinite; } #teamVerwaltungView .tv-personen-stand[hidden] { display: none; } #teamVerwaltungView .tv-personen-stand { color: var(--text-2); font-variant-numeric: tabular-nums; } #teamVerwaltungView .tv-personen-stand[data-art="fehler"] { color: var(--danger); } /* Same look as the person choice of „Aufgabe weitergeben“ (team-dashboard.css .td-dd-*, user 26.10.2026: „genau so eine liste und wenn genug platz ist 1-3 spalten nutzen“): search with a magnifier, a hairline, rows with a round avatar and the name, hits in the accent; the rows fill 1–3 columns (the popover is 360/480/720 px wide by count). */ #teamVerwaltungView .tv-pers-suchfeld { position: relative; } #teamVerwaltungView .tv-pers-lupe { position: absolute; left: 10px; top: 50%; display: inline-flex; width: 14px; height: 14px; transform: translateY(-50%); color: var(--text-3); pointer-events: none; } #teamVerwaltungView .tv-pers-lupe svg { width: 14px; height: 14px; } #teamVerwaltungView .tv-pop-suche.tv-pers-suche { height: 34px; padding-left: 32px; } #teamVerwaltungView .tv-pers-trenner { height: 1px; margin: 0 calc(-1 * var(--space-3)); background: var(--tv-rand); } #teamVerwaltungView .tv-pop-liste.tv-pers-liste { max-height: min(360px, 50vh); border-top: 0; } #teamVerwaltungView .tv-pers-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); gap: 2px var(--space-2); } #teamVerwaltungView .tv-personen-zeile { min-width: 0; } #teamVerwaltungView .tv-pop-item.tv-pers-option { min-height: 36px; padding: 0 var(--space-2); border-radius: var(--radius-sm); font-weight: var(--fw-medium); } #teamVerwaltungView .tv-pop-item.tv-pers-option:hover { background: var(--tv-fuellung-stark); } #teamVerwaltungView .tv-pop-item.tv-pers-option:has(input:focus-visible) { background: var(--tv-fuellung-stark); } #teamVerwaltungView .tv-personen-zeile.ist-gewaehlt .tv-pers-name { color: var(--tv-akzent); } #teamVerwaltungView .tv-pers-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #teamVerwaltungView .tv-pers-option .tv-pop-meta { font-size: var(--fs-11); font-weight: var(--fw-regular); } #teamVerwaltungView .tv-avatar.tv-avatar-mini { width: 22px; height: 22px; font-size: 10px; } #teamVerwaltungView .tv-pers-liste .tv-treffer { font-weight: var(--fw-bold); } @media (prefers-reduced-motion: reduce) { #teamVerwaltungView .tv-personen-zeile.tv-laeuft .tv-pop-meta::before { animation: none; } } @media (pointer: coarse) { #teamVerwaltungView .tv-personen-pop .tv-pop-item { min-height: 40px; } #teamVerwaltungView .tv-personen-eintrag { min-height: 40px; } } #teamVerwaltungView .tv-knopf-primaer { background: var(--tv-akzent); color: var(--tv-akzent-text); box-shadow: none; font-weight: var(--fw-semibold); } #teamVerwaltungView .tv-knopf-primaer:hover { background: var(--tv-akzent); filter: brightness(1.06); } #teamVerwaltungView .tv-knopf-gefahr { background: var(--danger); color: var(--text-inv); box-shadow: none; font-weight: var(--fw-semibold); } #teamVerwaltungView .tv-knopf-gefahr:hover { background: var(--danger-hover, var(--danger)); } /* ── Teams sub-tab: teamGruppen.js inside a card (its tg-* rules live in team-dashboard.css) ── */ #teamVerwaltungView #teamGruppenBereich .tg-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-3); } #teamVerwaltungView #teamGruppenBereich .tg-kopf-text { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; flex: 1 1 320px; } #teamVerwaltungView #teamGruppenBereich .tg-titel { margin: 0; font-size: var(--fs-15); font-weight: var(--fw-semibold); } #teamVerwaltungView #teamGruppenBereich .tg-unterzeile { margin: 0; color: var(--text-2); font-size: var(--fs-13); max-width: 70ch; } #teamVerwaltungView #teamGruppenBereich .tg-kopf-rechts { display: flex; gap: var(--space-2); flex-wrap: wrap; } #teamVerwaltungView #teamGruppenBereich .tg-inhalt { padding: 0; } #teamVerwaltungView #teamGruppenBereich .tg-tabelle-huelle { margin: 0 calc(-1 * var(--space-5)); } #teamVerwaltungView #teamGruppenBereich .tg-tabelle thead th { background: var(--tv-karte); box-shadow: inset 0 -1px 0 var(--tv-rand); } #teamVerwaltungView #teamGruppenBereich .tg-tabelle th:first-child, #teamVerwaltungView #teamGruppenBereich .tg-tabelle td:first-child { padding-left: var(--space-5); } #teamVerwaltungView #teamGruppenBereich .tg-tabelle th:last-child, #teamVerwaltungView #teamGruppenBereich .tg-tabelle td:last-child { padding-right: var(--space-5); } #teamVerwaltungView #teamGruppenBereich .tg-tabelle td { border-bottom-color: var(--tv-rand); } #teamVerwaltungView #teamGruppenBereich .tg-tabelle tbody tr:last-child td { border-bottom: 0; } #teamVerwaltungView #teamGruppenBereich .lz-knopf { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-pill); background: var(--tv-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; } #teamVerwaltungView #teamGruppenBereich .lz-knopf:hover:not(:disabled) { background: var(--tv-fuellung-stark); } #teamVerwaltungView #teamGruppenBereich .lz-knopf.tg-primaer { background: var(--tv-akzent); color: var(--tv-akzent-text); box-shadow: none; font-weight: var(--fw-semibold); } #teamVerwaltungView #teamGruppenBereich .lz-knopf.tg-gefahr { color: var(--danger); } #teamVerwaltungView #teamGruppenBereich .lz-knopf:focus-visible { outline: none; box-shadow: var(--focus-ring); } #teamVerwaltungView #teamGruppenBereich .tg-editor { background: var(--tv-fuellung); box-shadow: var(--w3-kante-feld, inset 0 0 0 1px var(--border-2)); } /* ── Feature switches ── */ #teamVerwaltungView .tv-gruppen { display: flex; flex-direction: column; gap: var(--space-4); } #teamVerwaltungView .tv-gruppe { gap: 0; padding-top: var(--space-4); padding-bottom: var(--space-2); } /* Staggered entrance only on the first render, never after a switch. */ #teamVerwaltungView .tv-gruppe.tv-rein { animation: tv-rein var(--t-slow, .3s) ease both; animation-delay: calc(var(--i, 0) * 60ms); } @keyframes tv-rein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } #teamVerwaltungView .tv-gruppe-kopf { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-3); } #teamVerwaltungView .tv-gruppe-kopf::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, var(--tv-rand), transparent); } #teamVerwaltungView .tv-gruppe-kopf h3 { margin: 0; font-size: var(--fs-15); font-weight: var(--fw-semibold); } #teamVerwaltungView .tv-funktion { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--tv-rand); } #teamVerwaltungView .tv-funktion:last-child { border-bottom: 0; } #teamVerwaltungView .tv-funktion-text { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; } #teamVerwaltungView .tv-funktion-kopf { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } #teamVerwaltungView .tv-funktion-titel { margin: 0; font-size: var(--fs-14); font-weight: var(--fw-semibold); } #teamVerwaltungView .tv-funktion-beschreibung { margin: 0; color: var(--text-2); font-size: var(--fs-13); max-width: 70ch; } #teamVerwaltungView .tv-funktion-meta { margin: 0; color: var(--text-3); font-size: var(--fs-12); } #teamVerwaltungView .tv-status { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 var(--space-2); border-radius: var(--radius-pill); font-size: var(--fs-11); font-weight: var(--fw-medium); } #teamVerwaltungView .tv-status::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-pill); background: currentColor; } #teamVerwaltungView .tv-status-an { background: color-mix(in srgb, var(--tv-positiv) 14%, transparent); color: var(--tv-positiv); } #teamVerwaltungView .tv-status-aus { background: var(--tv-fuellung); color: var(--text-3); } #teamVerwaltungView .tv-neu { display: inline-flex; align-items: center; height: 20px; padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--tv-akzent-flaeche); color: var(--tv-akzent); font-size: var(--fs-11); } /* ── Info card per feature (24.10.2026): „i“ button beside the title, catalog popover (.tv-pop) with short lists. „Discord: schreibt“ in the warning tone, because writing to Discord needs explicit approval. ── */ #teamVerwaltungView .tv-info-knopf, #teamVerwaltungView .tv-info-zu { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-3); cursor: pointer; transition: background var(--t-fast, .12s), color var(--t-fast, .12s); } #teamVerwaltungView .tv-info-knopf:hover, #teamVerwaltungView .tv-info-knopf[aria-expanded="true"], #teamVerwaltungView .tv-info-zu:hover { background: var(--tv-fuellung-stark); color: var(--text-1); } #teamVerwaltungView .tv-info-knopf:focus-visible, #teamVerwaltungView .tv-info-zu:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* Larger hit area on touch without moving the title row. */ @media (pointer: coarse) { #teamVerwaltungView .tv-info-knopf { position: relative; } #teamVerwaltungView .tv-info-knopf::after { content: ""; position: absolute; inset: -10px; } } #teamVerwaltungView .tv-info-pop { z-index: var(--z-modal, 200); gap: var(--space-3); max-height: calc(100vh - 24px); overflow-y: auto; overscroll-behavior: contain; } /* Phones: the card is taller than the screen part below the button; above the app bar it keeps its head and close button. */ #teamVerwaltungView .tv-info-kopf { align-items: center; } #teamVerwaltungView .tv-info-kopf strong { font-size: var(--fs-14); } #teamVerwaltungView .tv-info-inhalt { display: flex; flex-direction: column; gap: var(--space-3); padding: 0 var(--space-1); } #teamVerwaltungView .tv-info-spalte { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; } #teamVerwaltungView .tv-info-spalte + .tv-info-spalte { padding-top: var(--space-3); border-top: 1px solid var(--tv-rand); } #teamVerwaltungView .tv-info-breit .tv-info-inhalt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); } #teamVerwaltungView .tv-info-breit .tv-info-spalte + .tv-info-spalte { padding-top: 0; border-top: 0; padding-left: var(--space-5); border-left: 1px solid var(--tv-rand); } #teamVerwaltungView .tv-info-abschnitt { display: flex; flex-direction: column; gap: var(--space-1); } #teamVerwaltungView .tv-info-abschnitt + .tv-info-abschnitt { padding-top: var(--space-3); border-top: 1px solid var(--tv-rand); } #teamVerwaltungView .tv-info-titel { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--text-3); font-size: var(--fs-11); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-wide, .02em); text-transform: uppercase; } #teamVerwaltungView .tv-info-liste { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0 0 0 var(--space-4); color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-normal, 1.45); } #teamVerwaltungView .tv-info-liste li::marker { color: var(--text-3); } #teamVerwaltungView .tv-info-dc { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--tv-fuellung); color: var(--text-2); font-size: var(--fs-11); font-weight: var(--fw-medium); letter-spacing: 0; text-transform: none; } #teamVerwaltungView .tv-info-dc .tv-dc-icon { width: 12px; height: 12px; } #teamVerwaltungView .tv-info-dc-liest { background: var(--tv-fuellung-stark); color: var(--text-1); } #teamVerwaltungView .tv-info-dc-schreibt { background: var(--warning-soft); color: var(--warning); } #teamVerwaltungView .tv-info-discord-schreibt { margin: 0 calc(-1 * var(--space-2)); padding: var(--space-2); border-radius: var(--radius-md); background: color-mix(in srgb, var(--warning) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warning) 28%, transparent); } #teamVerwaltungView .tv-info-abschnitt + .tv-info-discord-schreibt { padding-top: var(--space-2); border-top: 0; } #teamVerwaltungView .tv-info-discord-schreibt .tv-info-liste { color: var(--text-1); } /* ── Phones: the table scrolls sideways inside its card, the person column stays (no page overflow) ── */ @media (max-width: 760px) { #teamVerwaltungView .tv-mount { padding: var(--space-4) 0 var(--space-8); } #teamVerwaltungView .tv-karte { padding: var(--space-4); } /* The hull stays inside the card padding: scrolled cells never run over the card edge. */ #teamVerwaltungView .tv-tabelle-huelle { margin: 0; border-radius: var(--radius-md); } #teamVerwaltungView #teamGruppenBereich .tg-tabelle-huelle { margin: 0; } /* Phones: the columns keep a readable width and the hull scrolls (FRF does the same); Person stays sticky. */ #teamVerwaltungView .tv-matrix { min-width: 840px; } #teamVerwaltungView .tv-matrix col.tv-col-person { width: 124px; } #teamVerwaltungView .tv-matrix col.tv-col-team { width: 136px; } #teamVerwaltungView .tv-matrix thead th.tv-person-kopf, #teamVerwaltungView .tv-matrix tbody th.tv-person { padding-left: var(--space-2); } #teamVerwaltungView .tv-matrix tbody th.tv-person { min-width: 0; max-width: none; } #teamVerwaltungView .tv-zahl { margin-left: 0; } #teamVerwaltungView .tv-suche { max-width: none; } #teamVerwaltungView .tv-funktion { align-items: flex-start; } #teamVerwaltungView #teamGruppenBereich .tg-tabelle td, #teamVerwaltungView #teamGruppenBereich .tg-tabelle td:first-child, #teamVerwaltungView #teamGruppenBereich .tg-tabelle td:last-child { padding-left: 0; padding-right: 0; } } @media (max-width: 640px) { /* Same name as its area (Dashboard, PerpPilot): the area row already says it (design 24.10.2026). */ #teamVerwaltungView .tv-recht-kopf.ist-gleichnamig .tv-recht-titel { visibility: hidden; } /* Design review 24.10.2026: Person and Team filled the width. The chips move under the name, the Team column folds to zero width (cells kept, so the colgroup still lines up), and 2–3 rights show beside the sticky person. */ #teamVerwaltungView .tv-person-team { display: block; margin-top: var(--space-2); } #teamVerwaltungView .tv-person-team .tv-chip { max-width: 100%; } #teamVerwaltungView .tv-matrix col.tv-col-team { width: 0; } #teamVerwaltungView .tv-matrix thead th.tv-team-kopf, #teamVerwaltungView .tv-matrix td.tv-team-zelle { padding: 0; overflow: hidden; visibility: hidden; box-shadow: none; } #teamVerwaltungView .tv-matrix { min-width: 680px; } /* ~80 px per column: area names in normal case so DASHBOARD does not cut off. */ #teamVerwaltungView .tv-matrix thead th.tv-kopf-gruppe { text-transform: none; } } @media (prefers-reduced-motion: reduce) { #teamVerwaltungView .tv-gruppe.tv-rein, #teamVerwaltungView .tv-pop { animation: none; } #teamVerwaltungView .tv-spur, #teamVerwaltungView .tv-knauf, #teamVerwaltungView input.tv-box, #teamVerwaltungView .tv-mount { transition: none; } #teamVerwaltungView .tv-knopf.tv-laeuft::after, #teamVerwaltungView .tv-recht-zelle.tv-laeuft::after { animation: none; } } /* ── Discord sub-tab (24.10.2026, stamp tn2): bot card, summary, channel list grouped by category ── One table with one tbody per category; groups collapse, the list never scrolls in its own box. States are a check mark or a dash (shape, not colour). Below 820 px each channel row becomes a small card. */ #teamVerwaltungView .tv-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } #teamVerwaltungView .tv-kopf-aktion { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } #teamVerwaltungView .tv-dc-stand { color: var(--text-3); font-size: var(--fs-12); font-variant-numeric: tabular-nums; cursor: help; border-radius: var(--radius-sm); } #teamVerwaltungView .tv-dc { display: flex; flex-direction: column; gap: var(--space-4); transition: opacity var(--t-base, .2s); } #teamVerwaltungView .tv-dc.tv-dc-laedt { opacity: .6; } /* Bot cards in one row (24.10.2026): own bot + every chosen bot, equal widths (--tv-dc-n = cards, at most 4 per row, more wrap; --tv-dc-n2 = at most 2); two per row on tablets, stacked on phones. */ #teamVerwaltungView .tv-dc-botreihe { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: start; } @media (min-width: 700px) { #teamVerwaltungView .tv-dc-botreihe { grid-template-columns: repeat(var(--tv-dc-n2, 1), minmax(0, 1fr)); } } @media (min-width: 1100px) { #teamVerwaltungView .tv-dc-botreihe { grid-template-columns: repeat(var(--tv-dc-n, 1), minmax(0, 1fr)); } } #teamVerwaltungView .tv-dc-botreihe .tv-dc-bot .tv-dc-fakt { grid-template-columns: 88px minmax(0, 1fr); } #teamVerwaltungView .tv-dc-botreihe .tv-dc-bot .tv-dc-bot-name { font-size: var(--fs-15); } #teamVerwaltungView .tv-dc-botreihe .tv-dc-fakt-rechte .value-tip, #teamVerwaltungView .tv-dc-botreihe .tv-dc-fakt dd > .value-tip { white-space: nowrap; } #teamVerwaltungView .tv-dc-icon { display: inline-flex; flex-shrink: 0; width: 16px; height: 16px; } #teamVerwaltungView .tv-dc-icon svg { width: 100%; height: 100%; } #teamVerwaltungView .tv-knopf-klein { height: 28px; padding: 0 var(--space-3); font-size: var(--fs-12); } #teamVerwaltungView .value-tip:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); } /* States: check = allowed (strong text), dash = not allowed (dimmed). */ #teamVerwaltungView .tv-dc-z { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } #teamVerwaltungView .tv-dc-ja { color: var(--text-1); } #teamVerwaltungView .tv-dc-ja .tv-dc-icon { color: var(--tv-positiv); } #teamVerwaltungView .tv-dc-nein { color: var(--text-3); opacity: .75; } #teamVerwaltungView .tv-dc-zl { font-size: var(--fs-12); } /* Bot card */ #teamVerwaltungView .tv-dc-bot-kopf { display: flex; align-items: center; gap: var(--space-3); min-width: 0; } #teamVerwaltungView .tv-dc-avatar { display: inline-grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--radius-pill); background: var(--tv-akzent-flaeche); color: var(--tv-akzent); box-shadow: inset 0 0 0 1px var(--tv-akzent-rand); font-size: var(--fs-15); font-weight: var(--fw-semibold); letter-spacing: .02em; } #teamVerwaltungView .tv-dc-bot-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } #teamVerwaltungView .tv-dc-bot-name { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin: 0; font-size: var(--fs-16, var(--fs-15)); font-weight: var(--fw-semibold); overflow-wrap: anywhere; } #teamVerwaltungView .tv-dc-bot-text p { margin: 0; } #teamVerwaltungView .tv-dc-marke { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: var(--radius-sm); background: var(--tv-fuellung-stark); color: var(--text-2); font-size: var(--fs-11); font-weight: var(--fw-semibold); letter-spacing: .04em; text-transform: uppercase; } #teamVerwaltungView .tv-dc-fakten { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: var(--space-3) 0; border-top: 1px solid var(--tv-rand); border-bottom: 1px solid var(--tv-rand); } #teamVerwaltungView .tv-dc-fakt { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: var(--space-3); } #teamVerwaltungView .tv-dc-fakt dt { color: var(--text-3); font-size: var(--fs-12); } #teamVerwaltungView .tv-dc-fakt dd { display: flex; align-items: center; flex-wrap: wrap; gap: 6px var(--space-4); margin: 0; min-width: 0; } #teamVerwaltungView .tv-dc-fakt dd .tv-chip { max-width: 220px; } #teamVerwaltungView .tv-dc-warnungen { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; } #teamVerwaltungView .tv-dc-warnung { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--tv-fuellung); font-size: var(--fs-13); } #teamVerwaltungView .tv-dc-warnung > .tv-dc-icon { margin-top: 2px; } #teamVerwaltungView .tv-dc-warnung-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; } #teamVerwaltungView .tv-dc-warnung-text span { color: var(--text-2); } #teamVerwaltungView .tv-dc-warnung .tv-knopf { flex-shrink: 0; align-self: center; } #teamVerwaltungView .tv-dc-warnung-ok > .tv-dc-icon { color: var(--tv-positiv); } #teamVerwaltungView .tv-dc-warnung-warn { background: var(--warning-soft); } #teamVerwaltungView .tv-dc-warnung-warn > .tv-dc-icon { color: var(--warning); } #teamVerwaltungView .tv-dc-warnung-fehler { background: color-mix(in srgb, var(--danger) 14%, transparent); box-shadow: inset 3px 0 0 var(--danger); } #teamVerwaltungView .tv-dc-warnung-fehler > .tv-dc-icon { color: var(--danger); } /* Filter pills (Designkatalog/Tabs segmented) */ #teamVerwaltungView .tv-dc-pillen { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--radius-pill); background: var(--tv-fuellung); box-shadow: var(--w3-kante-feld, inset 0 0 0 1px var(--border-2)); } #teamVerwaltungView .tv-dc-pille { display: inline-flex; align-items: center; justify-content: center; gap: 6px; 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); white-space: nowrap; cursor: pointer; } #teamVerwaltungView .tv-dc-pille:hover { color: var(--text-1); } #teamVerwaltungView .tv-dc-pille[aria-pressed="true"] { background: var(--tv-fuellung-stark); color: var(--text-1); font-weight: var(--fw-semibold); } #teamVerwaltungView .tv-dc-pille:focus-visible { outline: none; box-shadow: var(--focus-ring); } #teamVerwaltungView .tv-dc-pille-zahl { color: var(--text-3); font-size: var(--fs-12); font-weight: var(--fw-regular); font-variant-numeric: tabular-nums; } /* Badges (Designkatalog/Badge) */ #teamVerwaltungView .tv-dc-badge { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 var(--space-2); box-sizing: border-box; border-radius: var(--radius-pill); font-size: var(--fs-12); font-weight: var(--fw-medium); white-space: nowrap; cursor: help; } #teamVerwaltungView .tv-dc-badge .tv-dc-icon { width: 12px; height: 12px; } #teamVerwaltungView .tv-dc-badge-app { background: var(--tv-akzent-flaeche); color: var(--tv-akzent); box-shadow: inset 0 0 0 1px var(--tv-akzent-rand); } #teamVerwaltungView .tv-dc-badge-heikel { background: var(--warning-soft); color: var(--text-1); } #teamVerwaltungView .tv-dc-badge-heikel .tv-dc-icon { color: var(--warning); } #teamVerwaltungView .tv-dc-badge-fehlt { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--text-1); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 45%, transparent); } #teamVerwaltungView .tv-dc-badge-fehlt .tv-dc-icon { color: var(--danger); } #teamVerwaltungView .tv-dc-badge.tv-chip-mini { height: 18px; font-size: var(--fs-11); } /* Channel table */ #teamVerwaltungView .tv-dc-suche { flex: 1 1 200px; } #teamVerwaltungView .tv-dc-huelle { margin: 0 calc(-1 * var(--space-5)); } #teamVerwaltungView .tv-dc-tabelle { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: var(--fs-13); } #teamVerwaltungView .tv-dc-col-z { width: 104px; } #teamVerwaltungView .tv-dc-col-app { width: 210px; } #teamVerwaltungView .tv-dc-col-heikel { width: 300px; } #teamVerwaltungView .tv-dc-tabelle thead th { padding: var(--space-2) var(--space-3); background: var(--tv-karte); color: var(--text-3); box-shadow: inset 0 -1px 0 var(--tv-rand); font-size: var(--fs-12); font-weight: var(--fw-medium); text-align: left; white-space: nowrap; } #teamVerwaltungView .tv-dc-tabelle thead th:first-child { padding-left: var(--space-5); } /* Channels sit one step in: the channel icon starts where the category name starts (after the 16 px chevron and its gap), a fine guide line runs down from the chevron's centre. --tv-dc-rand is the row's outer padding. */ #teamVerwaltungView .tv-dc-huelle { --tv-dc-rand: var(--space-5); --tv-dc-einzug: calc(var(--tv-dc-rand) + 16px + var(--space-2)); } #teamVerwaltungView .tv-dc-tabelle tbody th.tv-dc-name { position: relative; padding-left: var(--tv-dc-einzug); } #teamVerwaltungView .tv-dc-tabelle tbody th.tv-dc-name::before { content: ''; position: absolute; top: 0; bottom: 0; left: calc(var(--tv-dc-rand) + 7px); width: 1px; box-shadow: inset 1px 0 0 var(--tv-rand); pointer-events: none; } #teamVerwaltungView .tv-dc-tabelle thead th:last-child, #teamVerwaltungView .tv-dc-tabelle td:last-child { padding-right: var(--space-5); } #teamVerwaltungView .tv-dc-tabelle thead .value-tip { cursor: help; } @media (min-width: 1000px) { #teamVerwaltungView .tv-dc-tabelle thead { position: sticky; top: var(--tv-kopf-oben, 0px); z-index: 4; } } /* Category rows read as headings: one fill step above the channel rows, a gap in card colour above (not on the first). */ #teamVerwaltungView .tv-dc-kat th { padding: 0; background: var(--tv-fuellung); border-bottom: 1px solid var(--tv-rand); } #teamVerwaltungView .tv-dc-gruppe + .tv-dc-gruppe .tv-dc-kat th { border-top: var(--space-2) solid var(--tv-karte); } #teamVerwaltungView .tv-dc-kat-knopf { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; width: 100%; min-height: 40px; box-sizing: border-box; padding: var(--space-2) var(--space-5); border: 0; background: transparent; color: var(--text-1); font: inherit; font-size: var(--fs-13); text-align: left; cursor: pointer; } #teamVerwaltungView .tv-dc-kat-knopf:hover { background: var(--tv-fuellung-stark); } #teamVerwaltungView .tv-dc-kat-knopf:focus-visible { outline: none; box-shadow: var(--focus-ring); } #teamVerwaltungView .tv-dc-pfeil { color: var(--text-3); transition: transform var(--t-fast, .12s); } #teamVerwaltungView .tv-dc-kat-knopf[aria-expanded="true"] .tv-dc-pfeil { transform: rotate(90deg); } #teamVerwaltungView .tv-dc-kat-name { font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wide, .02em); font-size: var(--fs-12); overflow-wrap: anywhere; } #teamVerwaltungView .tv-dc-kat-meta { margin-left: auto; color: var(--text-3); font-size: var(--fs-12); font-variant-numeric: tabular-nums; } #teamVerwaltungView .tv-dc-zu .tv-dc-kat-name { color: var(--text-2); } #teamVerwaltungView .tv-dc-zeile > * { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--tv-rand); background: var(--tv-karte); vertical-align: middle; text-align: left; font-weight: var(--fw-regular); } #teamVerwaltungView .tv-dc-gruppe:last-child .tv-dc-zeile:last-child > * { border-bottom: 0; } #teamVerwaltungView .tv-dc-zeile:hover > * { background: var(--tv-zeile-hover); } #teamVerwaltungView .tv-dc-zeile.tv-dc-markiert > * { box-shadow: inset 0 1px 0 var(--tv-akzent-rand), inset 0 -1px 0 var(--tv-akzent-rand); background: var(--tv-akzent-flaeche); } #teamVerwaltungView .tv-dc-name-inhalt { display: flex; align-items: center; gap: var(--space-2); min-width: 0; } #teamVerwaltungView .tv-dc-typ { display: inline-flex; color: var(--text-3); cursor: help; } #teamVerwaltungView .tv-dc-kanalname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-1); } #teamVerwaltungView .tv-dc-aus .tv-dc-kanalname { color: var(--text-3); } #teamVerwaltungView .tv-dc-zelle .tv-dc-zl { display: none; } #teamVerwaltungView .tv-dc-app, #teamVerwaltungView .tv-dc-heikel { line-height: 1.9; } #teamVerwaltungView .tv-dc-app .tv-dc-badge, #teamVerwaltungView .tv-dc-heikel .tv-dc-badge { margin: 2px 4px 2px 0; } /* Error card and first-load skeleton (fixed heights, no layout jump) */ #teamVerwaltungView .tv-dc-fehler .tv-leer { max-width: none; } #teamVerwaltungView .tv-dc-fehler-icon { width: 28px; height: 28px; color: var(--danger); } #teamVerwaltungView .tv-dc-fehler-titel { margin: 0; color: var(--text-1); font-size: var(--fs-15); font-weight: var(--fw-semibold); } #teamVerwaltungView .tv-dc-banner strong { font-weight: var(--fw-semibold); } #teamVerwaltungView .tv-dc-skelett { border-radius: var(--radius-md); background: linear-gradient(90deg, var(--tv-fuellung) 0%, var(--tv-fuellung-stark) 50%, var(--tv-fuellung) 100%); background-size: 200% 100%; animation: tv-dc-schimmer 1.4s ease-in-out infinite; } @keyframes tv-dc-schimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } } @media (max-width: 1180px) { #teamVerwaltungView .tv-dc-col-z { width: 92px; } #teamVerwaltungView .tv-dc-col-app { width: 170px; } #teamVerwaltungView .tv-dc-col-heikel { width: 220px; } } /* Below 820 px: each channel is a small card (name, then the three states with their word, then badges). */ @media (max-width: 820px) { #teamVerwaltungView .tv-dc-tabelle, #teamVerwaltungView .tv-dc-tabelle tbody, #teamVerwaltungView .tv-dc-tabelle tr, #teamVerwaltungView .tv-dc-tabelle th, #teamVerwaltungView .tv-dc-tabelle td { display: block; } #teamVerwaltungView .tv-dc-tabelle thead, #teamVerwaltungView .tv-dc-tabelle colgroup { display: none; } #teamVerwaltungView .tv-dc-tabelle tr.tv-dc-zeile { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--space-4); padding: var(--space-3) var(--tv-dc-rand) var(--space-3) var(--tv-dc-einzug); border-bottom: 1px solid var(--tv-rand); background: var(--tv-karte); } #teamVerwaltungView .tv-dc-tabelle tbody th.tv-dc-name { position: static; } #teamVerwaltungView .tv-dc-gruppe:last-child tr.tv-dc-zeile:last-child { border-bottom: 0; } #teamVerwaltungView .tv-dc-zeile > * { padding: 0 !important; border: 0 !important; background: transparent !important; } #teamVerwaltungView .tv-dc-zeile:hover { background: var(--tv-zeile-hover); } #teamVerwaltungView .tv-dc-zeile > th.tv-dc-name { flex: 1 0 100%; } #teamVerwaltungView .tv-dc-zelle .tv-dc-zl { display: inline; } #teamVerwaltungView .tv-dc-zeile > .tv-dc-leer { display: none; } #teamVerwaltungView .tv-dc-app, #teamVerwaltungView .tv-dc-heikel { flex: 1 0 100%; line-height: 1.9; } #teamVerwaltungView .tv-dc-kat-meta { margin-left: 0; flex: 1 0 100%; padding-left: calc(16px + var(--space-2)); } } @media (max-width: 760px) { #teamVerwaltungView .tv-unter { padding: 0 var(--space-3); } #teamVerwaltungView .tv-dc-huelle { margin: 0 calc(-1 * var(--space-4)); } /* Phones: a 16 px step (chevron width) instead of chevron + gap, the bot lines need the room. */ #teamVerwaltungView .tv-dc-huelle { --tv-dc-rand: var(--space-4); --tv-dc-einzug: calc(var(--tv-dc-rand) + 16px); } #teamVerwaltungView .tv-dc-kat-knopf { padding-left: var(--space-4); padding-right: var(--space-4); } #teamVerwaltungView .tv-dc-tabelle tr.tv-dc-zeile { padding-left: var(--tv-dc-einzug); padding-right: var(--tv-dc-rand); } #teamVerwaltungView .tv-dc-fakt { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); } #teamVerwaltungView .tv-kopf-aktion { width: 100%; justify-content: space-between; } } @media (max-width: 560px) { #teamVerwaltungView .tv-dc-pillen { display: grid; grid-template-columns: 1fr 1fr; width: 100%; border-radius: var(--radius-lg); } #teamVerwaltungView .tv-dc-pille { border-radius: var(--radius-md); } } /* ── Discord, several bots (contract v2, 24.10.2026): chooser chips, compact bot cards, one column group per bot ── Column widths mirror DC_BREITE in teamVerwaltung.js (Kanal ≥ 180, per bot three columns of 52 plus Heikel 36, App 140; wider hulls stretch); a hull narrower than that (or a phone) gets .tv-dc-karten: one card per channel with one line per bot. */ #teamVerwaltungView .tv-dc-avatar-klein { width: 22px; height: 22px; font-size: var(--fs-11); letter-spacing: 0; } #teamVerwaltungView .tv-dc-avatar-mittel { width: 36px; height: 36px; font-size: var(--fs-13); } #teamVerwaltungView .tv-dc-avatar-fremd { background: var(--tv-fuellung-stark); color: var(--text-1); box-shadow: inset 0 0 0 1px var(--border-2); } /* Chooser: chips like Designkatalog/Badge, pressed = filled with a check, not pressed = outline with a plus. */ #teamVerwaltungView .tv-dc-wahl { display: flex; flex-direction: column; gap: var(--space-3); } #teamVerwaltungView .tv-dc-wahl-kopf { display: flex; align-items: baseline; gap: var(--space-2) var(--space-3); flex-wrap: wrap; } #teamVerwaltungView .tv-dc-wahl-titel { margin: 0; font-size: var(--fs-14); font-weight: var(--fw-semibold); } #teamVerwaltungView .tv-dc-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); } #teamVerwaltungView .tv-dc-chip { display: inline-flex; align-items: center; gap: var(--space-2); height: 34px; max-width: 100%; box-sizing: border-box; padding: 0 var(--space-3) 0 6px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--border-2); font: inherit; font-size: var(--fs-13); cursor: pointer; transition: background var(--t-fast, .12s), color var(--t-fast, .12s), box-shadow var(--t-fast, .12s); } #teamVerwaltungView .tv-dc-chip:hover { color: var(--text-1); box-shadow: inset 0 0 0 1px var(--border-3); } #teamVerwaltungView .tv-dc-chip[aria-pressed="true"] { background: var(--tv-fuellung-stark); color: var(--text-1); font-weight: var(--fw-semibold); box-shadow: inset 0 0 0 1px var(--tv-akzent-rand); } #teamVerwaltungView .tv-dc-chip[aria-disabled="true"] { cursor: default; } #teamVerwaltungView .tv-dc-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); } #teamVerwaltungView .tv-dc-chip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #teamVerwaltungView .tv-dc-chip .tv-dc-marke { height: 16px; font-size: var(--fs-11); } #teamVerwaltungView .tv-dc-chip-zeichen { width: 14px; height: 14px; color: var(--text-3); } #teamVerwaltungView .tv-dc-chip[aria-pressed="true"] .tv-dc-chip-zeichen { color: var(--tv-positiv); } /* Compact cards of the other chosen bots */ #teamVerwaltungView .tv-dc-botklein { display: flex; flex-direction: column; gap: var(--space-3); } #teamVerwaltungView .tv-dc-botklein .tv-dc-bot-name { font-size: var(--fs-15); } #teamVerwaltungView .tv-dc-botklein-zahlen { align-self: flex-start; margin: 0; color: var(--text-2); font-size: var(--fs-13); font-variant-numeric: tabular-nums; cursor: help; } #teamVerwaltungView .tv-dc-botklein-zahlen strong { color: var(--text-1); font-weight: var(--fw-semibold); } #teamVerwaltungView .tv-dc-botklein .tv-dc-fakt { grid-template-columns: 88px minmax(0, 1fr); } #teamVerwaltungView .tv-dc-botklein .tv-dc-fakt-rechte dd { column-gap: var(--space-3); } #teamVerwaltungView .tv-dc-botklein .tv-dc-fakt-rechte .value-tip { white-space: nowrap; } #teamVerwaltungView .tv-dc-botklein-notiz { margin: 0; font-size: var(--fs-12); } /* Bug Report liest (24.10.2026): trigger like the catalog dropdown (field with chevron), chosen channels as chips with their state (look back running, cannot read); the panel is the shared catalog popover (.tv-pop). */ #teamVerwaltungView .tv-dc-br { gap: var(--space-3); } #teamVerwaltungView .tv-dc-br-zeile { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-4); min-width: 0; } #teamVerwaltungView .tv-dc-br-knopf { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-width: 200px; height: 36px; box-sizing: border-box; padding: 0 var(--space-3) 0 var(--space-4); border: 0; border-radius: var(--radius-pill); background: var(--input-bg, var(--tv-fuellung)); box-shadow: var(--w3-kante-feld, inset 0 0 0 1px var(--input-border, var(--border-2))); color: var(--text-1); font: inherit; font-size: var(--fs-13); cursor: pointer; } #teamVerwaltungView .tv-dc-br-knopf:hover { background: var(--tv-fuellung-stark); } #teamVerwaltungView .tv-dc-br-knopf:focus-visible { outline: none; box-shadow: var(--focus-ring); } #teamVerwaltungView .tv-dc-br-pfeil { display: inline-flex; color: var(--text-3); transform: rotate(90deg); transition: transform var(--t-fast, .12s); } #teamVerwaltungView .tv-dc-br-knopf[aria-expanded="true"] .tv-dc-br-pfeil { transform: rotate(-90deg); } #teamVerwaltungView .tv-dc-br-leser { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-2); font-size: var(--fs-13); min-width: 0; } #teamVerwaltungView .tv-dc-br-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; } #teamVerwaltungView .tv-dc-br-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; max-width: 100%; box-sizing: border-box; padding: 2px var(--space-3) 2px var(--space-2); border-radius: var(--radius-pill); background: var(--tv-fuellung); color: var(--text-1); font-size: var(--fs-12); } #teamVerwaltungView .tv-dc-br-chip > .tv-dc-icon { flex-shrink: 0; width: 14px; height: 14px; color: var(--text-3); } #teamVerwaltungView .tv-dc-br-chip-name { min-width: 0; overflow-wrap: anywhere; } #teamVerwaltungView .tv-dc-br-chip-zustand { display: block; flex: 0 1 auto; min-width: 0; color: var(--text-2); overflow-wrap: anywhere; } #teamVerwaltungView .tv-dc-br-chip-zustand::before { content: "· "; color: var(--text-3); } #teamVerwaltungView .tv-dc-br-chip-zustand .tv-dc-icon { width: 12px; height: 12px; margin-right: 4px; vertical-align: -2px; } #teamVerwaltungView .tv-dc-br-chip-laeuft { box-shadow: inset 0 0 0 1px var(--tv-akzent-rand); } #teamVerwaltungView .tv-dc-br-chip-laeuft .tv-dc-br-chip-zustand { color: var(--tv-akzent); } #teamVerwaltungView .tv-dc-br-chip-warn { background: var(--warning-soft); } #teamVerwaltungView .tv-dc-br-chip-warn .tv-dc-br-chip-zustand .tv-dc-icon { color: var(--warning); } #teamVerwaltungView .tv-dc-br-pop { max-height: min(620px, calc(100vh - 16px)); } /* More items below: the last row fades out (mask, no colour). */ #teamVerwaltungView .tv-dc-br-pop .tv-dc-br-liste.tv-dc-br-mehr { -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 28px), transparent); mask-image: linear-gradient(to bottom, black calc(100% - 28px), transparent); } /* Übernehmen: primary when active, plainly disabled until something changed. */ #teamVerwaltungView .tv-dc-br-pop .tv-knopf-primaer:disabled { opacity: 1; background: var(--tv-fuellung); color: var(--text-3); box-shadow: var(--w3-kante-feld, inset 0 0 0 1px var(--border-2)); cursor: not-allowed; } /* Team/mod-only channel newly checked: confirmation inside the panel. */ #teamVerwaltungView .tv-dc-br-bestaetigung { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--warning-soft); font-size: var(--fs-12); } #teamVerwaltungView .tv-dc-br-bestaetigung[hidden] { display: none; } #teamVerwaltungView .tv-dc-br-bestaetigung > .tv-dc-icon { margin-top: 1px; color: var(--warning); } #teamVerwaltungView .tv-dc-br-bestaetigung-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; } #teamVerwaltungView .tv-dc-br-bestaetigung-text > span { color: var(--text-2); } #teamVerwaltungView .tv-dc-br-bestaetigung-box { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-1); color: var(--text-1); font-weight: var(--fw-medium); cursor: pointer; } /* × on a chip */ #teamVerwaltungView .tv-dc-br-chip { padding-right: 4px; } #teamVerwaltungView .tv-dc-br-weg { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 2px; padding: 0; border: 0; border-radius: var(--radius-pill); flex-shrink: 0; background: transparent; color: var(--text-3); cursor: pointer; } #teamVerwaltungView .tv-dc-br-weg .tv-dc-icon { width: 12px; height: 12px; } #teamVerwaltungView .tv-dc-br-weg:hover { background: var(--tv-fuellung-stark); color: var(--text-1); } #teamVerwaltungView .tv-dc-br-weg:focus-visible { outline: none; box-shadow: var(--focus-ring); } #teamVerwaltungView .tv-dc-br-weg:disabled { cursor: default; opacity: .5; } /* Two or more yellow hints of the own bot: one box, one line each, „Zeigen“ as a link. */ #teamVerwaltungView .tv-dc-sammel { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; list-style: none; } #teamVerwaltungView .tv-dc-sammel-zeile { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); min-width: 0; } #teamVerwaltungView .tv-dc-sammel-text { min-width: 0; font-weight: var(--fw-medium); cursor: help; } #teamVerwaltungView .tv-dc-link { flex-shrink: 0; padding: 0; border: 0; background: transparent; color: var(--tv-akzent); font: inherit; font-size: var(--fs-12); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; border-radius: var(--radius-sm); } #teamVerwaltungView .tv-dc-link:hover { color: var(--text-1); } #teamVerwaltungView .tv-dc-link:focus-visible { outline: none; box-shadow: var(--focus-ring); } #teamVerwaltungView .tv-dc-br-pop .tv-dc-br-liste { max-height: min(400px, calc(100vh - 280px)); } #teamVerwaltungView .tv-dc-br-item .tv-dc-br-typ { width: 14px; height: 14px; color: var(--text-3); } #teamVerwaltungView .tv-dc-br-item .tv-pop-meta { white-space: normal; text-align: right; max-width: 48%; } #teamVerwaltungView .tv-dc-br-item-warn .tv-pop-meta { color: var(--warning); } @media (max-width: 560px) { #teamVerwaltungView .tv-dc-br-knopf { flex: 1 1 100%; } } @media (prefers-reduced-motion: reduce) { #teamVerwaltungView .tv-dc-br-pfeil { transition: none; } } /* "für:" next to the filter pills */ #teamVerwaltungView .tv-dc-fuer { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-width: 0; } #teamVerwaltungView .tv-dc-fuer-label { color: var(--text-3); font-size: var(--fs-12); cursor: help; } #teamVerwaltungView .tv-dc-pillen-klein { flex-wrap: wrap; max-width: 100%; border-radius: var(--radius-lg); } #teamVerwaltungView .tv-dc-pillen-klein .tv-dc-pille { height: 26px; padding: 0 var(--space-2); font-size: var(--fs-12); } /* Table with column groups */ #teamVerwaltungView .tv-dc-mehr .tv-dc-col-name { min-width: 180px; } /* One or two bots: the spare width goes to all columns, not only to Kanal (groups stay readable next to the names). */ #teamVerwaltungView .tv-dc-mehr[data-n="1"] .tv-dc-col-name, #teamVerwaltungView .tv-dc-mehr[data-n="2"] .tv-dc-col-name { width: 30%; } #teamVerwaltungView .tv-dc-mehr .tv-dc-col-s { width: 52px; } #teamVerwaltungView .tv-dc-mehr .tv-dc-col-s.tv-dc-col-hk { width: 36px; } #teamVerwaltungView .tv-dc-mehr .tv-dc-col-app { width: 140px; } /* From 1180 px (any number of bots): Kanal gets a capped share, Heikel and App fixed, the rights columns share the rest, so wide screens widen the bot groups instead of leaving the Kanal column empty. Mirrors DC_BREITE_WEIT in teamVerwaltung.js. 22vw - 20px ≈ 22 % of the hull (hull = viewport - 96 px here); Chrome treats a clamp() with % on a as auto. */ @media (min-width: 1180px) { #teamVerwaltungView .tv-dc-mehr .tv-dc-col-name, #teamVerwaltungView .tv-dc-mehr[data-n="1"] .tv-dc-col-name, #teamVerwaltungView .tv-dc-mehr[data-n="2"] .tv-dc-col-name { width: clamp(240px, 22vw - 20px, 380px); } #teamVerwaltungView .tv-dc-mehr .tv-dc-col-s:not(.tv-dc-col-hk) { width: auto; } #teamVerwaltungView .tv-dc-mehr .tv-dc-col-s.tv-dc-col-hk { width: 48px; } #teamVerwaltungView .tv-dc-mehr .tv-dc-col-app { width: 200px; } /* One or two bots (24.10.2026, design): rights columns stay narrow next to the channel name; the App column takes the rest. */ #teamVerwaltungView .tv-dc-mehr[data-n="1"] .tv-dc-col-s:not(.tv-dc-col-hk), #teamVerwaltungView .tv-dc-mehr[data-n="2"] .tv-dc-col-s:not(.tv-dc-col-hk) { width: 120px; } #teamVerwaltungView .tv-dc-mehr[data-n="1"] .tv-dc-col-app, #teamVerwaltungView .tv-dc-mehr[data-n="2"] .tv-dc-col-app { width: auto; } } #teamVerwaltungView .tv-dc-botzelle, #teamVerwaltungView .tv-dc-nur-karte { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } #teamVerwaltungView .tv-dc-botzelle { display: none; } #teamVerwaltungView .tv-dc-mehr .tv-dc-g0 { box-shadow: inset 1px 0 0 var(--tv-rand); } #teamVerwaltungView .tv-dc-mehr thead th { vertical-align: bottom; } #teamVerwaltungView .tv-dc-mehr thead .tv-dc-kopf-bot { padding: var(--space-2) var(--space-2) var(--space-1); color: var(--text-1); box-shadow: inset 1px 0 0 var(--tv-rand); } #teamVerwaltungView .tv-dc-kopf-bot-inhalt { display: flex; align-items: center; justify-content: center; gap: var(--space-2); min-width: 0; } #teamVerwaltungView .tv-dc-kopf-bot-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-13); font-weight: var(--fw-semibold); } #teamVerwaltungView .tv-dc-mehr thead .tv-dc-kopf-s { padding: var(--space-1) 2px var(--space-2); text-align: center; font-size: var(--fs-11); letter-spacing: 0; } #teamVerwaltungView .tv-dc-mehr thead .tv-dc-kopf-s.tv-dc-g0 { box-shadow: inset 1px 0 0 var(--tv-rand), inset 0 -1px 0 var(--tv-rand); } #teamVerwaltungView .tv-dc-mehr thead .tv-dc-kopf-unter th:first-child { padding-left: 2px; } #teamVerwaltungView .tv-dc-mehr thead .tv-dc-kopf-unter th:last-child { padding-right: 2px; } #teamVerwaltungView .tv-dc-mehr thead .tv-dc-kopf-app { padding-right: var(--space-5); box-shadow: inset 1px 0 0 var(--tv-rand), inset 0 -1px 0 var(--tv-rand); } #teamVerwaltungView .tv-dc-mehr .tv-dc-zeile > .tv-dc-zelle.tv-dc-s { padding: var(--space-2) 2px; text-align: center; } #teamVerwaltungView .tv-dc-mehr .tv-dc-zeile > .tv-dc-zelle.tv-dc-g0 { box-shadow: inset 1px 0 0 var(--tv-rand); } #teamVerwaltungView .tv-dc-mehr .tv-dc-zeile > .tv-dc-app { box-shadow: inset 1px 0 0 var(--tv-rand); } #teamVerwaltungView .tv-dc-mehr .tv-dc-hk .tv-dc-badge { gap: 2px; padding: 0 4px; } #teamVerwaltungView .tv-dc-mehr thead .tv-dc-kopf-hk-icon { display: inline-flex; vertical-align: middle; color: var(--text-3); cursor: help; } #teamVerwaltungView .tv-dc-mehr thead .tv-dc-kopf-hk-icon .tv-dc-icon { width: 14px; height: 14px; } #teamVerwaltungView .tv-dc-mehr .tv-dc-kat > * { background: var(--tv-fuellung); border-bottom: 1px solid var(--tv-rand); } #teamVerwaltungView .tv-dc-mehr .tv-dc-gruppe + .tv-dc-gruppe .tv-dc-kat > * { border-top: var(--space-2) solid var(--tv-karte); } #teamVerwaltungView .tv-dc-mehr .tv-dc-kat-bot { padding: var(--space-2); color: var(--text-3); font-size: var(--fs-12); font-variant-numeric: tabular-nums; text-align: center; white-space: nowrap; } #teamVerwaltungView .tv-dc-mehr .tv-dc-kat-app { box-shadow: inset 1px 0 0 var(--tv-rand); } /* Table mode: the category button only has the Kanal column; the count moves below when the name needs the room. */ #teamVerwaltungView .tv-dc-huelle:not(.tv-dc-karten) .tv-dc-mehr .tv-dc-kat-knopf { gap: var(--space-1) var(--space-2); } #teamVerwaltungView .tv-dc-huelle:not(.tv-dc-karten) .tv-dc-mehr .tv-dc-kat-name { flex: 1 1 0; min-width: min(9em, 100% - 24px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #teamVerwaltungView .tv-dc-huelle:not(.tv-dc-karten) .tv-dc-mehr .tv-dc-kat-meta { flex: 0 0 auto; margin-left: auto; } /* One card per channel: name, one line per bot ("Name: ✓ Sehen ✓ Lesen – Schreiben ⚠ 1"), then the App badges. */ #teamVerwaltungView .tv-dc-karten .tv-dc-mehr, #teamVerwaltungView .tv-dc-karten .tv-dc-mehr tbody, #teamVerwaltungView .tv-dc-karten .tv-dc-mehr tr, #teamVerwaltungView .tv-dc-karten .tv-dc-mehr th, #teamVerwaltungView .tv-dc-karten .tv-dc-mehr td { display: block; } #teamVerwaltungView .tv-dc-karten .tv-dc-mehr thead, #teamVerwaltungView .tv-dc-karten .tv-dc-mehr colgroup { display: none; } #teamVerwaltungView .tv-dc-karten .tv-dc-mehr tr.tv-dc-zeile { display: grid; grid-template-columns: minmax(0, max-content) repeat(4, max-content); justify-content: start; align-items: center; position: relative; gap: 6px var(--space-3); padding: var(--space-3) var(--tv-dc-rand) var(--space-3) var(--tv-dc-einzug); border-bottom: 1px solid var(--tv-rand); background: var(--tv-karte); } #teamVerwaltungView .tv-dc-karten .tv-dc-mehr .tv-dc-zeile > th.tv-dc-name { position: static; } #teamVerwaltungView .tv-dc-karten .tv-dc-mehr .tv-dc-gruppe:last-child tr.tv-dc-zeile:last-child { border-bottom: 0; } #teamVerwaltungView .tv-dc-huelle.tv-dc-karten .tv-dc-mehr .tv-dc-zeile > * { padding: 0; border: 0; background: transparent; box-shadow: none; text-align: left; } #teamVerwaltungView .tv-dc-karten .tv-dc-mehr .tv-dc-zeile:hover { background: var(--tv-zeile-hover); } #teamVerwaltungView .tv-dc-karten .tv-dc-mehr .tv-dc-zeile > th.tv-dc-name, #teamVerwaltungView .tv-dc-karten .tv-dc-mehr .tv-dc-zeile > .tv-dc-app { grid-column: 1 / -1; } #teamVerwaltungView .tv-dc-karten .tv-dc-mehr .tv-dc-zeile > .tv-dc-app.tv-dc-leer { display: none; } #teamVerwaltungView .tv-dc-karten .tv-dc-mehr .tv-dc-zeile > .tv-dc-botzelle { position: static; display: flex; align-items: center; gap: 6px; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; max-width: 132px; color: var(--text-2); font-size: var(--fs-12); } #teamVerwaltungView .tv-dc-karten .tv-dc-botzelle-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Phones: the initials avatar names the bot (full name in the cell's title), so Sehen/Lesen/Schreiben fit one line. */ @media (max-width: 420px) { #teamVerwaltungView .tv-dc-karten .tv-dc-botzelle-name { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); } } #teamVerwaltungView .tv-dc-karten .tv-dc-mehr .tv-dc-zelle .tv-dc-zl { display: inline; } #teamVerwaltungView .tv-dc-karten .tv-dc-mehr .tv-dc-hk-leer { visibility: hidden; } /* Category row as cards: the button over the full width, below it the bots' counts, indented under the name. */ #teamVerwaltungView .tv-dc-karten .tv-dc-mehr tr.tv-dc-kat { --tv-dc-kat-einzug: calc(var(--tv-dc-rand) + 16px + var(--space-2)); display: flex; flex-wrap: wrap; gap: 2px var(--space-3); padding: 0 var(--tv-dc-rand) var(--space-2) var(--tv-dc-kat-einzug); background: var(--tv-fuellung); border-bottom: 1px solid var(--tv-rand); } #teamVerwaltungView .tv-dc-karten .tv-dc-mehr .tv-dc-gruppe + .tv-dc-gruppe tr.tv-dc-kat { border-top: var(--space-2) solid var(--tv-karte); } #teamVerwaltungView .tv-dc-huelle.tv-dc-karten .tv-dc-mehr .tv-dc-kat > * { border: 0; box-shadow: none; background: transparent; } #teamVerwaltungView .tv-dc-karten .tv-dc-mehr .tv-dc-kat > th { flex: 0 0 auto; width: calc(100% + var(--tv-dc-kat-einzug) + var(--tv-dc-rand)); margin: 0 calc(-1 * var(--tv-dc-rand)) 0 calc(-1 * var(--tv-dc-kat-einzug)); } #teamVerwaltungView .tv-dc-karten .tv-dc-mehr .tv-dc-kat-knopf { padding-bottom: var(--space-1); } #teamVerwaltungView .tv-dc-karten .tv-dc-mehr .tv-dc-kat-bot { padding: 0; text-align: left; } #teamVerwaltungView .tv-dc-karten .tv-dc-mehr .tv-dc-kat-app { display: none; } #teamVerwaltungView .tv-dc-karten .tv-dc-nur-karte { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; } @media (max-width: 760px) { #teamVerwaltungView .tv-dc-karten .tv-dc-mehr tr.tv-dc-zeile { column-gap: var(--space-2); } #teamVerwaltungView .tv-dc-karten .tv-dc-mehr .tv-dc-zeile > .tv-dc-botzelle { max-width: 104px; } } @media (max-width: 560px) { #teamVerwaltungView .tv-dc-fuer { width: 100%; } } @media (prefers-reduced-motion: reduce) { #teamVerwaltungView .tv-dc, #teamVerwaltungView .tv-dc-pfeil, #teamVerwaltungView .tv-dc-chip { transition: none; } #teamVerwaltungView .tv-dc-skelett { animation: none; } }