/* GP intake - EA Cockpit tokens (DS "EA Cockpit") + comfort scale, wie im Canvas "GP Intake" (10.10.).
   Dark mode = reiner Token-Remap (DESIGN.md §8): Komponenten bleiben, nur die Variablen kippen. */
.ix {
  --ea-paper:#f7f8fa; --surface:#ffffff; --ea-subtle:#f8fafc; --ea-line:#e2e8f0; --ea-field-line:#7c8aa0;
  --ea-ink:#0b1a2b; --ea-text-2:#475569; --muted:#5b6b80; --muted-2:#64748b;
  --ea-accent:#14506b; --ea-accent-soft:#e6eff4; --ea-accent-line:#b7cfdb; --ea-accent-ink:#14506c;
  --btn-primary-bg:#0b1a2c; --btn-primary-line:#0b1a2c; --btn-primary-hover:#1e2c3d; --btn-primary-t:#ffffff;
  --neu-t:#475569; --neu-s:#f1f5f9; --neu-b:#e2e8f0;
  --ok-t:#047857; --ok-s:#ecfdf5; --ok-b:#a7f3d0;
  --caut-t:#92400e; --caut-s:#fffbeb; --caut-b:#fde68a;
  --fail-t:#be123c; --fail-s:#fff1f2; --fail-b:#fecdd3;
  --info-t:#0369a1; --info-s:#f0f9ff; --info-b:#bae6fd;
  --ix-body:18px; --ix-body-lh:28px; --ix-hint:16px; --ix-hint-lh:24px; --ix-h1:32px; --ix-h1-lh:40px; --ix-ctl:52px;
  width:1440px; box-sizing:border-box; background:var(--ea-paper); color:var(--ea-ink);
  font-family:Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif; font-size:var(--ix-body); line-height:var(--ix-body-lh);
  font-variant-numeric:tabular-nums;
}
.ix.dark {
  --ea-paper:#0b1220; --surface:#111a27; --ea-subtle:#16212e; --ea-line:#243244; --ea-field-line:#4a5c72;
  --ea-ink:#e8eef5; --ea-text-2:#aab6c4; --muted:#8b98a8; --muted-2:#7c8a9c;
  --ea-accent:#3b9ec4; --ea-accent-soft:#16324a; --ea-accent-line:#25536a; --ea-accent-ink:#9fd4ea;
  --btn-primary-bg:#1d2b3e; --btn-primary-line:#2d3e52; --btn-primary-hover:#24384e; --btn-primary-t:#ffffff;
  --neu-t:#c7d2de; --neu-s:#1a2533; --neu-b:#2d3e52;
  --ok-t:#6ee7b7; --ok-s:#10231b; --ok-b:#1e3a2c;
  --caut-t:#fcd34d; --caut-s:#241d0e; --caut-b:#3d3115;
  --fail-t:#fca5a5; --fail-s:#241315; --fail-b:#3d1f22;
  --info-t:#7dd3fc; --info-s:#0e1d30; --info-b:#17324a;
  color-scheme:dark;
}
.ix * { box-sizing:border-box; }

