/* Fluxward redesign layer · 24.09.2026 · the FluxDoc design language for the approved pages.
   Loaded after the page styles; each rule answers a finding of the masterplan. */
:root { --color-text-faint: #5b6f86; --color-text-muted: #52647a; }
/* Primary blue as in the logo, #1263FF (David, 24.09.2026). Unlayered, so it wins over @layer theme.
   Colours written as literal hex in the approved stylesheets stay #2563FF (visually almost identical). */
:root { --color-primary: #1263FF; --color-accent-deep: #1263FF; --color-info: #1263FF; --gradient-royal-start: #1263FF;
  --color-primary-soft-strong: rgba(18, 99, 255, 0.16); --color-primary-soft-border: rgba(18, 99, 255, 0.24); --color-primary-border: rgba(18, 99, 255, 0.24);
  --fw193-section-blue: #1263FF; --fw193-vis-blue: #1263FF; --tw-ring-color: #1263FF; }
.a96-page, .fw191-demo { --a-blue: #1263FF; }
[data-fw193-cr-root] { --fw193-cr-blue: #1263FF; }
.fw19-category[data-tone=umsetzung] { --fw19-tone: #1263FF; }
/* No decorative network behind the heroes (KI-Klischee, 38 pages). */
canvas.fw-net, .fw-net, .flux-grid { display: none !important; }
/* Headings: never hyphenated, medium weight, balanced lines, like FluxDoc. */
#main :is(h1, h2, h3) { -webkit-hyphens: manual !important; hyphens: manual !important; overflow-wrap: normal !important; word-break: normal !important; text-wrap: balance; }
#main :is(h1, h2) { font-weight: 600 !important; letter-spacing: -0.02em; }
/* Small print stays readable. */
#main :is(small, figcaption) { font-size: max(13px, 0.8125rem); }

/* FluxDoc band on task pages (replaces the robot film where documents are the task). */
.fw-rd-product { padding-block: clamp(48px, 7vw, 88px); background: #f6f8fc; border-block: 1px solid #e0e8f2; }
.fw-rd-product__inner { max-width: 1200px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 40px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.fw-rd-eyebrow { margin: 0 0 12px; font: 700 13px/1.2 "Plus Jakarta Sans Variable", "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #1a4fd6; }
.fw-rd-product h2 { margin: 0 0 16px; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.12; color: #0f1f38; }
.fw-rd-product__text > p:not([class]) { margin: 0; max-width: 34em; font-size: 17px; line-height: 1.6; color: #33475f; }
.fw-rd-product__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 28px 0 0; }
.fw-rd-button { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; background: #1263FF; color: #fff !important; font-weight: 650; text-decoration: none; transition: background-color .2s; }
.fw-rd-button:hover { background: #1a4fd6; }
.fw-rd-link { color: #1a4fd6 !important; font-weight: 650; text-decoration: underline; text-underline-offset: 4px; }
.fw-rd-product__visual { margin: 0; }
.fw-rd-product__visual img { display: block; width: 100%; max-width: 420px; height: auto; margin-inline: auto; border-radius: 20px; box-shadow: 0 1px 2px rgba(15, 31, 56, .05), 0 18px 44px -18px rgba(15, 31, 56, .22); }
.fw-rd-product__visual figcaption { margin-top: 12px; text-align: center; font-size: 13px; color: #5b6f86; }
@media (max-width: 820px) {
  .fw-rd-product__inner { grid-template-columns: 1fr; }
  .fw-rd-product__visual img { max-width: 320px; }
}
.fw-next a[data-fw-rd] { grid-column: 1 / -1; display: block; margin-top: 6px; }

/* Shared parts in the FluxDoc language: wrap, eyebrow, split section head, hero, facts, comparison table. */
.fw-rd-wrap { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); box-sizing: border-box; } /* same left edge as the approved sections */
.fw-rd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fw-rd-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(20px, 4vw, 64px); align-items: end; margin-bottom: clamp(28px, 4vw, 44px); }
.fw-rd-head h2 { margin: 0; font-size: clamp(28px, 2.7vw, 38px); line-height: 1.12; color: #0f1f38; text-align: left; }
.fw-rd-head > p { margin: 0; font-size: 17px; line-height: 1.6; color: #33475f; }

.fw-rd-hero { padding-block: clamp(40px, 6vw, 88px) clamp(40px, 6vw, 72px); background: linear-gradient(180deg, #f5f9ff 0%, #fff 100%); }
.fw-rd-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.fw-rd-hero h1 { margin: 0 0 20px; font-size: clamp(38px, 4.4vw, 62px); line-height: 1.04; letter-spacing: -0.025em; color: #0f1f38; text-align: left; }
.fw-rd-lead { margin: 0; max-width: 32em; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.6; color: #33475f; }
.fw-rd-facts { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 32px 0 0; padding: 20px 0 0; border-top: 1px solid #e0e8f2; list-style: none; font-size: 15px; color: #52647a; }
.fw-rd-facts li { margin: 0; }
.fw-rd-facts strong { color: #0f1f38; font-weight: 650; }
.fw-rd-hero__visual { margin: 0; }
.fw-rd-hero__visual img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 22px; box-shadow: 0 1px 2px rgba(15, 31, 56, .05), 0 18px 44px -18px rgba(15, 31, 56, .22); }
.fw-rd-hero__visual figcaption { margin-top: 10px; font-size: 13px; color: #5b6f86; text-align: right; }

.fw-rd-compare { padding-block: clamp(56px, 8vw, 104px); }
.fw-rd-table { border: 1px solid #e0e8f2; border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(15, 31, 56, .04), 0 18px 44px -28px rgba(15, 31, 56, .18); }
.fw-rd-table table { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.5; color: #33475f; }
.fw-rd-table thead th { padding: 14px 18px; background: #f6f8fc; border-bottom: 1px solid #e0e8f2; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #52647a; text-align: left; }
.fw-rd-table tbody th, .fw-rd-table td { padding: 16px 18px; border-bottom: 1px solid #edf2f8; text-align: left; vertical-align: top; }
.fw-rd-table tbody th[scope="row"] { width: 24%; font-weight: 650; }
.fw-rd-table tbody th a { color: #0f1f38; text-decoration: none; }
.fw-rd-table tbody th a span { color: #1263FF; }
.fw-rd-table tbody th a:hover { color: #1a4fd6; text-decoration: underline; text-underline-offset: 4px; }
.fw-rd-table td:last-child { font-weight: 650; color: #0f1f38; white-space: nowrap; }
.fw-rd-table td[data-label="Preis"] { white-space: normal; min-width: 11em; }
.fw-rd-table__group th { padding: 22px 18px 8px !important; border-bottom: 0 !important; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #1a4fd6; }
.fw-rd-table tbody:last-child tr:last-child > * { border-bottom: 0; }

@media (max-width: 900px) {
  .fw-rd-head, .fw-rd-hero__grid { grid-template-columns: 1fr; }
  .fw-rd-hero__visual { order: -1; }
  .fw-rd-hero__visual figcaption { text-align: left; }
  .fw-rd-table { border: 0; border-radius: 0; box-shadow: none; background: transparent; overflow: visible; }
  .fw-rd-table table, .fw-rd-table tbody, .fw-rd-table tr, .fw-rd-table th, .fw-rd-table td { display: block; width: auto !important; }
  .fw-rd-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .fw-rd-table tbody tr:not(.fw-rd-table__group) { margin-bottom: 12px; padding: 16px 18px; border: 1px solid #e0e8f2; border-radius: 16px; background: #fff; }
  .fw-rd-table tbody tr:not(.fw-rd-table__group) > * { padding: 4px 0; border: 0; }
  .fw-rd-table tbody th[scope="row"] { font-size: 17px; padding-bottom: 8px; }
  .fw-rd-table tbody th[scope="row"] a { display: inline-block; min-height: 44px; padding-block: 10px; }
  .fw-rd-table td::before { content: attr(data-label) ": "; font-weight: 650; color: #52647a; }
  .fw-rd-table td:last-child { white-space: normal; }
  .fw-rd-table__group th { padding: 20px 0 8px !important; }
}

/* Price staircase (/preise): rows rising from bottom left to top right; reading order stays first to last. */
.fw-rd-stairs { margin: 0; padding: clamp(18px, 2.4vw, 28px); border: 1px solid #e0e8f2; border-radius: 24px; background: #fff; box-shadow: 0 1px 2px rgba(15, 31, 56, .05), 0 18px 44px -18px rgba(15, 31, 56, .22); }
.fw-rd-stairs figcaption { margin: 0 0 14px; font-size: 13px; font-weight: 650; color: #52647a; }
.fw-rd-stairs ol { display: flex; flex-direction: column-reverse; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fw-rd-stairs li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 0 0 0 calc(var(--step) * 7%); padding: 12px 16px; border-radius: 14px; background: #eef3ff; border-left: 3px solid #1263FF; }
.fw-rd-stairs li:first-child { background: #e6f5ec; border-left-color: #11703a; }
.fw-rd-stairs__stage { font-size: 15px; font-weight: 650; color: #0f1f38; line-height: 1.3; }
.fw-rd-stairs__note { font-size: 13.5px; color: #52647a; line-height: 1.35; }
.fw-rd-stairs__price { order: 2; margin-left: auto; font: 650 17px/1.2 "DM Sans Variable", "DM Sans", system-ui, sans-serif; color: #0f1f38; white-space: nowrap; }
@media (max-width: 520px) { .fw-rd-stairs li { margin-left: calc(var(--step) * 3%); padding: 10px 12px; } }

/* Page heroes read from the left like FluxDoc (not the city pages with their own relief layout). */
#main .centered-page-hero__copy:not(:has(.fw-city-relief)) { max-width: 1272px !important; margin-inline: auto !important; padding-inline: 0; text-align: left !important; justify-items: start; }
#main .centered-page-hero__copy:not(:has(.fw-city-relief)) :is(.centered-page-hero__title, .centered-page-hero__lead, .centered-page-hero__eyebrow, .region-page__hero-note) { margin-left: 0 !important; margin-right: auto !important; text-align: left !important; }
#main .centered-page-hero__copy:not(:has(.fw-city-relief)) :is(.centered-page-hero__actions, .fw17-badge-row) { justify-content: flex-start !important; margin-left: 0 !important; }
#main .centered-page-hero__copy:not(:has(.fw-city-relief)) .centered-page-hero__lead { max-width: 40em; }
#main .centered-page-hero__title { max-width: 21ch; }

/* Section heads read from the left, aligned with the content below (FluxDoc). */
#main :is(.fw17-section-head, .services-vnext__section-head, .region-page__section-head, .use-case-page__section-head, .industry-page__section-head, .use-cases-hub__section-head, .industries-hub__section-head, .a96-section-head, .bx-section-head, .trust-page__head, .local-consulting__head, .blog-related__head, .about-reference__founders-copy) { margin-left: 0 !important; margin-right: auto !important; text-align: left !important; justify-items: start; }
#main :is(.fw17-section-head, .services-vnext__section-head, .region-page__section-head, .use-case-page__section-head, .industry-page__section-head, .use-cases-hub__section-head, .industries-hub__section-head, .a96-section-head, .bx-section-head, .trust-page__head, .local-consulting__head, .blog-related__head, .about-reference__founders-copy) :is(h2, p) { margin-left: 0 !important; text-align: left !important; }
#main .centered-page-hero :is(.fw-fit, .fw-who) { justify-content: flex-start !important; margin-left: 0 !important; }
#main .centered-page-hero [class*="hero-note"] { margin-left: 0 !important; justify-content: flex-start; text-align: left; }
/* Everything inside a page hero reads from the left (proof lines, process strips, notes). */
#main .centered-page-hero__copy:not(:has(.fw-city-relief)) :is(p, ul, ol, .process-grammar, [class*="hero-proof"], .fw-explain) { text-align: left !important; margin-left: 0 !important; justify-content: flex-start !important; }

/* Breadcrumbs: readable size and tap targets of at least 24 px (WCAG 2.5.8). */
#main .fw191-crumbs { font-size: 13px !important; }
#main .fw191-crumbs a { display: inline-flex; align-items: center; min-height: 24px; padding-block: 2px; color: #475569; }

/* Prüfrunde V2 (24.09.2026): findings of the Fluxward check on the approved pages. */
/* Agent demo: the sentence under „Ihr Vorteil“ stays visible on phones. */
@media (max-width: 700px) { #main .fw191-demo .a-benefit > strong { display: block !important; font-size: 14px; } }
/* KI-portrait captions. */
#main .fw-rd-ai { margin-top: 8px; font-size: 13px; color: #52647a; }
/* Prices: „Enthalten“ and „Nicht enthalten“ readable (6.1:1). */
#main .fw-price h4 { color: #52647a !important; font-size: 13px !important; }
/* Trust page: cards never wider than the screen; the incident card keeps its margin. */
@media (max-width: 700px) {
  #main .fw-may { grid-template-columns: minmax(0, 1fr) !important; }
  #main .fw-may li { overflow-wrap: anywhere; hyphens: auto; }
  #main .trust-page__incident-card { margin-inline: 16px !important; width: auto !important; }
}
/* About us: no imitation signatures (third font), heads from the left, the hero caption also on phones. */
#main .about-reference__name-marks { display: none !important; }
#main :is(.about-reference__story-card .ref-eyebrow, .about-reference__track-head) { text-align: left !important; justify-items: start !important; }
@media (max-width: 700px) { #main .about-reference__hero-photo figcaption { display: block !important; position: static !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; } }
/* Eyebrows at a readable size. */
#main .ref-eyebrow { font-size: 13px !important; }
/* Comparison table: link targets at least 24 px high. */
.fw-rd-table tbody th[scope="row"] a { display: inline-block; padding-block: 4px; }