/* x2kontakte Portal – nach dem xperts2 Design System (Blau #005EB8, Orange #FD4C00, Stellar + Source Sans 3).
   Alle Schriften liegen auf dem eigenen Server (kein Google Fonts). Source Sans 3: SIL OFL 1.1, siehe fonts/SourceSans3-OFL.txt */
@font-face { font-family: 'Source Sans 3'; src: url('fonts/source-sans-3-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Source Sans 3'; src: url('fonts/source-sans-3-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Source Sans 3'; src: url('fonts/source-sans-3-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face {
  font-family: 'Stellar';
  src: url('fonts/Stellar-Medium.otf') format('opentype');
  font-weight: 500;
  font-display: swap;
}

:root {
  --x2-blue: #005EB8; --x2-blue-700: #00488F; --x2-blue-50: #EBF2FA;
  --x2-orange: #FD4C00; --x2-orange-700: #B83700; --x2-orange-50: #FFF3EC;
  --x2-ink: #0E1A2B; --x2-ink-2: #2A3A50; --x2-ink-3: #5A6A80;
  --x2-line: #E2E7EE; --x2-line-strong: #C8D0DB;
  --x2-surface: #FFFFFF; --x2-surface-2: #F6F8FB; --x2-surface-3: #EEF2F7;
  --ok-fg: #17633F; --ok-bg: #E4F3EC; --ok-dot: #1F8A5B;
  --warn-fg: #7A4A00; --warn-bg: #FCEFD4; --warn-dot: #C77A00;
  --err-fg: #A12620; --err-bg: #FBE5E3; --err-dot: #C8312A;
  /* Flächen für Bedienelemente und Akzente; im Dark Mode eigene Werte */
  --x2-control: #FFFFFF; --x2-accent-bg: #005EB8; --x2-accent-bg-hover: #00488F; --x2-on-accent: #FFFFFF;
  --x2-blue-line: #CFE0F3; --x2-orange-line: #FFD2BC; --x2-orange-fg: #8A2A00; --x2-orange-fg-2: #6B2400;
  --ok-line: #BFE3CF; --warn-line: #F0D7A3; --err-line: #F3C3BF;
  --x2-focus: rgba(0, 94, 184, .35); --x2-track: rgba(14, 26, 43, .1);
  --x2-code-bg: #0E1A2B; --x2-code-fg: #E6EDF7;
  --x2-chart-1: #005EB8; --x2-chart-2: #2B9BD8; --x2-chart-3: #E8590C;
  color-scheme: light;
  --font-display: 'Stellar', 'Segoe UI', system-ui, sans-serif;
  --font-sans: 'Source Sans 3', 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* Dark Mode: ausdrücklich gewählt (data-theme="dark") oder „Automatisch“ mit dunklem System */
:root[data-theme="dark"] {
  --x2-blue: #6CB2F5; --x2-blue-700: #9CCBF8; --x2-blue-50: #13304E;
  --x2-orange: #FF7A3D; --x2-orange-700: #FF9A66; --x2-orange-50: #3A2216;
  --x2-ink: #E6EDF7; --x2-ink-2: #C3CEDD; --x2-ink-3: #8F9DB3;
  --x2-line: #263449; --x2-line-strong: #3A4C66;
  --x2-surface: #131C2B; --x2-surface-2: #0B1220; --x2-surface-3: #1D293B;
  --ok-fg: #86DCAE; --ok-bg: #11301F; --ok-dot: #2FB070;
  --warn-fg: #F2C46B; --warn-bg: #362809; --warn-dot: #E0A030;
  --err-fg: #FFA39C; --err-bg: #3B1513; --err-dot: #E5534B;
  --x2-control: #0F1826; --x2-accent-bg: #1F72C6; --x2-accent-bg-hover: #2B84DD; --x2-on-accent: #FFFFFF;
  --x2-blue-line: #24507C; --x2-orange-line: #6B3418; --x2-orange-fg: #FFB28A; --x2-orange-fg-2: #FFC9AB;
  --ok-line: #1F5737; --warn-line: #5E4613; --err-line: #6E2723;
  --x2-focus: rgba(108, 178, 245, .5); --x2-track: rgba(230, 237, 247, .12);
  --x2-code-bg: #070C15; --x2-code-fg: #E6EDF7;
  --x2-chart-1: #4D9EEB; --x2-chart-2: #7FC6EE; --x2-chart-3: #FF8A4C;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --x2-blue: #6CB2F5; --x2-blue-700: #9CCBF8; --x2-blue-50: #13304E;
    --x2-orange: #FF7A3D; --x2-orange-700: #FF9A66; --x2-orange-50: #3A2216;
    --x2-ink: #E6EDF7; --x2-ink-2: #C3CEDD; --x2-ink-3: #8F9DB3;
    --x2-line: #263449; --x2-line-strong: #3A4C66;
    --x2-surface: #131C2B; --x2-surface-2: #0B1220; --x2-surface-3: #1D293B;
    --ok-fg: #86DCAE; --ok-bg: #11301F; --ok-dot: #2FB070;
    --warn-fg: #F2C46B; --warn-bg: #362809; --warn-dot: #E0A030;
    --err-fg: #FFA39C; --err-bg: #3B1513; --err-dot: #E5534B;
    --x2-control: #0F1826; --x2-accent-bg: #1F72C6; --x2-accent-bg-hover: #2B84DD; --x2-on-accent: #FFFFFF;
    --x2-blue-line: #24507C; --x2-orange-line: #6B3418; --x2-orange-fg: #FFB28A; --x2-orange-fg-2: #FFC9AB;
    --ok-line: #1F5737; --warn-line: #5E4613; --err-line: #6E2723;
    --x2-focus: rgba(108, 178, 245, .5); --x2-track: rgba(230, 237, 247, .12);
    --x2-code-bg: #070C15; --x2-code-fg: #E6EDF7;
    --x2-chart-1: #4D9EEB; --x2-chart-2: #7FC6EE; --x2-chart-3: #FF8A4C;
    color-scheme: dark;
  }
}

/* Logo je Modus */
.x2-logo-dark { display: none; }
:root[data-theme="dark"] .x2-logo-light { display: none; }
:root[data-theme="dark"] .x2-logo-dark { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .x2-logo-light { display: none; }
  :root:not([data-theme="light"]) .x2-logo-dark { display: inline; }
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--x2-surface-2); color: var(--x2-ink); font-family: var(--font-sans); font-size: 16px; line-height: 1.5; }
a { color: var(--x2-blue); }
a:hover { color: var(--x2-blue-700); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.015em; margin: 0; }
h1:focus { outline: none; }

.x2-header { background: var(--x2-surface); border-bottom: 1px solid var(--x2-line); }
.x2-header-inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; min-height: 72px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.x2-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.x2-wordmark { font-family: var(--font-display); font-weight: 500; font-size: 24px; letter-spacing: -0.015em; color: var(--x2-blue); }
.x2-wordmark span { color: var(--x2-orange); }
.x2-nav { display: flex; flex-wrap: wrap; gap: 4px; flex-grow: 1; }
.x2-nav a { padding: 10px 12px; border-radius: 10px; color: var(--x2-ink-2); text-decoration: none; white-space: nowrap; }
.x2-nav a.active { background: var(--x2-blue-50); color: var(--x2-blue); font-weight: 600; }
.x2-theme { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--x2-line-strong);
  background: var(--x2-control); color: var(--x2-ink-2); font: 600 14px var(--font-sans); cursor: pointer; }
.x2-theme:hover { border-color: var(--x2-blue); color: var(--x2-blue); }
.x2-theme:focus-visible { outline: 3px solid var(--x2-focus); outline-offset: 2px; }
.x2-theme svg { width: 18px; height: 18px; display: none; }
.x2-theme[data-mode="auto"] .i-auto, .x2-theme[data-mode="light"] .i-light, .x2-theme[data-mode="dark"] .i-dark { display: block; }
.x2-user { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--x2-ink-2); margin-left: auto; white-space: nowrap; }
/* Desktop: Darstellung nur als Symbol (Bezeichnung im Tooltip), damit Navigation und Benutzer in eine Zeile passen. */
.x2-theme-label { display: none; }
.x2-theme { padding: 0 9px; }
@media (max-width: 1180px) and (min-width: 641px) { .x2-username { display: none; } }
.x2-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--x2-line); margin-top: -8px; overflow-x: auto; }
.x2-tabs a { padding: 10px 14px; color: var(--x2-ink-2); text-decoration: none; font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.x2-tabs a:hover { color: var(--x2-blue); }
.x2-tabs a[aria-current="page"] { color: var(--x2-blue); border-bottom-color: var(--x2-blue); }

.x2-main { max-width: 1280px; margin: 0 auto; padding: 40px 24px 64px; display: flex; flex-direction: column; gap: 24px; }
.x2-title { font-size: 40px; color: var(--x2-blue); }
.x2-sub { margin: 0; font-size: 16px; color: var(--x2-ink-3); }
.x2-eyebrow { font-size: 15px; font-weight: 500; color: var(--x2-ink-3); }
.x2-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; }
.x2-crumbs { font-size: 14px; color: var(--x2-ink-3); display: flex; gap: 8px; flex-wrap: wrap; }