/* header */
.ix-top { background:var(--surface); border-bottom:1px solid var(--ea-line); }
.ix-top__in { max-width:1440px; margin:0 auto; height:72px; padding:0 40px; display:flex; align-items:center; gap:16px; }
.ix-brand { display:flex; align-items:center; gap:12px; font-size:16px; line-height:24px; font-weight:600; color:var(--ea-ink); }
.ix-brand svg { width:32px; height:32px; flex:none; color:#132a3e; fill:none; stroke:currentColor; stroke-width:13; stroke-linecap:round; stroke-linejoin:round; }
/* Marke nie umfärben: im Dark mode steht sie auf einem weissen Plättchen */
.ix.dark .ix-brand svg { background:#ffffff; border-radius:8px; padding:3px; }
.ix-brand span { font-weight:400; color:var(--muted); }
.ix-top__sp { flex:1 1 auto; }
.ix-lang { height:44px; padding:0 12px; border:1px solid var(--ea-field-line); border-radius:8px; background:var(--surface); color:var(--ea-ink); font:inherit; font-size:16px; }

/* page: content left, contact right (sticky) */
.ix-main { max-width:1440px; margin:0 auto; padding:32px 40px 48px; display:grid; grid-template-columns:minmax(0,1fr) 360px; column-gap:56px; row-gap:28px; align-items:start; }
.ix-main > * { grid-column:1; min-width:0; }
.ix-main > .ix-side { grid-column:2; grid-row:1 / span 20; position:sticky; top:24px; display:flex; flex-direction:column; gap:16px; }
.ix-lead, .ix-hint, .ix-p, .ix-h1 { max-width:72ch; }
.ix-head { display:flex; flex-direction:column; gap:12px; }
.ix-eyebrow { font-size:var(--ix-hint); line-height:var(--ix-hint-lh); color:var(--muted); display:flex; gap:12px; flex-wrap:wrap; }
.ix-h1 { margin:0; font-size:var(--ix-h1); line-height:var(--ix-h1-lh); font-weight:700; letter-spacing:-0.01em; text-wrap:balance; }
.ix-h2 { margin:0; font-size:22px; line-height:30px; font-weight:600; }
.ix-lead { margin:0; color:var(--ea-text-2); }
.ix-p { margin:0; }
.ix-hint { margin:0; font-size:var(--ix-hint); line-height:var(--ix-hint-lh); color:var(--muted); }
.ix-card { background:var(--surface); border:1px solid var(--ea-line); border-radius:12px; padding:24px; display:flex; flex-direction:column; gap:16px; }

/* buttons, links */
.ix-actions { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.ix-btn { min-height:var(--ix-ctl); display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:0 24px; border:1px solid var(--ea-field-line); border-radius:8px; background:var(--surface); color:var(--ea-ink); font:inherit; font-size:18px; font-weight:600; text-decoration:none; cursor:pointer; }
.ix-btn.sm { min-height:44px; padding:0 16px; font-size:16px; }
.ix-btn-primary { background:var(--btn-primary-bg); border-color:var(--btn-primary-line); color:var(--btn-primary-t); }
.ix-btn-primary:hover { background:var(--btn-primary-hover); }
.ix-btn[aria-disabled="true"] { background:var(--neu-s); border-color:var(--neu-b); color:var(--muted); cursor:not-allowed; }
.ix-link { color:var(--ea-accent); text-decoration:underline; text-underline-offset:3px; font-weight:500; }
.ix-btn:focus-visible, .ix-link:focus-visible { outline:3px solid var(--ea-accent); outline-offset:3px; }

/* tabs (how to add data) */
.ix-tabs { display:flex; gap:8px; flex-wrap:wrap; }
.ix-tab { min-height:44px; padding:0 18px; border-radius:8px; border:1px solid var(--ea-line); background:var(--surface); color:var(--ea-text-2); font:inherit; font-size:16px; cursor:pointer; }
.ix-tab[aria-selected="true"] { background:var(--ea-accent-soft); border-color:var(--ea-accent-line); color:var(--ea-accent-ink); font-weight:600; }

/* tags (status, always a word) */
.ix-tag { display:inline-flex; align-items:center; gap:6px; min-height:30px; padding:0 10px; border-radius:6px; border:1px solid; font-size:15px; line-height:20px; font-weight:600; white-space:nowrap; }
.ix-tag.ok { color:var(--ok-t); background:var(--ok-s); border-color:var(--ok-b); }
.ix-tag.caut { color:var(--caut-t); background:var(--caut-s); border-color:var(--caut-b); }
.ix-tag.fail { color:var(--fail-t); background:var(--fail-s); border-color:var(--fail-b); }
.ix-tag.neu { color:var(--neu-t); background:var(--neu-s); border-color:var(--neu-b); }
.ix-tag.acc { color:var(--ea-accent-ink); background:var(--ea-accent-soft); border-color:var(--ea-accent-line); }
/* Arbeitszustände (Hochladen, Lesen, Warten) = info, nicht die Auswahl-Farbe */
.ix-tag.info { color:var(--info-t); background:var(--info-s); border-color:var(--info-b); }

/* overall intake progress (from step 2) */
.ix-steps { background:var(--surface); border:1px solid var(--ea-line); border-radius:12px; padding:20px 24px; display:flex; flex-direction:column; gap:14px; }
.ix-steps__h { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.ix-steps__t { font-weight:600; }
.ix-steps__t.done { color:var(--ok-t); }
.ix-steps ol { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; }
.ix-steps li { display:flex; flex-direction:column; gap:8px; font-size:var(--ix-hint); line-height:var(--ix-hint-lh); color:var(--ea-text-2); }
.ix-steps li.done { color:var(--ok-t); font-weight:600; }
.ix-steps li.now { color:var(--ea-ink); font-weight:700; }
.ix-seg { height:6px; border-radius:4px; background:var(--ea-line); overflow:hidden; }
.ix-seg > div { height:100%; background:var(--ea-accent); }
.ix-steps li span { display:inline-flex; align-items:center; gap:6px; }
.ix-steps li svg, .ix-stages svg, .ix-ok svg { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* alerts */
.ix-alert { border:2px solid; border-radius:8px; padding:16px 20px; display:flex; flex-direction:column; gap:6px; }
.ix-alert.caut { color:var(--caut-t); background:var(--caut-s); border-color:var(--caut-b); }
.ix-alert__t { font-weight:700; }
.ix-alert a { color:inherit; font-weight:600; text-decoration:underline; text-underline-offset:3px; }

/* progress bars */
.ix-prog { display:flex; flex-direction:column; gap:8px; }
.ix-prog__l { display:flex; justify-content:space-between; gap:12px; font-size:var(--ix-hint); color:var(--ea-text-2); }
.ix-track { height:10px; border-radius:5px; background:var(--neu-s); overflow:hidden; }
.ix-fill { height:100%; border-radius:5px; background:var(--ea-accent); }
.ix-stripe { height:10px; border-radius:5px; background:repeating-linear-gradient(90deg, var(--ea-accent) 0 28px, var(--neu-s) 28px 56px); }
.ix-batch { height:10px; border-radius:5px; background:var(--neu-s); display:flex; gap:3px; overflow:hidden; }
.ix-batch > div { height:100%; }

/* upload */
.ix-drop { border:2px dashed var(--ea-field-line); border-radius:12px; background:var(--surface); padding:32px 24px; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; }
.ix-drop svg.big { width:40px; height:40px; fill:none; stroke:var(--ea-accent); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.ix-files { display:flex; flex-direction:column; gap:12px; }
.ix-sum { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.ix-sum__c { display:flex; gap:16px; flex-wrap:wrap; font-size:var(--ix-hint); color:var(--ea-text-2); }
.ix-sum__c b { font-weight:700; }
.ix-file { display:flex; gap:16px; align-items:flex-start; padding:16px 20px; background:var(--surface); border:1px solid var(--ea-line); border-radius:12px; flex-wrap:wrap; }
.ix-file.caut { background:var(--caut-s); border-color:var(--caut-b); }
.ix-file.fail { background:var(--fail-s); border-color:var(--fail-b); }
.ix-file__ic { width:48px; height:44px; border-radius:8px; background:var(--neu-s); color:var(--neu-t); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex:none; }
/* Dateityp-Plakette: Seite mit Eselsohr + Formatkürzel, in der Farbe, die man mit dem Format verbindet.
   Bewusst keine Hersteller-Logos (Microsoft/Adobe-Lizenz deckt das Portal nicht). Band = Weiss auf Farbe >= 4.5:1;
   Umriss im Dark mode heller (>= 3:1 auf surface). Das Kürzel steht immer als Wort. */
.ix-ft { --ft:#475569; --ft-line:#64748b; position:relative; width:40px; height:48px; flex:none; }
.ix-ft svg { width:40px; height:48px; display:block; }
.ix-ft .pg { fill:var(--surface); stroke:var(--ft-line); stroke-width:2; stroke-linejoin:round; }
.ix-ft .fold { fill:none; stroke:var(--ft-line); stroke-width:2; stroke-linejoin:round; }
.ix-ft b { position:absolute; left:-5px; bottom:8px; min-width:34px; padding:1px 4px; border-radius:3px; background:var(--ft); color:#ffffff; font-size:10px; line-height:14px; font-weight:700; letter-spacing:0.02em; text-align:center; }
/* Neutral für alle Formate (Review 13.10.): Rot/Grün tragen im Haus Bedeutung (fail/ok), das Kürzel trägt das Format */
.ix-ft { --ft:#475569; --ft-line:#7c8aa0; }
.ix.dark .ix-ft { --ft:#2d3e52; --ft-line:#7c8a9c; }
.ix-file__b { flex:1 1 300px; min-width:0; display:flex; flex-direction:column; gap:8px; }
.ix-file__n { font-weight:600; overflow-wrap:anywhere; }
.ix-file__n span { font-weight:400; color:var(--muted); font-size:var(--ix-hint); }
.ix-file__r { display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:var(--ix-hint); line-height:var(--ix-hint-lh); color:var(--ea-text-2); }
.ix-file__a { display:flex; gap:16px; font-size:16px; padding-top:4px; }
.ix-stages { list-style:none; margin:4px 0 0; padding:12px 16px; border-radius:8px; background:var(--ea-subtle); display:flex; flex-direction:column; gap:6px; font-size:var(--ix-hint); line-height:var(--ix-hint-lh); }
.ix-stages li { display:flex; gap:10px; align-items:center; flex-wrap:wrap; color:var(--ea-ink); }
.ix-stages li .m { color:var(--muted); }
.ix-stages li.done svg { color:var(--ok-t); }
.ix-stages li.now { font-weight:600; }
.ix-stages li.now svg { color:var(--ea-accent); }
.ix-stages li.next { color:var(--ea-text-2); }
.ix-stages li.next svg { color:var(--muted-2); }
.ix-input { height:44px; padding:0 14px; border:2px solid var(--ea-field-line); border-radius:8px; background:var(--surface); color:var(--ea-ink); font:inherit; font-size:16px; }
.ix-input:focus { outline:none; border-color:var(--ea-accent); box-shadow:0 0 0 4px var(--ea-accent-soft); }
.ix-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* review grid */
.ix-tablewrap { overflow-x:auto; background:var(--surface); border:1px solid var(--ea-line); border-radius:12px; }
.ix-table { width:100%; border-collapse:separate; border-spacing:0; font-size:17px; line-height:24px; }
.ix-table th { text-align:left; font-size:15px; font-weight:600; color:var(--ea-text-2); background:var(--ea-subtle); padding:12px 16px; border-bottom:1px solid var(--ea-line); }
.ix-table td { padding:12px 16px; border-bottom:1px solid var(--ea-line); vertical-align:middle; }
.ix-table tr:last-child td { border-bottom:0; }
.ix-table .num { text-align:right; white-space:nowrap; }
.ix-table .src { font-size:15px; color:var(--muted); white-space:nowrap; }
.ix-table .miss { color:var(--muted-2); }
.ix-table tr.attn td { background:var(--caut-s); }
.ix-q { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.ix-q > span { color:var(--caut-t); font-weight:600; font-size:16px; }
.ix-ok { display:inline-flex; gap:6px; align-items:center; color:var(--ok-t); font-weight:600; font-size:16px; }
.ix-chips { display:flex; gap:8px; flex-wrap:wrap; }

/* status track after sending, summary tiles */
.ix-track3 { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
.ix-track3 li { display:flex; flex-direction:column; gap:6px; font-size:var(--ix-hint); line-height:var(--ix-hint-lh); color:var(--ea-text-2); }
.ix-track3 li.done { color:var(--ok-t); font-weight:600; }
.ix-track3 li.now { color:var(--ea-ink); font-weight:700; }
.ix-track3 li .m { font-weight:400; color:var(--muted); }
.ix-tiles { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
.ix-tile { border:1px solid var(--ea-line); border-radius:12px; padding:16px 20px; display:flex; flex-direction:column; gap:4px; background:var(--surface); }
.ix-tile.caut { border-color:var(--caut-b); background:var(--caut-s); color:var(--caut-t); }
.ix-tile__l { font-size:16px; font-weight:600; color:inherit; }
.ix-tile__v { font-size:32px; line-height:40px; font-weight:600; }
.ix-ref { font-size:28px; line-height:36px; font-weight:700; letter-spacing:0.02em; }

/* contact person and privacy (right column) */
.ix-contact { display:flex; flex-direction:column; gap:14px; padding:20px 24px; background:var(--surface); border:1px solid var(--ea-line); border-radius:12px; }
.ix-contact__p { display:flex; gap:14px; align-items:center; }
.ix-avatar { width:56px; height:56px; border-radius:50%; background:var(--ea-accent-soft); color:var(--ea-accent-ink); display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:700; flex:none; }
.ix-contact__b { display:flex; flex-direction:column; gap:2px; min-width:0; font-size:var(--ix-hint); line-height:var(--ix-hint-lh); }
.ix-contact__k { font-size:15px; color:var(--muted); }
.ix-contact__n { font-size:18px; font-weight:600; }
.ix-privacy { display:flex; gap:12px; align-items:flex-start; padding:16px 20px; background:var(--surface); border:1px solid var(--ea-line); border-radius:12px; font-size:var(--ix-hint); line-height:var(--ix-hint-lh); color:var(--ea-text-2); }
.ix-privacy svg { width:22px; height:22px; flex:none; margin-top:1px; fill:none; stroke:var(--ea-accent); stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.ix-privacy b { color:var(--ea-ink); }

/* footer */
.ix-foot { border-top:1px solid var(--ea-line); background:var(--surface); }
.ix-foot__in { max-width:1440px; margin:0 auto; padding:20px 40px; display:flex; gap:24px; flex-wrap:wrap; align-items:center; font-size:15px; line-height:22px; color:var(--muted); }
.ix-foot__sp { flex:1 1 auto; }

/* compact contact line (from step 1 on) */
.ix-cline { display:flex; flex-direction:column; gap:6px; padding:16px 20px; background:var(--surface); border:1px solid var(--ea-line); border-radius:12px; font-size:var(--ix-hint); line-height:var(--ix-hint-lh); }
.ix-cline b { font-weight:600; }
.ix-cline__r { display:flex; gap:12px; align-items:center; }
.ix-cline .ix-avatar { width:40px; height:40px; font-size:15px; }

/* sticky action bar */
.ix-bar { position:sticky; bottom:0; z-index:2; background:var(--surface); border-top:1px solid var(--ea-line); }
.ix-bar__in { max-width:1440px; margin:0 auto; padding:16px 40px; display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.ix-bar__sp { flex:1 1 auto; }

/* forms (from the GP Intake canvas, comfort scale) */
.ix-back { font-size:var(--ix-hint); color:var(--ea-accent); text-decoration:underline; text-underline-offset:3px; justify-self:start; }
.ix-fields { display:flex; flex-direction:column; gap:28px; }
.ix-field { display:flex; flex-direction:column; gap:8px; }
.ix-field__l { font-size:18px; line-height:24px; font-weight:600; color:var(--ea-ink); }
.ix-field__opt { font-weight:400; color:var(--muted); }
.ix-field__h { font-size:var(--ix-hint); line-height:var(--ix-hint-lh); color:var(--muted); margin:0; }
.ix-field__c { position:relative; display:flex; max-width:360px; }
.ix-field .ix-input { width:100%; height:var(--ix-ctl); padding:0 16px; font-size:20px; }
.has-unit .ix-input { padding-right:96px; }
.ix-unit { position:absolute; right:16px; top:50%; transform:translateY(-50%); font-size:16px; color:var(--muted); pointer-events:none; }
.ix-input[aria-invalid="true"] { border-color:var(--fail-t); background:var(--fail-s); }
.ix-err { display:flex; gap:8px; align-items:flex-start; margin:0; font-size:var(--ix-hint); line-height:var(--ix-hint-lh); font-weight:600; color:var(--fail-t); }
.ix-echo { display:flex; gap:8px; align-items:flex-start; margin:0; font-size:var(--ix-hint); line-height:var(--ix-hint-lh); color:var(--ok-t); }
.ix-err svg, .ix-echo svg, .ix-saved svg { width:18px; height:18px; flex:none; margin-top:3px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ix-saved { display:inline-flex; gap:6px; align-items:center; font-size:15px; color:var(--ok-t); }
.ix-row { display:flex; gap:16px; flex-wrap:wrap; }
.ix-row > * { flex:1 1 200px; min-width:0; }
.ix-missing { display:flex; gap:20px; flex-wrap:wrap; font-size:var(--ix-hint); }
.ix-radio { display:flex; gap:10px; align-items:center; }
.ix-radio input { width:22px; height:22px; margin:0; accent-color:var(--ea-accent); }
.ix-code { width:240px; height:64px; padding:0 16px; border:2px solid var(--ea-field-line); border-radius:8px; background:var(--surface); color:var(--ea-ink); font:inherit; font-size:32px; letter-spacing:0.3em; }
textarea.ix-input { width:100%; height:110px; padding:12px 16px; font-size:18px; line-height:26px; }
.ix-alert.fail { color:var(--fail-t); background:var(--fail-s); border-color:var(--fail-t); }
.ix-alert.ok { color:var(--ok-t); background:var(--ok-s); border-color:var(--ok-b); }
.ix-alert.info { color:var(--info-t); background:var(--info-s); border-color:var(--info-b); }
.ix-dl { margin:0; background:var(--surface); border:1px solid var(--ea-line); border-radius:12px; }
.ix-dl__r { display:flex; gap:16px; padding:14px 24px; border-top:1px solid var(--ea-line); align-items:baseline; flex-wrap:wrap; }
.ix-dl__r:first-child { border-top:0; }
.ix-dl dt { flex:0 0 280px; color:var(--ea-text-2); font-weight:500; }
.ix-dl dd { margin:0; flex:1 1 200px; font-weight:600; }
.ix-dl dd.miss { font-weight:500; color:var(--caut-t); }
.ix-dl__c { margin-left:auto; }
.ix-qbox { border:2px solid var(--caut-b); background:var(--caut-s); border-radius:12px; padding:20px 24px; display:flex; flex-direction:column; gap:14px; }
.ix-msg { display:flex; gap:14px; align-items:flex-start; }
.ix-msg__b { flex:1 1 auto; background:var(--ea-subtle); border:1px solid var(--ea-line); border-radius:12px; padding:14px 18px; display:flex; flex-direction:column; gap:6px; }
.ix-phone-btn { min-height:44px; padding:0 14px; border-radius:8px; border:1px solid var(--ea-field-line); background:var(--surface); color:var(--ea-ink); font:inherit; font-size:15px; font-weight:600; }