/* Mission Control — app styles built on Quantiz® tokens */
/* tokens.css wird separat via ` ist kein
`HTMLElement`: Die Eigenschaft `hidden` existiert dort nicht, eine
Zuweisung in JavaScript legt nur eine wirkungslose Eigenschaft an. Und das
gleichnamige Attribut trägt hier ebenfalls nicht — die UA-Regel
`[hidden] { display: none }` gilt im HTML-Namensraum und greift auf einem
SVG nicht. Gemessen: `hidden`-Attribut gesetzt, `display: block`,
Breite > 0. Der Ring wäre also dauerhaft sichtbar gewesen, obwohl der Code
ihn zu verstecken schien.
Deshalb ausdrücklich hier, und die Sichtbarkeit über eine Klasse. */
display: none;
position: absolute;
/* Der Ring liegt **um** den Knopf, nicht in ihm (T-171). `inset` statt fester
Maße: `.topbar .icon-btn` misst 36 px — nicht 40, wie die Strukturdoku bis
T-167 behauptet hat —, und eine feste Angabe hier ginge bei der nächsten
Änderung daneben.
Warum negativ: Zwischen Symbol (18 px, Radius 25 Einheiten im viewBox) und
innerstem Bogen (`r=29` bei Strichstärke 5, Innenkante 26,5) lagen
gemessene **0,54 px** — die Bögen klebten am Symbol. Nach innen ist die
Luft nicht zu holen, das machte den Abstand kleiner; nach außen war im
Knopf keine, der äußere Bogen endet bei 49,5 von 50. Neben dem Knopf sind
dagegen 14 px frei. Der Ring wächst deshalb auf 42 px und belegt davon
3 px je Seite — 11 px bleiben zum Nachbarn. */
inset: -3px;
pointer-events: none;
}
.ai-ring.is-sichtbar { display: block; }
.ai-ring_bogen {
fill: none;
stroke-width: 5;
stroke-linecap: round;
/* `view-box` statt `fill-box`: Der Drehpunkt ist die Mitte des Koordinaten-
systems (50/50), nicht die Mitte des jeweiligen Bogens — sonst kreiste
jeder Bogen um sich selbst statt um das Symbol. */
transform-box: view-box;
transform-origin: 50px 50px;
/* `--q-loader-speed` statt des `--q-speed` aus dem Entwurf: Die Anwendung
führt den Tempofaktor bereits unter diesem Namen (ladeanzeige.css). Ein
zweiter Name für dieselbe Stellschraube hieße, dass eine Verstellung nur
die Hälfte der Anzeigen erreicht. */
animation: ai-ring-umlauf calc(2.4s / var(--q-loader-speed, 1)) linear infinite;
}
.ai-ring_bogen:nth-child(1) { stroke: var(--q-highlight-3); }
.ai-ring_bogen:nth-child(2) {
stroke: var(--q-highlight-1);
animation-duration: calc(3s / var(--q-loader-speed, 1));
animation-direction: reverse;
}
.ai-ring_bogen:nth-child(3) {
stroke: var(--q-highlight-2);
animation-duration: calc(3.6s / var(--q-loader-speed, 1));
}
@keyframes ai-ring-umlauf { to { transform: rotate(360deg); } }
/* Ohne Bewegung bleibt der Ring **stehen und sichtbar**. Das ist der Grund,
warum die Form die Aussage trägt: Drei ruhende Bögen sind von einem Punkt
ebenso zu unterscheiden wie drei kreisende. Ein `display: none` hätte die
Aussage für diese Nutzenden gelöscht. */
@media (prefers-reduced-motion: reduce) {
.ai-ring_bogen { animation: none; }
}
.topbar .search {
display: flex;
align-items: center;
gap: 8px;
background: var(--surface-soft);
border: 1px solid transparent;
border-radius: 999px;
padding: 6px 14px;
width: 100%;
transition: border-color var(--dur-fast) var(--ease-std), background var(--dur-fast) var(--ease-std);
}
.topbar .search:focus-within { background: #fff; }
.topbar .search input {
border: 0; outline: 0; background: transparent;
flex: 1; font-size: 0.84375rem;
font-weight: var(--w-regular);
}
.topbar .search .icon {
width: 16px; height: 16px;
background: url("../assets/icons/search.svg") center / contain no-repeat;
opacity: 0.6;
}
.topbar .icon-btn {
width: 36px; height: 36px;
border-radius: 50%;
display: grid; place-items: center;
transition: background var(--dur-fast) var(--ease-std);
position: relative;
}
.topbar .icon-btn:hover { background: var(--surface-soft); }
.topbar .icon-btn .ic {
width: 18px; height: 18px;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
.topbar .icon-btn .dot {
position: absolute; top: 8px; right: 9px;
width: 8px; height: 8px; background: var(--danger); border-radius: 50%;
border: 2px solid #fff;
}
/* Das Benachrichtigungsfach stand bis T-188 hier: `.notif-wrap`,
`.notif-drawer`, `.notif-drawer-head`, `.notif-drawer-title`,
`.notif-drawer-body`. Es ist in die Hausform uebersiedelt und liegt jetzt in
`public/css/components/benachrichtigungen.css` — eigene Datei, Praefix mit
Unterstrichen, Zustaende als Klassen, wie `ki_kennzeichnung`. Die alten
Regeln sind entfernt und nicht liegengeblieben: Zwei Definitionen derselben
Komponente waeren das Anti-Muster aus ucs.md §25.4. */
/* ─ Main ─ */
.main {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 24px 28px 60px 28px;
}
.main.no-pad { padding: 0; }
/* ── Page header (eyebrow + title + actions) ───────────────────────────── */
.page-head {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 16px 24px;
margin-bottom: 22px;
}
/* Der Textblock behält eine lesbare Breite (T-310). Die Knöpfe brechen nicht
um und schrumpfen nicht — bis dahin gab deshalb der Text nach: gemessen im
Lagebild 398 px bei 1280, 218 px bei 1100, 119 px bei 900 px Fensterbreite
(dort ragten die Knöpfe 101 px über den Rand). Jetzt gilt: Passen Text
(mindestens 28rem) und Aktionen nicht nebeneinander, rückt die Aktionsreihe
unter den Text, linksbündig. Auf schmalen Geräten darf der Text unter 28rem
schrumpfen (min-width: 0), er steht dann ohnehin allein in seiner Zeile. */
.page-head > :not(.actions) { flex: 1 1 28rem; min-width: 0; }
.page-head > .actions { flex: 0 1 auto; flex-wrap: wrap; }
.page-head .eyebrow {
font-size: 0.6875rem;
letter-spacing: var(--tracking-xwide);
text-transform: uppercase;
color: var(--q-highlight-2);
font-weight: var(--w-bold);
margin-bottom: 6px;
}
.page-head h1 {
font-family: var(--font-display);
font-weight: var(--w-bold);
font-size: 1.875rem;
color: var(--q-dark);
line-height: 1.15;
letter-spacing: -0.01em;
margin: 0;
}
.page-head .actions { display: flex; gap: 10px; }
/* Unter den Titel umgebrochen (T-284, gesetzt von ueberlauf.js): Die Knöpfe
füllen jede Zeile, statt links zu stehen und rechts Platz zu lassen — eine
Zeile mit einem Knopf ist dieser Knopf in voller Breite. Steckt ein Knopf in
einer Hülle (Besprechung starten mit Klappfach), füllt er sie. Bis T-315
nur auf dem Telefon (≤ 600 px); am Schreibtisch stand die umgebrochene
Reihe seit T-310 linksbündig. Der Referenzentwurf (`styles.css`,
`.page-head .actions > * { flex: 1 1 auto }`) füllt sie in jeder Breite. */
.page-head.page-head-umgebrochen > .actions { width: 100%; }
.page-head.page-head-umgebrochen > .actions > * { flex: 1 1 auto; }
.page-head.page-head-umgebrochen > .actions > :not(.btn) > .btn { width: 100%; }
/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 9px 18px;
border-radius: 999px;
font-size: 0.84375rem;
font-weight: var(--w-bold);
letter-spacing: 0;
transition: background var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std), transform var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std);
border: 1px solid transparent;
white-space: nowrap;
}
.btn:active { transform: scale(0.98); }
/* Gesperrt: Ohne eigene Regel bliebe ein deaktivierter Knopf im vollen
Markenblau stehen, hellte beim Überfahren sogar noch auf — und sähe damit
aus wie ein Angebot, das er nicht ist. */
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:disabled:active { transform: none; }
.btn-primary:disabled:hover { background: var(--q-highlight-2); }
.btn-ghost:disabled:hover { border-color: var(--q-linie); }
.btn-quiet:disabled:hover { background: transparent; }
.btn-danger:disabled:hover { background: #C04848; }
.btn-primary { background: var(--q-highlight-2); color: #fff; }
.btn-primary:hover { background: #0a253c; }
.btn-accent { background: var(--q-highlight-1); color: var(--q-highlight-2); }
.btn-ghost { background: #fff; border-color: var(--q-linie); color: var(--q-dark); }
.btn-ghost:hover { border-color: var(--q-highlight-2); }
.btn-danger { background: #C04848; color: #fff; }
.btn-danger:hover { background: #a83b3b; }
.btn-quiet { background: transparent; color: var(--q-dark); padding: 7px 12px; }
.btn-quiet:hover { background: var(--surface-soft); }
.btn-sm { padding: 6px 12px; font-size: 0.78125rem; }
/* Große Ausprägung (T-297) — Aufrufe im Inhalt der öffentlichen Infoseiten
(Einstieg, Tarifkarten, Registrierung). Maße aus dem Referenzentwurf
(landing.css `.btn`: 13 × 26 px, 14 px); Rahmen 2 px wie dort, damit
ghost und gefüllte Knöpfe gleich hoch stehen. */
.btn-lg { padding: 12px 26px; border-width: 2px; font-size: var(--fs-14); }
/* Eine Knopfhöhe, wo Knöpfe nebeneinanderstehen (T-282). Gemessen gab es zwei:
32 px (`.btn-sm`) und 40 px (`.btn`) — im Seitenkopf des Dashboards stand
„Aktuelles Lagebild" klein neben „Besprechung starten" groß. Im Seitenkopf
gilt das in jeder Breite; auf dem Telefon für alle kleinen Knöpfe, dort ist
die größere zugleich die bessere Fingerzielgröße. */
.page-head .actions .btn-sm { padding: 9px 18px; font-size: 0.84375rem; }
@media (max-width: 760px) {
.btn-sm { padding: 9px 18px; font-size: 0.84375rem; }
}
.btn-icon { padding: 6px; line-height: 1; }
.btn .ic { width: 14px; height: 14px; background-position: center; background-repeat: no-repeat; background-size: contain; }
.btn-primary .ic { filter: brightness(0) invert(1); }
/* ── Cards ─────────────────────────────────────────────────────────────── */
.card {
background: var(--surface);
border-radius: 18px;
padding: 22px 24px;
box-shadow: 0 0 10px rgba(0,0,0,0.06);
border: 1px solid #ECECEC;
}
.card-tight { padding: 16px 18px; }
.card-h {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
}
.card-h h2, .card-h h3 {
font-family: var(--font-sans);
font-weight: var(--w-bold);
font-size: 0.875rem;
color: var(--q-dark);
letter-spacing: 0.02em;
text-transform: uppercase;
margin: 0;
}
.card-h .more { font-size: 0.78125rem; color: var(--q-medium); font-weight: var(--w-regular); }
/* ── Status dots (classic traffic light) ───────────────────────────────── */
.dot {
display: inline-block;
width: 10px; height: 10px;
border-radius: 50%;
flex-shrink: 0;
position: relative;
}
.dot-lg { width: 14px; height: 14px; }
.dot-sm { width: 8px; height: 8px; }
.dot::after {
content: "";
position: absolute; inset: -2px;
border-radius: 50%;
border: 1.5px solid currentColor;
opacity: 0.15;
}
.dot.gruen { background: #6FA31C; color: #6FA31C; }
.dot.gelb { background: #E2A93B; color: #E2A93B; }
.dot.rot { background: #C04848; color: #C04848; }
.dot.blau { background: #10314E; color: #10314E; }
.dot.grau { background: #8A8A8A; color: #8A8A8A; }
/* Maßnahmen-Status (offen/in-arbeit/erledigt) — teilt sich die Palette mit grau/gelb/gruen */
.dot.offen { background: #8A8A8A; color: #8A8A8A; }
.dot.in-arbeit { background: #E2A93B; color: #E2A93B; }
.dot.erledigt { background: #6FA31C; color: #6FA31C; }
.dot.dot-pulse.rot { animation: pulse 1.6s infinite; }
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(192,72,72,0.5); }
100% { box-shadow: 0 0 0 8px rgba(192,72,72,0); }
}
.status-label {
display: inline-flex; align-items: center; gap: 8px;
font-size: 0.78125rem;
font-weight: var(--w-regular);
color: var(--q-dark);
}
/* Status pill (used in tables, inline) */
.status-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px 3px 8px;
border-radius: 999px;
font-size: 0.71875rem;
font-weight: var(--w-bold);
letter-spacing: 0.02em;
background: var(--surface-soft);
}
/* ── Schwerpunkt card (dashboard grid) ─────────────────────────────────── */
.sp-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
}
.sp-card {
background: var(--surface);
border-radius: 16px;
border: 1px solid #ECECEC;
box-shadow: 0 0 10px rgba(0,0,0,0.05);
padding: 18px;
cursor: pointer;
overflow: hidden;
transition: transform var(--dur-fast) var(--ease-std), box-shadow var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std);
display: flex;
flex-direction: column;
gap: 12px;
position: relative;
text-align: left;
width: 100%;
height: 100%;
}
.sp-card:hover {
border-color: var(--q-highlight-3);
box-shadow: var(--shadow-karte-hover);
}
.sp-card .sp-head {
display: flex; align-items: flex-start; gap: 10px; justify-content: space-between;
}
/* Reserve room for the overlaid edit/delete icons so they don't cover the status dot */
.tile-wrap .sp-card .sp-head {
padding-right: 60px;
}
.sp-card .sp-title {
font-family: var(--font-display);
font-weight: var(--w-bold);
font-size: 1.125rem;
color: var(--q-highlight-2);
line-height: 1.15;
letter-spacing: 0;
}
.sp-card .sp-sub {
font-size: 0.78125rem;
color: var(--q-medium);
margin-top: 4px;
font-weight: var(--w-regular);
}
.sp-card .sp-meta {
display: flex; align-items: center; gap: 10px;
border-top: 1px solid var(--divider);
padding-top: 12px;
margin-top: auto;
font-size: 0.75rem;
color: var(--q-dark);
}
.sp-card .sp-meta .metric { display: flex; align-items: baseline; gap: 4px; }
.sp-card .sp-meta .metric strong { font-weight: var(--w-bold); font-size: 0.875rem; color: var(--q-highlight-2); }
.sp-card .sp-meta .metric.warn strong { color: var(--danger-text); }
.sp-card .sp-meta .metric.warn-mid strong { color: var(--warning-text); }
/* ── Tables ────────────────────────────────────────────────────────────── */
.tbl {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 0.8125rem;
}
.tbl thead th {
text-align: left;
font-size: 0.65625rem;
font-weight: var(--w-bold);
letter-spacing: var(--tracking-xwide);
text-transform: uppercase;
color: var(--q-medium);
padding: 12px 14px;
border-bottom: 1px solid var(--divider);
background: #fff;
}
.tbl tbody td {
padding: 12px 14px;
border-bottom: 1px solid #F1F2F2;
vertical-align: middle;
color: var(--q-dark);
}
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr { cursor: pointer; transition: background var(--dur-fast) var(--ease-std); }
.tbl tbody tr:hover { background: #FAFAFA; }
.tbl .col-title { font-weight: var(--w-regular); color: var(--q-dark); }
.tbl .col-title strong { color: var(--q-highlight-2); font-weight: var(--w-bold); display: block; font-size: 0.84375rem; }
.tbl .muted { color: var(--q-medium); font-size: 0.75rem; }
/* ── Filter bar ────────────────────────────────────────────────────────── */
.filter-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 14px;
}
.chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 999px;
font-size: 0.78125rem;
font-weight: var(--w-regular);
background: #fff;
border: 1px solid var(--divider);
color: var(--q-dark);
cursor: pointer;
transition: all var(--dur-fast) var(--ease-std);
}
.chip:hover { border-color: var(--q-linie); }
.chip.active {
background: var(--q-highlight-2);
color: #fff;
border-color: var(--q-highlight-2);
}
.chip .dot { width: 8px; height: 8px; }
.chip .dot::after { display: none; }
/* ── Toolbar (search / filter / sort / view / export / reset) ───────────── */
.toolbar, .tb {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
position: relative;
/* Einzeilig seit T-278: Was keinen Platz findet, wandert ins „⋯“
(ueberlauf.js), statt dass die Leiste umbricht. */
flex-wrap: nowrap;
}
.toolbar .tb-spacer, .tb .tb-spacer { flex: 0 0 auto; margin-left: auto; }
.tb .spacer, .toolbar .spacer { flex: 1 0 auto; }
.tb-search {
flex: 1 1 260px;
min-width: 220px;
display: flex;
align-items: center;
gap: 10px;
background: #fff;
border: 1px solid var(--divider);
border-radius: 999px;
padding: 11px 18px;
transition: border-color var(--dur-fast) var(--ease-std), box-shadow var(--dur-fast) var(--ease-std);
}
.tb-search input {
flex: 1; border: 0; outline: 0; background: transparent;
font-size: 0.875rem; font-weight: var(--w-light); color: var(--q-dark);
}
.tb-search input::placeholder { color: var(--q-medium); }
.tb-search-clear {
width: 18px; height: 18px; border-radius: 50%;
display: grid; place-items: center; flex-shrink: 0;
transition: background var(--dur-fast) var(--ease-std);
}
.tb-search-clear:hover { background: var(--surface-soft); }
.tb-group { position: relative; flex-shrink: 0; }
.tb-btn {
display: inline-flex; align-items: center; gap: 8px;
background: #fff; border: 1px solid var(--divider); border-radius: 999px;
padding: 10px 16px; font-size: 0.84375rem; font-weight: var(--w-bold);
color: var(--q-dark); white-space: nowrap;
transition: border-color var(--dur-fast) var(--ease-std), background var(--dur-fast) var(--ease-std), transform var(--dur-fast) var(--ease-std);
}
.tb-btn:hover { border-color: var(--q-linie); }
.tb-btn:active { transform: scale(0.98); }
.tb-btn.open { border-color: var(--q-highlight-2); }
.tb-btn .ic { width: 15px; height: 15px; background-position: center; background-repeat: no-repeat; background-size: contain; }
.tb-badge {
min-width: 20px; height: 20px; padding: 0 6px;
border-radius: 999px; background: var(--q-highlight-2); color: #fff;
font-size: 0.6875rem; font-weight: var(--w-bold);
display: inline-grid; place-items: center; line-height: 1;
}
.tb-reset { background: #fff; }
.tb-reset:disabled { display: none; }
/* View toggle */
.tb-toggle {
display: inline-flex; align-items: center; gap: 3px;
background: #fff; border: 1px solid var(--divider);
border-radius: 999px; padding: 4px; flex-shrink: 0;
}
.tb-toggle button {
width: 36px; height: 30px; border-radius: 999px;
display: grid; place-items: center;
transition: background var(--dur-fast) var(--ease-std);
}
.tb-toggle button .ic {
width: 18px; height: 18px; opacity: 0.5;
background-position: center; background-repeat: no-repeat; background-size: contain;
transition: opacity var(--dur-fast) var(--ease-std);
}
.tb-toggle button:hover .ic { opacity: 0.8; }
.tb-toggle button.active { background: var(--q-highlight-2); }
.tb-toggle button.active .ic { opacity: 1; filter: brightness(0) invert(1); }
/* Quick filters */
.tb-quick { display: inline-flex; align-items: center; gap: 4px; flex-wrap: nowrap; }
.tb-quick-pill {
padding: 8px 15px; border-radius: 999px;
font-size: 0.84375rem; font-weight: var(--w-bold); color: var(--q-medium);
transition: background var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std);
}
.tb-quick-pill:hover { color: var(--q-dark); }
.tb-quick-pill.active { background: var(--q-highlight-2); color: #fff; }
/* Popover */
.tb-pop {
position: absolute; top: calc(100% + 8px); z-index: 30;
background: #fff; border-radius: 16px;
box-shadow: 0 14px 40px rgba(16,49,78,0.16);
border: 1px solid #EFEFEF; padding: 18px; min-width: 280px;
animation: tb-pop-in var(--dur-fast) var(--ease-out) both;
transform-origin: top;
}
.tb-pop.left { left: 0; }
.tb-pop.right { right: 0; }
@keyframes tb-pop-in { from { transform: translateY(-6px) scaleY(0.97); } to { transform: none; } }
.tb-pop-sec + .tb-pop-sec { margin-top: 18px; }
.tb-pop-sec-label {
font-size: 0.65625rem; letter-spacing: var(--tracking-xwide); text-transform: uppercase;
color: var(--q-medium); font-weight: var(--w-bold); margin: 0 0 10px 2px;
}
.tb-pop-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tb-pop-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 14px; border-radius: 999px; border: 1px solid var(--divider);
background: #fff; font-size: 0.8125rem; font-weight: var(--w-regular); color: var(--q-dark);
transition: border-color var(--dur-fast) var(--ease-std), background var(--dur-fast) var(--ease-std);
}
.tb-pop-chip:hover { border-color: var(--q-linie); }
.tb-pop-chip.active { background: var(--q-highlight-2); border-color: var(--q-highlight-2); color: #fff; }
.tb-pop-chip .ic { width: 12px; height: 12px; background-position: center; background-repeat: no-repeat; background-size: contain; }
.tb-pop-chip.active .ic { filter: brightness(0) invert(1); }
.tb-pop-reset {
display: block; width: 100%; text-align: center; margin-top: 18px;
color: var(--q-highlight-3-text); font-weight: var(--w-bold); font-size: 0.84375rem; padding: 4px;
}
.tb-pop-reset:disabled { color: var(--q-medium); opacity: 0.6; cursor: default; }
/* Sort popover */
.tb-sort-list { display: flex; flex-direction: column; gap: 2px; }
.tb-sort-opt {
display: flex; align-items: center; justify-content: space-between;
padding: 11px 14px; border-radius: 10px; font-size: 0.875rem;
color: var(--q-dark); font-weight: var(--w-regular); text-align: left;
transition: background var(--dur-fast) var(--ease-std);
}
.tb-sort-opt:hover { background: var(--surface-soft); }
.tb-sort-opt.active { background: #EEF5DC; font-weight: var(--w-bold); }
/* `.tb-sort-richtung` stand hier bis T-153: die Sortierreihenfolge als zwei
weitere Listenzeilen, von den Sortierarten nur durch eine Trennlinie
abgesetzt. Die Begruendung aus T-138 lautete, die Linie mache den
Unterschied "ohne Ueberschrift deutlich" -- sie tut es nicht. Ohne
Ueberschrift lesen sich "Aufsteigend" und "Absteigend" wie zwei weitere
Sortierarten, und genau so ist es beanstandet worden. Die Reihenfolge steht
jetzt unter einer eigenen Ueberschrift in einer Pillenleiste, wie in den
fuenf handgeschriebenen Werkzeugleisten und im Entwurf. */
.tb-sort-opt .ic { width: 14px; height: 14px; background-position: center; background-repeat: no-repeat; background-size: contain; }
/* Portionierung im Sortier-Popover (T-154).
`.tb-pagesize` stand hier bis T-154 als dreispaltiges Raster — ungenutzt,
von T-153 Notiz 5 ausdruecklich vermerkt. Die Schrittweite ist jetzt eine
`.pill-seg` wie die Sortierrichtung darueber: vier gleichrangige Werte,
dieselbe Entscheidungsart, dieselbe Form.
Der Nachlademodus bekommt dagegen Zeilen mit Erlaeuterung. Die Begruendung
steht in `components.js` an der erzeugenden Stelle: „Auf Klick" und „Beim
Scrollen" unterscheiden sich im Ausloeser, nicht im Ergebnis — als blosse
Beschriftungen waeren sie nicht auseinanderzuhalten. Vorbild ist der
Referenzentwurf (`docs/design/project/styles.css`, `.tb-loadmode`). */
.tb-loadmode { display: flex; flex-direction: column; gap: 2px; }
.tb-loadmode-opt {
display: flex; align-items: center; gap: 10px;
width: 100%; padding: 9px 10px; border-radius: 10px;
text-align: left; color: var(--q-dark);
transition: background var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std);
}
.tb-loadmode-opt:hover:not(:disabled) { background: var(--surface-soft); }
.tb-loadmode-opt:disabled { opacity: 0.4; cursor: default; }
.tb-loadmode-opt.active { background: var(--q-highlight-2); color: #fff; }
/* Wie bei `.tb-pop-chip.active .ic`: Die Sinnbilder sind Hintergrundbilder in
Navy und waeren auf gefuelltem Grund nicht zu sehen. */
.tb-loadmode-opt.active .ic { filter: brightness(0) invert(1); }
.tb-loadmode-opt.active .tb-loadmode-sub { color: rgba(255,255,255,0.72); }
.tb-loadmode-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tb-loadmode-label { font-size: 0.84375rem; font-weight: var(--w-bold); }
.tb-loadmode-sub { font-size: 0.71875rem; color: var(--q-medium); font-weight: var(--w-light); }
.tb-loadmode-opt:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* Der Hinweis bei Schrittweite „Alle". Schriftgroesse, Gewicht, Farbe und
Zeilenhoehe stehen ausdruecklich: Die globale `p`-Regel setzt Groesse, Farbe
und `font-weight: 300` und hat in dieser Anwendung schon viermal in eine
Komponente hineingewirkt. */
.tb-loadmode-hint {
margin: 8px 2px 0;
font-size: 0.71875rem; font-weight: var(--w-light); line-height: 1.45;
color: var(--q-medium);
}
/* Export popover */
.tb-export-row {
display: flex; align-items: center; gap: 10px;
width: 100%; padding: 12px 14px; border-radius: 10px; font-size: 0.875rem;
color: var(--q-dark); text-align: left;
transition: background var(--dur-fast) var(--ease-std);
}
.tb-export-row + .tb-export-row { margin-top: 2px; }
.tb-export-row:hover { background: var(--surface-soft); }
.tb-export-row .ic { width: 16px; height: 16px; background-position: center; background-repeat: no-repeat; background-size: contain; }
/* Die Reihe „Mehr anzeigen" (`.show-more-row`, `.show-more-badge`) stand hier
bis T-154. Sie ist in der Komponente `blaetterleiste` aufgegangen
(public/css/components/blaetterleiste.css) — dort als einer von drei
Nachlademodi, ergaenzt um die Ausschnittsangabe „25 von 340". */
/* Empty state */
.empty-state {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 14px; padding: 64px 20px; text-align: center;
}
.empty-state p { color: var(--q-medium); font-size: 0.875rem; margin: 0; }
/* Das Zeichen ueber dem Satz (T-239). Deckung aus dem Referenzprototyp
(`EmptyState` in docs/design/project/src/Toolbar.jsx); die Groesse steht am
Aufruf, weil renderIcon() sie dort ohnehin fuehrt. Die Regel greift ueber den
Wrapper hinweg auf `.ic` und trifft damit nur das Zeichen — der Ladefehler
benutzt dieselbe Huelle, bringt aber keines mit und bleibt unberuehrt. */
.empty-state .ic { opacity: 0.25; }
/* Tile (Kachel) grid for list-view items */
.tile-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 16px;
}
/* Tile wrapper — positions action overlay */
.tile-wrap {
position: relative;
}
/* Action buttons overlaid on top-right of a tile */
.tile-actions {
position: absolute;
top: 10px; right: 10px;
display: flex; gap: 4px;
}
/* Row-level edit / delete icon buttons (table + tile) */
.row-actions {
display: inline-flex; align-items: center; gap: 4px;
}
.row-edit {
width: 28px; height: 28px; border-radius: 7px;
display: grid; place-items: center;
background: #fff; border: 1px solid var(--divider);
transition: border-color var(--dur-fast) var(--ease-std), background var(--dur-fast) var(--ease-std);
}
.row-edit:hover { border-color: var(--q-linie); background: var(--surface-soft); }
.row-del:hover { border-color: var(--danger); background: #F8E0E0; }
.row-del:hover .ic { filter: invert(36%) sepia(48%) saturate(1100%) hue-rotate(314deg) brightness(85%); opacity: 1 !important; }
/* File-list rows in Dateien tab */
.datei-row {
display: flex; align-items: center; gap: 12px;
padding: 10px 0; border-bottom: 1px solid var(--divider);
}
.datei-row:last-child { border-bottom: none; }
.datei-row .datei-del-btn { }
.tile {
background: var(--surface); border-radius: 16px; border: 1px solid #ECECEC;
box-shadow: 0 0 10px rgba(0,0,0,0.05); padding: 18px; cursor: pointer;
text-align: left; width: 100%; height: 100%; display: flex; flex-direction: column; gap: 10px;
transition: transform var(--dur-fast) var(--ease-std), box-shadow var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std);
}
.tile:hover { border-color: var(--q-highlight-3); box-shadow: var(--shadow-karte-hover); }
.tile .tile-top { display: flex; align-items: flex-start; gap: 10px; justify-content: space-between; padding-right: 60px; }
.tile .tile-eyebrow { font-size: 0.65625rem; letter-spacing: var(--tracking-xwide); text-transform: uppercase; font-weight: var(--w-bold); color: var(--q-highlight-3-text); }
.tile .tile-title { font-family: var(--font-display); font-weight: var(--w-bold); font-size: 1rem; color: var(--q-highlight-2); line-height: 1.2; margin-top: 3px; }
.tile .tile-note { font-size: 0.78125rem; color: var(--q-medium); font-weight: var(--w-regular); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile .tile-foot { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--divider); padding-top: 12px; margin-top: auto; font-size: 0.75rem; color: var(--q-dark); }
.tile .tile-foot .spacer { margin-left: auto; }
/* ── Inline edit field ─────────────────────────────────────────────────── */
.inline-input {
border: 1px solid transparent;
background: transparent;
padding: 4px 8px;
border-radius: 6px;
font: inherit;
color: inherit;
width: 100%;
outline: none;
transition: border-color var(--dur-fast) var(--ease-std), background var(--dur-fast) var(--ease-std);
}
.inline-input:hover { border-color: var(--divider); background: #fff; }
.inline-input:focus { background: #fff; }
/* ── KPI tile ──────────────────────────────────────────────────────────── */
/* `minmax(0, 1fr)` statt `1fr`: Sonst wird eine Spur von ihrem längsten
unteilbaren Wort aufgeblasen — „BEOBACHTUNGSBEDÜRFTIG" ergab auf schmalen
Geräten Spalten von 185 px neben 266 px. Bestandsfehler, bei T-106 gemessen. */
.kpi-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; }
.kpi {
background: #fff;
border-radius: 14px;
padding: 18px 20px;
border: 1px solid #ECECEC;
display: flex;
align-items: center;
gap: 16px;
}
.kpi .kpi-num {
font-family: var(--font-display);
font-weight: var(--w-bold);
font-size: 2.375rem;
color: var(--q-highlight-2);
letter-spacing: -0.02em;
line-height: 1;
}
/* Die grossen Kennzahlen der Hero-Kacheln tragen wieder die hellen
Markenfarben — auf ausdrueckliche Entscheidung (T-145, Fortsetzung von
T-144). T-123 hatte sie wegen A11Y-008 auf die `-text`-Varianten gesetzt.
Hier stehen die Basisfarben und **nicht** die Token-Werte selbst: Die drei
`-text`-Varianten werden an 84 weiteren Stellen benutzt und bleiben dort
unveraendert dunkel. Die Entscheidung betrifft die Hero-Kacheln, sonst
nichts.
Gerechnet auf Weiss: Gelb 2,11:1, Gruen 3,03:1, Rot 4,93:1. Die Zahlen sind
mit 2,375rem und fetter Schrift „grosser Text" nach WCAG 1.4.3, fuer den
3:1 genuegt — Gruen und Rot erfuellen das, **Gelb bleibt darunter**. Als
angenommene Einschraenkung im Befund A11Y-008 vermerkt. */
.kpi.warn .kpi-num { color: var(--warning); }
.kpi.danger .kpi-num { color: var(--danger); }
.kpi.ok .kpi-num { color: var(--success); }
.kpi .kpi-label {
font-size: 0.78125rem;
color: var(--q-dark);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
font-weight: var(--w-bold);
line-height: 1.3;
}
.kpi .kpi-sub { font-size: 0.75rem; color: var(--q-medium); font-weight: var(--w-regular); margin-top: 4px; letter-spacing: 0; text-transform: none; }
/* „BEOBACHTUNGSBEDÜRFTIG" ist ein einziges Wort und passt auf schmalen
Geräten in keine halbe Zeile — es lief bisher aus der Kachel heraus.
Trennung nach `lang="de-AT"`, Umbruch als Rückfall. Bestandsfehler,
bei T-106 gemessen. */
.kpi .kpi-label,
.kpi .kpi-sub { hyphens: auto; overflow-wrap: break-word; }
/* Der Textblock ist ein Flex-Element ohne eigene Klasse. In der Zeile braucht
er `min-width: 0`, in den senkrechten Varianten zusätzlich `max-width: 100%`
— dort bestimmt `align-items: center` seine Breite aus dem Inhalt, und ohne
Deckel greift der Umbruch nie. */
.kpi > div { min-width: 0; max-width: 100%; }
/* KPI als Link/Button */
.kpi.kpi-link {
cursor: pointer;
text-align: left;
width: 100%;
transition: box-shadow var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std), transform var(--dur-fast) var(--ease-std);
}
/* Ueberfahren: dieselbe Sprache wie in jedem anderen Kachelgitter der
Anwendung (T-149) -- Petrolrahmen und --shadow-karte-hover. Bis dahin hob
sich die Hero-Kachel allein durch einen eigenen, etwas flacheren Schatten
(0 4px 16px/0.10) und einen Hub von 1 px ab, waehrend die Schwerpunkt-
Kacheln zwei Bildschirmzeilen darunter Rahmen **und** einen anderen
Schatten zeigten. Der Hub ist mit entfallen: Er kam an keiner anderen
Kachel vor und war der zweite Unterschied auf demselben Bildschirm.
`:active` behaelt seine eigene Rueckmeldung -- Druck ist kein Ueberfahren. */
.kpi.kpi-link:hover {
border-color: var(--q-highlight-3);
box-shadow: var(--shadow-karte-hover);
}
.kpi.kpi-link:hover .kpi-go,
.kpi.kpi-link:hover .ic { opacity: 0.65 !important; }
.kpi.kpi-link .ic { transition: opacity var(--dur-fast) var(--ease-std); }
.kpi.kpi-link:active { transform: scale(0.99); }
.kpi.kpi-link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* ── Darstellungen der Hero-Kacheln (T-106) ─────────────────────────────
Drei Modifikatoren AUF `.kpi`, nicht daneben: Rahmen, Farbe, Tonklassen
und Klickverhalten bleiben die der Grundkachel; die Varianten stellen sie
senkrecht und setzen eine Grafik davor. Die Bezugsgröße neben dem Wert
(„von 12", „/12") ist der Grund für die Varianten — sie zeigen einen
Anteil, den die reine Zahl nicht ausdrücken kann.
Alle SVG-Texte erben ihre Schrift nicht: `font-family` ist hier gesetzt,
weil eine Präsentationsangabe im SVG keine Kaskade aus `body` erhält. */
.kpi-gauge-svg text { font-family: var(--font-sans); }
.kpi-of { font-size: 0.75rem; color: var(--q-medium); font-weight: var(--w-regular); }
/* Tacho */
.kpi.kpi-gauge { position: relative; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 18px 14px 16px; }
.kpi.kpi-gauge > .ic { position: absolute; top: 14px; right: 14px; }
.kpi-gauge-svg { width: 132px; height: 86px; display: block; }
.kpi-gauge-val { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; }
.kpi.kpi-gauge .kpi-num { font-size: 2.125rem; }
.kpi.kpi-gauge .kpi-sub { max-width: 210px; }
/* Ring */
.kpi.kpi-ring { position: relative; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 18px 14px 16px; }
.kpi.kpi-ring > .ic { position: absolute; top: 14px; right: 14px; }
.kpi-ring-wrap { position: relative; width: 104px; height: 104px; }
.kpi-ring-svg { width: 104px; height: 104px; display: block; }
.kpi-ring-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 3px; }
.kpi.kpi-ring .kpi-num { font-size: 1.875rem; line-height: 1; }
.kpi.kpi-ring .kpi-of { font-size: 0.71875rem; align-self: center; padding-top: 5px; }
.kpi.kpi-ring .kpi-sub { max-width: 210px; }
/* Balken */
.kpi.kpi-bar { position: relative; flex-direction: column; align-items: stretch; gap: 8px; padding: 16px 16px 18px; }
.kpi-bar-top { display: flex; align-items: baseline; gap: 6px; }
.kpi-bar-top > .ic { align-self: center; }
.kpi.kpi-bar .kpi-num { font-size: 2.125rem; }
.kpi-track { height: 8px; border-radius: var(--radius-pill); background: var(--q-bright); overflow: hidden; }
.kpi-track > span { display: block; height: 100%; border-radius: var(--radius-pill); transition: width 600ms var(--ease-std); }
/* ── Aufbau der Anteilsgrafiken (T-223) ────────────────────────────────────
Ring und Tacho decken ihren Bogen ueber `stroke-dashoffset` auf, der Zeiger
dreht sich an seinen Platz. Die Breite der Balken hat ihre Uebergangsdauer
seit jeher (`.kpi-track > span` darueber, `.storage-usage-fill`); sie hat nur
nie etwas animiert, weil der Endwert in einem Zug gesetzt wurde.
900 ms und nicht 600: Ein Bogen legt eine laengere Strecke zurueck als ein
Balken und wirkt bei gleicher Dauer hastig.
`transform-box: view-box` ist beim Zeiger nicht Zier: Ohne sie bezieht sich
`transform-origin` auf den Rahmen des **Elements** — bei einer Linie also auf
deren eigene Ausdehnung —, und der Zeiger wanderte statt zu schwenken. Mit
ihr gilt das Koordinatenfeld des `viewBox`, und 60/60 ist dessen Drehpunkt.
Die globale Regel fuer Bewegungsreduzierung kuerzt beide Dauern auf 0,01 ms;
`anteileAufbauen()` setzt in diesem Fall zusaetzlich sofort, damit nicht ein
Bild lang der Leerzustand aufblitzt. */
.kpi-anteil-bogen { transition: stroke-dashoffset 900ms var(--ease-std); }
.kpi-anteil-zeiger {
transform-box: view-box;
transform-origin: 60px 60px;
transition: transform 900ms var(--ease-std);
}
/* Umschalter der Darstellung — kein Filter. Seit T-146 dieselbe Segmentleiste
wie der Ansichtsumschalter der Toolbar: Die Beschriftung „DARSTELLUNG" und
die vier Wortpillen sind entfallen, vier Sinnbilder am rechten Rand treten an
ihre Stelle. Das kehrt die Entscheidung aus T-113 („bewusst nicht
`.tb-toggle`") um — sie ist in den Entwurfsunterlagen zurückgenommen worden.
Deshalb steht hier auch **keine** zweite Leiste: Die Optik kommt aus
`.tb-toggle`, das die Knopfgeometrie, den Rahmen und den aktiven Zustand
bereits trägt. Eigen ist nur, was hier anders ist — die Ausrichtung nach
rechts, „Zurücksetzen" daneben und die Farbe der beiden Inline-Glyphen. */
.kpi-switch { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-bottom: 12px; flex-wrap: wrap; }
/* Tacho und Ring haben keine Icon-Datei im Bestand und sind Inline-SVG. Damit
sie neben den beiden Dateien nicht aus der Reihe fallen, tragen sie deren
Farbwert (#4B4B4B = `--q-dark`) und dieselbe Deckkraft; im aktiven Zustand
setzt Weiß das, was bei den Dateien `brightness(0) invert(1)` bewirkt. */
.kpi-switch-btn svg { color: var(--q-dark); opacity: 0.5; transition: opacity var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std); }
.kpi-switch-btn:hover svg { opacity: 0.8; }
.kpi-switch-btn.active svg { color: var(--q-white); opacity: 1; }
.kpi-switch-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* „Zurücksetzen" — gibt die eigene Wahl auf. Steht ausserhalb der Leiste und
traegt deren Form nicht: Die vier darin waehlen eine Darstellung, dieser Knopf
waehlt keine, sondern tritt zurueck. Gleiche Optik hiesse gleiche Bedeutung
(T-113). Er behaelt als einziger seine Beschriftung — eine Handlung, die eine
gespeicherte Wahl verwirft, ist kein Sinnbild wert (T-146). */
.kpi-switch-reset {
display: inline-flex; align-items: center; gap: 5px;
/* Trennstrich statt blossen Abstands: Er markiert die Grenze zwischen den
vier Darstellungen und der Handlung daneben. Ohne ihn las sich der Knopf
als fuenfte Darstellung — gemessen unterschied ihn von einer inaktiven
Pille nur eine halbe Pixelgroesse (T-113). */
margin-left: 10px; padding: 5px 2px 5px 12px;
border: 0; border-left: 1px solid var(--q-bright);
background: transparent;
color: var(--q-medium);
font-family: inherit; font-size: 0.71875rem; font-weight: var(--w-regular);
cursor: pointer;
transition: color var(--dur-fast) var(--ease-std);
}
.kpi-switch-reset:hover { color: var(--q-highlight-3-text); }
.kpi-switch-reset:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-pill); }
@media (max-width: 600px) { .kpi-switch-reset { margin-left: 0; } }
/* Telefon (T-299): Der Umschalter steht in einer eigenen Zeile — rechtsbündig
blieben links gemessen 184 von 347 px leer (390 px). Er nimmt die ganze
Zeile, die vier Knöpfe teilen sie sich, und jeder zeigt sein Wort neben
dem Sinnbild, soweit es hineinpasst (ueberlaufBeschriftungen). Dieselbe
Grenze wie die Kopfknöpfe, die hier ebenfalls die Zeile füllen (T-284).
„Zurücksetzen" rückt darunter an den rechten Rand.
Seit T-311 auch am Schreibtisch beschriftet (Wunsch des Auftraggebers): Die
Begründung aus T-299 — „vier Wörter machten aus einer Randbedienung eine
Leiste" — ist damit bewusst aufgehoben, ebenso die reine Sinnbild-Fassung
des Referenzentwurfs (`styles.css`, 36 × 30 px je Knopf). Die Leiste bleibt
rechtsbündig und so hoch wie bisher; die Knöpfe wachsen nur in der Breite. */
.kpi-switch-seg .kpi-switch-btn {
width: auto; display: inline-flex; align-items: center; justify-content: center;
gap: 6px; padding: 0 12px 0 10px;
}
.kpi-switch-seg .kpi-switch-btn svg, .kpi-switch-seg .kpi-switch-btn .ic { flex-shrink: 0; }
.kpi-switch-btn-label {
display: inline; font-size: 0.78125rem; font-weight: var(--w-bold); line-height: 1.2;
letter-spacing: 0; color: var(--q-dark);
}
.kpi-switch-btn.active .kpi-switch-btn-label { color: var(--q-white); }
@media (max-width: 600px) {
.kpi-switch-seg { flex: 1 1 100%; display: flex; min-width: 0; }
.kpi-switch-seg .kpi-switch-btn {
flex: 1 1 0; min-width: 0; height: 34px;
/* 4 px Innenabstand: Bei 360 px (häufige Android-Breite) misst ein Knopf
75 px und „Zahlen" samt Sinnbild 69 px — mit 8 px fiele die Beschriftung
dort weg. Bei 320 px (65 px) fällt sie weg. */
gap: 5px; padding: 0 4px;
}
}
@media print { .kpi-switch-reset { display: none; } }
/* ── Dashboard Toolbar (View-Umschalter) ──────────────────────────────── */
.dash-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
gap: 12px;
}
.dash-toolbar-left { display: flex; align-items: center; gap: 10px; }
.dash-toolbar-label { font-size: 0.875rem; font-weight: var(--w-bold); color: var(--q-dark); }
.chip-count {
font-size: 0.71875rem;
background: var(--surface-soft);
color: var(--q-medium);
padding: 2px 10px;
border-radius: 999px;
font-weight: var(--w-regular);
}
.dash-toolbar-right { display: flex; align-items: center; gap: 8px; }
.view-toggle {
display: flex;
background: var(--surface-soft);
border-radius: 10px;
padding: 3px;
gap: 2px;
}
.view-toggle-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 7px;
font-size: 0.8125rem;
font-weight: var(--w-regular);
color: var(--q-medium);
border: 0;
background: transparent;
cursor: pointer;
transition: background var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std);
}
.view-toggle-btn:hover { background: rgba(0,0,0,0.04); color: var(--q-dark); }
.view-toggle-btn.active {
background: #fff;
color: var(--q-dark);
font-weight: var(--w-bold);
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.view-toggle-btn .ic { opacity: 0.6; }
.view-toggle-btn.active .ic { opacity: 1; }
/* ── Dashboard grid layout ─────────────────────────────────────────────── */
/* `minmax(0, …)` statt `1fr` (T-249): `1fr` heisst `minmax(auto, 1fr)` und
schrumpft nie unter die Mindestbreite des Inhalts. Bei 390 px wuchs die
einspaltige Zeile deshalb auf 394 px, weil die Knopfreihe der Karte
„Nächste Besprechung" 346 px Mindestbreite hatte — `.main` rollte 33 px
waagrecht. Die Spalte gehört dem Raster, nicht dem breitesten Kind. */
.dash-grid {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: 18px;
}
.dash-grid > .span-2 { grid-column: 1 / -1; }
/* ── Avatar ────────────────────────────────────────────────────────────── */
.avatar-sm {
width: 26px; height: 26px;
/* **Ein Kreis wird nie gestaucht** (T-219, Nebenbefund). Ohne diese Zeile
erbt der Avatar in einem Flex-Behaelter `flex-shrink: 1` und gibt Breite
ab, waehrend die Hoehe steht — aus dem Kreis wird eine Ellipse. Gemessen
beim Nachweis, dass die uebrigen 37 Aufrufstellen unberuehrt bleiben:
**12 von 74** sichtbaren Avataren waren betroffen, alle in den
Einstellungen (10 unter Personen mit 27-28 x 32 px, 2 unter Benutzern, der
schlimmste 20 x 32 px). Ausserhalb der Einstellungen: 0 von 56.
Die Regel gehoert an den Grundbaustein und nicht an die Fundstelle:
`.vh-beteiligt > .avatar-sm` hat genau das schon einmal einzeln gekontert. */
flex: none;
border-radius: 50%;
background: var(--q-highlight-3);
color: #fff;
display: inline-grid; place-items: center;
font-size: 0.65625rem;
font-weight: var(--w-bold);
font-family: var(--font-display);
}
/* Mit Porträtfoto (T-199): dieselbe Kreisform, nur mit Bild statt Initialen.
`overflow: hidden` und das füllende Bild stehen hier und nicht an der
Fachkomponente — ein Avatar ist ein Grundbaustein, und die 38 Aufrufstellen
kennen ihre eigene Größe. */
.avatar-sm.avatar-foto { background: var(--q-bright); overflow: hidden; }
.avatar-sm.avatar-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-row { display: inline-flex; }
.avatar-row .avatar-sm { margin-left: -6px; border: 2px solid #fff; }
.avatar-row .avatar-sm:first-child { margin-left: 0; }
/* ── Historie / timeline ──────────────────────────────────────────────── */
.history-hint {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 14px;
margin-bottom: 20px;
background: var(--surface-soft);
border-radius: 14px;
}
.history-hint .ic { opacity: 0.75; }
.history-hint span { font-size: 0.78125rem; color: var(--fg-2); }
.history-list {
position: relative;
list-style: none;
margin: 0;
padding: 0;
}
.history-list::before {
content: '';
position: absolute;
left: 16px;
top: 17px;
bottom: 17px;
width: 2px;
background: var(--divider);
}
.history-item {
position: relative;
display: flex;
align-items: flex-start;
gap: 14px;
}
.history-item + .history-item { margin-top: 22px; }
.history-marker {
position: relative;
z-index: 1;
flex-shrink: 0;
width: 34px;
height: 34px;
border-radius: 50%;
display: grid;
place-items: center;
box-shadow: 0 0 0 4px var(--surface);
}
.history-marker .ic { filter: brightness(0) invert(1); }
.history-item .history-body { flex: 1; min-width: 0; padding-top: 1px; }
.history-item .history-text { font-size: 0.875rem; font-weight: 700; color: var(--fg-1); line-height: 1.3; }
.history-item .history-detail { font-size: 0.78125rem; color: var(--fg-1); margin-top: 2px; }
.history-item .history-meta { margin-top: 4px; font-size: 0.71875rem; }
/* ── Meeting mode (hero) ───────────────────────────────────────────────── */
.meeting-wrap {
display: grid;
grid-template-columns: 340px 1fr;
height: 100%;
background: var(--surface-soft);
}
.meeting-agenda {
background: #fff;
border-right: 1px solid var(--divider);
padding: 22px 18px;
overflow: visible;
min-height: 0;
display: flex;
flex-direction: column;
}
.meeting-agenda .agenda-scroll {
flex: 1;
min-height: 0;
overflow-y: auto;
margin: 0 -4px;
padding: 0 4px;
}
.meeting-agenda .m-head {
margin-bottom: 18px;
}
.meeting-agenda .m-eyebrow {
font-size: 0.65625rem;
letter-spacing: var(--tracking-xwide);
text-transform: uppercase;
color: var(--q-highlight-3-text);
font-weight: var(--w-bold);
}
.meeting-agenda .m-eyebrow-row {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
/* ── Zeitbudget der Besprechung (T-107) ────────────────────────────────────
Die Laufzeit stand früher klein neben „Besprechung läuft" und nannte nur die
gelaufene Zeit. Eine Zahl ohne Bezug beantwortet die Frage nicht, die man
während einer Besprechung an sie stellt — „liegen wir in der Zeit?".
Deshalb steht sie jetzt unter dem Datum, im Verhältnis zur geplanten Dauer:
Zeit, Plan, Verbrauchsbalken, Restzeit und geplantes Ende.
Tabellenziffern, damit die Anzeige beim Zählen nicht zappelt. */
.meeting-agenda .m-time { margin-top: 12px; }
.meeting-agenda .m-time-row { display: flex; align-items: baseline; gap: 8px; }
.meeting-agenda .m-timer {
display: inline-flex; align-items: center; gap: 7px;
font-size: 1.125rem; font-weight: var(--w-bold);
color: var(--q-highlight-2);
font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.meeting-agenda .m-time-plan {
font-size: 0.75rem; font-weight: var(--w-regular); color: var(--q-medium);
}
/* Die Knöpfe rücken nach rechts und sitzen mittig zur Zeit — in einer auf der
Grundlinie ausgerichteten Zeile stünden sie sonst zu tief. */
.meeting-agenda .m-time-ctl {
margin-left: auto; align-self: center;
display: inline-flex; align-items: center; gap: 2px;
}
.meeting-agenda .m-time-bar {
height: 4px; border-radius: 999px;
background: var(--surface-soft); overflow: hidden;
margin-top: 8px;
}
.meeting-agenda .m-time-bar > i {
display: block; height: 100%;
background: var(--q-highlight-3);
transition: width 600ms linear;
}
.meeting-agenda .m-time-foot {
font-size: 0.71875rem; font-weight: var(--w-regular); line-height: 1.45;
color: var(--q-medium); margin-top: 5px;
}
/* Überschritten: Der Text nennt die Überschreitung, die Farbe verstärkt sie
nur — sie ist nicht der einzige Träger der Aussage. */
.meeting-agenda .m-time.is-over .m-time-bar > i { background: var(--danger); }
.meeting-agenda .m-time.is-over .m-time-foot { color: var(--danger-text); font-weight: var(--w-bold); }
.meeting-agenda .m-timer-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px; border: 0; border-radius: 50%;
background: transparent; cursor: pointer; opacity: 0.45;
transition: opacity 150ms var(--ease-std, ease), background 150ms var(--ease-std, ease);
}
.meeting-agenda .m-timer-btn:hover { opacity: 1; background: var(--surface-soft); }
.meeting-agenda .m-timer-btn:active { transform: scale(0.94); }
/* Der Punkt pulst — er zeigt, dass gerade gezählt wird. */
.meeting-agenda .m-timer-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--q-highlight-1); animation: m-timer-pulse 2s ease-in-out infinite;
}
@keyframes m-timer-pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.35 } }
/* Pausiert: Der Punkt hört auf zu pulsen und tritt zurück, die Zeit ebenso —
ohne dieses Zeichen sähe ein angehaltener Zähler aus wie ein stehender.
Der Balken bleibt sichtbar, aber gedämpft: Verbraucht ist die Zeit ja. */
.meeting-agenda .m-time.is-paused .m-timer-dot { animation: none; background: var(--q-linie); }
.meeting-agenda .m-time.is-paused .m-timer { color: var(--q-medium); }
.meeting-agenda .m-time.is-paused .m-time-bar > i { opacity: 0.45; }
.meeting-agenda .m-time.is-paused .m-time-foot { color: var(--q-dark); }
/* Fortschritt durch die Agenda — zweiter Balken, anderer Gegenstand als das
Zeitbudget darüber. Beide sind absichtlich unabhängig voneinander. */
.meeting-agenda .m-progress {
margin-top: 14px; height: 4px; border-radius: 999px;
background: var(--surface-soft); overflow: hidden;
}
.meeting-agenda .m-progress > i {
display: block; height: 100%;
background: var(--q-highlight-1);
transition: width 300ms var(--ease-std);
}
.meeting-agenda .m-progress-foot {
font-size: 0.71875rem; font-weight: var(--w-regular); line-height: 1.45;
color: var(--q-medium); margin-top: 6px;
}
.meeting-agenda h1, .meeting-agenda h2 {
font-family: var(--font-display);
font-weight: var(--w-bold);
font-size: 1.1875rem;
color: var(--q-highlight-2);
margin: 6px 0 4px 0;
line-height: 1.2;
}
.meeting-agenda .m-date {
font-size: 0.78125rem;
color: var(--q-medium);
font-weight: var(--w-regular);
}
.meeting-agenda .agenda-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 12px;
border-radius: 10px;
cursor: pointer;
transition: background var(--dur-fast) var(--ease-std);
position: relative;
text-align: left;
width: 100%;
}
.meeting-agenda .agenda-item:hover { background: var(--surface-soft); }
.meeting-agenda .agenda-item.active {
background: var(--q-highlight-2);
color: #fff;
}
.meeting-agenda .agenda-item.active .agenda-title,
.meeting-agenda .agenda-item.active .agenda-sub { color: #fff; }
.meeting-agenda .agenda-item.active .agenda-sub { opacity: 0.7; }
.meeting-agenda .agenda-item.done { opacity: 0.55; }
.meeting-agenda .agenda-item.done .agenda-title { text-decoration: line-through; text-decoration-color: rgba(0,0,0,0.2); }
.agenda-num {
width: 22px; height: 22px; border-radius: 50%;
background: var(--surface-soft); color: var(--q-medium);
display: grid; place-items: center;
font-size: 0.6875rem; font-weight: var(--w-bold);
flex-shrink: 0;
}
.agenda-item.active .agenda-num { background: rgba(255,255,255,0.18); color: #fff; }
.agenda-item.done .agenda-num { background: var(--success); color: #fff; }
.agenda-body { flex: 1; min-width: 0; }
.agenda-title {
font-size: 0.84375rem;
font-weight: var(--w-bold);
color: var(--q-dark);
line-height: 1.2;
}
.agenda-sub {
font-size: 0.71875rem;
color: var(--q-medium);
margin-top: 3px;
font-weight: var(--w-regular);
}
.meeting-agenda .agenda-foot {
margin-top: auto;
padding-top: 16px;
border-top: 1px solid var(--divider);
}
.agenda-ctrls {
display: flex;
gap: 2px;
align-items: center;
flex-shrink: 0;
margin: -2px -2px 0 0;
opacity: 0;
pointer-events: none;
transition: opacity var(--dur-fast) var(--ease-std);
}
.agenda-item:hover .agenda-ctrls,
.agenda-item.active .agenda-ctrls,
.agenda-item:focus-within .agenda-ctrls { opacity: 1; pointer-events: auto; }
.agenda-ctrl {
display: grid;
place-items: center;
width: 22px;
height: 22px;
border-radius: 6px;
border: none;
background: transparent;
cursor: pointer;
color: var(--q-medium);
font-size: 0.875rem;
line-height: 1;
transition: background var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std);
}
.agenda-ctrl:hover { background: rgba(0,0,0,0.08); color: var(--q-dark); }
.agenda-item.active .agenda-ctrl { color: rgba(255,255,255,0.7); }
.agenda-item.active .agenda-ctrl .ic { filter: brightness(0) invert(1); }
.agenda-item.active .agenda-ctrl:hover { background: rgba(255,255,255,0.18); border-color: transparent; color: #fff; }
.agenda-ctrl-remove:hover,
.agenda-ctrl-del:hover { background: var(--status-crit-soft) !important; color: var(--danger-text) !important; }
.agenda-item.active .agenda-ctrl-remove:hover { background: rgba(255,255,255,0.22) !important; }
.agenda-ctrl:disabled { opacity: 0.25; cursor: default; pointer-events: none; }
/* meeting stage */
/* Die Bühne ist eine Spalte: Kopf, Hinweis, Arbeitsbereich, Navigation. Nur
der Arbeitsbereich dehnt sich; gescrollt wird innerhalb seiner Karten, nicht
die ganze Fläche. `overflow-y` bleibt als Notausgang für niedrige Fenster —
dann greift die Mindesthöhe von `.ms-work` und die Bühne scrollt doch. */
.meeting-stage {
padding: 28px 32px;
overflow-y: auto;
display: flex;
flex-direction: column;
}
.meeting-stage > * { flex: none; }
.meeting-stage .stage-head {
display: flex;
flex-wrap: wrap;
row-gap: 12px;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin-bottom: 22px;
}
.meeting-stage .stage-eyebrow {
font-size: 0.65625rem;
letter-spacing: var(--tracking-xwide);
text-transform: uppercase;
color: var(--q-highlight-3-text);
font-weight: var(--w-bold);
}
.meeting-stage h1, .meeting-stage h2 {
font-family: var(--font-display);
font-weight: var(--w-bold);
font-size: 2.25rem;
color: var(--q-dark);
line-height: 1.1;
letter-spacing: -0.01em;
margin: 4px 0 0 0;
}
.meeting-stage .stage-status {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 10px;
font-size: 0.8125rem;
color: var(--q-dark);
}
/* ── Arbeitsbereich der Bühne (T-107) ──────────────────────────────────────
Zwei Karten nebeneinander statt drei bis vier untereinander: links die
Listen zum Thema als Reiter, rechts die Notizen. Der Zweck ist der Name —
wer eine Besprechung führt, schreibt durchgehend mit und wechselt daneben
zwischen den Listen, statt an ihnen vorbeizuscrollen.
Eigener Präfix `ms-` (Meeting-Stage) statt `dp-` (Detailpanel): Dessen
Reiter tragen die waagrechte Polsterung und das Flex-Verhalten des Panels
und eine andere Aktivfarbe der Zählpille. In einer Karte müsste jede dieser
Eigenschaften überschrieben werden — übrig bliebe eine `dp-`Klasse, die
außerhalb des Detailpanels etwas anderes bedeutet. */
.ms-work {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
gap: 18px;
margin-bottom: 18px;
flex: 1 1 auto;
min-height: 360px;
}
.ms-tabcard {
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
}
.ms-tabs {
display: flex;
flex-wrap: wrap;
gap: 4px;
row-gap: 6px;
border-bottom: 1px solid var(--divider);
margin-bottom: 14px;
flex: none;
}
.ms-tabs button {
display: inline-flex; align-items: center; gap: 7px;
padding: 8px 12px;
margin-bottom: -1px;
border: 0; border-bottom: 3px solid transparent;
background: transparent;
font-family: var(--font-sans);
font-size: 0.8125rem; font-weight: var(--w-bold);
color: var(--q-medium);
cursor: pointer;
transition: color var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std);
}
.ms-tabs button:hover { color: var(--q-dark); }
.ms-tabs button.active { color: var(--q-highlight-3-text); border-bottom-color: var(--q-highlight-1); }
.ms-tabs button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.ms-tab-n {
padding: 1px 7px;
border-radius: 999px;
background: var(--surface-soft); color: var(--q-dark);
font-size: 0.6875rem; font-weight: var(--w-bold);
font-variant-numeric: tabular-nums;
}
.ms-tabs button.active .ms-tab-n { background: var(--q-highlight-3); color: #fff; }
/* Eine Reiterfläche: Liste oben, fester Fuß darunter. `display:flex` schlägt
das `hidden`-Attribut, deshalb wird es hier ausdrücklich wieder gesetzt —
sonst stünden alle drei Flächen gleichzeitig da. */
.ms-tabpane { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ms-tabpane[hidden] { display: none; }
.ms-tabpane:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.ms-panel {
flex: 1 1 auto; min-height: 0;
overflow-y: auto;
margin: 0 -4px; padding: 0 4px;
}
.ms-foot { flex: none; display: flex; gap: 6px; padding-top: 10px; }
.ms-hint {
font-size: 0.71875rem; font-weight: var(--w-regular); line-height: 1.45;
color: var(--q-medium); margin-bottom: 8px;
}
/* Leerzustand einer Reiterfläche. Alles ausdrücklich gesetzt: `p` erbt sonst
Größe und Gewicht des Fließtextes und bringt seinen eigenen Rand mit. */
.ms-empty {
margin: 0;
font-size: 0.8125rem; font-weight: var(--w-light); line-height: 1.55;
color: var(--q-medium);
}
/* Notizkarte: Das Schreibfeld nimmt den Platz ein, der übrig bleibt. Die
Karte selbst scrollt, wenn Kennzeichnung, Vorschlagsfeld und Feld zusammen
mehr Höhe brauchen als da ist. */
.ms-notes {
display: flex;
flex-direction: column;
min-height: 0;
overflow-y: auto;
}
.ms-notes > * { flex: none; }
.ms-notes .markfield {
flex: 1 1 auto; min-height: 150px;
display: flex; flex-direction: column;
}
.ms-notes .markfield textarea { flex: 1 1 auto; }
.ms-notes .markfield-vorschau { flex: 1 1 auto; overflow-y: auto; }
/* ── Ausgezeichneter Text (marktext) ──────────────────────────────────────
Ausgabe von renderMarkText(): Anmerkungen zu einem Tagesordnungspunkt, die
daraus erzeugte Zusammenfassung und die Zusammenfassung eines Themas. Die
Abstände sind knapper als im Fließtext — ein Protokoll ist eine Aufstellung,
kein Aufsatz.
14 px ist die Größe, in der die Beschreibung eines Themas im Kopf der
Detailansicht steht (`.sp-detail-head .desc`). Ausgezeichneter Text ist
dieselbe Art Inhalt und soll nicht als eigener Gegenstand auffallen.
GEGLIEDERT WIRD ÜBER WEISSRAUM UND EINE HAARLINIE, NICHT ÜBER FORM (T-061).
Zuvor trafen in einer einzigen Karte vier Schriftgrößen (11/13/14/15 px),
zwei Schriftfamilien (Museo Sans im Text, Comfortaa in den Überschriften)
und zwei Versalienebenen aufeinander — die Karten-Beschriftung
„ZUSAMMENFASSUNG" und die Abschnitte „BEHANDELTE THEMEN". Jede dieser
Unterscheidungen war für sich begründet; zusammen ergaben sie ein unruhiges
Bild, ohne dass die Gliederung dadurch klarer wurde. Eine Überschrift muss
sich nicht in Größe, Schnitt und Schreibweise zugleich vom Text abheben —
Abstand und eine Linie leisten dasselbe, ohne ein weiteres Formenpaar
einzuführen. */
.marktext { font-size: 0.875rem; line-height: 1.65; color: var(--q-dark); }
.marktext > *:last-child { margin-bottom: 0; }
/* Das erste Element trägt keine Trennung nach oben — dort trennt schon der
Kartenrand. */
.marktext > *:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
/* Größe, Zeilenhöhe und Farbe ausdrücklich weiterreichen. Ohne das greift die
globale Regel `p { font-size: var(--fs-16); line-height: var(--lh-normal);
color: var(--q-dark) }` aus tokens.css — und weil renderMarkText() jeden
Absatz in ein `p` legt, stand praktisch der gesamte ausgezeichnete Text auf
16 px, obwohl hier 14 px vorgegeben waren.
`color` kam mit T-061 dazu, und zwar wegen eines Fehlers, den erst das
Messen zeigte: Ein Zitat setzte seine Textfarbe, die Absätze darin holten
sich über die globale `p`-Regel aber wieder `--q-dark`. Dasselbe Zitat stand
dadurch zweifarbig da — Absätze dunkel, Aufzählungen grau. */
.marktext p,
.marktext ul,
.marktext ol,
.marktext li,
.marktext blockquote { font-size: inherit; line-height: inherit; color: inherit; }
.marktext p { margin: 0 0 8px; }
/* Überschriften: dieselbe Schrift und dieselbe Größe wie der Fließtext. Sie
heben sich über Gewicht, Farbe und vor allem über den Raum davor ab. Die
Haarlinie darüber macht den Abschnittsanfang eindeutig, ohne dass die
Schrift dafür etwas tun muss. */
.marktext h4,
.marktext h5,
.marktext h6 {
font-family: inherit;
font-size: inherit;
font-weight: var(--w-bold);
line-height: 1.45;
letter-spacing: 0;
text-transform: none;
color: var(--q-highlight-2);
margin: 22px 0 8px;
padding-top: 18px;
border-top: 1px solid var(--divider);
}
/* Alle Ebenen tragen dieselbe Farbe. Ein Versuch, die tiefere Ebene über
`--q-dark` zurückzunehmen, war der falsche Sparsamkeitsschritt: Damit sah
eine Abschnittsüberschrift genauso aus wie der fette Themenname eine Zeile
darunter, und im Besprechungsprotokoll steht vor jedem Thema einer. Die
nützlichere Unterscheidung ist nicht Ebene gegen Ebene, sondern Überschrift
gegen Hervorhebung im Text — dafür steht jetzt die Farbe: Navy gliedert,
Dunkelgrau hebt hervor. Die Ebenen trennt der Raum davor. */
/* Zwei Überschriften unmittelbar hintereinander (oder eine nach einer
Trennlinie) ergäben zwei Linien mit einem Spalt dazwischen. Die zweite
verzichtet darauf: Getrennt wird der Abschnitt, nicht jede Zeile. */
.marktext h4 + h4, .marktext h4 + h5, .marktext h4 + h6,
.marktext h5 + h4, .marktext h5 + h5, .marktext h5 + h6,
.marktext h6 + h4, .marktext h6 + h5, .marktext h6 + h6,
.marktext hr + h4, .marktext hr + h5, .marktext hr + h6 {
border-top: 0;
padding-top: 0;
margin-top: 6px;
}
/* Aufzählungszeichen ausdrücklich setzen. Die globale Regel
`ul { list-style: none }` aus app.css gilt für die Navigation und die
Kachellisten der Anwendung; hier nahm sie jeder Aufzählung ihr Zeichen. Was
blieb, waren eingerückte Zeilen — eine Liste, die nicht als Liste zu
erkennen war (T-061). */
.marktext ul, .marktext ol { margin: 0 0 12px; padding-left: 22px; }
.marktext ul { list-style: disc; }
.marktext ol { list-style: decimal; }
.marktext li { margin-bottom: 4px; }
.marktext strong { font-weight: var(--w-bold); }
/* Zitat — im Besprechungsprotokoll stehen darin die Anmerkungen zu einem
Tagesordnungspunkt. Eine ruhige Fläche statt grauer Schrift mit Randstrich:
Die Fläche grenzt ab, ohne der Schrift eine weitere Eigenschaft zu geben,
und der Text bleibt in der Farbe des übrigen Textes lesbar. Die vorherige
Fassung setzte ihn auf `--q-medium` (#BBBBBB) — auf Weiß ein Kontrast von
rund 1,9:1 und damit weit unter den 4,5:1, die für Fließtext gefordert
sind. */
.marktext blockquote {
margin: 0 0 12px;
padding: 10px 14px;
border-radius: 8px;
background: var(--surface-soft);
}
.marktext blockquote > *:last-child { margin-bottom: 0; }
/* Auf `--surface-muted` statt auf `--surface-soft`: Code steht auch innerhalb
eines Zitats, und dort wäre eine Fläche in der Zitatfarbe unsichtbar. */
.marktext code {
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
font-size: 0.92em;
background: var(--surface-muted);
border-radius: 4px;
padding: 1px 5px;
}
.marktext hr { border: 0; border-top: 1px solid var(--divider); margin: 18px 0; }
/* ── Textfeld mit Auszeichnungsleiste (markfield) ──────────────────────────
Leiste, Feld und Vorschau bilden einen Block: Die Leiste sitzt auf dem Feld
auf, damit erkennbar bleibt, worauf sie wirkt. */
.markfield { margin-top: 10px; }
.markbar {
display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
padding: 4px 6px;
border: 1px solid var(--divider);
border-bottom: 0;
border-radius: 10px 10px 0 0;
background: var(--surface-soft);
}
.markbar-spacer { flex: 1; }
.markbar-btn {
min-width: 26px; height: 24px;
padding: 0 6px;
border: 1px solid transparent; border-radius: 6px;
background: transparent;
color: var(--q-dark);
font-size: 0.78125rem; line-height: 1;
cursor: pointer;
transition: background var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std);
}
.markbar-btn:hover { background: #fff; border-color: var(--divider); }
.markbar-btn.active { background: var(--q-highlight-2); border-color: var(--q-highlight-2); color: #fff; }
.markbar-btn-wide { font-size: 0.71875rem; font-weight: var(--w-bold); letter-spacing: 0.02em; }
.markfield textarea {
width: 100%; min-height: 100px;
border: 1px solid var(--divider); border-radius: 0 0 10px 10px;
padding: 10px 12px;
/* Maßgleich mit .marktext: Feld und Vorschau werden umgeschaltet, und was in
der Vorschau steht, steht später im Protokoll. Ein Größensprung beim
Umschalten ließe eine Änderung vermuten, wo nur die Darstellung wechselt. */
font-family: var(--font-sans); font-size: 0.875rem; line-height: 1.6; font-weight: 300;
resize: vertical; outline: none;
display: block;
}
.markfield-vorschau {
min-height: 100px;
border: 1px solid var(--divider); border-radius: 0 0 10px 10px;
padding: 10px 12px;
background: var(--surface-soft);
}
.markfield [hidden] { display: none !important; }
/* Bezugshinweis unter einer Kartenüberschrift */
.card-sub {
margin: -2px 0 10px;
font-size: 0.71875rem; line-height: 1.5;
color: var(--q-medium);
}
/* ── Formulierungshilfe der Besprechungsnotizen (T-056) ───────────────────
Der Vorschlag steht unter den Notizen, nicht in ihnen. Deutlich abgesetzt,
damit auf einen Blick erkennbar bleibt, was jemand geschrieben und was eine
Maschine vorgeschlagen hat — beides sähe sonst gleich aus. */
.formulierung-box {
margin-top: 10px;
padding: 12px;
border: 1px dashed var(--q-highlight-3);
border-radius: 10px;
background: var(--surface-soft);
}
.formulierung-status {
display: flex; align-items: center; gap: 8px;
font-size: 0.78125rem; color: var(--q-medium);
}
.formulierung-status.is-error { color: var(--danger-text); }
.formulierung-status .btn { margin-left: auto; }
.formulierung-head {
display: flex; align-items: baseline; gap: 8px;
margin-bottom: 8px;
}
.formulierung-label {
font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
font-weight: var(--w-bold); color: var(--q-highlight-3-text);
}
.formulierung-quelle {
margin-left: auto;
font-size: 0.6875rem; color: var(--q-medium);
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.formulierung-text {
font-size: 0.84375rem; line-height: 1.65; color: var(--q-dark);
white-space: pre-wrap;
padding: 10px 12px;
background: #fff;
border: 1px solid var(--divider);
border-radius: 8px;
}
.formulierung-actions {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
margin-top: 10px;
}
.formulierung-hinweis { font-size: 0.71875rem; color: var(--q-medium); }
/* topic line in meeting mode */
.topic-line {
display: grid;
grid-template-columns: 14px 1fr auto auto;
gap: 12px;
align-items: center;
padding: 12px 14px;
border-radius: 10px;
background: #fff;
border: 1px solid #ECECEC;
margin-bottom: 8px;
transition: border-color var(--dur-fast) var(--ease-std);
}
.topic-line:hover { border-color: var(--q-linie); }
.topic-line .topic-title { font-weight: var(--w-bold); color: var(--q-dark); font-size: 0.84375rem; }
.topic-line .topic-note { font-size: 0.75rem; color: var(--q-medium); font-weight: var(--w-regular); margin-top: 2px; line-height: 1.4; }
.topic-line .topic-meta { font-size: 0.71875rem; color: var(--q-medium); }
.topic-line.expanded { border-color: var(--q-highlight-3); }
.topic-expand {
padding: 4px 8px;
font-size: 0.71875rem;
opacity: 0;
transition: opacity var(--dur-fast) var(--ease-std);
white-space: nowrap;
flex-shrink: 0;
}
.topic-line:hover .topic-expand,
.topic-line.expanded .topic-expand { opacity: 1; }
.topic-expand-area {
grid-column: 1 / -1;
padding-top: 8px;
}
.topic-note-edit {
width: 100%;
border: 1px solid var(--divider);
border-radius: 8px;
padding: 8px 10px;
font-family: var(--font-sans);
font-size: 0.8125rem;
font-weight: var(--w-regular);
color: var(--q-dark);
resize: vertical;
outline: none;
min-height: 60px;
box-sizing: border-box;
transition: border-color var(--dur-fast) var(--ease-std);
}
/* Status select inline */
.status-select {
display: inline-flex;
align-items: center;
gap: 6px;
}
.status-select select {
appearance: none;
border: 1px solid var(--divider);
border-radius: 999px;
padding: 3px 22px 3px 10px;
background: #fff url("data:image/svg+xml;utf8,` allein täte es fast: Der Browser stellt hoch und verkleinert auf
etwa 83 %. Für ein ® ist das zu groß — es steht dann als eigenes Zeichen
neben dem Wort statt als Beifügung dazu. 0,55 em bringen es auf die
Größenordnung, in der Marken üblicherweise gesetzt werden.
`line-height: 0` verhindert, dass die Hochstellung die Zeile auseinander
zieht — sonst wächst jede Überschrift, in der die Marke vorkommt, um ein
paar Pixel gegenüber den Überschriften daneben.
Die Klasse steht an `` und ersetzt es nicht: Das Element trägt die
Bedeutung, die Klasse nur das Maß. Wo die Marke als reiner Text auftritt
(Titelleiste des Fensters, `title`-Attribute, Meldungen, Downloads), bleibt
das Zeichen wie es ist — dort gibt es keine Auszeichnung. */
.marke-r {
font-size: 0.55em;
vertical-align: super;
line-height: 0;
/* Der Abstand vor dem folgenden Wort stammt sonst allein vom Leerzeichen
im Quelltext und fällt durch die kleinere Schrift zu knapp aus. */
margin-right: 0.04em;
}
/* Fußnote im Antworttext — hochgestellte Nummer, die auf die Quellenliste
verweist und die Detailansicht öffnet. */
.ai-fn {
border: none; background: none; padding: 0 1px;
font-size: 0.625rem; font-weight: var(--w-bold);
vertical-align: super; line-height: 1;
color: var(--q-highlight-2); cursor: pointer;
}
.ai-fn::before { content: "["; }
.ai-fn::after { content: "]"; }
.ai-fn:hover { text-decoration: underline; }
/* Die Inference-Ebene in der Fußzeile einer Antwort. Sie steht gleichrangig
neben Anbieter, Modell und Dauer und übernimmt deren Schrift und Farbe — die
Herkunft einer Antwort ist Beiwerk, keine Auszeichnung. Dass sie anklickbar
ist, zeigt die gepunktete Linie: das übliche Zeichen für „hier steht eine
Erläuterung", ohne eigene Fläche. */
.ai-level {
border: none; background: none; padding: 0;
font: inherit; color: inherit;
border-bottom: 1px dotted var(--q-linie);
cursor: pointer;
}
.ai-level:hover { color: var(--q-highlight-2); border-bottom-color: var(--q-highlight-3); }
/* Erklärungspanel zur Ebene. Die Kopfzeile bleibt stehen, gescrollt wird nur
der Inhalt — die Beschreibungen der Komponente sind lang, und beim Blättern
soll ablesbar bleiben, um welche Ebene es geht. */
.ai-level-pop {
position: absolute; z-index: 60;
left: 14px; right: 14px;
margin-top: 8px;
background: #fff; border: 1px solid var(--divider);
border-radius: 12px; box-shadow: 0 10px 32px rgba(0,0,0,0.14);
font-size: 0.71875rem; line-height: 1.55; color: var(--q-dark);
overflow: hidden;
}
.ai-level-head {
display: flex; align-items: flex-start; gap: 8px;
padding: 11px 14px 10px;
border-bottom: 1px solid var(--divider);
background: var(--surface-soft);
}
.ai-level-titel {
font-family: var(--font-display); font-weight: var(--w-bold);
font-size: 0.8125rem; color: var(--q-dark); line-height: 1.3;
}
/* Die Ebenennummer als leise Zeile darüber: Sie ordnet ein, sie ist nicht die
Überschrift — die ist der sprechende Kurztitel. */
.ai-level-kicker {
display: block;
font-family: var(--font-sans);
font-size: 0.59375rem; font-weight: var(--w-bold);
text-transform: uppercase; letter-spacing: 0.07em;
color: var(--q-highlight-2); margin-bottom: 2px;
}
.ai-level-x {
margin-left: auto; border: none; background: none;
font-size: 1.0625rem; color: var(--q-medium); cursor: pointer; line-height: 1;
padding: 0 2px;
}
.ai-level-x:hover { color: var(--q-dark); }
.ai-level-body { padding: 12px 14px 13px; max-height: 300px; overflow-y: auto; }
/* Das Panel hängt im DOM in der Antwortblase — dort steht sein Anker. Damit
erbt es zwei Regelwerke, die es nicht meinen: die globale Vorgabe
`p { font-size: var(--fs-16) }` aus tokens.css und die Absatz- und
Listenregeln der Antwort (`.ai-msg.from-ai p|ul|li`). Letztere sind
spezifischer als eine einfache Klasse, deshalb steht die Blase in den
folgenden Selektoren mit drin. Ohne das standen die Absätze auf 16 px und
die gedämpften Stellen in Textfarbe — die Gliederung las sich umgekehrt zur
Absicht. */
.ai-level-pop p,
.ai-msg.from-ai .ai-level-pop p {
margin: 0; font-size: 0.71875rem; line-height: 1.55;
}
/* Der Zweck ist der Einstieg und steht eine Spur kräftiger — als bewusste
Abstufung, nicht als Nebenwirkung. Die Klasse steht am Element, damit die
Sammelregel darüber sie nicht wieder einebnet. */
.ai-level-pop p.ai-level-lead,
.ai-msg.from-ai .ai-level-pop p.ai-level-lead { font-size: 0.75rem; color: var(--q-dark); }
/* Die Leitfrage entscheidet, ob die Ebene die richtige ist — als abgesetztes
Zitat, nicht als weiterer Absatz. */
.ai-level-pop p.ai-level-q,
.ai-msg.from-ai .ai-level-pop p.ai-level-q {
margin: 8px 0 0;
padding-left: 9px; border-left: 2px solid var(--q-highlight-3);
font-style: italic; color: var(--q-medium);
}
.ai-level-sec { margin-top: 12px; }
.ai-level-lbl {
font-size: 0.59375rem; font-weight: var(--w-bold);
text-transform: uppercase; letter-spacing: 0.06em;
color: var(--q-medium); margin-bottom: 5px;
}
/* Ablaufschritte als fließende Folge. Kacheln je Schritt wären hier falsch:
Die Schritte sind unterschiedlich lang, brechen um und ergäben ein
unruhiges Raster. Das Trennzeichen tritt zurück, die Schritte bleiben. */
.ai-level-flow {
padding: 7px 9px; background: var(--surface-soft); border-radius: 7px;
font-size: 0.65625rem; line-height: 1.7; color: var(--q-medium);
}
.ai-level-flow i {
font-style: normal; font-weight: var(--w-bold);
color: var(--q-highlight-3-text); margin: 0 5px;
}
/* Das Panel hängt im DOM in der Antwortblase und erbt sonst deren
Aufzählungszeichen (`.ai-msg.from-ai ul { list-style: disc }`). Zusammen mit
dem eigenen Punkt stünden zwei Marker je Zeile. Die Blase im Selektor ist
nötig, weil die geerbte Regel sonst spezifischer bliebe. */
.ai-level-list,
.ai-msg.from-ai .ai-level-pop ul {
margin: 0; padding: 0; list-style: none;
}
.ai-level-list li,
.ai-msg.from-ai .ai-level-pop li {
position: relative; padding-left: 14px; margin-bottom: 3px;
color: var(--q-medium);
}
.ai-level-list li::before {
content: ""; position: absolute; left: 3px; top: 7px;
width: 4px; height: 4px; border-radius: 50%; background: var(--q-highlight-3);
}
/* „Nicht enthalten" trägt bewusst dasselbe Aufzählungszeichen wie „Leistet".
Ein abweichender Marker legt eine zweite Bedeutungsebene nahe, die es nicht
gibt — was gemeint ist, sagt die Überschrift des Abschnitts. */
.ai-level-pop p.ai-level-use,
.ai-msg.from-ai .ai-level-pop p.ai-level-use { color: var(--q-medium); }
/* Verweis auf einen Eintrag: [ma-014] wird anklickbar. */
.ai-ref {
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 0.71875rem;
padding: 1px 6px;
border-radius: 6px;
background: rgba(21,165,181,0.12);
color: var(--q-highlight-2);
border: none;
cursor: pointer;
}
.ai-ref:hover { background: rgba(21,165,181,0.24); }
.ai-ref:disabled { cursor: default; opacity: 0.75; }
/* Quellen einer Antwort — eingeklappt, damit sie die Antwort nicht verdrängen. */
.ai-sources { margin-top: 8px; font-size: 0.71875rem; }
.ai-sources > summary {
cursor: pointer;
color: var(--q-highlight-2);
font-weight: var(--w-bold);
list-style: none;
}
.ai-sources > summary::-webkit-details-marker { display: none; }
.ai-sources > summary::before { content: "▸ "; }
.ai-sources[open] > summary::before { content: "▾ "; }
.ai-sources ol,
.ai-sources ul { margin: 6px 0 0; padding-left: 18px; }
.ai-sources li { margin-bottom: 5px; color: var(--q-dark); }
.ai-sources li span { display: block; color: var(--q-medium); font-size: 0.6875rem; }
.ai-sources li.is-marked {
background: rgba(21,165,181,0.12);
border-radius: 6px;
padding: 2px 6px;
margin-left: -6px;
}
/* Quellenangabe als Sprung in die Detailansicht. */
.ai-src-link {
border: none; background: none; padding: 0;
font: inherit; font-weight: var(--w-bold);
color: var(--q-highlight-2);
text-align: left; cursor: pointer;
}
.ai-src-link:hover { text-decoration: underline; }
.ai-src-basis { margin-top: 8px; color: var(--q-medium); font-size: 0.6875rem; }
/* Quellennummer im Antworttext — schmaler als ein Kennungs-Chip. */
.ai-ref-src { font-size: 0.65625rem; padding: 1px 5px; }
/* Fußzeile einer Antwort: Herkunft und Dauer, bewusst zurückhaltend. */
.ai-meta {
margin-top: 6px;
font-size: 0.65625rem;
color: var(--q-medium);
}
/* Schaltflächen an einer Antwort — Vorlesen und Kopieren (T-174).
Zurückhaltend gestaltet und **dauerhaft sichtbar**, nicht erst beim
Überfahren: Ein Bedienelement, das nur mit der Maus erscheint, gibt es für
die Tastatur nicht — und wer nur die Tastatur benutzt, ist genau die
Zielgruppe des Vorlesens. */
.ai-msg-tools {
display: flex;
gap: 2px;
margin-top: 8px;
}
.ai-msg-tool {
width: 26px; height: 26px;
border: 0; padding: 0; background: none; cursor: pointer;
border-radius: var(--radius-sm);
display: grid; place-items: center;
opacity: 0.5;
transition: opacity var(--dur-fast) var(--ease-std), background var(--dur-fast) var(--ease-std);
}
.ai-msg-tool:hover { opacity: 1; background: var(--surface-soft); }
.ai-msg-tool .ic {
width: 14px; height: 14px;
background-position: center; background-repeat: no-repeat; background-size: contain;
}
/* Während vorgelesen wird, trägt die Schaltfläche das Anhalten-Zeichen und
bleibt voll sichtbar — sonst wäre nicht zu erkennen, welche Antwort spricht. */
.ai-msg-tool.is-aktiv { opacity: 1; background: var(--surface-soft); }
/* Schreibanzeige und Fortschrittstext des Assistenten stehen seit T-147 nicht
mehr hier: Beides leistet die Komponente `ladeanzeige`
(components/ladeanzeige.css, Entwurfsvariante QZ-L09). Die frueheren Klassen
.ai-progress, .ai-typing und @keyframes aiTyping sind entfallen — eine
zweite Punktanimation mit eigenem Takt neben der gemeinsamen waere genau die
Redundanz, die ucs.md §25.4 ausschliesst. */
.ai-input-row .send {
width: 36px; height: 36px; border-radius: 50%;
background: var(--q-highlight-2);
display: grid; place-items: center;
}
.ai-input-row .send .ic {
width: 14px; height: 14px;
background: url("../assets/icons/arrow_right.svg") center / contain no-repeat;
filter: brightness(0) invert(1);
}
/* Spracheingabe (Mikrofon) — teilt sich die Engine mit der Aufnahmefunktion */
.ai-input-row .mic {
width: 36px; height: 36px; border-radius: 50%;
border: 1px solid var(--divider);
background: #fff;
display: grid; place-items: center;
flex-shrink: 0;
transition: border-color var(--dur-fast) var(--ease-std), background var(--dur-fast) var(--ease-std);
}
.ai-input-row .mic:hover { border-color: var(--q-highlight-3); }
.ai-input-row .mic.listening {
background: var(--danger);
border-color: var(--danger);
}
.ai-mic-dot {
width: 12px; height: 12px; border-radius: 50%; background: #fff;
animation: recPulse 1.1s var(--ease-std) infinite;
}
@media (prefers-reduced-motion: reduce) { .ai-mic-dot { animation: none; } }
.ai-listening {
display: flex; align-items: center; gap: 10px;
padding: 9px 16px;
border-top: 1px solid var(--divider);
background: var(--surface-soft);
}
.ai-listening-text { font-size: 0.78125rem; font-weight: var(--w-bold); color: var(--q-dark); }
.ai-listening-text .muted { font-weight: var(--w-regular); font-size: 0.71875rem; }
.ai-listening-stop {
margin-left: auto;
font-size: 0.75rem; font-weight: var(--w-bold); color: var(--q-highlight-2);
padding: 4px 12px; border-radius: var(--radius-pill);
border: 1px solid var(--divider); background: #fff;
}
.ai-listening-stop:hover { border-color: var(--q-highlight-2); }
.ai-listening-wave { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; }
.ai-listening-wave span {
width: 3px; height: 6px; border-radius: 2px; background: var(--danger);
animation: aiWave 0.9s var(--ease-std) infinite;
}
.ai-listening-wave span:nth-child(2) { animation-delay: 0.15s; }
.ai-listening-wave span:nth-child(3) { animation-delay: 0.3s; }
.ai-listening-wave span:nth-child(4) { animation-delay: 0.45s; }
@keyframes aiWave { 0%,100% { height: 5px; } 50% { height: 15px; } }
@media (prefers-reduced-motion: reduce) { .ai-listening-wave span { animation: none; height: 10px; } }
.ai-mic-error {
display: flex; align-items: center; gap: 7px;
padding: 8px 16px; border-top: 1px solid var(--divider);
font-size: 0.75rem; color: var(--danger-text); background: var(--status-crit-soft);
}
/* Live-Pegel + VAD im Assistenten */
.ai-meter { width: 70px; height: 6px; border-radius: var(--radius-pill); background: var(--surface-soft); overflow: hidden; flex-shrink: 0; }
.ai-meter-fill { display: block; height: 100%; background: var(--q-highlight-3); border-radius: var(--radius-pill); transition: width 0.08s linear; }
.ai-listening-rec { display: inline-flex; }
.ai-vad { font-size: 0.6875rem; font-weight: var(--w-bold); color: var(--q-medium); white-space: nowrap; }
.ai-vad.active { color: var(--q-highlight-3-text); }
/* Stille läuft ab: das Ende der Eingabe kündigt sich an. */
.ai-vad.counting { color: var(--q-highlight-1); }
/* Einstellungen-Popover der Spracheingabe */
.ai-opt-wrap { position: relative; flex-shrink: 0; }
.ai-gear {
width: 36px; height: 36px; border-radius: 50%;
border: 1px solid var(--divider); background: #fff;
display: grid; place-items: center;
position: relative;
transition: border-color var(--dur-fast) var(--ease-std), background var(--dur-fast) var(--ease-std);
}
.ai-gear:hover, .ai-gear.active { border-color: var(--q-highlight-3); background: var(--surface-soft); }
.ai-gear.dirty::after {
content: ""; position: absolute; top: 3px; right: 3px;
width: 8px; height: 8px; border-radius: 50%;
background: var(--q-highlight-1); border: 1.5px solid #fff;
}
.ai-pop {
position: absolute; bottom: calc(100% + 10px); left: 0;
width: 320px; max-width: calc(100vw - 40px);
background: #fff; border: 1px solid var(--divider); border-radius: 16px;
box-shadow: var(--shadow-card);
z-index: 60; overflow: hidden;
animation: ai-pop-in var(--dur-fast) var(--ease-std);
}
@keyframes ai-pop-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.ai-pop-head {
display: flex; align-items: flex-start; gap: 10px;
padding: 14px 16px; border-bottom: 1px solid var(--divider);
}
.ai-pop-title { font-family: var(--font-display); font-weight: var(--w-bold); font-size: 0.84375rem; color: var(--q-highlight-2); }
.ai-pop-sub { font-size: 0.71875rem; color: var(--q-medium); line-height: 1.4; margin-top: 2px; }
.ai-pop-x { margin-left: auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.ai-pop-x:hover { background: var(--surface-soft); }
.ai-pop-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; max-height: 60vh; overflow-y: auto; }
.ai-pop-row { display: flex; flex-direction: column; gap: 5px; }
.ai-pop-label { font-size: 0.75rem; font-weight: var(--w-bold); color: var(--q-dark); }
.ai-pop-hint { font-size: 0.6875rem; color: var(--q-medium); line-height: 1.4; }
.ai-pop-perm { align-self: flex-start; margin-top: 2px; }
.ai-pop-row-toggle { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
/* Gruppenüberschrift im Aufklappmenü — die Gruppen unterscheiden sich in ihrer
Reichweite (dauerhaft gemerkt gegenüber temporär übersteuernd), das muss
ablesbar sein. Der erste Titel steht direkt unter der Kopfzeile und braucht
deshalb keinen zusätzlichen Abstand. */
.ai-pop-group {
font-size: 0.6875rem; font-weight: var(--w-bold); text-transform: uppercase;
letter-spacing: 0.05em; color: var(--q-medium);
padding-bottom: 6px; border-bottom: 1px solid var(--divider); margin-bottom: -4px;
}
.ai-pop-group + .ai-pop-row { margin-top: 0; }
.ai-pop-group:not(:first-child) { margin-top: 6px; }
.ai-pop-group-sub { font-weight: var(--w-regular); text-transform: none; letter-spacing: 0; }
.ai-pop-toggle-text { display: flex; flex-direction: column; gap: 3px; }
/* Regler der Sprechgeschwindigkeit (T-174). `accent-color` wie beim einzigen
anderen Regler der Anwendung (`.tb-size-inputs`, Dateigrößenfilter) — zwei
Regler in zwei Farben wären eine Unterscheidung ohne Bedeutung. */
.ai-pop-range { width: 100%; accent-color: var(--q-highlight-2); }
.ai-pop-foot { padding: 12px 16px; border-top: 1px solid var(--divider); display: flex; justify-content: flex-end; align-items: center; background: var(--surface-soft); }
/* Zahlen-Stepper (Einstellungen) */
.set-stepper { display: flex; align-items: stretch; gap: 0; }
.set-stepper-btn {
width: 40px; flex-shrink: 0;
border: 2px solid var(--q-linie); background: #fff;
font-size: 1.125rem; font-weight: var(--w-bold); color: var(--q-dark); line-height: 1;
display: grid; place-items: center;
}
.set-stepper-btn:first-child { border-right: none; }
.set-stepper-btn:last-child { border-left: none; }
.set-stepper-btn:hover:not(:disabled) { border-color: var(--q-highlight-1); background: var(--surface-soft); }
.set-stepper-btn:disabled { opacity: 0.4; cursor: default; }
.set-stepper-input { text-align: center; -moz-appearance: textfield; }
.set-stepper-input::-webkit-outer-spin-button, .set-stepper-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Quantiz® Assistant: Umschalter-Zeile */
.set-limit-toggle { display: flex; align-items: flex-start; gap: 12px; }
.set-limit-toggle-text { display: flex; flex-direction: column; gap: 3px; }
.set-fieldset-inline-label { font-size: 0.8125rem; font-weight: var(--w-bold); color: var(--q-dark); }
/* Quantiz® Assistant: Tastenkürzel-Erfassung */
.set-shortcut-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.set-shortcut-keys { display: inline-flex; gap: 4px; }
.set-shortcut-keys kbd {
font-family: var(--font-mono); font-size: 0.71875rem; font-weight: var(--w-bold);
background: var(--surface-soft); border: 1px solid var(--divider);
border-radius: 5px; padding: 3px 7px; color: var(--q-dark);
}
#btnKiShortcutChange.active { border-color: var(--q-highlight-3); background: var(--surface-soft); color: var(--q-highlight-3-text); }
.set-shortcut-error { color: var(--danger-text); display: block; margin-top: 6px; }
/* Hinweis auf die Pfeiltasten-Historie im Assistenten */
.ai-hist-hint {
display: flex; align-items: center; gap: 6px;
padding: 4px 16px 12px;
font-size: 0.6875rem; color: var(--q-medium);
}
.ai-hist-hint kbd {
font-family: var(--font-mono); font-size: 0.65625rem;
background: var(--surface-soft); border: 1px solid var(--divider);
border-radius: 4px; padding: 0 4px; color: var(--q-dark);
}
/* ── Tweaks panel hook (anchor; the starter component handles its own UI) */
/* ── Detail panel (slide-over) ─────────────────────────────────────────── */
.detail-modal-bg {
position: fixed; inset: 0;
background: rgba(16, 49, 78, 0.18);
backdrop-filter: blur(2px);
z-index: 40;
opacity: 0;
pointer-events: none;
transition: opacity var(--dur-base) var(--ease-std);
}
.detail-modal-bg.open { opacity: 1; pointer-events: auto; }
.detail-panel {
position: fixed;
top: 16px; right: 16px; bottom: 16px;
width: 640px; max-width: calc(100vw - 32px);
background: #fff;
border-radius: 18px;
box-shadow: 0 16px 48px rgba(0,0,0,0.18);
display: flex;
flex-direction: column;
z-index: 41;
overflow: hidden;
transform: translateX(16px) scale(0.98);
opacity: 0;
pointer-events: none;
transition: transform var(--dur-base) var(--ease-std), opacity var(--dur-base) var(--ease-std);
}
.detail-panel.open { transform: translateX(0) scale(1); opacity: 1; pointer-events: auto; }
.detail-head {
padding: 22px 24px;
display: flex; align-items: flex-start; gap: 14px; justify-content: space-between;
border-bottom: 1px solid var(--divider);
}
.detail-head .eyebrow {
font-size: 0.65625rem;
letter-spacing: var(--tracking-xwide);
text-transform: uppercase;
color: var(--q-highlight-3-text);
font-weight: var(--w-bold);
}
.detail-head h2 {
font-family: var(--font-display);
font-weight: var(--w-bold);
font-size: 1.375rem;
color: var(--q-dark);
letter-spacing: -0.01em;
margin: 6px 0 0 0;
line-height: 1.2;
}
.detail-body { flex: 1; overflow-y: auto; padding: 22px 24px; }
.detail-foot {
padding: 14px 22px;
border-top: 1px solid var(--divider);
background: var(--surface-soft);
display: flex; gap: 10px; justify-content: flex-end;
flex-shrink: 0;
}
/* ── Detail-panel tabs ─────────────────────────────────────────────────── */
.dp-tabs {
display: flex; gap: 4px;
padding: 0 24px;
border-bottom: 1px solid var(--divider);
overflow-x: auto;
flex-shrink: 0;
}
.dp-tab {
position: relative;
flex: 0 0 auto;
padding: 12px 4px;
margin-right: 14px;
background: none; border: 0; border-bottom: 2px solid transparent;
font-family: var(--font-sans);
font-size: 0.8125rem; font-weight: var(--w-medium);
color: var(--q-medium);
cursor: pointer;
display: inline-flex; align-items: center; gap: 7px;
transition: color var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std);
white-space: nowrap;
}
.dp-tab:hover { color: var(--q-dark); }
.dp-tab.active { color: var(--q-highlight-2); border-bottom-color: var(--q-highlight-1); }
.dp-tab-count {
display: inline-grid; place-items: center;
min-width: 18px; height: 18px; padding: 0 5px;
border-radius: 9px;
background: var(--q-bright); color: var(--q-dark);
font-size: 0.65625rem; font-weight: var(--w-bold);
}
.dp-tab.active .dp-tab-count { background: var(--q-highlight-1); color: var(--q-highlight-2); }
/* blocks & related lines inside detail panel */
.detail-block { padding: 4px 0 12px; }
.detail-block > .assign-search { margin-bottom: 10px; }
.detail-block-h {
font-size: 0.6875rem; letter-spacing: var(--tracking-xwide); text-transform: uppercase;
color: var(--q-medium); font-weight: var(--w-bold); margin-bottom: 10px;
}
.detail-tab-actions { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 14px; }
.detail-rel {
display: block; width: 100%; text-align: left;
padding: 9px 12px; border: 1px solid var(--divider); border-radius: 10px;
background: #fff; cursor: pointer; font-family: var(--font-sans);
margin-bottom: 6px;
transition: border-color var(--dur-fast) var(--ease-std), background var(--dur-fast) var(--ease-std);
}
.detail-rel:hover { border-color: var(--q-linie); background: var(--surface-soft); }
.detail-rel-title { display: block; font-size: 0.8125rem; font-weight: var(--w-bold); color: var(--q-dark); }
.detail-rel-sub { display: block; font-size: 0.71875rem; font-weight: var(--w-light); color: var(--q-medium); margin-top: 2px; }
/* field rows in detail panel */
.field-row {
display: grid;
grid-template-columns: 150px 1fr;
gap: 14px;
padding: 10px 0;
border-bottom: 1px dashed var(--divider);
align-items: center;
}
.field-row:last-child { border-bottom: 0; }
.field-row.field-row-block { align-items: start; }
.field-row.field-row-block .field-label { padding-top: 2px; }
.field-row .field-label {
font-size: 0.6875rem;
letter-spacing: var(--tracking-xwide);
text-transform: uppercase;
color: var(--q-medium);
font-weight: var(--w-bold);
}
.field-row .field-val { font-size: 0.84375rem; min-width: 0; }
/* ── Detail-head sub-components ──────────────────────────────────────────── */
.detail-head-main { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.detail-head-titles { min-width: 0; }
.detail-backlink {
display: inline-flex; align-items: center; gap: 5px;
background: none; border: 0; padding: 0; margin: 0 0 7px; cursor: pointer;
font-size: 0.71875rem; color: var(--q-medium); font-weight: var(--w-bold);
letter-spacing: 0.04em; transition: color var(--dur-fast) var(--ease-std);
}
.detail-backlink:hover { color: var(--q-highlight-3-text); }
/* ── Modal dialog ─────────────────────────────────────────────────────────── */
@keyframes modal-in { from { transform: translateY(12px) scale(0.985); opacity: 0.7; } to { transform: none; opacity: 1; } }
.modal-bg {
position: fixed; inset: 0;
z-index: 60;
background: rgba(16, 49, 78, 0.30);
backdrop-filter: blur(3px);
display: flex; align-items: flex-start; justify-content: center;
padding: 7vh 20px 40px;
overflow-y: auto;
transition: padding 320ms var(--ease-std);
}
.modal {
width: 100%;
background: #fff;
border-radius: 20px;
box-shadow: 0 24px 70px rgba(16, 49, 78, 0.30);
display: flex; flex-direction: column;
max-height: 86vh;
overflow: hidden;
animation: modal-in var(--dur-base) var(--ease-out);
transform-origin: top center;
position: relative;
transition: max-width 320ms var(--ease-std), max-height 320ms var(--ease-std), height 320ms var(--ease-std), border-radius 320ms var(--ease-std);
}
/* Zweite Dialogebene (T-212).
Ein Anlagedialog, der aus einem offenen Formular heraus geoeffnet wird, ist
derselbe Dialog wie sonst — er liegt nur hoeher. Der Stapelwert 100 ist der
der Personenanlage (`person_anlegen_bg`): ueber dem Dialog darunter (60),
unter einer Rueckfrage (120). `starteFokusWache()` waehlt darueber die
oberste Ueberlagerung und legt Fokusfalle und Abschottung um sie.
Der Hintergrund ist etwas dichter als der der ersten Ebene: Zwei gleich
getoente Schichten uebereinander ergaeben einen Grund, der sich von einer
einzelnen nicht unterscheidet — und dann saehe man nicht, dass zwei Dialoge
offen sind. */
.modal-bg.modal-bg-oben { z-index: 100; background: rgba(16, 49, 78, 0.24); }
.modal.fullscreen { max-width: 100vw; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; border-radius: 0; }
.modal-bg.fullscreen { padding: 0; }
.modal-form { display: flex; flex-direction: column; min-height: 0; }
.modal-head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 16px;
padding: 24px 28px 18px;
border-bottom: 1px solid var(--divider);
flex-shrink: 0;
}
.modal-eyebrow {
font-size: 0.65625rem;
letter-spacing: var(--tracking-xwide);
text-transform: uppercase;
color: var(--q-highlight-3-text);
font-weight: var(--w-bold);
}
.modal-head h2 {
font-family: var(--font-display);
font-weight: var(--w-bold);
font-size: 1.5rem;
color: var(--q-highlight-2);
line-height: 1.18;
margin: 5px 0 0 0;
letter-spacing: -0.01em;
}
/* ── Hausform der runden Kopfzeilen-Knöpfe (T-257) ───────────────────────────
*
* Schließen und Vollbildwechsel — in den Dialogen und im Einrichtungsassistenten
* dieselbe Form: 34 px im Kreis, abgesetzt mit einem Ring auf heller Fläche.
*
* Die Form stammt aus dem Assistenten (T-244); bis T-257 trugen die Dialoge
* dieselben Maße **ohne** Ring und ohne Fläche, und das war der sichtbare
* Unterschied. Sie steht hier **einmal** und nicht zweimal: Eine abgeschriebene
* Fassung in `components/einrichtung.css` wäre eine zweite Quelle für dieselbe
* Aussage, und die nächste Änderung träfe nur eine davon. Der Preis ist, dass
* `app.css` hier eine Komponentenklasse kennt — deshalb steht der Verweis
* darauf auch in `einrichtung.css` an der Stelle, an der die Regel einmal war.
*
* `box-sizing: border-box` gilt global (Zeile 43), der Ring vergrößert die
* Knöpfe also nicht.
*/
.modal-x,
.modal-fs,
.einrichtung_control,
.grossdialog_control {
width: 34px; height: 34px;
border-radius: var(--radius-circle);
border: 1px solid var(--divider);
background: var(--surface);
cursor: pointer;
display: grid; place-items: center;
flex-shrink: 0;
transition: background var(--dur-fast) var(--ease-std);
}
.modal-x:hover,
.modal-fs:hover,
.einrichtung_control:hover,
.grossdialog_control:hover { background: var(--surface-soft); }
.modal-x .ic { width: 14px; height: 14px; background-position: center; background-repeat: no-repeat; background-size: contain; opacity: 0.5; }
/* Nur die Lage ist beim Vollbild-Knopf eigen: Er hängt über der Kopfzeile,
weil dort kein Platz in der Reihe ist. `right` ergibt zusammen mit der Breite
des Schließen-Knopfes (34 px bei 28 px Abstand vom Rand) dieselben 8 px
Abstand wie im Assistenten — vor T-257 waren es 5 px, was ohne Ring niemand
sah. */
.modal-fs {
position: absolute; top: 24px; right: 70px;
z-index: 2;
}
.modal-fs .ic { width: 15px; height: 15px; opacity: 0.55; background-position: center; background-repeat: no-repeat; background-size: contain; }
.modal.fullscreen .modal-fs .ic { filter: none; }
.modal-body {
padding: 22px 28px 26px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 20px;
flex: 1;
}
.modal-foot {
padding: 16px 28px;
border-top: 1px solid var(--divider);
display: flex;
align-items: center;
gap: 12px;
background: var(--surface-soft);
flex-shrink: 0;
}
.modal-foot-main { display: flex; gap: 10px; margin-left: auto; }
.modal-del {
display: inline-flex; align-items: center; gap: 7px;
font-size: 0.8125rem; font-weight: var(--w-bold);
color: var(--danger-text);
padding: 8px 4px;
border: 0; background: transparent; cursor: pointer;
transition: opacity var(--dur-fast) var(--ease-std);
}
.modal-del:hover { opacity: 0.78; }
/* Symbol in der **Textfarbe** statt im eigenen Schwarz: Die Symbole sind
einfarbige Grafiken; eingefärbt werden sie über eine Maske, durch die die
Schriftfarbe scheint.
Beim zweiten Verwender herausgelöst (T-199 Nachtrag): Die Regel gehörte bis
dahin allein `.modal-del`, und der Knopf „Entfernen" im Porträt-Dialog trug
deshalb roten Text neben einem schwarzen Symbol. Wer sie braucht, setzt
`data-ic-tint` an den Knopf — das Symbol selbst bleibt ein gewöhnliches
`renderIcon()`, das keine Klasse entgegennimmt. */
.modal-del .ic,
[data-ic-tint] .ic {
background-image: none !important;
background-color: currentColor;
-webkit-mask: var(--ic-src) no-repeat center / contain;
mask: var(--ic-src) no-repeat center / contain;
opacity: 1;
}
.modal-section-divider {
display: flex; align-items: center; gap: 12px;
margin: 6px 0 0;
font-size: 0.6875rem; letter-spacing: var(--tracking-xwide); text-transform: uppercase;
font-weight: var(--w-bold); color: var(--q-medium);
}
.modal-section-divider::after { content: ""; flex: 1; height: 1px; background: var(--divider); }
/* ── Form controls inside modals ─────────────────────────────────────────── */
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field > label {
font-size: 0.6875rem;
letter-spacing: var(--tracking-xwide);
text-transform: uppercase;
color: var(--q-dark);
font-weight: var(--w-bold);
}
.form-field > label .req { color: var(--danger-text); }
.form-input, .form-select, .form-textarea {
width: 100%;
border: 2px solid var(--q-linie);
border-radius: 0; /* brand: sharp inputs */
padding: 11px 13px;
font-size: 0.875rem;
font-family: var(--font-sans);
font-weight: var(--w-light);
color: var(--q-dark);
background: #fff;
outline: none;
transition: border-color var(--dur-fast) var(--ease-std);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--q-medium); }
/* Eine Höhe für einzeilige Felder (T-282). Ohne Angabe ergab sie sich aus dem
Inhalt — Datum und Uhrzeit standen am Schreibtisch 49 px hoch, Text und Zahl
47 px, auf dem Telefon noch weiter auseinander (Rückmeldung des
Auftraggebers: Uhrzeit höher als Dauer). 47 px ist die Höhe des Textfelds,
für das sich nichts ändert. */
input.form-input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
select.form-input, .form-select { height: 2.9375rem; }
/* Datum und Uhrzeit bringen auf Telefonen eine eigene Mindestbreite und
Darstellung mit — das Datum ragte im Besprechungsdialog über den Rand.
Ohne Eigendarstellung nehmen sie Breite und Höhe des Feldes an; der Wert
steht links wie in jedem anderen Feld. */
input.form-input[type="date"], input.form-input[type="time"], input.form-input[type="datetime-local"] {
-webkit-appearance: none; appearance: none;
min-width: 0; display: block;
}
input.form-input::-webkit-date-and-time-value { text-align: left; margin: 0; min-height: 0; }
.form-textarea { resize: vertical; min-height: 92px; line-height: 1.5; }
.form-hint { font-size: 0.75rem; color: var(--q-medium); font-weight: var(--w-light); line-height: 1.4; }
.form-error { font-size: 0.78125rem; color: var(--danger-text); font-weight: 500; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-select-wrap { position: relative; }
.form-select-wrap::after {
content: "";
position: absolute; right: 14px; top: 50%;
width: 9px; height: 9px;
border-right: 2px solid var(--q-dark);
border-bottom: 2px solid var(--q-dark);
transform: translateY(-65%) rotate(45deg);
pointer-events: none;
}
.form-select-wrap .form-select { appearance: none; -webkit-appearance: none; padding-right: 52px; cursor: pointer; }
/* Status-Picker (pill buttons in dialogs) */
.status-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.status-pick-opt {
display: inline-flex; align-items: center; gap: 8px;
padding: 9px 15px; border-radius: 999px;
border: 1px solid var(--divider); background: #fff;
font-size: 0.84375rem; font-weight: 500; color: var(--q-dark);
cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast);
}
.status-pick-opt:hover { border-color: var(--q-linie); }
.status-pick-opt.active { border-color: var(--q-highlight-2); background: var(--surface-soft); font-weight: var(--w-bold); }
/* disabled state — chips visible but inert (Status im Automatik-Modus) */
.status-pick-opt:disabled { cursor: default; }
.status-pick-opt:disabled:not(.active) { opacity: 0.4; }
.status-pick-opt:disabled:hover { border-color: var(--divider); }
.status-pick-opt:disabled.active { border-color: var(--q-linie); }
.status-pick-opt:disabled.active:hover { border-color: var(--q-linie); }
/* Auswahlkarten (auswahlkarten) — Einfachauswahl mit Radioknopf, Titel und
Beschreibung je Karte (T-288).
Bis T-288 dreimal als eigene Kopie gebaut: `.portraet_regel_opt`
(Einstellungen › Personen, T-199), `.einrichtung_wahl_item`
(Ersteinrichtung › Datenbestand, T-244) und `.tarif_auswahl_item`
(Tarif & Abrechnung, T-285). Porträt und Tarif waren wertgleich; diese
Fassung ist die Grundform. Die Ersteinrichtung ist **bewusst größer** — sie
ist dort die Hauptentscheidung eines Schritts — und behält ihre Werte als
Variante `auswahlkarten-gross`, Wert für Wert gemessen gleich.
Benennung wie bei `.pill-seg` und `.status-pick-opt`: Behälter plus `-opt`
für die Option. Markup:
div.auswahlkarten[role=radiogroup][aria-label|aria-labelledby]
label.auswahlkarten-opt[.active]
input[type=radio]
span.auswahlkarten-inhalt
span.auswahlkarten-titel
span.auswahlkarten-beschreibung
Struktur: docs/css/structure/auswahlkarten.md ·
Blueprint: blueprints/blueprint_auswahlkarten.html */
.auswahlkarten { display: grid; gap: 8px; }
.auswahlkarten-opt {
display: flex; align-items: flex-start; gap: 11px;
padding: 11px 13px;
border: 1px solid var(--divider); border-radius: 14px;
background: #fff; cursor: pointer;
transition: border-color var(--dur-fast) var(--ease-std), background var(--dur-fast) var(--ease-std);
}
.auswahlkarten-opt:hover { border-color: var(--q-highlight-3); }
.auswahlkarten-opt.active { border-color: var(--q-highlight-3); background: var(--surface-soft); }
/* Ohne `accent-color` zeichnet der Browser den Punkt im Systemblau (T-199). */
.auswahlkarten-opt input {
flex: none; width: 16px; height: 16px; margin-top: 2px;
accent-color: var(--q-highlight-3); cursor: pointer;
}
.auswahlkarten-opt:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.auswahlkarten-opt:has(input:disabled) { cursor: default; opacity: 0.65; }
.auswahlkarten-inhalt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* Beide Textbausteine setzen alles selbst: Sie sind `span` in einem `label`
und erben sonst Zeilenhöhe und Gewicht der Umgebung (gemessen: 19,5 statt
18,2 px im Personenbereich). */
.auswahlkarten-titel {
font-family: var(--font-sans); font-size: 0.8125rem; font-weight: var(--w-bold);
font-style: normal; line-height: 1.4; color: var(--q-dark);
}
.auswahlkarten-beschreibung {
font-family: var(--font-sans); font-size: 0.71875rem; font-weight: var(--w-regular);
font-style: normal; line-height: 1.45; color: var(--q-medium); text-wrap: pretty;
}
/* Variante: groß — die Hauptentscheidung eines Schritts (Ersteinrichtung). */
.auswahlkarten-gross { display: flex; flex-direction: column; gap: 10px; }
.auswahlkarten-gross .auswahlkarten-opt {
gap: 12px; padding: 15px 17px;
border-width: 2px; border-radius: var(--radius-md);
background: transparent;
}
.auswahlkarten-gross .auswahlkarten-opt:hover { border-color: var(--q-medium); }
.auswahlkarten-gross .auswahlkarten-opt.active {
border-color: var(--q-highlight-3);
background: color-mix(in srgb, var(--q-highlight-3) 8%, var(--surface));
}
/* Browsergröße des Radioknopfs (13 px) wie vor T-288 — keine Umgestaltung. */
.auswahlkarten-gross .auswahlkarten-opt input { flex: 0 1 auto; width: auto; height: auto; margin-top: 3px; }
.auswahlkarten-gross .auswahlkarten-inhalt { gap: 4px; }
.auswahlkarten-gross .auswahlkarten-titel {
display: flex; align-items: center; gap: 8px;
font-size: 0.84375rem; line-height: 1.5;
}
.auswahlkarten-gross .auswahlkarten-beschreibung {
font-size: 0.78125rem; font-weight: var(--w-light); line-height: 1.5;
}
/* Pillenleiste (pill-seg) — der eine Umschalter fuer 2-3 kurze Optionen.
Uebernommen aus dem Referenzentwurf (T-151); dort .pill-seg in
BesprechungDialog.jsx und BerichtDialog.jsx. Sie steht in Formularfeldern
der Dialoge **und** im Sortier-Popover der Werkzeugleisten (T-152).
**Abgrenzung zu `.status-pick-opt`** (steht unmittelbar darueber): das sind
einzelne umrandete Chips mit weicher Fuellung im Aktivzustand -- eine
Auswahl aus mehreren gleichrangigen, umbruchfaehigen Werten, keine
geschlossene Leiste. Die Benennung folgt diesem Nachbarn: Behaelter plus
`-opt` fuer die Option.
**`.tb-seg` ist in T-152 entfallen.** Sie war die Vorgaengerin an allen zehn
Fundstellen: fuellte die Breite ihres Behaelters und trennte die Knoepfe mit
einer Linie. Im Dialog musste sie je Fundstelle per `max-width` eingeschnuert
werden; im Popover schien die volle Breite noetig -- gemessen wurde das nie.
Sie war ausserdem zweimal deklariert, in beiden Toolbar-Abschnitten dieser
Datei.
Die drei Angaben zur Breite gehoeren zusammen und sind noetig, weil
`.form-field` eine Spalte mit `align-items: stretch` ist: `inline-flex`
allein wuerde die Leiste trotzdem ueber die ganze Feldbreite ziehen. */
.pill-seg {
display: inline-flex; align-items: center; gap: 2px;
align-self: flex-start; width: fit-content; flex: 0 0 auto;
padding: 5px;
border: 1px solid var(--divider); border-radius: var(--radius-pill);
background: #fff;
}
.pill-seg-opt {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 22px; border-radius: var(--radius-pill);
border: 0; background: transparent;
font-family: var(--font-sans); font-size: 0.875rem; font-weight: var(--w-regular);
color: var(--q-dark); cursor: pointer; white-space: nowrap;
transition: background var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std);
}
/* Zahl an einer Option (T-214) — Form von `.dp-tab-count` uebernommen, weil
sie dieselbe Aufgabe hat. Der Aktivzustand braucht einen eigenen Grund: Die
aktive Option ist navy gefuellt, `--q-bright` waere darauf unlesbar. */
.pill-seg-count {
display: inline-grid; place-items: center;
min-width: 18px; height: 18px; padding: 0 5px;
border-radius: 9px;
background: var(--q-bright); color: var(--q-dark);
font-size: 0.65625rem; font-weight: var(--w-bold);
}
.pill-seg-opt.active .pill-seg-count { background: var(--q-highlight-1); color: var(--q-highlight-2); }
.pill-seg-opt:hover { background: var(--surface-soft); color: var(--q-highlight-2); }
.pill-seg-opt.active, .pill-seg-opt.active:hover {
background: var(--q-highlight-2); color: #fff; font-weight: var(--w-bold);
}
/* `var(--focus-ring)` statt des fest verdrahteten Petrols (T-216): Im
Sortier-Popover der Werkzeugleisten bleibt es petrol, im Dialog folgt es der
dortigen Limette. Im Dialog gewinnt ohnehin die Sammelregel
`.modal :focus-visible` ueber die Quellreihenfolge; diese Zeile traegt den
Popover-Fall. */
.pill-seg-opt:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* Gesperrt (T-316): Einstellungen › Live-Lagebild ohne Verwaltungsrecht.
Bis dahin trug keine Leiste `disabled`. */
.pill-seg-opt:disabled { cursor: not-allowed; }
.pill-seg-opt:disabled:not(.active) { opacity: 0.55; }
.pill-seg-opt:disabled:hover:not(.active) { background: transparent; color: var(--q-dark); }
/* Über die volle Breite (T-316) — im Einstellungsfach des Live-Lagebilds wie
im Entwurf (`.lv-f .r3d-seg`): Die Optionen teilen sich die Leiste, und wo
sie nicht in eine Zeile passen, brechen sie um; die Rundung wird dann zur
Kapsel mit festem Radius, sonst würde die Leiste zum Oval. */
.pill-seg.pill-seg-breit { display: flex; flex-wrap: wrap; width: 100%; align-self: stretch; border-radius: 22px; }
.pill-seg-breit .pill-seg-opt { flex: 1 1 auto; justify-content: center; padding-left: 14px; padding-right: 14px; }
/* Im Sortier-Popover steht die Leiste unter einer Abschnittsbeschriftung und
braucht Abstand zu ihr. Bisher trugen zwei der fuenf Popover dafuer ein
`style="margin-top:8px"` und drei gar nichts (T-152). Das Popover hat nur
eine Mindestbreite und waechst um die 10 px mit, die die Leiste mehr
braucht als die Vorgaengerin. */
.tb-pop .pill-seg { margin-top: 8px; }
/* Als Formularfeld auf dem Telefon (T-280): die Leiste über die volle
Feldbreite, die Optionen zu gleichen Teilen. Mit der Breite nach Inhalt
ragte „PDF · Markdown · Nur Archiv" im Berichtsdialog bei 320 px 83 px
über ein 229 px breites Feld (gemessen: Texte 165 px, dazu 6 × 22 px
Innenabstand). Nur unmittelbar in `.form-field` — die Leisten im
Sortierfach, im Zeitstrahl und in den Bereichsköpfen bleiben, wie sie
sind. `flex: 1 1 auto` und nicht `1 1 0`: Zu exakt gleichen Teilen bekäme
jede Option bei 320 px 71 px, „Nur Archiv" braucht mit Rand 82 — der Text
liefe aus seinem Knopf. So bekommt jede ihren Inhalt und den Rest zu
gleichen Teilen (gerechnet 201 von 213 px). */
/* Umbruch (T-316): Passen die Optionen auch so nicht in eine Zeile, bricht die
Leiste um wie `.pill-seg-breit`, statt über ihr Feld hinauszuragen —
gemessen in Einstellungen › Live-Lagebild bei 390 px: „Von vorne beginnen ·
Gesamtlage, dann anhalten · Anhalten" 98 px, die vier Assistenten-Optionen
24 px über dem Rand. Leisten, die passen, bleiben einzeilig. */
@media (max-width: 560px) {
.form-field > .pill-seg { width: 100%; align-self: stretch; flex-wrap: wrap; border-radius: 22px; }
.form-field > .pill-seg .pill-seg-opt {
flex: 1 1 auto;
justify-content: center;
padding-left: 6px; padding-right: 6px;
}
}
/* Status: Umschalter Automatisch / Manuell + Vorschau (Dialoge Thema/Schwerpunkt) */
.status-mode { display: flex; flex-direction: column; gap: 12px; }
.status-mode-tag {
font-size: 0.625rem; letter-spacing: var(--tracking-wide); text-transform: uppercase;
font-weight: var(--w-bold); color: var(--q-highlight-3-text);
padding: 2px 8px; border-radius: 999px; background: rgba(21, 165, 181, 0.10);
}
.status-auto-preview {
display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
padding: 9px 15px; border: 1px solid var(--divider); border-radius: var(--radius-md);
background: var(--surface-soft);
}
.status-auto-label { font-weight: var(--w-bold); color: var(--q-dark); font-size: 0.84375rem; }
.status-auto-tag {
font-size: 0.65625rem; letter-spacing: var(--tracking-wide); text-transform: uppercase;
color: var(--q-highlight-3-text); font-weight: var(--w-bold);
padding: 2px 8px; border-radius: 999px; background: rgba(21, 165, 181, 0.10);
}
.status-manual-hint { display: inline-flex; align-items: center; gap: 6px; }
/* Assign-Section (Grundlagen / Risiken multi-select) */
.assign-sec { display: flex; flex-direction: column; gap: 6px; }
.assign-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.assign-sec-label { font-size: 0.6875rem; letter-spacing: var(--tracking-xwide); text-transform: uppercase; font-weight: var(--w-bold); color: var(--q-dark); }
.assign-list { max-height: 168px; overflow-y: auto; border: 2px solid var(--divider); border-radius: 10px; padding: 4px; }
.assign-item {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px; border-radius: 8px; cursor: pointer;
font-size: 0.8125rem; color: var(--q-dark);
transition: background var(--dur-fast);
}
.assign-item:hover { background: var(--surface-soft); }
.assign-item input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--q-highlight-2); flex-shrink: 0; }
.assign-item-title { flex: 1; font-weight: 500; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.assign-item-sub { font-size: 0.71875rem; color: var(--q-medium); flex-shrink: 0; }
.assign-empty { padding: 16px; text-align: center; font-size: 0.8125rem; color: var(--q-medium); }
.assign-row { display: flex; gap: 8px; align-items: flex-start; }
.assign-row .cbx { flex: 1; min-width: 0; }
.assign-new { flex-shrink: 0; }
.assign-count { font-weight: 300; text-transform: none; letter-spacing: 0; color: var(--q-medium); }
@media (max-width: 560px) {
.modal-body { padding: 18px 18px 22px; }
.modal-head, .modal-foot { padding-left: 18px; padding-right: 18px; }
.form-grid-2 { grid-template-columns: 1fr; }
/* Drei Knöpfe im Fuß (Abbrechen, eine zweite Handlung, Speichern) brauchen
auf dem Telefon mehr als eine Zeile: „Grundlagen zuordnen" ragte mit
404 px Knopfreihe auf 310 px Platz bis 442 px hinaus (T-280, gemessen).
`min-width: 0` lässt die Reihe schrumpfen, `wrap` umbrechen; die
Hauptaktion bleibt rechts. */
.modal-foot-main { flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
/* Lange Wörter im Titel: „Berichtserstellung" ist bei 24 px 228 px breit
und stand bei 320 px so in der Zeile, dass das Schließen-Kreuz 16 px aus
dem Dialog ragte (T-280, gemessen). Der Titelblock darf schrumpfen, das
Wort trennen — mit Silbentrennung, wo der Browser sie kann (lang="de-AT"),
sonst an beliebiger Stelle. Der Großdialog kürzt seinen einzeiligen Titel
weiter mit „…" (grossdialog.css). */
.modal-head > div:first-child { min-width: 0; }
.modal-head h2 { overflow-wrap: anywhere; hyphens: auto; }
}
/* Sehr schmal (320 px): Silbentrennung gibt es nicht überall — im
Prüfbrowser brach „Berichtserstellung" ohne Bindestrich als
„Berichtserstell / ung". 20 statt 24 px lassen das längste Titelwort des
Bestands (gemessen 190 px) in die 194 px des Titelblocks passen; das
Umbrechen oben bleibt die letzte Sicherung. */
@media (max-width: 360px) {
.modal-head h2 { font-size: 1.25rem; }
}
/* ── Combobox (searchable select, single + multi) ────────────────────────── */
.cbx { position: relative; width: 100%; }
.cbx.disabled { opacity: 0.5; pointer-events: none; }
.cbx-trigger {
width: 100%; display: flex; align-items: center; gap: 10px;
padding: 11px 13px;
border: 2px solid var(--q-linie); border-radius: 0; /* brand: sharp inputs */
background: #fff; cursor: pointer; text-align: left;
font-size: 0.875rem; font-family: var(--font-sans); font-weight: var(--w-light); color: var(--q-dark);
transition: border-color var(--dur-fast);
}
.cbx-trigger:hover { border-color: var(--q-dark); }
/* Das Bild des geoeffneten **und** des fokussierten Zustands steht seit T-216
bei der Sammelregel der Felder (Abschnitt „Fokusbild der Texteingaben") --
dort, wo alle anderen Felder ihres auch bekommen. Hier stand bis dahin ein
fest verdrahtetes `border-color: var(--q-highlight-1)` ohne Ring. */
.cbx-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbx-val.ph { color: var(--q-medium); }
.cbx-caret {
width: 9px; height: 9px; flex-shrink: 0;
border-right: 2px solid var(--q-dark);
border-bottom: 2px solid var(--q-dark);
transform: translateY(-2px) rotate(45deg);
transition: transform var(--dur-fast) var(--ease-std);
}
.cbx-trigger.open .cbx-caret { transform: translateY(2px) rotate(-135deg); }
.cbx-pop {
position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 600;
background: #fff; border: 1px solid var(--divider); border-radius: 12px;
box-shadow: 0 14px 40px rgba(16,49,78,0.18); overflow: hidden;
min-width: 220px;
animation: cbx-in var(--dur-fast) var(--ease-out) both;
}
@keyframes cbx-in { from { transform: translateY(-6px); } to { transform: none; } }
.cbx-search {
display: flex; align-items: center; gap: 9px;
padding: 10px 13px; border-bottom: 1px solid var(--divider);
background: var(--surface-soft);
}
.cbx-search-ic {
width: 14px; height: 14px; flex-shrink: 0; opacity: 0.45;
background: url('../assets/icons/search.svg') center/contain no-repeat;
}
.cbx-search-input {
flex: 1; border: none; outline: none; font-size: 0.84375rem;
font-family: var(--font-sans); font-weight: var(--w-light); color: var(--q-dark); background: transparent;
}
.cbx-search-input::placeholder { color: var(--q-medium); }
.cbx-list { max-height: 240px; overflow-y: auto; padding: 6px; }
.cbx-opt {
width: 100%; display: flex; align-items: center; gap: 10px;
padding: 9px 11px; border: none; border-radius: 8px; background: transparent;
cursor: pointer; text-align: left; font-size: 0.84375rem; color: var(--q-dark);
transition: background var(--dur-fast);
}
.cbx-opt:hover, .cbx-opt.hi { background: var(--surface-soft); }
.cbx-opt.sel { font-weight: var(--w-bold); }
.cbx-check {
width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--q-linie);
background: #fff; flex-shrink: 0; display: grid; place-items: center;
transition: background var(--dur-fast), border-color var(--dur-fast);
}
.cbx-check.on { background: var(--q-highlight-2); border-color: var(--q-highlight-2); }
.cbx-check.on::after { content: ''; width: 9px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px,-1px); display: block; }
.cbx-opt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cbx-opt-label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbx-opt-sub { display: block; font-size: 0.71875rem; color: var(--q-medium); font-weight: var(--w-light); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbx-sel-mark { font-size: 0.8125rem; color: var(--q-highlight-2); flex-shrink: 0; }
.cbx-empty { padding: 18px 12px; text-align: center; font-size: 0.8125rem; color: var(--q-medium); }
/* Pick-chips (selected items below combobox) */
.pick-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.pick-chip {
display: inline-flex; align-items: center; gap: 7px;
padding: 6px 8px 6px 12px; border-radius: 999px;
background: var(--surface-soft); border: 1px solid var(--divider);
font-size: 0.78125rem; font-weight: 500; color: var(--q-dark);
}
.pick-chip .lvl-dot { width: 8px; height: 8px; }
.pick-chip-x {
width: 18px; height: 18px; border-radius: 50%;
border: none; background: none; padding: 0; cursor: pointer;
line-height: 1; font-size: 0.875rem; color: var(--q-dark);
display: grid; place-items: center;
transition: background var(--dur-fast) var(--ease-std);
}
.pick-chip-x:hover { background: #E2E2E2; }
.pick-chip-lock {
margin-left: 2px; font-size: 0.5625rem; letter-spacing: 0.05em; text-transform: uppercase;
font-weight: var(--w-bold); color: var(--q-medium);
border: 1px solid var(--q-bright); border-radius: 5px; padding: 2px 5px;
}
.set-checkrow { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; background: var(--surface-soft); border-radius: var(--radius-sm); cursor: pointer; margin-top: 2px; }
.set-checkrow input[type=checkbox] { flex-shrink: 0; margin-top: 2px; width: 15px; height: 15px; accent-color: var(--q-highlight-2); cursor: pointer; }
.set-checkrow > span { display: flex; flex-direction: column; gap: 2px; }
.set-checkrow-title { font-size: 0.84375rem; font-weight: var(--w-bold); color: var(--q-dark); }
.set-checkrow-sub { font-size: 0.75rem; color: var(--q-medium); }
.art-dot {
width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
background: var(--q-highlight-2);
}
.art-dot.indirekt { background: var(--q-highlight-3); }
.lvl-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
/* ── Confirm dialog ───────────────────────────────────────────────────────── */
.confirm-bg {
position: fixed; inset: 0;
z-index: 120;
background: rgba(16, 49, 78, 0.35);
backdrop-filter: blur(4px);
display: flex; align-items: center; justify-content: center;
padding: 20px;
}
/* Kopfbereich: weiß, Signal-Kreis links, Text rechts */
.confirm-dialog {
display: flex; align-items: flex-start; gap: 18px;
padding: 28px 30px 26px;
background: var(--surface);
text-align: left;
}
.confirm-icon {
width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
display: grid; place-items: center;
font-family: var(--font-display); font-weight: var(--w-bold);
font-size: 1rem; letter-spacing: 0.02em;
}
/* Getönter Kreis mit farbigem Symbol (Referenzdesign) */
.confirm-icon.danger { background: var(--status-crit-soft); color: var(--danger-text); }
.confirm-icon.default { background: #E4EBF1; color: var(--q-highlight-2); }
/* Benutzer-Variante: gefüllter Kreis mit Initialen */
.confirm-icon.avatar { background: var(--q-highlight-2); color: #fff; }
.confirm-icon svg { display: block; }
.confirm-icon .ic { width: 22px; height: 22px; background-position: center; background-repeat: no-repeat; background-size: contain; }
.confirm-head-text { min-width: 0; padding-top: 1px; }
.confirm-title {
font-family: var(--font-display); font-weight: var(--w-bold);
font-size: 1.3125rem; color: var(--q-highlight-2); margin: 0 0 8px;
letter-spacing: -0.01em;
}
.confirm-message { font-size: 0.875rem; color: var(--q-dark); line-height: 1.55; margin: 0; }
.confirm-message strong { font-weight: var(--w-bold); color: var(--q-highlight-2); }
.confirm-detail {
margin: 14px 0 0;
background: var(--surface-soft); border-radius: var(--radius-md);
padding: 10px 13px; font-size: 0.78125rem; color: var(--q-dark); line-height: 1.45;
}
/* Fußzeile: grau abgesetzt, Aktionen rechtsbündig */
.confirm-actions {
display: flex; justify-content: flex-end; align-items: center; gap: 10px;
padding: 16px 24px;
background: var(--surface-soft);
border-top: 1px solid var(--divider);
}
.confirm-actions .btn { padding: 9px 20px; }
/* Telefon (T-282): Drei Knöpfe passen nicht in eine Zeile — gemessen stand
„Abbrechen" beim Abmelden links abgeschnitten. Gestapelt in voller Breite,
die Hauptaktion oben, wo der Daumen zuerst hinkommt. */
@media (max-width: 560px) {
.confirm-dialog { padding: 22px 20px 20px; gap: 14px; }
.confirm-actions { flex-direction: column-reverse; align-items: stretch; padding: 14px 16px; gap: 8px; }
.confirm-actions .btn { width: 100%; }
}
/* ── Berichte Auto-Config-Card ─────────────────────────────────────────── */
.auto-cfg-card {
background: #fff;
border: 1px solid var(--divider);
border-radius: 16px;
padding: 18px 22px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 20px;
}
.auto-cfg-left { display: flex; align-items: center; gap: 14px; }
.auto-cfg-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.auto-cfg-title { font-size: 0.875rem; font-weight: var(--w-bold); color: var(--q-dark); display: flex; align-items: center; gap: 8px; }
.auto-cfg-meta { font-size: 0.78125rem; color: var(--q-medium); margin-top: 3px; }
.auto-cfg-next { font-size: 0.75rem; color: var(--q-medium); margin-top: 2px; }
.auto-cfg-badge {
display: inline-block; font-size: 0.65625rem; font-weight: var(--w-bold);
letter-spacing: 0.06em; text-transform: uppercase;
padding: 2px 8px; border-radius: 999px;
background: var(--surface-soft); color: var(--q-medium);
}
.auto-cfg-badge.active { background: #EEF5DC; color: var(--success-text); }
/* Toggle-Schalter */
.auto-cfg-toggle {
width: 42px; height: 24px; border-radius: 999px;
background: var(--divider); border: 0; cursor: pointer; position: relative;
transition: background var(--dur-fast) var(--ease-std); flex-shrink: 0;
}
.auto-cfg-toggle.active { background: var(--success); }
.auto-cfg-toggle-dot {
position: absolute; top: 3px; left: 3px;
width: 18px; height: 18px; border-radius: 50%; background: #fff;
transition: left var(--dur-fast) var(--ease-std);
box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.auto-cfg-toggle.active .auto-cfg-toggle-dot { left: 21px; }
/* ── Berichte — Design-konforme Auto-Card ──────────────────────────────── */
.auto-card {
background: #fff; border: 1px solid var(--divider); border-radius: 16px;
padding: 18px 22px; display: flex; align-items: center; gap: 16px; margin-bottom: 18px;
}
.auto-state {
width: 40px; height: 40px; border-radius: 12px; background: var(--surface-soft);
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
transition: background var(--dur-fast) var(--ease-std);
}
.auto-state.on { background: #EEF5DC; }
.auto-body { flex: 1; min-width: 0; }
.auto-title { font-size: 0.875rem; font-weight: var(--w-bold); color: var(--q-dark); display: flex; align-items: center; gap: 8px; }
.auto-sub { font-size: 0.78125rem; color: var(--q-medium); margin-top: 3px; }
.auto-badge {
display: inline-block; font-size: 0.65625rem; font-weight: var(--w-bold);
letter-spacing: 0.06em; text-transform: uppercase;
padding: 2px 8px; border-radius: 999px; background: var(--surface-soft); color: var(--q-medium);
}
.auto-badge.on { background: #EEF5DC; color: var(--success-text); }
.auto-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
@media (max-width: 640px) { .auto-card { flex-wrap: wrap; } .auto-actions { width: 100%; justify-content: flex-end; } }
/* ── Agenda-Chips (Besprechung-Dialog) ─────────────────────────────────── */
.agenda-chips { list-style: none; margin: 10px 0 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.agenda-chip { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--surface-soft); border-radius: 10px; font-size: 0.84375rem; }
.agenda-chip-num {
width: 22px; height: 22px; border-radius: 50%; background: var(--q-highlight-2); color: #fff;
display: flex; align-items: center; justify-content: center; font-size: 0.6875rem; font-weight: var(--w-bold); flex-shrink: 0;
}
.agenda-chip-title { flex: 1; font-weight: 500; color: var(--q-dark); }
.agenda-chip-ctrl { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.agenda-chip-ctrl button {
width: 24px; height: 24px; border-radius: 6px; border: none; background: transparent;
display: flex; align-items: center; justify-content: center; cursor: pointer;
transition: background var(--dur-fast) var(--ease-std);
}
.agenda-chip-ctrl button:hover:not(:disabled) { background: var(--divider); }
.agenda-chip-ctrl button:disabled { opacity: 0.3; cursor: default; }
/* ── Form grid 3 columns ────────────────────────────────────────────────── */
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; } }
/* ── Report preview box (dialog info) ──────────────────────────────────── */
.report-preview-box {
display: flex; align-items: flex-start; gap: 12px;
background: var(--surface-soft); border-radius: 12px; padding: 14px 16px; margin-top: 4px;
}
/* ── Report KPI summary grid ────────────────────────────────────────────── */
.report-kpis {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
background: var(--surface-soft); padding: 16px 20px; border-radius: 12px; margin-bottom: 22px;
}
.report-kpi-label {
font-size: 0.65625rem; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--q-medium); font-weight: var(--w-bold); margin-bottom: 4px;
}
.report-kpi-val { font-family: var(--font-display); font-size: 1.375rem; font-weight: var(--w-bold); }
@media (max-width: 640px) { .report-kpis { grid-template-columns: repeat(2, 1fr); } }
/* ── Section chips (Bericht-Dialog) ─────────────────────────────────────── */
.section-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.section-chip {
display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 999px;
font-size: 0.78125rem; font-weight: 500; border: 1.5px solid var(--divider);
background: #fff; color: var(--q-medium); cursor: pointer;
transition: all var(--dur-fast) var(--ease-std);
}
.section-chip.active { background: var(--q-highlight-2); color: #fff; border-color: var(--q-highlight-2); }
.section-chip.optional { border-style: dashed; }
/* ── Report org logo ─────────────────────────────────────────────────────── */
.report-org-logo { width: 48px; height: 48px; object-fit: contain; opacity: 0.8; flex-shrink: 0; }
/* ── Reports view ──────────────────────────────────────────────────────── */
.report-card {
background: #fff;
border-radius: 18px;
padding: 28px 32px;
border: 1px solid #ECECEC;
box-shadow: 0 0 10px rgba(0,0,0,0.05);
font-family: var(--font-sans);
color: var(--q-dark);
}
.report-card h1 { font-family: var(--font-display); font-weight: var(--w-bold); font-size: 1.625rem; color: var(--q-highlight-2); letter-spacing: 0; margin: 0 0 4px 0; }
.report-card h2 { font-family: var(--font-display); font-weight: var(--w-bold); font-size: 1.0625rem; color: var(--q-dark); margin: 28px 0 12px 0; padding-bottom: 6px; border-bottom: 2px solid var(--q-highlight-2); display: inline-block; text-align: left; }
.report-card .report-meta { font-size: 0.78125rem; color: var(--q-medium); margin-bottom: 18px; }
.report-card p { line-height: 1.6; font-size: 0.875rem; }
.report-card ul { padding-left: 18px; margin: 6px 0 14px 0; list-style: disc; }
.report-card ul li { font-size: 0.84375rem; line-height: 1.6; padding: 2px 0; }
.report-card ul li::marker { color: var(--q-highlight-3-text); }
/* Zeitstrahl im Bericht — statisches Abbild ohne Steuerleiste. Am Bildschirm
bleiben die Kurzinfos beim Überfahren erhalten, im Druck entfallen sie und
das Diagramm wird nicht über eine Seitengrenze getrennt. */
.report-zs { margin: 2px 0 18px 0; }
.report-zs .zs-board { gap: 10px; }
.report-zs .zs-lane-label { width: 200px; }
.report-zs .zs-empty { padding: 18px; }
/* ── Schwerpunkt detail view (full page) ───────────────────────────────── */
.sp-detail-head {
background: #fff;
border-radius: 18px;
padding: 26px 28px;
border: 1px solid #ECECEC;
box-shadow: 0 0 10px rgba(0,0,0,0.05);
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 24px;
margin-bottom: 18px;
}
.sp-detail-head .left { min-width: 0; flex: 1 1 auto; }
.sp-detail-head .left h1 {
font-family: var(--font-display);
font-weight: var(--w-bold);
font-size: 2rem;
color: var(--q-highlight-2);
letter-spacing: -0.01em;
margin: 6px 0 4px 0;
}
.sp-detail-head .left .desc { font-size: 0.875rem; color: var(--q-dark); max-width: 60ch; line-height: 1.55; margin: 8px 0 0 0; }
.sp-detail-head .sp-stat {
background: var(--surface-soft);
border-radius: 14px;
padding: 16px 18px;
min-width: 200px;
}
.sp-detail-head .sp-stat .label {
font-size: 0.65625rem; letter-spacing: var(--tracking-xwide); text-transform: uppercase;
color: var(--q-medium); font-weight: var(--w-bold);
}
.sp-detail-head .sp-stat .val {
font-family: var(--font-display);
font-weight: var(--w-bold);
font-size: 1.25rem;
color: var(--q-dark);
display: flex; align-items: center; gap: 10px;
margin-top: 6px;
}
/* Die Leiste scrollt in sich, wenn die Reiter nicht passen (T-295). Ohne das
gaben ihre nicht umbrechenden Reiter der ganzen Detailseite ihre
Mindestbreite vor — gemessen bei 390 px: Vorhaben 1105 px, Thema 1056 px,
Kooperationsstruktur 401 px statt 375 px; bei 1440 px das Thema mit allen
Funktionen 1299 statt 1177 px, seit der Reiter „Kooperationsstrukturen“
(T-294) dazukam.
Die Linie unter der Leiste ist deshalb ein innerer Schatten statt eines
Rahmens: Ein Rollbehälter schneidet an seiner Polsterkante ab, und der
Reiter, der bisher mit `margin-bottom: -1px` auf dem Rahmen saß, verlöre
seinen untersten Bildpunkt. Ein innerer Schatten liegt unter dem Inhalt —
der Reiter steht auf der Linie wie zuvor, die Höhe bleibt gleich. */
.sp-tabs {
display: flex; gap: 6px;
margin-bottom: 14px;
box-shadow: inset 0 -1px 0 var(--divider);
overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
}
.sp-tab {
padding: 10px 16px;
font-size: 0.8125rem;
font-weight: var(--w-bold);
color: var(--q-medium);
border-bottom: 3px solid transparent;
flex-shrink: 0; white-space: nowrap;
transition: color var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std);
}
.sp-tab:hover { color: var(--q-dark); }
.sp-tab.active { color: var(--q-highlight-2); border-bottom-color: var(--q-highlight-1); }
/* ── Radar (alt dashboard layout) ─────────────────────────────────────── */
.radar-wrap {
position: relative; /* Haltepunkt fuer .radar-steuer (T-224) */
background: #fff;
border-radius: 18px;
padding: 24px;
border: 1px solid #ECECEC;
box-shadow: 0 0 10px rgba(0,0,0,0.05);
display: grid;
grid-template-columns: 1fr 320px;
gap: 24px;
align-items: stretch;
min-height: 560px;
}
.radar-svg { width: 100%; height: 100%; min-height: 540px; }
/* ── Der umlaufende Schweif (T-224, neu gefasst in T-227) ──────────────────
Gedreht wird **eine** Gruppe: Schweif und Vorderkante (seit T-273 ein Keil,
bis dahin ein Fuehrungsstrahl). Die Ringe standen
bis T-227 mit in der Drehung; beanstandet wurde, dass die Darstellung zu
wenig nach Radar aussieht, und ausdruecklich erlaubt, die Ringe
stehenzulassen. Ein Schweif traegt die Bewegung allein, und ruhende Ringe
sind ruhiger zu lesen.
Die Knoten drehen nicht mit. Begruendung im Kopf von renderDashboardRadar():
Beschriftungen, die mitwandern, stuenden nach einer halben Umdrehung
kopfueber, und ihre aus dem Winkel berechnete Ausrichtung waere falsch.
`transform-box: view-box` schaltet die Bezugsflaeche des Drehpunkts auf den
Bildraum des viewBox (0 0 640 580) um. Ohne diese Zeile bezoege sich
`transform-origin` auf den Umriss der Gruppe — und der umfasst nur den
Schweif, nicht die Scheibe. */
.radar-sweep {
transform-box: view-box;
transform-origin: 320px 290px;
/* Dauer aus `--radar-umlauf` (T-251), gesetzt von dashboard.js
(`RADAR_UMLAUF_S`). Das Aufleuchten der Knoten liest denselben Wert — nur
so treffen sich Strahl und Schein. Der Rückfall steht an der Nutzungsstelle. */
animation: radarDrehung var(--radar-umlauf, 20s) linear infinite;
}
@keyframes radarDrehung { to { transform: rotate(360deg); } }
/* Farbe an EINER Stelle: Die Keile tragen nur ihre Deckkraft als Attribut,
den Farbwert bekommen sie von hier. Sonst stuende der Wert
SCHWEIF_SEGMENTE-mal im Markup und waere bei einer Tokenaenderung
SCHWEIF_SEGMENTE-mal falsch.
**Grau statt Petrol (T-234).** Petrol war die auffaellige Wahl und als solche
beanstandet; gewuenscht ist ein dezenter heller Grauton. `--q-linie` ist der
Hausteil fuer „Flaechen, kein Text" und damit genau dafuer gedacht.
Die Farbe allein zu tauschen genuegt nicht: Der Schweif ist eine Flaeche mit
Deckung, und Grau traegt weniger weit als Petrol. Die Deckung wird deshalb
mitgefuehrt (siehe SCHWEIF_DECKUNG in dashboard.js fuer die Keile) — und
beide Werte sind am gerenderten Bild gewaehlt, nicht am Zahlenwert.
**Seit T-273 wieder Petrol — aber in der Form des Signets.** Das Radar
folgt der Formensprache des Anwendungssignets (Logoentwurf, helle Variante
2b): Schweif 50° mit deutlicher Vorderkante, beides in Petrol. Die
Beanstandung aus T-234 galt der Auffaelligkeit, nicht dem Farbton; die
Deckung bleibt deshalb niedrig (SCHWEIF_DECKUNG 0,16 an der Spitze, Kante
0,26) und ist am gerenderten Bild gewaehlt. Die Grau-Fassung (`--q-linie`,
0,38) stand von T-234 bis T-272. */
.radar-sweep-keile path { fill: var(--q-highlight-3); }
.radar-sweep-kante { fill: var(--q-highlight-3); fill-opacity: 0.26; }
/* ── Scheibe, Zonenringe und Kontur (T-273) ────────────────────────────────
Uebertragen aus dem Signet 2b „Lagebild · Weiss" (Signet r 40 ↔ Scheibe
r 240):
Scheibe im Signet gefuellt — hier nur getoent, damit die
Statusfarben der Knoten und die Navy-Titel darauf stehen
wie auf Weiss. Die Staerke laeuft ueber `--radar-toenung`
(1 = an, 0 = aus), damit die Toenung ohne Eingriff ins Markup
abzuschalten ist.
Zonenringe im Signet zwei durchgezogene Ringe in Petrol, 45 % — hier
die beiden inneren Zonengrenzen, bis T-272 gestrichelt und
hellgrau (#E7E7E7). Zarter als im Signet, weil sie Knoten und
Linien kreuzen.
Kontur der Lime-Ring des Signets; er ersetzt die aeussere
gestrichelte Zonengrenze und schliesst die Scheibe ab. „IM
PLAN" steht dafuer 2 px weiter aussen (dashboard.js).
Die Titel der Knoten kreuzen die Kontur; ihr weisser Rand (`.radar-titel`)
haelt sie davor lesbar. */
.radar-scheibe { fill: var(--q-highlight-3); fill-opacity: calc(0.045 * var(--radar-toenung, 1)); }
.radar-ring { fill: none; stroke: var(--q-highlight-3); stroke-opacity: 0.3; stroke-width: 1.5; }
.radar-kontur { fill: none; stroke: var(--q-highlight-1); stroke-width: 3; }
/* Weisser Rand um die Schrift, AUSSEN angelegt (`paint-order: stroke`), damit
die Buchstaben selbst nicht duenner werden. */
.radar-titel { paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
/* EIN Weg in die Ruhe, ueber `animation-play-state`: Es haelt an Ort und
Stelle an, waehrend `animation: none` auf den Anfang zuruecksetzte und beim
Fortsetzen einen Sprung ergaebe. Gesetzt wird `.radar-still` vom Schalter —
er traegt Maus, Tastatur und Tasteingabe gleichermassen (WCAG 2.2.2).
**Kein `:hover` mehr (T-262).** Bis dahin hielt die Scheibe auch beim
Darueberfahren an. Beanstandet vom Auftraggeber: Die Karte traegt
anklickbare Knoten, die Maus liegt dort staendig — die Drehung blieb bei
jeder Bewegung stehen und lief wieder an. Was als Bequemlichkeit gedacht
war, las sich als Stocken. Fuer WCAG 2.2.2 faellt nichts weg: `:hover` war
nie eine Erfuellung, weil es auf Tastfeld und Tastatur nicht gibt. */
.radar-wrap.radar-still :is(.radar-sweep, .radar-treffer-schein, .radar-treffer-ring) { animation-play-state: paused; }
/* Systemvorgabe schlaegt beides. Der Schalter wird dann gar nicht erst
gezeichnet (radarBewegungAus()); diese Regel ist der Gurt dazu, falls sich
die Vorgabe nach dem Zeichnen aendert. */
@media (prefers-reduced-motion: reduce) {
.radar-sweep { animation: none; }
}
/* ── Aufleuchten beim Überstreichen (T-251) ────────────────────────────────
Kritische und beobachtungsbedürftige Knoten leuchten einmal je Umlauf auf,
im Augenblick des Treffers. Synchron ist das nicht durch einen Zeitgeber,
sondern durch Rechnung: dieselbe Dauer wie der Schweif, und als Versatz der
Zeitpunkt, zu dem der Strahl den Winkel des Knotens erreicht
(`radarTrefferAnteil()` in dashboard.js, als `--radar-anteil` an der
Gruppe — seit T-315 ein Anteil des Umlaufs statt Sekunden). Der Anfang der Keyframes **ist** der Treffer.
Zwei Teile: ein gefüllter Schein, der schnell aufgeht und über gut zwei
Sekunden nachglüht, und ein Ring, der sich ausbreitet — das Echo. Kritisch
leuchtet heller und weiter als Beobachten (`data-stufe`).
`transform-box: fill-box`, damit jeder Kreis um seinen **eigenen**
Mittelpunkt wächst — ohne diese Zeile bezöge sich `transform-origin` auf
den Bildraum, und die Kreise wanderten beim Wachsen zur Ecke (dieselbe Falle
wie beim Schweif, andersherum). `pointer-events: none`: Der Schein darf
den Klick auf den Knoten nicht abfangen. */
.radar-treffer { pointer-events: none; --radar-staerke: 0.42; --radar-weite: 2.3; }
.radar-treffer[data-stufe="kritisch"] { --radar-staerke: 0.6; --radar-weite: 3; }
.radar-treffer-schein,
.radar-treffer-ring {
transform-box: fill-box;
transform-origin: center;
opacity: 0;
animation-duration: var(--radar-umlauf, 20s);
animation-timing-function: linear;
animation-iteration-count: infinite;
/* Anteil eines Umlaufs (T-315) mal Umlaufzeit — trifft bei jeder Umlaufzeit. */
animation-delay: calc(var(--radar-anteil, 0) * var(--radar-umlauf, 20s));
}
.radar-treffer-schein { fill: var(--radar-farbe); animation-name: radarTrefferSchein; }
.radar-treffer-ring {
fill: none;
stroke: var(--radar-farbe);
stroke-width: 2;
vector-effect: non-scaling-stroke;
animation-name: radarTrefferRing;
}
/* Prozente eines Umlaufs von 20 s: 1 % = 0,2 s. Aufgehen in 0,2 s, Nachglühen
bis 2,4 s, danach aus bis zum nächsten Treffer. */
@keyframes radarTrefferSchein {
0% { opacity: 0; transform: scale(0.7); }
1% { opacity: var(--radar-staerke); transform: scale(1.15); }
12% { opacity: 0; transform: scale(1.6); }
100% { opacity: 0; transform: scale(1.6); }
}
@keyframes radarTrefferRing {
0% { opacity: 0.85; transform: scale(1); }
10% { opacity: 0; transform: scale(var(--radar-weite)); }
100% { opacity: 0; transform: scale(var(--radar-weite)); }
}
/* Ohne Bewegung bleibt die Hervorhebung, nur ruhend: ein stehender Schein.
Ein Aufleuchten, das mit der Bewegung ganz entfiele, nähme den kritischen
Knoten ihre Betonung gerade dort, wo jemand um Ruhe gebeten hat. */
@media (prefers-reduced-motion: reduce) {
.radar-treffer-schein, .radar-treffer-ring { animation: none; }
.radar-treffer-schein { opacity: calc(var(--radar-staerke) * 0.5); transform: scale(1.35); }
}
.radar-steuer {
position: absolute;
top: 16px;
left: 16px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 28px;
padding: 5px 11px;
border: 1px solid #ECECEC;
border-radius: 999px;
background: #fff;
color: var(--q-medium);
font-size: 0.6875rem;
font-weight: var(--w-bold);
letter-spacing: 0.02em;
cursor: pointer;
transition: background var(--dur-fast) var(--ease-std),
color var(--dur-fast) var(--ease-std);
}
.radar-steuer:hover { background: var(--surface-soft); color: var(--q-dark); }
/* Ausserhalb eines Dialogs traegt jede Bauform ihr Fokusbild selbst — eine
Sammelregel wie `.modal :focus-visible` gibt es hier nicht. Uebernommen ist
deshalb das der naechstverwandten Bauform: `.kpi-switch-reset`, derselbe
kleine Pillenknopf aus Sinnbild und Wort, zwei Karten weiter oben. */
.radar-steuer:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
border-radius: var(--radius-pill);
}
.radar-side .radar-list-item {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px;
border-radius: 8px;
font-size: 0.8125rem;
cursor: pointer;
transition: background var(--dur-fast) var(--ease-std);
}
.radar-side .radar-list-item:hover { background: var(--surface-soft); }
.radar-side .radar-list-item .sp-title { font-weight: var(--w-bold); color: var(--q-dark); font-size: 0.8125rem; }
.radar-side .radar-list-item .sp-sub { font-size: 0.71875rem; color: var(--q-medium); }
/* ── Risk Matrix ───────────────────────────────────────────────────────── */
.rmx {
display: grid;
grid-template-columns: 28px 72px 1fr;
grid-template-rows: 1fr 24px 22px auto;
gap: 6px;
align-items: stretch;
}
.rmx-yt {
grid-column: 1; grid-row: 1;
writing-mode: vertical-rl;
transform: rotate(180deg);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display);
font-weight: var(--w-bold);
font-size: 0.6875rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--q-highlight-2);
}
.rmx-yticks {
grid-column: 2; grid-row: 1;
display: grid;
grid-template-rows: repeat(3, minmax(0, 1fr));
align-items: center;
justify-items: end;
padding-right: 14px;
border-right: 1px solid var(--divider);
}
.rmx-xticks {
grid-column: 3; grid-row: 2;
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: start;
justify-items: center;
padding-top: 8px;
border-top: 1px solid var(--divider);
}
.rmx-tick {
font-size: 0.625rem;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: var(--w-bold);
color: var(--q-medium);
}
.rmx-xt-row {
grid-column: 1 / -1;
grid-row: 3;
display: grid;
grid-template-columns: 28px 72px 1fr;
gap: 6px;
}
.rmx-xt {
grid-column: 3;
text-align: center;
font-family: var(--font-display);
font-weight: var(--w-bold);
font-size: 0.6875rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--q-highlight-2);
padding-top: 4px;
}
.rmx-plot {
grid-column: 3; grid-row: 1;
position: relative;
border-radius: 16px;
overflow: hidden;
min-height: 320px;
box-shadow: 0 0 0 1px var(--divider);
}
.rmx-zone {
position: absolute;
inset: 0;
width: 100%; height: 100%;
}
.rmx-cells {
position: relative;
display: grid;
/* minmax(0, 1fr) statt 1fr (T-124, Befund A11Y-032): `1fr` ist kurz fuer
`minmax(auto, 1fr)`, und `auto` laesst die Spalte am laengsten Chiptitel
wachsen. Bei 390 px reichte das Raster dadurch 129 px ueber seinen eigenen
Rahmen hinaus -- der Ueberlauf entstand *innerhalb* des Rasters, nicht am
Rahmen, weshalb ein Rollbereich allein ihn nicht eingefangen haette. */
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: repeat(3, minmax(0, 1fr));
gap: 1px;
height: 100%;
background: rgba(255, 255, 255, 0.4);
}
.rmx-cell {
padding: 10px;
display: flex;
flex-direction: column;
gap: 5px;
min-height: 100px;
position: relative;
}
.rmx-cell::before {
content: "";
position: absolute;
inset: 0;
background: transparent;
pointer-events: none;
transition: background 200ms;
}
.rmx-cell:hover::before {
background: rgba(255, 255, 255, 0.3);
}
.rmx-cell.active::before {
background: rgba(0, 0, 0, 0.08);
box-shadow: inset 0 0 0 2px rgba(0,0,0,0.18);
}
.rmx-empty {
margin: auto;
width: 4px; height: 4px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.08);
}
.rmx-chip {
display: flex;
align-items: flex-start;
gap: 7px;
padding: 7px 10px 7px 8px;
background: #fff;
border: 1px solid rgba(16, 49, 78, 0.08);
border-radius: 10px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
font-size: 0.71875rem;
font-weight: var(--w-regular);
color: var(--q-dark);
text-align: left;
cursor: pointer;
line-height: 1.3;
position: relative;
z-index: 1;
transition: transform var(--dur-fast) var(--ease-std),
box-shadow var(--dur-fast) var(--ease-std),
border-color var(--dur-fast) var(--ease-std);
}
.rmx-chip:hover {
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.10);
border-color: var(--q-highlight-2);
}
.rmx-chip.escalate {
background: var(--q-highlight-2);
color: #fff;
border-color: var(--q-highlight-2);
}
.rmx-chip.escalate:hover {
border-color: #C04848;
}
.rmx-chip-title {
flex: 1;
min-width: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-weight: var(--w-bold);
}
.rmx-chip-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--q-linie);
margin-top: 5px;
flex-shrink: 0;
}
.rmx-chip.escalate .rmx-chip-dot {
background: #C04848;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}
.rmx-legend {
grid-column: 1 / -1;
grid-row: 4;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
padding-top: 14px;
margin-top: 4px;
border-top: 1px dashed var(--divider);
font-size: 0.71875rem;
color: var(--q-dark);
}
.rmx-legend-item {
display: inline-flex;
align-items: center;
gap: 8px;
}
.rmx-legend-swatch {
width: 14px; height: 14px;
border-radius: 4px;
border: 1px solid rgba(0, 0, 0, 0.06);
}
.rmx-legend-sep {
width: 1px; height: 14px;
background: var(--divider);
}
.escalate-static {
width: 7px; height: 7px;
border-radius: 50%;
background: #C04848;
display: inline-block;
}
/* ── Eskalations-Karten (Risiken-Seite) ──────────────────────────────── */
.esc-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 12px;
}
.esc-card {
background: #fff;
border: 1px solid #ECECEC;
border-left: 3px solid var(--danger);
border-radius: 12px;
padding: 14px 16px;
text-align: left;
cursor: pointer;
display: flex;
flex-direction: column;
gap: 6px;
transition: border-color var(--dur-fast) var(--ease-std),
box-shadow var(--dur-fast) var(--ease-std),
transform var(--dur-fast) var(--ease-std);
}
.esc-card:hover {
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
transform: translateY(-1px);
}
.esc-card-eyebrow {
font-size: 0.625rem;
letter-spacing: var(--tracking-xwide);
text-transform: uppercase;
font-weight: var(--w-bold);
color: var(--q-highlight-3-text);
}
.esc-card-title {
font-size: 0.84375rem;
font-weight: var(--w-bold);
color: var(--q-dark);
line-height: 1.3;
}
.esc-card-mit {
font-size: 0.71875rem;
color: var(--q-medium);
line-height: 1.4;
font-weight: var(--w-regular);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.esc-card-metrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-top: 4px;
padding-top: 10px;
border-top: 1px dashed var(--divider);
}
.esc-metric {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.esc-metric-label {
font-size: 0.59375rem;
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
font-weight: var(--w-bold);
color: var(--q-medium);
}
.esc-metric-val {
font-size: 0.71875rem;
font-weight: var(--w-bold);
text-transform: capitalize;
}
.tone-rot { color: var(--danger-text); }
.tone-gelb { color: var(--warning-text); }
.tone-gruen { color: var(--success-text); }
.row { display: flex; align-items: center; gap: 10px; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 10px; }
.muted { color: var(--q-medium); }
.bold { font-weight: var(--w-bold); }
.eyebrow {
font-size: 0.6875rem;
letter-spacing: var(--tracking-xwide);
text-transform: uppercase;
font-weight: var(--w-bold);
color: var(--q-highlight-2);
}
.divider-h { height: 1px; background: var(--divider); margin: 18px 0; }
.hidden { display: none !important; }
/* ── Grundlagen: Art badge ─────────────────────────────────────────── */
.art-badge {
display: inline-flex; align-items: center; gap: 7px;
padding: 5px 12px;
border-radius: 999px;
font-size: 0.75rem;
font-weight: var(--w-bold);
letter-spacing: 0.01em;
white-space: nowrap;
}
.art-badge .art-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.art-badge.art-sm { padding: 4px 10px; font-size: 0.6875rem; }
.art-badge.art-direkt { background: #DBE2EA; color: var(--q-highlight-2); }
.art-badge.art-direkt .art-dot { background: var(--q-highlight-2); }
.art-badge.art-indirekt { background: #D6EEF1; color: #0E7E8C; }
.art-badge.art-indirekt .art-dot { background: var(--q-highlight-3); }
.zuord-count {
display: inline-grid; place-items: center;
min-width: 26px; height: 26px; padding: 0 8px;
border-radius: 999px;
background: var(--surface-soft);
border: 1px solid var(--divider);
font-size: 0.8125rem; font-weight: var(--w-bold);
color: var(--q-dark);
}
/* Grundlage tile — left accent by Art */
.grundlage-tile { border-left: 4px solid var(--q-highlight-2); }
.grundlage-tile.art-indirekt { border-left-color: var(--q-highlight-3); }
.grundlage-tile .gt-cat {
font-size: 0.6875rem; letter-spacing: var(--tracking-xwide); text-transform: uppercase;
font-weight: var(--w-bold); color: var(--q-medium); margin-top: -2px;
}
/* ── Grundlagen chips (detail views) ───────────────────────────────── */
.grundlagen-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.grundlage-chip {
display: inline-flex; align-items: center; gap: 7px;
padding: 7px 13px;
border-radius: 999px;
border: 1px solid var(--divider);
background: #fff;
font-size: 0.8125rem;
font-weight: var(--w-medium);
color: var(--q-dark);
text-align: left;
transition: border-color var(--dur-fast) var(--ease-std), background var(--dur-fast) var(--ease-std);
}
.grundlage-chip .art-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.grundlage-chip.art-direkt { border-left: 3px solid var(--q-highlight-2); }
.grundlage-chip.art-direkt .art-dot { background: var(--q-highlight-2); }
.grundlage-chip.art-indirekt { border-left: 3px solid var(--q-highlight-3); }
.grundlage-chip.art-indirekt .art-dot { background: var(--q-highlight-3); }
.grundlage-chip:hover { border-color: var(--q-linie); background: var(--surface-soft); }
.grundlage-chip .gc-title { max-width: 30ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grundlage-chip.add { color: var(--q-highlight-3-text); border-style: dashed; font-weight: var(--w-bold); }
/* ── Art choice (dialog) ────────────────────────────────────────────── */
.art-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.art-choice-opt {
display: flex; flex-direction: column; gap: 5px;
padding: 14px 16px;
border: 2px solid var(--divider);
border-radius: 12px;
background: #fff;
text-align: left;
transition: border-color var(--dur-fast) var(--ease-std), background var(--dur-fast) var(--ease-std);
}
.art-choice-opt:hover { border-color: var(--q-linie); }
.art-choice-top { display: flex; align-items: center; gap: 8px; font-weight: var(--w-bold); font-size: 0.875rem; color: var(--q-dark); }
.art-choice-top .art-dot { width: 9px; height: 9px; border-radius: 50%; }
.art-choice-sub { font-size: 0.75rem; color: var(--q-medium); font-weight: var(--w-light); line-height: 1.4; }
.art-choice-opt.art-direkt .art-dot { background: var(--q-highlight-2); }
.art-choice-opt.art-indirekt .art-dot { background: var(--q-highlight-3); }
.art-choice-opt.art-direkt.active { border-color: var(--q-highlight-2); background: #EAF0F5; }
.art-choice-opt.art-indirekt.active { border-color: var(--q-highlight-3); background: #E4F3F5; }
/* ── Assignment picker ─────────────────────────────────────────────── */
.assign { border: 1px solid var(--divider); border-radius: 12px; overflow: hidden; }
.assign-search {
display: flex; align-items: center; gap: 9px;
padding: 11px 14px;
border-bottom: 1px solid var(--divider);
background: var(--surface-soft);
}
.assign-search input {
flex: 1; border: 0; outline: 0; background: transparent;
font-size: 0.84375rem; font-weight: var(--w-light); color: var(--q-dark); font-family: var(--font-sans);
}
.assign-search input::placeholder { color: var(--q-medium); }
.assign-groups { max-height: 280px; overflow-y: auto; padding: 0 14px 14px; }
.assign-group { padding-top: 0; }
.assign-group-h {
display: flex; align-items: center; gap: 8px;
font-size: 0.65625rem; letter-spacing: var(--tracking-xwide); text-transform: uppercase;
font-weight: var(--w-bold); color: var(--q-medium);
margin-bottom: 9px;
position: sticky; top: 0; z-index: 2; background: #fff; padding: 13px 0 8px;
}
.assign-group-count {
display: inline-grid; place-items: center;
min-width: 18px; height: 18px; padding: 0 5px;
border-radius: 999px; background: var(--q-highlight-2); color: #fff;
font-size: 0.65625rem; letter-spacing: 0;
}
.assign-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.assign-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 12px;
border-radius: 999px;
border: 1px solid var(--divider);
background: #fff;
font-size: 0.78125rem;
font-weight: var(--w-regular);
color: var(--q-dark);
transition: border-color var(--dur-fast) var(--ease-std), background var(--dur-fast) var(--ease-std);
}
.assign-chip:hover { border-color: var(--q-linie); }
.assign-chip.active { background: var(--q-highlight-2); border-color: var(--q-highlight-2); color: #fff; }
.assign-chip .ic { width: 11px; height: 11px; background-position: center; background-repeat: no-repeat; background-size: contain; }
/* Die Suche im Zuordnungsfeld verbirgt Chips, statt sie wegzulassen (T-275);
`hidden` allein wirkt neben dem eigenen `display` nicht (T-180). */
.assign-chip[hidden], .assign-group[hidden] { display: none; }
/* ── Assign picker modal (Grundlage / Risiko zuordnen) ──────────────── */
.picker-list { display: flex; flex-direction: column; gap: 2px; }
.picker-row {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid transparent;
transition: background var(--dur-fast) var(--ease-std);
}
.picker-row:hover { background: var(--surface-soft); }
.picker-row.assigned { background: var(--surface-soft); border-color: var(--divider); }
.picker-row-main { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
.picker-row-main.static { pointer-events: none; }
.picker-row-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.picker-row-title { font-size: 0.84375rem; font-weight: var(--w-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.picker-row-sub { font-size: 0.71875rem; color: var(--q-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.picker-toggle {
display: inline-flex; align-items: center; gap: 5px;
padding: 5px 11px;
border-radius: 999px;
border: 1px solid var(--divider);
background: #fff;
font-size: 0.75rem; font-weight: var(--w-medium);
color: var(--q-dark);
white-space: nowrap; flex-shrink: 0;
transition: background var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std);
}
.picker-toggle:hover { border-color: var(--q-highlight-2); color: var(--q-highlight-2); }
.picker-toggle.on { background: var(--q-highlight-2); border-color: var(--q-highlight-2); color: #fff; }
.picker-toggle.on:hover { background: var(--danger); border-color: var(--danger); }
.picker-toggle.locked { opacity: 0.55; cursor: default; pointer-events: none; }
.picker-empty { padding: 24px 0; text-align: center; color: var(--q-medium); font-size: 0.84375rem; }
/* ── Risk dialog: live score & escalation toggle ────────────────────── */
.risk-score {
display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
height: 100%; min-height: 44px;
padding: 10px 16px;
border-radius: 12px;
border: 1px solid var(--divider);
background: var(--surface-soft);
}
.risk-score-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.risk-score-val { font-weight: var(--w-bold); font-size: 0.9375rem; }
.risk-score-hint { font-size: 0.71875rem; color: var(--q-medium); font-weight: var(--w-light); margin-left: auto; }
.risk-score.tone-rot { border-color: #E7C4C4; }
.risk-score.tone-rot .risk-score-dot { background: #C04848; }
.risk-score.tone-rot .risk-score-val { color: var(--danger-text); }
.risk-score.tone-gelb { border-color: #EBDBB4; }
.risk-score.tone-gelb .risk-score-dot { background: #E2A93B; }
.risk-score.tone-gelb .risk-score-val { color: #B9831E; }
.risk-score.tone-gruen { border-color: #D2E3B6; }
.risk-score.tone-gruen .risk-score-dot { background: #6FA31C; }
.risk-score.tone-gruen .risk-score-val { color: #5A8516; }
.toggle-row {
display: flex; align-items: flex-start; gap: 13px;
padding: 13px 16px;
border: 2px solid var(--divider);
border-radius: 12px;
background: #fff;
text-align: left;
width: 100%;
cursor: pointer;
transition: border-color var(--dur-fast) var(--ease-std), background var(--dur-fast) var(--ease-std);
}
.toggle-row:hover { border-color: var(--q-linie); }
.toggle-row.on { border-color: var(--q-highlight-2); background: #EAF0F5; }
.toggle-switch {
width: 40px; height: 23px; border-radius: 999px;
background: var(--q-linie); flex-shrink: 0; margin-top: 1px;
position: relative; transition: background var(--dur-fast) var(--ease-std);
}
.toggle-row.on .toggle-switch { background: var(--q-highlight-2); }
.toggle-knob {
position: absolute; top: 2px; left: 2px;
width: 19px; height: 19px; border-radius: 50%; background: #fff;
transition: transform var(--dur-fast) var(--ease-std);
}
.toggle-row.on .toggle-knob { transform: translateX(17px); }
.toggle-text { display: flex; flex-direction: column; gap: 2px; font-size: 0.84375rem; }
.toggle-text strong { color: var(--q-dark); font-weight: var(--w-bold); }
.toggle-text .muted { font-size: 0.75rem; font-weight: var(--w-light); line-height: 1.4; }
/* Schlanke Schalterzeile (T-316) — Variante der `.toggle-row` aus dem
Referenzentwurf (`.lv-tg` im Einstellungsfach des Live-Lagebilds):
Beschriftung links, Schalter rechts, ohne Karte. Der Zustand liegt allein
am Schalter; die getönte Fläche der Karte entfällt. Markup, Rolle und
Bindung sind die der `.toggle-row` — nur die Reihenfolge kehrt das CSS um.
Eingesetzt in den Einstellungen des Live-Lagebilds (Bereich und Fach) und
des 3D-Lagebilds; die übrigen Schalterkarten bleiben. */
.toggle-row.toggle-row-schlank {
flex-direction: row-reverse; justify-content: space-between; align-items: flex-start;
gap: 18px; padding: 6px 0;
border: 0; border-radius: 6px; background: transparent;
/* Keine Breitengrenze mehr (T-317): Die 720 px aus T-316 ließen auf dem
Schreibtisch rechts bis zu 549 px leer. Die Zuordnung über die Breite
tragen jetzt die Zeilenlinien von `.set-fieldset-zeilen`. */
}
.toggle-row.toggle-row-schlank:hover,
.toggle-row.toggle-row-schlank.on { background: transparent; }
.toggle-row-schlank .toggle-switch { width: 42px; height: 24px; margin-top: 0; }
.toggle-row-schlank .toggle-knob { top: 3px; left: 3px; width: 18px; height: 18px; }
.toggle-row-schlank.on .toggle-knob { transform: translateX(18px); }
.toggle-row-schlank:hover .toggle-switch { background: var(--q-medium); }
.toggle-row-schlank.on:hover .toggle-switch { background: var(--q-highlight-2); }
.toggle-row-schlank .toggle-text { min-width: 0; padding-top: 2px; }
.toggle-row-schlank .toggle-text strong { color: var(--q-highlight-2); }
.toggle-row-schlank:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }
.toggle-row-schlank:disabled { cursor: not-allowed; opacity: 0.55; }
/* Einstellungsliste (T-317) — Layout-Variante von `.set-fieldset`: je Feld
Beschriftung und Hinweis links, das Bedienelement bündig am rechten Rand,
die Zeilen durch eine Linie getrennt. So füllt der Abschnitt die Breite,
und die Linie führt das Auge von der Beschriftung zum Bedienelement.
Eingesetzt in Einstellungen › Live-Lagebild und im Abschnitt 3D-Lagebild
(Allgemeines), zusammen mit `pill-seg` und `toggle-row-schlank` (T-316).
Gemessen wird die Breite des Abschnitts, nicht des Fensters
(Container-Abfrage): Unter 720 px stehen Beschriftung und Bedienelement
untereinander wie bisher — auf dem Telefon, bei schmalem Fenster und neben
der aufgeklappten Bereichsliste gleichermaßen. Die Zeilenform greift nur bei
Feldern mit Leiste oder Regler; Schalter sind von sich aus eine Zeile, und
Gruppen (Feld mit mehreren Schaltern, „Effekte") behalten ihre Überschrift. */
.set-fieldset-zeilen { container-type: inline-size; }
@container (min-width: 720px) {
/* `~` statt `+` für die Schalter einer Gruppe: Zwischen ihnen stehen die
verborgenen Felder der Werte (Effekte im 3D-Lagebild). */
.set-fieldset-zeilen > .form-field + .form-field,
.set-fieldset-zeilen > .form-field > .toggle-row-schlank ~ .toggle-row-schlank {
margin-top: 0; padding-top: 14px; border-top: 1px solid var(--divider);
}
.set-fieldset-zeilen > .form-field > .toggle-row-schlank ~ .toggle-row-schlank { border-radius: 0; }
.set-fieldset-zeilen > .form-field:has(> .pill-seg, > .live_lagebild_regler) {
display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, auto);
column-gap: 32px; row-gap: 4px; align-items: center;
}
.set-fieldset-zeilen > .form-field:has(> .pill-seg, > .live_lagebild_regler) > label {
grid-column: 1; align-self: end;
font-size: 0.84375rem; letter-spacing: 0; text-transform: none; color: var(--q-highlight-2);
}
/* Ohne sichtbaren Hinweis steht die Beschriftung mittig neben der Leiste. */
.set-fieldset-zeilen > .form-field:has(> .pill-seg, > .live_lagebild_regler):not(:has(> .form-hint:not([hidden]))) > label {
grid-row: 1 / span 2; align-self: center;
}
.set-fieldset-zeilen > .form-field > :is(.pill-seg, .live_lagebild_regler) {
grid-column: 2; grid-row: 1 / span 2; justify-self: end;
}
/* Eine Leiste, die neben der Beschriftung keinen Platz mehr findet, bricht
rechtsbündig um, statt die Beschriftung zu verdrängen. */
.set-fieldset-zeilen > .form-field > .pill-seg {
flex-wrap: wrap; justify-content: flex-end; max-width: 100%; border-radius: 22px;
}
.set-fieldset-zeilen > .form-field > .live_lagebild_regler { width: 320px; }
.set-fieldset-zeilen > .form-field > .form-hint { grid-column: 1; align-self: start; margin: 0; max-width: 70ch; }
.set-fieldset-zeilen .toggle-row-schlank .toggle-text .muted { max-width: 70ch; }
}
/* Funktionsumfang (Einstellungen) */
.set-features-bar {
display: flex; align-items: center; justify-content: space-between; gap: 14px;
padding: 12px 16px; border-radius: 16px;
background: var(--q-highlight-4); border: 1px solid var(--q-bright);
}
.set-features-count { font-size: 0.8125rem; color: var(--q-dark); font-weight: var(--w-regular); }
.set-features-actions { display: flex; gap: 8px; }
.set-features-reset {
background: none; border: 1px solid var(--q-linie); border-radius: 999px;
padding: 7px 16px; font-size: 0.78125rem; color: var(--q-highlight-2); cursor: pointer;
font-family: inherit; transition: border-color var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std);
}
.set-features-reset:hover:not(:disabled) { border-color: var(--q-highlight-2); }
.set-features-reset:disabled { opacity: 0.4; cursor: default; }
.feat-entities { display: flex; flex-direction: column; gap: 18px; }
.feat-entity {
border: 1px solid var(--q-bright); border-radius: 18px;
padding: 16px 18px; background: var(--q-white);
}
.feat-entity-head {
display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; flex-wrap: wrap;
padding-bottom: 10px; border-bottom: 1px dashed var(--divider);
}
.feat-entity-name { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--q-highlight-2); }
.feat-entity-sub { font-size: 0.78125rem; color: var(--q-medium); flex: 1; }
.feat-entity-badge {
font-size: 0.71875rem; font-weight: var(--w-bold); color: var(--q-highlight-3-text);
background: var(--q-highlight-4); border-radius: 999px; padding: 3px 10px;
}
.feat-toggles {
display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px;
}
/* ── Hamburger button (hidden on desktop) ──────────────────────────── */
#btnSidebar { display: none; }
/* ── Sidebar backdrop / nav-backdrop overlay ───────────────────────── */
.sidebar-backdrop,
.nav-backdrop {
display: none;
position: fixed;
inset: 0;
background: rgba(16, 49, 78, 0.4);
backdrop-filter: blur(2px);
z-index: 29;
}
.sidebar-backdrop.open,
.nav-backdrop.open { display: block; }
/* ── Bühne der Besprechung: zwei Karten werden zu einer Spalte ───────
Eigener Haltepunkt oberhalb der 1100 px der übrigen Raster: Die Notizkarte
trägt die Auszeichnungsleiste mit sechs Knöpfen und dem Vorschau-Umschalter,
die schon vor 1100 px umbricht. Gestapelt scrollt wieder die ganze Bühne —
zwei Karten mit eigenem Scrollbereich untereinander wären ein Fangeisen. */
@media (max-width: 1180px) {
.ms-work {
grid-template-columns: minmax(0, 1fr);
flex: none;
min-height: 0;
}
.ms-tabcard, .ms-notes { overflow: visible; }
.ms-panel { overflow: visible; }
.ms-notes .markfield { min-height: 0; }
.ms-notes .markfield textarea { min-height: 200px; }
}
/* ── Large desktop: scale KPI row ──────────────────────────────────── */
@media (max-width: 1100px) {
.kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dash-grid { grid-template-columns: minmax(0, 1fr); }
.radar-wrap { grid-template-columns: 1fr; }
}
/* ── Tablet (≤820px): sidebar collapses to off-canvas overlay ──────── */
@media (max-width: 820px) {
.app { display: block; }
.app-body { height: 100vh; height: 100dvh; }
#btnSidebar { display: grid; }
.nav-collapse-toggle { display: none; }
.sidebar {
position: fixed;
top: 0; left: 0; bottom: 0;
width: 286px;
z-index: 60;
transform: translateX(-100%);
transition: transform var(--dur-base) var(--ease-std);
box-shadow: 0 0 24px rgba(16, 49, 78, 0.28);
}
.sidebar.open { transform: translateX(0); }
#layoutToggle { left: 16px; }
}
/* ── Mobile (≤600px) ────────────────────────────────────────────────── */
@media (max-width: 600px) {
.main { padding: 16px 14px 80px 14px; }
.page-head { margin-bottom: 14px; flex-wrap: wrap; gap: 10px; }
/* Telefon wie vor T-310: Ein kurzer Titel („Themen") behält seinen Knopf
daneben; umgebrochen wird nur, was nicht passt (T-284). */
.page-head > :not(.actions) { flex: 0 1 auto; }
.page-head h1 { font-size: 1.5rem; }
.page-head .actions { flex-wrap: wrap; }
/* Die umgebrochene Aktionsreihe (T-284) füllt ihre Zeile seit T-315 in
jeder Breite — die Regeln stehen deshalb bei `.page-head .actions`. */
.kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kpi { padding: 12px 14px; gap: 10px; }
.kpi .kpi-num { font-size: 1.75rem; }
/* Die Varianten setzen ihre Größen mit höherer Spezifität als die Zeile
darüber — sie müssen hier eigens verkleinert werden, sonst bleiben sie
auf dem Desktop-Wert stehen (T-106). */
.kpi.kpi-gauge .kpi-num,
.kpi.kpi-bar .kpi-num { font-size: 1.625rem; }
.kpi.kpi-ring .kpi-num { font-size: 1.5rem; }
.kpi.kpi-gauge, .kpi.kpi-ring { padding: 14px 10px 12px; }
.kpi-gauge-svg { width: 108px; height: 70px; }
.kpi-ring-wrap, .kpi-ring-svg { width: 84px; height: 84px; }
.sp-grid { grid-template-columns: 1fr; }
.topbar .search { width: 130px; }
.topbar .search input { font-size: 0.78125rem; }
/* Der Brotkrumenpfad stand hier auf 14 px und `max-width: 130px`. Beides
ist mit T-247 entfallen: Er hat seit dieser Aufgabe eine eigene Zeile in
voller Breite (820er-Block am Ende dieser Datei), und ein Deckel von
130 px haette ihn dort mitten im ersten Wort abgeschnitten. Entfernt und
nicht ueberschrieben — zwei Regeln, von denen die eine die andere
zuruecknimmt, sind schwerer zu lesen als eine. */
.meeting-wrap {
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
}
.meeting-agenda {
border-right: 0;
border-bottom: 1px solid var(--divider);
max-height: 38vh;
}
.meeting-stage { padding: 18px 14px; }
.detail-panel {
top: 0; right: 0; bottom: 0; left: 0;
width: 100%;
border-radius: 0;
max-width: 100%;
}
.ai-drawer { width: 100%; left: 0; }
/* Kopf und KI-Kennzeichnung bleiben stehen (T-282). Auf dem Telefon ist
die fixierte Fläche so hoch wie der Layout-Viewport; den sichtbaren
Ausschnitt verkleinern dort Adressleiste und Tastatur, und der Browser
schob dann die **ganze** Schublade samt Kopf — gemeldet: „Die Titelzeile
scrollt mit". Höhe und Lage kommen deshalb aus `visualViewport`
(`--ai-hoehe`, `--ai-oben`, gesetzt in app.js, solange die Schublade
offen ist), und das Rollen des Verlaufs wird an seinem Ende nicht an die
Seite weitergereicht. */
.ai-drawer { top: var(--ai-oben, 0px); bottom: auto; height: 100%; height: var(--ai-hoehe, 100dvh); overscroll-behavior: contain; }
.ai-drawer .ai-head, .ai-drawer #aiKiBar { flex-shrink: 0; }
.ai-body { overscroll-behavior: contain; }
/* Responsive table: hide headers, stack cells */
.tbl thead { display: none; }
.tbl tbody tr {
display: block;
border-radius: 10px;
border: 1px solid var(--divider);
margin-bottom: 8px;
padding: 6px 0;
}
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody td {
display: flex;
gap: 8px;
padding: 5px 14px;
border-bottom: 0;
}
.tbl tbody td::before {
content: attr(data-label);
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--q-medium);
min-width: 80px;
flex-shrink: 0;
padding-top: 2px;
}
.sp-detail-head { flex-direction: column; }
/* Untereinander nimmt die linke Spalte die volle Breite an (T-295). Mit
`align-items: flex-start` des Kopfes bemass sie sich an ihrem breitesten
unteilbaren Inhalt — der Zeile „Beteiligte aus den Inhalten" — und zog die
Seite mit: gemessen bei 390 px Thema RIS 1056 px, Vorhaben 458 px. So
scrollt die Zeile in sich, wie es ihr `overflow-x: auto` vorsieht. */
.sp-detail-head .left { align-self: stretch; }
/* Die Kopfzeile über dem Detailkopf (Zurück, Bericht, Bearbeiten …) bricht
um, statt die Seite zu verbreitern (T-295, gemessen: Vorhaben +11 px).
Nur genau diese Zeile: `.row.between` ist ein allgemeiner Baustein, und
anderswo soll ein langer Titel gekürzt werden statt umzubrechen. */
.row.between:has(+ .sp-detail-head),
.row.between:has(+ .sp-detail-head) > .row { flex-wrap: wrap; row-gap: 8px; }
.sp-detail-head .sp-stat { min-width: unset; }
.radar-wrap { grid-template-columns: 1fr; }
.dash-grid { grid-template-columns: minmax(0, 1fr); }
}
/* ── Print / PDF Export (T-021) ─────────────────────────────────────── */
@media print {
/* Hide navigation and interactive chrome */
.sidebar,
.topbar,
.ai-drawer,
.detail-modal-bg,
.detail-panel,
.toast-container,
#layoutToggle,
.sidebar-backdrop,
.filter-bar,
.sp-tabs,
.btn-hamburger,
#btnSidebar,
#btnNotif,
#btnAiDrawer,
#btnFullscreen,
#btnStartMeeting { display: none !important; }
/* Hide action buttons in page headers but keep report content */
.page-head .actions { display: none !important; }
.no-print { display: none !important; }
body {
background: #fff;
overflow: auto;
font-size: 11pt;
color: #000;
}
.app {
display: block;
height: auto;
}
.main {
padding: 0;
overflow: visible;
grid-area: unset;
}
/* Cards: no shadow, simple border */
.card, .report-card {
box-shadow: none;
border: 1px solid #ccc;
border-radius: 8px;
break-inside: avoid;
margin-bottom: 16px;
}
.kpi-row { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.kpi { padding: 10px 12px; border: 1px solid #ccc; }
.kpi .kpi-num { font-size: 24pt; }
/* Auf Papier zählt die Zahl, nicht die Grafik — und ein Umschalter, den
niemand drücken kann, gehört nicht aufs Blatt (T-106). */
.kpi.kpi-gauge .kpi-num,
.kpi.kpi-bar .kpi-num,
.kpi.kpi-ring .kpi-num { font-size: 24pt; }
.kpi-switch { display: none; }
.dash-grid { grid-template-columns: minmax(0, 1fr); }
/* Report-specific */
.report-card h1 { font-size: 16pt; color: #10314E; }
.report-card h2 { font-size: 12pt; color: #10314E; }
.report-card p, .report-card li { font-size: 10pt; line-height: 1.5; }
/* Zeitstrahl im Bericht: Kurzinfos entfallen, das Diagramm bleibt zusammen */
.report-zs .zs-tip { display: none !important; }
.report-zs { break-inside: avoid; page-break-inside: avoid; }
/* Tables */
.tbl { font-size: 10pt; }
.tbl thead th, .tbl tbody td { padding: 6px 8px; }
table { break-inside: auto; }
tr { break-inside: avoid; }
a { color: inherit; text-decoration: none; }
/* Modal in print: make it flow normally so protocol content renders */
#mcModalBg {
position: static !important;
background: none !important;
backdrop-filter: none !important;
display: block !important;
z-index: auto !important;
}
#mcModal {
max-height: none !important;
box-shadow: none !important;
width: 100% !important;
max-width: 100% !important;
overflow: visible !important;
border-radius: 0 !important;
border: none !important;
}
/* Hide modal chrome, show only body */
#mcModalBg > div > div:first-child,
#mcModalBg > div > div:last-child { display: none !important; }
#mcModalBody { padding: 0 !important; overflow: visible !important; }
@page {
size: A4 portrait;
margin: 2cm 2.5cm;
}
}
/* ── ZusatzFelder: Rollen- und Kennzahlen-Komponenten ───────────────────────── */
/* Lese-Ansicht: Rollen — horizontal scrollende Kacheln (kein Umbruch) */
.zf-roles-view {
display: flex; flex-wrap: nowrap; gap: 10px;
overflow-x: auto; padding-bottom: 4px;
}
.zf-role-tile {
flex: 0 0 auto; min-width: 210px;
background: var(--surface-soft); border-radius: 14px; padding: 12px 15px;
}
.zf-role-tile.is-owner {
background: color-mix(in srgb, var(--q-highlight-1) 16%, var(--surface-soft));
box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--q-highlight-1) 55%, transparent);
}
.zf-role-tile.is-owner .zf-role-type { color: var(--q-highlight-2); }
.zf-role-type {
font-size: 0.65625rem; letter-spacing: var(--tracking-xwide); text-transform: uppercase;
color: var(--q-highlight-3-text); font-weight: var(--w-bold); margin-bottom: 9px;
}
.zf-role-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.zf-role-meta { display: flex; flex-direction: column; min-width: 0; }
.zf-role-name { font-size: 0.84375rem; font-weight: var(--w-bold); color: var(--q-dark); line-height: 1.3; white-space: nowrap; }
.zf-role-fn { font-size: 0.71875rem; color: var(--q-medium); line-height: 1.3; white-space: nowrap; }
/* Kachel per mailto-Link klickbar (Person hat eine E-Mail-Adresse hinterlegt) */
.zf-role-tile-mail { cursor: pointer; transition: box-shadow var(--dur-fast) var(--ease-std), background var(--dur-fast) var(--ease-std); }
.zf-role-tile-mail:hover { box-shadow: inset 0 0 0 1.5px var(--q-medium); }
/* `display: contents` lässt die Kachel selbst das Raster bilden — als `button`
(T-199) braucht sie zusätzlich die geerbte Schrift und Ausrichtung, weil ein
Knopf beides von sich aus überschreibt. Der Fokusring liegt deshalb an der
umgebenden Kachel und nicht am Knopf, der keine eigene Fläche hat. */
.zf-role-tile-mail-link {
display: contents; color: inherit; text-decoration: none;
font: inherit; text-align: left; border: 0; background: none; cursor: pointer;
}
.zf-role-tile:has(.zf-role-tile-mail-link:focus-visible) {
outline: 2px solid var(--focus-ring); outline-offset: 2px;
}
/* Lese-Ansicht: Kennzahlen — horizontal scrollende Kacheln (kein Umbruch) */
.zf-kpi-view { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.zf-kpi-tile { flex: 0 0 auto; min-width: 150px; background: var(--surface-soft); border-radius: 14px; padding: 13px 16px; }
.zf-kpi-label { font-size: 0.65625rem; color: var(--q-medium); font-weight: var(--w-bold); letter-spacing: var(--tracking-xwide); text-transform: uppercase; }
.zf-kpi-value { font-size: 1.25rem; font-weight: var(--w-bold); font-family: var(--font-display); color: var(--q-dark); line-height: 1.2; margin-top: 6px; }
/* Abschnitts-Wrapper für Ansprechpersonen/Kennzahlen: gestrichelte Trennlinie
+ rechter Fade-out als Hinweis auf horizontal scrollbaren Inhalt. */
.detail-zf-block { position: relative; padding: 12px 0; border-bottom: 1px dashed var(--divider); min-width: 0; }
.detail-zf-block:last-child { border-bottom: 0; }
.detail-zf-block::after, .zf-section::after {
content: ""; position: absolute; top: 26px; right: 0; bottom: 10px; width: 30px;
background: linear-gradient(to right, rgba(255,255,255,0), var(--surface));
pointer-events: none;
}
.zf-section { position: relative; }
.detail-zf-label {
font-size: 0.6875rem; letter-spacing: var(--tracking-xwide); text-transform: uppercase;
color: var(--q-medium); font-weight: var(--w-bold); margin-bottom: 10px;
}
/* Editor: gemeinsame Container */
.zf-editor { display: flex; flex-direction: column; gap: 4px; }
.zf-rows { display: flex; flex-direction: column; gap: 6px; }
/* Editor: einzelne Zeile */
.zf-row {
display: grid;
grid-template-columns: 1fr 1fr auto;
gap: 6px;
align-items: center;
}
.zf-row .form-input { font-size: 0.8125rem; padding: 7px 10px; height: 36px; }
/* Für Kennzahlen-Zeile: Typ breit, Wert schmaler */
#zfKennzahlenRows .zf-row { grid-template-columns: 1.4fr 0.8fr auto; }
/* Cbx in Editor-Zeilen: gleiche Höhe wie form-input */
.zf-row .cbx { min-width: 0; }
.zf-row .cbx-trigger { padding: 7px 12px 7px 14px; height: 36px; font-size: 0.8125rem; }
/* Löschen-Button in einer Editor-Zeile */
.zf-del-btn {
display: flex; align-items: center; justify-content: center;
width: 38px; height: 38px; flex-shrink: 0;
border: 1px solid var(--q-bright); background: var(--q-white); border-radius: 10px; cursor: pointer;
color: var(--q-medium); transition: border-color 120ms, background 120ms, color 120ms;
}
.zf-del-btn:hover { border-color: var(--danger); background: var(--danger-soft, #fde8e8); color: var(--danger-text); }
/* Hinzufügen-Button */
.zf-add-btn {
display: inline-flex; align-items: center; gap: 7px;
font-size: 0.78125rem; font-weight: var(--w-medium); color: var(--q-dark);
background: none; border: 1px dashed var(--q-linie); border-radius: 10px;
cursor: pointer; padding: 8px 13px; margin-top: 6px;
transition: border-color 150ms, background 150ms;
}
.zf-add-btn:hover { border-color: var(--q-highlight-3); background: var(--surface-soft); }
/* Leer-Hinweis wenn keine Einträge */
.zf-empty-hint {
font-size: 0.78125rem; color: var(--q-medium); font-style: italic; margin: 2px 0 4px;
}
/* ── Toolbar (Such-, Filter-, Sortier-, Export-Leiste) ───────────────────────── */
.toolbar {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 28px;
position: relative;
flex-wrap: nowrap; /* T-278, siehe oben */
}
.toolbar .tb-spacer { flex: 0 0 auto; margin-left: auto; }
.tb-search {
flex: 1 1 260px;
min-width: 200px;
display: flex;
align-items: center;
gap: 10px;
background: #fff;
border: 1px solid var(--divider);
border-radius: 999px;
padding: 10px 18px;
transition: border-color var(--dur-fast) var(--ease-std), box-shadow var(--dur-fast) var(--ease-std);
}
.tb-search input {
flex: 1;
border: 0; outline: 0; background: transparent;
font-size: 0.875rem;
font-weight: var(--w-light);
font-family: var(--font-sans);
color: var(--q-dark);
}
.tb-search input::placeholder { color: var(--q-medium); }
.tb-search-clear {
width: 18px; height: 18px; border-radius: 50%;
display: grid; place-items: center; flex-shrink: 0;
border: none; background: transparent; cursor: pointer;
transition: background var(--dur-fast) var(--ease-std);
}
.tb-search-clear:hover { background: var(--surface-soft); }
.tb-group { position: relative; flex-shrink: 0; }
.tb-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: #fff;
border: 1px solid var(--divider);
border-radius: 999px;
padding: 10px 16px;
font-size: 0.84375rem;
font-weight: var(--w-bold);
font-family: var(--font-sans);
color: var(--q-dark);
cursor: pointer;
white-space: nowrap;
transition: border-color var(--dur-fast) var(--ease-std), transform var(--dur-fast) var(--ease-std);
}
.tb-btn .ic { width: 15px; height: 15px; }
.tb-btn:hover { border-color: var(--q-linie); }
.tb-btn:active { transform: scale(0.98); }
.tb-btn.open { border-color: var(--q-highlight-2); }
.tb-badge {
min-width: 20px; height: 20px;
padding: 0 6px;
border-radius: 999px;
background: var(--q-highlight-2);
color: #fff;
font-size: 0.6875rem;
font-weight: var(--w-bold);
display: inline-grid; place-items: center;
line-height: 1;
}
.tb-reset { background: #fff; }
.tb-reset:disabled { display: none; }
/* View-Toggle */
.tb-toggle {
display: inline-flex;
align-items: center;
gap: 3px;
background: #fff;
border: 1px solid var(--divider);
border-radius: 999px;
padding: 4px;
flex-shrink: 0;
}
.tb-toggle button {
width: 36px; height: 30px;
border-radius: 999px;
border: none; background: transparent; cursor: pointer;
display: grid; place-items: center;
transition: background var(--dur-fast) var(--ease-std);
}
.tb-toggle button .ic { width: 18px; height: 18px; opacity: 0.5; transition: opacity var(--dur-fast) var(--ease-std), filter var(--dur-fast) var(--ease-std); }
.tb-toggle button:hover .ic { opacity: 0.8; }
.tb-toggle button.active { background: var(--q-highlight-2); }
.tb-toggle button.active .ic { opacity: 1; filter: brightness(0) invert(1); }
/* Popover */
.tb-pop {
position: absolute;
top: calc(100% + 8px);
z-index: 30;
background: #fff;
border-radius: 16px;
box-shadow: 0 14px 40px rgba(16,49,78,0.16);
border: 1px solid var(--divider);
padding: 18px;
min-width: 280px;
animation: tb-pop-in var(--dur-fast) var(--ease-std) both;
transform-origin: top;
}
.tb-pop.left { left: 0; }
.tb-pop.right { right: 0; }
@keyframes tb-pop-in { from { transform: translateY(-6px) scaleY(0.97); opacity: 0.5; } to { transform: none; opacity: 1; } }
/* ── Eine Höhe für alle Elemente der Leiste (T-249) ────────────────────────
Beanstandet: Das Suchfeld wirkt größer als die Knöpfe daneben. Gemessen
stimmte das — vier Höhen in einer Zeile, weil jede aus Innenabstand plus
Inhalt entstand (Suchfeld 11/10 px Abstand + Eingabezeile, Knöpfe 10 px +
Schriftzeile, Umschalter 4 px + 30-px-Knöpfe, Pillen 8 px + Schrift). Der
Referenzentwurf trägt dieselben vier Höhen; die Abweichung ist also
übernommen, nicht eingeschlichen.
Jetzt setzt **eine** Höhe (`--tb-hoehe`, tokens.css) die Außenmaße, und
der senkrechte Innenabstand entfällt — die Mitte übernimmt `align-items`.
Die Regel steht nach beiden Toolbar-Blöcken dieser Datei (der frühere bei
`.toolbar, .tb`, der spätere hier), damit sie beide übersteuert, ohne an
den waagrechten Abständen etwas zu ändern.
Gilt auch außerhalb der Leiste für den Kennzahl-Umschalter des Lagebilds
und die Blickwinkel-Pillen der Zuständigkeiten — beides sind dieselben
Bausteine in derselben Rolle. Ausgenommen ist das Suchfeld der
Mehrfachauswahl in den Benachrichtigungen (benachrichtigungs_abos.css):
Es steht in einem Fach, nicht in einer Leiste. */
.tb-search,
.tb-btn,
.tb-toggle,
.tb-quick-pill {
height: var(--tb-hoehe);
box-sizing: border-box;
padding-top: 0;
padding-bottom: 0;
}
.tb-toggle { padding: 4px; }
.tb-toggle button { height: 100%; }
.tb-quick-pill { display: inline-flex; align-items: center; }
.tb-pop-sec + .tb-pop-sec { margin-top: 18px; }
.tb-pop-sec-label {
font-size: 0.65625rem;
letter-spacing: var(--tracking-xwide);
text-transform: uppercase;
color: var(--q-medium);
font-weight: var(--w-bold);
margin: 0 0 10px 2px;
}
.tb-pop-chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* ── Filter mit Suchfeld (T-225) ───────────────────────────────────────────
Fuer Filter, deren Optionen mit dem Bestand wachsen — der Personenfilter
boete bei 200 Konten 200 Chips an. Das Feld engt die Vorschlaege ein; die
Chips darunter bleiben die vorhandene Bauform, es kommt nur ein Feld davor.
**Hier und nicht im ersten Toolbar-Abschnitt:** `app.css` traegt die
Werkzeugleiste zweimal (ab Zeile ~940 und ab ~4620), mit leicht
verschiedenen Schreibweisen derselben Regeln. T-152 hat dieselbe Doppelung
fuer `.tb-seg` festgestellt. Der spaetere Abschnitt ist der wirksame; neue
Regeln gehoeren dorthin, solange die beiden nicht zusammengelegt sind.
Die **Schale** traegt das Fokusbild, nicht das `input`: Das Feld sitzt
randlos darin, und am `input` laege der Schein innerhalb der Schale und
waere schmaler — dieselbe Erwaegung wie bei den uebrigen Suchfeldern
(T-178). Die Schale ist deshalb in deren Sammelregel aufgenommen. */
.tb-pop-suche {
display: flex; align-items: center; gap: 8px;
margin: 0 0 9px;
padding: 7px 11px;
background: #fff;
border: 1px solid var(--divider);
border-radius: var(--radius-pill);
transition: border-color var(--dur-fast) var(--ease-std), box-shadow var(--dur-fast) var(--ease-std);
}
.tb-pop-suche input {
flex: 1; min-width: 0;
border: 0; outline: 0; background: transparent;
font-family: var(--font-sans); font-size: 0.8125rem; font-weight: var(--w-regular);
color: var(--q-dark);
}
.tb-pop-suche input::placeholder { color: var(--q-medium); }
/* Setzt jede vererbbare Eigenschaft der globalen `p`-Regel ausdruecklich —
sonst wirkt sie hinein (in diesem Projekt viermal passiert). */
.tb-pop-leer {
margin: 8px 0 0;
font-family: var(--font-sans); font-size: 0.75rem; font-weight: var(--w-regular);
line-height: 1.45; color: var(--q-medium); max-width: 34ch; text-wrap: pretty;
}
.tb-pop-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 14px;
border-radius: 999px;
border: 1px solid var(--divider);
background: #fff;
font-size: 0.8125rem;
font-family: var(--font-sans);
font-weight: var(--w-regular);
color: var(--q-dark);
cursor: pointer;
transition: border-color var(--dur-fast) var(--ease-std), background var(--dur-fast) var(--ease-std);
}
.tb-pop-chip .ic { width: 12px; height: 12px; }
.tb-pop-chip:hover { border-color: var(--q-linie); }
.tb-pop-chip.active { background: var(--q-highlight-2); border-color: var(--q-highlight-2); color: #fff; }
.tb-pop-chip.active .ic { filter: brightness(0) invert(1); }
.tb-pop-reset {
display: block;
width: 100%;
text-align: center;
margin-top: 18px;
color: var(--q-highlight-3-text);
font-weight: var(--w-bold);
font-size: 0.84375rem;
font-family: var(--font-sans);
padding: 4px;
background: none; border: none; cursor: pointer;
}
.tb-pop-reset:disabled { color: var(--q-medium); opacity: 0.6; cursor: default; }
/* Sort Popover */
.tb-sort-list { display: flex; flex-direction: column; gap: 2px; }
.tb-sort-opt {
display: flex; align-items: center; justify-content: space-between;
padding: 11px 14px;
border-radius: 10px;
font-size: 0.875rem;
font-family: var(--font-sans);
color: var(--q-dark);
background: none; border: none; cursor: pointer;
text-align: left;
transition: background var(--dur-fast) var(--ease-std);
}
.tb-sort-opt:hover { background: var(--surface-soft); }
.tb-sort-opt.active { background: #EEF5DC; font-weight: var(--w-bold); }
.tb-sort-opt .ic { width: 14px; height: 14px; }
/* Export Popover */
.tb-export-row {
display: flex; align-items: center; gap: 10px;
width: 100%;
padding: 12px 14px;
border-radius: 10px;
font-size: 0.875rem;
font-family: var(--font-sans);
color: var(--q-dark);
background: none; border: none; cursor: pointer;
text-align: left;
transition: background var(--dur-fast) var(--ease-std);
}
.tb-export-row + .tb-export-row { margin-top: 2px; }
.tb-export-row:hover { background: var(--surface-soft); }
.tb-export-row .ic { width: 16px; height: 16px; }
/* ── Einstellungen ──────────────────────────────────────────────────────────── */
.settings { display: flex; flex-direction: column; gap: 0; }
/* Nav-Mode-Switch — erbt tb-toggle-Pill-Stil, nutzt inline-SVGs mit currentColor */
.set-navswitch {
display: inline-flex;
align-items: center;
gap: 3px;
background: #fff;
border: 1px solid var(--divider);
border-radius: 999px;
padding: 4px;
flex-shrink: 0;
}
.set-navswitch button {
display: grid;
place-items: center;
width: 36px;
height: 30px;
border: none;
border-radius: 999px;
cursor: pointer;
background: transparent;
color: var(--q-dark);
opacity: 0.5;
transition: background var(--dur-fast) var(--ease-std), opacity var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std);
}
.set-navswitch button svg { display: block; }
.set-navswitch button:hover { opacity: 0.85; }
.set-navswitch button.active { background: var(--q-highlight-2); color: #fff; opacity: 1; }
/* Sidebar-Layout */
.set-layout {
display: grid;
grid-template-columns: 248px 1fr;
gap: 24px;
align-items: start;
}
/* Sidebar-Nav */
.set-sidenav {
display: flex;
flex-direction: column;
gap: 4px;
position: sticky;
top: 0;
}
.set-navitem {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
background: transparent;
color: var(--q-dark);
font-size: 0.875rem;
font-family: var(--font-sans);
font-weight: var(--w-medium);
text-align: left;
transition: background var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std);
}
.set-navitem .ic { opacity: 0.55; flex-shrink: 0; transition: opacity var(--dur-fast) var(--ease-std), filter var(--dur-fast) var(--ease-std); }
.set-navitem:hover { background: var(--surface-soft); }
.set-navitem.active { background: var(--q-highlight-2); color: #fff; font-weight: var(--w-bold); }
.set-navitem.active .ic { opacity: 1; filter: brightness(0) invert(1); }
/* Panel-Bereich */
.set-panel-wrap { min-width: 0; }
.set-panel {
background: var(--surface);
border-radius: 18px;
box-shadow: var(--shadow-card);
padding: 28px 30px 26px;
}
.set-panel-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
margin-bottom: 22px;
}
.set-panel-title { font-family: var(--font-display); font-size: 1.375rem; font-weight: var(--w-bold); color: var(--q-dark); margin: 0; }
.set-panel-sub { margin: 6px 0 0; color: var(--q-medium); font-size: 0.84375rem; line-height: 1.5; max-width: 62ch; }
/* Kennung-Badge */
.set-kennung-badge {
flex-shrink: 0;
font-family: var(--font-display);
font-weight: var(--w-bold);
font-size: 0.875rem;
color: var(--q-highlight-2);
background: var(--surface-soft);
border-radius: var(--radius-sm);
padding: 7px 14px;
letter-spacing: 0.02em;
white-space: nowrap;
}
/* ── Gliederung nach Geltungsbereich (T-307, Referenzentwurf datenraeume.css) ─
Gruppen „Organisation" und „Datenraum · " in der Seitennavigation,
Gruppenmarken in der Reiterleiste, Geltungsbereich über dem Bereichstitel.
Nur gezeichnet, wenn die Gliederung etwas sagt (datenraeume.js,
`drGeltungZeigen`). Die Marken stehen in der Schrift der
`.nav-section-label` der Hauptnavigation — dieselbe Rolle, eine Ebene tiefer. */
.set-navgroup { display: flex; flex-direction: column; gap: 4px; }
.set-navgroup + .set-navgroup { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--divider); }
.set-navgroup-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 0 16px 6px; }
.set-navgroup-label,
.set-tab-group,
.set-panel-scope {
font-size: 0.65625rem;
letter-spacing: var(--tracking-xwide);
text-transform: uppercase;
font-weight: var(--w-bold);
color: var(--q-highlight-3-text);
}
.set-navgroup-hint { font-size: 0.75rem; color: var(--q-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-tab-group { flex-shrink: 0; align-self: center; padding: 0 6px 0 14px; border-left: 1px solid var(--divider); }
.set-tab-group:first-child { border-left: 0; padding-left: 2px; }
.set-panel-scope { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.set-panel-scope .ic { opacity: 0.7; }
.set-panel-scope-raum { color: var(--q-highlight-2); }
/* Plattform (T-308): Vorgaben des Betreibers für alle Organisationen —
die sparsam eingesetzte fünfte Markenfarbe, wie im Referenzentwurf. */
.set-panel-scope-plattform { color: var(--q-highlight-5); }
/* ── Seitenleisten-Fassung auf schmalen Anzeigen (T-249) ─────────────────────
Die Fassung „Seitenleiste" hatte keine Regel für schmale Fenster: Die Liste
behielt ihre 248 px, und bei 390 px blieben dem Inhalt **75 px** — der
Bereich war auf dem Telefon nicht zu benutzen (`.main` rollte 181 px
waagrecht). Unterhalb 820 px — dieselbe Grenze wie die Hauptnavigation —
rückt die Liste über den Inhalt und wird eine waagrecht rollende Zeile,
wie die Reiter-Fassung. Eine senkrechte Liste von 17 Einträgen hätte den
Inhalt um rund 800 px nach unten geschoben. */
@media (max-width: 820px) {
.set-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.set-sidenav {
position: static;
flex-direction: row;
overflow-x: auto;
scrollbar-width: none;
padding-bottom: 2px;
}
.set-sidenav::-webkit-scrollbar { display: none; }
.set-navitem { flex: 0 0 auto; white-space: nowrap; padding: 10px 14px; }
/* Gruppen (T-307) reihen sich in die rollende Zeile ein; die Marke steht
als Beschriftung vor ihren Einträgen, getrennt durch einen Strich wie
die Gruppenmarken der Reiterleiste. */
.set-navgroup { flex-direction: row; align-items: center; flex-shrink: 0; }
.set-navgroup + .set-navgroup { margin: 0 0 0 6px; padding: 0 0 0 10px; border-top: 0; border-left: 1px solid var(--divider); }
.set-navgroup-head { padding: 0 6px 0 2px; }
.set-navgroup-hint { max-width: 160px; }
/* Kopfzeile des Bereichs: Die Aktionen daneben (Benutzer: 469 px) dürfen
unter den Titel rücken und selbst umbrechen. */
.set-panel-head { flex-wrap: wrap; }
/* Mit Elternklasse: Die Grundregel von .set-head-actions steht weiter unten
in dieser Datei und gewaenne sonst ueber die Reihenfolge (gemessen:
flex-shrink blieb 0). */
.set-panel-head .set-head-actions { flex-shrink: 1; min-width: 0; }
.set-panel { padding: 20px 16px 18px; }
}
/* ── Bereichsauswahl auf dem Telefon (T-276) ─────────────────────────────────
Unter 700 px ersetzt eine Auswahlliste beide Navigationsformen und den
Umschalter zwischen ihnen: Bei achtzehn Bereichen stand der größte Teil der
rollenden Liste außerhalb des Bildes. Die Liste selbst ist `.form-field` +
`.form-select`; hier steht nur, wann sie gilt. */
.set-mobilenav { display: none; }
@media (max-width: 700px) {
.set-mobilenav { display: flex; margin-bottom: 20px; }
.set-sidenav, .set-tabs, .set-navswitch { display: none; }
.set-layout { display: block; }
}
/* Reiter-Layout */
.set-tabs-layout { display: block; margin-top: 20px; }
.set-tabs { margin-bottom: 24px; }
.set-tabs-rail {
display: flex;
gap: 4px;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.set-tabs-rail::-webkit-scrollbar { display: none; }
.set-tab {
display: inline-flex;
align-items: center;
gap: 9px;
flex-shrink: 0;
border: none;
background: transparent;
cursor: pointer;
padding: 12px 18px 14px;
font-size: 0.875rem;
font-family: var(--font-sans);
font-weight: var(--w-medium);
color: var(--q-medium);
border-bottom: 3px solid transparent;
white-space: nowrap;
transition: color var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std);
}
.set-tab .ic { opacity: 0.5; flex-shrink: 0; transition: opacity var(--dur-fast) var(--ease-std); }
.set-tab:hover { color: var(--q-dark); }
.set-tab:hover .ic { opacity: 0.8; }
.set-tab.active { color: var(--q-highlight-2); border-bottom-color: var(--q-highlight-2); font-weight: var(--w-bold); }
.set-tab.active .ic { opacity: 1; }
.set-tabs-track {
position: relative;
height: 1px;
border-radius: 999px;
background: var(--q-bright);
}
.set-tabs-thumb {
position: absolute;
top: 0;
height: 1px;
border-radius: 999px;
background: var(--q-linie);
transition: opacity var(--dur-fast) var(--ease-std);
}
/* ── Bauform eines Einstellungsbereichs (T-266) ───────────────────────────
Drei Ebenen, je **eine** Ausprägung — und die Größenstaffel sagt, welche
Ebene man vor sich hat: 22 px (Panel) → 16 px (Block) → 11 px (Gruppe).
.set-form der eine Container, Rhythmus 26 px
.set-block Teilbereich mit eigenem Titel (optional)
.set-fieldset Feldgruppe mit Versalien-Label
Vorher waren es sechs Container (`set-form`, `set-stack`, `set-features`,
`set-people`, `set-katalog`, `dt-panel`) — die ersten drei mit **wörtlich
derselben Regel** — und fünf Ausprägungen der Überschrift. Gemessen an der
laufenden Instanz; die Mehrheit und der Referenzentwurf
(`docs/design/project/styles.css`) stimmten überein, deshalb ist die
Mehrheitsform der Kanon. */
.set-form { display: flex; flex-direction: column; gap: 26px; }
/* Ein Teilbereich innerhalb eines Panels — „Datenexport" über „Format" und
„Umfang", „Rollentypen" neben „Kennzahlarten". Die Ebene gab es seit jeher,
sie hatte bloß keinen Namen und war dreimal verschieden erfunden
(`dt-block-title` 18 px Navy, `set-katalog-title` 16 px dunkel, ein `h3` mit
14 px). `.set-fieldset` kann sie nicht übernehmen: In „Export & Import"
stehen beide Ebenen gleichzeitig. */
.set-block { display: flex; flex-direction: column; gap: 16px; }
.set-block_head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
}
.set-block_titel {
display: flex; align-items: center; gap: 9px;
font-family: var(--font-display);
font-size: 1rem;
font-weight: var(--w-bold);
line-height: var(--lh-snug);
letter-spacing: 0;
color: var(--q-highlight-2);
margin: 0;
}
.set-block_titel .ic { opacity: 0.85; }
/* Bestandszahl am Titel — dieselbe Form wie die Zähler der Navigation. */
.set-block_zahl {
font-family: var(--font-sans); font-size: 0.75rem; font-weight: var(--w-bold);
color: var(--q-medium); background: var(--surface-soft);
border-radius: var(--radius-pill); padding: 2px 9px; min-width: 24px; text-align: center;
}
.set-block_sub {
flex-basis: 100%;
font-family: var(--font-sans);
font-size: 0.78125rem; font-weight: var(--w-light);
line-height: 1.45; color: var(--q-medium);
margin: -6px 0 0;
}
.set-block_controls { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.set-block_body { display: flex; flex-direction: column; gap: 16px; }
.set-fieldset { display: flex; flex-direction: column; gap: 16px; }
/* Eine Gruppe, die eine eigene Aktion trägt (Kataloge, Programmzugänge), legt
sie neben die Beschriftung — statt sich dafür eine eigene Kopfzeile zu
bauen. Die Unterlinie wandert dabei an die Kopfzeile, damit sie über die
ganze Breite läuft und nicht nur unter dem Wort. */
.set-fieldset-head {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding-bottom: 6px;
border-bottom: 1px solid var(--divider);
}
.set-fieldset-head .set-fieldset-label { padding-bottom: 0; border-bottom: 0; }
.set-fieldset-controls { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.set-fieldset-label {
font-size: 0.6875rem;
font-weight: var(--w-bold);
letter-spacing: var(--tracking-xwide);
text-transform: uppercase;
color: var(--q-highlight-3-text);
padding-bottom: 6px;
border-bottom: 1px solid var(--divider);
}
/* **Grundwert `0`, nicht `-6px 0 2px`** (T-266). Der alte Wert passte nur für
den einen Fall „unmittelbar unter einem Eingabefeld" — und das ist die
Minderheit. Ausgezählt: 73 der 108 Fundstellen in der Anwendung nahmen ihn
inline wieder zurück (26× `margin-top:0`, 24× `margin:0`, 13× `margin-top:6px`).
Die sieben Stellen, an denen das jemand vergessen hatte, standen dadurch
enger als ihre Nachbarn — genau die Uneinheitlichkeit, die beanstandet wurde.
Den Abstand macht jetzt der `gap` des umgebenden Flex-Containers; nur unter
einem Feld bleibt der zusätzliche Anschluss, und zwar hier statt 13-mal im
Markup. */
.set-field-hint { font-size: 0.78125rem; color: var(--q-medium); margin: 0; line-height: 1.45; }
.form-field > .set-field-hint { margin-top: 6px; }
/* Zweispaltiges Raster für kurze Zahlenfelder (Quantiz® Assistant, Betriebswerte). */
.set-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
/* Erläuterung der Inference-Ebene unter der Profilauswahl. */
.set-level-info {
margin-top: 10px;
padding: 10px 12px;
border-left: 3px solid var(--q-highlight-3);
background: var(--surface-soft);
border-radius: 0 8px 8px 0;
display: flex; flex-direction: column; gap: 4px;
font-size: 0.78125rem; line-height: 1.45;
}
.set-level-info b { color: var(--q-highlight-2); }
.set-level-info span { color: var(--q-medium); }
.set-level-info .set-level-not { font-style: italic; }
/* Zustandsangabe eines externen Dienstes. */
/* Gemessen am tatsächlichen Ort (Einstellungen › Assistent, 12,5 px / 700 auf
Weiß): `is-ok` stand auf `--success` und kam damit auf **3,03:1** — unter dem
Sollwert 4,5:1. Dieselbe Verwechslung, die T-123 (Befund A11Y-008) schon
einmal aufgelöst hat: `--success` ist eine **Flächen**farbe; für Text gibt es
seither `--success-text` (#4A6D13, gemessen 6,02:1 auf Weiß). Zwei der drei
Zeilen hier waren richtig, eine nicht.
Der Rückfallwert `#1f7a3d` ist mit entfallen — er war tot, das Token
existiert. Ein Rückfall, der nie greift, verdeckt nur, welcher Wert gilt.
Nachgemessen nach der Änderung: is-ok 6,02:1 · is-warn 4,69:1 ·
is-error 6,92:1. Betroffen sind beide Zeilen im Assistentenbereich
(Zustand der KI-Komponente und Bereitschaft des MCP-Profils, T-162). */
.set-status { font-weight: var(--w-bold); }
.set-status.is-ok { color: var(--success-text); }
.set-status.is-warn { color: #9a6b00; }
.set-status.is-error { color: var(--danger-text); }
/* Hinweis im Benutzerdialog auf Einstellungen, die eine Anmeldung trotz
korrektem Passwort verhindern (inaktives Konto, fehlendes Basisrecht). */
.user-warn {
margin-top: 16px;
padding: 11px 14px;
border-radius: var(--radius-sm);
background: color-mix(in srgb, var(--warning) 12%, transparent);
border-left: 3px solid var(--warning);
font-size: 0.78125rem;
line-height: 1.5;
color: var(--q-dark);
}
.user-warn p { margin: 0; }
.user-warn p + p { margin-top: 7px; }
.user-warn[hidden] { display: none; }
/* Kopfzeile mit Ansichtsumschalter und Hauptaktion (Einstellungen › Benutzer) */
.set-head-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; flex-wrap: wrap; }
/* `.set-viewseg` und `.vs-count` sind in T-214 entfallen. Der
Ansichtsumschalter „Konten / Rollen & Rechte" ist jetzt eine `pill-seg` mit
Zahl an der Option — dieselbe Leiste wie im Dialog und im Sortier-Popover.
Die Zahl hat die Umstellung bis dahin aufgehalten: `pill-seg` kannte kein
Abzeichen. Sie kennt eines seit T-214 (`.pill-seg-count`), und dessen Form
stammt von `.dp-tab-count` — nicht von `.vs-count`, das mit weissem
Aktivgrund rechnete. */
/* ── Rollen & Rechte ──────────────────────────────────────────────────────
Übernommen aus dem Redesign-Prototyp „Quantiz Balance" (docs/design-ext/
balance): Jede Rolle ist eine Karte, die den vollständigen Rechtekatalog als
Chipreihe zeigt — gewährte Rechte gefüllt, nicht gewährte gedämpft. Dadurch
ist der Zuschnitt einer Rolle auf einen Blick erfassbar, ohne sie zu öffnen. */
.role-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
gap: 14px;
}
.role-card {
background: var(--q-white);
border: 1px solid #ECECEC;
border-radius: 14px;
padding: 18px 20px;
text-align: left;
width: 100%;
cursor: pointer;
transition: box-shadow var(--dur-fast) var(--ease-std),
transform var(--dur-fast) var(--ease-std);
}
.role-card:hover {
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
transform: translateY(-1px);
}
.role-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.role-title {
font-family: var(--font-display);
font-weight: var(--w-bold);
font-size: 1rem;
color: var(--q-highlight-2);
display: flex;
align-items: center;
gap: 9px;
}
.role-sys {
font-size: 0.59375rem;
font-weight: var(--w-bold);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--q-medium);
background: var(--surface-soft);
padding: 2px 7px;
border-radius: 5px;
}
.role-desc {
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--q-medium);
margin-top: 5px;
line-height: 1.5;
}
.role-users { font-size: 0.75rem; font-weight: var(--w-bold); color: var(--q-dark); white-space: nowrap; flex-shrink: 0; }
.role-perms {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--divider);
}
.perm-chip {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.71875rem;
padding: 3px 9px;
border-radius: 999px;
font-weight: var(--w-regular);
}
.perm-chip.on { background: var(--q-highlight-2); color: var(--q-white); font-weight: var(--w-bold); }
.perm-chip.off { background: var(--surface-soft); color: var(--q-medium); }
/* Chipwähler im Rollendialog — dieselbe Sprache, aber als Bedienelement:
größere Trefferfläche und ein Kästchen, das den Zustand eindeutig macht. */
.perm-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.perm-pick-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px 8px 10px;
border: 1px solid var(--divider);
border-radius: 999px;
background: var(--q-white);
font-size: 0.8125rem;
font-weight: var(--w-regular);
color: var(--q-dark);
cursor: pointer;
transition: border-color var(--dur-fast) var(--ease-std),
background var(--dur-fast) var(--ease-std);
}
.perm-pick-chip:hover { border-color: var(--q-linie); }
.perm-pick-chip.on {
border-color: var(--q-highlight-2);
background: #FAFBF3;
font-weight: var(--w-bold);
color: var(--q-highlight-2);
}
.perm-pick-chip .ppc-box {
width: 18px;
height: 18px;
border-radius: 5px;
border: 2px solid var(--q-linie);
display: grid;
place-items: center;
flex-shrink: 0;
transition: background var(--dur-fast) var(--ease-std),
border-color var(--dur-fast) var(--ease-std);
}
.perm-pick-chip.on .ppc-box { background: var(--q-highlight-2); border-color: var(--q-highlight-2); }
.perm-pick-chip .ppc-box svg { opacity: 0; }
.perm-pick-chip.on .ppc-box svg { opacity: 1; }
/* Bereits über eine gewählte Rolle abgedeckt — eine zusätzliche Einzelzuweisung
ändert nichts. Das Recht wird deshalb als „gilt bereits" ausgewiesen, bleibt
aber wählbar (etwa um es unabhängig von der Rolle zu verankern). */
.perm-pick-chip.covered {
background: #F4F8E4;
border-color: var(--q-highlight-1);
color: var(--q-dark);
}
.perm-pick-chip.covered .ppc-box { border-color: var(--q-highlight-1); }
.perm-pick-chip.covered.on .ppc-box { background: var(--q-highlight-2); border-color: var(--q-highlight-2); }
.ppc-via {
font-size: 0.625rem;
font-weight: var(--w-bold);
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--q-medium);
background: var(--q-white);
border-radius: 999px;
padding: 1px 6px;
margin-left: 2px;
}
.ppc-via[hidden] { display: none; }
/* Auswahllisten mit Kontrollkästchen — Rollen und Berechtigungen der
Zugriffsverwaltung (Benutzerdialog). Zweispaltig, damit auch der komplette
Berechtigungskatalog ohne langes Scrollen erfassbar bleibt. */
.check-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 8px 20px;
max-height: 260px;
overflow-y: auto;
padding-right: 4px;
}
.check-row {
display: flex;
align-items: flex-start;
gap: 9px;
font-size: 0.8125rem;
line-height: 1.4;
cursor: pointer;
padding: 3px 0;
}
.check-row input[type="checkbox"] {
flex: 0 0 auto;
margin: 2px 0 0;
accent-color: var(--q-highlight-3);
cursor: pointer;
}
.check-row > span { min-width: 0; }
.check-row strong { font-weight: var(--w-bold); color: var(--q-dark); }
.check-row .muted { font-size: 0.71875rem; word-break: break-word; }
.check-row:hover strong { color: var(--q-highlight-3-text); }
/* Schlüsselrollen */
.set-roles { display: flex; flex-direction: column; gap: 10px; }
.set-role-row {
display: grid;
grid-template-columns: 1fr 1fr 36px;
gap: 10px;
align-items: center;
}
/* Seit T-209 steht neben der Personenauswahl ein Knopf, der eine Person
anlegt — die Gitterzelle wird dafür zur Reihe. Der Wrapper ist neu, weil
`set-role-person` in dieser Zeile zwei verschiedene Dinge benennt: den
Rahmen um das Auswahlfeld und, im Rückfall ohne Personen, das Textfeld
selbst. Ein `display: flex` auf `set-role-person` träfe deshalb einmal den
Rahmen und einmal das Feld. */
.set-role-person-row { display: flex; gap: 8px; align-items: center; min-width: 0; }
.set-role-person-row > .set-role-person { flex: 1; min-width: 0; }
.set-role-person select { width: 100%; }
.set-role-del {
width: 36px; height: 36px;
display: grid; place-items: center;
border: none; border-radius: var(--radius-sm);
background: transparent;
color: var(--q-medium);
cursor: pointer;
transition: background var(--dur-fast) var(--ease-std);
}
.set-role-del:hover { background: var(--surface-soft); }
.set-add-role {
align-self: flex-start;
display: inline-flex; align-items: center; gap: 6px;
border: none; background: transparent;
font-size: 0.8125rem; font-family: var(--font-sans); font-weight: var(--w-bold);
color: var(--q-highlight-3-text); cursor: pointer; padding: 6px 4px;
transition: color var(--dur-fast) var(--ease-std);
}
.set-add-role:hover { color: var(--q-highlight-2); }
.set-add-role .ic { opacity: 0.8; }
/* Logo-Drop-Zone */
.set-logo-drop {
display: flex;
align-items: center;
gap: 18px;
padding: 16px 18px;
border: 1.5px dashed var(--q-linie);
border-radius: var(--radius-md);
background: var(--surface-soft);
transition: border-color var(--dur-fast) var(--ease-std), background var(--dur-fast) var(--ease-std), border-style var(--dur-fast);
}
.set-logo-drop.dragover {
border-color: var(--q-highlight-2);
border-style: solid;
background: var(--q-highlight-4);
}
.set-logo-preview {
flex-shrink: 0;
width: 84px; height: 84px;
display: grid; place-items: center;
border: 1px solid var(--divider);
border-radius: var(--radius-md);
background: #fff;
overflow: hidden;
}
.set-logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.set-logo-empty { font-size: 0.6875rem; color: var(--q-medium); }
.set-logo-actions { display: flex; flex-direction: column; gap: 9px; }
.set-logo-droptext { font-size: 0.8125rem; color: var(--q-dark); font-weight: var(--w-medium); }
.set-logo-drop.dragover .set-logo-droptext { color: var(--q-highlight-2); font-weight: var(--w-bold); }
.set-logo-btns { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.set-logo-remove {
font-size: 0.8125rem; color: var(--danger-text);
background: none; border: none; cursor: pointer; padding: 0;
font-family: var(--font-sans); font-weight: var(--w-bold);
transition: opacity var(--dur-fast) var(--ease-std);
}
.set-logo-remove:hover { opacity: 0.75; }
.set-logo-err { font-size: 0.78125rem; color: var(--danger-text); }
/* Formular-Fußzeile */
.set-form-foot {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 16px;
padding-top: 22px;
border-top: 1px solid var(--divider);
}
.set-form-foot-main { display: flex; align-items: center; gap: 10px; }
.set-saved {
display: inline-flex; align-items: center; gap: 6px;
font-size: 0.8125rem; font-weight: var(--w-bold); color: var(--success-text);
}
.set-saved .ic { opacity: 0.85; }
/* Leerzustands-Hinweis */
.set-empty-hint { font-size: 0.8125rem; color: var(--q-medium); margin: 0; }
/* ── Tabellenbild der Einstellungen (Kataloge, Programmzugänge) ─────────
Container und Kopfzeile des Katalogs sind mit T-266 entfallen: Beides war
eine zweite Ausprägung von `.set-form` und `.set-block`. Geblieben ist
das Tabellenbild — das ist eine eigene Rolle und keine Dopplung. */
.set-panel-body { min-width: 0; }
.set-katalog-table { width: 100%; border-collapse: collapse; }
.set-katalog-table thead th {
text-align: left; font-size: 0.6875rem; letter-spacing: var(--tracking-xwide);
text-transform: uppercase; color: var(--q-medium); font-weight: var(--w-bold);
padding: 0 14px 10px; border-bottom: 1px solid var(--divider);
}
.set-katalog-table th.set-katalog-num { text-align: center; }
.set-katalog-table tbody tr { cursor: pointer; transition: background var(--dur-fast) var(--ease-std); }
.set-katalog-table tbody tr:hover { background: var(--surface-soft); }
.set-katalog-table tbody td {
padding: 12px 14px; border-bottom: 1px solid var(--divider);
font-size: 0.84375rem; color: var(--q-dark); vertical-align: middle;
}
.set-katalog-primary { font-weight: var(--w-bold); }
.set-katalog-num { text-align: center; }
.set-katalog-act { width: 76px; text-align: right; }
.set-katalog-act .row-actions { justify-content: flex-end; }
.set-kind-badge {
display: inline-block; font-size: 0.75rem; font-weight: var(--w-medium);
color: var(--q-highlight-3-text); background: rgba(21, 165, 181, 0.10);
border-radius: 999px; padding: 3px 10px;
}
/* Personen-Toolbar */
.set-people-toolbar {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.set-people-search { flex: 1; min-width: 180px; max-width: 300px; }
.set-people-search .form-input { padding: 8px 14px; font-size: 0.84375rem; }
/* Personen-Tabelle */
.set-people-table { width: 100%; border-collapse: collapse; }
.set-people-table thead th {
text-align: left;
padding: 0 14px 10px;
font-size: 0.6875rem;
font-weight: var(--w-bold);
letter-spacing: var(--tracking-xwide);
text-transform: uppercase;
color: var(--q-medium);
border-bottom: 1px solid var(--divider);
}
.set-people-table th.set-people-num { text-align: center; }
.set-people-table tbody tr {
cursor: pointer;
transition: background var(--dur-fast) var(--ease-std);
}
.set-people-table tbody tr:hover { background: var(--surface-soft); }
.set-people-table tbody td {
padding: 12px 14px;
border-bottom: 1px solid var(--divider);
font-size: 0.84375rem;
color: var(--q-dark);
vertical-align: middle;
}
.set-person-cell { display: flex; align-items: center; gap: 11px; }
.set-person-name { font-weight: var(--w-bold); color: var(--q-dark); }
.set-person-role { color: var(--q-medium); }
.set-person-contact { font-size: 0.78125rem; }
.set-person-contact a { color: var(--q-highlight-2); text-decoration: none; display: block; }
.set-person-contact a:hover { text-decoration: underline; }
.set-person-phone { color: var(--q-medium); display: block; margin-top: 1px; }
.set-people-num { text-align: center; width: 110px; }
.set-people-act { width: 76px; text-align: right; }
.set-people-act .row-actions { justify-content: flex-end; }
/* Verwendungs-Pill */
/* Der Name des verknüpften Kontos in der Personentabelle (T-193).
Geformt wie .set-usage-pill nebenan, aber in Grau statt in der Akzentfarbe:
Die Zuordnungszahl ist eine Kennzahl, die Verknüpfung eine Eigenschaft —
zwei blaue Pillen nebeneinander läsen sich als zwei Kennzahlen. */
.set-konto-pill {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
background: var(--surface-soft);
border: 1px solid var(--divider);
color: var(--q-dark);
font-size: 0.71875rem;
font-weight: var(--w-regular);
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: middle;
}
.set-usage-pill {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
background: #E8F0FA;
color: var(--q-highlight-2);
font-size: 0.71875rem;
font-weight: var(--w-bold);
min-width: 28px;
text-align: center;
}
.set-usage-pill.zero {
background: var(--surface-soft);
color: var(--q-medium);
}
/* Person-Verwendungshinweis im Dialog */
.person-usage-note {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 10px 14px;
border-radius: 10px;
background: var(--surface-soft);
font-size: 0.8125rem;
color: var(--q-dark);
border: 1.5px solid var(--divider);
}
.person-usage-note .ic { opacity: 0.6; flex-shrink: 0; margin-top: 1px; }
/* Legacy-Formular-Grid (Einstellungen, ggf. noch genutzt) */
.set-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.set-field { display: flex; flex-direction: column; gap: 6px; }
.set-field-full { grid-column: 1 / -1; }
.set-label {
font-size: 0.71875rem;
font-weight: var(--w-bold);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--q-medium);
}
/* Person-Karten-Grid (Legacy) */
.person-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.person-card {
background: var(--surface);
border: 1.5px solid var(--divider);
border-radius: 14px;
padding: 18px;
display: flex;
flex-direction: column;
gap: 12px;
transition: box-shadow 150ms;
}
.person-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.07); }
.person-card-top { display: flex; align-items: center; gap: 12px; }
.person-card-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.person-card-name { font-size: 0.875rem; font-weight: var(--w-bold); color: var(--q-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-card-role { font-size: 0.78125rem; color: var(--q-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-card-actions { display: flex; gap: 8px; border-top: 1px solid var(--divider); padding-top: 10px; }
/* ── Quick-Filter Chips (wiederverwendbar) ──────────────────────────────────── */
.quick-filters {
display: flex;
align-items: center;
gap: 4px;
background: var(--bg);
border: 1.5px solid var(--divider);
border-radius: 10px;
padding: 3px;
}
.quick-filter {
border: none;
background: transparent;
border-radius: 7px;
padding: 4px 12px;
font-size: 0.78125rem;
font-weight: 600;
font-family: var(--font-sans);
color: var(--q-medium);
cursor: pointer;
transition: background var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std);
white-space: nowrap;
}
.quick-filter:hover { background: rgba(0,0,0,0.04); color: var(--q-dark); }
.quick-filter.active { background: var(--surface); color: var(--q-dark); box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
/* ── Grundlagen ─────────────────────────────────────────────────────────────── */
.gl-art-badge {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 0.71875rem;
font-weight: 700;
letter-spacing: 0.06em;
border-radius: 6px;
padding: 3px 9px;
}
.gl-art-badge::before {
content: '';
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
}
.gl-art-direkt { background: #E8F0FA; color: var(--q-highlight-2); }
.gl-art-direkt::before { background: var(--q-highlight-2); }
.gl-art-indirekt { background: #E6F7F5; color: var(--q-highlight-3-text); }
.gl-art-indirekt::before { background: var(--q-highlight-3); }
.gl-tile-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 14px;
}
.gl-tile {
background: var(--surface);
border: 1.5px solid var(--divider);
border-radius: 14px;
padding: 18px;
cursor: pointer;
display: flex;
flex-direction: column;
gap: 8px;
transition: box-shadow 150ms, border-color 150ms;
}
.gl-tile:hover { border-color: var(--q-highlight-3); box-shadow: var(--shadow-karte-hover); }
.gl-tile-top { display: flex; align-items: center; justify-content: space-between; }
.gl-tile-title { font-size: 0.875rem; font-weight: 700; color: var(--q-highlight-2); line-height: 1.35; }
.gl-tile-cat { font-size: 0.71875rem; color: var(--q-medium); font-weight: 600; }
.gl-tile-note { font-size: 0.78125rem; color: var(--q-dark); line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.gl-tile-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
/* Chip-Strip in Detail-Panels */
.gl-chip {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.71875rem;
font-weight: 600;
border-radius: 6px;
padding: 3px 9px;
cursor: default;
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gl-chip.gl-art-direkt { background: #E8F0FA; color: var(--q-highlight-2); }
.gl-chip.gl-art-indirekt { background: #E6F7F5; color: var(--q-highlight-3-text); }
.gl-chip-add {
width: 22px; height: 22px;
border-radius: 50%;
border: 1.5px dashed var(--divider);
background: transparent;
cursor: pointer;
font-size: 1rem;
line-height: 1;
color: var(--q-medium);
display: grid;
place-items: center;
flex-shrink: 0;
transition: border-color 120ms, color 120ms;
}
.gl-chip-add:hover { border-color: var(--q-highlight-2); color: var(--q-highlight-2); }
/* Zuordnungen in Dialog */
.gl-zuord-details summary {
font-size: 0.8125rem;
font-weight: 700;
font-family: var(--font-sans);
color: var(--q-dark);
cursor: pointer;
user-select: none;
list-style: none;
padding: 4px 0;
}
.gl-zuord-details summary::-webkit-details-marker { display: none; }
.gl-link-list {
margin-top: 8px;
border: 1.5px solid var(--divider);
border-radius: 8px;
padding: 10px;
max-height: 200px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 12px;
}
.gl-link-group-label { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--q-medium); margin-bottom: 4px; }
.gl-link-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.8125rem;
cursor: pointer;
color: var(--q-dark);
}
.gl-link-item input[type="checkbox"] { accent-color: var(--q-highlight-2); cursor: pointer; }
/* ── Datei-Anhänge ───────────────────────────────────────────────────────────── */
.file-drop {
display: flex;
align-items: center;
gap: 10px;
border: 2px dashed var(--divider);
border-radius: 10px;
padding: 12px 16px;
cursor: pointer;
transition: border-color 150ms, background 150ms;
margin-bottom: 8px;
background: var(--bg);
}
.file-drop:hover, .file-drop.dragover { border-color: var(--q-highlight-2); background: #EEF3FB; }
.file-drop.busy { opacity: 0.7; pointer-events: none; }
.file-drop-icon { flex-shrink: 0; }
.file-drop-text { display: flex; flex-direction: column; gap: 2px; font-size: 0.8125rem; }
.file-drop-text strong { font-size: 0.8125rem; color: var(--q-dark); }
.file-drop-text .muted { font-size: 0.71875rem; }
.file-chiplist {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.file-chip {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 8px;
background: var(--bg);
border: 1px solid var(--divider);
transition: border-color 120ms, background 120ms;
}
.file-chip:hover { border-color: var(--q-highlight-3); background: var(--surface-soft); }
.file-chip:hover .file-chip-name { color: var(--q-highlight-2); }
.file-chip-body {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
min-width: 0;
text-decoration: none;
color: inherit;
}
.file-badge {
display: grid;
place-items: center;
border-radius: 6px;
color: #fff;
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.03em;
flex-shrink: 0;
}
.file-chip-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.file-chip-name { font-size: 0.8125rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--q-dark); }
.file-chip-meta { font-size: 0.6875rem; color: var(--q-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* "Alle Dateien"-Übersicht (Einstellungen > Speicher & Dateien) */
.file-type-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: var(--w-regular); white-space: nowrap; }
.file-owner-link {
display: flex; flex-direction: column; gap: 1px; text-align: left;
background: none; border: 0; cursor: pointer; padding: 2px 0; min-width: 0; max-width: 100%;
}
.file-owner-kind { font-size: 0.625rem; letter-spacing: var(--tracking-xwide); text-transform: uppercase; font-weight: var(--w-bold); color: var(--q-highlight-3-text); }
.file-owner-title { font-size: 0.78125rem; color: var(--q-highlight-2); font-weight: var(--w-regular); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-owner-link:hover .file-owner-title { text-decoration: underline; }
.file-tile { gap: 11px; }
.file-tile-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.file-tile-name {
font-family: var(--font-display); font-weight: var(--w-bold); font-size: 0.84375rem;
color: var(--q-highlight-2); line-height: 1.3; word-break: break-word;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.file-tile-owner {
display: block; font-size: 0.71875rem; color: var(--q-highlight-2); border-top: 1px solid var(--divider);
padding-top: 9px; margin-top: 2px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
background: none; border-left: 0; border-right: 0; border-bottom: 0; text-align: left; width: 100%;
}
.file-tile-owner:hover { text-decoration: underline; }
.file-tile-owner .file-owner-kind { margin-right: 5px; }
.file-chip-dl, .file-chip-x {
flex-shrink: 0;
width: 26px;
height: 26px;
border-radius: 6px;
display: grid;
place-items: center;
background: transparent;
border: none;
cursor: pointer;
color: var(--q-medium);
transition: background 100ms, color 100ms;
}
.file-chip-dl:hover { background: rgba(0,0,0,0.05); }
.file-chip-x:hover { background: rgba(220,53,69,0.08); color: var(--danger-text); }
/* Speicher-Übersicht (Einstellungen) */
.set-storage { display: flex; flex-direction: column; gap: 4px; }
.storage-summary {
display: flex; align-items: stretch; gap: 14px; flex-wrap: wrap; margin-bottom: 20px;
}
.storage-stat {
flex: 0 0 auto; min-width: 150px;
background: var(--surface-soft); border-radius: var(--radius-md); padding: 16px 20px;
}
.storage-stat-val { font-family: var(--font-display); font-weight: var(--w-bold); font-size: 1.75rem; color: var(--q-highlight-2); line-height: 1; }
.storage-stat-label { font-size: 0.75rem; color: var(--q-medium); margin-top: 6px; }
.storage-cats {
flex: 1; min-width: 200px; display: flex; flex-wrap: wrap; align-content: center; gap: 8px 18px;
background: var(--surface-soft); border-radius: var(--radius-md); padding: 16px 20px;
}
.storage-cat { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--q-dark); }
.storage-cat-label { font-weight: var(--w-regular); }
.storage-cat-num { font-weight: var(--w-bold); color: var(--q-highlight-2); }
.file-type-dot { width: 8px; height: 8px; border-radius: var(--radius-circle); flex-shrink: 0; }
/* Größenlimits + Auslastung */
.storage-limits {
border: 1px solid var(--divider); border-radius: var(--radius-md);
padding: 18px 20px; margin-bottom: 20px; background: var(--surface);
}
.storage-limits-head { margin-bottom: 14px; }
.storage-limits-title { font-family: var(--font-display); font-weight: var(--w-bold); font-size: 0.9375rem; color: var(--q-highlight-2); }
.storage-limits-fields { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 18px; }
.storage-limit-field { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 180px; }
.storage-limit-field > span { font-size: 0.75rem; color: var(--q-medium); font-weight: var(--w-regular); }
.storage-limit-input { display: flex; align-items: stretch; }
.storage-limit-input input {
flex: 1; min-width: 0; border: 2px solid var(--q-linie); border-right: 0;
padding: 9px 12px; font-size: 0.875rem; font-family: inherit; color: var(--q-dark);
background: var(--surface); outline: none;
}
.storage-limit-unit {
display: grid; place-items: center; padding: 0 14px;
border: 2px solid var(--q-linie); border-left: 0;
background: var(--surface-soft); color: var(--q-medium); font-size: 0.8125rem; font-weight: var(--w-bold);
}
.storage-usage { display: flex; flex-direction: column; gap: 7px; }
.storage-usage-bar { height: 8px; border-radius: var(--radius-pill); background: var(--q-bright); overflow: hidden; }
.storage-usage-fill { display: block; height: 100%; border-radius: var(--radius-pill); transition: width var(--dur-base) var(--ease-std); }
.storage-usage-fill.lvl-ok { background: var(--q-highlight-1); }
.storage-usage-fill.lvl-warn { background: var(--warning); }
.storage-usage-fill.lvl-over { background: var(--danger); }
.storage-usage-label { font-size: 0.78125rem; color: var(--q-medium); }
.storage-usage-label strong { color: var(--q-dark); }
/* Zulässige Dateitypen (einzelne Endungen, nach Kategorien) */
.storage-types {
border: 1px solid var(--divider); border-radius: var(--radius-md);
padding: 18px 20px; margin-bottom: 20px; background: var(--surface);
}
.storage-types-bar {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.storage-types-cats {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px 26px;
}
.storage-cat-group { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.storage-cat-header { display: flex; align-items: center; gap: 8px; }
.storage-cat-title {
display: flex; align-items: center; gap: 8px;
font-size: 0.8125rem; font-weight: var(--w-bold); color: var(--q-dark);
}
.storage-cat-count {
font-size: 0.71875rem; font-weight: var(--w-regular); color: var(--q-medium);
font-variant-numeric: tabular-nums;
}
.storage-cat-count.off { color: var(--danger-text); }
.storage-cat-toggle {
margin-left: auto; border: none; background: none; cursor: pointer;
font-family: inherit; font-size: 0.71875rem; font-weight: var(--w-regular);
color: var(--q-highlight-2); padding: 2px 4px; border-radius: 4px;
transition: color var(--dur-fast) var(--ease-std);
}
.storage-cat-toggle:hover { color: var(--q-highlight-3-text); text-decoration: underline; }
.storage-ext-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.storage-ext-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 11px 5px 9px; border-radius: var(--radius-pill);
border: 1.5px solid var(--q-bright); background: var(--surface);
font-family: inherit; font-size: 0.78125rem; color: var(--q-medium);
cursor: pointer; transition: all var(--dur-fast) var(--ease-std);
}
.storage-ext-chip:hover { border-color: var(--q-linie); }
.storage-ext-tick {
width: 13px; height: 13px; border-radius: 4px; flex-shrink: 0;
border: 1.5px solid var(--q-linie); position: relative;
transition: all var(--dur-fast) var(--ease-std);
}
.storage-ext-chip.on {
border-color: var(--q-highlight-2); background: #EAF0F5; color: var(--q-highlight-2);
font-weight: var(--w-regular);
}
.storage-ext-chip.on .storage-ext-tick { background: var(--q-highlight-2); border-color: var(--q-highlight-2); }
.storage-ext-chip.on .storage-ext-tick::after {
content: ""; position: absolute; left: 3.5px; top: 1px;
width: 3.5px; height: 7px; border: solid var(--q-white);
border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.storage-types-foot { margin-top: 16px; font-size: 0.78125rem; }
.storage-types-warn {
display: inline-flex; align-items: center; gap: 6px;
color: var(--danger-text); font-weight: var(--w-regular);
}
.set-features-actions { display: flex; gap: 8px; }
.set-features-reset {
border: 1.5px solid var(--q-bright); background: var(--surface); border-radius: var(--radius-sm);
padding: 6px 12px; font-size: 0.78125rem; font-weight: var(--w-regular); color: var(--q-dark);
cursor: pointer; transition: border-color var(--dur-fast) var(--ease-std);
}
.set-features-reset:hover:not(:disabled) { border-color: var(--q-highlight-2); }
.set-features-reset:disabled { opacity: 0.4; cursor: default; }
@media (max-width: 760px) {
.storage-types-cats { grid-template-columns: 1fr; }
}
/* Größen-Filter (Regler + Zahlenfeld) in der Dateien-Toolbar */
.tb-size-range { display: flex; flex-direction: column; gap: 12px; min-width: 220px; }
.tb-size-field { display: flex; flex-direction: column; gap: 6px; }
.tb-size-field > span { font-size: 0.75rem; color: var(--q-medium); font-weight: var(--w-regular); }
.tb-size-field > span em { font-style: normal; opacity: 0.75; }
.tb-size-inputs { display: flex; align-items: center; gap: 10px; }
.tb-size-inputs input[type="range"] { flex: 1; accent-color: var(--q-highlight-2); }
.tb-size-inputs input[type="number"] {
width: 56px; border: 1.5px solid var(--q-bright); border-radius: 8px;
padding: 5px 6px; font-size: 0.78125rem; text-align: center; color: var(--q-dark);
font-family: inherit;
}
/* ── GlobalSearch Spotlight ─────────────────────────────────────────────────── */
.gsearch {
position: relative;
margin-left: auto;
}
.gsearch .search { position: relative; width: 320px; }
.gsearch-clear {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
border: none;
background: none;
cursor: pointer;
padding: 2px;
display: flex;
align-items: center;
border-radius: 4px;
}
.gsearch-clear:hover { background: var(--surface-soft); }
/* Das eingebaute Leeren-Kreuz von `type="search"` (Chromium, Safari) stand
bis T-278 neben dem eigenen: zwei Kreuze uebereinander, sobald etwas im
Feld steht — aufgefallen an der Suche als Ueberlagerung. Weg nur dort, wo
die Anwendung ein eigenes Kreuz mitbringt: in der globalen Suche und in den
Werkzeugleisten. Das Suchfeld im Fach der Benachrichtigungsauswahl hat
keines und behaelt deshalb das eingebaute. */
.gsearch input::-webkit-search-cancel-button,
.toolbar .tb-search input::-webkit-search-cancel-button,
.tb .tb-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.gsearch-pop {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
background: var(--surface);
border: 1.5px solid var(--divider);
border-radius: 14px;
box-shadow: 0 12px 40px rgba(0,0,0,0.13), 0 2px 8px rgba(0,0,0,0.07);
z-index: 900;
max-height: 420px;
overflow-y: auto;
padding: 0;
animation: popIn 120ms ease;
}
.gsearch-sec { padding: 0 6px 4px; }
.gsearch-sec + .gsearch-sec { border-top: 1px solid var(--divider); padding-top: 4px; }
.gsearch-sec-label {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.65625rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--q-medium);
padding: 6px 8px 4px;
position: sticky;
top: 0;
z-index: 3;
background: var(--surface);
}
.gsearch-sec-count {
background: var(--surface-soft);
color: var(--q-medium);
border-radius: 999px;
font-size: 0.625rem;
font-weight: 700;
padding: 0 5px;
min-width: 16px;
text-align: center;
}
.gsearch-opt {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
border: none;
border-radius: 9px;
background: transparent;
cursor: pointer;
padding: 9px 10px;
text-align: left;
transition: background 100ms;
font-family: var(--font-sans);
scroll-margin-top: 34px;
scroll-margin-bottom: 38px;
}
.gsearch-opt:hover,
.gsearch-opt.hi {
background: var(--surface-soft);
}
.gsearch-opt-icon { display: flex; align-items: center; flex-shrink: 0; width: 20px; justify-content: center; }
.gsearch-opt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.gsearch-opt-title { font-size: 0.84375rem; font-weight: 600; color: var(--q-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gsearch-opt-sub { font-size: 0.71875rem; color: var(--q-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gsearch-go { flex-shrink: 0; }
.gsearch-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 28px 20px;
color: var(--q-medium);
font-size: 0.84375rem;
}
.gsearch-foot {
position: sticky;
bottom: 0;
z-index: 3;
display: flex;
gap: 14px;
align-items: center;
padding: 7px 14px;
border-top: 1px solid var(--divider);
font-size: 0.6875rem;
color: var(--q-medium);
background: var(--surface-soft);
border-radius: 0 0 12px 12px;
}
.gsearch-foot kbd {
display: inline-block;
border: 1px solid var(--divider);
border-radius: 4px;
padding: 1px 4px;
font-size: 0.625rem;
font-family: var(--font-sans);
background: #fff;
color: var(--q-dark);
margin-right: 2px;
}
/* ── Besprechung Detail View ───────────────────────────────────────────────── */
.besp-detail .page-head { padding-bottom: 0; }
.besp-detail-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 10px; font-size: 0.8125rem; color: var(--q-dark); }
.besp-detail-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.besp-detail-meta .ic { opacity: 0.6; }
.section-label-caps {
font-size: 0.6875rem !important;
font-weight: 700 !important;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--q-dark);
}
/* Agenda — verlinkte Themenliste in der Besprechungs-Detailansicht */
.besp-agenda { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.besp-agenda-item {
width: 100%; display: flex; align-items: center; gap: 12px;
padding: 11px 12px; border-radius: 12px; text-align: left; cursor: pointer;
background: transparent; border: 1px solid transparent;
transition: background var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std);
}
.besp-agenda-item:hover { background: var(--surface-soft); border-color: var(--divider); }
.besp-agenda-num {
flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
display: grid; place-items: center; font-size: 0.71875rem; font-weight: var(--w-bold);
background: var(--q-bright); color: var(--q-dark);
}
.besp-agenda-main { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 2px; }
.besp-agenda-title { font-size: 0.875rem; font-weight: var(--w-bold); color: var(--q-dark); }
.besp-agenda-meta { font-size: 0.75rem; color: var(--q-medium); text-wrap: pretty; }
.besp-agenda-owner { flex-shrink: 0; }
.besp-agenda-arrow { flex-shrink: 0; opacity: 0.35; transition: opacity var(--dur-fast) var(--ease-std); }
.besp-agenda-item:hover .besp-agenda-arrow { opacity: 0.85; }
/* ── Recording Controls ─────────────────────────────────────────────────────── */
.rec-panel { border: 1px solid var(--divider); border-radius: var(--radius-md); background: var(--surface); padding: 14px 16px; display: flex; flex-direction: column; }
.rec-panel.is-live { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 10%, transparent); }
.rec-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rec-bar-main { flex: 1; min-width: 200px; display: flex; align-items: center; }
.rec-bar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rec-btn-record {
display: inline-flex; align-items: center; gap: 10px;
padding: 10px 20px; border-radius: var(--radius-pill);
background: var(--danger); color: #fff; border: 0; cursor: pointer;
font-family: var(--font-sans); font-weight: var(--w-bold); font-size: 0.84375rem;
transition: transform var(--dur-fast) var(--ease-std), filter var(--dur-fast) var(--ease-std);
}
.rec-btn-record:hover { filter: brightness(0.95); }
.rec-btn-record:active { transform: scale(0.98); }
.rec-btn-record:disabled { opacity: 0.5; cursor: default; }
.rec-dot { width: 11px; height: 11px; border-radius: 50%; background: #fff; flex-shrink: 0; }
.rec-btn-record .rec-dot { background: #fff; }
.rec-dot.sm { width: 8px; height: 8px; background: var(--danger); }
.rec-indicator .rec-dot { background: var(--danger); animation: recPulse 1.1s var(--ease-std) infinite; }
@keyframes recPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.82); } }
@media (prefers-reduced-motion: reduce) { .rec-indicator .rec-dot { animation: none; } }
.rec-live-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rec-indicator { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78125rem; font-weight: var(--w-bold); color: var(--danger-text); }
.rec-indicator.paused { color: var(--warning-text); }
.rec-indicator.paused .rec-dot { background: var(--warning); animation: none; }
.rec-clock { font-family: var(--font-mono); font-size: 0.9375rem; font-weight: var(--w-bold); color: var(--q-dark); font-variant-numeric: tabular-nums; }
.rec-meter { width: 88px; height: 7px; border-radius: var(--radius-pill); background: var(--surface-soft); overflow: hidden; }
.rec-meter-fill { display: block; height: 100%; background: var(--q-highlight-1); border-radius: var(--radius-pill); transition: width 90ms linear; }
.rec-vad { font-size: 0.65625rem; font-weight: var(--w-bold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--q-medium); padding: 2px 8px; border-radius: var(--radius-pill); background: var(--surface-soft); }
.rec-vad.active { color: var(--success-text); background: color-mix(in srgb, var(--success) 14%, transparent); }
.rec-cancel { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--divider); background: #fff; cursor: pointer; display: grid; place-items: center; }
.rec-cancel:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.rec-opt-dirty { border-color: var(--q-highlight-3) !important; color: var(--q-highlight-3-text); }
/* `.rec-summary` ist mit T-062 entfallen — die Chips unter den
Aufnahmeeinstellungen verdoppelten das Einstellungsfeld. `.rec-chip` bleibt:
Der Transkriptkopf führt damit Profil, Sprecherzahl und Herkunft. */
.rec-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 0.71875rem; font-weight: var(--w-medium); color: var(--q-dark); background: var(--surface-soft); border-radius: var(--radius-pill); padding: 4px 11px; }
.rec-chip.on { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger-text); font-weight: var(--w-bold); }
.rec-chip .ic { opacity: 0.7; }
.rec-error { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--warning) 14%, transparent); color: var(--warning-text); font-size: 0.78125rem; line-height: 1.5; }
.rec-error .ic { flex-shrink: 0; margin-top: 1px; }
/* Live transcript */
.rec-live { margin-top: 14px; border-top: 1px solid var(--divider); padding-top: 12px; }
.rec-speaker-pick { margin-bottom: 10px; }
.rec-speaker-pick-label { display: block; font-size: 0.65625rem; font-weight: var(--w-bold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--q-medium); margin-bottom: 6px; }
.rec-speaker-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rec-speaker-chip { font-size: 0.75rem; font-weight: var(--w-medium); padding: 4px 11px; border-radius: var(--radius-pill); border: 1px solid var(--divider); background: #fff; color: var(--q-dark); cursor: pointer; transition: background var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std); }
.rec-speaker-chip:hover { border-color: var(--q-highlight-3); }
.rec-speaker-chip.active { background: var(--q-highlight-2); color: #fff; border-color: var(--q-highlight-2); }
.rec-live-stream { font-size: 0.84375rem; line-height: 1.65; color: var(--q-dark); max-height: 180px; overflow-y: auto; padding: 10px 12px; background: var(--surface-soft); border-radius: var(--radius-sm); }
.rec-live-interim { color: var(--q-medium); font-style: italic; }
/* Per-recording override */
.rec-override { margin-top: 14px; border-top: 1px solid var(--divider); padding-top: 14px; }
.rec-override-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.rec-override-title { font-weight: var(--w-bold); font-size: 0.84375rem; color: var(--q-dark); }
.rec-override-sub { font-size: 0.75rem; color: var(--q-medium); margin-top: 2px; line-height: 1.4; }
/* Settings popup — position: fixed (full), absolute (compact) */
.rec-opt-wrap { position: relative; }
.rec-pop {
position: fixed;
width: 340px;
max-height: calc(100vh - 60px);
max-height: calc(100dvh - 60px);
overflow: hidden;
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--q-bright);
border-radius: var(--radius-md);
box-shadow: var(--shadow-card);
padding: 0;
z-index: 9999;
}
.rec-pop .rec-override-head { margin-bottom: 4px; }
.rec-pop .rec-row { flex-direction: column; align-items: stretch; gap: 8px; }
.rec-pop .rec-row-ctrl { justify-content: space-between; }
.rec-pop .rec-row-ctrl .form-select-wrap { width: 100%; min-width: 0; }
.rec-pop-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--divider); background: var(--surface-soft); flex-shrink: 0; }
/* Options fieldset (settings + override) */
.rec-options { display: flex; flex-direction: column; }
.rec-options-card { border: 1px solid var(--divider); border-radius: var(--radius-md); padding: 4px 16px; background: var(--surface); margin-top: 8px; }
.rec-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; border-top: 1px solid var(--divider); }
.rec-row:first-child { border-top: 0; }
.rec-row-text { min-width: 0; }
.rec-row-label { display: block; font-size: 0.84375rem; font-weight: var(--w-medium); color: var(--q-dark); }
.rec-row-hint { display: block; font-size: 0.75rem; color: var(--q-medium); margin-top: 2px; line-height: 1.4; max-width: 52ch; }
.rec-row-ctrl { flex-shrink: 0; display: flex; align-items: center; }
/* Feste Breite, nicht Mindestbreite (T-170). Als `min-width: 200px` wuchs jedes
Feld auf seinen Inhalt: gemessen 200 / 238 / 215 px in derselben Spalte —
drei Kanten, wo eine sein sollte. 240 deckt den breitesten festen Eintrag
(„Serverseitige Transkription", 234 px samt Innenabstand).
Gerätenamen können darüber hinausgehen und werden dann beschnitten. Das ist
der bewusst gewählte Tausch: Der vollständige Name steht in der
aufgeklappten Liste, und eine Auswahl, die ihre Breite je nach
angeschlossenem Mikrofon ändert, wäre die schlechtere Lösung.
Popover und schmale Ansicht setzen darunter beide auf volle Breite; diese
Regel wirkt daher allein im Einstellungsbereich. */
.rec-row-ctrl .form-select-wrap { width: 240px; }
.rec-device { display: flex; align-items: center; gap: 8px; }
/* Im Einstellungsbereich steht der Freigabeknopf **unter** dem Auswahlfeld,
nicht daneben (T-170). Gleiche Feldbreiten allein genügen nicht: Neben dem
Feld schob der Knopf dessen rechte Kante um die eigene Breite nach links,
und drei gleich lange Felder endeten an zwei verschiedenen Kanten — was das
Auge zuerst liest, ist die Kante, nicht die Länge.
Nur hier: Im Besprechungs-Popover und in der schmalen Ansicht füllt das Feld
ohnehin die Breite, dort gibt es keine Kante auszurichten. */
.rec-options-card .rec-device { flex-direction: column; align-items: flex-end; gap: 6px; }
/* Toggle switch */
.rec-switch { width: 42px; height: 24px; border-radius: var(--radius-pill); border: 0; background: var(--q-linie); cursor: pointer; padding: 0; position: relative; transition: background var(--dur-fast) var(--ease-std); flex-shrink: 0; }
.rec-switch.on { background: var(--q-highlight-1); }
.rec-switch:disabled { opacity: 0.4; cursor: default; }
.rec-switch-knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform var(--dur-fast) var(--ease-std); pointer-events: none; }
.rec-switch.on .rec-switch-knob { transform: translateX(18px); }
.rec-note { display: flex; align-items: flex-start; gap: 10px; background: color-mix(in srgb, var(--q-highlight-2) 8%, transparent); color: var(--q-highlight-2); border-radius: var(--radius-md); padding: 13px 15px; font-size: 0.78125rem; line-height: 1.5; margin-bottom: 20px; }
.rec-note .ic { flex-shrink: 0; margin-top: 1px; }
.rec-note > div > div + div { margin-top: 4px; }
/* Recording list */
.rec-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rec-item { border: 1px solid var(--divider); border-radius: var(--radius-md); padding: 13px 15px; background: var(--surface); }
.rec-item-head { display: flex; align-items: center; gap: 12px; }
.rec-item-glyph { width: 38px; height: 38px; border-radius: 50%; background: var(--surface-soft); display: grid; place-items: center; flex-shrink: 0; }
.rec-item-main { flex: 1; min-width: 0; }
.rec-item-name { font-size: 0.84375rem; font-weight: var(--w-bold); color: var(--q-highlight-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-item-meta { font-size: 0.75rem; color: var(--q-medium); margin-top: 2px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rec-item-badge { font-size: 0.65625rem; font-weight: var(--w-bold); text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--surface-soft); color: var(--q-dark); }
.rec-item-badge.ok { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success-text); }
.rec-item-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.rec-player { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 10px; background: var(--surface-soft); border-radius: 10px; }
.rec-player-btn { width: 28px; height: 28px; border-radius: 50%; background: var(--q-highlight-2); border: none; cursor: pointer; display: grid; place-items: center; flex-shrink: 0; transition: background 150ms; }
.rec-player-btn .ic { filter: brightness(0) invert(1); }
.rec-player-btn:hover { background: var(--q-highlight-3); }
.rec-player.playing .rec-player-btn { background: var(--q-highlight-3); }
.rec-player-cur, .rec-player-dur { font-size: 0.75rem; font-weight: var(--w-bold); color: var(--q-dark); font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0; }
.rec-player-dur { color: var(--q-medium); }
.rec-player-bar { flex: 1; height: 5px; background: var(--divider); border-radius: 999px; cursor: pointer; position: relative; overflow: visible; }
.rec-player-bar:hover .rec-player-fill { background: var(--q-highlight-3); }
.rec-player-fill { position: absolute; left: 0; top: 0; height: 100%; background: var(--q-highlight-2); border-radius: 999px; transition: width 200ms linear; pointer-events: none; }
.rec-player.playing .rec-player-fill { background: var(--q-highlight-3); }
.rec-player-marker { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 3px; height: 13px; background: var(--q-highlight-1); border-radius: 2px; pointer-events: none; }
.rec-player-mark { background: none; border: none; cursor: pointer; padding: 2px 4px; flex-shrink: 0; opacity: 0.55; transition: opacity 150ms; }
.rec-player-mark:hover { opacity: 1; }
.rec-marker-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.rec-marker-item { display: flex; align-items: center; gap: 8px; padding: 3px 2px; }
.rec-marker-time { background: none; border: none; cursor: pointer; font-size: 0.71875rem; font-weight: var(--w-bold); font-variant-numeric: tabular-nums; color: var(--q-highlight-3-text); white-space: nowrap; padding: 2px 6px; border-radius: 6px; }
.rec-marker-time:hover { background: var(--surface-soft); }
.rec-marker-label { flex: 1; border: none; border-bottom: 1px solid transparent; background: transparent; font-size: 0.78125rem; font-family: var(--font-sans); font-weight: var(--w-light); color: var(--q-dark); outline: none; padding: 1px 2px; transition: border-color 150ms; }
.rec-marker-label:focus { border-bottom-color: var(--focus-ring); }
.rec-marker-del { background: none; border: none; cursor: pointer; opacity: 0.35; padding: 2px; flex-shrink: 0; }
.rec-marker-del:hover { opacity: 1; }
.rec-marker-count { display: inline-flex; align-items: center; justify-content: center; background: var(--q-highlight-1); color: var(--q-highlight-2); font-size: 0.625rem; font-weight: var(--w-bold); width: 16px; height: 16px; border-radius: 50%; margin-left: 2px; vertical-align: middle; }
.rec-marker-btn.rec-marker-flash { background: color-mix(in srgb, var(--q-highlight-1) 20%, transparent); }
.rec-item-transcript { margin-top: 12px; border-top: 1px solid var(--divider); padding-top: 12px; }
/* .rec-spin und @keyframes recSpin sind mit T-147 entfallen. Die Klasse hatte
genau **eine** Fundstelle -- die Transkriptionszeile des Assistenten in
index.php -- und musste dort ihre beiden weissen Randfarben schon per
style-Attribut auf Petrol umschreiben, weil sie fuer eine gefuellte
Schaltflaeche gedacht war und auf --surface-soft steht. Ein Ring, der an
seiner einzigen Fundstelle umgefaerbt wird, ist keine Komponente. Die Zeile
zeigt jetzt die gemeinsame `ladeanzeige` (QZ-L09). */
/* Transcript */
.transcript-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.transcript-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.transcript-speakers { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--divider); }
.transcript-speaker { display: inline-flex; align-items: center; gap: 7px; background: var(--surface-soft); border-radius: var(--radius-pill); padding: 3px 11px 3px 8px; }
.transcript-speaker-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.transcript-speaker-name { background: none; border: 0; padding: 0; cursor: default; font-family: var(--font-sans); font-size: 0.78125rem; font-weight: var(--w-bold); color: var(--q-dark); }
.transcript-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; max-height: 460px; overflow-y: auto; }
.transcript-seg { display: grid; grid-template-columns: 52px auto 1fr; gap: 4px 12px; align-items: baseline; }
.transcript-time { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--q-medium); font-variant-numeric: tabular-nums; }
.transcript-seg-speaker { grid-column: 2; font-size: 0.78125rem; font-weight: var(--w-bold); white-space: nowrap; }
.transcript-seg-text { grid-column: 3; font-size: 0.84375rem; line-height: 1.6; color: var(--q-dark); }
.transcript-seg-speaker + .transcript-seg-text { grid-column: 3; }
.transcript-seg .transcript-seg-text:nth-child(2) { grid-column: 2 / 4; }
/* Compact variant (meeting sidebar) */
.rec-compact { padding: 10px; }
.rec-compact .rec-bar { gap: 8px; }
.rec-compact .rec-bar-main { min-width: 100%; }
.rec-compact .rec-btn-record { width: 100%; justify-content: center; padding: 9px 14px; }
.rec-compact .rec-bar-actions { width: 100%; }
.rec-compact .rec-bar-actions .btn { flex: 1; justify-content: center; }
.rec-compact .rec-live-controls { width: 100%; }
.rec-compact .rec-meter { flex: 1; min-width: 60px; }
.rec-compact .rec-row { flex-direction: column; align-items: stretch; gap: 8px; }
.rec-compact .rec-row-ctrl { justify-content: space-between; }
.rec-compact .rec-row-ctrl .form-select-wrap { min-width: 0; width: 100%; }
/* Compact recording idle state */
.rec-compact-idle { display: flex; align-items: center; gap: 12px; }
.rec-compact-idle .rec-btn-record { width: 40px; height: 40px; padding: 0; border-radius: 50%; gap: 0; justify-content: center; flex-shrink: 0; }
.rec-compact-idle .rec-btn-record .rec-dot { width: 14px; height: 14px; }
.rec-compact-idle-text { flex: 1; min-width: 0; }
.rec-compact-idle-title { font-size: 0.8125rem; font-weight: var(--w-bold); color: var(--q-dark); }
.rec-compact-idle-sub { font-size: 0.71875rem; color: var(--q-medium); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-gear { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; border: 1px solid var(--divider); background: #fff; cursor: pointer; display: grid; place-items: center; color: var(--q-dark); transition: border-color var(--dur-fast) var(--ease-std), background var(--dur-fast) var(--ease-std); }
.rec-gear:hover { border-color: var(--q-highlight-3); }
.rec-gear.active { border-color: var(--q-highlight-2); background: var(--surface-soft); }
.rec-gear.dirty { border-color: var(--q-highlight-3); }
.rec-gear .ic { opacity: 0.7; }
/* Settings popover variants */
.rec-pop-up { top: auto; bottom: calc(100% + 8px); }
.rec-pop-compact { position: absolute; width: 300px; max-width: calc(100vw - 40px); left: auto; right: 0; max-height: min(86vh, 640px); }
.rec-pop-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 12px 12px 16px; border-bottom: 1px solid var(--divider); flex-shrink: 0; }
.rec-pop-x { border: 0; background: transparent; cursor: pointer; width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; flex-shrink: 0; }
.rec-pop-x:hover { background: var(--surface-soft); }
.rec-pop-scroll { overflow-y: auto; padding: 2px 16px 4px; flex: 1; }
/* Einstellungen — Aufnahmen */
.set-aufnahmen { display: flex; flex-direction: column; }
.set-form-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--divider); }
.set-form-foot-main { display: flex; align-items: center; gap: 8px; }
.set-saved { display: inline-flex; align-items: center; gap: 5px; font-size: 0.78125rem; color: var(--success, #6FA31C); font-weight: var(--w-medium); }
/* ── Assign-group (merged Zuordnungen tab) ─────────────────────────────────── */
.assign-group { margin-bottom: 2px; }
.assign-group-head {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 0 6px;
margin-bottom: 4px;
}
.assign-group-label {
font-size: 0.6875rem;
font-weight: var(--w-bold);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--q-medium);
}
.assign-group-count {
font-size: 0.6875rem;
color: var(--q-medium);
background: var(--surface-soft);
border-radius: 999px;
padding: 1px 6px;
font-weight: var(--w-bold);
}
/* ============================================================
Zeitstrahl — automatisch generierter grafischer Zeitstrahl
(portiert aus docs/design/project/styles.css)
============================================================ */
.zs-board { display: flex; flex-direction: column; gap: 16px; }
/* Steuerleiste */
.zs-controls { display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap; }
/* `.zs-seg` / `.zs-seg-btn` sind in T-214 entfallen. Sie kamen aus dem
Referenzentwurf des Zeitstrahls — grauer Trog, aktive Option weiss mit
Schlagschatten — und waren damit die dritte Fassung desselben Umschalters
neben `.pill-seg` und `.set-viewseg`. Beide Fundstellen (Darstellung,
Gliederung) benutzen jetzt die Hausform; siehe `docs/css/structure/pill_seg.md`. */
.zs-rangesel { display: inline-flex; align-items: center; gap: 8px; }
.zs-rangesel > span { font-size: 0.65625rem; letter-spacing: var(--tracking-xwide); text-transform: uppercase; font-weight: var(--w-bold); color: var(--q-medium); }
.zs-rangesel select {
font-family: var(--font-sans); font-size: 0.8125rem; font-weight: var(--w-medium); color: var(--q-dark);
background: #fff; border: 1.5px solid var(--q-linie); border-radius: var(--radius-sm);
padding: 6px 10px; cursor: pointer;
}
.zs-legend { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.zs-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; color: var(--q-dark); }
.zs-leg-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.zs-legend-toggle { display: inline-flex; align-items: center; gap: 7px; font-size: 0.78125rem; font-weight: var(--w-medium); color: var(--q-dark); cursor: pointer; user-select: none; }
.zs-legend-toggle input { width: 15px; height: 15px; accent-color: var(--q-highlight-2); cursor: pointer; }
.zs-expand {
display: inline-flex; align-items: center; gap: 7px;
font-family: var(--font-sans); font-size: 0.78125rem; font-weight: var(--w-bold);
color: var(--q-highlight-3-text); cursor: pointer;
background: color-mix(in srgb, var(--q-highlight-3) 8%, #fff);
border: 1px solid color-mix(in srgb, var(--q-highlight-3) 42%, transparent);
border-radius: var(--radius-pill); padding: 7px 15px;
transition: background var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std);
}
.zs-expand:hover { background: color-mix(in srgb, var(--q-highlight-3) 15%, #fff); border-color: var(--q-highlight-3); }
.zs-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.zs-print-btn {
display: inline-flex; align-items: center; gap: 7px;
font-family: var(--font-sans); font-size: 0.78125rem; font-weight: var(--w-bold);
color: var(--q-dark); cursor: pointer;
background: #fff; border: 1px solid var(--q-linie);
border-radius: var(--radius-pill); padding: 7px 15px;
transition: border-color var(--dur-fast) var(--ease-std), background var(--dur-fast) var(--ease-std);
}
.zs-print-btn:hover { border-color: var(--q-highlight-2); background: var(--surface-soft); }
/* Diagramm-Container */
.zs { border: 1px solid var(--divider); border-radius: var(--radius-md); background: var(--surface); padding: 20px 22px 6px; }
.zs-track { position: relative; overflow: visible; }
/* Raster & Heute */
.zs-grid-line { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--divider); transform: translateX(-0.5px); }
.zs-today { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed var(--q-highlight-3); z-index: 6; }
.zs-today-label {
position: absolute; top: -4px; left: 50%; transform: translateX(-50%);
font-size: 0.625rem; font-weight: var(--w-bold); letter-spacing: 0.06em; text-transform: uppercase;
color: #fff; background: var(--q-highlight-3); border-radius: var(--radius-pill); padding: 2px 8px; white-space: nowrap;
}
/* Zone: laufende Tätigkeiten */
.zs-lauf { position: absolute; top: 0; left: 0; right: 0; z-index: 4; }
.zs-lauf-head {
display: inline-flex; align-items: center; gap: 7px;
font-size: 0.65625rem; letter-spacing: var(--tracking-xwide); text-transform: uppercase;
font-weight: var(--w-bold); color: var(--q-medium); margin-bottom: 8px;
}
.zs-lauf-bars { display: flex; flex-direction: column; gap: 6px; }
.zs-lauf-bar {
position: relative; display: flex; align-items: center; gap: 10px; width: 100%;
height: 26px; padding: 0 12px 0 0; border: 0; text-align: left; cursor: default;
background: color-mix(in srgb, var(--zc) 12%, #fff);
border-radius: var(--radius-pill); overflow: visible;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--zc) 38%, transparent);
}
.zs-lauf-bar.clk { cursor: pointer; }
.zs-lauf-bar.clk:hover { background: color-mix(in srgb, var(--zc) 20%, #fff); }
.zs-lauf-cap { flex-shrink: 0; width: 10px; align-self: stretch; border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
.zs-lauf-title { flex: 1; min-width: 0; font-size: 0.78125rem; font-weight: var(--w-medium); color: var(--q-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Achse */
.zs-axis { position: absolute; left: 0; right: 0; height: 2px; background: var(--q-linie); border-radius: 2px; z-index: 3; }
/* Meilenstein-Marker */
.zs-marker {
position: absolute; width: 0; border: 0; background: none; padding: 0; cursor: default;
display: flex; flex-direction: column; align-items: center; z-index: 5;
}
.zs-marker.clk { cursor: pointer; }
.zs-marker:hover, .zs-marker:focus-within { z-index: 30; }
.zs-stem { width: 2px; background: var(--q-linie); flex-shrink: 0; }
.zs-dot-wrap { position: relative; display: flex; flex-direction: column; align-items: center; }
.zs-dot { border-radius: 50%; box-shadow: 0 0 0 3px #fff, 0 1px 4px rgba(0,0,0,0.22); flex-shrink: 0; transition: transform var(--dur-fast) var(--ease-std); }
.zs-marker.clk:hover .zs-dot { transform: scale(1.14); }
.zs-m-label { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-top: 6px; white-space: nowrap; }
.zs-m-date { font-size: 0.6875rem; font-weight: var(--w-bold); color: var(--q-dark); font-variant-numeric: tabular-nums; }
.zs-marker.off-l .zs-m-date, .zs-marker.off-r .zs-m-date { color: var(--q-medium); }
.zs-marker.off-l, .zs-marker.off-r { opacity: 0.72; }
/* Swimlane-Ansicht */
.zs-lanes { position: absolute; left: 0; right: 0; display: flex; flex-direction: column; gap: 6px; }
.zs-lane { display: grid; grid-template-columns: 172px 1fr; align-items: center; gap: 14px; height: 36px; }
.zs-lane-label { min-width: 0; }
.zs-lane-title { display: block; font-size: 0.8125rem; font-weight: var(--w-medium); color: var(--q-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zs-lane-sub { font-size: 0.6875rem; color: var(--q-medium); }
.zs-lane-track { position: relative; height: 100%; }
.zs-lane-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--divider); }
.zs-lane-lead { position: absolute; left: 0; top: 50%; height: 0; border-top: 1px dashed color-mix(in srgb, var(--q-linie) 70%, transparent); }
.zs-marker.inlane { position: absolute; top: 50%; transform: translate(-50%, -50%); flex-direction: row; }
.zs-lane-date { position: absolute; left: 100%; margin-left: 8px; top: 50%; transform: translateY(-50%); font-size: 0.6875rem; font-weight: var(--w-bold); color: var(--q-dark); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Tooltip */
.zs-tip {
position: absolute; bottom: calc(100% + 10px); z-index: 40;
min-width: 190px; max-width: 260px;
display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left;
background: #fff; border: 1px solid var(--q-bright); border-radius: var(--radius-sm);
box-shadow: 0 8px 24px rgba(0,0,0,0.18); padding: 10px 12px;
opacity: 0; pointer-events: none; transform: translateY(4px);
transition: opacity var(--dur-fast) var(--ease-std), transform var(--dur-fast) var(--ease-std);
}
.zs-marker:hover .zs-tip, .zs-marker:focus-within .zs-tip,
.zs-lauf-bar:hover .zs-tip, .zs-lauf-bar:focus-within .zs-tip { opacity: 1; transform: none; }
.zs-tip-title { font-family: var(--font-display); font-weight: var(--w-bold); font-size: 0.8125rem; color: var(--q-highlight-2); line-height: 1.3; white-space: normal; }
.zs-tip-row { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: var(--w-medium); color: var(--q-dark); }
.zs-tip-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.zs-tip-prio { font-size: 0.625rem; font-weight: var(--w-bold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--danger-text); background: var(--status-crit-soft); border-radius: var(--radius-pill); padding: 1px 7px; }
.zs-tip-meta { font-size: 0.71875rem; color: var(--q-medium); white-space: normal; }
.zs-tip-hint { font-size: 0.65625rem; color: var(--q-highlight-3-text); font-weight: var(--w-bold); margin-top: 2px; }
/* Achsenbeschriftung */
.zs-axis-labels { position: relative; height: 20px; margin-top: 4px; }
.zs-grid-label { position: absolute; transform: translateX(-50%); font-size: 0.65625rem; font-weight: var(--w-medium); color: var(--q-medium); white-space: nowrap; }
/* Gruppierte Ansicht (Thema-Ebene · nach Schwerpunkt) */
.zs-groups { display: flex; flex-direction: column; gap: 18px; }
.zs-group { border: 1px solid var(--divider); border-radius: var(--radius-md); background: var(--surface); padding: 4px 4px 0; }
.zs-group > .zs { border: none; padding-top: 4px; }
.zs-group-head { display: flex; align-items: baseline; gap: 10px; padding: 12px 18px 0; }
.zs-group-title { font-family: var(--font-display); font-weight: var(--w-bold); font-size: 0.875rem; color: var(--q-highlight-3-text); }
.zs-group-count { font-size: 0.6875rem; letter-spacing: var(--tracking-xwide); text-transform: uppercase; font-weight: var(--w-bold); color: var(--q-medium); }
/* Fuß & Sonderzustände */
.zs-foot { font-size: 0.75rem; color: var(--q-medium); line-height: 1.5; }
.zs-offnote { display: flex; align-items: center; gap: 7px; font-size: 0.75rem; color: var(--q-dark); padding-top: 10px; }
.zs-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 40px 20px; color: var(--q-medium); }
.zs-empty p { margin: 0; font-size: 0.84375rem; line-height: 1.55; max-width: 44ch; }
/* Vergrößern-Dialog */
.zs-modal { display: flex; flex-direction: column; min-height: 0; position: relative; }
.zs-print-logo { display: none; }
/* Druck-Legende (Maßnahmenliste) — am Bildschirm verborgen, nur im Druck sichtbar */
.zs-print-legend { display: none; }
.zs-print-legend-h { font-family: var(--font-display); font-weight: var(--w-bold); font-size: 0.875rem; color: var(--q-highlight-2); margin: 0 0 8px; }
.zs-legend-table { width: 100%; border-collapse: collapse; font-size: 0.6875rem; }
.zs-legend-table th { text-align: left; font-size: 0.59375rem; letter-spacing: var(--tracking-xwide); text-transform: uppercase; color: var(--q-medium); font-weight: var(--w-bold); padding: 0 10px 5px 0; border-bottom: 1.5px solid var(--q-linie); }
.zs-legend-table td { padding: 5px 10px 5px 0; border-bottom: 1px solid var(--divider); color: var(--q-dark); vertical-align: top; text-wrap: pretty; }
.zs-legend-table td:first-child { font-weight: var(--w-medium); }
.zs-leg-sq { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: baseline; }
.zs-modal-body { padding: 20px 28px 26px; overflow-y: auto; }
.zs-modal-body .zs-track { min-height: 200px; }
@media (max-width: 560px) {
.zs-modal-body { padding: 16px 16px 22px; }
.zs-lane { grid-template-columns: 120px 1fr; }
}
/* Druckansicht — nur der Zeitstrahl-Dialog, App-Oberfläche ausgeblendet */
@media print {
@page { size: A4 landscape; margin: 12mm; }
html, body { background: #fff !important; }
body.zs-printing #app,
body.zs-printing #detailBg,
body.zs-printing #detailPanel,
body.zs-printing #meetingMode,
body.zs-printing #aiBg,
body.zs-printing #aiDrawer,
body.zs-printing #sidebarBackdrop { display: none !important; }
body.zs-printing .modal-bg {
position: static !important; display: block !important;
background: none !important; padding: 0 !important; overflow: visible !important;
}
body.zs-printing .modal {
max-width: none !important; width: 100% !important; min-height: 0 !important;
box-shadow: none !important; border-radius: 0 !important;
}
body.zs-printing .modal-fs,
body.zs-printing .modal-x,
body.zs-printing .zs-print-btn,
body.zs-printing .zs-expand,
/* Bis T-214 stand hier `.zs-seg`; die beiden Umschalter sind jetzt
`pill-seg`. Auf `.zs-controls` eingeschraenkt, damit die Regel nicht
jede Pillenleiste des Dokuments trifft. */
body.zs-printing .zs-controls .pill-seg,
body.zs-printing .zs-rangesel,
body.zs-printing .zs-tip { display: none !important; }
body.zs-printing .modal-head { border-bottom: 1px solid #ccc; padding-bottom: 10px; padding-right: 166px; }
body.zs-printing .zs-print-logo {
display: block !important; position: absolute; top: 0; right: 0;
height: 56px; width: auto; max-width: 150px; object-fit: contain;
}
body.zs-printing .zs-legend-toggle { display: none !important; }
body.zs-printing .zs-print-legend { display: block !important; margin-top: 20px; break-inside: avoid; }
body.zs-printing .zs-legend-table { break-inside: auto; }
body.zs-printing .zs-legend-table tr { break-inside: avoid; }
body.zs-printing .zs-modal-body { padding: 18px 0 0 !important; overflow: visible !important; }
body.zs-printing .zs { border: none !important; padding: 0 !important; }
body.zs-printing .zs-controls { margin-bottom: 6px; }
body.zs-printing * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}
/* ── Einstellungen · Export & Import ─────────────────────────────────────── */
.dt-divider { height: 1px; background: var(--divider); margin: 2px 0; }
/* Formatauswahl */
.dt-formats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.dt-format {
display: flex; flex-direction: column; gap: 8px; text-align: left;
border: 1.5px solid var(--q-bright); border-radius: var(--radius-md); background: var(--q-white);
padding: 14px 16px; cursor: pointer;
transition: border-color var(--dur-fast) var(--ease-std), background var(--dur-fast) var(--ease-std), box-shadow var(--dur-fast) var(--ease-std);
}
.dt-format:hover { border-color: var(--q-linie); }
.dt-format.active { border-color: var(--q-highlight-2); background: #EAF0F5; box-shadow: 0 0 0 1px var(--q-highlight-2) inset; }
.dt-format-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.dt-format-name { font-family: var(--font-display); font-size: 1rem; font-weight: var(--w-bold); color: var(--q-dark); }
.dt-format.active .dt-format-name { color: var(--q-highlight-2); }
.dt-format-ext { font-size: 0.6875rem; font-weight: var(--w-bold); color: var(--q-highlight-3-text); font-family: var(--font-mono); }
.dt-format-sub { font-size: 0.75rem; line-height: 1.5; color: var(--q-medium); }
/* Umfang / Gruppen */
.dt-scope-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dt-scope-actions { display: flex; gap: 8px; }
.dt-groups { display: flex; flex-direction: column; gap: 16px; }
.dt-group { border: 1px solid var(--q-bright); border-radius: var(--radius-lg); padding: 14px 16px; background: var(--q-white); }
.dt-group-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px dashed var(--divider); }
.dt-group-toggle { display: flex; align-items: center; gap: 10px; background: none; border: none; cursor: pointer; padding: 0; }
.dt-group-name { font-family: var(--font-display); font-size: 0.9375rem; font-weight: var(--w-bold); color: var(--q-highlight-2); }
.dt-group-badge { font-size: 0.71875rem; font-weight: var(--w-bold); color: var(--q-highlight-3-text); background: var(--q-highlight-4); border-radius: var(--radius-pill); padding: 3px 10px; }
.dt-ent-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
/* Auswahlzeile / Checkbox */
.dt-check {
width: 18px; height: 18px; flex: 0 0 auto; border-radius: 5px;
border: 1.5px solid var(--q-linie); background: var(--q-white);
display: inline-flex; align-items: center; justify-content: center;
transition: background var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std);
}
.dt-check .ic { opacity: 0; filter: brightness(0) invert(1); transition: opacity var(--dur-fast) var(--ease-std); }
.dt-group-toggle.on .dt-check, .dt-ent.on .dt-check { background: var(--q-highlight-2); border-color: var(--q-highlight-2); }
.dt-group-toggle.on .dt-check .ic, .dt-ent.on .dt-check .ic { opacity: 1; }
.dt-ent {
display: flex; align-items: center; gap: 11px; text-align: left; width: 100%;
border: 1px solid var(--q-bright); border-radius: var(--radius-sm); background: var(--q-white);
padding: 10px 12px; cursor: pointer;
transition: border-color var(--dur-fast) var(--ease-std), background var(--dur-fast) var(--ease-std);
}
.dt-ent:hover { border-color: var(--q-linie); }
.dt-ent.on { border-color: var(--q-highlight-2); background: #EAF0F5; }
.dt-ent.disabled { opacity: 0.5; cursor: default; }
.dt-ent-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.dt-ent-text strong { font-size: 0.84375rem; font-weight: var(--w-bold); color: var(--q-dark); }
.dt-ent-text .muted { font-size: 0.71875rem; color: var(--q-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-count {
flex: 0 0 auto; min-width: 30px; text-align: center;
font-size: 0.75rem; font-weight: var(--w-bold); font-variant-numeric: tabular-nums;
color: var(--q-highlight-2); background: var(--q-highlight-4); border-radius: var(--radius-pill); padding: 3px 9px;
}
.dt-count.zero { color: var(--q-medium); background: var(--q-bright); }
/* Fuß / Zusammenfassung */
.dt-foot {
display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
padding-top: 18px; border-top: 1px solid var(--divider);
}
.dt-foot-main { display: flex; align-items: center; gap: 14px; }
.dt-summary { font-size: 0.8125rem; color: var(--q-dark); }
.dt-summary b { color: var(--q-highlight-2); font-weight: var(--w-bold); }
.dt-summary-warn { color: var(--warning-text); font-weight: var(--w-bold); }
/* Import: Ablage */
.dt-drop {
display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
border: 2px dashed var(--q-linie); border-radius: var(--radius-lg); background: var(--q-highlight-4);
padding: 34px 20px;
transition: border-color var(--dur-fast) var(--ease-std), background var(--dur-fast) var(--ease-std);
}
.dt-drop.dragover { border-color: var(--q-highlight-2); background: #EAF0F5; }
.dt-drop-text { font-family: var(--font-display); font-size: 0.9375rem; font-weight: var(--w-bold); color: var(--q-dark); }
/* Import: Vorschau */
.dt-preview { display: flex; flex-direction: column; gap: 14px; border: 1px solid var(--q-bright); border-radius: var(--radius-lg); padding: 18px; background: var(--q-white); }
.dt-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dt-file-name { font-family: var(--font-display); font-weight: var(--w-bold); color: var(--q-dark); font-size: 0.9375rem; }
.dt-file-fmt { margin-left: 10px; font-size: 0.6875rem; font-weight: var(--w-bold); font-family: var(--font-mono); color: var(--q-highlight-3-text); background: var(--q-highlight-4); border-radius: var(--radius-pill); padding: 2px 9px; }
.dt-warn { display: flex; align-items: center; gap: 8px; font-size: 0.78125rem; color: #8a6a00; background: var(--status-warn-soft, #FBF3DD); border-radius: var(--radius-sm); padding: 9px 12px; }
.dt-warn .ic { flex: 0 0 auto; opacity: 0.7; }
.dt-map-list { display: flex; flex-direction: column; gap: 8px; }
.dt-map-row { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border: 1px solid var(--q-bright); border-radius: var(--radius-sm); }
.dt-map-row.unset { border-style: dashed; opacity: 0.75; }
.dt-map-select { flex: 1; min-width: 0; }
.dt-tag { font-size: 0.6875rem; font-weight: var(--w-bold); border-radius: var(--radius-pill); padding: 3px 10px; background: var(--q-bright); color: var(--q-medium); white-space: nowrap; }
.dt-tag.ok { background: var(--status-ok-soft, #E4F0D6); color: #5A8516; }
.dt-tag.warn { background: var(--status-warn-soft, #FBF3DD); color: #8a6a00; }
/* Import: Modus */
.dt-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dt-mode {
display: flex; flex-direction: column; gap: 5px; text-align: left; cursor: pointer;
border: 1.5px solid var(--q-bright); border-radius: var(--radius-md); background: var(--q-white); padding: 12px 14px;
transition: border-color var(--dur-fast) var(--ease-std), background var(--dur-fast) var(--ease-std);
}
.dt-mode:hover { border-color: var(--q-linie); }
.dt-mode.active { border-color: var(--q-highlight-2); background: #EAF0F5; }
.dt-mode.danger.active { border-color: #C04848; background: #F7ECEC; }
.dt-mode-name { font-size: 0.84375rem; font-weight: var(--w-bold); color: var(--q-dark); }
.dt-mode.danger.active .dt-mode-name { color: var(--danger-text); }
.dt-mode-sub { font-size: 0.71875rem; line-height: 1.45; color: var(--q-medium); }
/* Import: Ergebnis */
.dt-result {
display: flex; align-items: center; gap: 9px; font-size: 0.8125rem; color: #5A8516;
background: var(--status-ok-soft, #E4F0D6); border-radius: var(--radius-md); padding: 12px 16px;
}
.dt-result .ic { filter: none; flex: 0 0 auto; }
.dt-result b { font-weight: var(--w-bold); }
@media (max-width: 720px) {
.dt-formats, .dt-modes { grid-template-columns: 1fr; }
.dt-ent-list { grid-template-columns: minmax(0, 1fr); } /* T-249: 17 px Überlauf bei 390 px */
}
/* ── Vorhaben (logische Klammer) ─────────────────────────────────────────── */
.vh-typ-badge {
display: inline-flex; align-items: center; gap: 7px;
padding: 5px 12px; border-radius: 999px;
background: rgba(198, 211, 28, 0.16); color: var(--q-highlight-2);
font-size: 0.75rem; font-weight: var(--w-bold); white-space: nowrap;
font-family: var(--font-display);
}
.vh-typ-badge.vh-typ-sm { padding: 3px 10px; font-size: 0.6875rem; }
/* "Teil von"-Streifen auf Detailansichten */
.vh-badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.vh-badges-label {
font-size: 0.625rem; letter-spacing: var(--tracking-wide, 0.1em); text-transform: uppercase;
font-weight: var(--w-bold); color: var(--q-medium);
}
.vh-badge-chip {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 12px; border-radius: 999px;
border: 1px solid var(--divider); background: var(--surface, #fff);
cursor: pointer; font-size: 0.78125rem; color: var(--q-dark);
border-left: 3px solid var(--q-highlight-1);
font-family: var(--font-sans);
transition: border-color var(--dur-fast) var(--ease-std), background var(--dur-fast) var(--ease-std);
}
.vh-badge-chip:hover { border-color: var(--q-linie); background: var(--surface-soft); }
.vh-badge-chip .vh-badge-typ { font-weight: var(--w-bold); color: var(--q-highlight-2); }
.vh-badge-chip .vh-badge-title { max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Die Karte „Zusammensetzung" ist mit T-080 entfallen — „Verbundene Elemente"
(.zuord-conn) sagt dasselbe und mehr. Ihre Klassen `.vh-compo*` sind damit
ebenfalls weg; `.sp-stat-sub` bleibt, es steht in der Statuskachel. */
/* Farbmarker links am Mitglieder-Listeneintrag (ohne Ampel) */
.vh-line-accent { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
/* ── Mittelbar erreichbare Inhalte eines Vorhabens (T-069) ─────────────────
Sie stehen im Reiter „Inhalte" neben den Zuordnungen und müssen von diesen
unterscheidbar sein — sonst behauptet die Liste eine Pflege, die es nicht
gibt. Unterschieden wird über ein Abzeichen mit der Herkunft, nicht über
Ausgrauen: Der Eintrag ist vollwertig erreichbar, nur eben nicht zugeordnet. */
.vh-indirekt-badge {
display: inline-flex; align-items: center; gap: 5px; vertical-align: middle;
margin-left: 8px; padding: 2px 9px 2px 7px; border-radius: 999px;
background: #E4F3F5; color: #0E7E8C;
font-size: 0.65625rem; font-weight: var(--w-bold); line-height: 1.5; letter-spacing: 0;
/* Der Weg kann mehrere Glieder haben (T-076). Gekürzt statt umgebrochen: In
einer Tabellenzeile risse ein zweizeiliges Abzeichen die Zeilenhöhe auf.
Die vollständige Angabe steht im `title`. */
white-space: nowrap; max-width: 34ch; overflow: hidden; text-overflow: ellipsis;
}
.vh-indirekt-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--q-highlight-3); flex: none; }
.file-name-cell .vh-indirekt-badge { margin-left: 6px; }
/* Ein zurückhaltender Strich links markiert die Zeile auch dort, wo das
Abzeichen umbricht oder abgeschnitten wird. */
.topic-line.vh-line-indirekt { border-left: 2px solid var(--divider); padding-left: 6px; }
/* Anteil der direkten Zuordnungen in der Statuskachel „Inhalte" — dort neben
einer Zahl in Anzeigeschrift, deshalb ausdrücklich zurückgesetzt auf Größe,
Schnitt und Schriftfamilie des Fließtexts. */
.sp-detail-head .sp-stat .val .sp-stat-sub {
font-family: var(--font-sans);
font-size: 0.71875rem; font-weight: var(--w-regular);
color: var(--q-medium);
}
/* ── Umfangsleiste unter der Reiterleiste (T-080) ──────────────────────────
**Eine** Leiste je Ansicht, nicht eine je Reiter: Die Wahl gilt für alle
Reiter, und ein Schalter, der reiterweise verschwindet, sieht wie ein Fehler
aus. Der Satz daneben nennt, worauf sich die Zahlen beziehen — ohne ihn ist
„Alles (28)" eine Zahl ohne Bezugsgröße. */
.zuord-scope {
display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
margin: 0 0 18px; padding: 12px 16px; border-radius: 18px;
background: var(--q-highlight-4); border: 1px solid var(--q-bright);
}
.zuord-scope-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.zuord-scope-label {
font-size: 0.6875rem; letter-spacing: var(--tracking-xwide); text-transform: uppercase;
font-weight: var(--w-bold); color: var(--q-dark);
}
.zuord-scope-text .muted { font-size: 0.75rem; }
/* ── Übersicht: verbundene Elemente je Art (T-080) ─────────────────────────
Beantwortet die Steuerungsfrage „wo gibt es eine Betroffenheit?" in einem
Blick: je Art die Gesamtzahl und die Aufteilung in unmittelbar und mittelbar.
Jede Zeile führt in den zugehörigen Reiter. */
.zuord-conn { display: flex; flex-direction: column; gap: 2px; }
.zuord-conn-row {
display: grid; grid-template-columns: 26px 1fr auto auto; align-items: center; gap: 10px;
width: 100%; padding: 9px 8px; border: 0; border-radius: 12px; background: transparent;
text-align: left; cursor: pointer; font: inherit; color: var(--q-dark);
transition: background var(--dur-fast) var(--ease-std);
}
.zuord-conn-row:hover { background: var(--surface-soft); }
.zuord-conn-icon { display: inline-flex; justify-content: center; }
.zuord-conn-label { font-size: 0.8125rem; font-weight: var(--w-regular); }
.zuord-conn-split { font-size: 0.6875rem; color: var(--q-medium); }
.zuord-conn-count {
font-size: 0.9375rem; font-weight: var(--w-bold); font-family: var(--font-display);
min-width: 2ch; text-align: right;
}
/* ── Beteiligte aus den Inhalten (T-071, Gestalt aus T-080) ────────────────
Weiterhin als abgeleitete Angabe erkennbar — jetzt über eine eigene Fläche
statt über einen gestrichelten Rahmen, und waagrecht scrollend statt
umbrechend: Bei vielen Beteiligten wuchs der Block sonst über die halbe
Übersicht. */
.vh-beteiligte { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.vh-beteiligt {
display: flex; align-items: flex-start; gap: 9px; flex: none; max-width: 260px;
padding: 9px 12px; border-radius: 16px;
background: var(--q-highlight-4); border: 1px solid var(--q-bright);
}
.vh-beteiligt > .avatar, .vh-beteiligt > .avatar-sm, .vh-beteiligt > span:first-child { flex: none; }
/* Als Schaltfläche (T-199): dieselbe Kachel, nur anklickbar. Die Textausrichtung
muss ausdrücklich gesetzt werden — ein `button` zentriert von sich aus. */
.vh-beteiligt-btn { text-align: left; font: inherit; cursor: pointer; }
.vh-beteiligt-btn:hover { border-color: var(--q-highlight-3); }
.vh-beteiligt-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.vh-beteiligt-meta { display: flex; flex-direction: column; min-width: 0; }
.vh-beteiligt-name { font-size: 0.78125rem; font-weight: var(--w-bold); color: var(--q-dark); }
.vh-beteiligt-wege { font-size: 0.65625rem; line-height: 1.45; color: var(--q-medium); }
/* Umschalter Themen/Schwerpunkte/Vorhaben im Agenda-Popover (Besprechungsmodus) */
.agenda-add-modes { display: flex; gap: 4px; padding: 10px 14px 0; }
.agenda-add-modes button {
flex: 1; border: 1px solid var(--divider); background: var(--surface, #fff);
border-radius: 8px; padding: 5px 6px; font-size: 0.71875rem; font-weight: var(--w-bold);
color: var(--q-medium); cursor: pointer; font-family: var(--font-sans);
}
.agenda-add-modes button.active { background: var(--q-highlight-2); border-color: var(--q-highlight-2); color: #fff; }
.status-mode-tag.manual { color: var(--q-medium); background: var(--surface-soft); }
/* ── Barrierefreiheit: Hilfsklassen (T-115) ────────────────────────────────
Zwei Bausteine, die im Projekt bisher fehlten und deshalb an mehreren
Befunden gleichzeitig hingen (A11Y-012, A11Y-013, A11Y-016, A11Y-019).
`.nur-hilfstechnik` blendet Text visuell aus, laesst ihn aber im
Zugaenglichkeitsbaum stehen — die uebliche Loesung fuer Beschriftungen, die
die Oberflaeche selbst nicht braucht, weil ein Symbol ihre Stelle einnimmt.
`display:none` und `visibility:hidden` taugen dafuer nicht: Sie nehmen den
Text auch der Hilfstechnik. */
.nur-hilfstechnik {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%);
white-space: nowrap; border: 0;
}
/* Sprunglink: sichtbar erst bei Tastaturfokus. Ohne ihn stehen 13 Stopps vor
dem Inhalt jeder Ansicht (A11Y-012). */
.sprunglink {
position: absolute; left: 8px; top: -60px; z-index: 2000;
background: var(--q-highlight-2); color: #fff;
padding: 10px 16px; border-radius: 8px;
font-family: var(--font-sans); font-size: 0.875rem; font-weight: var(--w-bold);
text-decoration: none;
transition: top 120ms ease;
}
.sprunglink:focus {
top: 8px;
outline: 2px solid var(--q-dark); outline-offset: 2px;
}
/* Oeffner einer Listenzeile (T-116, Befund A11Y-002): sieht aus wie der
bisherige Text, verhaelt sich wie eine Schaltflaeche. Der Fokusring folgt
der Konvention, die .kpi-link und .ms-tabs button schon verwenden. */
.zeilen-oeffner {
display: block; width: 100%; text-align: left;
background: none; border: 0; padding: 0; margin: 0;
font: inherit; color: inherit; cursor: pointer;
}
.zeilen-oeffner:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* ── Statuspunkt: Form zusaetzlich zur Farbe (T-117, Befund A11Y-007) ──────
Der Punkt unterschied fuenf Zustaende allein ueber den Farbwert. Gemessen
ist das engste Paar bei Deuteranopie nicht Gruen/Grau, wie der Befund
annahm, sondern **Gruen/Rot** (Farbabstand 33 von 255) -- ausgerechnet
"Im Plan" gegen "Kritisch", die folgenreichste Unterscheidung der Anwendung.
Die Formen sind so gewaehlt, dass sie auch ohne Farbe eine Rangfolge
behalten: je dringlicher, desto mehr Masse und Kontur.
Im Plan ● gefuellter Kreis
Beobachten ▲ gefuelltes Dreieck (Warnkonvention)
Kritisch ◉ gefuellter Kreis mit kraeftigem Ring
Vorbereitung ○ offener Kreis
Abgeschlossen ◌ offener Kreis, gestrichelt
Die Massnahmen-Zustaende teilen sich die Palette und erben die Formen:
offen = abgeschlossen-Form, in-arbeit = Dreieck, erledigt = voller Kreis. */
/* Beobachten / in Arbeit — Dreieck. Der schwache Ring des Kreises passt
dazu nicht und wuerde als abgeschnittener Bogen erscheinen. */
.dot.gelb, .dot.in-arbeit {
border-radius: 0;
clip-path: polygon(50% 4%, 100% 100%, 0 100%);
}
.dot.gelb::after, .dot.in-arbeit::after { content: none; }
/* Kritisch — der Ring ist hier nicht Zierde, sondern das Unterscheidungs-
merkmal gegenueber Gruen. Deshalb deckend statt 0.15.
Der Abstand ist -4px und nicht -3px, damit Ring und Punkt auch bei
Bildschirmskalierung konzentrisch bleiben: der Browser rundet jede
gemalte Flaeche auf ganze Geraetepixel. Bei 150 % ergaebe -3px einen
halben Geraetepixel (3 x 1,5), der Ring wanderte um ein halbes Pixel
nach unten rechts und der Spalt war oben links duenner als unten
rechts. -4px ist bei 125, 150, 175 und 200 % ganzzahlig, damit runden
Ring und Punkt gleich. */
.dot.rot::after { opacity: 0.85; border-width: 2px; inset: -4px; }
/* Vorbereitung und Abgeschlossen / offen — offene Kreise. box-sizing haelt
den Aussendurchmesser bei den 10 px der uebrigen Punkte. */
.dot.blau, .dot.grau, .dot.offen {
background: transparent;
border: 2px solid currentColor;
box-sizing: border-box;
}
.dot.grau, .dot.offen { border-style: dashed; }
/* Der zusaetzliche Aussenring wuerde neben der eigenen Kontur nur flimmern. */
.dot.blau::after, .dot.grau::after, .dot.offen::after { content: none; }
/* Bei 8 px traegt eine gestrichelte 2-px-Kontur nicht mehr — dort wird der
offene Kreis duenner, aber durchgezogen, und bleibt gegen den gefuellten
trotzdem klar unterscheidbar. */
.dot-sm.grau, .dot-sm.offen { border-width: 1.5px; border-style: solid; }
.dot-sm.blau { border-width: 1.5px; }
/* ── Risikomatrix: Filterflaeche und Chips entflochten (T-119, A11Y-017) ───
Der Filter ist eine eigene Schaltflaeche, die die ganze Zelle bedeckt, aber
nichts von sich zeigt -- sichtbar bleibt die Matrix, wie sie war. Chips und
der Leerpunkt bekommen `position: relative`, damit sie ueber ihr liegen:
Ein absolut gesetztes Element zeichnet sonst ueber seine statischen
Geschwister, gleich in welcher Reihenfolge sie im DOM stehen -- die Chips
waeren unklickbar. */
.rmx-cell-filter {
position: absolute; inset: 0;
width: 100%; height: 100%;
background: none; border: 0; padding: 0; margin: 0;
cursor: pointer;
}
.rmx-cell-filter:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -3px; }
.rmx-chip, .rmx-empty { position: relative; }
/* ── Tabellenkarten scrollen, statt zu beschneiden (T-120, Befund A11Y-006) ─
`overflow:hidden` stand an 15 Tabellenkarten, damit der abgerundete Rand die
Tabelle sauber beschneidet. Es beschnitt aber auch den Inhalt: Bei 1024 px
lag die Aktionsspalte der Massnahmen bei x = 1006…1094, ausserhalb des
Fensters, ohne Bildlaufleiste -- "Bearbeiten" und "Loeschen" waren mit der
Maus nicht erreichbar. Die Rundung bleibt erhalten, weil `overflow-x: auto`
in der Waagrechten genauso beschneidet; nur ist der Rest jetzt erreichbar.
Vorlage ist .zustaendigkeiten_matrix_wrap, das es schon richtig macht. */
.tabellen-karte { overflow-x: auto; }
/* Der Rahmen wird mit tabindex="0" versehen, sobald er tatsaechlich scrollt
(siehe machRollbereicheErreichbar) -- dann braucht er auch einen Fokusring. */
.tabellen-karte:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* ══ Schmale Fenster: nichts wird mehr abgeschnitten (T-120) ═══════════════
Dieser Block steht bewusst am Ende der Datei. Der Befund A11Y-005 war in
erster Linie ein Lehrstueck ueber Reihenfolge: `.topbar .search { width:
130px }` in einer Medienabfrage bei Zeile 3837 wirkte nie, weil `.gsearch
.search { width: 320px }` bei Zeile 5359 dieselbe Spezifitaet hat und
spaeter steht. Am Dateiende gewinnt die Absicht gegen den Zufall der
Reihenfolge. */
/* ── A11Y-005: Kopfleiste bricht um, statt zu ueberlaufen ──────────────────
Die Kopfleiste war eine einzeilige Flexbox ohne Umbruch; ihre Teile
schrumpften nicht, sondern wurden nach rechts aus dem Fenster geschoben.
Weil die Seite nicht waagrecht scrollt (scrollWidth == clientWidth == 320),
waren sie schlicht weg: bei 320 px sechs von acht Bedienelementen, das
letzte bei x = 634 -- fast doppelte Fensterbreite.
Die Suche bekam damals eine eigene Zeile, die Knoepfe behielten ihre 36 px
Antippflaeche. Ein Ueberlaufmenue war als die andere Loesung benannt — „eine
neue Bedienidee". Mit T-278 ist sie beauftragt und umgesetzt: Die
Kopfleiste bleibt einzeilig, was keinen Platz findet, steht hinter „⋯",
die Suche ist unter 760 px eine Lupe (components/ueberlauf.css,
ueberlauf.js). Verschwinden tut weiterhin nichts — der Befund bleibt
erfuellt, nur auf anderem Weg. Der Umbruchblock dieser Stelle ist damit
entfallen. */
/* Auch auf breiteren Fenstern darf der Brotkrumenpfad die Knoepfe nicht
hinausschieben. Der Befund nennt genau diesen Fall: bei "Zustaendigkeiten"
lag der Vollbildknopf bei 1024 px auf 1019…1049. */
.topbar .breadcrumb { min-width: 0; }
.gsearch { min-width: 0; }
.gsearch .search { max-width: 100%; }
/* ── A11Y-022: Kennzahlkacheln einspaltig unterhalb 420 px ─────────────────
Bei rund 140 px Spaltenbreite brach der Text mitten im Wort ("BEOBACH /
TUNGSBE / DUERFTIG") und die grosse Zahl ueberlagerte den Beschreibungstext.
WCAG 1.4.10 nennt 320 px ausdruecklich. `hyphens: auto` greift, weil die
Seite `lang="de-AT"` traegt -- ohne Sprachauszeichnung wuerde es nichts tun. */
@media (max-width: 420px) {
.kpi-row { grid-template-columns: 1fr; }
.kpi-label, .kpi-sub { hyphens: auto; overflow-wrap: break-word; }
}
/* Gesperrte Ablageflaeche (T-122, Befund A11Y-023): Sie sah weiter anklickbar
aus, obwohl sie nichts tut. */
.file-drop-gesperrt { cursor: default; }
/* ── Fokusbild der Texteingaben (A11Y-025; Ring T-148/T-150, Schein T-178) ─
**Die eine Stelle, an der das Fokusbild der Eingabefelder steht.**
Herkunft: Von 70 tabbaren Elementen des Lagebilds hatten drei weder Kontur
noch Schatten am fokussierten Element selbst -- der Ersatz war eine
1-px-Linie am Rahmen mit 2,97:1 Kontrast, an der Grenze des Erkennbaren,
und ein Grundwechsel von #F1F2F2 auf #FFFFFF mit 1,12:1, praktisch
unsichtbar. Seit T-148 steht hier ein eigener Ring.
**T-178 macht daraus einen Schein und aus zwoelf Regeln eine.** Zwei
Befunde fuehrten dahin:
*Erstens die abgesetzte Linie.* T-150 hatte `outline-offset: 2px` gesetzt;
zusammen mit dem Rahmenwechsel des Feldes ergab das zwei teal Linien mit
weissem Spalt dazwischen. Beanstandet. Die Begruendung von damals -- die
Absetzung sei die Hausform der Suchfelder -- war eine Aussage ueber den
Bestand, nicht ueber die Absicht: `docs/css/structure/toolbar.md` beschrieb
durchgehend `border-color` **plus Box-Shadow**, also den Schein, und T-150
hat die Doku nicht nachgezogen. `--shadow-focus` steht seit jeher in
`tokens.css`, uebernommen aus dem Referenzentwurf.
*Zweitens die vier Akzentfarben.* Ausgezaehlt trugen zwoelf Fokusregeln vier
verschiedene Farben (teal, limette, navy, `--q-linie`), und nur drei davon
ueberhaupt einen Ring -- alle Formularfelder in Dialogen und Einstellungen
zeigten im Fokus nichts als einen limetten Rahmen (1,65:1 auf Weiss). Der
Entwurf fuehrt `--q-highlight-3` ausdruecklich als Fokusfarbe
("petrol/teal -- headlines, focus") und `--focus-ring` zeigt darauf.
**Woran das Bild haengt, ist je Feld verschieden -- und das mit Absicht:**
Bei den Suchfeldern sitzt das `input` randlos in einer gestalteten Schale;
der Schein gehoert an die Schale, denn am `input` laege er innerhalb und
waere schmaler. Felder mit **eigenem** Rahmen tragen ihn selbst. Bis T-148
stand hier `.ai-input-row`, also die ganze Fusszeile der Schublade mit vier
fokussierbaren Elementen -- das Bild erschien deshalb auch beim Zahnrad,
beim Mikrofon und beim Senden-Knopf.
**Der durchsichtige `outline` ist kein Rest, sondern die Vorsorge:** Im
Modus mit erzwungenen Farben (Windows-Kontrastdesign) verwirft der Browser
jeden `box-shadow`. Ohne diese Zeile bliebe der Fokus dort unsichtbar --
ein System-Umriss tritt an die Stelle des durchsichtigen. */
/* ── Im Dialog ist die Fokusfarbe die Limette (T-216, nachgeschaerft T-218) ──
**Der Geltungsbereich ist `.modal`, und das ist gemessen:** 15 Fundstellen
dieser Klasse, alle Dialoge. Nicht `.modal-bg` -- die zweite Dialogebene der
Personenanlage haengt in `.person_anlegen_bg` und haette eine Bindung daran
nicht mitbekommen.
Ueberschrieben werden nur die **Tokens**. Jede Regel, die `--focus-ring`
oder `--shadow-focus` liest, folgt damit von selbst; keine Fokusregel muss
den Dialog kennen, und draussen aendert sich nichts. Das war die eine
Bedingung des Auftrags: „innerhalb der Dialoge ... einheitlich", waehrend
globale Suche, Assistenteneingabe und Toolbar-Suchfelder ausdruecklich
petrol bleiben duerfen.
**Eine Farbe, und der Schein traegt sie mit (T-218).** T-216 hatte aussen
eine 1 px starke Navy-Kontur gelegt, weil die Limette den geforderten
Kontrast nicht traegt: gerechnet gegen Weiss 1,65:1 gegenueber 2,97:1 des
Petrols und 13,36:1 des Navy; WCAG 1.4.11 verlangt 3:1 fuer
Zustandsindikatoren. Der Auftraggeber hat das Ergebnis gesehen und den
Farbwechsel ins Blaue abgelehnt -- der Schein soll ein Ausstrahlen des
Rahmens sein, in dessen Farbe, nach aussen ausfadend.
**Die Abwaegung ist damit dieselbe wie in T-144:** Gestaltung gegen
Kontrast, entschieden zugunsten der Gestaltung, ausdruecklich und in
Kenntnis der Zahl. Festgehalten als Nachtrag zu A11Y-025 in
`qa/2026-08-21/befunde-barrierefreiheit.md`, damit eine spaetere Pruefung
die Stelle findet und die Entscheidung daneben liest.
**Zuruecknehmbar an einer Stelle:** `--focus-kontur` auf `--q-highlight-2`
setzen, dann ist die Kontur aus T-216 wieder da. Der Token bleibt deshalb
bestehen und wird nicht entfernt -- dieselbe Erwaegung wie bei
`--q-highlight-3-text` in T-144. */
.modal {
--focus-ring: var(--q-highlight-1);
/* `--focus-kontur` wird hier **nicht** gesetzt und bleibt damit bei der
Vorgabe `transparent` aus tokens.css -- die Navy-Kontur aus T-216 ist
zurueckgenommen. Die Lage bleibt in der Sammelregel stehen: Sie ist der
eine Hebel, mit dem die Kontur zurueckkommt, ohne eine Regel zu aendern.
Der solide Rand ist damit 3 px wie ausserhalb der Dialoge (2 px Rahmen
plus 1 px erste Schattenlage) und nicht 4 px. */
/* Derselbe Schein wie draussen, nur in der Dialogfarbe. Seit T-221 sind die
beiden Werte **bauformgleich** und unterscheiden sich in genau einem
Bestandteil: `--q-highlight-1` statt `--q-highlight-3`. Wer die Form
aendert, aendert sie an zwei Stellen -- hier und in `tokens.css`. */
--shadow-focus: 0 0 6px 1px color-mix(in srgb, var(--q-highlight-1) 70%, transparent);
}
/* Schaltflaechen im Dialog wechseln die **Flaeche**, nicht den Rahmen (T-218).
Vorher trugen sie eine limette Kontur; beanstandet wurde der Farbwechsel als
„heftig" und „zu bunt" -- ein Ring steht neben der eigenen Fuellung und dem
eigenen Rahmen des Knopfes, also bis zu drei Farben auf einem Element.
Das Farbpaar ist **nicht neu**: Fuellung `--q-highlight-1`, Schrift
`--q-highlight-2`. Das ist Zeichen fuer Zeichen `.btn-accent`, eine seit
jeher vorhandene Knopfvariante. Der Rahmen wechselt mit auf dieselbe Farbe
-- genau die Bedingung der Beanstandung („dass der Rahmen eine andere Farbe
hat als der Hintergrund").
Gemessen trugen vor T-216 elf von fuenfzehn Bauformen des Dialogs
ueberhaupt kein hauseigenes Fokusbild, sondern den `outline: auto` des
Browsers. Eine Regel und nicht elf: Die Faelle sind elf, die Aussage ist
eine, und die zwoelfte Bauform, die morgen in einen Dialog kommt, bekaeme
sie sonst nicht.
**Die Reihenfolge ist hier die Mechanik:** Der Block steht bewusst *vor* der
Sammelregel der Felder darunter. Beide haben dieselbe Spezifitaet (0,2,0);
die Felder gewinnen ueber die Quellreihenfolge und behalten ihr eigenes
Bild.
**Der Ausschluss ist die Abgrenzung zu den Eingabefeldern.** `input`,
`textarea`, `select` und `.cbx-trigger` tragen einen eigenen Rahmen und
bekommen ihr Bild von der Sammelregel darunter. Ohne den Ausschluss bekaeme
ein fokussiertes Textfeld hier eine limette Flaeche -- die Sammelregel setzt
Rahmen und Schatten, aber keinen Hintergrund, und koennte ihn deshalb nicht
zuruecknehmen. */
.modal :focus-visible:not(input):not(textarea):not(select):not(.cbx-trigger) {
outline: none;
background: var(--q-highlight-1);
border-color: var(--q-highlight-1);
color: var(--q-highlight-2);
box-shadow: var(--shadow-focus);
}
/* Das Sinnbild eines gefuellten Knopfes ist ueber `filter` weiss gerechnet
(`.btn-primary .ic`). Auf der limetten Flaeche waere es unsichtbar; der
Filter wird deshalb zurueckgenommen, sobald der Knopf den Fokus traegt. */
.modal .btn-primary:focus-visible .ic,
.modal .btn-danger:focus-visible .ic { filter: none; }
/* Ankreuz- und Auswahlkaestchen sind weder Feld noch Flaeche: Sie zeichnet der
Browser selbst, und ein Flaechenwechsel ginge darin unter. Sie bekommen
deshalb den Schein allein -- dieselbe Farbe, dieselbe Weichzeichnung wie bei
den Feldern. */
.modal input[type="checkbox"]:focus-visible,
.modal input[type="radio"]:focus-visible {
outline: none;
box-shadow: var(--shadow-focus);
}
/* **Das Suchfeld im Klappfach bekommt gar nichts (T-218).**
`.cbx-search-input` sitzt randlos in einer getoenten Zeile, die selbst schon
sagt „hier wird gesucht"; der Ausloeser darueber traegt bereits die
Fokusfarbe, und das Fach ist beim Oeffnen ohnehin die einzige Stelle, an der
getippt werden kann. Ein zweites Bild darin war eine Uebererfuellung und ist
als solche gemeldet worden („das hat mir die ganze Optik zusammengehauen").
`:focus` und nicht nur `:focus-visible`: Das Feld bekommt den Fokus beim
Oeffnen per Skript, also auch nach einem Mausklick. */
.cbx-search-input:focus,
.cbx-search-input:focus-visible {
outline: none;
box-shadow: none;
}
.topbar .search:focus-within,
.tb-search:focus-within,
/* Das Suchfeld im Filter-Klappfach (T-225) — randlos in einer Schale, also
traegt die Schale das Bild, wie bei den uebrigen Suchfeldern. */
.tb-pop-suche:focus-within,
.ai-input-row textarea:focus,
.form-input:focus,
.form-select:focus,
.form-textarea:focus,
.inline-input:focus,
.login-field input:focus,
.markfield textarea:focus,
.topic-note-edit:focus,
.storage-limit-input input:focus,
.tb-size-inputs input[type="number"]:focus,
.zs-rangesel select:focus,
/* Die Auswahlbox traegt einen eigenen 2-px-Rahmen und gehoert deshalb hierher
und nicht zur Sammelregel darueber (T-216). `:focus` und `.open` stehen
nebeneinander, damit das Bild dasselbe ist, ob mit der Maus geoeffnet oder
mit der Tastatur angesteuert -- bis T-216 hatte sie **nur** im Zustand
`.open` einen limetten Rahmen und beim Tabben gar nichts als den
Browserumriss. Genau dieser limette Rahmen war der, den der Auftraggeber
als den besseren bezeichnet hat. */
.cbx-trigger:focus,
.cbx-trigger.open {
border-color: var(--focus-ring);
/* Drei Lagen, und keine ist Zier. Die erste: Der Rahmen des Feldes ist 1 px.
Der Ring darauf macht die **solide** Kontur wieder 2 px breit -- so breit
wie der Ring, den A11Y-025 erzwungen hatte und den T-178 ersetzt. Der
Schein allein traegt das nicht: gemessen 1,44:1 gegen Weiss gegenueber
2,97:1 des vollen Teal. Er liegt bewusst direkt am Rahmen, ohne Versatz --
der weisse Spalt war die Beanstandung.
Die zweite (T-216): die kontrasttragende Kontur. Draussen ist sie
durchsichtig und aendert nichts; im Dialog ist sie navy und traegt die
3:1, die die Limette nicht hat.
Die dritte: der weiche Schein -- draussen der aus T-178, im Dialog
durchsichtig. */
box-shadow: 0 0 0 1px var(--focus-ring), 0 0 0 2px var(--focus-kontur), var(--shadow-focus);
outline: 2px solid transparent;
outline-offset: 0;
}
/* Das Feld der Speichergrenze traegt seine Einheit als angesetzten Kasten;
beide zusammen sehen aus wie ein Feld. Der Rahmen der Einheit folgt deshalb
mit -- der Schein liegt am `input` und deckt die Naht ohnehin. */
.storage-limit-input input:focus + .storage-limit-unit { border-color: var(--focus-ring); }
/* ── Sperre bleibt sichtbar, auch ohne `disabled` (T-122, Befund A11Y-024) ──
Die Rechtesperre setzt seit T-122 `aria-disabled` statt `disabled`, damit
das Feld fokussierbar bleibt und seinen Wert weiter preisgibt. Die
vorhandenen Regeln haengen aber an `:disabled` — ohne diese Ergaenzung waere
die Sperre unsichtbar geworden, und ein Bedienelement, das benutzbar
aussieht und nichts tut, ist schlechter als eines, das ausgegraut ist. */
.status-pick-opt[aria-disabled="true"] { cursor: default; }
.status-pick-opt[aria-disabled="true"]:not(.active) { opacity: 0.4; }
.status-pick-opt[aria-disabled="true"]:hover { border-color: var(--divider); }
.status-pick-opt[aria-disabled="true"].active { border-color: var(--q-linie); }
.status-pick-opt[aria-disabled="true"].active:hover { border-color: var(--q-linie); }
select[aria-disabled="true"],
textarea[aria-disabled="true"] { opacity: 0.7; cursor: default; }
/* ── Bewegungsreduzierung als allgemeine Regel (T-123, Befund A11Y-028) ────
Die Absicht war erkennbar: sechs Bloecke schalten einzelne Animationen ab --
Tippanzeige, Mikrofonpunkt, Pegelwelle, Aufnahmepunkt. Ausgezaehlt stehen
dem aber 13 @keyframes, 22 animation- und 159 transition-Deklarationen
gegenueber. Nicht abgedeckt waren unter anderem die Einblendung der Toasts
und die Ein- und Ausfahrbewegung von Schubladen und Detailpanel -- gerade
die grossflaechigen Bewegungen, die bei vestibulaerer Empfindlichkeit
Beschwerden ausloesen.
Deshalb eine abschliessende Regel statt weiterer Einzelfaelle. `0.01ms`
statt `0`, damit `transitionend`- und `animationend`-Ereignisse weiterhin
feuern: Code, der auf das Ende eines Uebergangs wartet, bliebe bei `0`
stehen. Die Bewegung ist damit praktisch aus, die Ablaeufe bleiben heil. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* Schliessen-Schaltflaeche der Meldungen (T-123, Befund A11Y-029). */
.toast-close {
margin-left: auto;
background: none; border: 0; padding: 2px 4px;
font-size: 0.8125rem; line-height: 1;
color: var(--q-medium); cursor: pointer;
flex-shrink: 0;
}
.toast-close:hover { color: var(--q-dark); }
.toast-close:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* Berührungsziel des Zeilenöffners (T-124, Befund A11Y-033).
Bei einzeiligem Titel mass er 228 x 20 px; WCAG 2.2 verlangt 24 x 24. Ohne
Layoutwirkung, weil die Zeilenhoehe ohnehin darueber liegt -- der Knopf
fuellt nur den Platz aus, den die Zelle schon hat. */
.zeilen-oeffner { min-height: 24px; padding-block: 2px; }
/* Die Risikomatrix rollt jetzt (siehe risiken.js). Ohne Mindestbreite wuerde
sie stattdessen bis zur Unlesbarkeit schrumpfen -- neun Zellen auf 297 px
waeren 99 px je Zelle. */
.rmx.tabellen-karte { min-width: 0; }
.rmx.tabellen-karte .rmx-plot { min-width: 320px; }
/* ══ Navigation und Marke auf schmalen Anzeigen (T-247) ════════════════════
*
* Zwei Wuensche des Auftraggebers, beide unterhalb des 820er-Umbruchs:
*
* 1. Die einfahrende Seitenleiste soll nicht die einzige Fassung bleiben.
* Waehlbar wird eine waagrechte SYMBOLLEISTE, wie sie die
* Nachbaranwendung Balance unterhalb ihres Umbruchs fuehrt (BAL-191).
* Welche gilt, steht unter Einstellungen > Allgemeines > Darstellung und
* kommt als Klasse `nav-leiste` an `#app` — gesetzt schon beim
* Ausliefern der Seite (`index.php`), damit nichts umspringt.
*
* 2. Anwendungsname und Bluete waren auf schmalen Anzeigen NIRGENDS zu
* sehen. Gemessen bei 390 px lag `.sidebar-brand` bei x = -272 px,
* also vollstaendig ausserhalb des Bildes — sie steht ausschliesslich im
* Kopf der Seitenleiste, und die ist dort auf `translateX(-286px)`.
* Die Marke bekommt deshalb ihren Platz in der KOPFLEISTE, dort wo
* bisher der Bereichsname stand; der Brotkrumenpfad rueckt in eine
* eigene Zeile darunter.
*
* WARUM AM ENDE DER DATEI UND NICHT IM 820er-BLOCK WEITER OBEN. Die Regeln
* hier NEHMEN Regeln ZURUECK, die weiter oben stehen — den 820er-Block
* (Seitenleiste ausser Fluss), den 700er-Block (Brotkrumenpfad `flex: 1 1
* auto`) und den 600er-Block. Sie muessen deshalb nach ihnen kommen. Eine
* hoehere Spezifitaet statt der Reihenfolge waere die zerbrechlichere Wahl:
* Sie verdeckt den Konflikt, statt ihn aufzuloesen (die Lehre aus T-218).
*
* WARUM KEINE ZWEITE NAVIGATION. Die Symbolleiste ist dieselbe `.sidebar`
* mit denselben `.nav-item`. Eine zweite waere eine parallele Struktur fuer
* dieselbe Rolle (ucs.md §25.4), und ihre Eintraege kaemen aus derselben
* Stelle in `index.php`. Deshalb stehen unten Ruecknahmen und keine zweite
* Leiste.
*/
/* ── Die Marke in der Kopfleiste ────────────────────────────────────────── */
/* Oberhalb des Umbruchs traegt die Seitenleiste die Marke wie bisher; ein
zweites Mal in der Kopfleiste waere sie dort doppelt. */
.topbar-brand { display: none; }
/* Seit T-313 ein Knopf zum Dashboard (index.php). Er soll aussehen wie die
Marke vorher — die Voreinstellungen des Browsers fuer `button` kommen weg;
dazu ein Fokusbild wie an den Knoepfen der Kopfleiste. */
.topbar-brand {
margin: 0; padding: 0; border: 0; background: none;
font: inherit; color: inherit; text-align: left;
border-radius: 8px; cursor: pointer;
}
.topbar-brand:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
/* Die Teile selbst sind dieselben wie in der Seitenleiste — deshalb dieselben
Klassen und dieselben Regeln. Der Selektor der Seitenleiste
(`.sidebar-brand .brand-name`, Block „Die Wort-Bild-Marke") ist um diesen zweiten Ort
erweitert worden, statt hier eine zweite Fassung anzulegen. Was hier steht,
ist nur, was sich UNTERSCHEIDET: die Groesse. */
@media (max-width: 820px) {
/* Dieselbe Wort-Bild-Marke wie in der Seitenleiste, kleiner (T-255): nur
die Masse stehen hier, der Aufbau kommt von dort. Gemessen und gewaehlt
fuer 390 px — neben Menueknopf und drei Bedienknoepfen.
Die Kopfleistenfassung ist eine Reihe ohne `.brand-lockup` und ohne
`.brand-text` (seit T-282 hat auch die Seitenleiste keine Unterzeile
mehr; hier fehlte sie schon immer — Begruendung in index.php).
Seit T-270 Signet · MISSION / CONTROL wie in der Seitenleiste, im
Verhaeltnis des Entwurfs (Signet zu Schrift 74 : 17). Die Schrift bleibt
auf den 8 px, die sie seit T-263 hat — kleiner sollte sie nicht werden;
daraus folgt das Signet mit 36 px. Die Marke wird damit schmaler als die
164,9 px der Quantiz-Fassung (gemessen, TASKS.md T-270), stellt also
keinen neuen Anspruch an eine Leiste, die bei 390 px schon voll ist.
Den Abstand zwischen Signet und Schriftzug (8 px, T-272) setzt die
gemeinsame Regel oben — er ist an beiden Orten derselbe. */
.topbar-brand {
display: flex;
align-items: center;
gap: var(--marke-abstand);
min-width: 0;
flex-shrink: 1;
--marke-signet: 36px;
--marke-schrift: 0.5rem;
--marke-zeilenabstand: 2px;
}
/* ── Der Brotkrumenpfad bleibt in der Zeile (T-278) ─────────────────────
*
* Von T-247 bis T-277 bekam er hier eine eigene, kleine Zeile unter Marke
* und Knoepfen (`flex: 1 0 100%`, `order: 4`, 0,75rem), und die Kopfleiste
* brach dafuer um. Beanstandet als „mit Zeilenumbruechen gespickt"; bei
* 390 px war die Kopfleiste damit 169 px hoch. Seit T-278 steht der Pfad
* in der einen Zeile: unter 760 px nur mit der aktuellen Ebene, die
* uebergeordneten hinter „⋯" (app.js, `brotkrumeHtml`), gekuerzt statt
* umgebrochen (components/ueberlauf.css). Mit Ort zeigt die Marke hier nur
* das Signet — der Name bliebe sonst neben dem Ort ohne Platz.
*/
.topbar.topbar-mit-ort .topbar-brand .brand-name { display: none; }
/* Im Lagebild besteht der Pfad nur aus dem Haussymbol — eine Zeile, die
nichts benennt und trotzdem Hoehe kostet. `.breadcrumb-leer` setzt
`render()` in app.js, wenn kein Ort darin steht. Eine Klasse und nicht
`:has()`: Der Zustand ist damit ablesbar und pruefbar. */
.topbar .breadcrumb.breadcrumb-leer { display: none; }
}
/* ══ Die waehlbare Symbolleiste ════════════════════════════════════════════
*
* Gilt nur mit BEIDEN Bedingungen: der Festlegung (`nav-leiste` an `#app`)
* UND einem schmalen Fenster. Oberhalb des Umbruchs steht die Seitenleiste
* ohnehin vollstaendig da; sie dort auf Symbole zu kuerzen waere eine
* Verkuerzung von etwas, das Platz hat.
*/
@media (max-width: 820px) {
/* `display: contents` an `.app-body` ist der Kern dieses Blocks.
*
* Gewuenscht ist die Reihenfolge Kopfleiste > Symbolleiste > Inhalt, wie
* in der Nachbaranwendung. Im Markup liegen Kopfleiste und Inhalt aber
* gemeinsam in `.app-body`, und die Seitenleiste ist deren Geschwister —
* `order` allein kann eine Leiste deshalb nicht ZWISCHEN zwei Kinder eines
* anderen Elements schieben.
*
* `display: contents` loest `.app-body` als Kasten auf: Kopfleiste und
* Inhalt werden zu unmittelbaren Kindern von `.app`, und damit greift
* `order` ueber alle drei. Die Alternative waere gewesen, die Leiste mit
* `position: fixed` unter eine Kopfleiste zu haengen, deren Hoehe je nach
* Ansicht zwischen 95 und 139 px schwankt — eine Wette auf einen Wert, der
* sich mit jedem Bedienelement aendert.
*
* `.app-body` traegt keine eigene Bedeutung (ein `div` ohne Rolle), es geht
* durch die Aufloesung also nichts verloren.
*/
.app.nav-leiste { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.app.nav-leiste .app-body { display: contents; }
.app.nav-leiste .topbar { order: 1; }
.app.nav-leiste .sidebar { order: 2; }
.app.nav-leiste .main { order: 3; flex: 1; min-height: 0; overflow-y: auto; }
/* Aus der Schublade wird eine Leiste. Jede Zeile hier nimmt genau eine
Zeile des 820er-Blocks zurueck. */
.app.nav-leiste .sidebar {
position: static;
transform: none;
width: auto;
height: auto;
flex-direction: row;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-right: 0;
border-bottom: 1px solid var(--divider);
box-shadow: none;
/* Die Leiste faehrt nicht, sie steht — eine Ueberblendung der Breite
beim Laden waere Bewegung ohne Anlass. */
transition: none;
/* Elf Eintraege zu je 48 px plus Fuss messen rund 590 px; bei 390 px
Fensterbreite ist etwa die Haelfte gleichzeitig zu sehen. Die Leiste
rollt deshalb waagrecht — der Hinweis darauf steht weiter unten. */
overflow-x: auto;
overflow-y: hidden;
flex-shrink: 0;
/* Auf einem Telefon liegt der Rollbalken als Überlagerung über dem Inhalt
und kostet nichts. Im schmalen Fenster eines Schreibtischbrowsers ist er
eine eigene Spur — gemessen 16 px, also fast ein Drittel der Leistenhöhe
für eine Anzeige, die der Verlauf am rechten Rand schon macht.
`thin` halbiert sie, ohne sie zu beseitigen: Ganz ohne Balken wäre nicht
mehr ablesbar, wie weit die Reihe schon gerollt ist. */
scrollbar-width: thin;
}
/* Was zur Schublade gehoert und in der Leiste nichts zu suchen hat.
Die Marke faellt hier weg, WEIL sie seit dieser Aufgabe in der
Kopfleiste steht — ohne diesen Ersatz waere das Ausblenden genau der
Fehler, den der Auftraggeber beanstandet hat. */
.app.nav-leiste .sidebar-brand,
.app.nav-leiste .nav-section-label,
.app.nav-leiste .sidebar-divider,
.app.nav-leiste .nav-collapse-toggle { display: none; }
/* Der Schalter der Schublade — es gibt keine mehr aufzuziehen. Der
Selektor traegt die Kennung, weil der 820er-Block sie ebenfalls ueber
die Kennung setzt (`#btnSidebar { display: grid }`). */
.app.nav-leiste #btnSidebar { display: none; }
.app.nav-leiste .sidebar-backdrop,
.app.nav-leiste .nav-backdrop { display: none !important; }
/* Die Eintragsliste wird eine Reihe. Kein eigener Rollbereich mehr: Es
rollt die Leiste als Ganzes, damit der Fuss daran haften kann. */
.app.nav-leiste .nav-scroll {
flex: 0 0 auto;
flex-direction: row;
align-items: center;
gap: 2px;
overflow: visible;
min-height: 0;
}
.app.nav-leiste .nav-item {
width: auto;
min-width: 48px;
justify-content: center;
gap: 0;
padding: 9px 6px;
flex-shrink: 0;
}
/* Die Beschriftung faellt weg — den Namen des Bedienelements traegt
`aria-label`, das `navSymbolNamenNachziehen()` in app.js setzt. Ohne ihn
waeren es elf Knoepfe ohne zugaenglichen Namen. */
.app.nav-leiste .nav-item .nav-label { display: none; }
/* Die fuenf Zaehler verschwaenden mit der Beschriftung ersatzlos. Sie
bleiben als Bildmarke am Symbol; `aria-hidden` traegt sie, weil der Name
die Zahl bereits nennt („Themen, 12") und sie sonst zweimal angesagt
wuerde. */
.app.nav-leiste .nav-item .nav-count {
position: absolute;
top: 1px; right: 2px;
margin: 0;
min-width: 15px;
height: 15px;
padding: 0 3px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.5625rem;
line-height: 1;
}
/* Der Fuss traegt die EINZIGE Abmeldestelle des Frontends
(`#btnSwitchUser`). Faellt er weg, gibt es unterhalb des Umbruchs
ueberhaupt keinen Weg mehr aus der Sitzung — derselbe Befund, den die
Nachbaranwendung als A11Y-022 gefuehrt hat. Er wandert deshalb ans Ende
der Reihe und bleibt dort stehen (`sticky`), auch wenn seitlich gerollt
wird. */
.app.nav-leiste .sidebar-footer {
margin: 0 0 0 auto;
position: sticky;
right: 0;
width: auto;
flex-shrink: 0;
/* 2 px statt der 12 px der Seitenleiste: Der Fuss ist dort ein Block
untereinander, hier ein Glied einer Reihe. Mit 12 px war er 44 px hoch
und damit das hoechste Element der Leiste — die ganze Leiste richtete
sich nach ihm, obwohl die Symbole nur 36 px brauchen (gemessen). */
padding: 2px 0 2px 8px;
background: var(--surface);
}
/* Der Name nimmt bei 390 px ein Drittel der Leiste. Das Kuerzel bleibt,
und den Namen des Bedienelements traegt sein `aria-label` — es steht seit
jeher im Markup („Benutzer wechseln / abmelden"). */
.app.nav-leiste .sidebar-footer .who { display: none; }
/* Der Verlauf an der Kante, an der die Reihe weitergeht.
Er haengt am Fuss und nicht an der Leiste: Eine Maske auf der Leiste
haette den Fuss mit ausgeblendet — und der traegt die Abmeldung. Der Fuss
steht ohnehin `sticky` genau dort, wo die Eintraege verschwinden;
`right: 100%` setzt den Verlauf unmittelbar links davon, also an die
tatsaechliche Verschwindekante, und er wandert beim Rollen mit. */
.app.nav-leiste .sidebar-footer::before {
content: "";
position: absolute;
top: 0; bottom: 0; right: 100%;
width: 24px;
background: linear-gradient(to left, var(--surface), rgba(255, 255, 255, 0));
pointer-events: none;
}
}