.x2-card { background: var(--x2-surface); border: 1px solid var(--x2-line); border-radius: 16px; }
.x2-card-pad { padding: 20px 24px; }
.x2-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--x2-line); }
.x2-card-head h2 { font-size: 22px; }
.x2-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.x2-kpi { display: flex; flex-direction: column; gap: 4px; }
.x2-kpi-label { font-size: 14px; color: var(--x2-ink-3); }
.x2-kpi-value { font-family: var(--font-display); font-weight: 500; font-size: 34px; }
.x2-kpi-note { font-size: 14px; color: var(--x2-ink-3); }
.x2-kpi.warn { background: var(--x2-orange-50); border-color: var(--x2-orange-line); }
.x2-kpi.warn .x2-kpi-label, .x2-kpi.warn .x2-kpi-value, .x2-kpi.warn .x2-kpi-note { color: var(--x2-orange-fg); }

/* position: relative, damit .sr-only-Texte in breiten Tabellen mit abgeschnitten werden (sonst scrollt die ganze Seite waagerecht) */
.x2-table-wrap { overflow-x: auto; position: relative; }
.x2-table { width: 100%; border-collapse: collapse; min-width: 760px; }
.x2-table th { text-align: left; font-size: 13px; font-weight: 600; color: var(--x2-ink-3); padding: 12px 16px; border-bottom: 1px solid var(--x2-line); white-space: nowrap; }
.x2-table td { padding: 13px 16px; border-bottom: 1px solid var(--x2-line); font-size: 15px; vertical-align: top; }
.x2-table tr:last-child td { border-bottom: none; }
.x2-strong { font-weight: 600; }
.x2-small { font-size: 13px; color: var(--x2-ink-3); }
.x2-small.x2-stale { color: var(--x2-orange-fg); }
.x2-note { font-size: 13px; margin-top: 4px; }

