/* SEO & KI Autopilot - unified logo-led interface */
:root {
  --brand-navy-950: #061526;
  --brand-navy-900: #091d33;
  --brand-navy-800: #102b49;
  --brand-blue-700: #0f55d9;
  --brand-blue-600: #1468ff;
  --brand-blue-100: #dfeaff;
  --brand-blue-050: #f1f6ff;
  --brand-pink-600: #f20d57;
  --brand-pink-100: #ffe2ec;
  --brand-ice: #e8f7ff;
  --brand-ink: #102235;
  --brand-muted: #5d6f82;
  --brand-line: #dbe3ec;
  --brand-paper: #f6f8fb;
  --blue-600: var(--brand-blue-600);
  --blue-750: var(--brand-blue-700);
  --blue-050: var(--brand-blue-050);
  --blue-100: var(--brand-blue-100);
  --ink-900: var(--brand-ink);
  --ink-800: #23384c;
  --slate-700: var(--brand-muted);
  --canvas-050: var(--brand-paper);
  --line-200: var(--brand-line);
  --radius-sm: 9px;
  --radius-md: 15px;
  --radius-lg: 22px;
  --sidebar-width: 276px;
  font-weight: 400;
}

html { background: var(--brand-paper); }
body { color: var(--brand-ink); font-weight: 400; }
h1, h2, h3, h4, strong, b { font-weight: 600; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.eyebrow { color: var(--brand-blue-700); font-weight: 650; letter-spacing: .11em; }
.lead { color: var(--brand-muted); font-weight: 400; }
.button, .status-badge, .field, .check-field { font-weight: 550; }
.data-table th { font-weight: 600; }

/* The source artwork intentionally has breathing room; crop it consistently inside UI marks. */
.brand-logo-frame { border: 1px solid rgb(16 43 73 / 13%); background: #fff; box-shadow: 0 9px 24px rgb(5 25 48 / 13%); }
.brand-logo-frame img { width: 158%; height: 158%; max-width: none; object-fit: cover; }

.button { border-radius: 9px; box-shadow: none; }
.button-primary { background: var(--brand-blue-600); border-color: var(--brand-blue-600); }
.button-primary:hover:not(:disabled) { background: var(--brand-blue-700); border-color: var(--brand-blue-700); }
.button-secondary { border-color: #c7d3df; }
.field { font-weight: 550; }
.field > span { font-size: .84rem; }
.field input, .field select, .field textarea, .search-input { border-color: #c7d3df; border-radius: 9px; box-shadow: 0 1px 2px rgb(6 21 38 / 3%); }
.field textarea { min-height: 96px; }
.check-field { min-width: 0; }
.check-field span { min-width: 0; }
.check-field small { display: block; margin-top: .15rem; color: var(--brand-muted); font-weight: 400; }

.platform-status-banner {
  position: fixed; z-index: 120; top: 10px; left: 50%; width: min(760px, calc(100% - 32px)); transform: translateX(-50%);
  border: 1px solid #a9c7f8; border-radius: 10px; background: #eef5ff; color: #123b79; padding: .65rem 1rem;
  box-shadow: 0 12px 35px rgb(6 21 38 / 18%); font-size: .84rem; font-weight: 550; text-align: center;
}
.platform-status-warning { border-color: #ebcb92; background: #fff7e8; color: #7c4900; }
.platform-status-critical { border-color: #efb5c4; background: #fff0f4; color: #9b123d; }
.marketing-body .platform-status-banner { top: 88px; }
.app-body .platform-status-banner { top: 78px; }

/* Public website */
.marketing-body {
  --marketing-ink: var(--brand-navy-950);
  --marketing-ink-soft: var(--brand-navy-900);
  --marketing-blue: var(--brand-blue-600);
  --marketing-blue-dark: var(--brand-blue-700);
  --marketing-pink: var(--brand-pink-600);
  --marketing-ice: var(--brand-ice);
  --marketing-paper: var(--brand-paper);
  --marketing-muted: var(--brand-muted);
  --marketing-line: var(--brand-line);
  color: var(--brand-ink);
}
.marketing-body h1, .marketing-body h2, .marketing-body h3 { font-weight: 590; }
.marketing-shell { width: min(1480px, calc(100% - 64px)); }
.marketing-nav-shell { width: min(1540px, calc(100% - 64px)); min-height: 78px; }
.marketing-header { border-bottom-color: rgb(255 255 255 / 10%); }
.marketing-header.is-scrolled { background: rgb(6 21 38 / 94%); }
.marketing-brand-copy strong { font-weight: 620; }
.marketing-brand-copy small { color: #a9bad0; font-weight: 600; }
.marketing-nav a, .marketing-login { font-weight: 500; }
.marketing-button { border-radius: 9px; font-weight: 570; letter-spacing: 0; }
.marketing-button-primary { background: var(--brand-blue-600); }
.marketing-button-primary::before { background: var(--brand-pink-600); }

.marketing-hero {
  min-height: 820px;
  background:
    radial-gradient(circle at 78% 26%, rgb(20 104 255 / 27%), transparent 26%),
    radial-gradient(circle at 16% 75%, rgb(242 13 87 / 13%), transparent 24%),
    linear-gradient(135deg, var(--brand-navy-950), var(--brand-navy-900) 58%, #0b2747);
}
.marketing-hero::before { opacity: .15; background-size: 72px 72px; }
.marketing-hero-grid { min-height: 820px; grid-template-columns: minmax(0,.86fr) minmax(560px,1.14fr); gap: clamp(3rem,6vw,7rem); padding-top: 92px; }
.marketing-hero-copy { max-width: 680px; }
.marketing-kicker { font-weight: 560; letter-spacing: .08em; }
.marketing-hero h1 { max-width: 14.5ch; margin: 1.25rem 0 1.35rem; font-size: clamp(2.8rem,4.2vw,4.05rem); font-weight: 570; line-height: 1.04; letter-spacing: -.04em; }
.marketing-hero-lead { max-width: 60ch; color: #c9d7e8; font-size: clamp(1rem,1.35vw,1.14rem); font-weight: 400; line-height: 1.72; }
.marketing-trust-list { font-size: .78rem; font-weight: 450; }
.marketing-trust-list li span { color: #63a6ff; }
.marketing-product-stage { min-width: 0; }
.portal-preview { border-color: rgb(255 255 255 / 22%); box-shadow: 0 34px 80px rgb(0 0 0 / 30%); }
.portal-preview strong, .portal-preview h3 { font-weight: 600; }
.portal-chart-line { stroke: var(--brand-blue-600); }
.portal-chart-point { fill: var(--brand-pink-600); }
.portal-action-icon { color: var(--brand-pink-600); }

.marketing-facts { border-bottom: 1px solid var(--brand-line); }
.marketing-facts-grid strong { color: var(--brand-navy-900); font-weight: 590; }
.marketing-facts-grid span { font-weight: 430; }
.marketing-section { padding-block: clamp(5.5rem,8vw,8.5rem); }
.marketing-section-heading { grid-template-columns: minmax(0,1.1fr) minmax(320px,.7fr); }
.marketing-section-heading h2, .verification-copy h2, .intelligence-grid h2, .faq-grid h2 { font-size: clamp(2.25rem,4.3vw,3.65rem); font-weight: 570; line-height: 1.08; letter-spacing: -.04em; }
.marketing-section-heading p, .verification-copy > p, .intelligence-grid > div:last-child > p, .faq-grid > div:first-child > p { font-weight: 400; line-height: 1.7; }
.marketing-overline { font-weight: 620; letter-spacing: .11em; }
.benefit-card { border-radius: 20px; box-shadow: 0 14px 40px rgb(6 21 38 / 5%); }
.benefit-card h3 { font-weight: 580; }
.benefit-card p { font-size: .82rem; line-height: 1.7; }
.benefit-index { font-weight: 600; }
.workflow-section { background: var(--brand-navy-950); }
.workflow-grid article h3 { font-weight: 570; }
.verification-section { background: linear-gradient(180deg,#f4f8fd,#edf4fb); }
.verification-tabs button { min-height: 42px; font-weight: 550; }
.intelligence-core { background: var(--brand-navy-900); }
.intelligence-core span { color: #76aaff; font-weight: 620; }
.intelligence-node { font-weight: 550; }
.pricing-section { background: #f3f6fa; }
.pricing-card { border-radius: 20px; box-shadow: 0 12px 36px rgb(6 21 38 / 5%); }
.pricing-card-recommended { border-color: var(--brand-blue-600); box-shadow: 0 20px 55px rgb(20 104 255 / 13%); }
.pricing-recommendation { background: var(--brand-pink-600); font-weight: 600; }
.pricing-card h3, .pricing-price > strong { font-weight: 590; }
.pricing-price > strong { font-size: clamp(2.35rem,4vw,3rem); }
.faq-list summary { font-weight: 560; }
.marketing-final-card { border-radius: 22px; background: linear-gradient(125deg,var(--brand-blue-700),var(--brand-blue-600)); }
.marketing-final-card h2 { font-size: clamp(2rem,3.8vw,3.45rem); font-weight: 570; line-height: 1.08; }
.marketing-footer { background: var(--brand-navy-950); }
.marketing-footer-grid > div > strong { font-weight: 590; }
.marketing-footer-grid a:not(.marketing-brand) { display: inline-flex; min-height: 32px; align-items: center; }

/* Login and registration */
.auth-body { grid-template-columns: minmax(380px,.86fr) minmax(440px,1.14fr); }
.auth-body-premium .auth-brand {
  background:
    radial-gradient(circle at 78% 20%,rgb(20 104 255 / 30%),transparent 27%),
    radial-gradient(circle at 22% 80%,rgb(242 13 87 / 15%),transparent 24%),
    linear-gradient(145deg,var(--brand-navy-950),var(--brand-navy-900));
}
.auth-body-premium .auth-brand h1 { max-width: 12ch; font-size: clamp(2.35rem,4vw,3.65rem); font-weight: 570; line-height: 1.06; letter-spacing: -.04em; }
.auth-body-premium .auth-brand > div > p:not(.eyebrow) { max-width: 48ch; font-size: .96rem; line-height: 1.7; }
.auth-product-brand strong { font-weight: 600; }
.auth-proof strong { font-weight: 580; }
.auth-main { background: #fff; }
.auth-card h1 { font-size: clamp(2rem,3vw,2.55rem); font-weight: 570; letter-spacing: -.035em; }
.auth-card .lead { font-size: .98rem; line-height: 1.62; }
.auth-card-compact { max-width: 420px; }
.auth-account-cta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; border-top: 1px solid var(--brand-line); padding-top: 1rem; color: var(--brand-muted); font-size: .9rem; }
.auth-account-cta .button { min-height: 40px; }

/* Portal and platform administration */
.app-body { background: #f3f6fa; }
.app-sidebar { position: sticky; top: 0; height: 100vh; align-self: start; overflow-y: auto; border-right: 0; background: linear-gradient(180deg,var(--brand-navy-950),var(--brand-navy-900)); color: #fff; scrollbar-width: thin; }
.sidebar-brand { border-bottom-color: rgb(255 255 255 / 12%); color: #fff; }
.sidebar-brand strong { max-width: 160px; overflow: hidden; text-overflow: ellipsis; font-weight: 590; white-space: nowrap; }
.sidebar-brand small { color: #91a7bf; font-weight: 450; }
.nav-section { color: #718aa5; font-weight: 600; }
.app-nav a { color: #c4d2e1; font-weight: 480; }
.app-nav a:hover { background: rgb(255 255 255 / 8%); color: #fff; }
.app-nav a[aria-current="page"] { background: rgb(20 104 255 / 21%); color: #fff; font-weight: 570; box-shadow: inset 2px 0 var(--brand-blue-600); }
.app-nav a[aria-current="page"] .nav-icon { color: #72a8ff; }
.app-header { position: sticky; z-index: 100; top: 0; border-bottom-color: var(--brand-line); box-shadow: 0 2px 12px rgb(6 21 38 / 4%); }
.context-picker strong { font-weight: 580; }
.user-avatar { background: var(--brand-navy-900); font-weight: 590; }
.app-main { padding: clamp(1rem,2.2vw,2.25rem); }
.app-body.has-platform-banner .app-main { padding-top: calc(clamp(1rem,2.2vw,2.25rem) + 54px); }
.page-container { width: min(1540px,100%); }
.page-heading { margin-bottom: 1.5rem; }
.page-heading h1 { font-size: clamp(1.85rem,2.6vw,2.45rem); font-weight: 570; letter-spacing: -.035em; }
.page-heading p { max-width: 72ch; line-height: 1.6; }
.panel, .metric-card { border-color: var(--brand-line); border-radius: 15px; box-shadow: 0 6px 24px rgb(6 21 38 / 4%); }
.panel { padding: clamp(.9rem,1.5vw,1.2rem); }
.panel-header h2 { font-size: 1.08rem; font-weight: 580; }
.metric-value strong { font-weight: 580; }
.status-badge { font-weight: 560; }
.admin-section { margin-bottom: 1rem; }
.admin-table { min-width: 980px; }
.table-subline { display: block; margin-top: .18rem; color: var(--brand-muted); font-size: .73rem; font-weight: 400; }
.admin-inline-editor { position: relative; }
.admin-inline-editor > summary { cursor: pointer; color: var(--brand-blue-700); font-weight: 560; }
.admin-inline-editor > form { display: grid; gap: .7rem; width: min(360px,80vw); margin-top: .7rem; border: 1px solid var(--brand-line); border-radius: 12px; background: #fff; padding: .85rem; box-shadow: 0 12px 32px rgb(6 21 38 / 10%); }
.form-grid-wide { grid-template-columns: repeat(2,minmax(0,1fr)); }
.admin-create-form { margin-bottom: 1.2rem; border-bottom: 1px solid var(--brand-line); padding-bottom: 1.2rem; }
.admin-control-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.admin-control-row { display: grid; min-width: 0; grid-template-columns: minmax(180px,1fr) minmax(120px,.45fr) minmax(140px,.6fr); gap: .65rem; align-items: end; border-bottom: 1px solid var(--brand-line); padding-bottom: .85rem; }
.admin-control-row:last-child { border-bottom: 0; padding-bottom: 0; }
.admin-control-row > div { min-width: 0; align-self: center; }
.admin-control-row strong, .admin-control-row small { display: block; overflow: hidden; text-overflow: ellipsis; }
.admin-control-row small { color: var(--brand-muted); font-size: .7rem; font-weight: 400; white-space: nowrap; }
.admin-control-row select, .admin-control-row input { width: 100%; min-height: 38px; border: 1px solid #c7d3df; border-radius: 8px; padding: .45rem .55rem; }
.admin-control-row .field { font-size: .78rem; }
.admin-control-row > .field, .admin-control-row > input[type="hidden"] + .field { grid-column: auto; }
.admin-control-row .button { grid-column: 3; }
.admin-link-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .7rem; }
.admin-link-grid a { border: 1px solid var(--brand-line); border-radius: 10px; background: var(--brand-blue-050); padding: .9rem; color: var(--brand-blue-700); font-weight: 560; text-decoration: none; }

/* Installer */
.install-body { background: #f3f6fa; }
.install-header { border-bottom-color: var(--brand-line); }
.install-panel, .success-panel { border-color: var(--brand-line); box-shadow: 0 10px 32px rgb(6 21 38 / 5%); }

@media (min-width: 1800px) {
  .marketing-shell { width: min(1640px,calc(100% - 112px)); }
  .marketing-nav-shell { width: min(1700px,calc(100% - 112px)); }
  .marketing-hero, .marketing-hero-grid { min-height: clamp(820px,70vh,1080px); }
  .marketing-hero-grid { grid-template-columns: minmax(0,.82fr) minmax(650px,1.18fr); }
  .page-container { width: min(1720px,100%); }
}

@media (min-width: 2200px) {
  .marketing-shell { width: min(1960px,calc(100% - 160px)); }
  .marketing-nav-shell { width: min(2024px,calc(100% - 160px)); }
  .marketing-hero-grid { grid-template-columns: minmax(0,.78fr) minmax(760px,1.22fr); gap: 8rem; }
  .marketing-hero-copy { max-width: 760px; }
}

@media (max-width: 1180px) {
  .marketing-shell { width: min(100% - 40px,1480px); }
  .marketing-hero-grid { grid-template-columns: minmax(0,.86fr) minmax(490px,1.14fr); gap: 2rem; }
  .admin-control-grid { grid-template-columns: 1fr; }
}

@media (max-width: 960px) {
  .marketing-nav-shell { width: min(100% - 32px,1540px); }
  .marketing-hero { min-height: auto; }
  .marketing-hero-grid { min-height: auto; grid-template-columns: 1fr; padding-block: 130px 88px; }
  .marketing-hero-copy { max-width: 760px; }
  .marketing-product-stage { min-height: 600px; }
  .marketing-section-heading { grid-template-columns: 1fr; }
  .form-grid-wide { grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
  .auth-body { display: block; }
  .auth-brand { min-height: auto; padding: 1.35rem 1.25rem 1.5rem; }
  .auth-product-brand { margin-bottom: 1.5rem; }
  .auth-body-premium .auth-brand h1 { max-width: 18ch; font-size: 2.15rem; }
  .auth-body-premium .auth-brand > div > p:not(.eyebrow) { margin-bottom: 0; }
  .auth-proof, .auth-security-line { display: none; }
  .auth-main { min-height: auto; padding: 2.5rem 1.25rem; }
  .app-sidebar { position: fixed; z-index: 140; top: 0; height: auto; align-self: auto; }
  .app-header { position: fixed; z-index: 130; top: 0; }
  .app-main { padding: .9rem; }
  .app-body.has-platform-banner .app-main { padding-top: calc(.9rem + 52px); }
  .page-heading h1 { font-size: 1.85rem; }
  .page-actions { width: 100%; }
  .page-actions .button { flex: 1 1 auto; }
  .platform-status-banner, .marketing-body .platform-status-banner, .app-body .platform-status-banner { top: 76px; }
  .admin-control-row { grid-template-columns: 1fr; align-items: stretch; }
  .admin-control-row .button { grid-column: 1; }
  .admin-link-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .marketing-shell { width: min(100% - 28px,1480px); }
  .marketing-hero-grid { padding-top: 104px; }
  .marketing-hero h1 { font-size: clamp(2.2rem,10.8vw,2.9rem); line-height: 1.06; }
  .marketing-hero-lead { font-size: .98rem; }
  .marketing-product-stage { min-height: 470px; }
  .marketing-section { padding-block: 4.5rem; }
  .marketing-section-heading h2, .verification-copy h2, .intelligence-grid h2, .faq-grid h2 { font-size: clamp(2rem,10vw,2.85rem); }
  .benefit-card { min-height: 0; }
  .intelligence-board { min-height: 380px; }
  .marketing-final-card h2 { font-size: 2.2rem; }
  .auth-account-cta { align-items: stretch; flex-direction: column; }
  .auth-account-cta .button { width: 100%; }
}

@media (max-width: 520px) {
  .marketing-hero-actions { display: grid; }
  .marketing-hero-actions .marketing-button { width: 100%; }
  .marketing-product-stage { min-height: 425px; }
  .portal-floating-card { display: none; }
  .marketing-facts-grid { grid-template-columns: 1fr 1fr; }
  .pricing-card { padding: 1.25rem; }
  .verification-tabs { grid-template-columns: 1fr; }
  .intelligence-board { min-height: 340px; }
  .page-heading { gap: .85rem; }
  .page-actions { display: grid; grid-template-columns: 1fr; }
  .page-actions .status-badge { justify-self: start; }
  .panel { border-radius: 12px; }
  .metric-grid { grid-template-columns: 1fr; }
  .auth-meta { align-items: flex-start; flex-direction: column; gap: .5rem; }
  .platform-status-banner { width: calc(100% - 20px); font-size: .76rem; }
}

@media (max-width: 360px) {
  .marketing-shell { width: min(100% - 20px,1480px); }
  .marketing-brand-copy { display: none; }
  .marketing-hero h1 { font-size: 2.15rem; }
  .marketing-facts-grid { grid-template-columns: 1fr; }
  .auth-main, .auth-brand { padding-inline: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .marketing-ready [data-reveal] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Portal-Kompatibilitätsschicht · fortgeführt in 1.5.1
   The reference proportions are retained; its green palette is translated to
   the SEO & KI blue brand. This final layer intentionally owns every surface.
   -------------------------------------------------------------------------- */
:root {
  --brand-navy-950: #10243e;
  --brand-navy-900: #14263d;
  --brand-navy-800: #203b59;
  --brand-blue-700: #1b527e;
  --brand-blue-600: #246aa8;
  --brand-blue-100: #d8e9fa;
  --brand-blue-050: #eef5ff;
  --brand-pink-600: #246aa8;
  --brand-pink-100: #e7f2ff;
  --brand-ice: #f0f6ff;
  --brand-ink: #14263d;
  --brand-muted: #596d82;
  --brand-line: #dce7f2;
  --brand-paper: #f6f9ff;
  --blue-600: #246aa8;
  --blue-750: #1b527e;
  --blue-050: #eef5ff;
  --blue-100: #d8e9fa;
  --ink-900: #14263d;
  --ink-800: #334a5c;
  --slate-700: #596d82;
  --slate-600: #64778b;
  --slate-500: #7c8da0;
  --canvas-050: #f6f9ff;
  --surface-000: #fff;
  --surface-100: #eef5ff;
  --line-200: #dce7f2;
  --line-400: #bcd1e5;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --sidebar-width: 300px;
  --header-height: 78px;
  --focus-ring: 0 0 0 3px rgb(36 106 168 / 18%);
  --kompass-bg: #f6f9ff;
  --kompass-bg-alt: #eef5ff;
  --kompass-surface: #fff;
  --kompass-heading: #14263d;
  --kompass-body: #334a5c;
  --kompass-muted: #596d82;
  --kompass-border: #dce7f2;
  --kompass-border-light: rgb(188 207 230 / 68%);
  --kompass-border-strong: #bcd1e5;
  --kompass-action: #246aa8;
  --kompass-action-hover: #1b527e;
  --kompass-action-light: rgb(36 106 168 / 13%);
  --kompass-footer: #10243e;
  --kompass-shadow-sm: 0 1px 2px rgb(15 23 42 / 5%);
  --kompass-shadow-md: 0 10px 24px -18px rgb(15 23 42 / 24%), 0 1px 3px rgb(15 23 42 / 8%);
  --kompass-shadow-lg: 0 20px 40px -12px rgb(15 23 42 / 16%), 0 8px 16px -8px rgb(3 105 161 / 8%);
  color: var(--kompass-body);
  background: var(--kompass-bg);
  font-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  line-height: 1.6;
}

html { min-width: 320px; background: var(--kompass-bg); color: var(--kompass-body); }
body { background: var(--kompass-bg); color: var(--kompass-body); font-family: inherit; font-size: 16px; font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { color: var(--kompass-heading); letter-spacing: 0; }
h1, h2 { font-weight: 700; line-height: 1.12; }
h3, h4 { font-weight: 600; line-height: 1.25; }
h1 { font-size: clamp(2.1rem, 4.8vw, 3.1rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.1rem); }
h3 { font-size: clamp(1.1rem, 1.6vw, 1.25rem); }
p, li { font-weight: 400; }
strong, b { font-weight: 600; }
a { color: var(--kompass-action-hover); }
:focus-visible { outline: 2px solid var(--kompass-action); outline-offset: 3px; }

.eyebrow {
  display: inline-flex; width: max-content; max-width: 100%; margin: 0 0 18px; border-radius: 9999px;
  background: var(--kompass-action-light); color: var(--kompass-action-hover); padding: 6px 14px;
  font-size: 13px; font-weight: 600; letter-spacing: .06em; line-height: 1.35; text-transform: uppercase;
}
.lead { color: var(--kompass-muted); font-size: clamp(1rem, 1.25vw, 1.08rem); font-weight: 400; line-height: 1.7; }
.brand-logo-frame { border: 1px solid rgb(36 106 168 / 16%); border-radius: 15px; background: #fff; box-shadow: var(--kompass-shadow-md); }
.brand-logo-frame img { width: 158%; height: 158%; max-width: none; object-fit: cover; }
.brand-logo-frame-small { width: 44px; height: 44px; border-radius: 15px; }

.button {
  min-height: 44px; border-radius: 10px; padding: 10px 18px; box-shadow: none;
  font-family: inherit; font-size: 14px; font-weight: 560; line-height: 1.2;
}
.button-large { min-height: 48px; padding: 12px 24px; font-size: 15px; }
.button-small { min-height: 38px; padding: 8px 14px; font-size: 13px; }
.button-primary { border-color: var(--kompass-action); background: var(--kompass-action); color: #fff; }
.button-primary:hover:not(:disabled) { border-color: var(--kompass-action-hover); background: var(--kompass-action-hover); box-shadow: 0 10px 22px -10px rgb(36 106 168 / 48%); }
.button-secondary { border-color: var(--kompass-border-strong); background: #fff; color: var(--kompass-heading); }
.button-secondary:hover:not(:disabled) { border-color: var(--kompass-muted); background: var(--kompass-bg-alt); }
.field { color: var(--kompass-heading); font-weight: 600; }
.field > span { font-size: 14px; }
.field input, .field select, .field textarea, .search-input {
  min-height: 48px; border-color: var(--kompass-border-strong); border-radius: 10px; background: #fff;
  padding: 12px 14px; color: var(--kompass-body); font-size: 15px; font-weight: 400; box-shadow: var(--kompass-shadow-sm);
}
.field textarea { min-height: 112px; }
.field input:focus, .field select:focus, .field textarea:focus, .search-input:focus { border-color: var(--kompass-action); box-shadow: var(--focus-ring); }
.field input:invalid:not(:placeholder-shown) { border-color: var(--kompass-border-strong); }
.field input:invalid:focus { border-color: var(--kompass-action); }
.field input:user-invalid { border-color: #b42318; }
.field small, .check-field small { color: var(--kompass-muted); font-weight: 400; }
.check-field { color: var(--kompass-body); font-weight: 400; }
.check-field input { accent-color: var(--kompass-action); }
.alert { border-radius: 14px; box-shadow: var(--kompass-shadow-sm); }
.platform-status-banner,
.marketing-body .platform-status-banner,
.app-body .platform-status-banner {
  position: relative; z-index: 10; top: auto; left: auto; width: min(760px, calc(100% - 32px)); transform: none;
  margin: 10px auto 0; border-radius: 10px; padding: .65rem 1rem; box-shadow: var(--kompass-shadow-md);
}
.panel, .metric-card, .context-strip, .data-table-wrap {
  border-color: var(--kompass-border-light); border-radius: 14px; background: #fff; box-shadow: var(--kompass-shadow-md);
}
.status-badge { font-weight: 560; }

/* Public website ---------------------------------------------------------- */
.marketing-body {
  --marketing-ink: var(--kompass-heading);
  --marketing-ink-soft: var(--kompass-body);
  --marketing-blue: var(--kompass-action);
  --marketing-blue-dark: var(--kompass-action-hover);
  --marketing-pink: var(--kompass-action);
  --marketing-ice: var(--kompass-bg-alt);
  --marketing-paper: var(--kompass-bg);
  --marketing-muted: var(--kompass-muted);
  --marketing-line: var(--kompass-border);
  background: var(--kompass-bg); color: var(--kompass-body); font-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.6;
}
.marketing-body h1, .marketing-body h2 { color: var(--kompass-heading); font-weight: 700; line-height: 1.12; letter-spacing: 0; }
.marketing-body h3 { color: var(--kompass-heading); font-weight: 600; line-height: 1.25; letter-spacing: 0; }
.marketing-shell { width: min(1500px, 100%); margin-inline: auto; padding-inline: clamp(1rem, 2.8vw, 3rem); }
.marketing-header {
  position: sticky; inset: 0 0 auto; z-index: 50; border-bottom: 1px solid rgb(188 207 230 / 72%);
  background: rgb(255 255 255 / 94%); color: var(--kompass-body); box-shadow: 0 1px 0 rgb(15 23 42 / 5%);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.marketing-header.is-scrolled { background: rgb(255 255 255 / 96%); box-shadow: 0 8px 28px rgb(15 23 42 / 7%); }
.marketing-nav-shell { position: relative; width: min(1500px, 100%); min-height: 78px; margin-inline: auto; padding-inline: clamp(1rem, 2.8vw, 3rem); gap: 34px; }
.marketing-brand { gap: 12px; color: var(--kompass-heading); }
.marketing-brand:hover { color: var(--kompass-heading); }
.marketing-brand-mark { width: 44px; height: 44px; border-radius: 15px; }
.marketing-brand-copy { gap: 2px; line-height: 1; }
.marketing-brand-copy strong { color: var(--kompass-heading); font-size: 20px; font-weight: 650; line-height: 1; }
.marketing-brand-copy small { margin: 0; color: #4f6680; font-size: 13px; font-weight: 560; letter-spacing: 0; line-height: 1; text-transform: uppercase; }
.marketing-nav { gap: clamp(1rem, 2vw, 2rem); }
.marketing-nav a:not(.marketing-button), .marketing-login { color: var(--kompass-body); font-size: 15px; font-weight: 400; line-height: 1.2; }
.marketing-nav a::after { bottom: -10px; background: var(--kompass-action); }
.marketing-nav a:hover { color: var(--kompass-heading); }
.marketing-nav-actions { gap: 12px; }
.marketing-mobile-actions { display: none; }
.marketing-button {
  min-height: 48px; border-width: 1px; border-radius: 9999px; padding: 15px 32px;
  font-size: 16px; font-weight: 600; line-height: 1; letter-spacing: 0; box-shadow: none;
}
.marketing-button-small { min-height: 48px; padding: 15px 28px; font-size: 15px; }
.marketing-button-primary { border-color: var(--kompass-action); background: var(--kompass-action); color: #fff; }
.marketing-button-primary::before { display: none; }
.marketing-button-primary:hover { border-color: var(--kompass-action-hover); background: var(--kompass-action-hover); color: #fff; box-shadow: 0 10px 22px -10px rgb(36 106 168 / 48%); }
.marketing-button-outline, .marketing-button-ghost { border-color: var(--kompass-border-strong); background: #fff; color: var(--kompass-heading); }
.marketing-button-outline:hover, .marketing-button-ghost:hover { border-color: var(--kompass-muted); background: var(--kompass-bg-alt); color: var(--kompass-heading); }
.marketing-body .marketing-button.marketing-button-primary { color: #fff; }
.marketing-body .marketing-button.marketing-button-outline,
.marketing-body .marketing-button.marketing-button-ghost { color: var(--kompass-heading); }
.marketing-body .marketing-button.marketing-button-light { border-color: #fff; background: #fff; color: var(--kompass-heading); }
.marketing-login { padding: 10px 2px; }
.marketing-menu-button { width: 46px; height: 46px; border-color: var(--kompass-border-strong); border-radius: 10px; background: #fff; color: var(--kompass-heading); }

.marketing-hero {
  min-height: 0; padding-top: 0; overflow: hidden; border-bottom: 1px solid var(--kompass-border-light);
  background: radial-gradient(115% 120% at 82% 0%, #fff 0%, #f4f8ff 52%, #eef5ff 100%);
}
.marketing-hero::before, .marketing-hero::after { display: none; }
.marketing-hero-grid { min-height: 0; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); padding-block: clamp(3.5rem, 7vw, 6rem); }
.marketing-hero-copy { max-width: 710px; }
.marketing-kicker, .marketing-overline {
  display: inline-flex; width: max-content; max-width: 100%; border-radius: 9999px; background: var(--kompass-action-light);
  color: var(--kompass-action-hover); padding: 6px 14px; font-size: 13px; font-weight: 600; letter-spacing: .06em; line-height: 1.35; text-transform: uppercase;
}
.marketing-kicker { margin-bottom: 18px; }
.marketing-kicker span { display: none; }
.marketing-hero h1 { max-width: 15ch; margin: 0 0 1.2rem; color: var(--kompass-heading); font-size: clamp(2.1rem, 4.8vw, 3.1rem); font-weight: 700; line-height: 1.12; letter-spacing: 0; }
.marketing-hero-lead { max-width: 60ch; margin-bottom: 1.55rem; color: var(--kompass-body); font-size: clamp(1.05rem, 1.5vw, 1.2rem); font-weight: 400; line-height: 1.7; }
.marketing-hero-actions { gap: 14px; }
.marketing-trust-list { gap: 12px 22px; margin-top: 22px; color: var(--kompass-body); font-size: 14px; font-weight: 400; }
.marketing-trust-list li span { color: var(--kompass-action); }
.marketing-hero-note { max-width: 62ch; margin: 18px 0 0; color: var(--kompass-muted); font-size: 12.5px; line-height: 1.55; }
.marketing-product-stage { display: flex; min-height: 430px; align-items: center; perspective: none; }
.marketing-orbit, .portal-floating-card { display: none; }
.portal-preview {
  position: relative; top: auto; left: auto; width: 100%; overflow: hidden; border: 1px solid var(--kompass-border-light);
  border-radius: 22px; transform: none; background: #f7faff; color: var(--kompass-heading); box-shadow: var(--kompass-shadow-lg);
}
.portal-preview-header { border-bottom-color: var(--kompass-border); }
.portal-preview-dot { background: var(--kompass-action-light); box-shadow: inset 0 0 0 8px var(--kompass-action); }
.portal-live { border-color: #bfdaef; background: #eef8ff; color: var(--kompass-action-hover); }
.portal-live i { background: var(--kompass-action); }
.portal-score-ring { background: conic-gradient(var(--kompass-action) 82%, #e3ebf4 0); }
.portal-chart-line { stroke: var(--kompass-action); }
.portal-chart-point { fill: var(--kompass-action); }
.portal-action-icon { color: var(--kompass-action); }

.marketing-facts { border-color: var(--kompass-border-light); background: #fff; }
.marketing-facts-grid { padding-block: clamp(2.25rem, 3vw, 3rem); }
.marketing-facts-grid > div { min-height: 0; border: 0; padding: .7rem clamp(1rem, 2vw, 1.5rem); }
.marketing-facts-grid strong { color: var(--kompass-heading); font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 700; line-height: 1; }
.marketing-facts-grid span { max-width: 24ch; color: var(--kompass-body); font-size: 14.5px; font-weight: 400; line-height: 1.6; }

.company-trust-section { background: linear-gradient(180deg, #fff 0%, #f4f8ff 100%); }
.company-trust-grid { display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(320px, .86fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.company-trust-copy h2 { max-width: 12.5ch; margin: .9rem 0 1rem; color: var(--kompass-heading); font-size: clamp(2rem, 4.2vw, 3.15rem); font-weight: 640; line-height: 1.08; letter-spacing: 0; }
.company-trust-copy p { max-width: 72ch; color: var(--kompass-muted); font-size: 16px; line-height: 1.75; }
.company-trust-points { display: grid; gap: .8rem; margin: 1.45rem 0 0; padding: 0; list-style: none; }
.company-trust-points li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: .25rem .85rem; align-items: start; border-top: 1px solid var(--kompass-border); padding-top: .85rem; }
.company-trust-points li > span { grid-row: span 2; display: grid; width: 42px; height: 42px; place-items: center; border-radius: 9999px; background: var(--kompass-action-light); color: var(--kompass-action-hover); font-size: 13px; font-weight: 650; }
.company-trust-points strong { color: var(--kompass-heading); font-size: 16px; font-weight: 620; }
.company-trust-points small { color: var(--kompass-muted); font-size: 14px; line-height: 1.55; }
.company-experience-card { position: relative; overflow: hidden; border: 1px solid var(--kompass-border-light); border-radius: 22px; background: #fff; padding: clamp(1.5rem, 3vw, 2.5rem); box-shadow: var(--kompass-shadow-lg); }
.company-experience-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 8px; background: linear-gradient(90deg, var(--kompass-action), #75a8d6); }
.company-experience-card > span { color: var(--kompass-action-hover); font-size: 13px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.company-experience-card > strong { display: block; margin: 1rem 0 .3rem; color: var(--kompass-heading); font-size: clamp(3rem, 8vw, 5rem); font-weight: 700; line-height: .95; letter-spacing: 0; }
.company-experience-card h3 { margin: 0 0 .75rem; color: var(--kompass-heading); font-size: clamp(1.35rem, 2vw, 1.75rem); font-weight: 620; }
.company-experience-card p { color: var(--kompass-muted); font-size: 15px; line-height: 1.7; }
.company-experience-card div { margin-top: 1.2rem; border-top: 1px solid var(--kompass-border); padding-top: 1rem; color: var(--kompass-action-hover); font-size: 14px; font-weight: 600; }
.marketing-section { padding-block: clamp(2.25rem, 3vw, 3rem); }
.marketing-section-heading { align-items: end; gap: clamp(1.5rem, 4vw, 4rem); margin-bottom: clamp(1.5rem, 2.5vw, 2.4rem); }
.marketing-section-heading h2, .verification-copy h2, .intelligence-grid h2, .faq-grid h2 { max-width: 18ch; margin: 12px 0 0; color: var(--kompass-heading); font-size: clamp(1.6rem, 3.2vw, 2.1rem); font-weight: 700; line-height: 1.12; letter-spacing: 0; }
.marketing-section-heading p, .verification-copy > p, .intelligence-grid > div:last-child > p, .faq-grid > div:first-child > p { color: var(--kompass-body); font-size: 16px; font-weight: 400; line-height: 1.7; }
.marketing-overline { margin-bottom: 0; }
.benefit-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(.85rem, 1.5vw, 1.25rem); }
.benefit-card, .benefit-card-dark {
  min-height: 0; border: 1px solid var(--kompass-border-light); border-radius: 16px; background: #fff; color: var(--kompass-body);
  padding: clamp(1.15rem, 1.8vw, 1.5rem); box-shadow: var(--kompass-shadow-md); transition: transform .2s ease, box-shadow .2s ease;
}
.benefit-card:hover { transform: translateY(-4px); box-shadow: var(--kompass-shadow-lg); }
.benefit-card h3, .benefit-card-dark h3 { color: var(--kompass-heading); font-size: clamp(1.1rem, 1.6vw, 1.25rem); font-weight: 600; }
.benefit-card p, .benefit-card-dark p { color: var(--kompass-body); font-size: 14px; font-weight: 400; line-height: 1.6; }
.benefit-index { color: var(--kompass-action); font-size: 12px; font-weight: 600; }
.benefit-icon, .benefit-icon-blue, .benefit-icon-pink, .benefit-icon-ice { width: 48px; height: 48px; border-radius: 10px; background: var(--kompass-action); color: #fff; }
.benefit-card-dark .benefit-icon { background: var(--kompass-action); color: #fff; }
.benefit-visual, .approval-visual { border-color: var(--kompass-border); background: var(--kompass-bg); }
.mini-crawl-visual b, .approval-visual .is-done { color: var(--kompass-action-hover); }

.workflow-section { background: var(--kompass-bg-alt); color: var(--kompass-body); }
.marketing-section-heading-light h2, .marketing-section-heading-light p { color: var(--kompass-heading); }
.workflow-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(1rem, 2vw, 1.5rem); border: 0; }
.workflow-grid article {
  min-height: 0; border: 1px solid var(--kompass-border-light) !important; border-radius: 16px; background: #fff; padding: 1.8rem;
  color: var(--kompass-body); box-shadow: var(--kompass-shadow-md);
}
.workflow-number { color: var(--kompass-action); font-weight: 600; }
.workflow-icon { display: grid; width: 40px; height: 40px; place-items: center; margin: 1rem 0 1rem; border-radius: 9999px; background: var(--kompass-action); color: #fff !important; }
.workflow-grid h3 { color: var(--kompass-heading); font-weight: 600; }
.workflow-grid p { color: var(--kompass-body); font-size: 14px; font-weight: 400; line-height: 1.6; }
.workflow-grid small { position: static; display: block; margin-top: 1rem; color: var(--kompass-muted); font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.workflow-loop { display: none; }

.verification-section { background: #f4f8ff; }
.verification-grid, .intelligence-grid { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); }
.verification-copy h2 { margin-bottom: 1rem; }
.verification-tabs { border-color: var(--kompass-border); border-radius: 9999px; background: #fff; }
.verification-tabs button { min-height: 44px; border-radius: 9999px; color: var(--kompass-body); font-size: 14px; font-weight: 500; }
.verification-tabs button[aria-selected="true"] { background: var(--kompass-action); color: #fff; }
.verification-note { border-color: var(--kompass-border-light); border-radius: 16px; background: #fff; box-shadow: var(--kompass-shadow-md); }
.verification-note > span { background: var(--kompass-action-light); color: var(--kompass-action-hover); }
.verification-note p { color: var(--kompass-muted); }
.verification-note strong { color: var(--kompass-heading); font-weight: 600; }
.verification-console { border-color: var(--kompass-border-light); border-radius: 22px; background: #fff; color: var(--kompass-heading); box-shadow: var(--kompass-shadow-lg); }
.console-top { border-bottom-color: var(--kompass-border); background: #fff; }
.console-top i { background: #b8c8d9; }
.console-top i:first-child { background: var(--kompass-action); }
.console-top i:nth-child(2) { background: #6f9bc4; }
.console-top i:last-child { background: #9bb9d5; }
.console-top small, .console-path { color: var(--kompass-muted); }
.console-path b { color: var(--kompass-action); }
.console-body pre { border-color: #253d58; border-radius: 14px; background: var(--kompass-footer); color: #d9eaff; }
.console-checks { color: var(--kompass-muted); }
.console-checks i { color: var(--kompass-action); }
.console-body > button { border-radius: 9999px; background: var(--kompass-action); font-size: 15px; font-weight: 600; }

.intelligence-section { background: #fff; }
.intelligence-board { min-height: 450px; border-color: var(--kompass-border-light); border-radius: 22px; background: radial-gradient(circle at center, #eaf3ff 0, #f6f9ff 36%, #fff 70%); box-shadow: var(--kompass-shadow-lg); }
.intelligence-board::before { border-color: #cbdbea; animation: none; }
.intelligence-board svg { stroke: #c1d5e8; }
.intelligence-core { border-radius: 28px; background: var(--kompass-footer); box-shadow: var(--kompass-shadow-lg); }
.intelligence-core span { color: #9dcdff; }
.intelligence-node { border-color: var(--kompass-border); border-radius: 16px; box-shadow: var(--kompass-shadow-md); color: var(--kompass-muted); font-weight: 500; }
.intelligence-node i, .node-two i { color: var(--kompass-action); }
.intelligence-list li { border-color: var(--kompass-border); }
.intelligence-list > li > span { color: var(--kompass-action); font-weight: 600; }
.intelligence-list strong { color: var(--kompass-heading); font-weight: 600; }
.intelligence-list small { color: var(--kompass-muted); }

.pricing-section { background: var(--kompass-bg-alt); }
.pricing-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(1rem, 2vw, 1.5rem); max-width: none; }
.pricing-card { border-color: var(--kompass-border-light); border-radius: 16px; padding: clamp(1.4rem, 2.2vw, 2rem); box-shadow: var(--kompass-shadow-md); }
.pricing-card-recommended { border: 2px solid var(--kompass-action); box-shadow: var(--kompass-shadow-lg); }
.pricing-recommendation { top: 14px; left: clamp(1.4rem, 2.2vw, 2rem); transform: none; background: var(--kompass-action-light); color: var(--kompass-action-hover); font-size: 12px; font-weight: 600; }
.pricing-card-recommended .pricing-card-top { padding-top: 1.8rem; }
.pricing-card-top > span { color: var(--kompass-action-hover); font-size: 13px; font-weight: 600; }
.pricing-card h3 { margin: .55rem 0 .65rem; color: var(--kompass-heading); font-size: 1.35rem; font-weight: 600; letter-spacing: 0; }
.pricing-card-top p { min-height: 0; color: var(--kompass-muted); font-size: 14px; line-height: 1.6; }
.pricing-price > strong { color: var(--kompass-heading); font-size: clamp(2.25rem, 4vw, 2.8rem); font-weight: 700; letter-spacing: 0; }
.pricing-card ul { border-color: var(--kompass-border); color: var(--kompass-body); font-size: 14px; }
.pricing-card li span { color: var(--kompass-action); }

.faq-section { background: #fff; }
.faq-list { border-top-color: var(--kompass-border); }
.faq-list details { border-bottom-color: var(--kompass-border); }
.faq-list summary { min-height: 64px; color: var(--kompass-heading); font-size: 1.03rem; font-weight: 600; }
.faq-list summary span { border: 0; color: var(--kompass-action); font-size: 20px; font-weight: 400; }
.faq-list details p { color: var(--kompass-muted); font-size: 15px; line-height: 1.7; }

.marketing-final-cta { padding: 0; background: var(--kompass-footer); }
.marketing-final-card { width: min(1500px, 100%); margin: 0 auto; border-radius: 0; background: transparent; padding: clamp(3rem, 5vw, 4.5rem) clamp(1rem, 2.8vw, 3rem); box-shadow: none; }
.marketing-final-card::before { display: none; }
.marketing-final-card .marketing-overline { background: rgb(255 255 255 / 11%); color: #dce7f3; }
.marketing-final-card h2 { margin: 12px 0 .8rem; color: #fff; font-size: clamp(1.8rem, 3.2vw, 2.5rem); font-weight: 700; line-height: 1.12; letter-spacing: 0; }
.marketing-final-card p, .marketing-final-card small { color: #b8c9dd; }
.marketing-footer { margin-top: 0; background: var(--kompass-footer); color: #dce7f3; padding: 0 clamp(1rem, 2.8vw, 3rem) 1.5rem; }
.marketing-footer-grid { width: min(1500px, 100%); grid-template-columns: 1.4fr repeat(3, 1fr); gap: 36px; border-top: 1px solid #233b59; padding-top: clamp(3rem, 5vw, 4.5rem); }
.marketing-brand-footer .marketing-brand-copy strong { color: #fff; }
.marketing-brand-footer .marketing-brand-copy small { color: #dce7f3; }
.marketing-footer-grid > div:first-child p { color: #b8c9dd; font-size: 14px; }
.marketing-footer-grid > div > strong { color: #fff; font-size: 14px; font-weight: 600; }
.marketing-footer-grid a:not(.marketing-brand) { color: #b8c9dd; font-size: 14px; font-weight: 400; }
.marketing-footer-bottom { width: min(1500px, 100%); border-top-color: #233b59; color: #8da7c1; font-size: 12.5px; }

/* Authentication --------------------------------------------------------- */
.auth-body { display: flex; min-height: 100vh; flex-direction: column; background: var(--kompass-bg-alt); font-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.auth-header {
  position: relative; z-index: 20; display: flex; min-height: 78px; align-items: center; justify-content: space-between; gap: 1rem;
  border-bottom: 1px solid var(--kompass-border-light); background: rgb(255 255 255 / 94%); padding: 0 clamp(1rem, 2.8vw, 3rem);
  box-shadow: 0 1px 0 rgb(15 23 42 / 5%); backdrop-filter: blur(14px);
}
.auth-product-brand { display: inline-flex; align-items: center; gap: 12px; margin: 0; color: var(--kompass-heading); text-decoration: none; }
.auth-product-brand > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.auth-product-brand strong { color: var(--kompass-heading); font-size: 20px; font-weight: 650; line-height: 1; }
.auth-product-brand small { margin: 0; color: #4f6680; font-size: 13px; font-weight: 560; letter-spacing: 0; line-height: 1; text-transform: uppercase; }
.auth-home-link { color: var(--kompass-body); font-size: 15px; font-weight: 400; text-decoration: none; }
.auth-home-link:hover { color: var(--kompass-action); }
.auth-main { display: grid; min-height: calc(100vh - 78px); flex: 1; place-items: center; padding: clamp(.75rem, 2vw, 1.5rem) clamp(1rem, 2.8vw, 3rem); }
.auth-content-stack { display: grid; width: min(900px, 100%); justify-items: center; gap: 14px; }
.auth-card {
  width: min(520px, 100%); border: 1px solid var(--kompass-border-light); border-radius: 22px; background: #fff;
  padding: 34px; box-shadow: var(--kompass-shadow-lg);
}
.auth-card-wide { width: min(760px, 100%); }
.auth-card.legal-card { width: min(900px, 100%); }
.auth-card h1 { margin-bottom: .75rem; color: var(--kompass-heading); font-size: clamp(1.75rem, 3vw, 2.35rem); font-weight: 700; line-height: 1.12; letter-spacing: 0; }
.auth-card .lead { margin-bottom: 1.5rem; }
.auth-card .button-primary { width: 100%; }
.auth-plan-field { border-color: #bfdaf2; border-radius: 14px; background: #f0f6ff; }
.auth-account-cta { border-color: var(--kompass-border); }
.auth-footer { color: var(--kompass-muted); font-size: 13px; }
.auth-developer-proof { display: grid; width: min(620px, 100%); grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; border: 1px solid var(--kompass-border-light); border-radius: 16px; background: rgb(255 255 255 / 78%); padding: 12px 14px; box-shadow: var(--kompass-shadow-sm); }
.auth-developer-proof > span { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 9999px; background: var(--kompass-action-light); color: var(--kompass-action-hover); font-size: 18px; font-weight: 700; }
.auth-developer-proof p { margin: 0; color: var(--kompass-muted); font-size: 13.5px; line-height: 1.45; }
.auth-developer-proof strong, .auth-developer-proof small { display: block; }
.auth-developer-proof strong { color: var(--kompass-heading); font-weight: 620; }
.auth-developer-proof small { margin-top: 2px; font-size: 13px; }
.auth-legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; color: var(--kompass-muted); font-size: 13px; }
.auth-legal-links a { color: inherit; text-underline-offset: 3px; }
.auth-legal-links a:hover { color: var(--kompass-action); }

/* Customer portal and administration ------------------------------------ */
.app-body { background: #f5f8fb; color: #334155; font-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14.5px; line-height: 1.5; }
.app-body h1, .app-body h2, .app-body h3 { color: #17263a; letter-spacing: 0; line-height: 1.2; }
.app-body h1 { font-size: clamp(1.9rem, 2.6vw, 2.35rem); font-weight: 560; }
.app-body h2 { font-size: clamp(1.25rem, 1.8vw, 1.55rem); font-weight: 540; }
.app-body h3 { font-size: 1.05rem; font-weight: 540; }
.app-body strong, .app-body b { font-weight: 560; }
.app-shell { grid-template-columns: var(--sidebar-width) minmax(0, 1fr); grid-template-rows: var(--header-height) minmax(0, 1fr); }
.app-header {
  position: sticky; top: 0; z-index: 130; grid-column: 1 / -1; grid-row: 1; min-width: 0; min-height: var(--header-height);
  border-bottom-color: var(--kompass-border-light); background: rgb(255 255 255 / 96%); padding: 0 clamp(1rem, 2vw, 2rem);
  box-shadow: 0 1px 0 rgb(15 23 42 / 5%); backdrop-filter: blur(14px);
}
.app-header-brand { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 10px; color: var(--kompass-heading); text-decoration: none; }
.app-header-brand > span:last-child { display: flex; flex-direction: column; gap: 2px; line-height: 1; }
.app-header-brand strong { color: var(--kompass-heading); font-size: 17px; font-weight: 650; }
.app-header-brand small { color: #4f6680; font-size: 11px; font-weight: 560; text-transform: uppercase; }
.app-sidebar {
  position: sticky; top: var(--header-height); z-index: 120; grid-column: 1; grid-row: 2; height: calc(100vh - var(--header-height));
  overflow-y: auto; border-right: 1px solid var(--kompass-border); background: #eef5ff; color: var(--kompass-body);
  padding: 1rem .8rem; box-shadow: none;
}
.sidebar-brand { display: none; }
.app-nav { margin-top: 0; gap: .25rem; }
.nav-section { color: #6b7f94; font-size: 11px; font-weight: 600; letter-spacing: .08em; }
.app-nav a { min-height: 42px; border-radius: 10px; color: #334a5c; font-size: 14px; font-weight: 450; }
.app-nav a:hover { background: rgb(255 255 255 / 68%); color: var(--kompass-heading); }
.app-nav a[aria-current="page"] { background: #fff; color: var(--kompass-action-hover); font-weight: 560; box-shadow: var(--kompass-shadow-md); }
.app-nav a[aria-current="page"] .nav-icon { color: var(--kompass-action); }
.nav-icon { color: #5e7893; }
.context-picker { border-left: 1px solid var(--kompass-border); padding-left: 1rem; }
.context-picker strong { font-weight: 560; }
.search-input { min-height: 40px; background: #f6f9ff; }
.user-avatar { background: var(--kompass-action); font-weight: 600; }
.user-chip { color: var(--kompass-heading); }
.app-main { grid-column: 2; grid-row: 2; padding: clamp(1rem, 2.2vw, 2.25rem); }
.app-body.has-platform-banner .app-main { padding-top: clamp(1rem, 2.2vw, 2.25rem); }
.app-main > .platform-status-banner { width: 100%; margin: 0 0 1rem; }
.page-container { width: min(1600px, 100%); }
.page-heading { margin-bottom: 1.5rem; }
.page-heading h1 { margin-bottom: .35rem; }
.page-heading p { max-width: 72ch; color: var(--kompass-muted); line-height: 1.6; }
.panel, .metric-card { border: 1px solid var(--kompass-border-light); border-radius: 14px; background: #fff; box-shadow: var(--kompass-shadow-md); }
.panel { padding: clamp(.9rem, 1.5vw, 1.2rem); }
.panel-header { border-bottom-color: var(--kompass-border); }
.panel-header h2 { font-size: 1.08rem; font-weight: 560; }
.metric-value strong { font-weight: 560; }
.data-table { font-size: 13.5px; }
.data-table th { color: #52677c; font-weight: 560; }
.data-table td, .data-table th { border-color: #e3ebf3; }
.admin-inline-editor > summary { color: var(--kompass-action-hover); font-weight: 560; }
.admin-inline-editor > form { border-color: var(--kompass-border); border-radius: 14px; box-shadow: var(--kompass-shadow-lg); }
.admin-link-grid a { border-color: var(--kompass-border); border-radius: 12px; background: var(--kompass-bg-alt); color: var(--kompass-action-hover); font-weight: 560; }
.admin-control-row { border-bottom-color: var(--kompass-border); }
.admin-control-row select, .admin-control-row input { border-color: var(--kompass-border-strong); border-radius: 10px; }
.app-admin-body .status-badge[title="Installierte Softwareversion"] { border-color: #bfdaf2; background: #eef7ff; color: var(--kompass-action-hover); }

/* Installer -------------------------------------------------------------- */
.install-body { background: var(--kompass-bg-alt); font-family: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.install-header { max-width: 1500px; min-height: 78px; border-bottom-color: var(--kompass-border-light); background: rgb(255 255 255 / 80%); padding-inline: clamp(1rem, 2.8vw, 3rem); }
.install-shell { width: min(1320px, 100%); }
.install-intro h1 { color: var(--kompass-heading); font-size: clamp(2.1rem, 4.8vw, 3.1rem); font-weight: 700; }
.install-trust span { border-color: var(--kompass-border); background: #fff; color: var(--kompass-body); font-weight: 500; }
.install-panel, .success-panel { border-color: var(--kompass-border-light); border-radius: 16px; box-shadow: var(--kompass-shadow-md); }
.step-number { border: 0; background: var(--kompass-action); color: #fff; font-weight: 600; }
.check-item, .database-card { border-color: var(--kompass-border); border-radius: 14px; background: var(--kompass-bg); }
.install-submit { border-top-color: var(--kompass-border); }

/* Historische Marketing-Kompatibilitätsschicht · überschrieben durch marketing-modern.css */
.marketing-body {
  background: #f7fbff;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

.marketing-body *,
.auth-body * {
  text-shadow: none;
}

.marketing-header,
.marketing-header.is-scrolled,
.auth-header {
  border-bottom: 1px solid var(--kompass-border-strong);
  background: #fff;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.marketing-nav,
.marketing-header.menu-open .marketing-nav {
  border-color: var(--kompass-border-strong);
  border-radius: 4px;
  box-shadow: none;
  backdrop-filter: none;
}

.marketing-menu-button,
.marketing-kicker,
.marketing-button,
.marketing-login,
.benefit-card,
.workflow-grid article,
.pricing-card,
.verification-note,
.intelligence-board,
.intelligence-core,
.intelligence-node,
.auth-card,
.auth-developer-proof {
  box-shadow: none;
}

.marketing-hero {
  border-bottom: 1px solid var(--kompass-border-strong);
  background: #f7fbff;
}

.marketing-hero::before,
.workflow-section::before,
.marketing-button::before {
  display: none;
}

.marketing-hero-grid {
  grid-template-columns: minmax(0, .92fr) minmax(520px, 1.08fr);
  align-items: center;
}

.marketing-hero h1 {
  letter-spacing: -.035em;
}

.marketing-hero-lead,
.marketing-section-heading p,
.company-trust-copy p,
.faq-grid p {
  color: #34495f;
  font-weight: 400;
}

.marketing-kicker,
.marketing-button,
.verification-tabs,
.verification-tabs button,
.benefit-icon,
.workflow-number,
.pricing-recommendation {
  border-radius: 4px;
}

.marketing-button-primary:hover,
.benefit-card:hover {
  transform: none;
  box-shadow: none;
}

.marketing-button-outline,
.marketing-button-ghost,
.marketing-button-light {
  border-color: var(--kompass-border-strong);
}

.marketing-hero-photo,
.company-experience-photo,
.verification-photo {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--kompass-border-strong);
  border-radius: 4px;
  background: #fff;
  box-shadow: none;
}

.marketing-hero-photo img,
.company-experience-photo img,
.verification-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  filter: none;
}

.marketing-hero-photo figcaption,
.company-experience-photo figcaption,
.verification-photo figcaption {
  display: grid;
  gap: .35rem;
  border-top: 1px solid var(--kompass-border-strong);
  background: #fff;
  padding: 1rem 1.1rem;
  color: var(--kompass-body);
}

.marketing-hero-photo figcaption strong,
.company-experience-photo figcaption strong,
.verification-photo figcaption strong {
  color: var(--kompass-heading);
  font-size: 1rem;
  font-weight: 600;
}

.marketing-hero-photo figcaption span,
.verification-photo figcaption span,
.company-experience-photo figcaption small {
  color: #4a6076;
  font-size: .94rem;
  line-height: 1.55;
}

.company-experience-photo figcaption > span {
  color: var(--kompass-action-hover);
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.marketing-facts {
  border-block: 1px solid var(--kompass-border-strong);
  background: #fff;
}

.marketing-facts-grid > div,
.company-trust-points li,
.benefit-card,
.workflow-grid article,
.pricing-card,
.faq-list details,
.verification-note,
.auth-card,
.auth-developer-proof {
  border-color: var(--kompass-border-strong);
  border-radius: 4px;
}

.marketing-section {
  border-bottom: 1px solid var(--kompass-border);
  background: #fff;
}

.company-trust-section,
.marketing-intro-section,
.verification-section,
.faq-section {
  background: #fff;
}

.workflow-section,
.marketing-final-cta {
  background: #10243e;
}

.intelligence-section {
  background: #f7fbff;
}

.intelligence-board {
  border: 1px solid var(--kompass-border-strong);
  background: #fff;
}

.intelligence-board svg path {
  stroke: #9db8d2;
  stroke-width: 1.25;
}

.pricing-card-recommended {
  border: 2px solid var(--kompass-action);
}

.marketing-final-card {
  border-top: 1px solid rgb(151 184 213 / 40%);
}

.marketing-ready [data-reveal] {
  transition-duration: .16s;
}

/* Responsive parity with the reference --------------------------------- */
@media (max-width: 1320px) {
  .marketing-nav-actions { margin-left: auto; }
  .marketing-nav-actions .marketing-login, .marketing-nav-actions .marketing-button { display: none; }
  .marketing-menu-button { display: block; }
  .marketing-nav {
    position: absolute; top: calc(100% + 1px); right: clamp(1rem, 2.8vw, 3rem); left: clamp(1rem, 2.8vw, 3rem);
    display: grid; visibility: hidden; gap: 0; transform: translateY(-8px); border: 1px solid var(--kompass-border);
    border-radius: 16px; background: #fff; padding: .5rem 1rem 1rem; opacity: 0; box-shadow: var(--kompass-shadow-lg);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .marketing-header.menu-open .marketing-nav { visibility: visible; transform: none; opacity: 1; }
  .marketing-nav a:not(.marketing-button) { border-bottom: 1px solid #edf2f7; padding: 14px 0; font-size: 15px; }
  .marketing-nav a::after { display: none; }
  .marketing-mobile-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 14px; }
  .marketing-mobile-actions .marketing-button { display: inline-flex; width: 100%; padding-inline: 16px; }
}

@media (max-width: 1024px) {
  .marketing-hero-grid, .verification-grid, .intelligence-grid, .faq-grid { grid-template-columns: 1fr; }
  .company-trust-grid { grid-template-columns: 1fr; }
  .company-experience-card { width: min(760px, 100%); }
  .marketing-product-stage { order: -1; min-height: 0; }
  .marketing-hero-photo, .company-experience-photo, .verification-photo { width: min(760px, 100%); margin-inline: auto; }
  .portal-preview { width: min(760px, 100%); margin-inline: auto; }
  .marketing-hero-copy { max-width: 760px; }
  .marketing-section-heading { grid-template-columns: 1fr; align-items: start; }
  .verification-console, .intelligence-board { width: min(760px, 100%); }
  .marketing-footer-grid { grid-template-columns: 1fr 1fr; }

  .app-shell { display: block; min-height: 100vh; padding-top: 68px; }
  .app-header { position: fixed; inset: 0 0 auto; min-height: 68px; }
  .app-sidebar { position: fixed; inset: 68px auto 0 0; z-index: 140; width: min(300px, 88vw); height: calc(100vh - 68px); transform: translateX(-102%); box-shadow: var(--kompass-shadow-lg); }
  .app-sidebar[data-open="true"] { transform: translateX(0); }
  .sidebar-brand { display: none; }
  .app-main { padding: 1rem; }
  .mobile-nav-button { display: grid; }
}

@media (max-width: 760px) {
  .marketing-nav-shell, .auth-header { min-height: 68px; }
  .marketing-shell, .marketing-nav-shell { padding-inline: 8px; }
  .marketing-hero-grid { gap: 1.2rem; padding-block: clamp(2.2rem, 12vw, 3rem); }
  .marketing-hero h1 { font-size: 2.1rem; }
  .marketing-product-stage { margin-inline: 0; }
  .marketing-hero-photo img, .company-experience-photo img, .verification-photo img { aspect-ratio: 4 / 3; }
  .marketing-facts-grid { grid-template-columns: 1fr 1fr; padding-inline: 0; }
  .marketing-facts-grid > div { min-height: 120px; border-bottom: 1px solid var(--kompass-border); padding: 1rem; }
  .marketing-facts-grid > div:nth-child(odd) { border-left: 0; }
  .marketing-section { padding-block: clamp(2.2rem, 12vw, 3rem); }
  .benefit-card, .benefit-card-dark, .workflow-grid article, .pricing-card { padding: 1rem; }
  .marketing-final-card { grid-template-columns: 1fr; gap: 1.5rem; }
  .marketing-final-card > div:last-child { width: 100%; justify-items: stretch; }
  .marketing-final-card .marketing-button { width: 100%; }
  .marketing-footer-grid { grid-template-columns: 1fr; }
  .marketing-footer-grid > div:last-child { grid-column: auto; }

  .auth-header { padding-inline: 14px; }
  .auth-main { min-height: calc(100vh - 68px); padding: 16px 14px; }
  .auth-card { border-radius: 14px; padding: 20px 16px; }
  .auth-content-stack { gap: 12px; }
  .auth-product-brand strong { font-size: 18px; }
  .auth-product-brand small { font-size: 12px; }

  .app-header { gap: .45rem; padding-inline: 8px; }
  .app-header-brand > span:last-child, .context-picker, .header-search { display: none; }
  .header-actions { margin-left: auto; }
  .user-chip > span:last-child { display: none; }
  .page-heading { flex-direction: column; gap: .85rem; }
  .page-actions { width: 100%; justify-content: flex-start; }
  .admin-control-row { grid-template-columns: 1fr; align-items: stretch; }
  .admin-control-row .button { grid-column: 1; }
  .admin-link-grid, .form-grid-wide { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .marketing-mobile-actions { grid-template-columns: 1fr; }
  .marketing-hero-actions { display: grid; }
  .marketing-hero-actions .marketing-button { width: 100%; }
  .marketing-trust-list { display: grid; }
  .company-trust-points li { grid-template-columns: 1fr; }
  .company-trust-points li > span { grid-row: auto; }
  .auth-developer-proof { grid-template-columns: 1fr; text-align: left; }
  .portal-preview { height: 300px; }
  .portal-preview-body { display: block; }
  .portal-metrics { margin-top: .7rem; }
  .portal-chart-card, .portal-action-row { display: none; }
  .marketing-facts-grid { grid-template-columns: 1fr 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .verification-tabs { grid-template-columns: 1fr; border-radius: 16px; padding: 6px; }
  .verification-tabs button { border-radius: 10px; }
  .intelligence-board { min-height: 360px; }
  .console-checks { grid-template-columns: 1fr; }
  .marketing-footer-bottom { flex-direction: column; }
  .auth-home-link { display: none; }
  .two-columns, .check-grid, .success-grid { grid-template-columns: 1fr; }
  .install-body { padding-inline: .5rem; }
  .install-header { padding-inline: .5rem; }
  .install-intro, .install-submit, .success-actions { align-items: stretch; flex-direction: column; }
}

@media (max-width: 420px) {
  .marketing-brand-copy strong { font-size: 18px; }
  .marketing-brand-copy small { font-size: 12px; }
  .marketing-hero h1 { font-size: 2.1rem; }
  .marketing-facts-grid { grid-template-columns: 1fr; }
  .marketing-facts-grid > div { min-height: 0; }
  .intelligence-board { min-height: 330px; }
  .app-main { padding: .65rem; }
  .app-admin-body .status-badge[title="Installierte Softwareversion"] { max-width: 84px; overflow: hidden; text-overflow: ellipsis; }
  .header-actions { gap: .1rem; }
  .notification-link { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .marketing-ready [data-reveal] { opacity: 1; transform: none; }
}