/* DEA unified frontend styles u-9608f6a78c48. Generated by ops/build-frontend-dea-unified.mjs. */
/* BEGIN dea-legal.css */
/* Fester, schlanker Rechts-Footer am Viewport-Boden (Marco 27.08.: der Footer
* muss ohne Scrollen erreichbar sein). RMS-Stil: weiße Leiste, 1px-Linie,
* kleine Typo - kein Overlay-Pill mehr. body bekommt Platz, damit nichts
* verdeckt wird. Farben über Tokens (Light/Dark). */
body.dea-has-global-legal-footer { padding-bottom: 40px; }
/* Ausnahme Anmeldeseite: dort scrollt nichts und der fixe Footer ueberdeckt die
* frei stehende Anmeldekarte nicht. Mit den 40px waere das Dokument 40px hoeher
* als der Viewport und die Karte damit nicht mehr exakt vertikal zentriert. */
body.dea-has-global-legal-footer:has(.login-page) { padding-bottom: 0; }
.dea-global-legal-footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 890; /* unter Chat-Dock und Dialogen */
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 6px 18px;
box-sizing: border-box;
padding: 8px 22px;
border-top: 1px solid var(--line, #e3e5e8);
background: var(--panel, #ffffff);
color: var(--muted, #6f7785);
font: 500 12px/1.4 var(--font-tele-neo);
}
.dea-global-legal-footer nav { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.dea-global-legal-footer a {
color: var(--text, #262626);
text-decoration: underline;
text-underline-offset: 2px;
}
.dea-global-legal-footer a:hover { color: var(--accent, #e20074); }
.dea-public-home > .dea-global-legal-footer { display: none; }
@media (max-width: 680px) {
.dea-global-legal-footer { justify-content: space-between; }
.dea-global-legal-footer nav { width: 100%; justify-content: space-around; }
}
.dea-legal-page {
margin: 0;
color: #182230;
background: #f4f6f9;
font-family: var(--font-tele-neo);
}
.dea-legal-shell { max-width: 880px; margin: 0 auto; padding: 32px 22px 80px; }
.dea-legal-header { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 28px; }
.dea-legal-brand { display: flex; align-items: center; gap: 12px; color: #182230; text-decoration: none; font-weight: 700; }
.dea-legal-brand img { width: 36px; height: 36px; object-fit: contain; }
.dea-legal-back { color: #b0005b; font-weight: 700; }
.dea-legal-content { padding: clamp(24px, 5vw, 52px); border: 1px solid #dce2e9; border-radius: 18px; background: #fff; box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08); }
.dea-legal-content h1 { margin: 0 0 8px; font-size: clamp(32px, 6vw, 48px); line-height: 1.05; }
.dea-legal-content h2 { margin: 30px 0 10px; font-size: 1.375rem; }
.dea-legal-content h3 { margin: 22px 0 8px; font-size: 1.0625rem; }
.dea-legal-content p, .dea-legal-content li { line-height: 1.65; }
.dea-legal-content address { font-style: normal; line-height: 1.65; }
.dea-legal-content a { color: #a10059; }
.dea-legal-meta { margin: 0 0 30px; color: #5c6878; }
.dea-legal-nav { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; padding-top: 20px; border-top: 1px solid #dce2e9; }
.dea-legal-notice { padding: 14px 16px; border-left: 4px solid var(--accent); background: #fff3f8; }
/* END dea-legal.css */
/* BEGIN dea-login.css */
/* Login (P3-07 Shell-Phase) - RMS-Design, kein !important. */
.dea-login-page {
min-height: 70vh;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 16px;
}
.dea-login-shell {
width: min(420px, 100%);
display: grid;
gap: 8px;
}
.dea-login-shell h1 { margin: 0; }
.dea-login-shell .sub { margin: 0 0 8px; }
.dea-login-form { display: grid; gap: 12px; }
.dea-login-field { display: grid; gap: 4px; }
.dea-login-field input {
border: 1px solid var(--form-line, #c9cdd4);
border-radius: var(--radius, 10px);
background: var(--panel);
color: var(--text);
padding: 10px 12px;
font: inherit;
font-size: var(--fs-base);
text-transform: none;
letter-spacing: normal;
}
.dea-login-form button[type="submit"] { width: 100%; }
.dea-login-page button:disabled { opacity: 0.55; cursor: not-allowed; }
/* P6-10: Abbrechen im zweiten Anmeldeschritt. Unauffällig, aber vorhanden -
wer die App nicht zur Hand hat, muss zurück können, ohne die Seite neu zu
laden. Kontrast und Fokus kommen aus den Tokens bzw. dem zentralen
:focus-visible-Satz (Regel 6). */
.dea-login-abbrechen {
background: none;
border: 1px solid var(--line, var(--border));
border-radius: var(--radius, 10px);
color: var(--muted);
padding: 8px 12px;
font: inherit;
cursor: pointer;
}
.dea-login-abbrechen:hover { color: var(--text); }
/* P6-12: Konzern-Login (OIDC) ueber dem lokalen Formular */
.dea-login-sso { display: block; text-align: center; text-decoration: none; margin-bottom: var(--space-3, 12px); }
.dea-login-sso[aria-disabled="true"] { pointer-events: none; opacity: 0.6; }
.dea-login-oder { text-align: center; margin: 0 0 var(--space-3, 12px); text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--fs-xs, 0.75rem); }
.dea-login-hinweis { margin-top: 0; }
/* E1-14: SSO ist der Standardweg; das lokale Formular liegt hinter diesem Aufklapper (Notfallzugang). */
.dea-login-lokal-toggle { display: block; margin: 0 auto var(--space-3, 12px); background: none; border: 0; padding: var(--space-1, 4px) var(--space-2, 8px); color: var(--muted); text-decoration: underline; cursor: pointer; font: inherit; }
.dea-login-lokal-toggle[aria-expanded="true"] { text-decoration: none; }
/* END dea-login.css */
/* BEGIN dea-shell.css */
/* App-Shell + Chat-Dock-Ergänzungen (P3-07 Shell-Phase).
* Die Basis-Styles (.app-shell, .sidebar*, .chat-*) kommen weiter aus dem
* Bundle-CSS (index-hOpQq8pj.css) - nur das React-JS ist ersetzt. Hier stehen
* nur die neuen Shell-Elemente. Kein !important. */
/* Overlay oben rechts (Ersatz für das Bundle-Fixed-Overlay) */
.dea-shell-overlay {
position: fixed;
top: 10px;
right: 10px;
z-index: 1201;
display: flex;
gap: 8px;
align-items: center;
}
.dea-shell-bell {
position: relative;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--panel);
width: 34px;
height: 34px;
cursor: pointer;
font-size: var(--fs-md);
line-height: 1;
}
.dea-shell-bell-badge {
position: absolute;
top: -6px;
right: -6px;
background: var(--accent);
color: #fff;
border-radius: 999px;
font-size: var(--fs-xs);
min-width: 16px;
height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 4px;
}
.dea-shell-user {
font-size: var(--fs-xs);
color: var(--muted);
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
background: var(--panel);
border: 1px solid var(--line);
border-radius: 999px;
padding: 6px 12px;
}
.dea-shell-logout {
border: 1px solid var(--line);
border-radius: 999px;
background: var(--panel);
color: var(--text);
padding: 6px 12px;
font: inherit;
font-size: var(--fs-xs);
cursor: pointer;
}
.dea-shell-logout:hover { border-color: var(--accent); color: var(--accent); }
.dea-shell-notes {
position: absolute;
top: 44px;
right: 0;
width: min(360px, 90vw);
max-height: 70vh;
overflow: auto;
display: grid;
gap: 6px;
background: var(--panel);
border: 1px solid var(--line);
border-radius: var(--radius, 10px);
padding: 12px 14px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}
.dea-shell-notes-head {
display: flex;
justify-content: space-between;
align-items: center;
}
.dea-shell-notes-head button {
border: none;
background: none;
cursor: pointer;
font-size: var(--fs-lg);
color: var(--muted);
}
.dea-shell-notes-label {
margin: 6px 0 0;
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--muted);
}
.dea-shell-note {
font-size: var(--fs-sm);
color: var(--muted);
border-top: 1px solid var(--line);
padding-top: 6px;
}
.dea-shell-note.unread { color: var(--text); font-weight: 600; }
.dea-shell-notes .sub { margin: 0; }
/* Dock-Kleinigkeiten */
.dea-cd-attachment {
display: flex;
gap: 8px;
align-items: center;
justify-content: space-between;
font-size: var(--fs-xs);
padding: 4px 2px 0;
}
.chat-launcher { cursor: pointer; }
/* END dea-shell.css */
/* BEGIN dea-components.css */
/* DEA Enterprise Komponenten-Bibliothek [P3-03]
* 1:1 nach dem RMS-Muster (aigs-rms rms_service/static/index.html), auf den
* Tokens aus dea-tokens.css. Gilt nur INNERHALB von .dea-ui-Containern -
* neue/portierte Screens setzen die Klasse am Wurzelelement, Bestands-Screens
* bleiben unberuehrt. Regeln: keine neuen Hex-Werte, kein !important.
*/
.dea-ui { color: var(--text); font-size: var(--fs-base); line-height: 1.5; }
/* ---------- Fokus & Tastatur (P4-17d) ----------
* EIN zentraler Fokus-Satz fuer die ganze App (bewusst ausserhalb des
* .dea-ui-Scopes: auch Shell, Headmenue und Chat-Dock brauchen ihn).
* 2px Akzent-Outline mit Offset - sichtbar in Light und Dark, nur bei
* Tastaturfokus (:focus-visible), Maus-Klicks bleiben ohne Ring. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 4px;
}
/* Sprungmarke "Zum Inhalt springen" (P4-17d): erstes fokussierbares Element,
* sichtbar nur bei Tastaturfokus. Ziel ist #dea-main (.app-content). */
.dea-skip-link {
position: fixed;
top: -60px;
left: 12px;
z-index: 4000;
border: 1px solid var(--accent);
border-radius: 8px;
background: var(--panel);
color: var(--text);
font-size: var(--fs-base);
font-weight: 700;
padding: 10px 14px;
text-decoration: none;
transition: top .15s ease;
}
.dea-skip-link:focus,
.dea-skip-link:focus-visible {
top: 12px;
}
/* Ueberschriften-Hierarchie (RMS: Groesse + Uppercase-Labels statt Farbe) */
.dea-ui h1 { font-size: var(--fs-xl); margin: 0 0 6px; }
.dea-ui h2 { font-size: var(--fs-md); margin: 0 0 12px; }
.dea-ui h3 { font-size: var(--fs-sm); margin: 0 0 8px; }
.dea-ui .sub { font-size: var(--fs-sm); color: var(--muted); }
.dea-ui .kicker,
.dea-ui label {
display: block;
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: .05em;
color: var(--muted);
margin: 0 0 4px;
}
.dea-ui .fieldhint { font-size: var(--fs-xs); color: var(--muted); line-height: 1.4; margin-top: 3px; }
/* Flaechen: Panel (Sektion) und Card (Element darin) */
.dea-ui .panel {
background: var(--panel);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 18px;
margin-top: 16px;
box-shadow: var(--shadow);
}
.dea-ui .card {
background: var(--panel);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 12px;
box-shadow: var(--shadow);
}
.dea-ui .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.dea-ui .grid { display: grid; gap: 14px; }
.dea-ui .grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.dea-ui .grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.dea-ui .grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
/* KPI-Kacheln */
.dea-ui .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.dea-ui .tile {
background: var(--panel);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 12px 14px;
}
.dea-ui .tile .num { font-size: 1.375rem; font-weight: 700; }
.dea-ui .tile .lbl { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
/* Chips / Status-Baender (Text, Rahmen, Tint aus derselben Familie) */
.dea-ui .chip {
display: inline-block;
border-radius: 999px;
padding: 1px 9px;
font-size: var(--fs-xs);
background: var(--panel-2);
border: 1px solid var(--line);
color: var(--muted);
}
.dea-ui .chip.band-low { color: var(--ok); border-color: var(--ok); background: var(--ok-soft); }
.dea-ui .chip.band-medium { color: var(--warn); border-color: var(--warn); background: var(--warn-soft); }
.dea-ui .chip.band-high,
.dea-ui .chip.band-critical { color: var(--bad); border-color: var(--bad); background: var(--bad-soft); }
.dea-ui .chip.accent { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
/* Buttons: vier Stufen, Hover = Magenta */
.dea-ui button,
.dea-ui .btn {
background: var(--panel);
border: 1px solid var(--field-border);
border-radius: 8px;
padding: 8px 14px;
font: inherit;
color: inherit;
cursor: pointer;
transition: border-color .15s, color .15s;
}
.dea-ui button:hover,
.dea-ui .btn:hover { border-color: var(--accent); color: var(--accent); }
.dea-ui button.primary,
.dea-ui .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.dea-ui button.primary:hover,
.dea-ui .btn.primary:hover { filter: brightness(1.08); color: #fff; }
.dea-ui button:disabled { opacity: .45; cursor: default; }
.dea-ui .iconbtn {
background: none; border: 0; border-radius: 7px; padding: 6px;
color: var(--muted); cursor: pointer;
}
.dea-ui .iconbtn:hover { color: var(--accent); background: var(--accent-soft); }
/* Formulare: Fokus = Magenta-Rahmen, sonst nichts */
.dea-ui input[type="text"],
.dea-ui input[type="email"],
.dea-ui input[type="password"],
.dea-ui input[type="number"],
.dea-ui input[type="date"],
.dea-ui textarea,
.dea-ui select {
background: var(--field-bg);
border: 1px solid var(--field-border);
border-radius: 6px;
padding: 8px 10px;
font: inherit;
color: var(--field-text);
width: 100%;
}
.dea-ui input:focus,
.dea-ui textarea:focus,
.dea-ui select:focus { outline: none; border-color: var(--accent); }
/* Tabellen: randlos, 1px-Trennlinien, Uppercase-Kopf */
.dea-ui table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.dea-ui table.data th {
text-align: left;
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: .04em;
font-weight: 600;
color: var(--muted);
padding: 7px 6px;
border-bottom: 1px solid var(--line);
}
.dea-ui table.data td { padding: 7px 6px; border-top: 1px solid var(--line); vertical-align: top; }
/* Tabs mit Unterstrich + Zaehler-Pille */
.dea-ui .tabbar { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.dea-ui .tab {
background: none; border: 0; border-bottom: 3px solid transparent;
padding: 8px 12px; font: inherit; color: var(--muted); cursor: pointer;
}
.dea-ui .tab.active { color: var(--text); border-bottom-color: var(--accent); }
.dea-ui .tab .cnt {
display: inline-block; min-width: 18px; text-align: center;
border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line);
font-size: var(--fs-xs); padding: 0 5px; margin-left: 5px;
}
/* Hinweis-/Fehlerflaechen */
.dea-ui .alert {
border: 1px solid var(--line);
background: var(--panel-2);
border-radius: var(--radius);
padding: 10px 14px;
margin-top: 12px;
}
.dea-ui .alert.error { color: var(--bad); border-color: var(--bad); background: var(--bad-soft); }
.dea-ui .alert.ok { color: var(--ok); border-color: var(--ok); background: var(--ok-soft); }
/* Aufforderung (dashed Magenta) */
.dea-ui .cta {
border: 1px dashed var(--accent);
background: var(--accent-soft);
border-radius: var(--radius);
padding: 14px 16px;
margin-top: 14px;
}
/* Progressive Offenlegung */
.dea-ui details.more > summary {
cursor: pointer; color: var(--accent); font-size: var(--fs-xs); list-style: none;
}
.dea-ui details.more > summary::before { content: "\25B8 "; }
.dea-ui details.more[open] > summary::before { content: "\25BE "; }
/* Erlaeuterungs-Panel an Katalogfragen (DEA.explainToggleHtml/-BodyHtml,
* Muster aus P7-09): Toggle rechtsbuendig in der Antwortzeile, Panel darunter.
* Eine Regelmenge fuer Wizard und Modellverwaltung; Fokus-Stil kommt aus dem
* zentralen :focus-visible-Satz oben. */
.dea-ui .dea-explain-toggle {
margin-left: auto;
flex: 0 0 auto;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--panel-2);
color: var(--text);
font-size: var(--fs-xs);
padding: 4px 12px;
cursor: pointer;
white-space: nowrap;
}
.dea-ui .dea-explain-toggle:hover { border-color: var(--accent); color: var(--accent-2); }
.dea-ui .dea-explain-toggle[aria-expanded="true"] {
border-color: var(--accent);
color: var(--accent-2);
background: var(--accent-soft);
}
.dea-ui .dea-explain-body {
border: 1px solid var(--line);
border-radius: 10px;
background: var(--panel-2);
margin-top: 8px;
padding: 10px 14px;
font-size: var(--fs-sm);
}
.dea-ui .dea-explain-body p { margin: 0 0 8px; color: var(--text); }
.dea-ui .dea-explain-body ul { margin: 0 0 8px; padding-left: 18px; }
.dea-ui .dea-explain-body li { margin-bottom: 4px; }
.dea-ui .dea-explain-body h5 {
margin: 10px 0 6px;
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: .05em;
color: var(--muted);
}
.dea-ui .dea-explain-body a { color: var(--accent-2); text-decoration: underline; }
@media (max-width: 980px) {
.dea-ui .grid.cols-3, .dea-ui .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
.dea-ui .tiles { grid-template-columns: repeat(2, 1fr); }
}
/* END dea-components.css */
/* BEGIN dea-base.css */
/* dea-base.css - source-owned Basis-Stylesheet (P3-07-Nachlauf, 28.08.2026).
* Destillat der tatsaechlich genutzten Regeln aus dem frueheren Bundle-CSS
* (assets/index-hOpQq8pj.css): App-Shell-Layout, Sidebar, Chat-Dock,
* Wizard-Stepper, Basis-Elemente (:root/body/a/hN/inputs) und Utilities
* (.card/.btn/.badge/.pill/.row/.stack/.muted). React-only-Regeln (arch-editor,
* bpmn/uml, workflows, guided tours, plasma, Alt-Karten) sind entfernt.
* Werte bewusst 1:1 uebernommen - visuelle Aequivalenz vor Kuratierung;
* Vereinheitlichung auf dea-tokens.css erfolgt schrittweise. */
@font-face { font-family:TeleNeo Office;src:local("Tele Neo Office"),local("TeleNeo Office"),local("Teleneo Office"),local("Tele Neo Office Regular"),url(/fonts/Tele%20Neo%20Office.ttf) format("truetype"),url(/fonts/Tele%20Neo.otf) format("opentype");font-weight:400;font-style:normal;font-display:swap; }
@font-face { font-family:TeleNeo Office;src:local("Tele Neo Office Bold"),local("TeleNeo Office Bold"),local("Teleneo Office Bold"),url(/fonts/Tele%20Neo%20Office%20Bold.ttf) format("truetype"),url(/fonts/Tele%20Neo%20Bold.otf) format("opentype");font-weight:700;font-style:normal;font-display:swap; }
@font-face { font-family:TeleNeo Office;src:local("Tele Neo Office Extrabold"),local("TeleNeo Office ExtraBold"),local("Teleneo Office Extra Bold"),url(/fonts/Tele%20Neo%20Office%20Extrabold.ttf) format("truetype"),url(/fonts/Tele%20Neo%20Extrabold.otf) format("opentype");font-weight:800;font-style:normal;font-display:swap; }
/* Fallback-Werte, bevor die Shell data-theme stempelt; sobald das Attribut
steht, gewinnen die RMS-Tokens aus dea-tokens.css (laedt spaeter, :root[data-theme=...]). */
/* EINZIGE Definition der Schriftart (Marco 02.09.: "immer TeleNeo, keine
* andere Schriftart"): nur TeleNeo-Namensvarianten, danach das generische
* sans-serif als Notausgang, falls die mitgelieferten Dateien fehlen -
* KEINE fremden Schriften (Arial, Helvetica, Segoe UI, Avenir Next) mehr.
* Jede Regel im Frontend benutzt var(--font-tele-neo*), nie einen eigenen
* Stack; die drei @font-face-Regeln darueber liefern die Dateien aus
* /fonts mit - NICHT /dea/fonts: das Image legt services/frontend-dea3/ nach
* /usr/share/nginx/html, also liegen die Dateien unter /fonts/...; fuer
* /dea/... greift in ops/nginx-dea.conf die SPA-Regel `try_files ... /index.html`
* und lieferte HTML statt Schrift aus. Die Schrift kam dadurch nur auf
* Rechnern mit lokal installiertem "Tele Neo Office" (local()-Quelle) an. */
:root { --font-tele-neo: "TeleNeo Office", "Tele Neo Office", "Teleneo Office", "TeleNeoOffice", "TeleNeo", "Tele Neo", sans-serif;--font-tele-neo-bold: "TeleNeo Office Bold", "Tele Neo Office Bold", "Teleneo Office Bold", "TeleNeo Office", "Tele Neo Office", "TeleNeo", sans-serif;--font-tele-neo-extrabold: "TeleNeo Office ExtraBold", "TeleNeo Office Extra Bold", "Tele Neo Office ExtraBold", "Tele Neo Office Extra Bold", "Teleneo Office ExtraBold", "Teleneo Office Extra Bold", "TeleNeo Office", "Tele Neo Office", sans-serif;--bg: #ffffff;--bg-2: #ffffff;--card: #f7f8fb;--surface: #ffffff;--muted: #475569;--text: #0f172a;--accent: #e20074;--accent-2: #b8005d;--border: #e5e7eb;--shadow: 0 20px 60px -30px rgba(0, 0, 0, .18);--card-contrast-shadow: 0 28px 70px -38px rgba(0, 0, 0, .52), 0 16px 36px -26px rgba(226, 0, 116, .45);--field-bg: #ffffff;--field-text: #e20074;--field-border: #e20074;--sidebar-offset: 260px; }
:root { font-family:var(--font-tele-neo); }
* { box-sizing:border-box; }
body { margin:0;background:var(--bg);color:var(--text);font-family:var(--font-tele-neo); }
.app-root { position:relative;min-height:100vh; }
.app-background { position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;overflow:hidden;background:var(--bg); }
.app-shell { display:flex;min-height:100vh;position:relative;z-index:1; }
.app-content { flex:1;min-width:0;position:relative; }
.login-page { min-height:100vh;display:grid;place-items:center;padding:24px; }
.sidebar { width:260px;background:var(--surface);border-right:1px solid var(--border);padding:16px 12px;display:flex;flex-direction:column;gap:12px;position:sticky;top:0;height:100vh;font-family:var(--font-tele-neo); }
.sidebar-top { display:flex;align-items:center;gap:8px;justify-content:space-between;min-height:48px; }
.sidebar-brand { display:inline-block;border-radius:12px;text-decoration:none;flex:1;min-width:0; }
.sidebar-brand-switcher { position:relative;flex:1;min-width:0; }
.sidebar-brand-inner { display:flex;align-items:center;gap:10px;padding:8px 10px;min-height:44px;border-radius:11px;color:var(--text);background:var(--card);border:1px solid rgba(226,0,116,.35);box-shadow:var(--shadow);font-weight:700;line-height:1.2;transition:border-color .2s ease,transform .12s ease; }
.sidebar-brand:hover .sidebar-brand-inner, .sidebar-brand:focus .sidebar-brand-inner { border-color:#e20074bf;transform:translateY(-1px); }
.sidebar-brand-logo { width:28px;height:28px;object-fit:contain;flex-shrink:0; }
.sidebar-brand-text { display:inline-flex;align-items:center;min-width:0; }
.sidebar-brand-wordmark { display:inline-block;font-size: 1.75rem;font-family:var(--font-tele-neo-extrabold);font-weight:800;line-height:1;letter-spacing:.04em;white-space:nowrap;transform-origin:left center;transform:scaleX(.92); }
.sidebar-nav { display:flex;flex-direction:column;gap:6px;flex:1;overflow-y:auto;padding-right:4px; }
.sidebar-group { display:flex;flex-direction:column;gap:4px; }
.sidebar-item { display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;text-decoration:none;color:var(--text);border:1px solid transparent;font-family:var(--font-tele-neo);transition:background .2s,color .2s,border-color .2s; }
.sidebar-label { flex:1; }
.sidebar-item:hover, .sidebar-item.active { background:var(--accent);color:#fff;border-color:var(--accent); }
.sidebar-children { display:flex;flex-direction:column;gap:4px;margin-top:4px;margin-left:8px; }
.sidebar-item.child { font-size: var(--fs-sm);color:var(--muted);padding-left:18px;font-family:var(--font-tele-neo); }
.sidebar-item.child:hover, .sidebar-item.child.active { color:#fff; }
.sidebar.collapsed { width:76px; }
.sidebar.collapsed .sidebar-top { justify-content:center; }
.sidebar.collapsed .sidebar-brand { width:100%;flex:none; }
.sidebar.collapsed .sidebar-brand .sidebar-brand-inner { justify-content:center;padding:8px; }
.sidebar.collapsed .sidebar-brand-logo { width:30px;height:30px; }
.sidebar.collapsed .sidebar-label, .sidebar.collapsed .sidebar-children { display:none; }
.sidebar.collapsed .sidebar-item { justify-content:center; }
.sidebar-footer { display:flex;flex-direction:column;gap:8px;margin-top:auto; }
.sidebar-toggle { width:100%;border:1px solid var(--accent);border-radius:10px;background:var(--surface);color:var(--text);padding:10px 12px;font-weight:700;font-family:var(--font-tele-neo);cursor:pointer;box-shadow:var(--shadow);transition:background .2s,color .2s,border-color .2s,transform .12s ease;display:inline-flex;align-items:center;gap:8px; }
.sidebar.collapsed .sidebar-toggle { justify-content:center;padding:10px; }
.sidebar.collapsed .sidebar-toggle .toggle-label { display:none; }
.sidebar-toggle:hover, .sidebar-toggle:focus { background:var(--accent);color:#fff;border-color:var(--accent);transform:translateY(-1px); }
.page { width:100%;max-width:none;margin:0;padding:20px 100px 24px; }
.page-header { display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap; }
a { color:inherit;text-decoration:none; }
a.card, button.card { border:1px solid var(--field-border);transition:background .2s,color .2s,border-color .2s,transform .12s ease; }
a.card:hover, a.card:focus, button.card:hover, button.card:focus { background:var(--accent);color:#fff;border-color:var(--accent);transform:translateY(-2px); }
a.card:hover *, a.card:focus *, button.card:hover *, button.card:focus * { color:#fff!important; }
.shell { min-height:100vh;width:100%;max-width:none;margin:0;padding:20px 100px 36px; }
.header { display:flex;align-items:center;justify-content:space-between;gap:12px; }
.pill { border:1px solid var(--border);padding:4px 10px;border-radius:999px;color:var(--muted);font-size: var(--fs-xs);letter-spacing:.4px; }
.wizard-stepper-shell { margin-bottom:16px;padding:12px;border-radius:12px;background:#000;border:1px solid #1f1f1f;display:grid;gap:10px; }
.wizard-stepper-title { margin:0;color:#d4d4d8;font-size: var(--fs-sm); }
.wizard-stepper-list { display:flex;gap:8px;flex-wrap:wrap; }
.wizard-step-pill { border:1px solid #3f3f46;border-radius:999px;padding:4px 10px;color:#a1a1aa;font-size: var(--fs-xs);letter-spacing:.2px;background:transparent; }
.wizard-step-pill.active { border-color:var(--accent);color:#fff;font-weight:700; }
.grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:18px; }
.home-nav-card { min-height:168px; }
.home-nav-card-title { margin:0; }
.documentation-grid { align-items:stretch; }
.documentation-overview-title { margin:0; }
.card { background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px 16px;box-shadow:var(--shadow); }
.title { font-size: 1.75rem;font-family:var(--font-tele-neo-bold);font-weight:700;margin:0; }
h1, h2, h3, h4, h5, h6 { font-family:var(--font-tele-neo-bold);font-weight:700; }
.muted { color:var(--muted);font-size: var(--fs-base); }
.badge { display:inline-flex;align-items:center;gap:6px;font-size: var(--fs-sm);padding:4px 8px;border-radius:8px;background:#e200741a;color:var(--accent);border:1px solid rgba(226,0,116,.25); }
.badge-success { background:#10b9811f;color:#047857;border-color:#10b98159; }
.badge-warning { background:#f59e0b24;color:#b45309;border-color:#f59e0b66; }
.btn { display:inline-flex;align-items:center;justify-content:center;text-align:center;font-family:inherit;background:var(--surface);color:var(--text);border:1px solid var(--accent);border-radius:10px;padding:10px 14px;font-weight:700;cursor:pointer;box-shadow:0 12px 40px -16px #e2007440;transition:transform .12s ease,box-shadow .2s ease,background .2s,color .2s,border-color .2s; }
.btn:hover, .btn:focus, .btn.ghost:hover, .btn.ghost:focus { transform:translateY(-1px);box-shadow:0 15px 40px -25px #0006;background:var(--accent);color:#fff;border-color:var(--accent); }
.btn.ghost { background:var(--surface);color:var(--text);border:1px solid var(--accent); }
.primary { background:var(--surface);color:var(--text);border:1px solid var(--accent);border-radius:10px;padding:10px 14px;font-weight:700;cursor:pointer;box-shadow:0 12px 40px -16px #e2007459;transition:transform .12s ease,box-shadow .2s ease,background .2s,color .2s,border-color .2s; }
.primary:hover, .primary:focus { transform:translateY(-1px);box-shadow:0 15px 40px -20px #e2007473;background:var(--accent-2);border-color:var(--accent-2);color:#fff; }
.table { width:100%;border-collapse:collapse;margin-top:12px; }
.table th, .table td { padding:10px;text-align:left;border-bottom:1px solid var(--border); }
input, textarea, select { border:1px solid var(--field-border);padding:10px 12px;border-radius:10px;background:var(--field-bg);color:var(--field-text);font-size: var(--fs-base);outline:none;width:100%;transition:background .2s,color .2s,border-color .2s; }
input:hover, textarea:hover, select:hover, input:focus, textarea:focus, select:focus { background:var(--accent);color:#fff;border-color:var(--accent); }
.stack { display:flex;flex-direction:column;gap:10px; }
.row { display:flex;align-items:center;gap:10px; }
.question { margin-bottom:18px;text-align:left; }
.question .muted { margin-top:6px;line-height:1.5;white-space:pre-wrap; }
.question .muted a { color:var(--accent);text-decoration:underline; }
.answers { display:flex;flex-direction:column;gap:10px;align-items:flex-start; }
.answers { display:flex;flex-direction:column;gap:8px;margin-top:10px; }
.chat-launcher { position:fixed;right:18px;bottom:72px;background:linear-gradient(120deg,var(--accent),var(--accent-2));color:#fff;width:48px;height:48px;border-radius:999px;cursor:pointer;box-shadow:0 12px 30px -12px #e2007499;display:inline-flex;align-items:center;justify-content:center;z-index:5000; }
.chat-launcher-icon { display:inline-flex;align-items:center;justify-content:center;line-height:0; }
.chat-launcher:hover, .chat-launcher:focus { transform:translateY(-1px); }
.chat-context-pill { display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;border:1px solid var(--border);border-radius:8px;padding:6px 8px;background:var(--surface); }
.chat-panel { position:fixed;right:18px;bottom:70px;width:420px;height:560px;min-width:340px;min-height:420px;max-width:96vw;max-height:92vh;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;resize:both;z-index:5001; }
.chat-panel.maximized { top:4vh;left:4vw;right:4vw;bottom:4vh;width:auto;height:auto;max-width:none;max-height:none;resize:none; }
.chat-header { display:flex;align-items:center;justify-content:space-between;padding:12px;border-bottom:1px solid var(--border);cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none; }
.chat-panel.dragging .chat-header { cursor:grabbing; }
.chat-header button, .chat-header select, .chat-header input { cursor:pointer; }
.chat-controls { display:flex;flex-direction:column;gap:8px;padding:8px 12px;align-items:stretch; }
.chat-output-window { margin:0 12px 8px;border:1px solid var(--border);border-radius:10px;background:var(--surface);min-height:270px;flex:3;overflow:hidden; }
.chat-body { height:100%;padding:12px;overflow-y:auto;display:flex;flex-direction:column;gap:8px; }
.chat-entry { display:flex;flex-direction:column;gap:6px; }
.chat-bubble { padding:10px 12px;border-radius:10px;background:var(--surface);border:1px solid var(--border);font-size: var(--fs-base);line-height:1.55;text-align:left; }
.chat-bubble.user { background:#e200741a;border-color:#e2007466; }
.bubble { padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:var(--surface); }
.bubble-bot { border-color:var(--border); }
.chat-input { padding:10px 12px 12px;display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--border);min-height:90px;flex:1; }
.chat-input-row { display:flex;gap:8px;align-items:flex-end; }
.chat-icon-btn { min-width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer; }
.chat-send-btn { width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:#94a3b8;color:#e5e7eb;display:inline-flex;align-items:center;justify-content:center;cursor:not-allowed;transition:background .12s ease,color .12s ease,transform .12s ease; }
.chat-send-btn.active { background:#fff;color:#111;cursor:pointer; }
.chat-send-btn.active:hover { transform:translateY(-1px); }
.chat-suggestions { display:flex;flex-wrap:wrap;gap:6px; }
.chat-thinking { display:inline-flex;align-items:center;gap:0; }
.chat-thinking-dots { display:inline-flex;min-width:16px;justify-content:flex-start; }
.chat-thinking-dot { display:inline-block;opacity:.2;animation:chat-thinking-dot 1.1s ease-in-out infinite; }
.chat-thinking-dot:nth-child(2) { animation-delay:.18s; }
.chat-thinking-dot:nth-child(3) { animation-delay:.36s; }
@keyframes chat-thinking-dot { 0%,80%,to{opacity:.2;transform:translateY(0)}40%{opacity:1;transform:translateY(-1px)}; }
.chat-suggestion-btn { border:1px solid var(--border);border-radius:999px;padding:6px 10px;background:color-mix(in srgb,var(--surface) 88%,#ffffff 12%);color:var(--text);font-size: var(--fs-xs);cursor:pointer; }
.chat-suggestion-btn:hover { border-color:#e2007473; }
@media (max-width: 640px) {
.chat-panel { right:10px;left:10px;width:auto;height:72vh;min-height:380px;resize:none; }
.chat-panel.maximized { top:8px;left:8px;right:8px;bottom:8px; }
}
[data-agent-context] { transition:border-color .18s ease,box-shadow .18s ease; }
@media (max-width: 720px) {
.shell { padding:12px 16px 24px; }
.header { flex-direction:column;align-items:flex-start; }
}
@media (max-width: 960px) {
.sidebar { position:fixed;left:-280px;top:0;height:100vh;z-index:1001;transition:left .2s ease; }
.sidebar.open { left:0; }
}
.wizard-role-fieldset { border:1px solid var(--border);border-radius:10px;padding:12px;margin:0; }
.wizard-role-fieldset legend { padding:0 6px;font-weight:700; }
.wizard-role-list { display:grid;gap:8px;width:min(100%,520px);margin:6px auto 0; }
.wizard-role-item { display:grid;grid-template-columns:minmax(0,20px) 1fr;align-items:center;justify-items:start;column-gap:10px;width:100%;cursor:pointer; }
.wizard-role-checkbox-col { width:20px;max-width:20px;display:inline-flex;align-items:center;justify-content:flex-start; }
.wizard-role-checkbox-col input[type=checkbox] { margin:0; }
.wizard-role-label-col { text-align:left;justify-self:start; }
/* Reduzierte Bewegung (P4-17): Nutzer mit entsprechender Systemeinstellung
* bekommen keine Uebergaenge/Animationen - deckt alle Module ab. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
transition-duration: .01ms !important;
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
}
}
/* Reduzierte Bewegung per Nutzerwahl (Zahnrad) - erzwingt den
* prefers-reduced-motion-Block unabhaengig von der Systemeinstellung. */
:root[data-motion="reduce"] *,
:root[data-motion="reduce"] *::before,
:root[data-motion="reduce"] *::after {
transition-duration: .01ms !important;
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
}
/* END dea-base.css */
/* BEGIN dea-password-toggle.css */
.login-page label.dea-password-toggle-label {
position: relative;
}
.login-page input.dea-password-toggle-input {
padding-right: 52px !important;
}
.login-page .dea-password-visibility-toggle {
position: absolute;
right: 8px;
bottom: 6px;
z-index: 2;
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--accent);
cursor: pointer;
padding: 0;
transition: background 0.16s ease, color 0.16s ease, transform 0.12s ease;
}
.login-page .dea-password-visibility-toggle:hover,
.login-page .dea-password-visibility-toggle:focus-visible {
background: color-mix(in srgb, var(--accent) 14%, transparent);
color: var(--accent-2);
outline: none;
}
.login-page .dea-password-visibility-toggle:active {
transform: scale(0.96);
}
.login-page .dea-password-visibility-toggle svg {
width: 20px;
height: 20px;
pointer-events: none;
}
/* END dea-password-toggle.css */
/* BEGIN dea-public-home.css */
/* DEA Enterprise public home – lean Telekom CD, single accent var(--accent). */
html.dea-public-home-root,
html.dea-public-home-root body {
background: #f4f4f6;
color: #111111;
}
body.dea-public-home {
margin: 0;
min-height: 100vh;
background: #f4f4f6;
color: #111111;
font-family: var(--font-tele-neo);
}
body.dea-public-home .app-background,
body.dea-public-home .plasma-toggle,
body.dea-public-home .chat-launcher,
body.dea-public-home .chat-panel,
body.dea-public-home .dea-open-processes-panel {
display: none !important;
}
.dea-public {
--magenta: var(--accent);
--magenta-dark: #b0005a;
--magenta-soft: rgba(226, 0, 116, 0.08);
/* Magenta als TEXTFARBE fuer Kleintext (Kicker, Links, Chips): #e20074 erreicht
* auf --soft nur 4,26:1 und auf dunklen Flaechen 3,6:1 - deshalb die dunklere
* Stufe (6,4:1 auf --soft); Displaygroessen (h1-Zeile, Kennzahlen) bleiben --magenta. */
--magenta-text: var(--magenta-dark);
--ink: #111111;
--muted: #5f6672;
--line: #d7d9df;
--panel: #ffffff;
--soft: #f4f4f6;
--night: #12141c;
--night-line: rgba(255, 255, 255, 0.45); /* Bedienelement-Rahmen auf --night >= 3:1 */
--ok: #187d3c; /* dea-tokens --ok: 4,7:1 auf dem Badge-Tint (war #0f8a5f mit 4,0:1) */
--warn: #96570a; /* dea-tokens --warn: 5,2:1 (war #b7791f mit 3,3:1) */
--danger: #b42318;
min-height: 100vh;
background: var(--soft);
color: var(--ink);
overflow-x: hidden;
}
.dea-public[data-theme="dark"] {
--ink: #f7f8fb;
--muted: #b9c0cc;
--line: #343b4c;
--panel: #171d29;
--soft: #0b0e14;
--magenta-soft: rgba(226, 0, 116, 0.16);
--magenta-text: #ff3d9a; /* eine Stufe heller als dea-tokens --accent-2 (#ff2b91), damit auch der Kicker auf dem Magenta-Tint 4,75:1 erreicht (mit #ff2b91: 4,45:1) */
--night: #05070b;
--ok: #63d9a6;
--warn: #f5bb54;
--danger: #ff8d83;
}
.dea-public * {
box-sizing: border-box;
}
.dea-public a {
color: inherit;
}
.dea-public h1,
.dea-public h2,
.dea-public h3 {
font-weight: 800;
}
/* ---------- Scroll reveal ---------- */
.dea-reveal {
opacity: 0;
transform: translateY(22px);
transition:
opacity 640ms cubic-bezier(0.22, 0.68, 0.32, 1),
transform 640ms cubic-bezier(0.22, 0.68, 0.32, 1);
transition-delay: var(--reveal-delay, 0ms);
}
.dea-reveal.is-in {
opacity: 1;
transform: translateY(0);
}
/* ---------- Topbar ---------- */
.dea-public-topbar {
position: sticky;
top: 0;
z-index: 20;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
min-height: 68px;
padding: 12px clamp(18px, 4vw, 56px);
border-bottom: 1px solid var(--line);
background: color-mix(in srgb, var(--panel) 92%, transparent);
backdrop-filter: blur(14px);
}
.dea-public-brand {
display: inline-flex;
align-items: center;
gap: 12px;
font-weight: 800;
text-decoration: none;
}
.dea-public-brand img {
width: 32px;
height: 32px;
object-fit: contain;
}
.dea-public-brand span {
display: grid;
line-height: 1.08;
white-space: nowrap;
}
.dea-public-brand small {
color: var(--muted);
font-size: var(--fs-xs);
font-weight: 700;
}
.dea-public-nav {
display: flex;
align-items: center;
gap: 18px;
color: var(--muted);
font-size: var(--fs-base);
font-weight: 700;
}
.dea-public-nav a {
position: relative;
text-decoration: none;
padding: 4px 0;
}
.dea-public-nav a::after {
content: "";
position: absolute;
left: 0;
right: 100%;
bottom: 0;
height: 2px;
background: var(--magenta);
transition: right 220ms cubic-bezier(0.22, 0.68, 0.32, 1);
}
.dea-public-nav a:hover,
.dea-public-nav a:focus {
color: var(--magenta-text);
}
.dea-public-nav a:hover::after,
.dea-public-nav a:focus::after {
right: 0;
}
.dea-public-login,
.dea-public-cta,
.dea-public-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
border: 1px solid var(--magenta);
border-radius: 8px;
padding: 9px 18px;
background: var(--magenta);
color: #ffffff !important;
text-decoration: none;
font-weight: 800;
transition:
background 180ms ease,
border-color 180ms ease,
transform 180ms ease,
box-shadow 180ms ease;
}
.dea-public-login,
.dea-public-icon-btn {
width: 42px;
height: 42px;
min-width: 42px;
padding: 0;
}
.dea-public-icon-btn {
background: var(--panel);
color: var(--ink) !important;
border-color: var(--line);
cursor: pointer;
}
.dea-public-login svg,
.dea-public-icon-btn svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.dea-public-login:hover,
.dea-public-login:focus,
.dea-public-cta:hover,
.dea-public-cta:focus {
background: var(--magenta-dark);
border-color: var(--magenta-dark);
color: #ffffff !important;
transform: translateY(-1px);
box-shadow: 0 14px 30px -18px rgba(226, 0, 116, 0.65);
}
.dea-public-icon-btn:hover,
.dea-public-icon-btn:focus {
border-color: var(--magenta);
color: var(--magenta-text) !important;
}
/* ---------- Hero ---------- */
.dea-public-hero {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.85fr);
gap: clamp(28px, 5vw, 72px);
align-items: center;
padding: clamp(40px, 6vw, 84px) clamp(18px, 5vw, 72px) clamp(36px, 5vw, 64px);
background: var(--panel);
overflow: hidden;
}
/* CD-Bereinigung: animiertes Hero-Raster entfernt (Telekom CD, 27.08.) */
.dea-public-hero::before {
display: none;
}
.dea-public[data-theme="dark"] .dea-public-hero::before {
background: var(--accent);
}
.dea-public-hero::after {
content: "";
position: absolute;
right: -16vw;
top: -22%;
width: 46vw;
height: 46vw;
pointer-events: none;
border: 1px solid rgba(226, 0, 116, 0.18);
border-radius: 50%;
background: var(--accent);
animation: dea-hero-orbit 20s ease-in-out infinite;
}
.dea-public-hero > div {
position: relative;
z-index: 1;
}
.dea-public-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 0 14px;
color: var(--magenta-text);
font-size: var(--fs-sm);
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.dea-public-hero h1 {
max-width: 720px;
margin: 0;
color: var(--ink);
font-size: clamp(38px, 4.6vw, 60px);
line-height: 1.02;
}
.dea-hero-line {
display: inline-block;
opacity: 0;
transform: translateY(26px);
animation: dea-hero-line-in 700ms cubic-bezier(0.22, 0.68, 0.32, 1) forwards;
animation-delay: calc(var(--line-index, 0) * 140ms + 80ms);
}
.dea-hero-line--accent {
position: relative;
color: var(--magenta);
}
.dea-hero-line--accent::after {
content: "";
position: absolute;
left: 0;
bottom: 4px;
width: 100%;
height: 4px;
border-radius: 2px;
background: var(--magenta);
transform: scaleX(0);
transform-origin: left center;
animation: dea-hero-underline 620ms cubic-bezier(0.22, 0.68, 0.32, 1) forwards;
animation-delay: 760ms;
}
.dea-public-hero-copy {
max-width: 640px;
margin: 18px 0 0;
color: var(--muted);
font-size: clamp(17px, 1.6vw, 19px);
line-height: 1.55;
}
.dea-public-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 24px;
}
.dea-public-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
border: 1px solid var(--line);
border-radius: 8px;
padding: 9px 18px;
background: var(--panel);
color: var(--ink);
text-decoration: none;
font-weight: 800;
transition:
border-color 180ms ease,
color 180ms ease,
transform 180ms ease;
}
.dea-public-secondary:hover,
.dea-public-secondary:focus {
border-color: var(--magenta);
color: var(--magenta-text);
transform: translateY(-1px);
}
.dea-public-secondary--dark {
background: transparent;
border-color: var(--night-line);
color: #ffffff;
}
.dea-public-secondary--dark:hover,
.dea-public-secondary--dark:focus {
border-color: var(--magenta);
color: #ffffff;
}
.dea-public-proof {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin-top: 28px;
max-width: 660px;
}
.dea-public-proof > div {
min-height: 84px;
padding: 14px;
border: 1px solid var(--line);
border-left: 3px solid var(--magenta);
border-radius: 8px;
background: var(--panel);
transition:
border-color 180ms ease,
box-shadow 180ms ease;
}
.dea-public-proof > div:hover {
border-color: rgba(226, 0, 116, 0.42);
border-left-color: var(--magenta);
box-shadow: 0 20px 44px -36px rgba(17, 17, 17, 0.6);
}
.dea-public-proof strong {
display: block;
color: var(--magenta);
font-size: 1.625rem;
line-height: 1;
}
.dea-public-proof span {
display: block;
margin-top: 7px;
color: var(--muted);
font-size: var(--fs-sm);
line-height: 1.4;
}
/* ---------- Hero visual ---------- */
.dea-public-visual {
position: relative;
width: min(100%, 560px);
margin-left: auto;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 10px;
background: var(--accent);
box-shadow: 0 34px 80px -48px rgba(17, 17, 17, 0.85);
overflow: hidden;
}
.dea-public-visual::before {
content: "";
position: absolute;
inset: -35% -20%;
background: var(--accent);
animation: dea-visual-aurora 14s ease-in-out infinite;
}
.dea-visual-topline,
.dea-visual-canvas,
.dea-visual-bottom {
position: relative;
z-index: 1;
}
.dea-visual-topline {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 16px 18px;
color: #ffffff; /* auf dem Magenta-Rahmen (war #c7ceda mit 2,96:1) */
font-size: var(--fs-xs);
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.dea-visual-topline strong {
display: inline-flex;
align-items: center;
gap: 7px;
color: #ffffff; /* war #ff4fa3 auf Magenta (1,5:1) */
}
.dea-visual-topline strong::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
animation: dea-live-pulse 1.8s ease-out infinite;
}
.dea-visual-canvas {
margin: 0 14px;
padding: 14px 12px 16px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
background: var(--night); /* die Canvas-Texte sind fuer dunklen Grund gesetzt - im Light-Theme war sie weiss */
background-size: 34px 34px;
overflow: hidden;
}
.dea-visual-flow {
display: block;
width: 100%;
height: 64px;
}
.dea-visual-flow-track,
.dea-visual-flow-glow {
fill: none;
stroke-linecap: round;
}
.dea-visual-flow-track {
stroke: rgba(255, 255, 255, 0.16);
stroke-width: 2;
}
.dea-visual-flow-glow {
stroke: var(--accent);
stroke-width: 2.5;
stroke-dasharray: 42 380;
animation: dea-flow-dash 5.2s linear infinite;
filter: drop-shadow(0 0 6px rgba(226, 0, 116, 0.75));
}
.dea-visual-lane {
display: flex;
justify-content: space-between;
gap: 6px;
margin-top: 4px;
}
.dea-visual-stage {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 9px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 999px;
color: #aab2c2;
font-size: var(--fs-xs);
font-weight: 800;
letter-spacing: 0.03em;
text-transform: uppercase;
white-space: nowrap;
transition:
border-color 320ms ease,
color 320ms ease,
background 320ms ease,
transform 320ms ease;
}
.dea-visual-stage i {
width: 7px;
height: 7px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.28);
transition: background 320ms ease, box-shadow 320ms ease;
}
.dea-visual-stage.is-done {
color: #d6dbe6;
}
.dea-visual-stage.is-done i {
background: #ffffff;
}
.dea-visual-stage.is-active {
border-color: rgba(226, 0, 116, 0.85);
background: rgba(226, 0, 116, 0.16);
color: #ffffff;
transform: translateY(-2px);
}
.dea-visual-stage.is-active i {
background: var(--accent);
box-shadow: 0 0 0 4px rgba(226, 0, 116, 0.22);
}
.dea-visual-feed {
position: relative;
min-height: 92px;
margin-top: 14px;
}
.dea-visual-feed-item {
position: absolute;
inset: 0;
display: grid;
align-content: start;
gap: 6px;
padding: 12px 14px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 8px;
background: rgba(255, 255, 255, 0.05);
opacity: 0;
transform: translateY(14px) scale(0.99);
transition:
opacity 460ms cubic-bezier(0.22, 0.68, 0.32, 1),
transform 460ms cubic-bezier(0.22, 0.68, 0.32, 1);
pointer-events: none;
}
.dea-visual-feed-item.is-active {
opacity: 1;
transform: translateY(0) scale(1);
}
.dea-visual-feed-item span {
justify-self: start;
padding: 3px 8px;
border-radius: 999px;
background: rgba(226, 0, 116, 0.2);
color: #ff77b7;
font-size: var(--fs-xs);
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.dea-visual-feed-item p {
margin: 0;
color: #e8ebf2;
font-size: var(--fs-base);
line-height: 1.45;
}
.dea-visual-bottom {
display: flex;
flex-wrap: wrap;
gap: 8px 18px;
padding: 14px 18px 16px;
color: #ffffff; /* war #8a93a6 auf Magenta (1,5:1) */
font-size: var(--fs-xs);
font-weight: 700;
}
/* ---------- Sections ---------- */
.dea-public-section {
padding: clamp(48px, 7vw, 96px) clamp(18px, 5vw, 72px);
}
.dea-public-section.dark {
--magenta-text: #ff3d9a; /* auch im Light-Theme liegt hier dunkler Grund */
--muted: #aab2c2;
background: var(--night);
color: #f2f4f9;
}
.dea-public-section-head {
display: flex;
flex-wrap: wrap;
align-items: end;
justify-content: space-between;
gap: 18px;
margin-bottom: clamp(24px, 3vw, 40px);
}
.dea-public-section-head h2 {
max-width: 720px;
margin: 0;
font-size: clamp(26px, 3vw, 38px);
line-height: 1.12;
}
.dea-public-section-lead {
max-width: 760px;
margin: 12px 0 0;
color: var(--muted);
font-size: var(--fs-lg);
line-height: 1.6;
}
.dea-public-section.dark .dea-public-section-lead {
color: #aab2c2;
}
/* ---------- Module board (Lösungsbausteine) ---------- */
.dea-module-section {
background: var(--panel);
}
.dea-module-board {
display: grid;
gap: 18px;
}
.dea-module-rail {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 6px 14px;
padding: 14px 20px;
border: 1px solid rgba(226, 0, 116, 0.4);
border-radius: 10px;
background: var(--panel);
overflow: hidden;
}
.dea-module-rail span {
color: var(--magenta-text);
font-size: var(--fs-md);
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.dea-module-rail small {
color: var(--muted);
font-size: var(--fs-sm);
font-weight: 700;
}
.dea-module-rail-pulse {
position: absolute;
left: -40%;
top: 0;
bottom: 0;
width: 40%;
background: linear-gradient(90deg, transparent, var(--magenta-soft), transparent); /* Vollflaeche lief ueber den Magenta-Text */
animation: dea-rail-sweep 4.5s ease-in-out infinite;
}
.dea-module-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.dea-module-card {
position: relative;
display: grid;
align-content: start;
gap: 10px;
padding: 22px 22px 20px;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--panel);
transition:
border-color 200ms ease,
box-shadow 200ms ease;
}
.dea-reveal.dea-module-card {
transition:
opacity 640ms cubic-bezier(0.22, 0.68, 0.32, 1),
transform 640ms cubic-bezier(0.22, 0.68, 0.32, 1),
border-color 200ms ease,
box-shadow 200ms ease;
transition-delay: var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), 0ms, 0ms;
}
.dea-module-card:hover {
border-color: rgba(226, 0, 116, 0.5);
box-shadow: 0 26px 54px -44px rgba(17, 17, 17, 0.7);
}
.dea-module-card h3 {
margin: 2px 0 0;
font-size: 1.125rem;
line-height: 1.25;
}
.dea-module-card p {
margin: 0;
color: var(--muted);
font-size: var(--fs-base);
line-height: 1.55;
}
.dea-module-port {
position: absolute;
top: -1px;
left: 26px;
width: 34px;
height: 4px;
border-radius: 0 0 3px 3px;
background: var(--line);
transition: background 200ms ease, box-shadow 200ms ease;
}
.dea-module-card:hover .dea-module-port {
background: var(--magenta);
box-shadow: 0 0 10px rgba(226, 0, 116, 0.55);
}
.dea-module-card--featured {
grid-column: span 2;
grid-row: span 2;
align-content: center;
gap: 14px;
border-color: rgba(226, 0, 116, 0.45);
background: var(--panel);
}
.dea-module-card--featured .dea-module-port {
background: var(--magenta);
}
.dea-module-card--featured h3 {
font-size: 1.3125rem;
}
.dea-module-badge {
justify-self: start;
padding: 4px 10px;
border-radius: 999px;
background: var(--magenta);
color: #ffffff;
font-size: var(--fs-xs);
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.dea-module-flow {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding: 12px 14px;
border: 1px dashed rgba(226, 0, 116, 0.35);
border-radius: 8px;
background: var(--soft);
}
.dea-module-flow b {
position: relative;
padding: 5px 11px;
border: 1px solid var(--line);
border-radius: 999px;
color: var(--muted);
font-size: var(--fs-xs);
font-weight: 800;
animation: dea-flow-step 7.5s ease-in-out infinite;
animation-delay: calc(var(--flow-index, 0) * 1.5s);
}
.dea-module-flow b:not(:last-child)::after {
content: "→";
position: absolute;
right: -13px;
color: var(--muted);
font-weight: 400;
}
.dea-module-flow b:not(:last-child) {
margin-right: 10px;
}
.dea-module-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 4px;
}
.dea-module-replaces {
margin: 6px 0 0;
padding-top: 10px;
border-top: 1px dashed var(--line);
color: var(--muted);
font-size: var(--fs-sm);
line-height: 1.45;
}
.dea-module-replaces span {
color: var(--magenta-text);
font-weight: 800;
letter-spacing: 0.03em;
text-transform: uppercase;
font-size: var(--fs-xs);
}
.dea-module-chips i {
padding: 4px 9px;
border: 1px solid var(--line);
border-radius: 999px;
color: var(--muted);
font-size: var(--fs-xs);
font-style: normal;
font-weight: 700;
transition: border-color 180ms ease, color 180ms ease;
}
.dea-module-card:hover .dea-module-chips i {
border-color: rgba(226, 0, 116, 0.4);
color: var(--ink);
}
/* ---------- Checker ---------- */
.dea-checker {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
gap: 18px;
}
.dea-checker-input,
.dea-checker-result {
padding: 22px;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--panel);
}
.dea-checker-input label {
display: block;
margin-bottom: 10px;
color: var(--muted);
font-size: var(--fs-sm);
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.dea-checker-input textarea {
width: 100%;
min-height: 170px;
padding: 14px;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--soft);
color: var(--ink);
font-family: inherit;
font-size: var(--fs-md);
line-height: 1.5;
resize: vertical;
transition: border-color 180ms ease, box-shadow 180ms ease;
}
.dea-checker-input textarea:focus {
outline: none;
border-color: var(--magenta);
box-shadow: 0 0 0 3px rgba(226, 0, 116, 0.14);
}
.dea-checker-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 14px;
}
.dea-checker-submit {
min-height: 42px;
padding: 9px 22px;
border: 1px solid var(--magenta);
border-radius: 8px;
background: var(--magenta);
color: #ffffff;
font-family: inherit;
font-size: var(--fs-md);
font-weight: 800;
cursor: pointer;
transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.dea-checker-submit:hover:not(:disabled),
.dea-checker-submit:focus:not(:disabled) {
background: var(--magenta-dark);
transform: translateY(-1px);
box-shadow: 0 14px 30px -18px rgba(226, 0, 116, 0.65);
}
.dea-checker-submit:disabled {
opacity: 0.65;
cursor: progress;
}
.dea-checker-examples {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.dea-checker-examples button {
padding: 7px 12px;
border: 1px solid var(--line);
border-radius: 999px;
background: transparent;
color: var(--muted);
font-family: inherit;
font-size: var(--fs-sm);
font-weight: 700;
cursor: pointer;
transition: border-color 180ms ease, color 180ms ease;
}
.dea-checker-examples button:hover,
.dea-checker-examples button:focus {
border-color: var(--magenta);
color: var(--magenta-text);
}
.dea-checker-result h3 {
margin: 12px 0 0;
font-size: var(--fs-xl);
}
.dea-checker-result > p {
margin: 10px 0 0;
color: var(--muted);
font-size: var(--fs-base);
line-height: 1.55;
}
.dea-risk-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
border-radius: 999px;
font-size: var(--fs-sm);
font-weight: 800;
letter-spacing: 0.03em;
text-transform: uppercase;
border: 1px solid var(--line);
color: var(--muted);
background: var(--soft);
}
.dea-risk-badge::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: currentColor;
}
.dea-risk-badge[data-risk="prohibited"] {
border-color: rgba(180, 35, 24, 0.4);
color: var(--danger);
background: rgba(180, 35, 24, 0.08);
}
.dea-risk-badge[data-risk="high"] {
border-color: rgba(226, 0, 116, 0.4);
color: var(--magenta-text);
background: var(--magenta-soft);
}
.dea-risk-badge[data-risk="limited"] {
border-color: rgba(183, 121, 31, 0.4);
color: var(--warn);
background: rgba(183, 121, 31, 0.08);
}
.dea-risk-badge[data-risk="minimal"] {
border-color: rgba(15, 138, 95, 0.4);
color: var(--ok);
background: rgba(15, 138, 95, 0.08);
}
.dea-risk-rationale {
font-size: var(--fs-sm);
}
.dea-checker-result ul {
margin: 12px 0 0;
padding-left: 18px;
color: var(--ink);
font-size: var(--fs-base);
line-height: 1.6;
}
.dea-checker-result li::marker {
color: var(--magenta);
}
.dea-checker-sources {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 14px;
}
.dea-checker-source-chip {
padding: 5px 10px;
border: 1px solid var(--line);
border-radius: 999px;
color: var(--muted);
font-size: var(--fs-xs);
font-weight: 700;
text-decoration: none;
transition: border-color 180ms ease, color 180ms ease;
}
.dea-checker-source-chip:hover,
.dea-checker-source-chip:focus {
border-color: var(--magenta);
color: var(--magenta-text);
}
.dea-checker-note {
margin-top: 14px;
padding-top: 12px;
border-top: 1px dashed var(--line);
color: var(--muted);
font-size: var(--fs-xs);
line-height: 1.5;
}
/* ---------- Slider ---------- */
.dea-public-slider {
display: grid;
gap: 14px;
}
.dea-public-slider-stage {
position: relative;
min-height: 210px;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--panel);
overflow: hidden;
}
.dea-public-slide {
position: absolute;
inset: 0;
display: grid;
align-content: center;
justify-items: start;
gap: 10px;
padding: clamp(22px, 3vw, 40px);
opacity: 0;
transform: translateX(28px);
transition:
opacity 520ms cubic-bezier(0.22, 0.68, 0.32, 1),
transform 520ms cubic-bezier(0.22, 0.68, 0.32, 1);
pointer-events: none;
}
.dea-public-slide.is-active {
opacity: 1;
transform: translateX(0);
pointer-events: auto;
}
.dea-card-kicker {
padding: 4px 10px;
border-radius: 999px;
background: var(--magenta-soft);
color: var(--magenta-text);
font-size: var(--fs-xs);
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.dea-public-slide h3 {
margin: 0;
font-size: clamp(19px, 2.2vw, 25px);
line-height: 1.18;
}
.dea-public-slide p {
max-width: 860px;
margin: 0;
color: var(--muted);
font-size: var(--fs-md);
line-height: 1.6;
}
.dea-public-slide a {
position: relative;
color: var(--magenta-text);
font-weight: 800;
font-size: var(--fs-base);
text-decoration: none;
}
.dea-public-slide a::after {
content: " →";
}
.dea-public-slide a:hover,
.dea-public-slide a:focus {
text-decoration: underline;
}
.dea-public-slider-progress {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 3px;
background: var(--line);
}
.dea-public-slider-progress span {
display: block;
height: 100%;
width: 100%;
background: var(--magenta);
transform-origin: left center;
animation: dea-public-slide-progress 9s linear infinite;
}
.dea-public-slider[data-slider-paused="true"] .dea-public-slider-progress span {
animation-play-state: paused;
}
.dea-public-slider-dots {
display: flex;
gap: 8px;
}
.dea-public-slider-dot {
width: 26px;
height: 6px;
border: 0;
border-radius: 999px;
background: var(--line);
cursor: pointer;
transition: background 200ms ease, width 200ms ease;
}
.dea-public-slider-dot.is-active {
width: 40px;
background: var(--magenta);
}
/* ---------- Timeline ---------- */
.dea-timeline {
position: relative;
margin-top: clamp(28px, 4vw, 48px);
padding: 26px 8px 4px;
}
.dea-timeline-track {
position: absolute;
left: 3%;
right: 3%;
top: 44px;
height: 3px;
border-radius: 2px;
background: var(--line);
overflow: hidden;
}
.dea-timeline-fill {
display: block;
height: 100%;
width: 0;
border-radius: 2px;
background: var(--magenta);
transition: width 1200ms cubic-bezier(0.22, 0.68, 0.32, 1) 200ms;
}
.dea-timeline.is-in .dea-timeline-fill {
width: 58%;
}
.dea-timeline-items {
position: relative;
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 8px;
}
.dea-timeline-item {
display: grid;
justify-items: center;
gap: 6px;
text-align: center;
}
.dea-timeline-item i {
width: 14px;
height: 14px;
border-radius: 50%;
border: 3px solid var(--line);
background: var(--panel);
transition: border-color 300ms ease, background 300ms ease;
}
.dea-timeline-item.is-done i {
border-color: var(--magenta);
background: var(--magenta);
}
.dea-timeline-item.is-now i {
border-color: var(--magenta);
background: var(--panel);
animation: dea-live-pulse-ring 2s ease-out infinite;
}
.dea-timeline-item strong {
font-size: var(--fs-base);
}
.dea-timeline-item span {
color: var(--muted);
font-size: var(--fs-sm);
line-height: 1.35;
max-width: 160px;
}
.dea-timeline-now {
padding: 2px 9px;
border-radius: 999px;
background: var(--magenta);
color: #ffffff;
font-size: var(--fs-xs);
font-style: normal;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
}
/* ---------- Compare (Mehrwert) ---------- */
.dea-compare {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
gap: 18px;
align-items: stretch;
}
.dea-compare-col {
padding: 26px;
border-radius: 10px;
border: 1px solid var(--line);
background: var(--panel);
}
.dea-compare-col h3 {
margin: 0;
font-size: var(--fs-xl);
}
.dea-compare-col > p {
margin: 8px 0 14px;
color: var(--muted);
font-size: var(--fs-base);
}
.dea-compare-col ul {
display: grid;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.dea-compare-col li {
position: relative;
padding-left: 26px;
font-size: var(--fs-md);
line-height: 1.5;
}
.dea-compare-col li::before {
position: absolute;
left: 0;
top: 1px;
font-weight: 800;
}
.dea-compare-col--without li {
color: var(--muted);
}
.dea-compare-col--without li::before {
content: "✕";
color: var(--danger);
}
.dea-compare-col--with {
border-color: rgba(226, 0, 116, 0.45);
background: var(--panel);
}
.dea-compare-col--with li::before {
content: "✓";
color: var(--magenta);
}
.dea-compare-divider {
display: grid;
place-items: center;
}
.dea-compare-divider span {
display: grid;
place-items: center;
width: 46px;
height: 46px;
border: 1px solid var(--line);
border-radius: 50%;
background: var(--panel);
color: var(--muted);
font-size: var(--fs-sm);
font-weight: 800;
text-transform: uppercase;
}
/* ---------- Mehrwert: Outcomes, Sub-Heads, Matrix ---------- */
.dea-sub-head {
margin: clamp(32px, 4vw, 52px) 0 18px;
color: var(--muted);
font-size: var(--fs-base);
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.dea-sub-head::after {
content: "";
display: block;
width: 44px;
height: 3px;
margin-top: 8px;
border-radius: 2px;
background: var(--magenta);
}
.dea-outcome-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
.dea-outcome-card {
position: relative;
padding: 20px 20px 18px;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--panel);
overflow: hidden;
transition: border-color 200ms ease, box-shadow 200ms ease;
}
.dea-outcome-card::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--magenta);
}
.dea-outcome-card:hover {
border-color: rgba(226, 0, 116, 0.5);
box-shadow: 0 24px 50px -42px rgba(17, 17, 17, 0.7);
}
.dea-outcome-card strong {
display: block;
color: var(--magenta);
font-size: 1.1875rem;
line-height: 1.2;
}
.dea-outcome-card p {
margin: 8px 0 0;
color: var(--muted);
font-size: var(--fs-base);
line-height: 1.5;
}
.dea-matrix-wrap {
overflow-x: auto;
}
.dea-matrix-table {
width: 100%;
min-width: 860px;
border-collapse: separate;
border-spacing: 0;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--panel);
overflow: hidden;
}
.dea-matrix-table th,
.dea-matrix-table td {
padding: 14px 16px;
border-bottom: 1px solid var(--line);
font-size: var(--fs-base);
line-height: 1.5;
text-align: left;
vertical-align: top;
}
.dea-matrix-table thead th {
background: var(--soft);
font-size: var(--fs-sm);
font-weight: 800;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--muted);
}
.dea-matrix-table thead th:first-child {
width: 16%;
}
.dea-matrix-table thead th.is-dea {
color: #ffffff;
background: var(--magenta);
}
.dea-matrix-table tbody th {
width: 16%;
color: var(--ink);
font-weight: 800;
}
.dea-matrix-table tbody td {
color: var(--muted);
}
.dea-matrix-table td.is-dea {
position: relative;
color: var(--ink);
font-weight: 700;
background: var(--magenta-soft);
border-left: 1px solid rgba(226, 0, 116, 0.35);
}
.dea-matrix-table td.is-dea::before {
content: "✓";
margin-right: 7px;
color: var(--magenta);
font-weight: 800;
}
.dea-matrix-table tbody tr:last-child th,
.dea-matrix-table tbody tr:last-child td {
border-bottom: 0;
}
.dea-matrix-table tbody tr {
transition: background 160ms ease;
}
.dea-matrix-table tbody tr:hover {
background: var(--soft);
}
.dea-matrix-table tbody tr:hover td.is-dea {
background: var(--magenta-soft);
}
/* ---------- Version table ---------- */
.dea-version-wrap {
display: grid;
gap: 16px;
overflow-x: auto;
}
.dea-version-table {
width: 100%;
min-width: 640px;
border-collapse: separate;
border-spacing: 0;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--panel);
overflow: hidden;
}
.dea-version-table thead th {
padding: 16px 18px;
border-bottom: 1px solid var(--line);
background: var(--soft);
text-align: left;
font-size: var(--fs-base);
}
.dea-version-table thead th:nth-child(2),
.dea-version-table thead th:nth-child(3) {
text-align: center;
min-width: 170px;
}
.dea-version-table thead th span {
display: block;
margin-bottom: 6px;
font-size: var(--fs-md);
}
.dea-version-table thead th:nth-child(3) span {
color: var(--magenta-text);
}
.dea-plan-detail-btn {
padding: 4px 12px;
border: 1px solid var(--line);
border-radius: 999px;
background: transparent;
color: var(--muted);
font-family: inherit;
font-size: var(--fs-xs);
font-weight: 700;
cursor: pointer;
transition: border-color 180ms ease, color 180ms ease;
}
.dea-plan-detail-btn:hover,
.dea-plan-detail-btn:focus,
.dea-plan-detail-btn.is-active {
border-color: var(--magenta);
color: var(--magenta-text);
}
.dea-version-table tbody th,
.dea-version-table tbody td {
padding: 13px 18px;
border-bottom: 1px solid var(--line);
font-size: var(--fs-base);
text-align: left;
}
.dea-version-table tbody tr:last-child th,
.dea-version-table tbody tr:last-child td {
border-bottom: 0;
}
.dea-version-table tbody td {
text-align: center;
}
.dea-version-table tbody tr.is-plus th {
background: var(--magenta-soft); /* Vollmagenta unter --ink/--muted (4,0:1 bzw. 2,1:1) */
}
.dea-version-table tbody tr {
transition: background 160ms ease;
}
.dea-version-table tbody tr:hover {
background: var(--soft);
}
.dea-feature-name {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 700;
}
.dea-feature-info-btn {
display: inline-grid;
place-items: center;
width: 20px;
height: 20px;
border: 1px solid var(--line);
border-radius: 50%;
background: transparent;
color: var(--muted);
font-family: inherit;
font-size: var(--fs-xs);
font-weight: 800;
cursor: pointer;
transition: border-color 180ms ease, color 180ms ease;
}
.dea-feature-info-btn:hover,
.dea-feature-info-btn:focus,
tr.is-info-open .dea-feature-info-btn {
border-color: var(--magenta);
color: var(--magenta-text);
}
.dea-feature-info-copy {
display: none;
margin-top: 8px;
color: var(--muted);
font-size: var(--fs-sm);
font-weight: 400;
line-height: 1.5;
}
tr.is-info-open .dea-feature-info-copy {
display: block;
}
.dea-plan-check {
color: var(--magenta-text);
font-size: var(--fs-lg);
font-weight: 800;
}
.dea-plan-missing {
color: var(--muted);
}
.dea-plan-detail-panel {
padding: 18px 22px;
border: 1px dashed var(--line);
border-radius: 10px;
color: var(--muted);
background: var(--panel);
transition: border-color 220ms ease;
}
.dea-plan-detail-panel.is-active {
border-color: rgba(226, 0, 116, 0.5);
border-style: solid;
color: var(--ink);
}
.dea-plan-detail-panel strong {
display: block;
margin-bottom: 6px;
font-size: var(--fs-md);
}
.dea-plan-detail-panel p {
margin: 0;
font-size: var(--fs-base);
line-height: 1.55;
color: var(--muted);
}
/* ---------- CTA band ---------- */
.dea-cta-band {
position: relative;
overflow: hidden;
}
.dea-cta-band::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(circle at 18% 40%, rgba(226, 0, 116, 0.28), transparent 58%); /* var(--panel) deckte im Light-Theme den dunklen Grund weiss ab */
animation: dea-visual-aurora 16s ease-in-out infinite;
}
.dea-cta-band-inner {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.dea-cta-band h2 {
max-width: 640px;
margin: 0;
font-size: clamp(26px, 3vw, 36px);
line-height: 1.14;
}
.dea-cta-band-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
/* ---------- Sources ---------- */
.dea-source-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.dea-source-chip {
display: grid;
gap: 6px;
padding: 16px 18px;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--panel);
text-decoration: none;
transition: border-color 180ms ease, box-shadow 180ms ease;
}
.dea-source-chip:hover,
.dea-source-chip:focus {
border-color: rgba(226, 0, 116, 0.5);
box-shadow: 0 20px 44px -38px rgba(17, 17, 17, 0.6);
}
.dea-source-chip strong {
font-size: var(--fs-md);
}
.dea-source-chip span {
color: var(--muted);
font-size: var(--fs-sm);
line-height: 1.45;
}
/* ---------- Footer ---------- */
.dea-public-footer {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px 24px;
padding: 22px clamp(18px, 5vw, 72px) 30px;
border-top: 1px solid var(--line);
color: var(--muted);
font-size: var(--fs-sm);
}
.dea-public-footer a {
color: inherit;
text-decoration: none;
}
.dea-public-footer a:hover,
.dea-public-footer a:focus {
color: var(--magenta-text);
}
/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
.dea-module-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dea-module-card--featured {
grid-column: span 2;
grid-row: auto;
}
}
@media (max-width: 980px) {
.dea-public-hero {
grid-template-columns: minmax(0, 1fr);
}
.dea-outcome-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dea-public-visual {
margin-left: 0;
width: 100%;
}
.dea-checker {
grid-template-columns: minmax(0, 1fr);
}
.dea-compare {
grid-template-columns: minmax(0, 1fr);
}
.dea-compare-divider {
padding: 2px 0;
}
.dea-public-nav a {
display: none;
}
}
@media (max-width: 760px) {
.dea-module-grid {
grid-template-columns: minmax(0, 1fr);
}
.dea-module-card--featured {
grid-column: span 1;
grid-row: auto;
}
.dea-public-proof {
grid-template-columns: minmax(0, 1fr);
}
.dea-timeline-track {
display: none;
}
.dea-timeline-items {
grid-template-columns: minmax(0, 1fr);
gap: 14px;
}
.dea-timeline-item {
grid-template-columns: auto auto 1fr;
justify-items: start;
align-items: center;
gap: 10px;
text-align: left;
}
.dea-timeline-item span {
max-width: none;
}
.dea-source-grid {
grid-template-columns: minmax(0, 1fr);
}
.dea-outcome-grid {
grid-template-columns: minmax(0, 1fr);
}
.dea-public-slider-stage {
min-height: 280px;
}
}
/* ---------- Keyframes ---------- */
@keyframes dea-public-slide-progress {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
@keyframes dea-grid-drift {
from {
background-position: 0 0, 0 0;
}
to {
background-position: 56px 56px, 56px 56px;
}
}
@keyframes dea-hero-orbit {
0%,
100% {
transform: translateY(0) scale(1);
}
50% {
transform: translateY(3%) scale(1.04);
}
}
@keyframes dea-hero-line-in {
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes dea-hero-underline {
to {
transform: scaleX(1);
}
}
@keyframes dea-visual-aurora {
0%,
100% {
transform: translate(0, 0) scale(1);
}
50% {
transform: translate(4%, 6%) scale(1.08);
}
}
@keyframes dea-live-pulse {
0% {
box-shadow: 0 0 0 0 rgba(226, 0, 116, 0.6);
}
70% {
box-shadow: 0 0 0 9px rgba(226, 0, 116, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(226, 0, 116, 0);
}
}
@keyframes dea-live-pulse-ring {
0% {
box-shadow: 0 0 0 0 rgba(226, 0, 116, 0.45);
}
70% {
box-shadow: 0 0 0 10px rgba(226, 0, 116, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(226, 0, 116, 0);
}
}
@keyframes dea-flow-dash {
from {
stroke-dashoffset: 422;
}
to {
stroke-dashoffset: 0;
}
}
@keyframes dea-flow-step {
0%,
16%,
100% {
border-color: var(--line);
color: var(--muted);
background: transparent;
}
4%,
10% {
border-color: var(--magenta);
color: var(--magenta-text);
background: var(--magenta-soft);
}
}
@keyframes dea-rail-sweep {
0% {
left: -40%;
}
60%,
100% {
left: 110%;
}
}
/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
.dea-public *,
.dea-public *::before,
.dea-public *::after {
animation-duration: 0.01ms;
animation-iteration-count: 1;
transition-duration: 0.01ms;
}
.dea-reveal,
.dea-hero-line {
opacity: 1;
transform: none;
}
.dea-hero-line--accent::after {
transform: scaleX(1);
}
.dea-timeline.is-in .dea-timeline-fill {
width: 58%;
}
}
/* END dea-public-home.css */
/* BEGIN dea-chat-process.css */
.dea-process-card {
display: grid;
gap: 10px;
padding: 10px;
border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
border-radius: 8px;
background: color-mix(in srgb, var(--accent) 7%, var(--surface));
box-shadow: 0 12px 28px -24px rgba(226, 0, 116, 0.65);
font-size: var(--fs-sm);
line-height: 1.4;
}
html[data-theme="light"] .wizard-stepper-shell,
:root:not([data-theme="dark"]) .wizard-stepper-shell {
background: #ffffff;
border-color: #dfe4ec;
box-shadow: 0 14px 34px -28px rgba(15, 23, 42, .32);
}
html[data-theme="light"] .wizard-stepper-title,
:root:not([data-theme="dark"]) .wizard-stepper-title {
color: #111827;
}
.wizard-stepper-title {
display: none !important;
}
.wizard-stepper-shell {
gap: 12px !important;
}
.wizard-step-pill {
font-size: calc(1em + 1pt) !important;
}
.dea-wizard-progress {
--dea-wizard-progress-percent: 20%;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
width: 100%;
}
.dea-wizard-progress-track {
position: relative;
height: 8px;
min-width: 0;
overflow: hidden;
border-radius: 999px;
background: color-mix(in srgb, var(--border) 72%, var(--surface));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 72%, transparent);
}
.dea-wizard-progress-track::after {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: var(--dea-wizard-progress-percent, 20%);
border-radius: inherit;
background: var(--accent);
transition: width .22s ease;
}
.dea-wizard-progress-meta {
color: var(--muted);
font-size: var(--fs-xs);
font-weight: 900;
white-space: nowrap;
}
.dea-wizard-stepper-progress {
margin-top: 2px;
}
html[data-theme="light"] .wizard-step-pill,
:root:not([data-theme="dark"]) .wizard-step-pill {
border-color: #cbd5e1;
background: var(--panel-2);
color: #334155;
}
html[data-theme="light"] .wizard-step-pill.active,
:root:not([data-theme="dark"]) .wizard-step-pill.active {
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 10%, #ffffff);
color: #111827;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent);
}
.dea-process-card[data-status="executed"] {
border-color: rgba(16, 185, 129, 0.55);
background: color-mix(in srgb, #10b981 8%, var(--surface));
}
.dea-process-card[data-status="cancelled"] {
border-color: rgba(148, 163, 184, 0.7);
background: color-mix(in srgb, #94a3b8 8%, var(--surface));
}
.dea-process-card[data-status*="missing"] {
border-color: rgba(245, 158, 11, 0.58);
background: color-mix(in srgb, #f59e0b 8%, var(--surface));
}
.dea-process-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
.dea-process-title {
margin: 0;
font-size: var(--fs-sm);
font-weight: 800;
}
.dea-process-summary,
.dea-process-message,
.dea-process-list {
margin: 0;
color: var(--muted);
}
.dea-process-badge {
flex: 0 0 auto;
max-width: 46%;
padding: 3px 7px;
border: 1px solid var(--border);
border-radius: 999px;
color: var(--text);
background: var(--surface);
font-size: var(--fs-xs);
font-weight: 700;
overflow-wrap: anywhere;
}
.dea-process-fields {
display: grid;
gap: 6px;
}
.dea-process-field {
display: grid;
grid-template-columns: minmax(84px, 0.42fr) minmax(0, 1fr);
gap: 8px;
padding: 6px 8px;
border: 1px solid var(--border);
border-radius: 7px;
background: var(--surface);
}
.dea-process-field-label {
color: var(--muted);
font-size: var(--fs-xs);
font-weight: 700;
}
.dea-process-field-value {
min-width: 0;
color: var(--text);
overflow-wrap: anywhere;
white-space: pre-wrap;
}
.dea-process-field-current {
margin-top: 2px;
color: var(--muted);
font-size: var(--fs-xs);
}
.dea-process-list {
padding-left: 17px;
}
.dea-process-list.compact {
display: grid;
gap: 3px;
margin-top: 3px;
}
.dea-process-suggestions {
display: grid;
gap: 7px;
padding: 8px;
border: 1px solid color-mix(in srgb, #10b981 38%, var(--border));
border-radius: 7px;
background: color-mix(in srgb, #10b981 7%, var(--surface));
}
.dea-process-suggestions-title,
.dea-process-suggestions-copy {
margin: 0;
}
.dea-process-suggestions-title {
color: var(--text);
font-size: var(--fs-xs);
font-weight: 900;
}
.dea-process-suggestions-copy {
color: var(--muted);
font-size: var(--fs-xs);
line-height: 1.35;
}
.dea-process-suggestion-actions {
display: grid;
gap: 6px;
}
.dea-process-suggestion-btn {
width: 100%;
min-height: 34px;
text-align: left;
overflow-wrap: anywhere;
}
.dea-process-sync {
display: grid;
gap: 5px;
padding: 7px 8px;
border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
border-radius: 7px;
background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}
.dea-process-sync-label {
color: var(--text);
font-size: var(--fs-xs);
font-weight: 800;
}
.dea-process-sync-summary {
margin: 0;
color: var(--muted);
}
.dea-process-sync-details {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.dea-process-sync-chip {
display: inline-flex;
max-width: 100%;
padding: 2px 6px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface);
color: var(--muted);
font-size: var(--fs-xs);
overflow-wrap: anywhere;
}
.dea-agent-process-guidance {
display: grid;
gap: 6px;
padding: 8px;
border: 1px solid color-mix(in srgb, #0ea5e9 38%, var(--border));
border-radius: 8px;
background: var(--panel);
}
.dea-agent-process-guidance[data-mode="full_agent"] {
border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
background: var(--panel);
}
.dea-agent-process-guidance-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.dea-agent-process-guidance-title {
color: var(--text);
font-size: var(--fs-xs);
font-weight: 900;
}
.dea-agent-process-guidance-mode {
flex: 0 0 auto;
padding: 2px 7px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface);
color: var(--text);
font-size: var(--fs-xs);
font-weight: 900;
}
.dea-agent-process-guidance-text,
.dea-agent-process-guidance-next {
margin: 0;
color: var(--muted);
font-size: var(--fs-xs);
line-height: 1.35;
}
.dea-agent-process-guidance-next {
color: var(--text);
font-weight: 800;
}
.dea-process-similar {
display: grid;
gap: 7px;
padding: 8px;
border: 1px solid color-mix(in srgb, #f59e0b 42%, var(--border));
border-radius: 8px;
background: color-mix(in srgb, #f59e0b 8%, var(--surface));
}
.dea-process-similar-title,
.dea-process-similar-copy {
margin: 0;
}
.dea-process-similar-title {
color: var(--text);
font-size: var(--fs-xs);
font-weight: 900;
}
.dea-process-similar-copy,
.dea-process-similar-meta,
.dea-process-similar-reason {
color: var(--muted);
font-size: var(--fs-xs);
line-height: 1.35;
}
.dea-process-similar-list {
display: grid;
gap: 6px;
}
.dea-process-similar-item {
display: grid;
gap: 2px;
padding: 6px 7px;
border: 1px solid var(--border);
border-radius: 7px;
background: var(--surface);
}
.dea-process-similar-name {
color: var(--text);
font-weight: 900;
overflow-wrap: anywhere;
}
.dea-process-guideline {
display: grid;
gap: 8px;
padding: 8px;
border: 1px solid var(--border);
border-radius: 7px;
background: var(--surface);
}
.dea-process-guideline-title {
margin: 0;
color: var(--text);
font-weight: 800;
}
.dea-process-guideline-objective,
.dea-process-guideline-label {
margin: 0;
color: var(--muted);
}
.dea-process-guideline-label {
font-size: var(--fs-xs);
font-weight: 800;
}
.dea-process-checklist {
display: grid;
gap: 5px;
}
.dea-process-checkitem {
display: grid;
grid-template-columns: 24px minmax(0, 1fr);
gap: 7px;
align-items: start;
}
.dea-process-checkmark {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 20px;
border: 1px solid var(--border);
border-radius: 999px;
color: var(--text);
background: color-mix(in srgb, #f59e0b 11%, var(--surface));
font-size: var(--fs-xs);
font-weight: 800;
}
.dea-process-checkitem[data-item-status="ready"] .dea-process-checkmark {
background: color-mix(in srgb, #10b981 13%, var(--surface));
}
.dea-process-checkitem[data-item-status="next"] .dea-process-checkmark {
background: color-mix(in srgb, var(--accent) 11%, var(--surface));
}
.dea-process-checklabel {
min-width: 0;
color: var(--text);
overflow-wrap: anywhere;
}
.dea-process-fulfillment {
display: grid;
gap: 8px;
padding: 8px;
border: 1px solid color-mix(in srgb, #0ea5e9 36%, var(--border));
border-radius: 7px;
background: color-mix(in srgb, #0ea5e9 6%, var(--surface));
}
.dea-process-fulfillment-title {
margin: 0;
color: var(--text);
font-size: var(--fs-xs);
font-weight: 900;
}
.dea-process-fulfillment-list {
display: grid;
gap: 6px;
}
.dea-process-fulfillment-item {
display: grid;
grid-template-columns: 26px minmax(0, 1fr);
gap: 7px;
align-items: start;
padding: 6px 7px;
border: 1px solid var(--border);
border-radius: 7px;
background: var(--surface);
}
.dea-process-fulfillment-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 22px;
border: 1px solid var(--border);
border-radius: 999px;
background: color-mix(in srgb, #f59e0b 12%, var(--surface));
color: var(--text);
font-size: var(--fs-xs);
font-weight: 900;
}
.dea-process-fulfillment-item[data-plan-type="check"] .dea-process-fulfillment-badge {
background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}
.dea-process-fulfillment-item[data-plan-type="evidence"] .dea-process-fulfillment-badge {
background: color-mix(in srgb, #0ea5e9 14%, var(--surface));
}
.dea-process-fulfillment-item[data-plan-type="acceptance"],
.dea-process-fulfillment-item[data-plan-type="review"] {
border-color: color-mix(in srgb, #10b981 32%, var(--border));
}
.dea-process-fulfillment-item[data-plan-type="acceptance"] .dea-process-fulfillment-badge,
.dea-process-fulfillment-item[data-plan-type="review"] .dea-process-fulfillment-badge {
background: color-mix(in srgb, #10b981 14%, var(--surface));
}
.dea-process-fulfillment-body {
display: grid;
gap: 2px;
min-width: 0;
}
.dea-process-fulfillment-instruction {
color: var(--text);
overflow-wrap: anywhere;
}
.dea-process-fulfillment-meta {
color: var(--muted);
font-size: var(--fs-xs);
overflow-wrap: anywhere;
}
.dea-process-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.dea-process-btn {
border: 1px solid var(--border);
border-radius: 8px;
padding: 7px 10px;
background: var(--surface);
color: var(--text);
font: inherit;
font-weight: 800;
cursor: pointer;
}
.dea-process-btn.primary {
border-color: var(--accent);
background: var(--accent);
color: #fff;
}
.dea-process-btn:disabled {
cursor: wait;
opacity: 0.65;
}
.dea-process-btn:hover:not(:disabled),
.dea-process-btn:focus:not(:disabled) {
transform: translateY(-1px);
}
.dea-agent-mode-control {
display: none !important;
gap: 8px;
padding: 10px 12px;
border-bottom: 1px solid var(--border);
background: var(--panel);
}
.dea-agent-mode-control-input {
flex: 0 0 auto;
width: auto;
padding: 0;
border: 0;
border-bottom: 0;
background: transparent;
}
.dea-agent-mode-control-panel {
flex: 0 0 auto;
width: auto;
padding: 0;
border: 0;
border-bottom: 0;
background: transparent;
}
.dea-agent-mode-control-inline {
position: relative;
border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
border-radius: 8px;
border-bottom-color: color-mix(in srgb, var(--accent) 28%, var(--border));
background: var(--panel);
}
.dea-agent-chat-overlay {
position: fixed;
top: 56px;
right: 0;
z-index: 5505;
width: var(--dea-chat-dock-width, 420px);
max-height: calc(100vh - 140px);
overflow: auto;
display: grid;
gap: 8px;
padding: 0 12px 8px;
pointer-events: none;
scrollbar-gutter: stable;
}
body:not(.dea-chat-docked) .dea-agent-chat-overlay {
display: none;
}
.dea-agent-chat-overlay > * {
pointer-events: auto;
}
.dea-agent-chat-overlay .dea-agent-mode-control {
border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
border-radius: 8px;
box-shadow: 0 16px 36px -30px color-mix(in srgb, var(--accent) 70%, #000);
}
.dea-agent-chat-overlay[data-agent-process-active="1"] {
max-height: 104px;
overflow: visible;
}
.dea-agent-chat-overlay[data-agent-process-active="1"] .dea-agent-start-actions {
display: none;
}
.dea-agent-mode-copy {
display: grid;
gap: 2px;
}
.dea-agent-mode-title-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.dea-agent-mode-eyebrow {
color: var(--text);
font-size: var(--fs-xs);
font-weight: 900;
}
.dea-agent-mode-info-btn {
width: 22px;
height: 22px;
min-width: 22px;
padding: 0;
border: 1px solid color-mix(in srgb, var(--accent) 44%, var(--border));
border-radius: 999px;
background: var(--surface);
color: var(--accent);
font: inherit;
font-size: var(--fs-xs);
font-weight: 900;
line-height: 1;
cursor: pointer;
}
.dea-agent-mode-info-btn:hover,
.dea-agent-mode-info-btn:focus {
background: var(--accent);
color: #fff;
}
.dea-agent-mode-summary {
color: var(--muted);
font-size: var(--fs-xs);
line-height: 1.3;
}
.dea-agent-mode-toggle {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
.dea-agent-mode-control-input .dea-agent-mode-toggle,
.dea-agent-mode-control-panel .dea-agent-mode-toggle {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 2px;
border: 1.5px solid var(--accent);
border-radius: 999px;
background: color-mix(in srgb, var(--surface) 84%, var(--accent) 16%);
}
.dea-agent-mode-toggle button {
min-height: 32px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface);
color: var(--text);
font: inherit;
font-size: var(--fs-xs);
font-weight: 900;
cursor: pointer;
}
.dea-agent-mode-control-input .dea-agent-mode-toggle button,
.dea-agent-mode-control-panel .dea-agent-mode-toggle button {
width: 32px;
height: 32px;
min-width: 32px;
min-height: 32px;
padding: 0;
border: 0;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
color: var(--accent);
font-size: 0;
}
.dea-agent-mode-control-input .dea-agent-mode-toggle button svg,
.dea-agent-mode-control-panel .dea-agent-mode-toggle button svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.dea-agent-mode-toggle button[data-active="1"] {
border-color: var(--accent);
background: var(--accent);
color: #fff;
}
.dea-agent-mode-control-input .dea-agent-mode-toggle button[data-active="1"],
.dea-agent-mode-control-panel .dea-agent-mode-toggle button[data-active="1"] {
background: var(--accent);
color: #fff;
}
.dea-agent-mode-info-popover {
position: absolute;
top: 34px;
right: 10px;
z-index: 3;
width: min(340px, calc(100vw - 48px));
display: grid;
gap: 8px;
padding: 10px 12px;
border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--border));
border-radius: 8px;
background: var(--card);
color: var(--text);
box-shadow: 0 18px 40px -24px rgba(15, 23, 42, .42);
}
.dea-agent-mode-info-popover[hidden] {
display: none;
}
.dea-agent-mode-info-popover p {
margin: 0;
color: var(--muted);
font-size: var(--fs-xs);
line-height: 1.45;
}
.dea-agent-mode-info-popover strong,
.dea-agent-mode-info-popover .dea-agent-mode-info-title {
color: var(--text);
}
.dea-agent-mode-info-popover .dea-agent-mode-info-title {
font-weight: 900;
}
.dea-agent-start-actions {
display: grid;
gap: 8px;
margin: 12px 0 4px;
padding: 10px;
border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--border));
border-radius: 8px;
background: var(--panel);
box-shadow: 0 16px 36px -30px color-mix(in srgb, var(--accent) 70%, #000);
}
.dea-agent-start-heading {
color: var(--text);
font-size: var(--fs-xs);
font-weight: 900;
letter-spacing: .02em;
}
.dea-agent-start-action {
width: 100%;
min-height: 58px;
display: grid;
grid-template-columns: 38px minmax(0, 1fr);
align-items: center;
gap: 10px;
padding: 10px;
border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border)) !important;
border-radius: 8px !important;
background: var(--surface) !important;
color: var(--text) !important;
text-align: left;
cursor: pointer;
transition: transform .14s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.dea-agent-start-action:hover,
.dea-agent-start-action:focus {
transform: translateY(-1px);
border-color: var(--accent) !important;
background: color-mix(in srgb, var(--accent) 10%, var(--surface)) !important;
box-shadow: 0 14px 28px -24px color-mix(in srgb, var(--accent) 80%, #000);
}
.dea-agent-start-badge {
width: 34px;
height: 34px;
display: inline-grid;
place-items: center;
border-radius: 8px;
background: var(--accent);
color: #fff;
font-size: var(--fs-xs);
font-weight: 900;
}
.dea-agent-start-copy {
min-width: 0;
display: grid;
gap: 2px;
}
.dea-agent-start-label {
color: var(--text);
font-size: var(--fs-sm);
font-weight: 900;
line-height: 1.2;
}
.dea-agent-start-detail {
color: var(--muted);
font-size: var(--fs-xs);
line-height: 1.25;
}
.dea-agent-field-highlight {
outline: 3px solid var(--accent) !important;
outline-offset: 3px;
box-shadow:
0 0 0 7px color-mix(in srgb, var(--accent) 14%, transparent),
0 0 0 1px color-mix(in srgb, #0ea5e9 48%, transparent) inset !important;
scroll-margin: 130px;
}
.dea-agent-required-missing {
outline: 3px solid var(--warn) !important;
outline-offset: 3px;
box-shadow:
0 0 0 7px color-mix(in srgb, #f59e0b 18%, transparent),
0 0 0 1px color-mix(in srgb, #f59e0b 52%, transparent) inset !important;
scroll-margin: 130px;
}
.dea-agent-mode-panel {
position: absolute;
left: var(--dea-agent-flow-left, calc(var(--dea3-rail-width, 100px) + 18px));
top: var(--dea-agent-flow-top, 88px);
z-index: 2100;
display: grid;
gap: 10px;
width: var(--dea-agent-flow-width, min(560px, calc(100vw - var(--dea-chat-dock-width, 360px) - var(--dea3-rail-width, 100px) - 48px)));
padding: 12px;
border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--border));
border-radius: 8px;
background: var(--surface);
color: var(--text);
box-shadow: var(--shadow);
font-size: var(--fs-sm);
line-height: 1.35;
}
.dea-agent-mode-reserved-container {
margin-top: 0 !important;
}
.dea-agent-mode-static-host {
clear: both;
width: 100%;
margin: 14px 0 22px;
scroll-margin: 120px;
}
.dea-agent-wizard-back-top {
width: fit-content;
margin: 0 0 10px;
}
body.dea-chat-docked .dea-agent-mode-static-host {
max-width: calc(100vw - var(--dea-chat-dock-width, 360px) - var(--sidebar-offset, 260px) - 56px);
}
.dea-agent-mode-static-host .dea-agent-mode-panel {
position: static;
left: auto;
right: auto;
bottom: auto;
z-index: auto;
width: 100%;
max-width: none;
margin: 0;
box-shadow: 0 10px 28px rgba(15, 23, 42, .12);
}
.dea-agent-mode-panel[data-layout="wizard-nav"] {
gap: 8px;
}
.dea-agent-mode-static-host .dea-agent-mode-panel[data-layout="wizard-nav"] {
width: 100%;
}
.dea-agent-mode-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.dea-agent-mode-panel-title,
.dea-agent-mode-panel-summary,
.dea-agent-mode-panel-missing,
.dea-agent-mode-panel-status {
margin: 0;
}
.dea-agent-mode-panel-title {
font-weight: 900;
}
.dea-agent-mode-panel-summary,
.dea-agent-mode-panel-missing,
.dea-agent-mode-panel-status {
color: var(--muted);
}
.dea-agent-mode-panel-status {
padding: 7px 8px;
border: 1px solid color-mix(in srgb, #10b981 38%, var(--border));
border-radius: 7px;
background: color-mix(in srgb, #10b981 8%, var(--surface));
color: var(--text);
font-size: var(--fs-xs);
font-weight: 800;
}
.dea-agent-mode-steps {
display: grid;
gap: 6px;
padding: 8px;
border: 1px solid color-mix(in srgb, #0ea5e9 34%, var(--border));
border-radius: 8px;
background: color-mix(in srgb, #0ea5e9 7%, var(--surface));
}
.dea-agent-mode-steps-title,
.dea-agent-mode-steps-note {
margin: 0;
}
.dea-agent-mode-steps-title {
color: var(--text);
font-size: var(--fs-xs);
font-weight: 900;
}
.dea-agent-mode-step-list {
display: grid;
gap: 5px;
margin: 0;
padding-left: 20px;
}
.dea-agent-mode-step {
color: var(--muted);
overflow-wrap: anywhere;
}
.dea-agent-mode-step[data-step-status="current"] {
color: var(--text);
font-weight: 900;
}
.dea-agent-mode-step[data-step-status="done"] {
color: #047857;
font-weight: 800;
}
.dea-agent-mode-steps-note {
color: var(--muted);
font-size: var(--fs-xs);
line-height: 1.35;
}
.dea-agent-mode-panel-badge {
flex: 0 0 auto;
padding: 3px 7px;
border: 1px solid color-mix(in srgb, #0ea5e9 45%, var(--border));
border-radius: 999px;
color: var(--text);
background: color-mix(in srgb, #0ea5e9 9%, var(--surface));
font-size: var(--fs-xs);
font-weight: 900;
}
.dea-agent-mode-field-list {
display: grid;
gap: 5px;
margin: 0;
padding-left: 18px;
color: var(--text);
}
.dea-agent-mode-result {
display: grid;
gap: 6px;
padding: 8px;
border: 1px solid color-mix(in srgb, #10b981 44%, var(--border));
border-radius: 8px;
background: color-mix(in srgb, #10b981 10%, var(--surface));
}
.dea-agent-mode-result-title,
.dea-agent-mode-result-copy {
margin: 0;
}
.dea-agent-mode-result-title {
color: var(--text);
font-weight: 900;
}
.dea-agent-mode-result-copy {
color: var(--muted);
overflow-wrap: anywhere;
}
.dea-agent-mode-panel-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.dea-agent-mode-panel-btn {
border: 1px solid var(--border);
border-radius: 8px;
padding: 7px 9px;
background: var(--surface);
color: var(--text);
font: inherit;
font-weight: 900;
cursor: pointer;
white-space: nowrap;
}
.dea-agent-mode-panel-btn.primary {
border-color: var(--accent);
background: var(--accent);
color: #fff;
}
.dea-agent-mode-panel-btn.danger {
border-color: color-mix(in srgb, #ef4444 55%, var(--border));
background: color-mix(in srgb, #ef4444 12%, var(--surface));
color: var(--text);
}
.dea-agent-mode-panel-btn:disabled {
cursor: wait;
opacity: 0.65;
}
.dea-wizard-chat-form {
position: relative;
display: grid;
gap: 8px;
margin: 0;
padding: 10px;
border: 1px solid color-mix(in srgb, #0ea5e9 36%, var(--border));
border-radius: 8px;
background: color-mix(in srgb, #0ea5e9 6%, var(--surface));
}
.dea-wizard-chat-entry {
scroll-margin: 16px;
}
.dea-wizard-chat-bubble {
width: min(100%, 320px);
}
.dea-wizard-checklist-entry {
scroll-margin: 16px;
}
.dea-wizard-checklist-bubble {
width: min(100%, 320px);
}
.dea-wizard-checklist {
display: grid;
gap: 8px;
padding: 10px;
border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
border-radius: 8px;
background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}
.dea-wizard-checklist-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.dea-wizard-checklist-title,
.dea-wizard-checklist-summary,
.dea-wizard-checklist-more {
margin: 0;
}
.dea-wizard-checklist-title {
color: var(--text);
font-size: var(--fs-xs);
font-weight: 900;
}
.dea-wizard-checklist-step {
flex: 0 0 auto;
padding: 2px 6px;
border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
border-radius: 999px;
color: var(--accent-2); /* AA auf der Magenta-Tint-Flaeche (P4-17b) */
background: color-mix(in srgb, var(--accent) 7%, var(--surface));
font-size: var(--fs-xs);
font-weight: 900;
}
.dea-wizard-checklist-summary,
.dea-wizard-checklist-more {
color: var(--muted);
font-size: var(--fs-xs);
line-height: 1.3;
}
.dea-wizard-checklist-list {
display: grid;
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
}
.dea-wizard-checklist-item {
display: grid;
grid-template-columns: 18px minmax(0, 1fr);
align-items: start;
gap: 7px;
color: var(--text);
font-size: var(--fs-xs);
line-height: 1.3;
}
.dea-wizard-checklist-item[data-done="1"] {
color: var(--muted);
}
.dea-wizard-checklist-box {
width: 16px;
height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1.5px solid color-mix(in srgb, var(--accent) 52%, var(--border));
border-radius: 4px;
color: #fff;
background: transparent;
font-size: var(--fs-xs);
font-weight: 900;
line-height: 1;
}
.dea-wizard-checklist-item[data-done="1"] .dea-wizard-checklist-box {
border-color: var(--ok);
background: var(--ok);
}
.dea-wizard-checklist-label {
min-width: 0;
overflow-wrap: anywhere;
}
.dea-wizard-audit-entry {
scroll-margin: 16px;
}
.dea-wizard-audit-bubble {
width: min(100%, 320px);
border: 1px solid color-mix(in srgb, #0ea5e9 32%, var(--border));
background: color-mix(in srgb, #0ea5e9 6%, var(--surface));
}
.dea-wizard-audit-bubble[data-audit-kind="warning"] {
border-color: color-mix(in srgb, #f59e0b 48%, var(--border));
background: color-mix(in srgb, #f59e0b 8%, var(--surface));
}
.dea-wizard-audit-bubble p {
margin: 0;
font-size: var(--fs-xs);
line-height: 1.38;
}
.dea-wizard-chat-form-title,
.dea-wizard-chat-form-copy {
margin: 0;
}
.dea-wizard-chat-form-title-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
}
.dea-wizard-chat-form-title {
color: var(--text);
font-size: var(--fs-xs);
font-weight: 900;
line-height: 1.3;
}
.dea-intended-purpose-info-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
min-width: 20px;
padding: 0;
border: 1px solid color-mix(in srgb, var(--accent) 58%, var(--border));
border-radius: 999px;
background: color-mix(in srgb, var(--accent) 9%, var(--surface));
color: var(--accent);
font: inherit;
font-size: var(--fs-xs);
font-weight: 900;
line-height: 1;
cursor: pointer;
}
.dea-intended-purpose-info-btn:hover,
.dea-intended-purpose-info-btn:focus {
background: var(--accent);
color: #fff;
}
.dea-intended-purpose-info-popover {
position: absolute;
top: 36px;
right: 8px;
z-index: 4;
width: min(292px, calc(100% - 16px));
display: grid;
gap: 7px;
padding: 10px 11px;
border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
border-radius: 8px;
background: var(--card);
color: var(--text);
box-shadow: 0 18px 40px -24px rgba(15, 23, 42, .42);
}
.dea-intended-purpose-info-popover[hidden] {
display: none;
}
.dea-intended-purpose-info-popover p {
margin: 0;
color: var(--muted);
font-size: var(--fs-xs);
line-height: 1.42;
}
.dea-intended-purpose-info-popover .dea-intended-purpose-info-title {
color: var(--text);
font-weight: 900;
}
.dea-wizard-chat-form-copy {
color: var(--muted);
font-size: var(--fs-xs);
line-height: 1.35;
}
.dea-wizard-chat-field {
display: grid;
gap: 5px;
min-width: 0;
color: var(--text);
font-size: var(--fs-xs);
font-weight: 850;
}
.dea-wizard-chat-field span {
overflow-wrap: anywhere;
}
.dea-wizard-chat-input {
width: 100%;
min-height: 50px;
resize: vertical;
border: 1px solid var(--border);
border-radius: 8px;
padding: 8px 9px;
background: var(--surface);
color: var(--text);
font: inherit;
font-size: var(--fs-xs);
line-height: 1.35;
}
.dea-wizard-chat-input:focus {
outline: 2px solid color-mix(in srgb, var(--accent) 48%, transparent);
outline-offset: 1px;
border-color: var(--accent);
}
[data-dea-intake-example="1"]::placeholder {
color: color-mix(in srgb, var(--muted) 84%, transparent);
opacity: 1;
}
.dea-intake-help-control {
position: relative;
display: flex;
justify-content: flex-end;
min-height: 20px;
margin: 0 0 6px;
}
.dea-intake-help-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
min-width: 20px;
padding: 0;
border: 1px solid color-mix(in srgb, var(--accent) 58%, var(--border));
border-radius: 999px;
background: color-mix(in srgb, var(--accent) 9%, var(--surface));
color: var(--accent);
font: inherit;
font-size: var(--fs-xs);
font-weight: 900;
line-height: 1;
cursor: pointer;
}
.dea-intake-help-button:hover,
.dea-intake-help-button:focus {
background: var(--accent);
color: #fff;
}
.dea-intake-help-popover {
position: absolute;
top: 26px;
right: 0;
z-index: 8;
width: min(310px, calc(100vw - 40px));
padding: 9px 10px;
border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border));
border-radius: 8px;
background: var(--card);
color: var(--muted);
box-shadow: 0 18px 40px -24px rgba(15, 23, 42, .46);
font-size: var(--fs-xs);
font-weight: 650;
line-height: 1.4;
}
.dea-intake-help-popover[hidden] {
display: none;
}
.dea-question-help-floating-popover {
position: fixed;
right: auto;
z-index: 6200;
max-width: calc(100vw - 32px);
}
.dea-wizard-chat-form-actions {
display: flex;
justify-content: flex-end;
}
.dea-wizard-chat-form-submit {
min-height: 32px;
border: 1px solid var(--accent);
border-radius: 8px;
padding: 7px 10px;
background: var(--accent);
color: #fff;
font: inherit;
font-size: var(--fs-xs);
font-weight: 900;
cursor: pointer;
}
.dea-wizard-chat-form-submit:disabled {
cursor: wait;
opacity: .72;
}
.dea-agent-mode-restore {
position: fixed;
left: calc(var(--dea3-rail-width, 100px) + 18px);
bottom: 88px;
z-index: 5461;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 1px solid color-mix(in srgb, var(--accent) 70%, var(--border));
border-radius: 999px;
background: var(--accent);
color: #fff;
box-shadow: var(--shadow);
cursor: pointer;
}
.dea-open-processes-panel {
position: fixed;
left: calc(var(--dea3-rail-width, 100px) + 18px);
bottom: 88px;
z-index: 5458;
width: min(360px, calc(100vw - var(--dea-chat-dock-width, 360px) - var(--dea3-rail-width, 100px) - 48px));
display: grid;
gap: 9px;
padding: 11px;
border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
border-radius: 8px;
background: var(--surface);
color: var(--text);
box-shadow: var(--shadow);
font-size: var(--fs-sm);
line-height: 1.35;
}
.dea-open-processes-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.dea-open-processes-head-actions {
display: inline-flex;
align-items: center;
gap: 6px;
}
.dea-open-processes-title {
margin: 0;
font-weight: 900;
}
.dea-open-processes-minimize {
width: 24px;
height: 24px;
min-width: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
border-radius: 999px;
background: var(--surface);
color: var(--text);
font: inherit;
font-size: var(--fs-base);
font-weight: 900;
line-height: 1;
cursor: pointer;
}
.dea-open-processes-panel[data-minimized="1"] {
width: min(260px, calc(100vw - var(--dea-chat-dock-width, 360px) - var(--dea3-rail-width, 100px) - 48px));
}
.dea-open-processes-count {
min-width: 24px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
border-radius: 999px;
color: var(--accent);
background: color-mix(in srgb, var(--accent) 8%, var(--surface));
font-size: var(--fs-xs);
font-weight: 900;
}
.dea-open-processes-list {
display: grid;
gap: 7px;
}
.dea-open-processes-item {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
align-items: center;
padding: 7px;
border: 1px solid var(--border);
border-radius: 8px;
background: color-mix(in srgb, var(--surface) 92%, var(--accent) 8%);
}
.dea-open-processes-copy {
min-width: 0;
display: grid;
gap: 7px;
}
.dea-open-processes-label {
min-width: 0;
overflow-wrap: anywhere;
font-weight: 800;
}
.dea-open-processes-progress {
gap: 6px;
}
.dea-open-processes-progress .dea-wizard-progress-track {
height: 6px;
}
.dea-open-processes-progress .dea-wizard-progress-meta {
font-size: var(--fs-xs);
}
.dea-open-processes-actions {
display: inline-flex;
align-items: center;
gap: 5px;
}
.dea-open-processes-btn {
width: 30px;
height: 30px;
min-width: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface);
color: var(--text);
font: inherit;
font-size: var(--fs-sm);
font-weight: 900;
cursor: pointer;
}
.dea-open-processes-btn.primary {
border-color: var(--accent);
background: var(--accent);
color: #fff;
}
.dea-open-processes-btn svg {
width: 15px;
height: 15px;
fill: currentColor;
}
.dea-start-open-processes-list {
display: grid;
gap: 8px;
}
.dea-start-open-processes-item {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
padding: 9px;
border: 1px solid var(--border);
border-radius: 8px;
background: color-mix(in srgb, var(--surface) 91%, var(--accent) 9%);
}
.dea-start-open-processes-copy {
min-width: 0;
display: grid;
gap: 7px;
}
.dea-start-open-processes-label {
min-width: 0;
overflow-wrap: anywhere;
color: var(--text);
font-weight: 850;
}
.dea-start-open-processes-progress .dea-wizard-progress-track {
height: 7px;
}
.dea-start-open-processes-actions {
display: inline-flex;
align-items: center;
gap: 6px;
}
.dea-start-open-processes-btn {
width: 32px;
height: 32px;
min-width: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface);
color: var(--text);
font: inherit;
font-size: var(--fs-sm);
font-weight: 900;
cursor: pointer;
}
.dea-start-open-processes-btn.primary {
border-color: var(--accent);
background: var(--accent);
color: #fff;
}
.dea-start-open-processes-btn svg {
width: 15px;
height: 15px;
fill: currentColor;
}
.dea-agent-mode-restore-icon {
width: 30px;
height: 30px;
display: block;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.dea-agent-prefill-notice {
position: fixed;
left: calc(var(--dea3-rail-width, 100px) + 18px);
bottom: 22px;
z-index: 5450;
max-width: min(520px, calc(100vw - var(--dea-chat-dock-width, 360px) - var(--dea3-rail-width, 100px) - 48px));
padding: 10px 12px;
border: 1px solid rgba(226, 0, 116, .45);
border-radius: 8px;
background: var(--surface);
color: var(--text);
box-shadow: var(--shadow);
font-size: var(--fs-sm);
line-height: 1.35;
}
body.dea-chat-docked {
--dea-chat-dock-width: clamp(340px, 25vw, 460px);
}
body.dea-chat-docked .app-content:not(.app-content-public) {
margin-right: var(--dea-chat-dock-width);
max-width: calc(100vw - var(--dea-chat-dock-width));
overflow-x: clip;
}
body.dea-chat-docked .chat-launcher {
display: none;
}
body.dea-chat-docked .chat-panel {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: auto;
width: var(--dea-chat-dock-width);
height: 100vh;
min-width: 0;
min-height: 0;
max-width: none;
max-height: none;
border-radius: 0;
border-top: 0;
border-right: 0;
border-bottom: 0;
resize: none;
z-index: 5400;
display: flex;
flex-direction: column;
overflow: hidden;
}
body.dea-chat-docked .chat-panel.maximized {
top: 0;
right: 0;
bottom: 0;
left: auto;
width: var(--dea-chat-dock-width);
height: 100vh;
max-width: none;
max-height: none;
}
body.dea-chat-docked .chat-header {
cursor: default;
}
body.dea-chat-docked .chat-output-window {
min-height: 0;
flex: 1 1 auto;
overflow: hidden;
}
body.dea-chat-docked .chat-panel .chat-controls,
.chat-panel.dea-chat-simplified .chat-controls,
.chat-panel.dea-agent-wizard-chat .chat-controls {
display: none !important;
visibility: hidden !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
overflow: hidden !important;
}
.dea-inline-process-start {
display: grid;
gap: 8px;
margin-top: 10px;
}
.dea-inline-process-start-btn {
width: 100%;
min-height: 36px;
justify-content: flex-start;
border-radius: 8px;
padding: 8px 10px;
font-size: var(--fs-sm);
font-weight: 900;
text-align: left;
border-color: color-mix(in srgb, var(--accent) 36%, var(--border));
background: var(--panel);
}
.dea-inline-process-start-btn:hover,
.dea-inline-process-start-btn:focus {
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}
body.dea-chat-docked .chat-panel.dea-agent-wizard-chat .chat-output-window {
flex: 1 1 auto;
min-height: 0;
margin-top: 8px;
}
body.dea-chat-docked .chat-body {
min-height: 0;
height: 100%;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-gutter: stable;
}
body.dea-chat-docked .chat-input {
min-height: 0;
max-height: min(34vh, 260px);
flex: 0 0 auto;
padding: 8px 10px 10px;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-gutter: stable;
background: var(--card);
}
body.dea-chat-docked .chat-input-row {
display: flex;
align-items: center;
gap: 8px;
min-height: 132px;
padding: 10px;
border: 1.5px solid var(--accent);
border-radius: 18px;
background: color-mix(in srgb, var(--surface) 92%, var(--accent) 8%);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent);
}
body.dea-chat-docked .chat-input-row textarea {
height: 108px !important;
min-height: 108px !important;
max-height: 168px !important;
resize: vertical;
flex: 1 1 auto;
min-width: 0;
border: 0 !important;
border-radius: 12px !important;
padding: 10px 12px !important;
background: var(--field-bg) !important;
color: var(--text) !important;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 72%, var(--accent) 28%) !important;
font-size: var(--fs-base) !important;
font-weight: 650;
line-height: 1.3;
}
body.dea-chat-docked .chat-input-row input[data-testid="dea-agent-chat-input"] {
flex: 1 1 auto;
min-width: 0;
min-height: 44px;
border: 0 !important;
border-radius: 12px !important;
padding: 10px 12px !important;
background: var(--field-bg) !important;
color: var(--text) !important;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 72%, var(--accent) 28%) !important;
font-size: var(--fs-base) !important;
font-weight: 650;
}
/* Die frueheren Theme-Sonderfaelle sind entfernt: sie ueberschrieben die
* tokenisierte Regel darueber mit festen Hex-Werten und setzten im Darkmode
* das FLAECHEN-Token --panel-2 (#1f1f24) als TEXTfarbe auf #0b0b10 - Kontrast
* ~1.1:1, die Eingabe war praktisch unsichtbar (Marco 28.08.).
* var(--field-bg)/var(--text) stimmen in beiden Themes. */
body.dea-chat-docked .chat-input-row textarea::placeholder {
color: color-mix(in srgb, var(--muted) 82%, var(--accent) 18%);
opacity: 1;
}
body.dea-chat-docked .chat-input-row textarea:focus {
outline: none !important;
box-shadow:
inset 0 0 0 1px color-mix(in srgb, var(--accent) 42%, var(--border)),
0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent) !important;
}
body.dea-chat-docked .chat-input-row input[data-testid="dea-agent-chat-input"]:focus {
outline: none !important;
box-shadow:
inset 0 0 0 1px color-mix(in srgb, var(--accent) 42%, var(--border)),
0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent) !important;
}
body.dea-chat-docked .chat-input-row .chat-icon-btn,
body.dea-chat-docked .chat-input-row button[data-testid="dea-agent-chat-send"] {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
min-width: 36px;
padding: 0 !important;
border-radius: 999px;
font-size: 1.5rem;
line-height: 1;
white-space: nowrap;
}
body.dea-chat-docked .chat-input-row .chat-icon-btn {
border: 1.5px solid var(--accent);
background: color-mix(in srgb, var(--surface) 84%, var(--accent) 16%);
color: var(--accent);
font-weight: 700;
}
body.dea-chat-docked .chat-input-row button[data-testid="dea-agent-chat-send"] {
border: 1.5px solid var(--accent);
background: color-mix(in srgb, var(--surface) 82%, var(--accent) 18%);
color: var(--accent);
}
body.dea-chat-docked .chat-input-row button[data-testid="dea-agent-chat-send"]:disabled {
opacity: .68;
cursor: not-allowed;
}
body.dea-chat-docked .chat-input-row .chat-icon-btn:hover,
body.dea-chat-docked .chat-input-row .chat-icon-btn:focus,
body.dea-chat-docked .chat-input-row button[data-testid="dea-agent-chat-send"]:hover:not(:disabled),
body.dea-chat-docked .chat-input-row button[data-testid="dea-agent-chat-send"]:focus:not(:disabled) {
background: var(--accent);
color: #ffffff;
}
body.dea-chat-docked .chat-input-row button[data-testid="dea-agent-chat-send"].active {
background: var(--accent);
color: #ffffff;
}
body.dea-chat-docked .chat-input-row button[data-testid="dea-agent-chat-send"] svg {
width: 18px;
height: 18px;
}
.dea-agent-legal-notice {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
flex-wrap: wrap;
margin-top: 8px;
color: var(--muted);
font-size: var(--fs-xs);
line-height: 1.25;
text-align: center;
}
.dea-agent-legal-notice a {
color: var(--accent);
font-weight: 800;
text-decoration: underline;
text-underline-offset: 3px;
}
.dea-agent-legal-notice a:hover,
.dea-agent-legal-notice a:focus {
color: var(--accent-2);
}
body.dea-chat-docked .guided-tour-panel {
right: calc(var(--dea-chat-dock-width) + 18px);
}
body.dea-chat-docked .log-panel {
max-width: calc(100vw - var(--dea-chat-dock-width) - var(--sidebar-offset, 260px) - 44px);
}
@media (max-width: 1180px) {
body.dea-chat-docked {
--dea-chat-dock-width: 340px;
}
}
@media (max-width: 520px) {
.dea-process-field {
grid-template-columns: 1fr;
}
.dea-process-badge {
max-width: 56%;
}
}
@media (max-width: 980px) {
.dea-agent-prefill-notice {
left: 12px;
right: 12px;
bottom: calc(62vh + 22px);
max-width: none;
}
body.dea-chat-docked .app-content:not(.app-content-public) {
margin-right: 0;
max-width: 100%;
}
body.dea-chat-docked .chat-panel,
body.dea-chat-docked .chat-panel.maximized {
top: auto;
right: 10px;
bottom: 10px;
left: 10px;
width: auto;
height: 62vh;
border: 1px solid var(--border);
border-radius: 12px;
}
.dea-agent-chat-overlay {
top: auto;
left: 10px;
right: 10px;
bottom: calc(62vh - 8px);
width: auto;
max-height: min(34vh, 320px);
}
body.dea-chat-docked .guided-tour-panel {
right: 10px;
}
.dea-agent-mode-panel {
left: 12px;
right: 12px;
top: var(--dea-agent-flow-top, 86px);
width: auto;
}
.dea-open-processes-panel {
left: 12px;
right: 12px;
bottom: calc(62vh + 22px);
width: auto;
}
body.dea-chat-docked .dea-agent-mode-static-host {
max-width: 100%;
}
.dea-agent-mode-static-host .dea-agent-mode-panel,
.dea-agent-mode-static-host .dea-agent-mode-panel[data-layout="wizard-nav"] {
position: static;
left: auto;
right: auto;
top: auto;
width: 100%;
}
}
/* ============================================================
* P3-14: DEA-Agent-Dock im RMS-Design (lean, Tokens, kein Glow).
* Overrides gegen die Bundle-Chatstyles; gilt fuer den gedockten
* und den freien Panel-Zustand.
* ============================================================ */
.chat-panel {
background: var(--panel) !important;
border: 1px solid var(--line) !important;
border-radius: var(--radius) !important;
box-shadow: var(--shadow) !important;
}
body.dea-chat-docked .chat-panel {
border-radius: 0 !important;
border-top: 0 !important;
border-bottom: 0 !important;
border-right: 0 !important;
}
.chat-header {
background: var(--panel) !important;
border-bottom: 1px solid var(--line) !important;
color: var(--text) !important;
box-shadow: none !important;
}
.chat-output-window,
.chat-body {
background: var(--bg) !important;
}
.chat-bubble {
background: var(--panel) !important;
border: 1px solid var(--line) !important;
border-radius: var(--radius) !important;
box-shadow: none !important;
color: var(--text) !important;
}
.chat-entry.user .chat-bubble {
background: var(--accent-soft) !important;
border-color: var(--accent) !important;
}
.chat-suggestion-btn,
.dea-inline-process-start-btn {
background: var(--panel) !important;
border: 1px solid var(--field-border) !important;
border-radius: 8px !important;
color: var(--text) !important;
box-shadow: none !important;
font-weight: 400 !important;
text-shadow: none !important;
}
.chat-suggestion-btn:hover,
.dea-inline-process-start-btn:hover {
border-color: var(--accent) !important;
color: var(--accent) !important;
background: var(--panel) !important;
}
.chat-input {
background: var(--panel) !important;
border-top: 1px solid var(--line) !important;
box-shadow: none !important;
}
.chat-input-row {
background: var(--field-bg) !important;
border: 1px solid var(--field-border) !important;
border-radius: 8px !important;
box-shadow: none !important;
}
.chat-input-row:focus-within {
border-color: var(--accent) !important;
}
.chat-input textarea,
.chat-input input {
background: transparent !important;
color: var(--field-text) !important;
box-shadow: none !important;
}
.chat-send-btn {
background: var(--accent) !important;
border: 1px solid var(--accent) !important;
color: #fff !important;
border-radius: 8px !important;
box-shadow: none !important;
}
.chat-icon-btn {
background: none !important;
border: 0 !important;
color: var(--muted) !important;
box-shadow: none !important;
}
.chat-icon-btn:hover { color: var(--accent) !important; background: var(--accent-soft) !important; }
.chat-context-pill {
background: var(--panel-2) !important;
border: 1px solid var(--line) !important;
color: var(--muted) !important;
border-radius: 999px !important;
box-shadow: none !important;
}
.dea-agent-legal-notice,
.dea-agent-legal-notice a {
color: var(--muted) !important;
}
.dea-agent-legal-notice a { text-decoration: underline; }
/* Bundle-Buttons (.btn/.btn.ghost) innerhalb des Chat-Panels neutralisieren */
.chat-panel .btn.ghost,
.chat-panel .chat-suggestions .btn {
background: var(--panel) !important;
border: 1px solid var(--field-border) !important;
color: var(--text) !important;
border-radius: 8px !important;
box-shadow: none !important;
}
.chat-panel .btn.ghost:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
.chat-panel .chat-input .btn:not(.chat-send-btn) {
background: none !important;
border: 0 !important;
color: var(--muted) !important;
}
.chat-panel .chat-input .btn:not(.chat-send-btn):hover { color: var(--accent) !important; }
.chat-input-row textarea { border: 0 !important; outline: none !important; }
/* CD: schwebender Chat-Launcher ohne Verlauf */
.chat-launcher {
background: var(--accent) !important;
background-image: none !important;
box-shadow: var(--shadow-hover, 0 2px 10px rgba(0, 0, 0, .12)) !important;
}
/* Offene Prozesse integriert auf der Use-Case-Übersicht (Marco 27.08.:
* das schwebende Panel unten links ist entfernt) */
.dea-ucl-open-processes {
margin: 0 0 14px;
padding: 12px 14px;
background: var(--panel, var(--surface));
border: 1px solid var(--line, var(--border));
border-radius: 10px;
display: grid;
gap: 9px;
}
.dea-ucl-open-processes-head { display: flex; align-items: center; gap: 8px; }
.dea-ucl-open-processes-head .dea-open-processes-title { margin: 0; }
/* END dea-chat-process.css */
/* BEGIN dea-chat-dock.css */
/* DEA Chat-Dock: Befehls-Palette (Slash-Befehle)
* Die Palette ist ein Flex-Geschwister direkt oberhalb von .chat-input im
* .chat-panel - NICHT absolut positioniert und NICHT Kind von .chat-input:
* dort hat das Basis-Stylesheet overflow:auto, was ein Kind mit bottom:100%
* wegschneidet (Element im DOM, aber unsichtbar).
*/
.dea-cd-palette {
flex: 0 0 auto;
margin: 0 12px 8px;
padding: 6px;
background: var(--panel);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
max-height: 220px;
overflow-y: auto;
}
.dea-cd-palette-head {
margin: 2px 6px 6px;
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: .05em;
color: var(--muted);
}
.dea-cd-palette-empty {
margin: 4px 6px;
font-size: var(--fs-sm);
color: var(--muted);
}
.dea-cd-palette-item {
display: flex;
align-items: baseline;
gap: 10px;
width: 100%;
padding: 7px 8px;
border: 1px solid transparent;
border-radius: var(--radius);
background: transparent;
color: var(--text);
font: inherit;
text-align: left;
cursor: pointer;
}
.dea-cd-palette-item:hover,
.dea-cd-palette-item.active {
background: var(--panel-2);
border-color: var(--line);
}
.dea-cd-palette-item:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
.dea-cd-palette-name {
flex: 0 0 auto;
font-weight: 600;
font-size: var(--fs-sm);
}
.dea-cd-palette-desc {
flex: 1 1 auto;
font-size: var(--fs-xs);
color: var(--muted);
}
/* P6-14: Rueckmeldung „war der Vorschlag brauchbar?" unter Assistenten-Antworten */
.chat-feedback { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: var(--fs-xs, 0.75rem); color: var(--muted); }
.chat-feedback-frage { margin-right: 2px; }
.chat-feedback-btn { border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px; background: transparent; color: var(--text); font-size: var(--fs-xs, 0.75rem); cursor: pointer; }
.chat-feedback-btn:hover { border-color: var(--accent, #e20074); }
.chat-feedback-btn[disabled] { opacity: 0.6; cursor: default; }
/* END dea-chat-dock.css */
/* BEGIN dea-requirement-evidence-forms.css */
/* Obligations & Requirements (P3-07 D2) - RMS-Design, nur Tokens, kein !important.
* Struktur: .panel/.chip/.btn/.alert kommen aus dea-components.css (.dea-ui-Scope);
* hier stehen nur seitenspezifische Layout-Regeln. */
.dea-req-page { display: grid; gap: 14px; align-content: start; }
.dea-req-back {
justify-self: start;
color: var(--muted);
font-size: var(--fs-sm);
text-decoration: none;
cursor: pointer;
}
.dea-req-back:hover { color: var(--accent); }
.dea-req-head { display: grid; gap: 4px; }
.dea-req-head h1 { margin: 0; }
.dea-req-head .sub { margin: 0; }
.dea-req-group-kicker { margin: 10px 0 0; }
/* Modul → Obligation → Requirement: aufklappbare weisse Panels mit 1px-Linien */
.dea-req-module { padding: 0; overflow: hidden; }
.dea-req-module > summary,
.dea-req-obligation > summary,
.dea-req-card > summary {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
padding: 12px 14px;
cursor: pointer;
list-style: none;
}
.dea-req-module > summary::-webkit-details-marker,
.dea-req-obligation > summary::-webkit-details-marker,
.dea-req-card > summary::-webkit-details-marker { display: none; }
.dea-req-card-title {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
min-width: 0;
}
.dea-req-card-title strong { overflow-wrap: anywhere; }
.dea-req-module-body {
display: grid;
gap: 10px;
padding: 12px 14px 14px;
border-top: 1px solid var(--line);
}
.dea-req-obligation {
border: 1px solid var(--line);
border-radius: var(--radius, 10px);
background: var(--panel);
overflow: hidden;
}
.dea-req-obligation-body {
display: grid;
gap: 8px;
padding: 0 12px 12px;
}
.dea-req-card {
border: 1px solid var(--line);
border-radius: var(--radius, 10px);
background: var(--panel);
overflow: hidden;
}
.dea-req-card-body { border-top: 1px solid var(--line); }
.dea-req-desc { margin: 0; padding: 10px 14px 0; white-space: pre-wrap; }
.dea-req-articles { margin: 0; padding: 6px 14px 0; }
/* Info-Popover ("i") - neutral, 1px, Panel-Hintergrund */
.dea-req-info { position: relative; display: inline-grid; place-items: center; }
.dea-req-info > summary {
display: inline-grid;
place-items: center;
width: 18px;
height: 18px;
border: 1px solid var(--line);
border-radius: 999px;
color: var(--muted);
background: var(--panel);
cursor: help;
font-size: var(--fs-xs);
font-weight: 700;
line-height: 1;
list-style: none;
}
.dea-req-info > summary::-webkit-details-marker { display: none; }
.dea-req-info[open] > summary { color: var(--accent); border-color: var(--accent); }
.dea-req-info > p {
position: absolute;
z-index: 20;
top: calc(100% + 8px);
left: 0;
width: min(420px, calc(100vw - 48px));
margin: 0;
border: 1px solid var(--line);
border-radius: var(--radius, 10px);
background: var(--panel);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
color: var(--text);
padding: 10px 12px;
font-size: var(--fs-xs);
font-weight: 400;
line-height: 1.5;
text-transform: none;
letter-spacing: normal;
}
.dea-req-info:not([open]) > p { display: none; }
/* Aktions-Links (Guidance / Formular / Risikoanalyse+) */
.dea-req-links {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
padding: 10px 14px 0;
}
.dea-req-page > .dea-req-links { padding: 0; }
/* Nachweisformular */
.dea-req-form {
display: grid;
gap: 10px;
padding: 12px 14px;
}
.dea-req-field { display: grid; gap: 4px; min-width: 0; }
.dea-req-field textarea { resize: vertical; }
/* .dea-ui label setzt Uppercase-Kicker - Eingaben und Hinweise davon ausnehmen */
.dea-req-field input,
.dea-req-field select,
.dea-req-field textarea,
.dea-req-field .fieldhint {
text-transform: none;
letter-spacing: normal;
font-weight: 400;
}
.dea-req-field input,
.dea-req-field select,
.dea-req-field textarea { font-size: var(--fs-sm); color: var(--text); }
.dea-req-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
flex-wrap: wrap;
}
.dea-req-upload {
position: relative;
overflow: hidden;
/* label erbt den Kicker-Look von .dea-ui label - hier wie ein Button aussehen */
text-transform: none;
letter-spacing: normal;
font-size: var(--fs-sm);
font-weight: 400;
color: var(--text);
}
.dea-req-upload input {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}
.dea-req-feedback { margin: 0; min-height: 18px; }
.dea-req-files {
display: grid;
gap: 4px;
margin: 0;
padding: 0 14px 12px 30px;
font-size: var(--fs-xs);
}
.dea-req-files a { color: var(--accent); }
/* AI-RMS-Trigger an High-Risk-Obligations (P3-23a) */
.dea-req-rms {
display: grid;
gap: 6px;
margin: 4px 12px 4px;
border: 1px solid var(--line);
border-radius: var(--radius, 10px);
background: var(--bg);
padding: 10px 12px;
}
.dea-req-rms-status { margin: 0; }
.dea-req-rms-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* Detailseiten */
.dea-req-detail-grid { align-items: start; }
.dea-req-guidance { display: grid; gap: 10px; min-width: 0; }
.dea-req-guidance-list { display: grid; gap: 6px; margin: 0; padding-left: 18px; }
.dea-req-bp-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.dea-req-md { display: grid; gap: 8px; min-width: 0; max-width: 880px; }
.dea-req-md h3, .dea-req-md h4 { margin: 8px 0 0; }
.dea-req-md p, .dea-req-md ul, .dea-req-md ol { margin: 0; color: var(--muted); line-height: 1.55; }
.dea-req-md ul, .dea-req-md ol { display: grid; gap: 6px; padding-left: 22px; }
.dea-req-md strong { color: var(--text); }
.dea-req-md a { color: var(--accent); overflow-wrap: anywhere; }
.dea-req-audit-hints { display: grid; gap: 10px; }
.dea-req-audit-block {
display: grid;
gap: 8px;
border: 1px solid var(--line);
border-radius: var(--radius, 10px);
background: var(--bg);
padding: 12px;
}
.dea-req-audit-block h3, .dea-req-audit-block h4 { margin: 0; }
.dea-req-audit-block .dea-req-md { max-width: none; gap: 6px; }
.dea-req-risk-list { display: grid; gap: 8px; }
.dea-req-risk-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
border: 1px solid var(--line);
border-radius: var(--radius, 10px);
background: var(--panel);
padding: 8px 10px;
}
.dea-req-analysis {
margin: 0;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: var(--radius, 10px);
background: var(--bg);
color: var(--text);
white-space: pre-wrap;
overflow-x: auto;
font-size: var(--fs-xs);
}
.dea-req-empty { color: var(--muted); }
@media (max-width: 720px) {
.dea-req-module > summary,
.dea-req-obligation > summary,
.dea-req-card > summary { grid-template-columns: 1fr; align-items: start; }
.dea-req-actions { justify-content: stretch; }
.dea-req-actions button, .dea-req-actions .btn { width: 100%; }
.dea-req-detail-grid { grid-template-columns: 1fr; }
.dea-req-info > p { left: auto; right: 0; }
}
/* Strukturierte Best Practice aus Katalog v2 (P7-04) */
.dea-req-bp-title { margin: 10px 0 4px; }
.dea-req-bp-section { margin: 12px 0; }
.dea-req-bp-section > h3 {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--muted);
margin: 0 0 6px;
}
.dea-req-bp-steps { margin: 6px 0 0; padding-left: 20px; }
.dea-req-bp-steps li { margin-bottom: 6px; }
.dea-req-bp-checks { margin: 6px 0 0; padding-left: 18px; }
.dea-req-bp-checks li { margin-bottom: 6px; }
/* Best-Practice-Pruefungen als Checkliste im Formular (P7-05) */
.dea-req-form-kicker { margin: 14px 0 4px; }
.dea-req-check {
display: grid;
grid-template-columns: 18px 1fr;
gap: 10px;
align-items: start;
border: 1px solid var(--line);
border-radius: 10px;
padding: 10px 12px;
background: var(--panel-2);
}
.dea-req-check input[type="checkbox"] { margin-top: 3px; }
.dea-req-check-text { display: grid; gap: 4px; }
.dea-req-check-text small.fieldhint { color: var(--muted); line-height: 1.4; }
/* Historie: nach einer Neubewertung weggefallene Pflichten (P7-21) */
.dea-req-history-entry {
display: grid;
gap: 8px;
border: 1px solid var(--line);
border-radius: 10px;
padding: 10px 12px;
background: var(--panel-2);
}
.dea-req-history-reason {
margin: 0;
color: var(--muted);
line-height: 1.5;
}
/* END dea-requirement-evidence-forms.css */
/* BEGIN dea-model-ai-act-profile.css */
/* Assessment-Scope-Dialog, Import-Panel und Status-Board der Modellverwaltung
* (Gegenstueck zu dea-model-ai-act-profile.js). Die Stile des frueheren
* Inline-GPAI-Profils an der Neuanlage-Karte sind entfallen - das Profil ist
* source-owned in dea-model-admin.js/.css. */
.dea-assessment-scope-backdrop {
position: fixed;
inset: 0;
z-index: 7600;
display: grid;
place-items: center;
padding: 20px;
background: rgba(0, 0, 0, 0.58);
}
body.dea-chat-docked .dea-assessment-scope-backdrop {
right: var(--dea-chat-dock-width, 360px);
}
.dea-assessment-scope-modal {
width: min(520px, 94vw);
border: 1px solid rgba(226, 0, 116, 0.42);
border-radius: 8px;
background: var(--card, #111217);
color: var(--text, #f7f7f8);
box-shadow: 0 24px 80px -28px rgba(0, 0, 0, 0.85);
padding: 18px;
}
.dea-assessment-scope-modal h3 {
margin: 0 0 8px;
font-size: var(--fs-xl);
}
.dea-assessment-scope-choices {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-top: 14px;
}
.dea-assessment-scope-choice {
min-height: 108px;
display: grid;
align-content: center;
gap: 8px;
text-align: left;
border: 1px solid rgba(226, 0, 116, 0.48);
border-radius: 8px;
background: rgba(226, 0, 116, 0.07);
color: inherit;
cursor: pointer;
padding: 14px;
}
.dea-assessment-scope-choice strong {
font-size: 1.125rem;
}
.dea-assessment-scope-choice span {
font-size: var(--fs-sm);
color: var(--muted, #a1a1aa);
}
.dea-assessment-scope-choice:hover,
.dea-assessment-scope-choice:focus {
border-color: var(--accent);
outline: 2px solid rgba(226, 0, 116, 0.2);
}
.dea-assessment-scope-choice.is-optional-signed {
border-color: rgba(34, 197, 94, 0.9);
background: rgba(34, 197, 94, 0.11);
}
.dea-assessment-scope-choice.is-optional-signed span {
color: var(--ok);
}
.dea-assessment-scope-footer {
display: flex;
justify-content: flex-end;
margin-top: 14px;
}
.dea-scoped-assessment-modal {
width: min(1120px, 96vw);
max-height: min(900px, 92vh);
overflow: hidden;
display: grid;
grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}
.dea-scoped-assessment-list {
display: grid;
gap: 8px;
min-height: 0;
overflow: auto;
padding-right: 2px;
}
.dea-assessment-summary-bar {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 10px 0 14px;
}
.dea-assessment-summary-bar span {
border: 1px solid var(--border, rgba(255, 255, 255, 0.16));
border-radius: 999px;
padding: 6px 10px;
font-size: var(--fs-sm);
font-weight: 700;
}
.dea-assessment-summary-bar .is-fulfilled {
border-color: rgba(34, 197, 94, 0.58);
background: rgba(34, 197, 94, 0.12);
color: var(--ok);
}
.dea-assessment-summary-bar .is-partial {
border-color: rgba(234, 179, 8, 0.64);
background: rgba(234, 179, 8, 0.14);
color: var(--warn);
}
.dea-assessment-summary-bar .is-not-fulfilled {
border-color: rgba(248, 113, 113, 0.62);
background: rgba(248, 113, 113, 0.12);
color: var(--bad);
}
.dea-assessment-table-wrap {
min-height: 0;
overflow: auto;
border: 1px solid var(--border, rgba(255, 255, 255, 0.15));
border-radius: 8px;
background: var(--surface, rgba(255, 255, 255, 0.05));
}
.dea-assessment-table {
width: 100%;
min-width: 980px;
border-collapse: collapse;
table-layout: fixed;
}
.dea-assessment-table th,
.dea-assessment-table td {
border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.12));
padding: 12px;
text-align: left;
vertical-align: top;
font-size: var(--fs-sm);
line-height: 1.38;
}
.dea-assessment-table th {
position: sticky;
top: 0;
z-index: 1;
background: var(--card, #111217);
color: var(--muted, #a1a1aa);
font-size: var(--fs-xs);
text-transform: uppercase;
}
.dea-assessment-table th:nth-child(1) {
width: 19%;
}
.dea-assessment-table th:nth-child(2) {
width: 25%;
}
.dea-assessment-table th:nth-child(3) {
width: 27%;
}
.dea-assessment-table th:nth-child(4) {
width: 15%;
}
.dea-assessment-table th:nth-child(5) {
width: 14%;
}
.dea-assessment-table tr:last-child td {
border-bottom: 0;
}
.dea-assessment-name-cell {
font-weight: 700;
color: var(--text, #f7f7f8);
}
.dea-assessment-evidence-cell {
white-space: pre-line;
}
.dea-assessment-source-stack {
display: grid;
gap: 6px;
}
.dea-assessment-source-stack a {
color: var(--accent);
overflow-wrap: anywhere;
text-decoration: underline;
text-underline-offset: 3px;
}
.dea-assessment-status-wrap {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 8px;
}
.dea-assessment-status-wrap strong {
font-size: var(--fs-xs);
}
.dea-assessment-status-badge {
display: inline-grid;
place-items: center;
width: 26px;
height: 26px;
border-radius: 999px;
color: #fff;
font-size: var(--fs-lg);
font-weight: 800;
line-height: 1;
}
.dea-assessment-status-badge.is-fulfilled {
background: var(--ok);
}
.dea-assessment-status-badge.is-partial {
background: #eab308;
color: var(--text);
}
.dea-assessment-status-badge.is-not-fulfilled {
background: #dc2626;
}
.dea-import-scope-panel {
display: grid;
gap: 10px;
margin: 10px 0 12px;
border: 1px solid rgba(226, 0, 116, 0.34);
border-radius: 8px;
background: rgba(226, 0, 116, 0.06);
padding: 12px;
}
.dea-import-scope-panel h4 {
margin: 0;
font-size: var(--fs-md);
}
.dea-import-scope-tabs {
display: inline-flex;
flex-wrap: wrap;
gap: 8px;
}
.dea-import-scope-tabs button {
width: auto;
border: 1px solid rgba(226, 0, 116, 0.42);
border-radius: 8px;
background: transparent;
color: inherit;
cursor: pointer;
padding: 7px 12px;
}
.dea-import-scope-tabs button.is-active {
border-color: var(--accent);
background: rgba(226, 0, 116, 0.18);
}
.dea-import-example-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 10px;
}
.dea-import-example-card[hidden],
.dea-import-original-hidden {
display: none !important;
}
.dea-import-example-card {
display: grid;
gap: 8px;
min-width: 0;
border: 1px solid var(--border, rgba(255, 255, 255, 0.15));
border-radius: 8px;
background: var(--surface, rgba(255, 255, 255, 0.04));
padding: 10px;
}
.dea-import-example-header {
display: flex;
align-items: center;
gap: 8px;
justify-content: space-between;
}
.dea-import-example-header strong {
margin-right: auto;
}
.dea-import-copy-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
min-height: 34px;
padding: 0;
color: var(--accent);
}
.dea-import-example-card pre {
max-height: 240px;
overflow: auto;
margin: 0;
border-radius: 8px;
background: rgba(0, 0, 0, 0.28);
padding: 10px;
font-size: var(--fs-xs);
line-height: 1.35;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.dea-import-textarea-slot {
display: grid;
gap: 6px;
}
.dea-import-textarea-slot textarea {
width: 100%;
min-height: 260px;
resize: vertical;
}
.dea-import-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: -2px;
}
.dea-import-actions button {
width: auto;
}
.dea-model-status-board-limited > .grid {
align-items: start;
}
.dea-model-status-board-limited > .grid > .card {
max-height: min(520px, 72vh);
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-gutter: stable;
scrollbar-color: rgba(226, 0, 116, 0.72) rgba(10, 10, 12, 0.92);
}
.dea-model-status-board-limited > .grid > .card::-webkit-scrollbar {
width: 10px;
}
.dea-model-status-board-limited > .grid > .card::-webkit-scrollbar-track {
background: rgba(10, 10, 12, 0.92);
border-radius: 999px;
}
.dea-model-status-board-limited > .grid > .card::-webkit-scrollbar-thumb {
border: 2px solid rgba(10, 10, 12, 0.92);
border-radius: 999px;
background: rgba(226, 0, 116, 0.72);
}
.dea-model-status-board-limited > .grid > .card::-webkit-scrollbar-thumb:hover {
background: var(--accent);
}
.dea-model-status-board-limited > .grid > .card > .row:first-child {
position: sticky;
top: 0;
z-index: 2;
background: var(--card, #111217);
padding-bottom: 8px;
}
.dea-assessment-scope-hint {
position: fixed;
right: 24px;
top: 86px;
z-index: 6500;
display: inline-flex;
align-items: center;
gap: 8px;
border: 1px solid rgba(226, 0, 116, 0.36);
border-radius: 8px;
background: var(--card, #111217);
color: var(--text, #f7f7f8);
box-shadow: 0 16px 46px -28px rgba(0, 0, 0, 0.8);
padding: 8px;
}
body.dea-chat-docked .dea-assessment-scope-hint {
right: calc(var(--dea-chat-dock-width, 360px) + 24px);
}
.dea-assessment-scope-hint span {
font-size: var(--fs-xs);
color: var(--muted, #a1a1aa);
}
.dea-assessment-scope-hint button {
width: auto;
min-height: 32px;
border: 1px solid rgba(226, 0, 116, 0.38);
border-radius: 8px;
background: transparent;
color: inherit;
cursor: pointer;
padding: 6px 10px;
}
.dea-assessment-scope-hint button.is-active {
border-color: var(--accent);
background: rgba(226, 0, 116, 0.18);
}
@media (max-width: 720px) {
.dea-assessment-scope-choices {
grid-template-columns: 1fr;
}
.dea-assessment-scope-hint {
right: 12px;
left: 12px;
top: auto;
bottom: 12px;
justify-content: center;
}
.dea-import-example-grid {
grid-template-columns: 1fr;
}
}
/* END dea-model-ai-act-profile.css */
/* BEGIN dea-support-tickets.css */
/* Tickets-Seite (source-owned, P3-07) - Layout-Ergänzungen zu dea-components.css */
.dea-support-page { padding-bottom: 60px; }
.dea-st-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
margin-bottom: 16px;
}
.dea-st-head .sub { margin: 0; }
.dea-st-back {
background: none; border: 0; padding: 0 0 8px; font: inherit; font-size: var(--fs-xs);
color: var(--accent); cursor: pointer; display: inline-block;
}
.dea-st-toolbar {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 14px;
margin-bottom: 12px;
}
.dea-st-toolbar input[type="text"] { flex: 0 1 300px; width: auto; }
.dea-st-tablewrap {
background: var(--panel);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 4px 14px 8px;
overflow-x: auto;
}
.dea-st-tablewrap tbody tr { cursor: pointer; }
.dea-st-tablewrap tbody tr:hover td { background: var(--panel-2); }
.dea-st-tablewrap tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dea-st-preview {
max-width: 420px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dea-st-empty { text-align: center; color: var(--muted); padding: 34px 16px; }
.dea-st-detail-actions { display: flex; align-items: center; gap: 10px; }
.dea-st-thread { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
.dea-st-message header {
display: flex; justify-content: space-between; gap: 10px; margin-bottom: 3px;
font-size: var(--fs-sm);
}
.dea-st-message p { margin: 0; white-space: normal; }
.dea-st-message + .dea-st-message { border-top: 1px solid var(--line); padding-top: 12px; }
.dea-st-reply label, .dea-st-create label { display: block; margin-bottom: 12px; }
.dea-st-reply textarea, .dea-st-create textarea, .dea-st-create input, .dea-st-create select { margin-top: 4px; }
.dea-st-reply-actions { display: flex; justify-content: flex-end; gap: 10px; }
@media (max-width: 720px) {
.dea-st-toolbar { flex-direction: column; align-items: stretch; }
.dea-st-toolbar input[type="text"] { flex: 1 1 auto; }
.dea-st-head { flex-direction: column; }
}
/* END dea-support-tickets.css */
/* BEGIN dea-risk-management.css */
/* Risikomanagement (P3-23b) - native RMS-Komponenten im RMS-Design, kein !important. */
.dea-rm-page { display: grid; gap: 14px; align-content: start; }
.dea-rm-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.dea-rm-head h1 { margin: 0; }
.dea-rm-head .sub { margin: 4px 0 0; }
.dea-rm-nav { display: flex; gap: 8px; flex-wrap: wrap; }
.dea-rm-back {
justify-self: start;
color: var(--muted);
font-size: var(--fs-sm);
text-decoration: none;
cursor: pointer;
}
.dea-rm-back:hover { color: var(--accent); }
.dea-rm-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.dea-rm-tablewrap { overflow-x: auto; }
.dea-rm-tablewrap table.data tbody tr[role="button"] { cursor: pointer; }
.dea-rm-tablewrap table.data tbody tr[role="button"]:hover td { background: var(--bg); }
.dea-rm-kv-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 12px;
}
.dea-rm-kv .sub { margin: 2px 0 0; white-space: pre-wrap; }
.dea-rm-items { display: grid; gap: 8px; }
.dea-rm-item {
border: 1px solid var(--line);
border-radius: var(--radius, 10px);
background: var(--panel);
padding: 10px 12px;
display: grid;
gap: 4px;
}
.dea-rm-item-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dea-rm-item .sub { margin: 0; }
.dea-rm-report-panel { display: grid; gap: 8px; }
.dea-rm-report-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dea-rm-report-row select { min-width: 170px; }
.dea-rm-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
}
.dea-rm-panel-head h2 { margin: 0; }
.dea-rm-panel-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.dea-rm-task-tabs { margin: 10px 0; }
.dea-rm-task-done td { opacity: 0.55; }
.dea-rm-checkbox {
display: flex;
align-items: center;
gap: 6px;
margin: 0;
text-transform: none;
letter-spacing: normal;
font-size: var(--fs-sm);
font-weight: 400;
color: var(--text);
}
.dea-rm-checkbox input { width: auto; }
.dea-rm-incident-form {
display: grid;
grid-template-columns: 2fr 1.4fr 1.4fr auto;
gap: 10px;
align-items: end;
margin-bottom: 12px;
}
.dea-rm-field { display: grid; gap: 4px; min-width: 0; }
.dea-rm-field .fieldhint {
text-transform: none;
letter-spacing: normal;
font-weight: 400;
}
.dea-rm-field input, .dea-rm-field select, .dea-rm-field textarea {
text-transform: none;
letter-spacing: normal;
font-weight: 400;
font-size: var(--fs-sm);
color: var(--text);
}
.dea-rm-empty,
.dea-rm-blocked { color: var(--muted); }
.dea-rm-blocked h2 { margin-bottom: 6px; }
@media (max-width: 900px) {
.dea-rm-incident-form { grid-template-columns: 1fr; align-items: stretch; }
}
/* Neue KI-Risikoanalyse (eigenstaendiger Start aus dem Register) */
.dea-rm-register-tools { display: flex; justify-content: flex-end; }
.dea-rm-new-panel { display: grid; gap: 10px; }
.dea-rm-new-tabs { margin: 0; }
.dea-rm-new-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 10px;
align-items: end;
}
.dea-rm-new-wide { grid-column: 1 / -1; }
.dea-rm-new-grid textarea { resize: vertical; }
.dea-rm-new-ident {
border: 1px solid var(--line);
border-radius: var(--radius, 10px);
background: var(--bg);
padding: 10px 12px;
display: grid;
gap: 4px;
}
.dea-rm-new-ident .sub { margin: 0; }
.dea-rm-new-actions { display: flex; gap: 8px; }
.dea-rm-new-feedback { margin: 0; min-height: 16px; }
@media (max-width: 900px) {
.dea-rm-new-grid { grid-template-columns: 1fr; align-items: stretch; }
}
/* ===== P3-25 Voll-native RMS-Flaeche: Shell, Stepper, Lauf, Ergebnisse ===== */
/* Reiterleiste (RMS nav.mainmenu: Magenta-Unterstrich) */
.dea-rm-mainmenu {
display: flex;
gap: 4px;
border-bottom: 1px solid var(--line);
margin: 6px 0 14px;
overflow-x: auto;
}
.dea-rm-mainmenu a {
border-bottom: 3px solid transparent;
padding: 8px 12px;
font-weight: 600;
font-size: var(--fs-base);
color: var(--muted);
text-decoration: none;
white-space: nowrap;
}
/* Text in --accent-2: #e20074 schafft auf --bg nur 4,21:1 (P4-17b-Muster) */
.dea-rm-mainmenu a:hover { color: var(--accent-2, var(--accent)); }
.dea-rm-mainmenu a.active { color: var(--accent-2, var(--accent)); border-bottom-color: var(--accent); }
.dea-rm-ucchip {
background: var(--panel);
border: 1px solid var(--line);
border-radius: 10px;
padding: 6px 12px;
font-size: var(--fs-sm);
color: var(--muted);
align-self: center;
}
.dea-rm-kpis { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.dea-rm-scroll { overflow-x: auto; }
.dea-rm-register-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
}
.dea-rm-register-head h2 { margin: 0; }
.dea-rm-register-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.dea-rm-register-tools input[type="search"] { min-width: 220px; }
.dea-rm-danger { color: var(--bad); }
.dea-rm-danger:hover { border-color: var(--bad); color: var(--bad); }
/* Risikomatrix */
.dea-rm-matrix td, .dea-rm-matrix th { text-align: center; }
.dea-rm-cell {
display: inline-block;
min-width: 26px;
padding: 2px 6px;
border-radius: 6px;
font-weight: 600;
}
.dea-rm-cell.band-low { background: #e8f5ec; color: var(--ok); }
.dea-rm-cell.band-medium { background: #fdf3e3; color: var(--warn); }
.dea-rm-cell.band-high { background: #fdeaec; color: var(--bad); }
/* Stepper (RMS .stepper: geschlossene Segment-Kette) */
.dea-rm-stepper { display: flex; flex-wrap: wrap; margin: 4px 0 12px; }
.dea-rm-step {
flex: 1;
min-width: 150px;
padding: 10px 14px 10px 20px;
background: var(--panel);
border: 1px solid var(--line);
cursor: pointer;
text-align: left;
display: grid;
grid-template-columns: auto 1fr;
gap: 2px 8px;
align-items: center;
}
.dea-rm-step:first-child { border-radius: 10px 0 0 10px; }
.dea-rm-step:last-child { border-radius: 0 10px 10px 0; }
.dea-rm-step + .dea-rm-step { border-left: none; }
.dea-rm-step .num {
width: 22px;
height: 22px;
border-radius: 50%;
border: 1px solid var(--line);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--fs-xs);
font-weight: 600;
}
.dea-rm-step .lbl { font-size: var(--fs-sm); font-weight: 600; }
.dea-rm-step .st { grid-column: 2; font-size: var(--fs-xs); color: var(--muted); }
.dea-rm-step.done .num { background: var(--ok); border-color: var(--ok); color: #fff; }
.dea-rm-step.current { border-color: var(--accent); background: var(--accent-soft); }
.dea-rm-step.current .num { background: var(--accent); border-color: var(--accent); color: #fff; }
/* CTA-Kasten (RMS .cta: gestrichelte Magenta-Border) */
.dea-rm-cta {
background: var(--panel);
border: 1px dashed var(--accent);
border-radius: 10px;
padding: 14px 18px;
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
margin-bottom: 14px;
}
.dea-rm-cta .hint { flex: 1; min-width: 240px; }
.dea-rm-cta .hint .sub { margin: 4px 0 0; }
.dea-rm-stale button { margin-left: 8px; }
/* Kontext */
.dea-rm-ctx-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.dea-rm-ctx-head h2 { margin: 0; }
.dea-rm-facts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px 12px;
margin-top: 8px;
}
.dea-rm-fact { display: grid; gap: 2px; }
.dea-rm-fact.full { grid-column: 1 / -1; }
.dea-rm-fact .fk {
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: .04em;
color: var(--muted);
}
.dea-rm-meter { display: grid; gap: 4px; margin: 8px 0; font-size: var(--fs-sm); }
.dea-rm-meter .bar {
height: 5px;
background: var(--panel-2);
border-radius: 99px;
overflow: hidden;
display: block;
}
.dea-rm-meter .bar i { display: block; height: 100%; background: var(--accent); }
.dea-rm-meter.ok .bar i { background: var(--ok); }
.dea-rm-meter.bad .bar i { background: var(--bad); }
.dea-rm-more { margin-top: 10px; }
.dea-rm-more > summary {
cursor: pointer;
color: var(--accent);
font-size: var(--fs-sm);
list-style: none;
}
.dea-rm-more > summary::before { content: "\25B8 "; }
.dea-rm-more[open] > summary::before { content: "\25BE "; }
.dea-rm-subhead { margin: 16px 0 6px; }
.dea-rm-wide { grid-column: 1 / -1; }
/* Lauf-Visualisierung (RMS runViz: Ring + Narrativ + Checkliste) */
.dea-rm-runviz { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 12px 0; }
.dea-rm-runpct { font-size: 1.4rem; font-weight: 700; margin-top: -86px; pointer-events: none; }
.dea-rm-runphase { font-size: var(--fs-xs); color: var(--muted); margin-bottom: 34px; pointer-events: none; }
.dea-rm-runlabel { font-weight: 600; }
.dea-rm-runnarrative { max-width: 520px; }
.dea-rm-runsteps { display: grid; gap: 4px; justify-items: start; margin-top: 8px; }
.dea-rm-runstep {
display: flex;
gap: 8px;
align-items: center;
font-size: var(--fs-sm);
animation: dea-rm-stepin .3s ease;
}
.dea-rm-runstep .chk {
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--ok);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
}
.dea-rm-rundone { display: flex; gap: 10px; margin-top: 10px; }
.dea-rm-runspin { animation: dea-rm-ringspin 1.8s linear infinite; transform-origin: 66px 66px; }
@keyframes dea-rm-ringspin { to { transform: rotate(360deg); } }
@keyframes dea-rm-stepin { from { opacity: 0; transform: translateY(4px); } }
.dea-rm-phasegrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-top: 8px;
}
.dea-rm-phase {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
border: 1px solid var(--line);
border-radius: 8px;
padding: 6px 10px;
font-size: var(--fs-sm);
}
.dea-rm-phase.done { border-color: var(--ok); }
/* Ergebnisse: Tiles, Banner, Karten */
.dea-rm-tiles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 12px;
margin-bottom: 12px;
}
.dea-rm-tile {
background: var(--panel);
border: 1px solid var(--line);
border-radius: 10px;
padding: 10px 14px;
display: grid;
gap: 2px;
}
.dea-rm-tile .num { font-size: 1.35rem; font-weight: 700; }
.dea-rm-tile .lbl { font-size: var(--fs-xs); color: var(--muted); }
.dea-rm-tile.ok .num { color: var(--ok); }
.dea-rm-tile.bad .num { color: var(--bad); }
.dea-rm-classbanner { margin-bottom: 12px; }
.dea-rm-reviewbanner { border-left: 4px solid var(--warn); margin-bottom: 12px; }
.dea-rm-chips { display: flex; gap: 4px; flex-wrap: wrap; margin: 4px 0; }
.dea-rm-resulttabs { flex-wrap: wrap; }
.dea-rm-listtools { display: flex; gap: 10px; align-items: center; margin: 8px 0; }
.dea-rm-listtools input { max-width: 320px; }
.dea-rm-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
gap: 12px;
margin-top: 10px;
}
.dea-rm-cards-single { grid-template-columns: 1fr; }
.dea-rm-card h4 { margin: 0 0 4px; font-size: var(--fs-sm); }
.dea-rm-ev { padding-left: 18px; font-size: var(--fs-xs); color: var(--muted); }
/* Risikoketten-Board (RMS .board/.lane/.cardcol/.mini mit CSS-Pfeilen) */
.dea-rm-board { overflow-x: auto; display: grid; gap: 10px; }
.dea-rm-lane { display: flex; min-width: 1150px; }
.dea-rm-cardcol { flex: 1; min-width: 130px; padding-right: 22px; position: relative; }
.dea-rm-cardcol:not(:last-child)::after {
content: "";
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
border: 6px solid transparent;
border-left-color: #c9cdd4;
}
.dea-rm-mini {
border: 1px solid var(--line);
border-left: 3px solid var(--unknown, #9aa1ac);
border-radius: 8px;
background: var(--panel);
padding: 8px 10px;
height: 100%;
font-size: var(--fs-sm);
cursor: pointer;
display: grid;
gap: 3px;
align-content: start;
}
.dea-rm-mini:hover, .dea-rm-mini:focus-visible { border-color: var(--accent); box-shadow: 0 1px 6px rgba(0,0,0,.08); }
.dea-rm-mini.band-low { border-left-color: var(--ok); }
.dea-rm-mini.band-medium { border-left-color: var(--warn); }
.dea-rm-mini.band-high, .dea-rm-mini.band-critical { border-left-color: var(--bad); }
.dea-rm-mini .k {
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: .04em;
color: var(--muted);
}
/* Review-Formular (RMS .reviewbox) */
.dea-rm-reviewbox {
border: 1px dashed var(--line);
border-radius: 8px;
padding: 10px 12px;
margin-top: 8px;
display: grid;
gap: 8px;
}
.dea-rm-reviewwhy {
border-left: 3px solid var(--accent);
background: var(--accent-soft);
border-radius: 6px;
padding: 8px 10px;
margin-top: 6px;
font-size: var(--fs-sm);
}
/* Overlays/Dialoge (RMS Modal; Konvention dea-rm-*-dialog fuer den
* zentralen Tastatur-Aufwerter) */
.dea-rm-overlay {
position: fixed;
inset: 0;
background: rgba(20, 20, 25, .45);
z-index: 200;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 5vh 16px;
overflow: auto;
}
.dea-rm-dialog {
background: var(--panel);
border-radius: 14px;
max-width: 820px;
width: 100%;
max-height: 86vh;
display: flex;
flex-direction: column;
box-shadow: 0 18px 60px rgba(0, 0, 0, .25);
padding: 16px 18px;
}
.dea-rm-dialog-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
border-bottom: 1px solid var(--line);
padding-bottom: 8px;
margin-bottom: 10px;
}
.dea-rm-dialog-head h3 { margin: 0; }
.dea-rm-dialog-body { overflow: auto; }
.dea-rm-delete-dialog, .dea-rm-renew-dialog { max-width: 560px; }
.dea-rm-benchstep { display: flex; margin: 2px 0; }
/* Governance-Grid + Verbrauch */
.dea-rm-gov-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
align-items: start;
}
.dea-rm-gov-grid .panel { margin-top: 0; }
.dea-rm-usage-period { max-width: 180px; }
.dea-rm-tpexport { align-items: center; flex-wrap: wrap; }
.dea-rm-pmm-entry { display: flex; gap: 6px; align-items: center; }
.dea-rm-pmm-entry input { max-width: 110px; }
.dea-rm-diff { margin-top: 8px; }
@media (max-width: 1100px) {
.dea-rm-gov-grid { grid-template-columns: 1fr; }
.dea-rm-phasegrid { grid-template-columns: 1fr; }
.dea-rm-facts { grid-template-columns: 1fr; }
}
/* Screenreader-only (Tabellen-Captions der RM-Flaeche + Admin-Token-Seite) */
.dea-rm .sr-only,
.dea-atu .sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* Dark: Band-Zellen/Chips der Matrix nutzen im Light feste Tint-Hex -
* im Dark auf transparente Band-Toene mappen */
:root[data-theme="dark"] .dea-rm-cell.band-low { background: rgba(24, 125, 60, .25); color: #7ddf9f; }
:root[data-theme="dark"] .dea-rm-cell.band-medium { background: rgba(178, 106, 0, .25); color: #ffc36b; }
:root[data-theme="dark"] .dea-rm-cell.band-high { background: rgba(208, 2, 27, .25); color: #ff8f9c; }
/* Admin-Seite Token-Verbrauch (nutzt die dea-rm-Bausteine) */
.dea-atu-bar { min-width: 160px; }
.dea-atu-bar .dea-rm-meter { margin: 0; display: block; }
/* END dea-risk-management.css */
/* BEGIN dea-intake.css */
/* Erfassung Use Case / AI System / AI Agent (P3-24) - RMS-Design, kein !important. */
.dea-intake-page { display: grid; gap: 14px; align-content: start; }
.dea-in-back {
justify-self: start;
color: var(--muted);
font-size: var(--fs-sm);
text-decoration: none;
cursor: pointer;
}
.dea-in-back:hover { color: var(--accent); }
.dea-in-head h1 { margin: 0; }
.dea-in-head .sub { margin: 4px 0 0; max-width: 900px; }
.dea-in-tabs { margin: 0; }
.dea-in-source { display: grid; gap: 10px; }
.dea-in-source-row {
display: flex;
gap: 10px;
align-items: end;
flex-wrap: wrap;
}
.dea-in-source-row .dea-in-field { flex: 1 1 260px; }
.dea-in-candidates { display: grid; gap: 8px; }
.dea-in-candidate {
border: 1px solid var(--line);
border-radius: var(--radius, 10px);
background: var(--bg);
padding: 10px 12px;
display: grid;
gap: 4px;
}
.dea-in-candidate-head {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
.dea-in-candidate-head button { margin-left: auto; }
.dea-in-candidate .sub { margin: 0; }
.dea-in-form { display: grid; gap: 10px; }
.dea-in-context-title { margin: 6px 0 0; }
.dea-in-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 10px;
}
.dea-in-wide { grid-column: 1 / -1; }
.dea-in-field { display: grid; gap: 4px; min-width: 0; }
/* .dea-ui label setzt Uppercase-Kicker - Eingaben und Hinweise ausnehmen */
.dea-in-field input,
.dea-in-field select,
.dea-in-field textarea,
.dea-in-field .fieldhint {
text-transform: none;
letter-spacing: normal;
font-weight: 400;
}
.dea-in-field input,
.dea-in-field select,
.dea-in-field textarea { font-size: var(--fs-sm); color: var(--text); }
.dea-in-field textarea { resize: vertical; }
.dea-in-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.dea-in-feedback, .dea-in-save-feedback { margin: 0; min-height: 16px; }
@media (max-width: 720px) {
.dea-in-grid { grid-template-columns: 1fr; }
.dea-in-candidate-head button { margin-left: 0; }
}
/* Modellauswahl (Marco 28.08.: wie im Wizard - beide Erfassungswege konsistent) */
.dea-in-model-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 10px;
}
.dea-in-model-card {
border: 1px solid var(--line);
border-radius: var(--radius, 10px);
background: var(--bg);
padding: 10px 12px;
display: grid;
gap: 8px;
align-content: start;
}
.dea-in-model-card > strong { font-size: var(--fs-sm); }
.dea-in-model-card input {
border: 1px solid var(--form-line, #c9cdd4);
border-radius: var(--radius, 10px);
background: var(--panel);
color: var(--text);
padding: 8px 10px;
font: inherit;
font-size: var(--fs-sm);
min-width: 0;
}
.dea-in-model-list { display: grid; gap: 6px; max-height: 220px; overflow: auto; }
.dea-in-model-list .sub { margin: 0; }
.dea-in-model-add {
display: flex;
justify-content: space-between;
gap: 8px;
border: 1px solid var(--line);
border-radius: var(--radius, 10px);
background: var(--panel);
padding: 6px 10px;
cursor: pointer;
text-align: left;
font: inherit;
font-size: var(--fs-sm);
color: var(--text);
}
.dea-in-model-add:hover { border-color: var(--accent); }
.dea-in-model-selected {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
border: 1px solid var(--line);
border-radius: var(--radius, 10px);
background: var(--panel);
padding: 6px 10px;
}
.dea-in-model-name { font-weight: 600; font-size: var(--fs-sm); }
.dea-in-model-selected button {
border: 1px solid var(--line);
border-radius: 999px;
background: var(--bg);
width: 26px;
height: 26px;
cursor: pointer;
color: var(--muted);
line-height: 1;
}
.dea-in-model-selected button:hover { color: var(--accent); border-color: var(--accent); }
/* Automatische Erfassung (P3-26, Marco 31.08.): 1:1 aus der RMS-UI
* uebernommen (#docIntake/.uploadbtn aus rms_service/static/index.html) -
* bewusste Ausnahme von der "keine Magenta-Verlaeufe"-Regel auf Marcos
* explizite Anweisung, die RMS-Zone unveraendert zu kopieren.
* Genutzt von dea-intake.js UND dea-use-case-wizard.js. */
.dea-docintake {
border: 1px dashed #ecb9d3;
border-radius: 12px;
padding: 24px 18px 18px;
margin-top: 14px;
background: linear-gradient(180deg, #fff, #fdf4f9);
text-align: center;
transition: border-color .15s, background .15s;
}
.dea-docintake.drag { border-color: var(--accent); background: var(--accent-soft); }
.dea-docintake-row { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }
.dea-docintake .dea-uploadbtn,
.dea-uploadbtn {
display: inline-flex;
align-items: center;
gap: 9px;
background: linear-gradient(135deg, #e20074, #b8005f);
color: #fff;
border: none;
border-radius: 999px;
padding: 12px 28px;
font-weight: 600;
font-size: var(--fs-base);
cursor: pointer;
box-shadow: 0 4px 14px rgba(226, 0, 116, .25);
transition: transform .12s, box-shadow .12s;
}
.dea-docintake .dea-uploadbtn:hover,
.dea-uploadbtn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(226, 0, 116, .35); color: #fff; border: none; }
.dea-docintake .dea-uploadbtn:active,
.dea-uploadbtn:active { transform: translateY(0); }
.dea-docintake .dea-uploadbtn:disabled,
.dea-uploadbtn:disabled { opacity: .6; transform: none; box-shadow: none; }
.dea-docintake .dea-uploadbtn.ghost,
.dea-uploadbtn.ghost { background: #fff; color: var(--accent); border: 1.5px solid var(--accent); box-shadow: none; }
.dea-docintake .dea-uploadbtn.ghost:hover,
.dea-uploadbtn.ghost:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.dea-docintake-hint {
font-size: var(--fs-xs);
color: var(--muted);
margin: 12px auto 0;
max-width: 600px;
line-height: 1.5;
}
.dea-docintake-hint code { font-size: inherit; }
.dea-docintake-files { font-size: var(--fs-sm); color: var(--muted); margin-top: 4px; }
/* Dark: die weisse Verlaufszone auf Panel-Toene mappen (RMS kennt kein Dark) */
:root[data-theme="dark"] .dea-docintake {
background: linear-gradient(180deg, var(--panel), var(--panel-2));
border-color: rgba(226, 0, 116, .45);
}
:root[data-theme="dark"] .dea-uploadbtn.ghost { background: var(--panel); }
/* Mondoo-Ziel-Dialog (RMS openMondooChoice als DEA-Overlay, Konvention
* dea-*-dialog fuer den zentralen Tastatur-Aufwerter) */
.dea-in-mondoo-overlay {
position: fixed;
inset: 0;
background: rgba(20, 20, 25, .45);
z-index: 200;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 8vh 16px;
}
.dea-in-mondoo-dialog {
background: var(--panel);
border-radius: 14px;
max-width: 560px;
width: 100%;
padding: 18px;
box-shadow: 0 18px 60px rgba(0, 0, 0, .25);
}
.dea-in-mondoo-dialog h3 { margin: 0 0 10px; }
.dea-in-mondoo-dialog .dea-in-mondoo-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
/* Kandidaten-Mehrfachanlage */
.dea-in-candidate-batch {
display: flex;
gap: 14px;
align-items: center;
flex-wrap: wrap;
padding: 8px 0 12px;
border-bottom: 1px solid var(--line);
margin-bottom: 12px;
}
.dea-in-candidate-check { display: inline-flex; align-items: center; }
.dea-in-candidate-head [data-dea-in-open-created] {
margin-left: auto;
color: var(--ok);
font-weight: 600;
text-decoration: none;
}
.dea-in-candidate-head [data-dea-in-open-created]:hover { text-decoration: underline; }
/* END dea-intake.css */
/* BEGIN dea-documentation.css */
/* Dokumentation (source-owned, P3-07) - Ergänzungen zu dea-components.css */
.dea-docs-page { padding-bottom: 60px; }
.dea-docs-head { margin-bottom: 18px; }
.dea-docs-head .sub { margin: 0; }
.dea-docs-back {
background: none; border: 0; padding: 0 0 8px; font: inherit; font-size: var(--fs-xs);
color: var(--accent); cursor: pointer; display: inline-block;
}
.dea-docs-card { cursor: pointer; }
.dea-docs-card:hover { border-color: var(--accent); }
.dea-docs-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dea-docs-card h2 { margin-bottom: 6px; }
.dea-docs-more {
display: inline-block; margin-top: 10px; font-size: var(--fs-xs); font-weight: 600;
color: var(--accent);
}
.dea-docs-section { margin-bottom: 14px; }
.dea-docs-section p { margin: 0 0 10px; max-width: 74ch; }
.dea-docs-section p:last-child { margin-bottom: 0; }
/* END dea-documentation.css */
/* BEGIN dea-explore.css */
/* Explore (source-owned, P3-07) - Ergänzungen zu dea-components.css */
.dea-explore-page { padding-bottom: 60px; }
.dea-ex-head { margin-bottom: 16px; }
.dea-ex-head .sub { margin: 0; }
.dea-ex-search { margin-bottom: 18px; }
.dea-ex-search label { display: block; }
.dea-ex-search textarea { margin-top: 4px; }
.dea-ex-search-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 10px; }
.dea-ex-result-head { margin-bottom: 12px; }
.dea-ex-result-head h2 { margin-bottom: 2px; }
.dea-ex-result-head .sub { margin: 0; }
.dea-ex-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.dea-ex-card-head h2 { margin: 0; font-size: var(--fs-base); }
.dea-ex-card-head a { color: var(--text); text-decoration: none; }
.dea-ex-card-head a:hover { color: var(--accent); }
.dea-ex-desc { margin: 8px 0 0; }
.dea-ex-meta {
display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px;
font-size: var(--fs-xs); color: var(--muted);
}
.dea-ex-reason {
flex-basis: 100%;
color: var(--text);
background: var(--panel-2);
border: 1px solid var(--line);
border-radius: 6px;
padding: 6px 9px;
}
.dea-ex-empty { text-align: center; color: var(--muted); padding: 34px 16px; }
/* END dea-explore.css */
/* BEGIN dea-review-workbench.css */
/* Review Workbench (source-owned, P3-07) - Ergänzungen zu dea-components.css */
.dea-review-page { padding-bottom: 60px; }
.dea-rw-head { margin-bottom: 16px; }
.dea-rw-head .sub { margin: 0; }
.dea-rw-tiles { margin-bottom: 14px; }
.dea-rw-dist { margin-bottom: 14px; }
.dea-rw-bar-row {
display: grid;
grid-template-columns: 110px 1fr 40px;
align-items: center;
gap: 12px;
padding: 4px 0;
font-size: var(--fs-sm);
}
.dea-rw-bar-label { color: var(--muted); }
.dea-rw-bar-track {
display: block;
height: 10px;
background: var(--panel-2);
border: 1px solid var(--line);
border-radius: 999px;
overflow: hidden;
}
.dea-rw-bar { display: block; height: 100%; border-radius: 999px; }
.dea-rw-bar-count { text-align: right; font-weight: 600; }
.dea-rw-toolbar {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
margin-bottom: 12px;
padding: 12px 14px;
background: var(--panel);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.dea-rw-toolbar select { width: auto; flex: 0 0 auto; }
.dea-rw-toolbar input[type="text"] { flex: 1 1 200px; width: auto; min-width: 160px; }
.dea-rw-count { font-size: var(--fs-xs); color: var(--muted); margin-left: auto; white-space: nowrap; }
.dea-rw-tablewrap {
background: var(--panel);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 4px 14px 8px;
overflow-x: auto;
}
.dea-rw-tablewrap tbody tr { cursor: pointer; }
.dea-rw-tablewrap tbody tr:hover td { background: var(--panel-2); }
.dea-rw-tablewrap tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dea-rw-empty { text-align: center; color: var(--muted); padding: 34px 16px; }
@media (max-width: 720px) {
.dea-rw-bar-row { grid-template-columns: 90px 1fr 34px; }
}
/* Berichte (AI-RMS) - P3-23c */
.dea-rw-reports { margin-top: 4px; }
.dea-rw-report-cell { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.dea-rw-report-cell select { min-width: 130px; }
.dea-rw-report-feedback { margin: 6px 0 0; min-height: 16px; }
/* END dea-review-workbench.css */
/* BEGIN dea-governance.css */
/* Governance-Konsole (source-owned, P3-07) - Ergänzungen zu dea-components.css */
.dea-gov-page { padding-bottom: 60px; }
.dea-gov-head { margin-bottom: 16px; }
.dea-gov-head .sub { margin: 0; }
.dea-gov-section { margin-bottom: 22px; }
.dea-gov-section-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-bottom: 10px;
}
.dea-gov-section-head h2 { margin: 0; }
.dea-gov-toggle { font-size: var(--fs-xs); color: var(--muted); display: flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; }
.dea-gov-toggle input { width: auto; }
.dea-gov-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.dea-gov-tablewrap {
background: var(--panel);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 4px 14px 8px;
overflow-x: auto;
}
.dea-gov-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dea-gov-actions select { width: auto; padding: 5px 8px; }
.dea-gov-actions button { padding: 5px 10px; font-size: var(--fs-xs); }
.dea-gov-rationale { max-width: 260px; }
.dea-gov-empty { text-align: center; color: var(--muted); padding: 30px 16px; }
.dea-gov-blockers { margin-bottom: 12px; }
.dea-gov-blockers ul { margin: 6px 0 0 18px; padding: 0; }
/* Bestätigungs-Dialog */
.dea-gov-dialog {
position: fixed;
inset: 0;
z-index: 10050;
background: rgba(38, 38, 38, 0.45);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.dea-gov-dialog-card { width: min(480px, 100%); }
.dea-gov-dialog-card h2 { margin-bottom: 12px; }
.dea-gov-dialog-card label { display: block; margin-bottom: 12px; }
.dea-gov-dialog-card textarea, .dea-gov-dialog-card input { margin-top: 4px; }
.dea-gov-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }
/* END dea-governance.css */
/* BEGIN dea-settings.css */
/* Einstellungen (source-owned, P3-07) - Ergänzungen zu dea-components.css */
.dea-settings-page { padding-bottom: 60px; }
.dea-set-head { margin-bottom: 16px; }
.dea-set-head .sub { margin: 0; }
.dea-set-form label { display: block; margin-bottom: 12px; }
.dea-set-form input { margin-top: 4px; }
.dea-set-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 14px; }
.dea-set-actions { display: flex; justify-content: flex-end; }
.dea-set-empty { text-align: center; color: var(--muted); padding: 30px 16px; }
.dea-set-form { max-width: 640px; }
/* Darstellung: Hochkontrast-Schalter (P4-17c) */
.dea-set-display { margin-top: 16px; }
.dea-ui label.dea-set-check,
.dea-set-check {
display: flex;
gap: 10px;
align-items: flex-start;
text-transform: none;
letter-spacing: 0;
font-size: var(--fs-base);
color: var(--text);
cursor: pointer;
}
.dea-set-check input[type="checkbox"] {
width: 18px;
height: 18px;
margin-top: 2px;
flex: 0 0 auto;
accent-color: var(--accent);
}
.dea-set-check em {
display: block;
font-style: normal;
margin-top: 2px;
}
/* --------------------------------------------------------------------------
Zwei-Faktor-Anmeldung (P6-10, PSA 3.83 Req 7)
Der Schlüssel und die Wiederherstellungscodes müssen abtippbar sein - also
Monospace mit Sperrung, nicht Fließtext. Ausschließlich Tokens; Fokus kommt
aus dem zentralen :focus-visible-Satz (Regel 6).
-------------------------------------------------------------------------- */
/* P6-19: QR-Code neben dem Schluessel; das SVG traegt eigene Schwarz/Weiss-Farben
(Scanner-Kontrast), der weisse Rand ist die Ruhezone. */
.dea-set-qr-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4, 16px); }
.dea-set-qr { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius, 8px); background: #fff; padding: 4px; }
.dea-set-qr svg { display: block; width: 168px; height: 168px; }
.dea-set-secret {
display: inline-block;
font-family: var(--mono, ui-monospace, monospace);
font-size: var(--fs-lg, 1.1rem);
letter-spacing: 0.12em;
padding: 8px 12px;
border: 1px solid var(--line, var(--border));
border-radius: var(--radius, 10px);
background: var(--bg);
user-select: all;
}
.dea-set-codes {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 6px;
list-style: none;
padding: 0;
margin: 8px 0 12px;
}
.dea-set-codes code {
font-family: var(--mono, ui-monospace, monospace);
letter-spacing: 0.08em;
user-select: all;
}
.dea-set-details { margin-top: 12px; }
.dea-set-details summary { cursor: pointer; color: var(--muted); }
.dea-set-danger {
border: 1px solid var(--bad);
border-radius: var(--radius, 10px);
background: var(--bg);
color: var(--bad);
padding: 8px 12px;
font: inherit;
cursor: pointer;
}
/* END dea-settings.css */
/* BEGIN dea-models.css */
/* AI Models (source-owned, P3-07) - Ergänzungen zu dea-components.css */
.dea-models-page { padding-bottom: 60px; }
.dea-mo-head { margin-bottom: 16px; }
.dea-mo-head .sub { margin: 0; }
.dea-mo-request { margin-bottom: 18px; }
.dea-mo-request h2 { margin-bottom: 4px; }
.dea-mo-request label { display: block; }
.dea-mo-request input { margin-top: 4px; }
.dea-mo-request-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
.dea-mo-suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dea-mo-suggestion {
border: 1px solid var(--accent); color: var(--accent); background: var(--accent-soft);
border-radius: 999px; padding: 3px 10px; font: inherit; font-size: var(--fs-xs); cursor: pointer;
}
.dea-mo-toolbar {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 14px;
margin-bottom: 12px;
}
.dea-mo-toolbar input[type="text"] { flex: 0 1 320px; width: auto; }
.dea-mo-tablewrap {
background: var(--panel);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 4px 14px 8px;
overflow-x: auto;
}
.dea-mo-empty { text-align: center; color: var(--muted); padding: 34px 16px; }
@media (max-width: 720px) {
.dea-mo-toolbar { flex-direction: column; align-items: stretch; }
.dea-mo-toolbar input[type="text"] { flex: 1 1 auto; }
}
/* Plattform-/DSK-Chips (Modell x Plattform -> Datenschutzklasse) */
.dea-mo-platform-cell { max-width: 380px; }
.dea-mo-platform { margin: 1px 4px 1px 0; }
.dea-mo-platform strong { color: var(--accent-2); /* AA auf --panel-2 (P4-17b) */ font-weight: 700; }
.dea-mo-legend { margin-top: 10px; }
/* Einordnungsfragen im Antrag */
.dea-mo-cop { margin: 8px 0; }
.dea-mo-cop .chip { white-space: normal; line-height: 1.5; }
.dea-mo-questions { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }
.dea-mo-check { display: flex; align-items: center; gap: 8px; margin: 8px 0; text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); }
.dea-mo-check input { width: auto; }
.dea-mo-subfield { display: block; margin: 4px 0 10px 26px; }
.dea-mo-subfield input { margin-top: 4px; }
/* DSK-Klartext sichtbar im Plattform-Chip (P4-17e) */
.dea-mo-dsk-label { color: var(--muted); font-size: var(--fs-xs); }
/* END dea-models.css */
/* BEGIN dea-model-admin.css */
/* Model-Admin (source-owned, P3-07) - Ergänzungen zu dea-components.css */
.dea-modeladmin-page { padding-bottom: 60px; }
.dea-ma-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
margin-bottom: 16px;
}
.dea-ma-head .sub { margin: 0; }
.dea-ma-head-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* ---------- Neuanlage: EIN Raster fuer alles ----------
* Marco 02.09.: "lean und sauber, alles buendig". Jeder Abschnitt benutzt
* dasselbe zweispaltige Raster - gleiche Spaltenbreiten, gleiche Abstaende,
* keine Einrueckungen und keine Sonderbreiten. Damit liegen Eingabefelder,
* Auswahlfelder, Checkbox und die Erlaeuterungs-Toggles auf denselben Kanten.
*/
.dea-ma-create { margin-bottom: 14px; }
.dea-ma-create h2 { margin-bottom: 4px; }
.dea-ma-create > .sub { margin: 0 0 16px; max-width: 78ch; }
.dea-ma-create label { display: block; }
.dea-ma-create input, .dea-ma-create select { margin-top: 4px; }
.dea-ma-formgrid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 14px;
align-items: stretch;
}
/* Rasterzellen bringen ihre Abstaende nicht selbst mit - die kommen aus gap */
.dea-ma-formgrid > label,
.dea-ma-formgrid > div { min-width: 0; margin: 0; }
/* Beschriftung oben, Bedienelement UNTEN in der Zelle: laeuft eine
* Beschriftung auf zwei Zeilen, bleiben die Bedienelemente der Zeile trotzdem
* auf einer Linie. */
.dea-ma-formgrid label:not(.dea-ma-check) {
display: flex;
flex-direction: column;
justify-content: flex-end;
height: 100%;
}
/* Die Referenz haengt an der Checkbox und darf das Fragenpaar darunter nicht
* auseinanderreissen: eigene Rasterzeile, Feldbreite bleibt eine Spalte. */
.dea-ma-formgrid > [data-dea-ma-create-licref] {
grid-column: 1 / -1;
max-width: calc(50% - 7px);
}
.dea-ma-fieldset {
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 14px 16px 16px;
margin: 0 0 14px;
}
.dea-ma-fieldset > legend {
padding: 0 6px;
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: .05em;
color: var(--muted);
}
.dea-ma-fieldset > .sub { margin: 0 0 12px; max-width: 78ch; }
/* Hinweis des Lizenzkatalogs sitzt unter dem Raster, linke Kante gleich */
.dea-ma-note { margin: 12px 0 0; max-width: 78ch; }
/* Checkbox-Zeile: waagerecht und in Satzschrift, nicht im Uppercase-Labelstil.
* Die Doppelselektoren sind noetig, weil `.dea-ma-create label { display:block }`
* und `.dea-ui label { text-transform:uppercase }` sonst gewinnen. Im Raster
* sitzt die Zeile auf der Hoehe des Bedienelements der Nachbarspalte, nicht auf
* der Hoehe seiner Beschriftung. */
.dea-ma-check,
.dea-ma-create .dea-ma-check {
display: flex;
align-items: center;
gap: 8px;
margin: 10px 0;
text-transform: none;
letter-spacing: 0;
color: var(--text);
font-size: var(--fs-sm);
}
.dea-ma-check input,
.dea-ma-create .dea-ma-check input { width: auto; margin-top: 0; }
.dea-ma-formgrid > .dea-ma-check { align-self: end; margin: 0; min-height: 38px; }
/* Ableitungen am Fuss: zwei Spalten wie oben, damit die Werte unter den
* jeweiligen Feldspalten stehen. */
.dea-ma-create-summary {
border-top: 1px solid var(--line);
padding-top: 14px;
margin: 0 0 14px;
}
.dea-ma-create-summary p { margin: 4px 0 0; }
@media (max-width: 860px) {
.dea-ma-formgrid { grid-template-columns: minmax(0, 1fr); }
}
.dea-ma-create-actions { display: flex; justify-content: flex-end; gap: 10px; }
.dea-ma-bulk {
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
margin-bottom: 14px;
}
.dea-ma-bulk .sub { margin: 2px 0 0; }
.dea-ma-bulk-side { display: flex; align-items: center; gap: 12px; }
.dea-ma-toolbar {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 14px;
margin-bottom: 12px;
}
.dea-ma-toolbar input[type="text"] { flex: 0 1 300px; width: auto; }
.dea-ma-tablewrap {
background: var(--panel);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 4px 14px 8px;
overflow-x: auto;
}
.dea-ma-actions { display: flex; gap: 6px; }
.dea-ma-actions button { padding: 4px 9px; font-size: var(--fs-xs); }
.dea-ma-delete { color: var(--bad); border-color: var(--bad); padding: 4px 9px; font-size: var(--fs-xs); }
.dea-ma-delete:hover { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); }
.dea-ma-empty { text-align: center; color: var(--muted); padding: 34px 16px; }
@media (max-width: 760px) {
.dea-ma-head, .dea-ma-bulk, .dea-ma-toolbar { flex-direction: column; align-items: stretch; }
}
/* Plattformen & DSK-Freigaben */
.dea-ma-platforms { margin-bottom: 14px; }
.dea-ma-platforms-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.dea-ma-platforms-head h2 { margin-bottom: 2px; }
.dea-ma-platform-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.dea-ma-platform-form input { flex: 1 1 180px; width: auto; }
.dea-ma-platform-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.dea-ma-platform-chip button {
border: 0; background: none; color: var(--bad); font-size: var(--fs-sm); cursor: pointer; padding: 0 2px;
}
.dea-ma-dsk-cell { max-width: 300px; }
.dea-ma-dsk-chip { margin: 1px 3px 1px 0; }
.dea-ma-dsk-edit { padding: 3px 8px; font-size: var(--fs-xs); }
.dea-ma-dsk-card { width: min(560px, 100%); }
.dea-ma-dsk-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.dea-ma-dsk-row strong { flex: 1 1 auto; }
.dea-ma-dsk-row select { width: auto; }
.dea-ma-dsk-add { border-top: 1px solid var(--line); padding-top: 12px; }
.dea-ma-dsk-add select:first-child { flex: 1 1 auto; }
/* Assessments (wiederhergestellt, neue UI) */
.dea-ma-assessment-btn { border: 0; background: none; font: inherit; cursor: pointer; color: var(--accent); padding: 0; }
.dea-ma-assessment-card { width: min(720px, 100%); max-height: 86vh; overflow: auto; }
.dea-ma-assessment-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.dea-ma-assessment-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.dea-ma-assessment-row {
display: flex; justify-content: space-between; align-items: center; gap: 12px;
border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
}
.dea-ma-assessment-items { max-height: 46vh; overflow: auto; margin-bottom: 12px; }
.dea-ma-assessment-items input[type="checkbox"] { width: auto; }
/* Lizenzkatalog + Lizenz je Modell (P7-11) */
.dea-ma-license-line { margin-top: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dea-ma-check-inline { align-self: end; }
.dea-ma-licenses select { min-height: 32px; }
.dea-ma-license-card label { display: grid; gap: 6px; margin-bottom: 10px; }
/* GPAI-Einordnung: Fragen mit Erlaeuterungs-Toggle (Muster P7-09) und die
* abgeleitete Rolle. Toggle/Panel stylt .dea-explain-* in dea-components.css. */
.dea-ma-gpai-question + .dea-ma-gpai-question { margin-top: 14px; }
/* Ganze Fragesaetze sind Fliesstext, keine Feldbeschriftung - der
* Uppercase-Label-Stil aus dea-components.css passt hier nicht. */
.dea-ma-gpai-question > label {
margin-bottom: 0;
text-transform: none;
letter-spacing: 0;
font-size: var(--fs-base);
color: var(--text);
max-width: 78ch;
}
/* Auswahl in Spalte 1 (gleiche Breite wie jedes andere Auswahlfeld), Toggle an
* der rechten Rasterkante - kein freies Flottieren. */
.dea-ma-gpai-row { align-items: center; margin-top: 4px; }
.dea-ma-gpai-row > select { margin-top: 0; }
.dea-ma-gpai-row > .dea-explain-toggle { justify-self: end; }
.dea-ma-gpai-cell { max-width: 220px; }
.dea-ma-gpai-card { width: min(680px, 100%); max-height: 86vh; overflow: auto; }
.dea-ma-gpai-card > h2 { margin-bottom: 4px; }
.dea-ma-gpai-derived { border-top: 1px solid var(--line); margin: 14px 0; padding-top: 12px; }
.dea-ma-gpai-derived p { margin: 4px 0 0; }
.dea-ma-gpai-role .chip { margin-right: 4px; }
/* END dea-model-admin.css */
/* BEGIN dea-projects.css */
/* Projects (source-owned, P3-07) - Listenansicht wie AI Systems / AI Use Cases
(Marco 28.08.: Kartenansicht abgelöst). */
.dea-projects-page { padding-bottom: 60px; }
.dea-pj-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.dea-pj-head .sub { margin: 0; }
.dea-pj-head-actions { display: flex; align-items: center; gap: 10px; }
.dea-pj-create { margin-bottom: 16px; }
.dea-pj-create h2 { margin-bottom: 10px; }
.dea-pj-create label { display: block; margin-bottom: 12px; }
.dea-pj-create input, .dea-pj-create textarea, .dea-pj-create select { margin-top: 4px; }
.dea-pj-create-actions { display: flex; justify-content: flex-end; gap: 10px; }
.dea-pj-toolbar {
display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
padding: 12px 14px; background: var(--panel); border: 1px solid var(--line);
border-radius: var(--radius); box-shadow: var(--shadow);
}
.dea-pj-toolbar input[type="text"] { flex: 1 1 260px; width: auto; }
.dea-pj-count { font-size: var(--fs-xs); color: var(--muted); margin-left: auto; white-space: nowrap; }
.dea-pj-tablewrap {
background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: var(--shadow); padding: 4px 14px 8px; overflow-x: auto;
}
.dea-pj-tablewrap tbody tr { cursor: pointer; }
.dea-pj-tablewrap tbody tr:hover td { background: var(--panel-2); }
.dea-pj-tablewrap tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dea-pj-desc { max-width: 420px; margin: 0; }
.dea-pj-empty { text-align: center; color: var(--muted); padding: 34px 16px; }
/* END dea-projects.css */
/* BEGIN dea-project-detail.css */
/* Projekt-Detail (P3-07 Shell-Vorbereitung) - RMS-Design, kein !important. */
.dea-pd-page { display: grid; gap: 14px; align-content: start; }
.dea-pd-back {
justify-self: start;
color: var(--muted);
font-size: var(--fs-sm);
text-decoration: none;
cursor: pointer;
}
.dea-pd-back:hover { color: var(--accent); }
.dea-pd-head h1 { margin: 0; }
.dea-pd-head .sub { margin: 4px 0 0; }
.dea-pd-tabs { margin: 0; }
.dea-pd-page .panel { display: grid; gap: 10px; }
.dea-pd-page .panel h2 { margin: 0; }
.dea-pd-meta { gap: 6px; }
.dea-pd-meta .sub { margin: 0; }
.dea-pd-bar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.dea-pd-bar h2 { margin: 0; }
.dea-pd-bar button {
border: 1px solid var(--line);
border-radius: var(--radius, 10px);
background: var(--bg);
padding: 4px 12px;
cursor: pointer;
font: inherit;
font-size: var(--fs-sm);
color: var(--text);
}
.dea-pd-tablewrap { overflow-x: auto; }
.dea-pd-page table a { color: var(--accent); text-decoration: none; }
.dea-pd-reason { max-width: 360px; }
.dea-pd-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 10px;
}
.dea-pd-field { display: grid; gap: 4px; min-width: 0; }
.dea-pd-field input,
.dea-pd-field select,
.dea-pd-field textarea {
border: 1px solid var(--form-line, #c9cdd4);
border-radius: var(--radius, 10px);
background: var(--panel);
color: var(--text);
padding: 8px 10px;
font: inherit;
font-size: var(--fs-sm);
text-transform: none;
letter-spacing: normal;
min-width: 0;
}
.dea-pd-field textarea { resize: vertical; }
.dea-pd-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.dea-pd-actions-end { justify-content: flex-end; }
.dea-pd-label {
margin: 0;
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--muted);
}
.dea-pd-prewrap { white-space: pre-wrap; }
.dea-pd-riskline { margin: 0; display: flex; gap: 8px; align-items: center; }
.dea-pd-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.dea-pd-row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.dea-pd-row-actions button,
.dea-pd-danger,
.dea-pd-page table button {
border: 1px solid var(--line);
border-radius: var(--radius, 10px);
background: var(--bg);
padding: 4px 10px;
cursor: pointer;
font: inherit;
font-size: var(--fs-sm);
color: var(--text);
}
.dea-pd-danger { color: var(--bad, #c53030); }
.dea-pd-danger:hover { border-color: var(--bad, #c53030); }
.dea-pd-menu-cell { position: relative; }
.dea-pd-menu {
position: absolute;
right: 8px;
top: calc(100% - 6px);
display: grid;
border: 1px solid var(--line);
border-radius: var(--radius, 10px);
background: var(--panel);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
z-index: 40;
min-width: 190px;
overflow: hidden;
}
.dea-pd-menu button,
.dea-pd-menu a {
border: none;
background: none;
padding: 8px 12px;
cursor: pointer;
text-align: left;
font: inherit;
font-size: var(--fs-sm);
color: var(--text);
text-decoration: none;
}
.dea-pd-menu button:hover,
.dea-pd-menu a:hover { background: var(--accent-soft); color: var(--accent); }
.dea-pd-json {
margin: 0;
padding: 10px 12px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--radius, 10px);
overflow: auto;
max-height: 220px;
font-size: var(--fs-xs);
}
.dea-pd-json-tall { max-height: 320px; }
.dea-pd-version-detail h3 { margin: 4px 0 0; }
.dea-pd-overlay {
position: fixed;
inset: 0;
background: rgba(38, 38, 38, 0.45);
display: flex;
align-items: center;
justify-content: center;
z-index: 1200;
padding: 20px;
}
.dea-pd-dialog {
background: var(--panel);
border: 1px solid var(--line);
border-radius: var(--radius, 10px);
padding: 16px 18px;
width: min(700px, 100%);
max-height: 85vh;
overflow: auto;
display: grid;
gap: 10px;
}
.dea-pd-dialog-wide { width: min(900px, 100%); }
.dea-pd-dialog h3 { margin: 0; }
.dea-pd-dialog h4 { margin: 0 0 6px; }
.dea-pd-dialog .card { display: grid; gap: 6px; }
.dea-pd-dialog-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.dea-pd-intake {
border-top: 1px solid var(--line);
padding-top: 8px;
display: grid;
gap: 4px;
}
.dea-pd-intake:first-of-type { border-top: none; padding-top: 0; }
.dea-pd-intake .sub { margin: 0; }
.dea-pd-units-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 14px;
}
.dea-pd-units-list { display: grid; gap: 6px; max-height: 300px; overflow: auto; margin-top: 8px; }
.dea-pd-unit-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
border: 1px solid var(--line);
border-radius: var(--radius, 10px);
padding: 6px 10px;
}
.dea-pd-unit-row .sub { margin: 0; }
.dea-pd-unit-row button {
border: 1px solid var(--line);
border-radius: 999px;
background: var(--bg);
width: 26px;
height: 26px;
cursor: pointer;
color: var(--text);
line-height: 1;
}
.dea-pd-unit-row button:hover { border-color: var(--accent); color: var(--accent); }
.dea-pd-unit-selected {
border: 1px solid var(--line);
border-radius: var(--radius, 10px);
padding: 8px 10px;
display: grid;
gap: 6px;
margin-top: 8px;
}
.dea-pd-unit-selected .sub { margin: 0; }
.dea-pd-unit-selected-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.dea-pd-unit-selected-head button {
border: 1px solid var(--line);
border-radius: 999px;
background: var(--bg);
width: 26px;
height: 26px;
cursor: pointer;
color: var(--muted);
line-height: 1;
}
.dea-pd-unit-selected-head button:hover { color: var(--accent); border-color: var(--accent); }
.dea-pd-page button:disabled { opacity: 0.55; cursor: not-allowed; }
/* END dea-project-detail.css */
/* BEGIN dea-ai-systems.css */
/* AI Systems (source-owned, P3-07) - Kartenraster im CD-Look */
.dea-aisys-page { padding-bottom: 60px; }
.dea-as-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.dea-as-head .sub { margin: 0; }
.dea-as-manage {
font-size: var(--fs-sm); color: var(--text); text-decoration: none;
border: 1px solid var(--line); border-radius: 6px; padding: 6px 12px; background: var(--panel);
}
.dea-as-manage:hover { border-color: var(--accent); color: var(--accent); }
.dea-as-toolbar {
display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
padding: 12px 14px; background: var(--panel); border: 1px solid var(--line);
border-radius: var(--radius); box-shadow: var(--shadow);
}
.dea-as-toolbar input[type="text"] { flex: 1 1 260px; width: auto; }
.dea-as-count { font-size: var(--fs-xs); color: var(--muted); margin-left: auto; white-space: nowrap; }
.dea-as-head-actions { display: flex; align-items: center; gap: 10px; }
.dea-as-tablewrap {
background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: var(--shadow); padding: 4px 14px 8px; overflow-x: auto;
}
.dea-as-tablewrap tbody tr { cursor: pointer; }
.dea-as-tablewrap tbody tr:hover td { background: var(--panel-2); }
.dea-as-tablewrap tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dea-as-desc { max-width: 420px; }
.dea-as-empty { text-align: center; color: var(--muted); padding: 34px 16px; }
/* END dea-ai-systems.css */
/* BEGIN dea-ai-entity-detail.css */
/* AI-System-/AI-Agent-Detail (P3-07 Shell-Vorbereitung) - RMS-Design, kein !important. */
.dea-aed-page { display: grid; gap: 14px; align-content: start; }
.dea-aed-back {
justify-self: start;
color: var(--muted);
font-size: var(--fs-sm);
text-decoration: none;
cursor: pointer;
}
.dea-aed-back:hover { color: var(--accent); }
.dea-aed-head h1 { margin: 0; }
.dea-aed-tabs { margin: 0; }
.dea-aed-form, .dea-aed-usecases { display: grid; gap: 10px; }
.dea-aed-form-bar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.dea-aed-form-bar h2 { margin: 0; }
.dea-aed-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 10px;
}
.dea-aed-field { display: grid; gap: 4px; min-width: 0; }
.dea-aed-field input,
.dea-aed-field textarea {
border: 1px solid var(--form-line, #c9cdd4);
border-radius: var(--radius, 10px);
background: var(--panel);
color: var(--text);
padding: 8px 10px;
font: inherit;
font-size: var(--fs-sm);
text-transform: none;
letter-spacing: normal;
min-width: 0;
}
.dea-aed-field textarea { resize: vertical; }
.dea-aed-check {
display: flex;
gap: 8px;
align-items: center;
text-transform: none;
letter-spacing: normal;
font-size: var(--fs-base);
cursor: pointer;
}
.dea-aed-label {
margin: 6px 0 0;
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--muted);
}
.dea-aed-model-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 10px;
}
.dea-aed-model-card { display: grid; gap: 8px; align-content: start; }
.dea-aed-model-card input {
border: 1px solid var(--form-line, #c9cdd4);
border-radius: var(--radius, 10px);
background: var(--panel);
color: var(--text);
padding: 8px 10px;
font: inherit;
font-size: var(--fs-sm);
}
.dea-aed-model-list { display: grid; gap: 6px; max-height: 220px; overflow: auto; }
.dea-aed-model-list .sub { margin: 0; }
.dea-aed-model-add {
display: flex;
justify-content: space-between;
gap: 8px;
border: 1px solid var(--line);
border-radius: var(--radius, 10px);
background: var(--bg);
padding: 6px 10px;
cursor: pointer;
text-align: left;
font: inherit;
font-size: var(--fs-sm);
color: var(--text);
}
.dea-aed-model-add:hover { border-color: var(--accent); }
.dea-aed-model-selected {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
border: 1px solid var(--line);
border-radius: var(--radius, 10px);
padding: 6px 10px;
}
.dea-aed-model-name { font-weight: 600; font-size: var(--fs-sm); }
.dea-aed-model-selected .sub { margin: 0; }
.dea-aed-model-selected button {
border: 1px solid var(--line);
border-radius: 999px;
background: var(--bg);
width: 26px;
height: 26px;
cursor: pointer;
color: var(--muted);
line-height: 1;
}
.dea-aed-model-selected button:hover { color: var(--accent); border-color: var(--accent); }
.dea-aed-actions { display: flex; justify-content: flex-end; gap: 8px; }
.dea-aed-tablewrap { overflow-x: auto; }
.dea-aed-desc { margin: 2px 0 0; }
.dea-aed-usecases a { color: var(--accent); text-decoration: none; }
.dea-aed-page button:disabled { opacity: 0.55; cursor: not-allowed; }
/* END dea-ai-entity-detail.css */
/* BEGIN dea-ai-agents.css */
/* AI Agents (source-owned, P3-07) - Kartenraster im CD-Look */
.dea-aiag-page { padding-bottom: 60px; }
.dea-ag-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.dea-ag-head .sub { margin: 0; }
.dea-ag-manage {
font-size: var(--fs-sm); color: var(--text); text-decoration: none;
border: 1px solid var(--line); border-radius: 6px; padding: 6px 12px; background: var(--panel);
}
.dea-ag-manage:hover { border-color: var(--accent); color: var(--accent); }
.dea-ag-toolbar {
display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
padding: 12px 14px; background: var(--panel); border: 1px solid var(--line);
border-radius: var(--radius); box-shadow: var(--shadow);
}
.dea-ag-toolbar input[type="text"] { flex: 1 1 260px; width: auto; }
.dea-ag-count { font-size: var(--fs-xs); color: var(--muted); margin-left: auto; white-space: nowrap; }
.dea-ag-head-actions { display: flex; align-items: center; gap: 10px; }
.dea-ag-tablewrap {
background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: var(--shadow); padding: 4px 14px 8px; overflow-x: auto;
}
.dea-ag-tablewrap tbody tr { cursor: pointer; }
.dea-ag-tablewrap tbody tr:hover td { background: var(--panel-2); }
.dea-ag-tablewrap tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dea-ag-desc { max-width: 420px; }
.dea-ag-empty { text-align: center; color: var(--muted); padding: 34px 16px; }
/* END dea-ai-agents.css */
/* BEGIN dea-use-cases-list.css */
/* AI Use Cases Liste (source-owned, Marco 27.08.: Liste statt Karten) */
.dea-ucl-page { padding-bottom: 60px; }
.dea-ucl-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.dea-ucl-head .sub { margin: 0; }
.dea-ucl-head-actions { display: flex; align-items: center; gap: 12px; }
.dea-ucl-agent-link { font-size: var(--fs-sm); color: var(--accent-2); /* AA auf --bg (P4-17b) */ text-decoration: none; }
.dea-ucl-agent-link:hover { text-decoration: underline; }
.dea-ucl-tabs { margin-bottom: 12px; flex-wrap: wrap; }
.dea-ucl-toolbar {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px;
padding: 12px 14px; background: var(--panel); border: 1px solid var(--line);
border-radius: var(--radius); box-shadow: var(--shadow);
}
/* Eine Suchleiste, an der die Filter (Risiko, Typ) haengen - die Reiter
darueber filtern ausschliesslich den Produktlebenszyklus. */
.dea-ucl-searchbar {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
flex: 1 1 420px; min-width: 260px;
padding: 4px 6px 4px 10px; background: var(--panel-2);
border: 1px solid var(--line); border-radius: 999px;
}
.dea-ucl-searchbar:focus-within { border-color: var(--accent); }
.dea-ucl-searchbar input[type="search"] {
flex: 1 1 180px; width: auto; min-width: 150px;
padding: 6px 2px; border: 0; background: transparent; box-shadow: none;
}
.dea-ucl-searchbar input[type="search"]:focus { outline: none; box-shadow: none; }
.dea-ucl-filter {
display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
padding: 2px 4px 2px 10px; background: var(--panel);
border: 1px solid var(--line); border-radius: 999px;
font-size: var(--fs-xs); color: var(--muted);
}
.dea-ucl-filter select {
width: auto; flex: 0 0 auto; max-width: 190px;
padding: 4px 6px; border: 0; background: transparent; box-shadow: none;
font-size: var(--fs-sm); color: var(--text);
}
.dea-ucl-toolbar select { width: auto; flex: 0 0 auto; }
.dea-ucl-toolbar input[type="text"] { flex: 1 1 220px; width: auto; min-width: 180px; }
.dea-ucl-count { font-size: var(--fs-xs); color: var(--muted); margin-left: auto; white-space: nowrap; }
.dea-ucl-tablewrap {
background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
box-shadow: var(--shadow); padding: 4px 14px 8px; overflow-x: auto;
}
.dea-ucl-tablewrap tbody tr { cursor: pointer; }
.dea-ucl-tablewrap tbody tr:hover td { background: var(--panel-2); }
.dea-ucl-tablewrap tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dea-ucl-desc { max-width: 420px; }
.dea-ucl-empty { text-align: center; color: var(--muted); padding: 34px 16px; }
/* Zeilen-Aktionen + Bearbeiten-Dialog */
.dea-ucl-actions { white-space: nowrap; }
.dea-ucl-actions button { padding: 4px 9px; font-size: var(--fs-xs); margin-left: 6px; }
.dea-ucl-delete { color: var(--bad); border-color: var(--bad); }
.dea-ucl-delete:hover { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); }
.dea-ucl-edit-card { width: min(640px, 100%); max-height: 88vh; overflow: auto; }
.dea-ucl-edit-card label { display: block; margin-bottom: 12px; }
.dea-ucl-edit-card input, .dea-ucl-edit-card textarea, .dea-ucl-edit-card select { margin-top: 4px; }
.dea-ucl-check { display: flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; }
.dea-ucl-check input { width: auto; }
/* Zeilen-Link (P4-17f: der Name traegt die Oeffnen-Semantik, nicht das tr) */
.dea-ucl-name-link { color: var(--text); text-decoration: none; }
.dea-ucl-name-link:hover strong { color: var(--accent); }
/* END dea-use-cases-list.css */
/* BEGIN dea-use-case-detail.css */
/* Use-Case-Detail D1 (source-owned, P3-07) */
.dea-ucd-page { padding-bottom: 60px; }
.dea-ucd-back {
background: none; border: 0; padding: 0 0 10px; font: inherit; font-size: var(--fs-xs);
color: var(--accent); cursor: pointer; display: inline-block;
}
.dea-ucd-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 10px; }
.dea-ucd-head h1 { margin-bottom: 4px; }
.dea-ucd-desc { margin: 0; max-width: 76ch; }
.dea-ucd-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.dea-ucd-sections { margin-bottom: 18px; }
.dea-ucd-section-card { cursor: pointer; text-decoration: none; color: var(--text); display: block; }
.dea-ucd-section-card:hover { border-color: var(--accent); }
.dea-ucd-section-card h2 { margin-bottom: 6px; }
.dea-ucd-primary { border-color: var(--accent); }
.dea-ucd-primary h2 { color: var(--accent); }
.dea-ucd-more { display: inline-block; margin-top: 10px; font-size: var(--fs-xs); font-weight: 600; color: var(--accent); }
.dea-ucd-list { margin-bottom: 14px; }
.dea-ucd-list-row { border-top: 1px solid var(--line); padding: 10px 0; }
.dea-ucd-list-row:first-of-type { border-top: 0; }
.dea-ucd-list-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.dea-ucd-list-row p { margin: 4px 0 0; }
.dea-ucd-empty { text-align: center; color: var(--muted); padding: 34px 16px; }
/* Stammdaten-Ansicht /use-cases/:id/details (D4) */
.dea-ucd-kv-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 12px;
}
.dea-ucd-kv .sub { margin: 2px 0 0; white-space: pre-wrap; }
.dea-ucd-longtext { white-space: pre-wrap; }
.dea-ucd-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
}
.dea-ucd-panel-head h2 { margin: 0; }
.dea-ucd-tablewrap { overflow-x: auto; }
.dea-ucd-pre {
margin: 0;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: var(--radius, 10px);
background: var(--bg);
color: var(--text);
white-space: pre-wrap;
overflow-x: auto;
font-size: var(--fs-xs);
}
/* END dea-use-case-detail.css */
/* BEGIN dea-use-case-assessment.css */
/* AI-Act-Einordnung /use-cases/:id/assessment (P3-07 D4) - RMS-Design, kein !important. */
.dea-uca-page { display: grid; gap: 14px; align-content: start; }
.dea-uca-back {
justify-self: start;
color: var(--muted);
font-size: var(--fs-sm);
text-decoration: none;
cursor: pointer;
}
.dea-uca-back:hover { color: var(--accent); }
.dea-uca-head h1 { margin: 0; }
.dea-uca-head .sub { margin: 4px 0 0; max-width: 70ch; }
.dea-uca-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.dea-uca-panel-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
}
.dea-uca-panel-head h2 { margin: 0; }
.dea-uca-panel-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.dea-uca-ai-note { margin: 4px 0 0; font-size: var(--fs-xs); }
/* Rollen */
.dea-uca-roles {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 8px;
}
.dea-uca-check {
display: flex;
align-items: center;
gap: 6px;
margin: 0;
text-transform: none;
letter-spacing: normal;
font-weight: 400;
font-size: var(--fs-sm);
color: var(--text);
}
.dea-uca-check input { width: auto; }
/* Fragengruppen - progressive Offenlegung */
.dea-uca-group { padding: 0; overflow: hidden; }
.dea-uca-group > summary {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
padding: 12px 14px;
cursor: pointer;
list-style: none;
}
.dea-uca-group > summary::-webkit-details-marker { display: none; }
.dea-uca-group-title { display: grid; gap: 2px; min-width: 0; }
.dea-uca-group-body {
display: grid;
gap: 8px;
padding: 12px 14px 14px;
border-top: 1px solid var(--line);
}
/* Einzelfrage */
.dea-uca-question {
border: 1px solid var(--line);
border-radius: var(--radius, 10px);
background: var(--panel);
padding: 10px 12px;
display: grid;
gap: 6px;
}
.dea-uca-question.answered { background: var(--bg); }
.dea-uca-question-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap;
}
.dea-uca-question .sub { margin: 0; }
.dea-uca-answers { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.dea-uca-answer {
min-width: 68px;
font-size: var(--fs-sm);
}
.dea-uca-answer.active {
border-color: var(--accent);
color: var(--accent);
background: var(--accent-soft);
}
.dea-uca-clear {
border: 0;
background: none;
color: var(--muted);
font-size: var(--fs-xs);
padding: 4px 6px;
cursor: pointer;
}
.dea-uca-clear:hover { color: var(--accent); }
/* Ergebnis */
.dea-uca-result { display: grid; gap: 10px; }
.dea-uca-result-head { display: flex; gap: 6px; flex-wrap: wrap; }
.dea-uca-kv-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 12px;
}
.dea-uca-kv .sub { margin: 2px 0 0; }
.dea-uca-result-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.dea-uca-pre {
margin: 0;
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: var(--radius, 10px);
background: var(--bg);
color: var(--text);
white-space: pre-wrap;
overflow-x: auto;
font-size: var(--fs-xs);
max-height: 320px;
overflow-y: auto;
}
.dea-uca-tablewrap { overflow-x: auto; }
.dea-uca-empty { color: var(--muted); }
/* Bestätigungsdialog vor der Neubewertung */
.dea-uca-modal {
position: fixed;
inset: 0;
z-index: 60;
display: grid;
place-items: center;
background: rgba(0, 0, 0, 0.35);
padding: 20px;
}
.dea-uca-modal-card {
width: min(520px, 96vw);
display: grid;
gap: 8px;
}
.dea-uca-modal-card h2 { margin: 0; }
.dea-uca-modal-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 4px;
}
@media (max-width: 720px) {
.dea-uca-group > summary { grid-template-columns: 1fr; align-items: start; }
.dea-uca-panel-head { flex-direction: column; }
}
/* Abschluss (finalize) - Version, Snapshot, ggf. Tickets */
.dea-uca-finalize {
display: grid;
gap: 8px;
justify-items: start;
border: 1px solid var(--line);
border-radius: var(--radius, 10px);
background: var(--bg);
padding: 10px 12px;
}
.dea-uca-finalize .sub { margin: 0; }
.dea-uca-prefill-notes { font-size: var(--fs-xs); }
/* Herleitungskette + Erlaeuterungen (P7-09): "Mehr Informationen"-Aufklapper
* rechtsbuendig in der Zeile der Ja/Nein-Auswahl, Panel darunter. Das
* Kurz-Erklaerungs-"i" des Patch-Moduls sitzt im Titel-Span direkt neben
* der Ueberschrift. */
.dea-uca-question-title { display: inline-flex; align-items: center; gap: 4px; }
.dea-uca-answers /* Toggle + Panel: zentral als .dea-explain-* in dea-components.css */
.dea-uca-terminal { display: grid; gap: 6px; justify-items: start; }
/* Mehrfachauswahl-Fragen (P7-14): Annex-III-Bereiche, Emotionserkennung/
* biometrische Kategorisierung - Auswahl 1:1 aus der Fragebogen-Excel. */
.dea-uca-choices {
display: grid;
gap: 6px;
margin-top: 8px;
border: 1px solid var(--line);
border-radius: var(--radius, 10px);
background: var(--panel-2);
padding: 10px 12px;
}
.dea-uca-choice {
display: flex;
gap: 10px;
align-items: flex-start;
text-transform: none;
letter-spacing: normal;
font-size: var(--fs-sm);
cursor: pointer;
color: var(--text);
}
.dea-uca-choice-none {
border-top: 1px solid var(--line);
padding-top: 8px;
margin-top: 2px;
}
/* END dea-use-case-assessment.css */
/* BEGIN dea-use-case-review.css */
/* Use-Case-Review /use-cases/:id/review (P3-07 D4) - RMS-Design, kein !important. */
.dea-ucr-page { display: grid; gap: 14px; align-content: start; }
.dea-ucr-back {
justify-self: start;
color: var(--muted);
font-size: var(--fs-sm);
text-decoration: none;
cursor: pointer;
}
.dea-ucr-back:hover { color: var(--accent); }
.dea-ucr-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.dea-ucr-head h1 { margin: 0; }
.dea-ucr-head .sub { margin: 4px 0 0; max-width: 70ch; }
.dea-ucr-head-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.dea-ucr-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.dea-ucr-panel-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.dea-ucr-panel-head h2 { margin: 0; }
.dea-ucr-panel-head .sub { margin: 4px 0 0; }
.dea-ucr-panel-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* Erfüllungsbalken - flach, aus Tokens (keine Verläufe) */
.dea-ucr-coverage { display: grid; gap: 10px; }
.dea-ucr-bars { display: grid; gap: 8px; }
.dea-ucr-bar-row {
display: grid;
grid-template-columns: 90px minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
}
.dea-ucr-bar-label { font-size: var(--fs-xs); color: var(--muted); }
.dea-ucr-bar-track {
height: 8px;
border-radius: 999px;
background: var(--bg);
border: 1px solid var(--line);
overflow: hidden;
}
.dea-ucr-bar {
display: block;
height: 100%;
background: var(--accent);
}
.dea-ucr-bar-value { font-size: var(--fs-xs); white-space: nowrap; }
/* Alerting */
.dea-ucr-alerts { display: grid; gap: 10px; }
.dea-ucr-alert-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.dea-ucr-alert-list > summary,
.dea-ucr-reco > summary,
.dea-ucr-gaps > summary,
.dea-ucr-snapshots > summary {
cursor: pointer;
font-size: var(--fs-sm);
color: var(--muted);
}
.dea-ucr-alert-list > summary:hover { color: var(--accent); }
/* Module */
.dea-ucr-modules { display: grid; gap: 10px; }
.dea-ucr-module {
border: 1px solid var(--line);
border-radius: var(--radius, 10px);
background: var(--panel);
overflow: hidden;
}
.dea-ucr-module > summary {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
padding: 10px 12px;
cursor: pointer;
list-style: none;
}
.dea-ucr-module > summary::-webkit-details-marker { display: none; }
.dea-ucr-module-title { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; min-width: 0; }
.dea-ucr-module-body {
display: grid;
gap: 10px;
padding: 10px 12px 12px;
border-top: 1px solid var(--line);
}
.dea-ucr-item-actions button { font-size: var(--fs-xs); }
.dea-ucr-reco ul { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 4px; color: var(--muted); font-size: var(--fs-sm); }
.dea-ucr-check {
display: flex;
align-items: center;
gap: 6px;
margin: 0;
text-transform: none;
letter-spacing: normal;
font-weight: 400;
font-size: var(--fs-sm);
color: var(--text);
}
.dea-ucr-check input { width: auto; }
.dea-ucr-tablewrap { overflow-x: auto; }
.dea-ucr-empty { color: var(--muted); }
.dea-ucr-empty h2 { margin-bottom: 6px; }
@media (max-width: 900px) {
.dea-ucr-bar-row { grid-template-columns: 80px minmax(0, 1fr) auto; }
.dea-ucr-panel-head { flex-direction: column; }
.dea-ucr-module > summary { grid-template-columns: 1fr; align-items: start; }
}
/* END dea-use-case-review.css */
/* BEGIN dea-bias-checker.css */
/* HR-02.1 Bias & Fairness Checker (P3-07 Shell-Vorbereitung) - RMS-Design, kein !important. */
.dea-bc-page { display: grid; gap: 14px; align-content: start; }
.dea-bc-back {
justify-self: start;
color: var(--muted);
font-size: var(--fs-sm);
text-decoration: none;
cursor: pointer;
}
.dea-bc-back:hover { color: var(--accent); }
.dea-bc-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
flex-wrap: wrap;
}
.dea-bc-head h1 { margin: 0; }
.dea-bc-head .sub { margin: 4px 0 0; }
.dea-bc-head > button {
border: 1px solid var(--line);
border-radius: var(--radius, 10px);
background: var(--bg);
padding: 6px 14px;
cursor: pointer;
font: inherit;
color: var(--text);
}
.dea-bc-head > button:hover { border-color: var(--accent); color: var(--accent); }
.dea-bc-page .panel { display: grid; gap: 10px; }
.dea-bc-page .panel h2 { margin: 0; }
.dea-bc-page .card { display: grid; gap: 8px; }
.dea-bc-page .card .sub { margin: 0; }
.dea-bc-bar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.dea-bc-bar h2 { margin: 0; }
.dea-bc-bar-side { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.dea-bc-bar-side button,
.dea-bc-bar > button,
.dea-bc-row > button {
border: 1px solid var(--line);
border-radius: var(--radius, 10px);
background: var(--bg);
padding: 4px 12px;
cursor: pointer;
font: inherit;
font-size: var(--fs-sm);
color: var(--text);
}
.dea-bc-bar-side button:hover,
.dea-bc-row > button:hover { border-color: var(--accent); color: var(--accent); }
.dea-bc-row > button.primary:hover { color: var(--panel); }
.dea-bc-row {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
.dea-bc-row select,
.dea-bc-row input,
.dea-bc-inline select {
border: 1px solid var(--form-line, #c9cdd4);
border-radius: var(--radius, 10px);
background: var(--panel);
color: var(--text);
padding: 6px 10px;
font: inherit;
font-size: var(--fs-sm);
min-width: 0;
}
.dea-bc-inline { display: inline-flex; gap: 6px; align-items: center; font-size: var(--fs-sm); text-transform: none; letter-spacing: normal; }
.dea-bc-groups { flex: 1 1 260px; }
.dea-bc-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 10px;
}
.dea-bc-grid2 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 10px;
}
.dea-bc-wide { grid-column: 1 / -1; }
.dea-bc-field { display: grid; gap: 4px; min-width: 0; }
.dea-bc-field input,
.dea-bc-field select,
.dea-bc-field textarea {
border: 1px solid var(--form-line, #c9cdd4);
border-radius: var(--radius, 10px);
background: var(--panel);
color: var(--text);
padding: 8px 10px;
font: inherit;
font-size: var(--fs-sm);
text-transform: none;
letter-spacing: normal;
min-width: 0;
}
.dea-bc-field textarea { resize: vertical; }
.dea-bc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.dea-bc-actions-end { justify-content: flex-end; }
.dea-bc-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.dea-bc-prewrap { white-space: pre-wrap; }
.dea-bc-issues { margin: 0; padding-left: 18px; }
.dea-bc-tool { align-content: start; }
.dea-bc-profile-chip { display: inline-flex; gap: 6px; align-items: center; }
.dea-bc-profile-chip button {
border: none;
background: none;
cursor: pointer;
color: var(--muted);
font: inherit;
padding: 0 2px;
}
.dea-bc-profile-chip button:hover { color: var(--accent); }
.dea-bc-tablewrap { overflow-x: auto; }
.dea-bc-run-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.dea-bc-run-actions button {
border: 1px solid var(--line);
border-radius: var(--radius, 10px);
background: var(--bg);
padding: 2px 8px;
cursor: pointer;
font: inherit;
font-size: var(--fs-sm);
color: var(--text);
}
.dea-bc-run-actions button:hover { border-color: var(--accent); color: var(--accent); }
.dea-bc-dataset-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.dea-bc-dataset-actions button,
.dea-bc-file-btn {
border: 1px solid var(--line);
border-radius: var(--radius, 10px);
background: var(--bg);
padding: 4px 10px;
cursor: pointer;
font: inherit;
font-size: var(--fs-sm);
color: var(--text);
text-transform: none;
letter-spacing: normal;
}
.dea-bc-dataset-actions button:hover,
.dea-bc-file-btn:hover { border-color: var(--accent); color: var(--accent); }
.dea-bc-file-btn input[type="file"] { display: none; }
.dea-bc-prompt-detail ol { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.dea-bc-answers { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: var(--fs-sm); }
.dea-bc-error { color: var(--bad, #c53030); }
.dea-bc-overlay {
position: fixed;
inset: 0;
background: rgba(38, 38, 38, 0.45);
display: flex;
align-items: center;
justify-content: center;
z-index: 1200;
padding: 20px;
}
.dea-bc-dialog {
background: var(--panel);
border: 1px solid var(--line);
border-radius: var(--radius, 10px);
padding: 16px 18px;
width: min(440px, 100%);
display: grid;
gap: 10px;
}
.dea-bc-dialog h3 { margin: 0; }
.dea-bc-page button:disabled { opacity: 0.55; cursor: not-allowed; }
/* END dea-bias-checker.css */
/* BEGIN dea-use-case-wizard.css */
/* Use-Case-Wizard + Einsteiger-Flows (P3-07 Wizard-Ablösung) - RMS-Design, kein !important.
* Die Stepper-Klassen .wizard-stepper-shell/.wizard-step-pill kommen aus dem Bundle-CSS
* (Vertrag mit dea-chat-process); hier nur die Einbettung in die Seite. */
.dea-ucw-page { display: grid; gap: 14px; align-content: start; }
.dea-ucw-back {
justify-self: start;
color: var(--muted);
font-size: var(--fs-sm);
text-decoration: none;
cursor: pointer;
}
.dea-ucw-back:hover { color: var(--accent); }
.dea-ucw-head h1 { margin: 0; }
.dea-ucw-head .sub { margin: 4px 0 0; max-width: 900px; }
.dea-ucw-page .wizard-stepper-shell {
border: 1px solid var(--line);
border-radius: var(--radius, 10px);
background: var(--panel);
padding: 12px 14px;
}
.dea-ucw-page .wizard-stepper-title {
margin: 0 0 8px;
color: var(--muted);
font-size: var(--fs-xs);
}
.dea-ucw-page .wizard-stepper-list { display: flex; gap: 8px; flex-wrap: wrap; }
.dea-ucw-page .wizard-step-pill {
border: 1px solid var(--line);
border-radius: 999px;
padding: 4px 12px;
font-size: var(--fs-xs);
color: var(--muted);
background: var(--bg);
}
.dea-ucw-page .wizard-step-pill.active {
border-color: var(--accent);
color: var(--accent);
background: var(--accent-soft);
}
.dea-ucw-step { display: grid; gap: 12px; }
.dea-ucw-step .card { display: grid; gap: 8px; }
.dea-ucw-step .card .sub { margin: 0; }
.dea-ucw-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 10px;
}
.dea-ucw-field { display: grid; gap: 4px; min-width: 0; }
.dea-ucw-field input,
.dea-ucw-field select,
.dea-ucw-field textarea,
.dea-ucw-field .fieldhint {
text-transform: none;
letter-spacing: normal;
font-size: var(--fs-base);
}
.dea-ucw-field input,
.dea-ucw-field select,
.dea-ucw-field textarea,
.dea-ucw-description,
.dea-ucw-model-card input,
.dea-ucw-model-request-row input {
border: 1px solid var(--form-line, #c9cdd4);
border-radius: var(--radius, 10px);
background: var(--panel);
color: var(--text);
padding: 8px 10px;
font: inherit;
min-width: 0;
}
.dea-ucw-field textarea, .dea-ucw-description { resize: vertical; }
.dea-ucw-description { width: 100%; min-height: 170px; box-sizing: border-box; }
.dea-ucw-label {
margin: 0;
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--muted);
}
.dea-ucw-ai-note { margin: 0; font-size: var(--fs-xs); }
.dea-ucw-models { display: grid; gap: 6px; }
.dea-ucw-model-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 10px;
}
.dea-ucw-model-card { display: grid; gap: 8px; align-content: start; }
.dea-ucw-model-list { display: grid; gap: 6px; max-height: 220px; overflow: auto; }
.dea-ucw-model-add {
display: flex;
justify-content: space-between;
gap: 8px;
border: 1px solid var(--line);
border-radius: var(--radius, 10px);
background: var(--bg);
padding: 6px 10px;
cursor: pointer;
text-align: left;
font: inherit;
color: var(--text);
}
.dea-ucw-model-add:hover { border-color: var(--accent); }
.dea-ucw-model-selected {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
border: 1px solid var(--line);
border-radius: var(--radius, 10px);
padding: 6px 10px;
}
.dea-ucw-model-selected .sub { margin: 0; }
.dea-ucw-model-name { font-weight: 600; }
.dea-ucw-model-selected button {
border: 1px solid var(--line);
border-radius: 999px;
background: var(--bg);
width: 26px;
height: 26px;
cursor: pointer;
color: var(--muted);
line-height: 1;
}
.dea-ucw-model-selected button:hover { color: var(--accent); border-color: var(--accent); }
.dea-ucw-model-request { display: grid; gap: 8px; }
.dea-ucw-model-request-row { display: flex; gap: 8px; flex-wrap: wrap; }
.dea-ucw-model-request-row input { flex: 1 1 180px; }
.dea-ucw-intake-module { display: grid; gap: 10px; }
.dea-ucw-actions {
display: flex;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap;
}
.dea-ucw-actions-end { justify-content: flex-end; }
.dea-ucw-actions-start { justify-content: flex-start; }
.dea-ucw-risk-line { margin: 0; display: flex; align-items: center; gap: 8px; font-weight: 600; }
.dea-ucw-prewrap { white-space: pre-wrap; }
.dea-ucw-error-text { color: var(--bad, #c53030); }
.dea-ucw-similar { display: grid; gap: 10px; }
.dea-ucw-similar-bar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.dea-ucw-similar-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 10px;
}
.dea-ucw-similar-card { display: grid; gap: 6px; align-content: start; }
.dea-ucw-similar-card h3 { margin: 0; }
.dea-ucw-similar-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.dea-ucw-score { font-size: var(--fs-xs); font-weight: 700; color: var(--muted); }
.dea-ucw-similar-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.dea-ucw-similar-reason { margin: 0; white-space: pre-wrap; }
.dea-ucw-similar-actions {
display: flex;
justify-content: flex-end;
position: relative;
}
.dea-ucw-menu {
position: absolute;
right: 0;
top: calc(100% + 4px);
display: grid;
border: 1px solid var(--line);
border-radius: var(--radius, 10px);
background: var(--panel);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
z-index: 30;
min-width: 160px;
overflow: hidden;
}
.dea-ucw-menu button,
.dea-ucw-similar-actions > button {
border: none;
background: none;
padding: 8px 12px;
cursor: pointer;
text-align: left;
font: inherit;
color: var(--text);
}
.dea-ucw-similar-actions > button {
border: 1px solid var(--line);
border-radius: var(--radius, 10px);
padding: 4px 10px;
}
.dea-ucw-menu button:hover { background: var(--accent-soft); color: var(--accent); }
.dea-ucw-question select { justify-self: start; min-width: 160px; }
.dea-ucw-roles {
border: 1px solid var(--line);
border-radius: var(--radius, 10px);
padding: 10px 12px;
display: grid;
gap: 8px;
}
.dea-ucw-roles legend { padding: 0 6px; font-weight: 600; font-size: var(--fs-sm); }
.dea-ucw-role {
display: flex;
gap: 10px;
align-items: baseline;
text-transform: none;
letter-spacing: normal;
font-size: var(--fs-base);
}
.dea-ucw-role .sub { margin: 0; }
.dea-ucw-confirm {
display: flex;
gap: 10px;
align-items: flex-start;
text-transform: none;
letter-spacing: normal;
cursor: pointer;
}
.dea-ucw-confirm .sub { margin: 0; }
.dea-ucw-result { border-color: var(--accent-soft); }
.dea-ucw-intake-entry {
border-top: 1px solid var(--line);
padding-top: 8px;
display: grid;
gap: 4px;
}
.dea-ucw-intake-entry:first-of-type { border-top: none; padding-top: 0; }
/* Einstieg (Beginner-Auswahl) */
.dea-ucw-entry-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 14px;
}
.dea-ucw-entry-card {
display: grid;
gap: 6px;
align-content: start;
text-decoration: none;
color: var(--text);
cursor: pointer;
}
.dea-ucw-entry-card h2 { margin: 0; }
.dea-ucw-entry-card .sub { margin: 0; }
.dea-ucw-entry-card:hover { border-color: var(--accent); }
/* Dialoge */
.dea-ucw-overlay {
position: fixed;
inset: 0;
background: rgba(38, 38, 38, 0.45);
display: flex;
align-items: center;
justify-content: center;
z-index: 1200;
padding: 20px;
}
.dea-ucw-dialog {
background: var(--panel);
border: 1px solid var(--line);
border-radius: var(--radius, 10px);
padding: 16px 18px;
width: min(680px, 100%);
max-height: 85vh;
overflow: auto;
display: grid;
gap: 10px;
}
.dea-ucw-dialog-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.dea-ucw-dialog-head h3 { margin: 0; }
.dea-ucw-dialog .card { display: grid; gap: 6px; }
/* Buttons: Grundform aus dea-components; hier nur Feinschliff für nackte Buttons */
.dea-ucw-page button:disabled { opacity: 0.55; cursor: not-allowed; }
/* Automatische Erfassung im Wizard (P3-26): Zone kommt 1:1 aus
* dea-intake.css (.dea-docintake/.dea-uploadbtn) - hier nur Kandidaten. */
.dea-ucw-analysis { margin-bottom: 16px; }
.dea-ucw-an-candidates { margin-top: 12px; display: grid; gap: 10px; }
.dea-ucw-an-candidate {
border: 1px solid var(--line);
border-radius: 10px;
padding: 10px 14px;
background: var(--panel-2);
}
.dea-ucw-an-candidate-head {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
.dea-ucw-an-candidate-head button { margin-left: auto; }
/* Fragen-Erlaeuterungen aus der Knowledgebase (P7-03/P7-09): Info-Toggle "i"
* rechtsbuendig in der Zeile der Ja/Nein-Auswahl, Panel darunter. */
.dea-ucw-question-row {
display: flex;
align-items: center;
gap: 10px;
margin-top: 8px;
}
.dea-ucw-question-row > select { flex: 1; min-width: 0; }
.dea-ucw-question-row > .sub { flex: 1; margin: 0; }
.dea-ucw-question-title { display: inline-flex; align-items: center; gap: 4px; }
/* Toggle + Panel: zentral als .dea-explain-* in dea-components.css */
/* Mehrfachauswahl-Fragen (P7-14): Annex-III-Bereiche, Emotionserkennung/
* biometrische Kategorisierung - Auswahl 1:1 aus der Fragebogen-Excel. */
.dea-ucw-choices {
display: grid;
gap: 6px;
margin-top: 8px;
border: 1px solid var(--line);
border-radius: var(--radius, 10px);
background: var(--panel-2);
padding: 10px 12px;
}
.dea-ucw-choice {
display: flex;
gap: 10px;
align-items: flex-start;
text-transform: none;
letter-spacing: normal;
font-size: var(--fs-sm);
cursor: pointer;
}
.dea-ucw-choice-none {
border-top: 1px solid var(--line);
padding-top: 8px;
margin-top: 2px;
}
/* END dea-use-case-wizard.css */
/* BEGIN dea-admin-users.css */
/* Nutzerverwaltung /admin/users (P3-07 Shell-Vorbereitung) - RMS-Design, kein !important. */
.dea-au-page { display: grid; gap: 14px; align-content: start; }
.dea-au-head h1 { margin: 0; }
.dea-au-head .sub { margin: 4px 0 0; max-width: 900px; }
.dea-au-create { display: grid; gap: 10px; }
.dea-au-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 10px;
}
.dea-au-field { display: grid; gap: 4px; min-width: 0; }
.dea-au-field input,
.dea-au-field select {
border: 1px solid var(--form-line, #c9cdd4);
border-radius: var(--radius, 10px);
background: var(--panel);
color: var(--text);
padding: 8px 10px;
font: inherit;
font-size: var(--fs-sm);
text-transform: none;
letter-spacing: normal;
min-width: 0;
}
.dea-au-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.dea-au-actions-end { justify-content: flex-end; }
.dea-au-list { display: grid; gap: 8px; }
.dea-au-tablewrap { overflow-x: auto; }
.dea-au-list table select {
border: 1px solid var(--form-line, #c9cdd4);
border-radius: var(--radius, 10px);
background: var(--panel);
color: var(--text);
padding: 4px 8px;
font: inherit;
font-size: var(--fs-sm);
}
.dea-au-menu-cell { position: relative; }
.dea-au-menu-cell > button {
border: 1px solid var(--line);
border-radius: var(--radius, 10px);
background: var(--bg);
padding: 4px 10px;
cursor: pointer;
color: var(--text);
font: inherit;
}
.dea-au-menu {
position: absolute;
right: 8px;
top: calc(100% - 6px);
display: grid;
border: 1px solid var(--line);
border-radius: var(--radius, 10px);
background: var(--panel);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
z-index: 40;
min-width: 200px;
overflow: hidden;
}
.dea-au-menu button {
border: none;
background: none;
padding: 8px 12px;
cursor: pointer;
text-align: left;
font: inherit;
color: var(--text);
}
.dea-au-menu button:hover { background: var(--accent-soft); color: var(--accent); }
.dea-au-overlay {
position: fixed;
inset: 0;
background: rgba(38, 38, 38, 0.45);
display: flex;
align-items: center;
justify-content: center;
z-index: 1200;
padding: 20px;
}
.dea-au-dialog {
background: var(--panel);
border: 1px solid var(--line);
border-radius: var(--radius, 10px);
padding: 16px 18px;
width: min(480px, 100%);
max-height: 85vh;
overflow: auto;
display: grid;
gap: 10px;
}
.dea-au-dialog-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.dea-au-dialog-head h3 { margin: 0; }
.dea-au-page button:disabled { opacity: 0.55; cursor: not-allowed; }
/* END dea-admin-users.css */
/* BEGIN dea-admin-tools.css */
/* Admin-Werkzeuge: API-Keys, Project-Administration, Requirements-Katalog
* (P3-07 Shell-Vorbereitung) - RMS-Design, kein !important. */
.dea-at-page { display: grid; gap: 14px; align-content: start; }
.dea-at-head h1 { margin: 0; }
.dea-at-head .sub { margin: 4px 0 0; max-width: 900px; }
.dea-at-tabs { margin: 0; }
.dea-at-page .panel { display: grid; gap: 10px; }
.dea-at-page .panel h2 { margin: 0; }
.dea-at-grid2 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 14px;
}
.dea-at-field { display: grid; gap: 4px; min-width: 0; }
.dea-at-field input,
.dea-at-field select,
.dea-at-field textarea {
border: 1px solid var(--form-line, #c9cdd4);
border-radius: var(--radius, 10px);
background: var(--panel);
color: var(--text);
padding: 8px 10px;
font: inherit;
font-size: var(--fs-sm);
text-transform: none;
letter-spacing: normal;
min-width: 0;
}
.dea-at-field textarea { resize: vertical; }
.dea-at-check {
display: inline-flex;
gap: 6px;
align-items: center;
text-transform: none;
letter-spacing: normal;
font-size: var(--fs-sm);
cursor: pointer;
}
.dea-at-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.dea-at-actions-end { justify-content: flex-end; }
.dea-at-label {
margin: 0;
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--muted);
}
.dea-at-tablewrap { overflow-x: auto; }
.dea-at-tablewrap input[type="text"] {
border: 1px solid var(--form-line, #c9cdd4);
border-radius: var(--radius, 10px);
background: var(--panel);
color: var(--text);
padding: 4px 8px;
font: inherit;
font-size: var(--fs-sm);
}
.dea-at-key-form {
display: flex;
gap: 12px;
align-items: end;
flex-wrap: wrap;
}
.dea-at-key-form .dea-at-field { flex: 1 1 220px; }
.dea-at-methods { display: flex; gap: 10px; flex-wrap: wrap; }
.dea-at-reveal { border-color: var(--accent); }
.dea-at-reveal pre {
margin: 0;
padding: 10px 12px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--radius, 10px);
overflow-x: auto;
font-size: var(--fs-sm);
}
.dea-at-row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.dea-at-row-actions button,
.dea-at-danger {
border: 1px solid var(--line);
border-radius: var(--radius, 10px);
background: var(--bg);
padding: 4px 10px;
cursor: pointer;
font: inherit;
font-size: var(--fs-sm);
color: var(--text);
}
.dea-at-danger { color: var(--bad, #c53030); }
.dea-at-danger:hover { border-color: var(--bad, #c53030); }
.dea-at-modules { gap: 6px; }
.dea-at-module-list { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dea-at-module {
border: 1px solid var(--line);
border-radius: 999px;
background: var(--bg);
padding: 4px 12px;
cursor: pointer;
font: inherit;
font-size: var(--fs-sm);
color: var(--muted);
}
.dea-at-module.active { border-color: var(--accent); color: var(--accent-2); background: var(--accent-soft); } /* accent-2: AA auf der Tint-Flaeche (P4-17b) */
.dea-at-req-new { margin-left: auto; }
.dea-at-req-board { min-height: 120px; align-content: start; }
.dea-at-req-dropover { border-color: var(--accent); background: var(--accent-soft); }
.dea-at-req-card {
border: 1px solid var(--line);
border-radius: var(--radius, 10px);
background: var(--bg);
padding: 8px 10px;
display: grid;
gap: 4px;
cursor: grab;
}
.dea-at-req-card .sub { margin: 0; }
.dea-at-req-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.dea-at-req-actions button {
border: 1px solid var(--line);
border-radius: var(--radius, 10px);
background: var(--panel);
padding: 2px 8px;
cursor: pointer;
font: inherit;
font-size: var(--fs-xs);
color: var(--text);
}
.dea-at-req-actions button:hover { border-color: var(--accent); color: var(--accent); }
.dea-at-req-actions .dea-at-danger:hover { border-color: var(--bad, #c53030); color: var(--bad, #c53030); }
.dea-at-overlay {
position: fixed;
inset: 0;
background: rgba(38, 38, 38, 0.45);
display: flex;
align-items: center;
justify-content: center;
z-index: 1200;
padding: 20px;
}
.dea-at-dialog {
background: var(--panel);
border: 1px solid var(--line);
border-radius: var(--radius, 10px);
padding: 16px 18px;
width: min(440px, 100%);
max-height: 85vh;
overflow: auto;
display: grid;
gap: 10px;
}
.dea-at-dialog-wide { width: min(720px, 100%); }
.dea-at-dialog h3 { margin: 0; }
.dea-at-dialog-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.dea-at-page button:disabled { opacity: 0.55; cursor: not-allowed; }
/* --------------------------------------------------------------------------
API-Key-Lebenszyklus (P6-11, PSA 3.83 Req 8)
Farbe ist hier NICHT die Aussage: jedes Abzeichen traegt seinen Text
(„abgelaufen", „laeuft ab in N Tagen", „nie") - die Faerbung ist die
Zweitkodierung (Regel 6 / WCAG 1.4.1). Ausschliesslich Tokens, damit der
Kontrast in beiden Themes gerechnet bleibt.
-------------------------------------------------------------------------- */
.dea-at-badge {
display: inline-block;
padding: 1px 8px;
border-radius: 999px;
border: 1px solid var(--border);
background: var(--bg);
color: var(--muted);
font-size: var(--fs-sm);
white-space: nowrap;
}
.dea-at-badge-warn {
background: var(--warn-soft);
border-color: var(--warn);
color: var(--warn);
}
.dea-at-badge-danger {
background: var(--bad-soft);
border-color: var(--bad);
color: var(--bad);
}
.dea-at-note {
margin: 0 0 12px;
padding: 10px 12px;
border-left: 3px solid var(--warn);
background: var(--warn-soft);
color: var(--text);
font-size: var(--fs-sm);
border-radius: var(--radius, 10px);
}
/* END dea-admin-tools.css */
/* BEGIN dea-start-home.css */
/* Start + Home (P3-07) - RMS-Design, kein !important. */
.dea-sh-page { display: grid; gap: 14px; align-content: start; }
.dea-sh-head h1 { margin: 0; }
.dea-sh-head .sub { margin: 4px 0 0; }
.dea-sh-intro { max-width: 78ch; }
/* /start */
.dea-sh-grid {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
gap: 14px;
align-items: start;
}
.dea-sh-steps { display: grid; gap: 12px; }
.dea-sh-step {
display: grid;
grid-template-columns: 28px minmax(0, 1fr);
gap: 10px;
align-items: start;
}
.dea-sh-step .sub { margin: 2px 0 0; }
.dea-sh-step-num {
display: grid;
place-items: center;
width: 24px;
height: 24px;
border: 1px solid var(--accent);
border-radius: 999px;
color: var(--accent);
font-size: var(--fs-xs);
font-weight: 600;
}
.dea-sh-what { display: grid; gap: 8px; }
.dea-sh-what h3 { margin-top: 4px; }
.dea-sh-flow {
margin: 0;
padding-left: 20px;
display: grid;
gap: 6px;
color: var(--muted);
font-size: var(--fs-sm);
}
.dea-sh-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.dea-sh-cta h2 { margin: 0 0 4px; }
.dea-sh-cta .sub { margin: 0; }
.dea-sh-cta-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.dea-sh-open { display: grid; gap: 6px; }
.dea-sh-open-hint { margin: 0; }
/* Sobald chat-process die Liste einhaengt, tritt der Hinweis zurueck */
.dea-sh-open .dea-start-open-processes-list ~ .dea-sh-open-hint,
.dea-sh-open .dea-start-open-processes-list + .dea-sh-open-hint { display: none; }
/* /home */
.dea-sh-search input {
width: 100%;
max-width: 520px;
}
.dea-sh-groups { display: grid; gap: 18px; }
/* Etwas schmalere Karten als der Default (330px): die Gruppen sollen auch
neben angedocktem Chat mehrspaltig bleiben. */
.dea-ui .dea-sh-cards { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.dea-sh-group { display: grid; gap: 10px; }
.dea-sh-group-head h2 { margin: 0; font-size: 1.125rem; }
.dea-sh-card { display: grid; gap: 6px; align-content: start; text-decoration: none; }
.dea-sh-card h3 { margin: 0; font-size: var(--fs-lg); }
.dea-sh-card .sub { margin: 0; }
.dea-sh-more { color: var(--accent); font-size: var(--fs-sm); }
.dea-sh-empty { color: var(--muted); }
@media (max-width: 900px) {
.dea-sh-grid { grid-template-columns: 1fr; }
.dea-sh-cta { flex-direction: column; align-items: flex-start; }
}
/* END dea-start-home.css */
/* BEGIN dea-onboarding.css */
/* Projekt-First-Onboarding (P3-17) - RMS-Design, kein !important. */
.dea-ob-panel { margin-bottom: 16px; }
.dea-ob-steps {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 10px 0 14px;
}
.dea-ob-step {
border: 1px solid var(--line);
border-radius: 999px;
padding: 3px 12px;
font-size: var(--fs-xs);
font-weight: 700;
color: var(--muted);
background: var(--panel-2);
}
.dea-ob-step.active {
color: #fff;
background: var(--accent);
border-color: var(--accent);
}
.dea-ob-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px;
margin-top: 14px;
}
.dea-ob-panel label { margin-top: 10px; }
.dea-ob-panel .grid { margin-top: 4px; }
.dea-ob-tiles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
margin-top: 12px;
}
.dea-ob-tile {
display: grid;
gap: 4px;
color: var(--text);
text-decoration: none;
transition: border-color .15s ease;
}
.dea-ob-tile:hover { border-color: var(--accent); }
.dea-ob-banner { margin-bottom: 14px; }
.dea-ob-banner a { color: var(--accent-2); }
/* END dea-onboarding.css */
/* BEGIN dea-a11y-settings.css */
/* Barrierefreiheit-Controls (P4-17) - inline im Zahnrad-Popover und auf
* /settings. RMS-Design, kein !important. */
.dea-a11y-controls {
display: grid;
gap: 10px;
}
.dea-ui label.dea-a11y-field,
.dea-a11y-field {
display: grid;
gap: 4px;
text-transform: none;
letter-spacing: 0;
font-size: var(--fs-xs);
color: var(--muted);
}
/* Drei A-Buttons (klein/mittel/gross) - das uebliche Schriftgroessen-Muster */
.dea-a11y-fs-group {
display: flex;
gap: 6px;
}
.dea-a11y-fs-btn {
flex: 1;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--field-bg);
border: 1px solid var(--field-border);
border-radius: 6px;
color: var(--text);
cursor: pointer;
padding: 4px 8px;
transition: border-color .15s ease, background .15s ease;
}
.dea-a11y-fs-btn:hover { border-color: var(--accent); }
.dea-a11y-fs-btn.active {
border-color: var(--accent);
background: var(--accent-soft);
color: var(--accent-2);
}
/* Deutliche Spreizung (Marco 31.08.): "Aa" in klein/mittel/gross */
.dea-a11y-fs-s { font-size: .7rem; font-weight: 700; }
.dea-a11y-fs-m { font-size: 1.05rem; font-weight: 700; }
.dea-a11y-fs-l { font-size: 1.5rem; font-weight: 700; }
.dea-ui label.dea-a11y-check,
.dea-a11y-check {
display: flex;
gap: 8px;
align-items: center;
text-transform: none;
letter-spacing: 0;
font-size: var(--fs-sm);
color: var(--text);
cursor: pointer;
margin: 0;
}
.dea-a11y-check input[type="checkbox"] {
width: 16px;
height: 16px;
flex: 0 0 auto;
accent-color: var(--accent);
}
.dea-a11y-docs {
font-size: var(--fs-xs);
color: var(--accent-2);
}
/* Im dunklen Popover des Headmenus lesbar bleiben */
html[data-theme="dark"] .dea3-settings-popover .dea-a11y-check,
html[data-theme="dark"] .dea3-settings-popover .dea-a11y-field {
color: inherit;
}
/* END dea-a11y-settings.css */
/* BEGIN dea-agent-changelog.css */
.dea-changelog-overview-card {
min-height: 160px;
display: grid;
align-content: start;
gap: 8px;
padding: 14px 16px;
border-radius: 8px;
background: var(--panel);
}
.dea-changelog-page {
display: grid;
gap: 16px;
}
.dea-changelog-table-card {
padding: 14px;
overflow-x: auto;
}
.dea-changelog-table {
min-width: 780px;
}
.dea-changelog-table td {
vertical-align: top;
line-height: 1.45;
}
.dea-changelog-table td:first-child {
white-space: nowrap;
font-weight: 800;
}
/* END dea-agent-changelog.css */
/* BEGIN dea-admin-reporting.css */
/* Admin-Reporting - Modul-Layout [P3-03-Pilot]
* Komponenten (panel/tile/chip/table.data/alert/kicker) kommen aus
* dea-components.css (.dea-ui); hier stehen nur noch modulspezifische
* Layout-Regeln. Vorher: 303 Zeilen mit eigenen Karten-/Tabellen-Styles.
*/
.dea-reporting-page {
box-sizing: border-box;
width: min(calc(100% - 48px), 1240px);
margin: 0 auto;
padding: 34px clamp(24px, 3vw, 48px) 64px;
}
body.dea-chat-docked .dea-reporting-page {
width: min(calc(100% - 56px), 1180px);
padding-left: clamp(24px, 3vw, 44px);
padding-right: clamp(24px, 3vw, 44px);
}
.dea-reporting-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 18px;
flex-wrap: wrap;
margin-bottom: 4px;
}
.dea-reporting-header .sub { max-width: 620px; }
.dea-reporting-controls { min-width: 160px; }
.dea-reporting-layout {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
gap: 14px;
align-items: start;
}
.dea-reporting-panel-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
margin-bottom: 8px;
}
.dea-reporting-panel-head span { font-size: var(--fs-xs); color: var(--muted); }
.dea-reporting-table-wrap { overflow-x: auto; }
.dea-reporting-user-name { display: block; font-weight: 600; }
.dea-reporting-user-email { display: block; font-size: var(--fs-xs); color: var(--muted); }
.dea-reporting-feature { padding: 8px 0; border-top: 1px solid var(--line); }
.dea-reporting-feature:first-child { border-top: 0; padding-top: 0; }
.dea-reporting-feature-row { display: flex; justify-content: space-between; gap: 10px; }
.dea-reporting-feature-name { font-weight: 600; }
.dea-reporting-feature-value { font-variant-numeric: tabular-nums; }
.dea-reporting-feature-meta { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
@media (max-width: 980px) {
.dea-reporting-layout { grid-template-columns: 1fr; }
}
/* Modul-Sicht (DEA-weiter Verbrauch inkl. AI-RMS, Marco 01.09.) */
.dea-reporting-modules { margin-bottom: 16px; }
.dea-reporting-share { min-width: 160px; }
.dea-reporting-sharebar {
display: block;
height: 5px;
background: var(--panel-2);
border-radius: 99px;
overflow: hidden;
}
.dea-reporting-sharebar i { display: block; height: 100%; background: var(--accent); }
.dea-reporting-rms { margin: 0 0 16px; }
.dea-reporting-rms > summary { cursor: pointer; color: var(--accent-2, var(--accent)); font-size: var(--fs-sm); }
/* END dea-admin-reporting.css */
/* BEGIN dea-edition-entitlements.css */
/* Entitlement-Feedback (Notice-Toast + Blocked-Dialog).
* Die frueheren Admin-Panel-Styles (DEA Version je Benutzer) sind mit dem
* Panel entfallen - Module werden je Organisationseinheit verwaltet. */
.dea-edition-notice {
position: fixed;
right: 18px;
bottom: 18px;
z-index: 99999;
max-width: min(420px, calc(100vw - 36px));
border-radius: 8px;
background: rgba(20, 23, 30, 0.96);
color: #fff;
border: 1px solid rgba(226, 0, 116, 0.45);
box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
padding: 12px 14px;
opacity: 0;
transform: translateY(8px);
transition: opacity 160ms ease, transform 160ms ease;
}
.dea-edition-notice.is-visible {
opacity: 1;
transform: translateY(0);
}
/* P3-13: Blocked-Dialog (RMS-Stil, Komponenten aus dea-components.css) */
.dea-edition-blocked {
position: fixed;
inset: 0;
z-index: 3000;
background: rgba(20, 20, 25, .45);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.dea-edition-blocked-card {
max-width: 480px;
margin-top: 0;
box-shadow: 0 18px 60px rgba(0, 0, 0, .3);
}
.dea-edition-blocked-card a { color: var(--accent); }
.dea-edition-blocked-actions { margin-top: 14px; display: flex; justify-content: flex-end; }
/* END dea-edition-entitlements.css */
/* BEGIN dea-org-structure.css */
/* DEA Organisationsstruktur (/dea/admin/organization) - RMS-Design, Tokens aus dea-tokens.css */
.dea-org-page{padding-bottom:60px;color:var(--text)}
.dea-org-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.dea-org-head h1{margin:0 0 .35rem}
.dea-org-head p{margin:0;color:var(--muted)}
.dea-org-head-actions{display:flex;align-items:center;gap:.6rem}
.dea-org-head-actions select{padding:.55rem .7rem;border:1px solid var(--field-border);border-radius:.45rem;background:var(--field-bg);color:var(--field-text)}
.dea-org-head-actions button,.dea-org-dialog-actions button{padding:.65rem 1rem;border-radius:.45rem;border:1px solid var(--field-border);background:var(--surface);color:var(--text);cursor:pointer}
.dea-org-head-actions button:hover{border-color:var(--accent);color:var(--accent)}
.dea-org-primary{background:var(--accent);border-color:var(--accent);color:var(--surface)}
.dea-org-message{min-height:1.2rem;margin:.6rem 0;color:var(--bad)}
.dea-org-root{display:flex;align-items:center;gap:.6rem;margin:.8rem 0 .4rem;padding:.9rem 1.1rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow)}
.dea-org-kind-chip{padding:.15rem .5rem;border-radius:1rem;background:var(--panel-2);color:var(--muted);font-size:.78rem;white-space:nowrap}
.dea-org-tree{list-style:none;margin:0;padding:0 0 0 1.4rem;border-left:1px solid var(--border)}
.dea-org-node{margin:.25rem 0}
.dea-org-row{display:flex;align-items:center;gap:.5rem;padding:.5rem .7rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.dea-org-row:hover{box-shadow:var(--shadow-hover)}
.dea-org-row.is-inactive .dea-org-name{color:var(--muted);text-decoration:line-through}
.dea-org-toggle{width:1.6rem;border:0;background:none;color:var(--muted);cursor:pointer;font-size:.9rem}
.dea-org-toggle:disabled{cursor:default}
.dea-org-name{font-weight:600}
.dea-org-count{color:var(--muted);font-size:.82rem}
.dea-org-actions{margin-left:auto;display:flex;gap:.35rem;flex-wrap:wrap}
.dea-org-actions button{padding:.3rem .6rem;border:1px solid var(--field-border);border-radius:.4rem;background:var(--surface);color:var(--text);font-size:.8rem;cursor:pointer}
.dea-org-actions button:hover{border-color:var(--accent);color:var(--accent)}
.dea-org-empty{margin:.8rem 0;padding:1.6rem;border:1px dashed var(--field-border);border-radius:var(--radius);text-align:center;color:var(--muted)}
.dea-org-users{margin-top:2rem}
.dea-org-users h2{margin:0 0 .2rem}
.dea-org-hint{margin:.2rem 0 .8rem;color:var(--muted);font-size:.88rem}
.dea-org-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.dea-org-table{width:100%;border-collapse:collapse}
.dea-org-table th,.dea-org-table td{padding:.6rem .8rem;border-bottom:1px solid var(--border);text-align:left;font-size:.9rem}
.dea-org-table th{color:var(--muted);font-weight:600;background:var(--panel-2)}
.dea-org-table select{max-width:22rem;padding:.4rem .5rem;border:1px solid var(--field-border);border-radius:.4rem;background:var(--field-bg);color:var(--field-text)}
.dea-org-assign-status{color:var(--muted);font-size:.82rem}
.dea-org-dialog{position:fixed;inset:0;z-index:10020;display:grid;place-items:center;background:rgba(0,0,0,.5)}
.dea-org-dialog form{width:min(560px,calc(100vw - 2rem));max-height:90vh;overflow:auto;padding:1.5rem;border-radius:var(--radius);background:var(--surface);color:var(--text);box-shadow:var(--shadow-modal)}
.dea-org-dialog h2{margin:0 0 .6rem}
.dea-org-dialog label{display:block;margin:.8rem 0;font-size:.92rem}
.dea-org-dialog input:not([type=checkbox]),.dea-org-dialog select{display:block;width:100%;box-sizing:border-box;margin-top:.3rem;padding:.6rem;border:1px solid var(--field-border);border-radius:.45rem;background:var(--field-bg);color:var(--field-text)}
.dea-org-check{display:flex;align-items:center;gap:.5rem}
.dea-org-dialog-actions{display:flex;justify-content:flex-end;gap:.6rem;margin-top:1.2rem}
.dea-org-root{display:block}
.dea-org-root-line{display:flex;align-items:center;gap:.6rem}
.dea-org-root-line .dea-org-actions{margin-left:auto}
.dea-org-module-chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.55rem}
.dea-org-module-chip{padding:.18rem .55rem;border:1px solid var(--border);border-radius:1rem;background:var(--accent-soft);color:var(--text);font-size:.78rem}
.dea-org-module-state{background:var(--ok-soft);color:var(--ok)}
.dea-org-modules-fieldset{margin:.8rem 0;padding:.7rem .9rem;border:1px solid var(--border);border-radius:var(--radius)}
.dea-org-modules-fieldset legend{padding:0 .3rem;font-size:.85rem;color:var(--muted)}
.dea-org-modules-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.2rem .8rem;margin:.4rem 0}
.dea-org-modules-list.is-inherited{opacity:.45}
.dea-org-module-option.is-unavailable span{color:var(--muted)}
.dea-org-check{display:flex;align-items:center;gap:.5rem;margin:.35rem 0;font-size:.9rem}
.dea-org-check input{width:auto}
.dea-org-user-modules{color:var(--muted);font-size:.85rem;white-space:nowrap}
.dea-org-unassigned{margin-top:1.2rem;padding:1rem 1.2rem;border:1px dashed var(--field-border);border-radius:var(--radius);background:var(--panel-2)}
.dea-org-unassigned h3{margin:0 0 .2rem;font-size:1rem}
.dea-org-unassigned-row{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.35rem 0;border-bottom:1px solid var(--border)}
.dea-org-unassigned-row:last-child{border-bottom:0}
.dea-org-unassigned-row button{padding:.3rem .7rem;border:1px solid var(--field-border);border-radius:.4rem;background:var(--surface);color:var(--text);cursor:pointer}
.dea-org-unassigned-row button:hover{border-color:var(--accent);color:var(--accent)}
/* END dea-org-structure.css */
/* BEGIN dea3-headmenu.css */
:root {
/* EINE Schrift fuer die gesamte Navigation (Marco 02.09.): Headbar-Punkte,
Rail-Pillen, Uebersicht-Link (dea-home-cockpit.css) und beide Untermenue-
Arten lesen dieselben Tokens - Groesse/Gewicht/Zeilenhoehe koennen nicht
mehr auseinanderlaufen. */
--dea3-nav-font-size: var(--fs-sm);
--dea3-nav-font-weight: 700;
--dea3-nav-line-height: 1.15;
--dea3-nav-child-font-size: var(--fs-sm);
--dea3-nav-child-font-weight: 500;
--dea3-headbar-height: 108px;
--dea3-rail-width: 100px;
--dea3-brand-width: 200px;
--dea3-header-bg: var(--panel, #fff);
--dea3-header-fg: var(--text, #111);
--dea3-rail-bg: var(--panel, #fff);
font-family: var(--font-tele-neo);
}
html,
body,
body *:not(svg):not(path):not(circle):not(rect):not(line):not(polyline):not(polygon):not(ellipse),
button,
input,
textarea,
select {
font-family: var(--font-tele-neo) !important;
}
html:not(.dea3-nav-ready) .sidebar-nav {
visibility: hidden;
}
.app-shell {
display: block;
min-height: 100vh;
padding-top: var(--dea3-headbar-height);
padding-left: var(--dea3-rail-width);
/* Keep fixed navigation layers in the root stacking context. Overview uses
a body-level portal, so an app-shell z-index would trap the head menu
underneath that portal regardless of the menu's own z-index. */
z-index: auto;
}
.app-content {
width: 100%;
}
/* Anmeldeseite: Headbar und Rail werden auf /dea/login nicht gerendert, also
* darf der App-Shell dort auch keinen Platz dafuer reservieren. Sonst sitzt die
* Anmeldekarte um die halbe Headbar-Hoehe zu tief und um die halbe Rail-Breite
* zu weit rechts - sie soll exakt in der Viewport-Mitte stehen (Marco 28.08.).
* Hoehere Spezifitaet als .app-shell, gilt daher auch in den Media-Queries. */
.app-shell:has(.login-page) {
padding-top: 0;
padding-left: 0;
}
.sidebar {
position: fixed;
inset: 0 auto auto 0;
z-index: 2200;
width: 100%;
height: var(--dea3-headbar-height);
min-height: var(--dea3-headbar-height);
padding: 0;
display: flex;
align-items: stretch;
gap: 0;
overflow: visible;
background: transparent;
border: 0;
box-shadow: none;
pointer-events: none;
}
.sidebar-top {
position: fixed;
top: 0;
left: 0;
z-index: 2250;
width: var(--dea3-brand-width);
height: var(--dea3-headbar-height);
min-height: var(--dea3-headbar-height);
display: flex;
align-items: stretch;
justify-content: stretch;
background: var(--panel);
border-right: 1px solid rgba(17, 24, 39, 0.08);
border-bottom: 1px solid rgba(17, 24, 39, 0.08);
pointer-events: auto;
}
.sidebar-brand-switcher,
.sidebar-brand {
width: 100%;
height: 100%;
flex: none;
border-radius: 0;
position: relative;
}
.sidebar-brand-inner {
width: 100%;
height: 100%;
min-height: var(--dea3-headbar-height);
padding: 0;
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 0;
background: var(--panel);
box-shadow: none;
}
.sidebar-brand:hover .sidebar-brand-inner,
.sidebar-brand:focus .sidebar-brand-inner {
border-color: transparent;
transform: none;
}
/* Marke identisch zur oeffentlichen Startseite (.dea-public-brand in
dea-public-home.css, Marco 28.08.): 32px-T-Logo + gestapelt
"DEA Enterprise" / "AI Act Governance". Der Untertitel kommt per ::after,
damit dea-shell.js unveraendert bleibt. */
.sidebar-brand-inner {
gap: 12px;
}
.sidebar-brand-logo {
display: block;
width: 32px;
height: 32px;
object-fit: contain;
flex: 0 0 auto;
}
.sidebar-brand-text {
display: grid;
min-width: 0;
line-height: 1.08;
white-space: nowrap;
}
.sidebar-brand-wordmark {
display: inline-block;
color: var(--text);
font-family: inherit;
font-size: 1rem;
font-weight: 800;
letter-spacing: 0;
line-height: 1.08;
white-space: nowrap;
transform: none;
}
.sidebar-brand-text::after {
content: "AI Act Governance";
color: var(--muted);
font-size: var(--fs-xs);
font-weight: 700;
line-height: 1.08;
}
html[data-theme="dark"] .sidebar-top,
html[data-theme="dark"] .sidebar-brand-inner {
background: #080d15;
border-color: rgba(255, 255, 255, 0.1);
}
html[data-theme="dark"] .sidebar-brand-wordmark {
color: #fff;
}
.sidebar-brand-caret,
.sidebar-brand-menu,
.sidebar-collapse,
.sidebar-mobile-toggle,
.sidebar-backdrop,
.sidebar-dot {
display: none;
}
.sidebar-nav {
position: fixed;
top: 0;
left: var(--dea3-brand-width);
right: 0;
z-index: 2220;
height: var(--dea3-headbar-height);
min-width: 0;
padding: 0 280px 0 28px;
display: flex;
flex-direction: row;
align-items: stretch;
gap: 2.1rem;
overflow: visible;
scrollbar-width: none;
background: var(--dea3-header-bg);
border-bottom: 1px solid rgba(0, 0, 0, .12);
box-shadow: 0 8px 18px rgba(0, 0, 0, .12);
pointer-events: auto;
}
.sidebar-nav::-webkit-scrollbar {
display: none;
}
.sidebar-group {
position: relative;
flex: 0 0 auto;
display: flex;
align-items: stretch;
gap: 0;
}
.sidebar-item:not(.child),
.sidebar-group[data-dea3-zone="top"] .sidebar-item:not(.child) {
min-height: var(--dea3-headbar-height);
padding: 1.05rem 0;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0;
color: var(--dea3-header-fg);
background: transparent;
border: 0;
border-bottom: 3px solid transparent;
border-radius: 0;
white-space: nowrap;
font-size: var(--dea3-nav-font-size);
font-weight: var(--dea3-nav-font-weight);
line-height: var(--dea3-nav-line-height);
letter-spacing: 0;
box-shadow: none;
transition: color .16s ease, border-color .16s ease;
}
.sidebar-icon {
display: none;
}
.sidebar-group[data-dea3-zone="top"] .sidebar-item:not(.child):hover,
.sidebar-group[data-dea3-zone="top"] .sidebar-item:not(.child):focus,
.sidebar-group[data-dea3-zone="top"] .sidebar-item:not(.child).active {
color: var(--accent);
background: transparent;
border-bottom-color: var(--accent);
transform: none;
}
.sidebar-group[data-dea3-zone="top"] .dea3-side-icon {
display: none;
}
.sidebar-group[data-dea3-zone="side"] {
position: fixed;
left: 0;
top: calc(var(--dea3-headbar-height) + var(--dea3-side-offset, 16px));
z-index: 2240;
width: var(--dea3-rail-width);
height: 58px;
display: flex;
align-items: center;
justify-content: center;
pointer-events: auto;
}
.sidebar::before {
content: "";
position: fixed;
left: 0;
top: var(--dea3-headbar-height);
bottom: 0;
z-index: 2210;
width: var(--dea3-rail-width);
background: var(--dea3-rail-bg);
border-right: 1px solid rgba(0, 0, 0, .12);
box-shadow: 8px 0 18px rgba(0, 0, 0, .12);
pointer-events: none;
}
/* Rail-Einträge tragen exakt die Optik/Animation des "Übersicht"-Links
(.dea-overview-rail-link in dea-home-cockpit.css): Pille mit runder
Aussenkante, Default/Hover/Aktiv identisch (Marco 28.08.). */
.sidebar-group[data-dea3-zone="side"] .sidebar-item {
width: var(--dea3-rail-width);
min-height: 58px;
padding: 6px 4px;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
/* --muted allein erreicht auf der Pille nur 4.36:1 (axe) - Richtung --text
gemischt bleibt der zurückgenommene Look und die Schrift lesbar. */
color: color-mix(in srgb, var(--muted) 55%, var(--text));
background: color-mix(in srgb, var(--surface) 68%, transparent);
border: 1px solid transparent;
border-radius: 0 14px 14px 0;
box-shadow: 0 10px 24px color-mix(in srgb, #020617 9%, transparent);
white-space: normal;
overflow-wrap: break-word;
text-align: center;
text-decoration: none;
font-size: var(--dea3-nav-font-size);
font-weight: var(--dea3-nav-font-weight);
line-height: var(--dea3-nav-line-height);
transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.sidebar-group[data-dea3-zone="side"] .sidebar-item:hover,
.sidebar-group[data-dea3-zone="side"] .sidebar-item:focus {
transform: translateX(2px);
color: var(--text);
border-color: color-mix(in srgb, var(--accent) 28%, transparent);
background: color-mix(in srgb, var(--surface) 68%, transparent);
}
.sidebar-group[data-dea3-zone="side"] .sidebar-item.active {
color: #fff;
background: var(--accent);
border-color: var(--accent);
/* ohne Schatten: axe blendet die box-shadow-Farbe in den Hintergrund und
rechnet die weisse Schrift dann knapp unter AA (4,49 statt 4,68) */
box-shadow: none;
}
.sidebar-group[data-dea3-zone="side"] .sidebar-icon {
display: none;
}
.dea3-side-icon {
width: 23px;
height: 23px;
display: block;
flex: 0 0 auto;
color: currentColor;
filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--accent) 24%, transparent));
}
.sidebar-label {
flex: 0 0 auto;
}
/* Kompaktes Dropdown statt Mega-Panel (Marco 28.08.): haengt direkt unter dem
Menuepunkt, Unterpunkte untereinander, Schrift wie der Oberpunkt. */
.sidebar-children {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
z-index: 2300;
/* Mindestens so breit wie der Menuepunkt: setzt bindMegaMenu per JS
(min-width in Prozent wuerde bei position:fixed gegen den Viewport
aufloesen). */
min-width: 180px;
width: max-content;
margin: 0;
padding: 12px 18px 14px;
display: none;
grid-template-columns: 1fr;
align-content: start;
justify-content: start;
row-gap: 6px;
border: 1px solid rgba(0, 0, 0, .12);
border-radius: 0 0 12px 12px;
background: var(--panel);
box-shadow: 0 18px 34px rgba(0, 0, 0, .12);
}
/* Rail-Flyout (Review/Governance, Admin): absolut zur fixierten Rail-Gruppe,
damit das Panel neben dem Icon statt am Viewport-Rand haengt. */
.sidebar-group[data-dea3-zone="side"] .sidebar-children {
position: absolute;
top: -10px;
left: 100%;
right: auto;
transform: none;
min-width: 244px;
padding: 14px 22px 16px;
grid-template-columns: 1fr;
grid-auto-columns: auto;
column-gap: 0;
row-gap: 6px;
border: 1px solid rgba(0, 0, 0, .12);
border-radius: 0 14px 14px 0;
box-shadow: 14px 12px 30px rgba(0, 0, 0, .16);
max-height: calc(100vh - var(--dea3-headbar-height) - 24px);
overflow-y: auto;
}
/* Die Rail-Item-Regel (Icon ueber Label, 58px hoch) darf nicht auf die
Flyout-Einträge durchschlagen - die bleiben eine schlanke Textliste. */
.sidebar-group[data-dea3-zone="side"] .sidebar-children .sidebar-item.child {
width: auto;
min-height: 32px;
padding: 4px 0;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 0;
text-align: left;
white-space: nowrap;
font-size: var(--dea3-nav-child-font-size);
font-weight: var(--dea3-nav-child-font-weight);
}
.sidebar-group[data-dea3-zone="side"] .sidebar-children .sidebar-item.child:hover,
.sidebar-group[data-dea3-zone="side"] .sidebar-children .sidebar-item.child:focus,
.sidebar-group[data-dea3-zone="side"] .sidebar-children .sidebar-item.child.active {
color: var(--accent);
background: var(--accent-soft);
}
.sidebar-group[data-dea3-zone="side"] .sidebar-item[aria-expanded="true"] {
color: #fff;
background: var(--accent);
border-color: var(--accent);
}
.sidebar-group[data-dea3-zone="top"].is-open .sidebar-children,
.sidebar-group[data-dea3-zone="side"].is-open .sidebar-children {
display: grid;
}
.sidebar-item.child {
min-height: 32px;
justify-content: flex-start;
/* Seitliches Padding + Gegenmargin: Text bleibt buendig, das Hover-
Highlight bekommt eine Pillenflaeche (Marco 28.08.). */
padding: 4px 10px;
margin: 0 -10px;
color: var(--text);
border: 0;
border-radius: 8px;
background: transparent;
white-space: nowrap;
font-size: var(--dea3-nav-child-font-size);
font-weight: var(--dea3-nav-child-font-weight);
line-height: var(--dea3-nav-line-height);
transform: none;
transition: color .14s ease, background .14s ease;
}
.sidebar-item.child:hover,
.sidebar-item.child:focus,
.sidebar-item.child.active {
color: var(--accent);
border-color: transparent;
background: var(--accent-soft);
}
.sidebar-footer {
position: fixed;
top: 0;
right: 0;
z-index: 2260;
height: var(--dea3-headbar-height);
margin: 0;
padding: 0 24px 0 14px;
display: flex;
flex-direction: row;
align-items: center;
gap: 1rem;
background: var(--dea3-header-bg);
pointer-events: auto;
}
.sidebar-footer::before {
content: none;
display: none;
height: 36px;
min-width: 44px;
padding: 0 .75rem;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--ok);
border-radius: 999px;
color: var(--ok);
background: var(--ok-soft);
font-size: .86rem;
line-height: 1;
}
.sidebar-log-toggle,
.sidebar-locale .btn,
.sidebar-toggle,
.dea3-settings-button {
width: auto;
height: 44px;
min-width: 44px;
padding: 0 .72rem;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 999px;
color: var(--text);
background: var(--panel);
box-shadow: none;
}
.sidebar-log-toggle:hover,
.sidebar-log-toggle:focus,
.sidebar-locale .btn:hover,
.sidebar-locale .btn:focus,
.sidebar-toggle:hover,
.sidebar-toggle:focus,
.dea3-settings-button:hover,
.dea3-settings-button:focus {
color: var(--accent);
background: var(--accent-soft);
transform: none;
}
.sidebar-log-toggle,
.sidebar-locale {
display: none;
}
.sidebar-toggle {
padding: 0;
font-size: 0;
}
.sidebar-toggle img {
width: 22px;
height: 22px;
display: block;
filter: brightness(0);
}
.sidebar-toggle:hover img,
.sidebar-toggle:focus img {
filter: none;
}
/* Der source-owned Shell-Schalter (dea-shell.js) rendert nur das Textlabel,
und Textlabels sind auf diesen 44px-Icon-Buttons ausgeblendet - dadurch war
der Light/Dark-Schalter unsichtbar (Marco 28.08.). Icon deshalb hier: Sonne
im hellen, Mond im dunklen Theme, gefaerbt ueber currentColor (Hover =
Akzent wie bei den Nachbarn). */
.sidebar-toggle[data-dea-shell-theme]::before {
content: "";
width: 22px;
height: 22px;
display: block;
flex: 0 0 auto;
background: currentColor;
-webkit-mask: var(--dea3-theme-icon) center / contain no-repeat;
mask: var(--dea3-theme-icon) center / contain no-repeat;
}
:root {
/* Sonne */
--dea3-theme-icon: url('data:image/svg+xml;utf8,');
}
html[data-theme="dark"] {
/* Mond */
--dea3-theme-icon: url('data:image/svg+xml;utf8,');
}
.toggle-label,
.log-label {
display: none;
}
.dea3-settings-button {
padding: 0;
text-decoration: none;
}
.dea3-settings-button.is-open,
.dea3-settings-button[aria-expanded="true"] {
color: var(--accent);
}
.dea3-settings-button svg {
width: 22px;
height: 22px;
}
.dea3-settings-popover {
position: fixed;
top: calc(var(--dea3-headbar-height) + 12px);
right: 16px;
z-index: 2600;
width: 260px;
padding: 12px;
display: none;
gap: 12px;
color: var(--text);
background: var(--panel);
border: 1px solid rgba(0, 0, 0, .16);
border-radius: 12px;
box-shadow: 0 20px 48px -28px rgba(0, 0, 0, .65);
}
.dea3-settings-popover.is-open {
display: grid;
}
.dea3-settings-section {
display: grid;
gap: 8px;
}
.dea3-settings-label {
color: var(--muted);
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: .08em;
}
/* Hilfe-Link im Popover (Dokumentation): Optik der Untermenue-Eintraege,
Buch-Icon wie frueher in der Rail. */
.dea3-settings-link {
min-height: 40px;
padding: 6px 10px;
display: flex;
align-items: center;
gap: 10px;
color: var(--text);
border-radius: 8px;
text-decoration: none;
font-size: var(--dea3-nav-child-font-size);
font-weight: var(--dea3-nav-font-weight);
line-height: var(--dea3-nav-line-height);
transition: color .14s ease, background .14s ease;
}
.dea3-settings-link .dea3-side-icon {
width: 20px;
height: 20px;
filter: none;
}
.dea3-settings-link:hover,
.dea3-settings-link:focus {
color: var(--accent);
background: var(--accent-soft);
}
.dea3-segmented {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
.dea3-segmented button {
min-height: 34px;
padding: 0 10px;
border: 1px solid rgba(0, 0, 0, .26);
border-radius: 999px;
color: var(--text);
background: var(--panel);
cursor: pointer;
}
.dea3-segmented button:hover,
.dea3-segmented button:focus,
.dea3-segmented button.is-active {
color: var(--accent);
border-color: var(--accent);
}
.dea3-logout-button {
min-height: 36px;
padding: 0 12px;
border: 1px solid rgba(226, 0, 116, .55);
border-radius: 999px;
color: var(--accent);
background: transparent;
cursor: pointer;
font-weight: 600;
}
.dea3-logout-button:hover,
.dea3-logout-button:focus {
color: #fff;
background: var(--accent);
}
.sidebar-locale {
width: auto;
display: none;
align-items: center;
gap: .4rem;
}
.page,
.shell {
padding-top: 24px;
}
.log-panel {
left: calc(var(--dea3-rail-width) + 20px);
top: calc(var(--dea3-headbar-height) + 24px);
}
html[data-theme="dark"] {
--dea3-header-bg: #0b0b0b;
--dea3-header-fg: #fff;
--dea3-rail-bg: #0b0b0b;
}
html[data-theme="dark"] .sidebar-nav {
background: #0b0b0b;
border-bottom-color: rgba(255, 255, 255, .14);
box-shadow: 0 8px 18px rgba(0, 0, 0, .34);
}
html[data-theme="dark"] .sidebar::before {
background: #0b0b0b;
border-right-color: rgba(255, 255, 255, .14);
box-shadow: 8px 0 18px rgba(0, 0, 0, .34);
}
html[data-theme="dark"] .sidebar-footer {
background: #0b0b0b;
}
html[data-theme="dark"] .sidebar-group[data-dea3-zone="top"] .sidebar-item:not(.child) {
color: #fff;
}
/* Hover/Fokus/Aktiv in Magenta - muss die Theme-Grundfarbe oben ueberstimmen
(deren html[data-theme]-Selektor ist spezifischer als die Basis-Hover-Regel,
Marco 28.08.). */
html[data-theme="dark"] .sidebar-group[data-dea3-zone="top"] .sidebar-item:not(.child):hover,
html[data-theme="dark"] .sidebar-group[data-dea3-zone="top"] .sidebar-item:not(.child):focus,
html[data-theme="dark"] .sidebar-group[data-dea3-zone="top"] .sidebar-item:not(.child).active {
color: var(--accent);
}
html:not([data-theme="dark"]) .sidebar-nav,
html[data-theme="light"] .sidebar-nav {
background: var(--panel);
}
html:not([data-theme="dark"]) .sidebar::before,
html[data-theme="light"] .sidebar::before {
background: var(--panel);
}
html:not([data-theme="dark"]) .sidebar-footer,
html[data-theme="light"] .sidebar-footer {
background: var(--panel);
}
html:not([data-theme="dark"]) .sidebar-group[data-dea3-zone="top"] .sidebar-item:not(.child),
html[data-theme="light"] .sidebar-group[data-dea3-zone="top"] .sidebar-item:not(.child) {
color: #111;
}
html:not([data-theme="dark"]) .sidebar-group[data-dea3-zone="top"] .sidebar-item:not(.child):hover,
html:not([data-theme="dark"]) .sidebar-group[data-dea3-zone="top"] .sidebar-item:not(.child):focus,
html:not([data-theme="dark"]) .sidebar-group[data-dea3-zone="top"] .sidebar-item:not(.child).active,
html[data-theme="light"] .sidebar-group[data-dea3-zone="top"] .sidebar-item:not(.child):hover,
html[data-theme="light"] .sidebar-group[data-dea3-zone="top"] .sidebar-item:not(.child):focus,
html[data-theme="light"] .sidebar-group[data-dea3-zone="top"] .sidebar-item:not(.child).active {
color: var(--accent);
}
html[data-theme="dark"] .sidebar-children,
html[data-theme="dark"] .dea3-settings-popover {
color: #fff;
background: #0b0b0b;
border-color: rgba(255, 255, 255, .18);
}
html[data-theme="dark"] .dea3-settings-link {
color: #fff;
}
html[data-theme="dark"] .dea3-settings-link:hover,
html[data-theme="dark"] .dea3-settings-link:focus {
color: var(--accent);
background: var(--accent-soft);
}
html[data-theme="dark"] .sidebar-item.child,
html[data-theme="dark"] .dea3-segmented button,
html[data-theme="dark"] .dea3-logout-button {
color: #fff;
background: #111;
}
html[data-theme="dark"] .sidebar-item.child:hover,
html[data-theme="dark"] .sidebar-item.child:focus,
html[data-theme="dark"] .sidebar-item.child.active {
color: var(--accent);
background: var(--accent-soft);
}
html[data-theme="dark"] .dea3-logout-button {
color: var(--accent);
}
html[data-theme="dark"] .sidebar-footer::before,
html[data-theme="dark"] .sidebar-log-toggle,
html[data-theme="dark"] .sidebar-locale .btn,
html[data-theme="dark"] .sidebar-toggle,
html[data-theme="dark"] .dea3-settings-button {
color: #fff;
background: #0b0b0b;
}
html[data-theme="dark"] .sidebar-toggle img {
filter: brightness(0) invert(1);
}
html[data-theme="dark"] .dea3-settings-label {
color: rgba(255, 255, 255, .72);
}
@media (max-width: 1180px) {
.sidebar-nav {
gap: 1.2rem;
padding-right: 230px;
}
}
/* Schmales Fenster (Marco 28.08.): erst engere Abstaende, dann horizontal
scrollbar - kein Menuepunkt darf unerreichbar abgeschnitten werden. Die
Mega-Panels sind position:fixed und werden davon nicht beschnitten. */
@media (max-width: 1080px) {
.sidebar-nav {
gap: .85rem;
padding-right: 210px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
}
@media (max-width: 940px) {
.sidebar-nav {
padding-right: 200px;
}
}
@media (max-width: 760px) {
:root {
--dea3-headbar-height: 76px;
--dea3-rail-width: 76px;
--dea3-brand-width: 76px;
}
.app-shell {
padding-top: var(--dea3-headbar-height);
padding-left: var(--dea3-rail-width);
}
.sidebar-brand-inner {
justify-content: center;
padding: 0;
}
.sidebar-brand-text {
display: none;
}
.sidebar-brand-logo {
height: 40px;
}
.sidebar-brand-inner::after,
.sidebar-brand::after {
display: none;
}
.sidebar-nav {
height: var(--dea3-headbar-height);
padding: 0 16px;
gap: 1rem;
overflow-x: auto;
overflow-y: hidden;
}
.sidebar-group[data-dea3-zone="top"] .sidebar-item:not(.child) {
min-height: var(--dea3-headbar-height);
}
.sidebar-group[data-dea3-zone="side"] {
top: calc(var(--dea3-headbar-height) + var(--dea3-side-offset, 10px));
width: var(--dea3-rail-width);
height: 54px;
}
.sidebar-group[data-dea3-zone="side"] .sidebar-item {
width: var(--dea3-rail-width);
min-height: 54px;
font-size: var(--dea3-nav-font-size);
}
.dea3-side-icon {
width: 20px;
height: 20px;
}
.sidebar-footer {
display: none;
}
}
body.dea-chat-docked .app-shell {
width: calc(100% - var(--dea-chat-dock-width, 25vw));
max-width: calc(100% - var(--dea-chat-dock-width, 25vw));
}
body.dea-chat-docked .sidebar {
right: var(--dea-chat-dock-width, 25vw);
width: auto;
}
body.dea-chat-docked .sidebar-footer {
right: var(--dea-chat-dock-width, 25vw);
}
body.dea-chat-docked .dea3-settings-popover {
right: calc(var(--dea-chat-dock-width, 25vw) + 16px);
}
/* Der angedockte Chat nimmt der Kopfzeile 25vw - ohne diese Kompaktierung
liefen die hinteren Menuepunkte wieder aus dem sichtbaren Bereich
(Media Queries kennen nur die Fensterbreite, nicht den Dock-Abzug). */
body.dea-chat-docked .sidebar-nav {
gap: .85rem;
padding-right: 210px;
overflow-x: auto;
overflow-y: hidden;
}
/* Die Schrift bleibt auch bei angedocktem Chat in voller Groesse
(Marco 28.08.); reicht der Platz nicht, scrollt die Kopfzeile
horizontal (overflow-x oben) statt zu schrumpfen. */
@media (max-width: 980px) {
body.dea-chat-docked .app-shell,
body.dea-chat-docked .sidebar {
width: 100vw;
max-width: 100vw;
}
body.dea-chat-docked .sidebar {
right: auto;
}
body.dea-chat-docked .sidebar-footer {
right: 0;
}
body.dea-chat-docked .dea3-settings-popover {
right: 16px;
}
}
/* END dea3-headmenu.css */
/* BEGIN dea-tokens.css */
/* DEA Enterprise Design-Tokens [P3-01]
* Referenz: RMS-UI (aigs-rms rms_service/static/index.html, :root-Block).
* Diese Datei wird als LETZTE in dea-app-unified.css gebündelt und richtet die
* vorhandenen Theme-Variablen des Light-Themes auf die RMS-Werte aus:
* heller Portal-Look, ein Akzent (#e20074), 1px-Linien statt Schatten.
* Neue Module benutzen ausschließlich diese Tokens - keine neuen Hex-Werte.
*/
/* Typografie (P4-17a): rem-Skala auf Browser-Basis 16px - so wirkt die
* Schriftgroessen-Einstellung des Nutzers (data-fontsize multipliziert per rem).
* Themenunabhaengig auf :root, damit Light und Dark identisch rendern -
* frueher standen die Tokens nur im Light-Block und der Dark-Mode fiel
* ueberall auf geerbte 16px zurueck. Basis 16px (die gewohnte Dark-Groesse),
* Stufen proportional. */
:root {
--fs-xs: .875rem; /* 14px - Kicker, Chips, Spaltenkoepfe */
--fs-sm: .9375rem; /* 15px - Sekundaertext, Tabellen */
--fs-base: 1rem; /* 16px - Standardtext */
--fs-md: 1.0625rem; /* 17px - hervorgehobener Text */
--fs-lg: 1.125rem; /* 18px - Navigations-/Leittext */
--fs-xl: 1.375rem; /* 22px - Seitentitel h1 */
}
:root[data-theme="light"] {
/* Flächen */
--bg: #f2f3f5; /* App-Canvas (RMS --bg) */
--bg-2: #f2f3f5;
--surface: #ffffff; /* Panels/Karten (RMS --panel) */
--card: #ffffff;
--panel: #ffffff;
--panel-2: #f7f8fa; /* Sekundärfläche: Chips, Meter (RMS --panel-2) */
/* Text */
--text: #262626; /* Primärtext, kein reines Schwarz (RMS --text) */
--muted: #5c6470; /* Sekundärtext/Labels - AA: 5,98:1 auf Weiß, 5,39:1 auf --bg (P4-17b; war #6f7785 mit 4,06:1 auf --bg) */
/* Linien & Rahmen */
--border: #e3e5e8; /* dekorative Trennlinien (RMS --line; WCAG 1.4.11 gilt nur für Bedienelemente) */
--line: #e3e5e8;
--form-line: #828a97; /* Bedienelement-Rahmen - 3,48:1 auf Weiß, 3,14:1 auf --bg (P4-17b, WCAG 1.4.11 >=3:1) */
--field-border: #828a97; /* Formular-Rahmen (war #c9cdd4 mit 1,59:1) */
--field-bg: #ffffff;
--field-text: #262626; /* Eingabetext ist Text, nicht Akzent */
/* Akzent - die EINZIGE Markenfarbe */
--accent: #e20074;
--accent-2: #b8005f;
--accent-soft: #fdeef6; /* Magenta-Tint für aktive/hover-Flächen */
/* Semantik (nur für Status/Risikobänder, nie dekorativ) */
--ok: #187d3c;
--ok-soft: #e8f5ec;
--warn: #96570a; /* AA: 5,21:1 auf --warn-soft, 5,73:1 auf Weiss (P4-17b; war #b26a00 mit 3,85:1) */
--warn-soft: #fdf3e3;
--bad: #d0021b;
--bad-soft: #fdeaec;
--unknown: #9aa1ac;
/* Geometrie & Tiefe: Linien statt Schatten (RMS-Schattenskala) */
--radius: 10px;
--shadow: 0 1px 2px rgba(0, 0, 0, .04);
--card-contrast-shadow: 0 1px 2px rgba(0, 0, 0, .04);
--shadow-hover: 0 2px 10px rgba(0, 0, 0, .12);
--shadow-modal: 0 18px 60px rgba(0, 0, 0, .3);
}
/* Canvas: heller Grund unter allen Views (RMS: body auf --bg) */
:root[data-theme="light"] body {
background: var(--bg);
color: var(--text);
}
/* Dark-Theme-Aufloesung derselben Tokens (Nutzer-Toggle; Light bleibt Standard, A5).
* Damit duerfen Modul-Styles ueberall var(--…) verwenden, ohne im Dark-Mode
* ins Leere zu greifen. */
:root[data-theme="dark"] {
--bg: #0b0b0d;
--bg-2: #0b0b0d;
--surface: #17171a;
--card: #17171a;
--panel: #17171a;
--panel-2: #1f1f24;
--text: #f2f2f4;
--muted: #9aa1ac;
--border: rgba(255, 255, 255, .14);
--line: rgba(255, 255, 255, .14);
--form-line: rgba(255, 255, 255, .42); /* Bedienelement-Rahmen sichtbar (P4-17b) */
--field-border: rgba(255, 255, 255, .42);
--field-bg: #101013;
--field-text: #f2f2f4;
--accent: #e20074;
--accent-2: #ff2b91;
--accent-soft: rgba(226, 0, 116, .16);
--ok: #4cc38a;
--ok-soft: rgba(24, 125, 60, .18);
--warn: #e0a13e;
--warn-soft: rgba(178, 106, 0, .18);
--bad: #ff5c6c;
--bad-soft: rgba(208, 2, 27, .18);
--unknown: #9aa1ac;
--radius: 10px;
--shadow: 0 1px 2px rgba(0, 0, 0, .4);
--card-contrast-shadow: 0 1px 2px rgba(0, 0, 0, .4);
--shadow-hover: 0 2px 10px rgba(0, 0, 0, .5);
--shadow-modal: 0 18px 60px rgba(0, 0, 0, .6);
}
:root[data-theme="dark"] body {
background: var(--bg);
color: var(--text);
}
/* ---------- Hoher Kontrast (P4-17c) ----------
* Aktiv per Nutzer-Schalter in /settings (html[data-contrast="high"],
* persistiert in localStorage "contrast" wie das Theme) ODER automatisch
* bei Systempraeferenz prefers-contrast: more. Harte Linien statt
* Flaechenunterschieden, Schatten aus, Text auf Maximum. */
:root[data-contrast="high"],
:root:not([data-theme="dark"])[data-contrast="high"] {
--text: #000000;
--muted: #333a44; /* 10,6:1 auf Weiss */
--border: #6b7280; /* dekorative Linien sichtbar (4,1:1) */
--line: #6b7280;
--form-line: #1f2530;
--field-border: #1f2530;
--shadow: none;
--shadow-hover: none;
--card-contrast-shadow: none;
}
:root[data-theme="dark"][data-contrast="high"] {
--text: #ffffff;
--muted: #d5d9df;
--border: rgba(255, 255, 255, .55);
--line: rgba(255, 255, 255, .55);
--form-line: rgba(255, 255, 255, .85);
--field-border: rgba(255, 255, 255, .85);
--shadow: none;
--shadow-hover: none;
--card-contrast-shadow: none;
}
@media (prefers-contrast: more) {
:root:not([data-theme="dark"]):not([data-contrast]) {
--text: #000000;
--muted: #333a44;
--border: #6b7280;
--line: #6b7280;
--form-line: #1f2530;
--field-border: #1f2530;
--shadow: none;
--shadow-hover: none;
--card-contrast-shadow: none;
}
:root[data-theme="dark"]:not([data-contrast]) {
--text: #ffffff;
--muted: #d5d9df;
--border: rgba(255, 255, 255, .55);
--line: rgba(255, 255, 255, .55);
--form-line: rgba(255, 255, 255, .85);
--field-border: rgba(255, 255, 255, .85);
--shadow: none;
--shadow-hover: none;
--card-contrast-shadow: none;
}
}
/* Windows-Kontrastmodus (forced-colors): der Browser ersetzt Farben durch
* Systemfarben - hier nur sicherstellen, dass Bedeutungstraeger, deren
* Hintergrundfarbe entfernt wird, eine sichtbare Kontur behalten. */
@media (forced-colors: active) {
.dea-cockpit-status-tile span::before,
.dea-cockpit-risk-row b,
.dea-cockpit-open-track i,
.dea-ui .chip {
border: 1px solid CanvasText;
}
}
/* ---------- Schriftgroesse per Nutzerwahl (P4-17a/Zahnrad) ----------
* Prozent statt px: eine im Browser vergroesserte Grundschrift wird
* MULTIPLIZIERT, nicht ueberschrieben. Die rem-Skala skaliert die ganze App. */
:root[data-fontsize="large"] { font-size: 112.5%; }
:root[data-fontsize="xlarge"] { font-size: 125%; }
/* END dea-tokens.css */