.x2-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.x2-pill .dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; }
.x2-pill.ok { background: var(--ok-bg); color: var(--ok-fg); } .x2-pill.ok .dot { background: var(--ok-dot); }
.x2-pill.warn { background: var(--warn-bg); color: var(--warn-fg); } .x2-pill.warn .dot { background: var(--warn-dot); }
.x2-pill.err { background: var(--err-bg); color: var(--err-fg); } .x2-pill.err .dot { background: var(--err-dot); }
.x2-pill.pause, .x2-pill.none { background: var(--x2-surface-3); color: var(--x2-ink-2); } .x2-pill.pause .dot, .x2-pill.none .dot { background: var(--x2-ink-3); }
.x2-pill.role-master { background: var(--x2-orange-50); color: var(--x2-orange-700); }
.x2-pill.role { background: var(--x2-blue-50); color: var(--x2-blue-700); }
.txt-ok { color: var(--ok-fg); } .txt-warn { color: var(--warn-fg); } .txt-err { color: var(--err-fg); }

.x2-banner { border-radius: 16px; padding: 20px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid; }
.x2-banner.ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-fg); }
.x2-banner.warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-fg); }
.x2-banner.err { background: var(--err-bg); border-color: var(--err-line); color: var(--err-fg); }
.x2-banner.pause, .x2-banner.none { background: var(--x2-surface-3); border-color: var(--x2-line-strong); color: var(--x2-ink-2); }
.x2-banner strong { font-size: 18px; display: block; }

.x2-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; font: 600 15px var(--font-sans); cursor: pointer; border: none; text-decoration: none; }
.x2-btn.primary { background: var(--x2-accent-bg); color: var(--x2-on-accent); }
.x2-btn.primary:hover { background: var(--x2-accent-bg-hover); color: var(--x2-on-accent); }
.x2-btn.secondary { background: var(--x2-control); color: var(--x2-blue); border: 1.5px solid var(--x2-blue); }
.x2-btn:disabled { opacity: .55; cursor: not-allowed; }
.x2-btn:focus-visible, .x2-chip:focus-visible, a:focus-visible, .x2-code:focus-visible { outline: 3px solid var(--x2-focus); outline-offset: 2px; }
.x2-chip { min-height: 40px; padding: 0 14px; border-radius: 999px; font: 600 14px var(--font-sans); cursor: pointer; background: var(--x2-control); color: var(--x2-ink-2); border: 1px solid var(--x2-line-strong); }
.x2-chip[aria-pressed="true"] { background: var(--x2-accent-bg); color: var(--x2-on-accent); border-color: var(--x2-accent-bg); }

.x2-dl { display: grid; grid-template-columns: minmax(140px, 180px) 1fr; gap: 12px 20px; margin: 0; }
.x2-dl dt { font-size: 14px; color: var(--x2-ink-3); }
.x2-dl dd { margin: 0; font-size: 15px; }
.x2-two { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.x2-two > .wide { flex: 999 1 560px; min-width: 0; }
.x2-two > .narrow { flex: 1 1 300px; display: flex; flex-direction: column; gap: 16px; }
.x2-msg { padding: 10px 14px; border-radius: 10px; background: var(--x2-blue-50); color: var(--x2-blue-700); font-size: 15px; }
.x2-msg.err { background: var(--err-bg); color: var(--err-fg); }
.x2-empty { padding: 32px 24px; color: var(--x2-ink-3); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 640px) {
  .x2-header-inner { min-height: 56px; padding: 8px 16px; gap: 4px 12px; }
  .x2-brand img { height: 30px; width: auto; }
  .x2-user { margin-left: auto; font-size: 14px; gap: 8px; }
  .x2-username { display: none; }
  .x2-user .x2-pill { display: none; }   /* Rolle steht im Portal ohnehin; so passen Logo und Abmelden in eine Zeile */
  .x2-header-inner { gap: 4px 8px; }
  .x2-nav { order: 3; flex-basis: 100%; }
  .x2-nav a { padding: 6px 10px; }
  .x2-nav-more > summary { padding: 6px 10px; }
  .x2-main { padding: 24px 16px 48px; gap: 16px; }
  .x2-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .x2-kpi.x2-card-pad { padding: 10px 12px; border-radius: 12px; }
  .x2-kpi-label { font-size: 12px; line-height: 1.3; }
  .x2-kpi-value { font-size: 26px; }
  .x2-kpi-note { display: none; }
  .x2-card-head, .x2-card-pad { padding: 14px 16px; }
  .x2-banner { padding: 14px 16px; }
  .x2-title { font-size: 30px; }
  .x2-dl { grid-template-columns: 1fr; gap: 4px 0; }
  .x2-dl dd { margin-bottom: 10px; }
}

#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; padding: 12px 24px; background: var(--warn-bg); color: var(--warn-fg); z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; float: right; }

/* Formulare, Pause */
.x2-pause { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; }
.x2-pause-state { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 15px; }
.x2-form { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 560px; }
.x2-form label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; color: var(--x2-ink-2); }
.x2-input { font: 400 15px var(--font-sans); min-height: 42px; padding: 8px 12px; border: 1px solid var(--x2-line-strong); border-radius: 10px; background: var(--x2-control); color: var(--x2-ink); }
.x2-input:focus { outline: 3px solid var(--x2-focus); border-color: var(--x2-blue); }
.x2-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.x2-check, .x2-form label.x2-check { display: flex; flex-direction: row; gap: 10px; align-items: flex-start; font-size: 15px; padding: 6px 0; }
.x2-check input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 3px; accent-color: var(--x2-blue); }
.x2-check small { display: block; color: var(--x2-ink-3); font-size: 13px; }
.x2-btn.small { min-height: 34px; padding: 0 12px; font-size: 14px; }
.x2-btn.danger { background: var(--x2-control); color: var(--err-fg); border: 1.5px solid var(--err-dot); }
.x2-sublinks { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.x2-more { position: relative; }
.x2-more > summary { list-style: none; }
.x2-more > summary::-webkit-details-marker { display: none; }
.x2-more > summary::after { content: " ▾"; }
.x2-more-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 200px; display: flex; flex-direction: column; padding: 6px;
  background: var(--x2-surface); border: 1px solid var(--x2-line-strong); border-radius: 12px; box-shadow: 0 8px 24px rgb(0 0 0 / 0.12); }
