/* IMAP Plattform-Design, Referenz vom 06.10.2026.
   Präsentationsschicht: Klassen/IDs, Sichtbarkeitszustände und Aktionen der App bleiben erhalten.
   Breite Arbeitslisten nutzen bewusst die verfügbare Breite; Text/Formularseiten max. 1120px. */
:root {
    --surface: #fff; --ink: #000; --ink-muted: #57565b; --linie: #b9cfcb;
    --dark-green: #12434d; --dark-green-500: #2a565f; --dark-green-300: #718e94;
    --mint: #a0f0c3; --mint-100: #ecfcf3; --mint-200: #d9f9e7;
    --dark-mint: #00a89e; --dark-mint-100: #daf3f1;
    --neon-gelb: #d2dc50; --neon-gelb-hover: #e1e97c;
    --neon-lila: #82368c; --neon-lila-100: #dbc6de; --lila-200: #bc9bc8;
    /* CD-Abweichung (PO 15.10.2026, P1·T32): nur kritische Zählerstufe und „in nächste Phase senden“ */
    --signal-orange: #f39200; --signal-orange-hover: #d98200;
    --neon-green-100: #f6f8dc; --schleier: rgb(18 67 77 / 70%);
    --kurz: .15s; --mittel: .22s;
    /* Flaechen-Tokens (P1-T29): nur Aliase auf CD-Tokens, keine neuen Hex-Werte. */
    --flaeche-kopf: var(--mint); --flaeche-hover: var(--dark-mint-100);
    --flaeche-auswahl: var(--neon-gelb); --flaeche-feldgruppe: var(--mint-200); --rahmen-kraeftig: var(--dark-green-300);
}
*, *::before, *::after { box-sizing: border-box; border-radius: 0 !important; box-shadow: none !important; text-shadow: none !important; }
/* PO-Ausnahme (PO 28.10.2026, P1·T68): Formularfelder bekommen abgerundete Ecken und einen weichen Fokusring (bewusste CD-Abweichung, beide Modi).
   Alles andere (Knöpfe, Tabellen, Karten, Kacheln) bleibt eckig. Nur Tokens aus :root; der Pfeil der Auswahlfelder ist ein SVG in der Farbe von
   --dark-green (#12434d, dort %23 kodiert), kein neuer Farbwert. Feldmaße (Höhe, Polster) setzen die Komponenten-Regeln, hier nur Ecken, Rand und Fokus. */