.x2-more-menu a { padding: 9px 12px; border-radius: 8px; color: var(--x2-ink); text-decoration: none; }
.x2-more-menu a:hover { background: var(--x2-blue-50); color: var(--x2-blue); }
.x2-nav-more > summary { padding: 10px 12px; border-radius: 10px; color: var(--x2-ink-2); cursor: pointer; white-space: nowrap; }
.x2-nav-more > summary.active { background: var(--x2-blue-50); color: var(--x2-blue); font-weight: 600; }
.x2-nav-more .x2-more-menu { left: 0; right: auto; }
.x2-nav-more .x2-more-menu a { padding: 9px 12px; }
.x2-nav-more .x2-more-menu a.active { background: var(--x2-blue-50); color: var(--x2-blue); font-weight: 600; }
.x2-paused { background: var(--x2-orange-50); border-color: var(--x2-orange-line); }

/* Einrichtung */
.x2-step .x2-card-head h2 { display: flex; align-items: center; }
.x2-stepnum { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: var(--x2-accent-bg); color: var(--x2-on-accent); font: 600 14px var(--font-sans); margin-right: 10px; }
.x2-stack { display: flex; flex-direction: column; gap: 12px; }
.x2-stack p { margin: 0; }
.x2-subcard { border: 1px solid var(--x2-line); border-radius: 12px; padding: 14px 16px; background: var(--x2-surface-2); }
.x2-copy { display: flex; gap: 8px; align-items: flex-start; }
.x2-code { flex: 1 1 auto; min-width: 0; margin: 0; padding: 10px 12px; background: var(--x2-code-bg); color: var(--x2-code-fg); border: 1px solid var(--x2-line); border-radius: 10px; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-x: auto; white-space: pre; }
.x2-code-line { white-space: nowrap; display: block; }
.x2-banner.x2-preview { border-color: var(--x2-blue-line); background: var(--x2-blue-50); color: var(--x2-ink); }
.x2-internal { border-style: dashed; }
.x2-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.x2-checks li.ok span { color: var(--ok-dot); font-weight: 700; }
.x2-checks li.err { color: var(--err-fg); }
.x2-checks li.err span { font-weight: 700; }
@media (max-width: 640px) { .x2-copy { flex-direction: column; } .x2-code { width: 100%; } }

/* Fußzeile, Startseite, Rechtstexte */
html, body { min-height: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; }
.x2-main { flex: 1 0 auto; width: 100%; }
.x2-footer { border-top: 1px solid var(--x2-line); background: var(--x2-surface); }
.x2-footer-inner { max-width: 1280px; margin: 0 auto; padding: 18px 24px; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--x2-ink-3); }
.x2-footer a { color: var(--x2-ink-2); }
.x2-hero { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; padding: 16px 0 8px; }
.x2-hero > div { flex: 1 1 420px; }
.x2-hero h1 { font-size: 48px; line-height: 1.1; color: var(--x2-blue); margin-bottom: 16px; }
.x2-hero p { font-size: 19px; color: var(--x2-ink-2); margin: 0 0 24px; max-width: 620px; }
.x2-hero-mark { width: 100%; max-width: 260px; height: auto; flex: 0 1 260px; }
/* Startseite: das Ergebnis zeigen, nicht ein Symbol. Ein Handy mit dem Ordner „Firmenkontakte“; einmal beim Laden wird ein Kontakt aktualisiert. */
/* Text links, Handy rechts über Einleitung und „Warum“: keine leere Fläche neben dem Text. */
.x2-landing { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 72px; row-gap: 40px; align-items: start; }
.x2-landing .x2-hero { grid-column: 1; padding-top: 40px; }
.x2-landing .x2-phone { grid-column: 2; grid-row: 1 / span 2; }
.x2-landing .x2-why { grid-column: 1; }
@media (max-width: 900px) {
  .x2-landing { grid-template-columns: 1fr; }
  .x2-landing .x2-hero, .x2-landing .x2-why { grid-column: 1; }
  .x2-landing .x2-phone { grid-column: 1; grid-row: auto; }
}
.x2-phone { margin: 0; max-width: 300px; width: 100%; justify-self: center; }
.x2-phone-screen { border: 10px solid #0E1A2B; border-radius: 40px; background: #FFFFFF; color: #0E1A2B; overflow: hidden; outline: 1px solid var(--x2-line-strong);
  box-shadow: 0 24px 48px -24px rgb(14 26 43 / .45); font-size: 15px; }
.x2-phone-bar { padding: 8px 22px 0; font-weight: 600; font-size: 13px; }
.x2-phone-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 8px 14px 10px; border-bottom: 1px solid #E2E7EE; }
.x2-phone-head .back { color: #0062CC; font-size: 14px; }
.x2-phone-head .search { color: #0062CC; font-size: 14px; text-align: right; }
.x2-phone-head strong { font-size: 16px; }
.x2-phone-list { list-style: none; margin: 0; padding: 0 0 12px; }
.x2-phone-list li { position: relative; padding: 7px 16px; border-bottom: 1px solid #EEF2F7; line-height: 1.25; }
.x2-phone-list li b { font-weight: 700; }
.x2-phone-list small { display: block; color: #5A6A80; font-size: 12.5px; }
.x2-phone-list .letter { background: #F6F8FB; color: #5A6A80; font-weight: 600; font-size: 12px; padding: 2px 16px; }
.x2-phone-list .changed em { position: absolute; right: 12px; top: 50%; translate: 0 -50%; font-style: normal; font-size: 11.5px; font-weight: 600;
  color: #8A2A00; background: #FFF3EC; border: 1px solid #FFD2BC; border-radius: 999px; padding: 1px 8px; }
.x2-phone-list .changed { animation: x2-sync 2.4s ease-out 1s both; }
.x2-phone-list .changed em { animation: x2-badge 2.4s ease-out 1s both; }
@keyframes x2-sync { from { background: transparent; } 25% { background: #FFF3EC; } to { background: transparent; } }
@keyframes x2-badge { from { opacity: 0; } 25% { opacity: 1; } to { opacity: 1; } }
.x2-phone figcaption { margin-top: 14px; font-size: 14px; color: var(--x2-ink-3); line-height: 1.45; }
@media (prefers-reduced-motion: reduce) { .x2-phone-list .changed, .x2-phone-list .changed em { animation: none; } }
@media (max-width: 640px) { .x2-phone { max-width: 260px; } }
.x2-why { max-width: 720px; border-top: 1px solid var(--x2-line); padding-top: 28px; }
.x2-why h2 { font-size: 26px; margin-bottom: 10px; }
.x2-why p { font-size: 18px; line-height: 1.6; color: var(--x2-ink-2); margin: 0 0 14px; }
.x2-legal { max-width: 820px; }
.x2-legal h2 { font-size: 22px; margin: 28px 0 8px; }
.x2-legal h3 { font-size: 18px; margin: 18px 0 6px; }
.x2-legal p, .x2-legal li { color: var(--x2-ink-2); }
@media (max-width: 640px) { .x2-hero h1 { font-size: 34px; } .x2-hero-mark { display: none; } .x2-footer-inner { padding: 14px 16px; } }

.x2-hint { border: 1px solid var(--x2-orange-line); background: var(--x2-orange-50); color: var(--x2-orange-fg-2); border-radius: 16px; padding: 16px 20px; }
.x2-hint strong { display: block; font-size: 16px; margin-bottom: 4px; }
.x2-hint p { margin: 0; font-size: 15px; }
.x2-hint a { color: var(--x2-orange-fg); }
.x2-steps { counter-reset: s; list-style: none; padding: 0; margin: 8px 0 0; }
.x2-steps > li { counter-increment: s; position: relative; padding: 18px 0 14px 40px; border-top: 1px solid var(--x2-line); }
.x2-steps > li::before { content: counter(s) "."; position: absolute; left: 0; top: 19px; font: 600 20px var(--font-display, var(--font-sans)); color: var(--x2-blue); }
.x2-steps h2 { font-size: 20px; margin: 0 0 6px; }
.x2-steps p { margin: 0 0 6px; color: var(--x2-ink-2); }
.x2-who-table { border-collapse: collapse; margin: 4px 0 28px; font-size: 15px; }
.x2-who-table th, .x2-who-table td { text-align: left; padding: 6px 20px 6px 0; border-bottom: 1px solid var(--x2-line); vertical-align: top; }
.x2-who-table th { font-size: 13px; font-weight: 600; color: var(--x2-ink-3); }

/* Dashboard: Master-Übersicht */
.x2-sys { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.x2-engine { display: flex; gap: 14px; align-items: flex-start; }
.x2-engine > div { flex: 1 1 auto; min-width: 0; }
/* Auslastung als Balken */
.x2-syschecks { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.x2-syschecks li { display: flex; gap: 8px; align-items: baseline; color: var(--x2-ink-2); font-weight: 400; }
.x2-syschecks li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ok-dot); transform: translateY(-1px); }
.x2-syschecks li.warn::before { background: var(--warn-dot); } .x2-syschecks li.err::before { background: var(--err-dot); }
.x2-syschecks li.err { color: var(--err-fg); } .x2-syschecks li.warn { color: var(--warn-fg); }
.x2-syschecks-label { color: var(--x2-ink-2); font-weight: 600; min-width: 92px; }
.x2-meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px 20px; margin-top: 12px; }
.x2-meter-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; }
.x2-meter-label { color: var(--x2-ink-2); font-weight: 600; }
.x2-meter-value { font-variant-numeric: tabular-nums; font-weight: 600; }
.x2-meter-bar { height: 8px; border-radius: 999px; background: var(--x2-surface-3); overflow: hidden; margin: 4px 0; }
.x2-meter-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--ok-dot); }
.x2-meter.warn .x2-meter-bar > span { background: var(--warn-dot); } .x2-meter.warn .x2-meter-value { color: var(--warn-fg); }
.x2-meter.err .x2-meter-bar > span { background: var(--err-dot); } .x2-meter.err .x2-meter-value { color: var(--err-fg); }
.x2-engine-dot { flex: none; width: 12px; height: 12px; margin-top: 6px; border-radius: 999px; background: var(--x2-ink-3); }
.x2-engine.ok .x2-engine-dot { background: var(--ok-dot); box-shadow: 0 0 0 4px var(--ok-bg); animation: x2-pulse 2.4s ease-in-out infinite; }
.x2-engine.warn { background: var(--warn-bg); border-color: var(--warn-line); }
.x2-engine.warn .x2-engine-dot { background: var(--warn-dot); }
.x2-engine.err { background: var(--err-bg); border-color: var(--err-line); color: var(--err-fg); }
.x2-engine.err .x2-engine-dot { background: var(--err-dot); }
@keyframes x2-pulse { 50% { box-shadow: 0 0 0 7px var(--ok-bg); } }

.x2-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.x2-states { display: flex; flex-direction: column; gap: 14px; }
.x2-states h2 { font-size: 22px; }
.x2-states-bar { display: flex; gap: 3px; height: 14px; border-radius: 999px; overflow: hidden; background: var(--x2-track); }
.x2-states-bar span { min-width: 6px; background: var(--x2-ink-3); }
.x2-states-bar .ok { background: var(--ok-dot); } .x2-states-bar .warn { background: var(--warn-dot); } .x2-states-bar .err { background: var(--err-dot); }
.x2-states-keys { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.x2-state-key { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--x2-line); background: var(--x2-control);
  font: inherit; font-size: 15px; color: var(--x2-ink-2); cursor: pointer; }
.x2-state-key b { font-variant-numeric: tabular-nums; color: var(--x2-ink); }
.x2-state-key i { width: 9px; height: 9px; border-radius: 999px; background: var(--x2-ink-3); }
.x2-state-key.ok i { background: var(--ok-dot); } .x2-state-key.warn i { background: var(--warn-dot); } .x2-state-key.err i { background: var(--err-dot); }
.x2-state-key.warn:not(.zero) { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-fg); }
.x2-state-key.err:not(.zero) { background: var(--err-bg); border-color: var(--err-line); color: var(--err-fg); }
.x2-state-key.zero { color: var(--x2-ink-3); } .x2-state-key.zero b { color: var(--x2-ink-3); }
.x2-state-key:hover { border-color: var(--x2-line-strong); }
.x2-state-key[aria-pressed="true"] { border-color: var(--x2-blue); box-shadow: 0 0 0 1px var(--x2-blue) inset; }
/* Kacheln und „Zu erledigen“ in einer Zeile. Die Kacheln bestimmen die Höhe; die Liste scrollt in der Karte. */
/* Zwei Hälften wie Engine/Notbremse darüber, damit die Kanten bündig sind:
   links die Zustandskacheln, rechts „User im Monat“ und „Zu erledigen“. */
.x2-overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.x2-overview > .x2-tiles { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; }
.x2-overview-side { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; }
.x2-todo-slot { position: relative; min-height: 132px; }
.x2-todo-card { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; }
.x2-todo-card .x2-card-head { padding: 10px 16px; }
.x2-todo-card .x2-card-head h2 { font-size: 17px; }
.x2-todo-card .x2-allclear { padding: 10px 16px; }
.x2-todo-card .x2-todos { flex: 1 1 auto; overflow-y: auto; }
.x2-todo-card .x2-todos li { padding: 6px 14px; }
.x2-todo-card .x2-todos li .x2-small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x2-todo-card .x2-todo-kind { display: inline; margin-right: 6px; }
@media (max-width: 900px) {
  .x2-overview { grid-template-columns: 1fr; }
  .x2-overview-side { grid-template-columns: 1fr; }
  .x2-todo-slot { min-height: 0; }
  .x2-todo-card { position: static; }
  .x2-todo-card .x2-todos { max-height: 260px; }
}
.x2-tile { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left; padding: 14px 18px; border-radius: 16px; border: 1px solid var(--x2-line); background: var(--x2-surface); font: inherit; color: var(--x2-ink); }
button.x2-tile { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
button.x2-tile:hover { border-color: var(--x2-line-strong); }
button.x2-tile[aria-pressed="true"] { border-color: var(--x2-blue); box-shadow: 0 0 0 2px var(--x2-blue) inset; }
.x2-tile-label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--x2-ink-3); }
.x2-tile-label .dot { width: 9px; height: 9px; border-radius: 999px; background: var(--x2-ink-3); }
.x2-tile.ok .dot { background: var(--ok-dot); } .x2-tile.warn .dot { background: var(--warn-dot); } .x2-tile.err .dot { background: var(--err-dot); }
.x2-tile-value { font-family: var(--font-display); font-weight: 500; font-size: 34px; line-height: 1.15; }
.x2-tile-note { font-size: 13px; color: var(--x2-ink-3); }
.x2-tile.warn:not(.zero) { background: var(--warn-bg); border-color: var(--warn-line); }
.x2-tile.err:not(.zero) { background: var(--err-bg); border-color: var(--err-line); }
.x2-tile.warn:not(.zero) .x2-tile-value { color: var(--warn-fg); } .x2-tile.err:not(.zero) .x2-tile-value { color: var(--err-fg); }
.x2-tile.zero .x2-tile-value { color: var(--x2-ink-3); }
.x2-tile.info { background: var(--x2-blue-50); border-color: var(--x2-blue-line); }
.x2-tile.info .x2-tile-value { color: var(--x2-blue); }

.x2-filterbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid var(--x2-line); background: var(--x2-blue-50); border-radius: 16px 16px 0 0; font-size: 15px; }
.x2-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.x2-strip { display: flex; gap: 4px; align-items: flex-start; padding-top: 2px; }
.x2-strip-day { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.x2-strip-day i { width: 16px; height: 16px; border-radius: 4px; background: var(--x2-line); }
.x2-strip-day small { font-size: 11px; line-height: 1; color: var(--x2-ink-3); }
.x2-strip-day i.ok { background: var(--ok-dot); } .x2-strip-day i.warn { background: var(--warn-dot); } .x2-strip-day i.err { background: var(--err-dot); }
.x2-strip-day i.pause { background: var(--x2-line-strong); }
.x2-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 12px 16px; border-top: 1px solid var(--x2-line); font-size: 13px; color: var(--x2-ink-3); }
.x2-legend span { display: inline-flex; align-items: center; gap: 6px; }
.x2-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--x2-line); }
.x2-legend i.ok { background: var(--ok-dot); } .x2-legend i.warn { background: var(--warn-dot); } .x2-legend i.err { background: var(--err-dot); }