:is(input:not([type="checkbox"], [type="radio"], [type="button"], [type="submit"], [type="file"], [type="hidden"], [type="range"], [type="color"]), select, textarea, .form-input, .assignee-input, .assignee-input-wrap, .people-combobox-toggle, .date-field-btn):not(.period-month *) { border-radius: 8px !important; }
.people-combobox-list { border-radius: 10px !important; }
:is(input:not([type="checkbox"], [type="radio"], [type="button"], [type="submit"], [type="file"], [type="hidden"], [type="range"], [type="color"], .assignee-input), select, textarea, .assignee-input-wrap):not(.period-month *) { border: 1px solid var(--linie); background-color: var(--surface); color: var(--ink); transition: border-color var(--kurz), box-shadow var(--kurz), background-color var(--kurz); }
:is(input:not([type="checkbox"], [type="radio"], [type="button"], [type="submit"], [type="file"], [type="hidden"], [type="range"], [type="color"]), select, textarea, .assignee-input-wrap):not(.period-month *):hover:not(:focus, :focus-within, :disabled) { border-color: var(--rahmen-kraeftig); }
:is(input:not([type="checkbox"], [type="radio"], [type="button"], [type="submit"], [type="file"], [type="hidden"], [type="range"], [type="color"], .assignee-input), select, textarea, .assignee-input:not(.assignee-input-wrap *)):not(.period-month *):focus,
.assignee-input-wrap:focus-within { outline: none !important; border-color: var(--dark-green) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--dark-mint) 35%, transparent) !important; }
.assignee-input-wrap .assignee-input:focus { outline: none !important; }
:is(input:not([type="checkbox"], [type="radio"], [type="button"], [type="submit"], [type="file"], [type="hidden"], [type="range"], [type="color"]), select, textarea):not(.period-month *):is(:disabled, [readonly]) { background-color: var(--mint-100); color: var(--ink-muted); }
:is(input, textarea, .assignee-input)::placeholder { color: var(--ink-muted); opacity: 1; }
/* !important nur für Bild und Rechts-Polster: Komponenten-Regeln mit background-Kurzschrieb oder höherer Spezifität nahmen dem Select sonst den Pfeil; die Hintergrundfarbe bleibt Sache der Komponente. */
select:not([multiple], [size]):not(.period-month *) { -webkit-appearance: none; appearance: none; padding-right: 26px !important; background-repeat: no-repeat !important; background-position: right 8px center !important; background-size: 10px 6px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2312434d' stroke-width='1.5'/%3E%3C/svg%3E") !important; }
select:not([multiple], [size]):disabled:not(.period-month *) { opacity: .7; }
/* Datumsfeld TT.MM.JJJJ (app.js dateFieldHtml): Textfeld, Kalender-Knopf, unsichtbares type=date nur für die Auswahl */
.date-field { position: relative; display: flex; align-items: stretch; gap: 6px; width: 100%; min-width: 0; }
.date-field .date-input { flex: 1 1 auto; min-width: 0; }
.date-field-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; min-height: 34px; padding: 0; border: 1px solid var(--linie); background: var(--surface); color: var(--dark-green); cursor: pointer; }
.date-field-btn:hover { border-color: var(--rahmen-kraeftig); background: var(--mint-100); }
.date-field-btn svg { display: block; }
.date-native { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--surface); color: var(--ink); font: 400 16px/1.5 Arial, sans-serif; }
button, input, select, textarea { font-family: inherit; }
em, i { font-style: normal; }
[style*="font-style: italic"] { font-style: normal !important; }
strong, b, h2, h3, th, label { font-weight: 600; }
h1 { font-weight: 700; }
a { color: var(--dark-green); text-underline-offset: 3px; }
mark { background: var(--neon-gelb); color: var(--ink); padding: 0 .15em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
:focus-visible { outline: 2px solid var(--neon-lila) !important; outline-offset: 2px; }
.app-sidebar :focus-visible, .title-row :focus-visible, #login-screen :focus-visible { outline-color: var(--mint) !important; }
button { transition: background-color var(--kurz), color var(--kurz), border-color var(--kurz); }
button:hover { filter: none; transform: none; }
button:disabled { opacity: .5; cursor: not-allowed; }
.skip-link { position: fixed; top: 8px; left: -9999px; z-index: 10000; background: var(--surface); padding: 10px 16px; }
.skip-link:focus { left: 12px; }
.eyebrow { font-size: 12px; line-height: 1.4; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.brand-wordmark { display: block; font-size: 44px; line-height: 1; font-weight: 700; letter-spacing: -.045em; }
/* Shell. Never override display:none set by authentication or workflow handlers. */
body.imap-app { padding: 0; height: 100vh; height: 100dvh; overflow: hidden; }
#app-screen { position: relative; min-height: 0; }
.app-sidebar { position: absolute; inset: 0 auto 0 0; width: 248px; padding: 32px 16px 24px; background: var(--dark-green); color: var(--surface); display: flex; flex-direction: column; overflow-y: auto; }
.sidebar-brand { padding: 0 12px 36px; }
.sidebar-brand .eyebrow { display: block; color: var(--mint); font-size: 10px; margin-top: 18px; }
.sidebar-label { margin: 0 12px 10px; color: var(--mint); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.tabs { flex-direction: column; gap: 4px; margin: 0; }
.tab-btn { position: relative; background: transparent; color: var(--surface); padding: 12px 12px 12px 42px; border: 0; text-align: left; font-size: 13px; font-weight: 500; line-height: 1.5; min-height: 44px; }
.tab-btn::before { position: absolute; left: 12px; top: 13px; color: var(--mint); font-size: 11px; font-variant-numeric: tabular-nums; }
.tab-btn[data-tab="dashboard"]::before { content: '▦'; font-size: 17px; top: 9px; }
.tab-btn[data-tab="main"]::before { content: '01'; }
.tab-btn[data-tab="screening"]::before { content: '02'; }
.tab-btn[data-tab="deepdive"]::before { content: '03'; }
.tab-btn[data-tab="headobu"]::before { content: '04'; }
.tab-btn[data-tab="final"]::before { content: '05'; }
.tab-btn:hover { background: var(--dark-green-500); }
.tab-btn.active { background: var(--ink); border: 0; border-left: 4px solid var(--neon-lila); padding-left: 38px; filter: none; transform: none; }
.tab-btn.active::before { left: 8px; }
.sidebar-footer { margin: auto 12px 0; padding-top: 40px; font-size: 11px; line-height: 1.8; color: var(--mint); }
.workspace { margin-left: 248px; padding: 0 40px 24px; display: flex; flex: 1; flex-direction: column; min-height: 0; min-width: 0; height: 100%; }
.workspace:focus { outline: none; }
.header { min-height: 68px; padding: 12px 0; margin: 0 0 24px; border-bottom: 1px solid var(--mint-200); gap: 12px; flex-wrap: wrap; flex-shrink: 0; }
.header .btn { font-size: 12px; padding: 8px 10px; min-height: 36px; background: var(--surface); color: var(--dark-green); border: 1px solid var(--linie); }
.header .btn:hover { background: var(--mint-100); }
.signed-in-user { font-size: 12px; color: var(--ink-muted); }
.title-row { position: relative; flex-shrink: 0; justify-content: space-between; padding: 24px 28px; margin-bottom: 20px; background: var(--dark-green); color: var(--surface); }
.title-row .eyebrow { margin: 0 0 8px; color: var(--mint); }
.title-row h1 { font-size: clamp(24px, 2.5vw, 34px); line-height: 1.25; margin: 0 0 10px; }
#page-description { font-size: 13px; margin: 0; max-width: 72ch; color: var(--mint-200); }
#selected-count { background: var(--mint); color: var(--ink); padding: 6px 12px; font-size: 12px; white-space: nowrap; }
.filter-row { flex-shrink: 0; margin-bottom: 12px; padding: 12px 16px; gap: 12px; background: var(--flaeche-feldgruppe); border: 1px solid var(--rahmen-kraeftig); align-items: stretch; }
.filter-label { color: var(--ink-muted); font-size: 11px; font-weight: 500; }
.filter-input { min-height: 34px; font-size: 12px; border: 1px solid var(--dark-green-300); padding: 6px 8px; color: var(--ink); background: var(--surface); }
.filter-input:focus { border: 1px solid var(--dark-green-300); }
.tab-content { min-height: 0; background: var(--surface); border: 1px solid var(--rahmen-kraeftig); }
#tab-dashboard { border: 0; }
.table-container { min-height: 0; overscroll-behavior: contain; scrollbar-color: var(--dark-green-300) var(--mint-100); }
table { color: var(--ink); font-size: 13px; }
th { background: var(--flaeche-kopf); color: var(--ink); padding: 14px 10px; border-bottom: 2px solid var(--dark-green); }
td { padding: 12px 10px; color: var(--ink); border-bottom: 1px solid var(--linie); }
tbody tr:hover td { background-color: var(--flaeche-hover); }
tr.row-highlight td { background: var(--flaeche-auswahl) !important; }
/* Fields stay white on the yellow selected row (styles.css makes them transparent). */
tr.row-highlight td input,
tr.row-highlight td select,
tr.row-highlight td .assignee-input-wrap,
tr.row-highlight td .form-input,
tr.row-highlight td .option-box input,
tr.row-highlight td .option-box select { background-color: var(--surface) !important; }
/* Controls keep their event handlers and disabled/locked state. */
.btn, .confirm-btn, .rocket-btn, .dd-btn, .create-record-button, .create-record-submit { background: var(--dark-green); color: var(--surface); border: 1px solid var(--dark-green); font-weight: 600; min-height: 36px; }
.btn:hover, .confirm-btn:hover, .rocket-btn:hover, .dd-btn:hover, .create-record-button:hover { background: var(--dark-green-500); border-color: var(--dark-green-500); transform: none; }
.confirm-btn { background: var(--signal-orange); border-color: var(--signal-orange); color: var(--ink); }
.confirm-btn:hover { background: var(--signal-orange-hover); border-color: var(--signal-orange-hover); }
.btn-secondary, .btn-clear { background: var(--surface); color: var(--dark-green); border: 1px solid var(--dark-green-300); }
.btn-secondary:hover, .btn-clear:hover { background: var(--mint-100); }
.btn-circle-small, .btn-icon, .btn-ghost, .trash-btn { min-width: 30px; min-height: 30px; }
.trash-btn { color: var(--ink-muted); font-size: 16px; }
.trash-btn:hover { color: var(--ink); background: var(--mint-200); }
.select-toggle { border-color: var(--dark-green); }
.select-toggle.checked { background: var(--dark-green); border-color: var(--dark-green); color: var(--surface); }
.deepdive-btn, .deepdive-btn:hover { color: var(--dark-green); }
.btn-lock { background: var(--mint-100); color: var(--ink-muted); border: 1px solid var(--linie); }
.btn-lock.locked { background: var(--mint); color: var(--ink); border-color: var(--dark-green); }
.btn-info { background: var(--mint-200); color: var(--ink); }
.btn-message { background: var(--dark-green); color: var(--surface); }
.btn-ghost, .btn-ghost.btn-ghost-minus { border-color: var(--dark-green-300); color: var(--dark-green); }
.btn-ghost svg path, .btn-ghost.btn-ghost-minus svg path { stroke: currentColor; }
.btn-ghost:hover, .btn-ghost.btn-ghost-minus:hover { background: var(--mint); color: var(--ink); border-color: var(--dark-green); }
.consulting-field-bar, .assignee-input-wrap.locked { background: var(--mint-100); border-color: var(--dark-green-300); }
.assignee-input-wrap { background: var(--surface); border-color: var(--dark-green-300); padding: 5px 8px; }
.assignee-input, select, .deadline-input { color: var(--ink); }
.imap-app select.form-input { min-height: 34px; padding: 6px 8px; border: 1px solid var(--dark-green-300); background: var(--surface); }
.deadline-input { background: var(--surface); border: 1px solid var(--dark-green-300); min-height: 34px; }
.option-box { border: 1px solid var(--rahmen-kraeftig); background: var(--flaeche-feldgruppe); }
.option-box .option-legend { color: var(--dark-green); background: var(--mint); font-weight: 600; }
.option-label, .assignee-tooltip-meta { color: var(--ink-muted); }
.option-box input, .option-box select { background: var(--surface); }
.assignee-tooltip { border: 1px solid var(--dark-green-300); background: var(--surface); color: var(--ink); }
.assignee-tooltip-sep { background: var(--mint-200); }
.assignee-picker:hover { background: var(--mint-100); }
.drop-zone, .drop-zone:hover, .drop-zone.drag-over, .drop-zone.has-file { background: var(--flaeche-feldgruppe) !important; border-color: var(--dark-green-300) !important; color: var(--ink); }
.drop-zone.drag-over, .drop-zone.has-file { border-color: var(--dark-green) !important; }
.drop-zone .hint, .col-end, .table-end-marker { color: var(--ink-muted); }
.realtime-status, .realtime-status[data-state] { font-weight: 500; color: var(--dark-green); margin: 0; }
.realtime-status::before, .realtime-status[data-state]::before { background: var(--dark-green); border-radius: 50% !important; }
.realtime-status[data-state="unavailable"] { color: var(--ink); }
.realtime-status[data-state="unavailable"]::before { background: var(--ink); }
/* Dialogs: visibility continues to be controlled by the existing application. */
.imap-app [id$="-modal"], #overlay { background: var(--schleier) !important; backdrop-filter: none; }
.imap-app [id$="-modal"] > div, .create-record-dialog { max-width: calc(100vw - 32px); max-height: calc(100dvh - 48px); overflow-y: auto; border: 1px solid var(--linie); }
.imap-app [id$="-modal"] h3 { color: var(--ink) !important; }
.imap-app [id$="-modal"] select, .imap-app [id$="-modal"] input:not([type="checkbox"]):not([type="file"]), .create-record-field textarea { border: 1px solid var(--dark-green-300); color: var(--ink); }
.create-record-header, .create-record-footer { background: var(--mint-100); border-color: var(--linie); }
.create-record-eyebrow, .create-record-header h2, .create-record-field label, .create-record-section { color: var(--ink); font-weight: 600; }
.create-record-hint, .create-record-section span, .create-record-header p { color: var(--ink-muted); }
.create-record-close { background: var(--mint-200); }
.create-record-warning, #analyse-password-error { background: var(--ink); color: var(--surface) !important; border-color: var(--ink); padding: 12px; }
.create-record-warning::before, #analyse-password-error::before { content: '✕ '; }
.create-field-invalid { border: 2px solid var(--ink) !important; background: var(--surface) !important; }
.create-record-required { color: var(--ink); }
.create-record-toast { left: 50%; right: auto; width: max-content; max-width: calc(100vw - 32px); background: var(--dark-green); color: var(--surface); transform: translate(-50%, 10px); }
.create-record-toast.visible { transform: translate(-50%, 0); }
.spinner { border-color: var(--mint-200) !important; border-top-color: var(--dark-green) !important; border-radius: 50% !important; animation: none !important; }
/* Login */
#login-screen { margin: auto; width: min(680px, calc(100% - 32px)); text-align: left !important; padding: 48px !important; background: var(--dark-green); color: var(--surface); }
#login-screen .brand-wordmark { margin-bottom: 48px; }
#login-screen .eyebrow { color: var(--mint); }
#login-screen h1 { font-size: clamp(28px, 4vw, 42px); line-height: 1.3; margin: 12px 0 24px; }
#login-screen > p:not(.eyebrow) { max-width: 48ch; font-size: 15px; margin-bottom: 28px; }
#btn-login { background: var(--neon-gelb); color: var(--ink); border-color: var(--neon-gelb); font-size: 15px !important; }
#btn-login:hover { background: var(--neon-gelb-hover); }
/* Dashboard inside the existing iframe. */
.imap-dashboard, .imap-dashboard .main-content { background: var(--mint); color: var(--ink); }
.imap-dashboard .main-content { padding: 20px 20px 24px; }
.dashboard-intro { display: flex; justify-content: space-between; align-items: end; gap: 16px; padding: 2px 0 20px; }
.dashboard-intro .eyebrow { color: var(--ink); margin-bottom: 5px; }
.dashboard-intro h1 { font-size: 21px; font-weight: 600; }
.dashboard-intro > p { color: var(--ink); font-size: 12px; }
.imap-dashboard .dashboard-container { padding: 0; margin: 0; background: var(--mint); }
.imap-dashboard .dashboard-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.imap-dashboard .dashboard-card { padding: 0; min-height: 270px; background: var(--surface); border: 1px solid var(--dark-green); }
.imap-dashboard .dashboard-card:has(.count-critical) { border-left: 6px solid var(--signal-orange); }
.imap-dashboard .card-header { min-height: 76px; padding: 16px 18px; margin: 0; background: var(--dark-green); border-bottom: 1px solid var(--dark-green); color: var(--surface); font-size: 14px; line-height: 1.5; font-weight: 600; text-transform: none; letter-spacing: 0; }
.imap-dashboard .card-content { padding: 16px 18px; margin: 0; }
.imap-dashboard .count-description { color: var(--ink-muted); font-size: 12px; line-height: 1.6; }
.imap-dashboard .open-list { max-height: 280px; margin-top: 16px; gap: 0; }
.imap-dashboard .open-list .open-item { padding: 12px 0; background: var(--surface); border: 0; border-bottom: 1px solid var(--mint-200); color: var(--ink); font-size: 12px; }
.imap-dashboard .open-list .open-main { flex-wrap: wrap; }
.imap-dashboard .open-list .open-item .due { color: var(--dark-green); margin: 0; font-size: 11px; }
.imap-dashboard .open-list .open-item .extra { color: var(--ink-muted); font-size: 11px; line-height: 1.5; }
.imap-dashboard .card-footer { padding: 14px 18px; border-top: 1px solid var(--mint-200); display: flex; align-items: center; justify-content: space-between; }
.imap-dashboard .count-label { margin: 0; font-size: 12px; color: var(--ink-muted); }
.imap-dashboard .card-footer .count-state { flex: 1; min-width: 0; margin: 0 10px; font-size: 12px; font-weight: 600; color: var(--ink); text-align: right; }
.imap-dashboard .count-display { min-width: 44px; height: 44px; padding: 8px; display: grid; place-items: center; border-radius: 50% !important; color: var(--ink); font-size: 17px; font-variant-numeric: tabular-nums; }
.imap-dashboard .count-low { background: var(--mint); color: var(--ink); }
.imap-dashboard .count-medium { background: var(--dark-mint); color: var(--ink); }
.imap-dashboard .count-high { background: var(--neon-gelb); color: var(--ink); }
.imap-dashboard .count-critical { background: var(--signal-orange); color: var(--ink); }
/* DeepDive including PDF clone: scope to body, not to a specific container ID. */
body.imap-deepdive { padding: 40px; }
.imap-deepdive .container { max-width: 1120px; padding: 0; background: var(--surface); }
.imap-deepdive .container > h1 { text-align: left; background: var(--dark-green); color: var(--surface); padding: 28px; margin: 0 0 24px; font-size: 30px; }
.imap-deepdive h1 span { color: var(--mint); font-size: 14px; }
.imap-deepdive .title-line { display: none; }
.imap-deepdive .header-info { background: var(--flaeche-feldgruppe); border: 1px solid var(--rahmen-kraeftig); padding: 24px; margin-bottom: 24px; }
.imap-deepdive .header-info label, .imap-deepdive .question label { color: var(--ink) !important; }
.imap-deepdive .section { background: var(--surface); border: 1px solid var(--rahmen-kraeftig); padding: 0 24px 24px; margin: 0 0 24px; }
.imap-deepdive .section h2 { background: var(--flaeche-kopf); border-bottom: 2px solid var(--dark-green); margin: 0 -24px 20px; padding: 16px 24px; color: var(--ink); font-size: 18px; gap: 12px; flex-wrap: wrap; }
.imap-deepdive .role-badge { background: var(--mint-200); color: var(--ink); font-size: 11px; font-weight: 500; }
.imap-deepdive .owner-bar { background: var(--surface); border: 0; border-bottom: 1px solid var(--mint-200); padding: 0 0 16px; gap: 8px; }
.imap-deepdive input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]), .imap-deepdive textarea { background: var(--surface); border: 1px solid var(--dark-green-300); color: var(--ink); font-size: 15px; padding: 10px 12px; }
.imap-deepdive input[type="radio"], .imap-deepdive input[type="checkbox"] { accent-color: var(--dark-green); width: 18px; height: 18px; flex-shrink: 0; }
.imap-deepdive .radio-group { flex-wrap: wrap; }
.imap-deepdive .scale-option { border-color: var(--dark-green-300); }
.imap-deepdive .scale-option:has(input:checked) { background: var(--mint-100); border-color: var(--dark-green); }
.imap-deepdive .comm-box { background: var(--mint-100); border-color: var(--linie); }
.imap-deepdive .question[style] { background: var(--mint-100) !important; border-color: var(--linie) !important; }
.imap-deepdive button { background: var(--dark-green); color: var(--surface); font-size: 15px; padding: 12px 20px; }
.imap-deepdive button:hover { background: var(--dark-green-500); }
.imap-deepdive .btn-pdf { background: var(--surface); color: var(--dark-green); border: 1px solid var(--dark-green-300); }
.imap-deepdive .save-hint { color: var(--ink-muted); font-style: normal; }
/* The generated analysis overview is also served through this shared theme. */
body.imap-analysis { background: var(--surface); font-family: Arial, sans-serif; color: var(--ink); }
.imap-analysis .page-header { padding: 28px; background: var(--dark-green); }
.imap-analysis .header-icon { background: transparent; color: var(--mint); }
.imap-analysis .header-text p { color: var(--mint); }
.imap-analysis .analyse-card { border: 1px solid var(--rahmen-kraeftig); }
.imap-analysis .analyse-card:hover { transform: none; background: var(--mint-100); }
.imap-analysis .analyse-icon { background: var(--mint-100); color: var(--dark-green); }
.imap-analysis .analyse-btn { background: var(--dark-green); }
.imap-analysis .analyse-btn:hover { background: var(--dark-green-500); filter: none; }
.imap-analysis .analyse-sub, .imap-analysis .empty-state { color: var(--ink-muted); }
@media (max-width: 1100px) {
    .workspace { padding-inline: 24px; }
    .header { gap: 8px; margin-bottom: 16px; }
    .signed-in-user { display: none; }
    .title-row { padding: 20px; }
    .dashboard-intro { align-items: start; flex-direction: column; gap: 6px; }
}
@media (max-width: 899px) {
    .imap-dashboard .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .app-sidebar { position: relative; width: 100%; padding: 16px; flex-shrink: 0; overflow: visible; }
    .sidebar-brand { display: flex; align-items: center; gap: 20px; padding: 0 0 12px; }
    .sidebar-brand .brand-wordmark { font-size: 28px; }
    .sidebar-brand .eyebrow { margin: 0; }
    .sidebar-label, .sidebar-footer { display: none; }
    .tabs { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
    .tab-btn { flex: 0 0 175px; font-size: 11px; }
    .workspace { margin-left: 0; padding: 0 16px 16px; }
    .header { min-height: 52px; }
    .title-row { padding: 16px; margin-bottom: 12px; }
    .title-row h1 { font-size: 24px; }
    #page-description { font-size: 12px; }
    .filter-row { padding: 10px; }
    body.imap-deepdive { padding: 16px; }
    /* Every table cell keeps its original contents and actions. Labels are added by imap-design.js. */
    .imap-app .table-container table { display: block; min-width: 0 !important; width: 100% !important; }
    .imap-app .table-container thead { display: block; }
    .imap-app .table-container thead tr { display: flex; background: var(--flaeche-kopf); }
    .imap-app .table-container thead th { display: none; }
    .imap-app .table-container thead th:first-child { display: block; border: 0; }
    .imap-app .table-container tbody { display: block; }
    .imap-app .table-container tbody tr { display: block; border-bottom: 8px solid var(--mint); padding: 12px; }
    .imap-app .table-container tbody td { display: grid; grid-template-columns: minmax(125px, 30%) minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 0; text-align: left !important; min-width: 0 !important; max-width: none !important; width: 100% !important; }
    .imap-app .table-container tbody td::before { content: attr(data-label); font-size: 11px; font-weight: 600; overflow-wrap: anywhere; }
    .imap-app .table-container tbody td > * { min-width: 0; max-width: 100%; }
    .imap-app .table-container tbody td .option-box { width: 100%; min-width: 0; flex-wrap: wrap; }
    .imap-app .table-container tbody td.col-end { display: none; }
    .imap-app tr.row-highlight { background: var(--flaeche-auswahl); }
}
@media (max-width: 540px) {
    .imap-dashboard .dashboard-grid { grid-template-columns: 1fr; }
    .header { gap: 6px; }
    .header .btn { font-size: 10px; padding: 6px; }
    .title-row { align-items: start; flex-direction: column; gap: 12px; }
    .title-row .eyebrow { font-size: 10px; }
    .title-row h1 { font-size: 22px; }
    #login-screen { padding: 28px !important; }
    .imap-deepdive .header-info, .imap-deepdive .button-group { grid-template-columns: 1fr; }
    .imap-deepdive .owner-bar { align-items: start; flex-direction: column; }
    .imap-app .table-container tbody td { grid-template-columns: 1fr; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
    .skip-link, .imap-deepdive .button-group { display: none; }
    body.imap-deepdive { padding: 0; }
    .imap-deepdive .section { break-inside: avoid; }
}
@media (min-width: 1400px) {
    .imap-dashboard .dashboard-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* Dashboard, compact desktop: media queries here measure the dashboard iframe, not the screen.
   Screen 900 px = iframe 820 px, screen 899 px (card layout) = iframe 803 px, so 810 px separates desktop from mobile. */
@media (min-width: 810px) and (max-width: 1399px) {
    .imap-dashboard .main-content { padding: 10px 12px 12px; }
    .dashboard-intro { padding: 0 0 10px; flex-direction: row; align-items: end; gap: 12px; }
    .dashboard-intro .eyebrow { margin-bottom: 2px; }
    .dashboard-intro h1 { font-size: 17px; }
    .dashboard-intro > p { font-size: 11px; }
    .imap-dashboard .dashboard-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
    .imap-dashboard .dashboard-card { min-height: 0; }
    .imap-dashboard .card-header { min-height: 0; padding: 8px 10px; font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
    .imap-dashboard .card-content { padding: 8px 10px; }
    .imap-dashboard .count-description { font-size: 11px; line-height: 1.4; }
    .imap-dashboard .open-list { max-height: 150px; margin-top: 8px; }
    .imap-dashboard .open-list .open-item { padding: 7px 0; font-size: 11px; }
    .imap-dashboard .card-footer { padding: 8px 10px; }
    .imap-dashboard .count-label { font-size: 11px; }
    .imap-dashboard .count-display { min-width: 34px; height: 34px; padding: 4px; font-size: 14px; }
}
/* People combobox (js/people-combobox.js): arrow button inside the field, one fixed list on the page.
   The list sits above the drawer (z-index 1001) and below the loading overlay (2500). */
.people-combobox { position: relative; display: block; min-width: 0; }
.people-combobox > .assignee-input { padding-right: 18px; text-overflow: ellipsis; }
.people-combobox-toggle { position: absolute; top: 0; bottom: 0; right: 1px; margin: auto 0; width: 16px; height: 20px; min-width: 0; min-height: 0; padding: 0; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--dark-green); cursor: pointer; }
.people-combobox-toggle:hover { background: var(--mint-100); }
.people-combobox-toggle svg { display: block; flex: none; }
.people-combobox-list { position: fixed; z-index: 2100; overflow-y: auto; overscroll-behavior: contain; padding: 2px 0; background: var(--surface); color: var(--ink); border: 1px solid var(--dark-green-300); font: 400 12px/1.4 Arial, sans-serif; }
.people-combobox-option { padding: 6px 10px; cursor: pointer; overflow-wrap: anywhere; }
.people-combobox-option:hover, .people-combobox-option.is-active { background: var(--mint-100); }
.people-combobox-option[aria-selected="true"] { color: var(--dark-green); font-weight: 600; }
.people-combobox-empty { padding: 6px 10px; color: var(--ink-muted); }

/* P1-T48: Dialog "Synchronisieren mit SharePoint" */
.sync-dialog { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow-y: auto; padding: 20px; background: var(--surface); color: var(--ink); border: 1px solid var(--rahmen-kraeftig); }
.sync-dialog::backdrop { background: rgba(18, 67, 77, 0.45); }
.sync-dialog h2 { margin: 0 0 12px; font-size: 18px; color: var(--dark-green); }
.sync-dialog p { margin: 0 0 8px; font-size: 14px; }
.sync-options { margin: 12px 0; padding: 10px 12px; background: var(--flaeche-feldgruppe); border: 1px solid var(--rahmen-kraeftig); }
.sync-options legend { padding: 0 4px; font-weight: 600; font-size: 13px; }
.sync-option { display: flex; align-items: center; gap: 8px; min-height: 32px; font-size: 14px; }
.sync-option input { flex: none; width: 18px; height: 18px; }
.sync-options .sync-hint { margin: 6px 0 0; font-size: 13px; color: var(--ink-muted); }
.sync-confirm { display: block; font-size: 13px; font-weight: 600; }
.sync-word { display: block; box-sizing: border-box; width: 100%; margin-top: 4px; padding: 8px; min-height: 36px; border: 1px solid var(--rahmen-kraeftig); font: inherit; }
.sync-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.sync-actions .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.sync-option.is-disabled { color: var(--ink-muted); }