.x2-todos { list-style: none; margin: 0; padding: 0; }
.x2-todos li { padding: 12px 20px; border-bottom: 1px solid var(--x2-line); }
.x2-todos li:last-child { border-bottom: none; border-radius: 0 0 0 16px; }
.x2-todo-kind { display: block; font-size: 13px; font-weight: 600; color: var(--x2-orange-700); }
.x2-todos li.err .x2-todo-kind { color: var(--err-fg); }
.x2-allclear { color: var(--ok-fg); font-size: 15px; }
.x2-allclear span { font-weight: 700; margin-right: 4px; }
@media (max-width: 640px) {
  .x2-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .x2-tile { padding: 10px 12px; border-radius: 12px; }
  .x2-tile-value { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) { .x2-engine.ok .x2-engine-dot { animation: none; } }

/* Dashboard: Kundenansicht */
.x2-hero-status { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; }
/* Färbung nur, wenn etwas zu tun ist: „Alles in Ordnung“ steht ruhig auf der Fläche, der grüne Ring reicht als Signal. */
.x2-banner.x2-hero-status.ok { background: var(--x2-surface); border-color: var(--x2-line); color: var(--x2-ink-2); }
.x2-banner.x2-hero-status.ok .txt strong { color: var(--ok-fg); }
.x2-hero-status .txt { flex: 1 1 260px; }
.x2-hero-status .txt strong { font-family: var(--font-display); font-weight: 500; font-size: 26px; display: block; margin-bottom: 2px; }
.x2-hero-status .facts { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 10px; font-size: 15px; }
.x2-hero-status .facts b { font-variant-numeric: tabular-nums; }
.x2-ring { flex: none; }
.x2-ring .track { fill: none; stroke: var(--x2-track); stroke-width: 11; }
.x2-ring .fill { fill: none; stroke: var(--ok-dot); stroke-width: 11; stroke-linecap: round; transition: stroke-dasharray .6s ease; }
.x2-ring.warn .fill { stroke: var(--warn-dot); } .x2-ring.err .fill { stroke: var(--err-dot); } .x2-ring.pause .fill, .x2-ring.none .fill { stroke: var(--x2-ink-3); }
.x2-ring .big { font: 500 30px var(--font-display); fill: currentColor; }
.x2-ring .small { font: 400 13px var(--font-sans); fill: currentColor; opacity: .8; }

.x2-chart { display: grid; grid-template-columns: auto 1fr; gap: 6px 8px; }
.x2-chart-axis { display: flex; flex-direction: column; justify-content: space-between; font-size: 12px; color: var(--x2-ink-3); text-align: right; height: 160px; font-variant-numeric: tabular-nums; }
.x2-chart-plot { display: flex; align-items: flex-end; gap: 3px; height: 160px; border-bottom: 1px solid var(--x2-line-strong); background: linear-gradient(var(--x2-line), var(--x2-line)) top / 100% 1px no-repeat; }
.x2-chart-col { flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; cursor: default; }
.x2-chart-col:hover { background: var(--x2-surface-2); }
.x2-chart-stack { width: 100%; display: flex; flex-direction: column-reverse; gap: 2px; }
.x2-chart-stack span { display: block; min-height: 2px; flex-basis: 0; }
.x2-chart-stack span:last-child { border-radius: 4px 4px 0 0; }
.x2-chart-x { display: flex; gap: 3px; font-size: 12px; color: var(--x2-ink-3); }
.x2-chart-x span { flex: 1 1 0; white-space: nowrap; overflow: visible; }
.s1 { background: var(--x2-chart-1); } .s2 { background: var(--x2-chart-2); } .s3 { background: var(--x2-chart-3); }
.x2-chart-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; font-size: 14px; color: var(--x2-ink-2); align-items: center; }
.x2-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.x2-chart-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.x2-chart-table { margin-top: 10px; font-size: 14px; }
.x2-chart-table summary { cursor: pointer; color: var(--x2-blue); }

.x2-dots { display: flex; flex-wrap: wrap; gap: 6px; }
.x2-dots a { width: 18px; height: 18px; border-radius: 5px; background: var(--x2-line); display: block; transition: transform .1s; }
.x2-dots a:hover { transform: scale(1.25); }
.x2-dots a.ok { background: var(--ok-dot); } .x2-dots a.warn { background: var(--warn-dot); } .x2-dots a.err { background: var(--err-dot); }
.x2-dots a.excl { background: var(--x2-control); border: 2px solid var(--x2-line-strong); }
.x2-legend i.excl { background: var(--x2-control); border: 2px solid var(--x2-line-strong); width: 10px; height: 10px; }
.x2-filters { display: flex; flex-wrap: wrap; gap: 16px 24px; }
.x2-filters label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--x2-ink-3); min-width: 180px; }
.x2-mail-err { max-width: 260px; overflow: hidden; text-overflow: ellipsis; color: var(--err-fg); }
.x2-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }
.x2-doc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.x2-doc-list a { font-weight: 600; }
.x2-dots-sum { color: var(--x2-ink-3); font-size: 13px; margin-bottom: 12px; }
.x2-mbx-list { list-style: none; margin: 0; padding: 0; }
.x2-mbx-list li { border-top: 1px solid var(--x2-line); }
.x2-mbx-list li:first-child { border-top: none; }
.x2-mbx-list a { display: flex; align-items: center; gap: 10px; padding: 8px 0; color: inherit; text-decoration: none; min-width: 0; }
.x2-mbx-list a:hover .x2-mbx-name { text-decoration: underline; }
.x2-mbx-list i { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--x2-line); }
.x2-mbx-list i.ok { background: var(--ok-dot); } .x2-mbx-list i.warn { background: var(--warn-dot); } .x2-mbx-list i.err { background: var(--err-dot); }
.x2-mbx-list i.excl { background: var(--x2-control); border: 2px solid var(--x2-line-strong); }
.x2-mbx-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x2-mbx-state { flex: none; color: var(--x2-ink-3); font-size: 13px; }
.x2-mbx-msg { padding: 0 0 8px 20px; }
.x2-dots-head { font-weight: 600; margin: 14px 0 8px; }
.x2-dots-head:first-child { margin-top: 0; }
@media (max-width: 640px) {
  .x2-chart-plot, .x2-chart-axis { height: 120px; }
  .x2-chart-plot, .x2-chart-x { gap: 1px; }
  .x2-ring { width: 88px; height: 88px; }
  .x2-hero-status .txt strong { font-size: 21px; }
}
/* Karten nebeneinander gleich hoch */
.x2-sys { align-items: stretch; }
.x2-two.equal { align-items: stretch; }
.x2-two.equal > .narrow { display: block; }
.x2-dots-legend { border-top: none; padding: 12px 0 0; }
.x2-dots-legend i { width: 10px; height: 10px; border-radius: 3px; }
@media (max-width: 640px) {
  /* Kundenliste als Karten: keine abgeschnittene Leiste */
  .x2-table-cards { min-width: 0; }
  .x2-table-cards thead { display: none; }
  .x2-table-cards, .x2-table-cards tbody, .x2-table-cards tr, .x2-table-cards td { display: block; }
  .x2-table-cards tr { padding: 12px 0; border-bottom: 1px solid var(--x2-line); }
  .x2-table-cards tr:last-child { border-bottom: none; }
  .x2-table-cards td { border: none; padding: 4px 16px; }
  .x2-table-cards td.num { text-align: left; }
  .x2-table-cards td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; color: var(--x2-ink-3); }
  .x2-table-cards td.num .x2-small { display: inline; margin-left: 6px; }
}

.x2-logout { display: inline; margin: 0; }
.x2-logout button { background: none; border: none; padding: 0; font: inherit; color: var(--x2-blue); text-decoration: underline; cursor: pointer; }
.x2-logout button:hover { color: var(--x2-blue-700); }

/* Neuigkeiten */
.x2-footer-version { margin-left: auto; font-variant-numeric: tabular-nums; }
.x2-releases { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.x2-releases > li { background: var(--x2-surface); border: 1px solid var(--x2-line); border-radius: 16px; padding: 18px 22px; }
.x2-releases > li.current { border-color: var(--x2-blue); box-shadow: 0 0 0 1px var(--x2-blue) inset; }
.x2-release-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 4px; }
.x2-release-version { font-weight: 700; color: var(--x2-blue); font-variant-numeric: tabular-nums; }
.x2-releases h2 { font-size: 20px; margin: 0 0 8px; }
.x2-releases ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.x2-releases ul li { color: var(--x2-ink-2); }
.x2-releases .x2-pill { margin-left: 6px; font-size: 12px; padding: 1px 8px; }
@media (max-width: 640px) { .x2-footer-version { margin-left: 0; } }

/* Zielpostfächer */
.x2-search { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; color: var(--x2-ink-2); max-width: 420px; }