:root {
  color-scheme: light;
  --saa-bg: #f7f9fb;
  --saa-surface: #ffffff;
  --saa-surface-soft: #f1f5f9;
  --saa-surface-muted: #e6e8ea;
  --saa-text: #191c1e;
  --saa-text-muted: #5d6673;
  --saa-border: #e2e8f0;
  --saa-graphite: #1e293b;
  --saa-navy: #1e3a8a;
  --saa-red: #d91e18;
  --saa-header-h: 84px;
  --saa-header-h-mobile: 76px;
}

body,
nav,
footer,
section,
.bento-cell {
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

html,
body,
button,
input,
textarea,
select,
.font-label-md,
.font-body-md,
.font-display-lg-mobile,
.font-headline-xl,
.font-headline-lg,
.font-display-lg,
.font-body-lg,
.font-label-sm,
[class*="font-"] {
  font-family: Inter, Arial, sans-serif !important;
}

/* v2: feiner Display-Titel — Inter 500 statt ehemals einer 340er Sonderschnitt-Ziffer (Plan Punkt 1/16) */
h1,
.font-display-lg,
.hero-scene__title,
.subpage-hero-scene h1,
.page-hero.page-hero--scene h1,
.page-title,
.contact-hero-copy h1 {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-optical-sizing: auto;
  font-weight: 500 !important;
}

/* v2: Lighten the rest of the heading scale — remove the "boldness" of the legacy site */
h2, h3, h4, h5, h6,
.font-headline-xl,
.font-headline-lg {
  font-weight: 500 !important;
}

.font-label-sm {
  font-weight: 600 !important;
}

.site-header {
  background: var(--saa-surface);
  border-bottom: 1px solid var(--saa-border);
  height: var(--saa-header-h);
  left: 0;
  min-height: var(--saa-header-h);
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 50;
}

.site-header__inner {
  align-items: center;
  column-gap: clamp(18px, 2.2vw, 34px);
  display: flex;
  min-height: var(--saa-header-h);
  position: relative;
  width: 100%;
}

.site-logo {
  align-items: center;
  display: inline-flex;
  flex: 0 0 clamp(150px, 12vw, 220px);
  height: 118px;
  max-width: 220px;
  min-width: 150px;
}

.site-logo__img {
  animation: saa-logo-enter 520ms ease both;
  display: block;
  height: auto;
  max-height: 116px;
  object-fit: contain;
  object-position: left center;
  transform-origin: left center;
  transition: transform 180ms ease, opacity 180ms ease;
  width: 100%;
}

.site-logo:hover .site-logo__img,
nav.fixed > a[aria-label="Swiss AI Agency Startseite"]:hover img {
  transform: scale(1.025);
}

.footer-logo {
  display: block;
  height: auto;
  margin-bottom: 24px;
  max-height: 74px;
  max-width: 320px;
  object-fit: contain;
  object-position: left center;
  width: 100%;
}

nav a[aria-label="Swiss AI Agency Startseite"] {
  width: clamp(150px, 12vw, 220px) !important;
}

nav a[aria-label="Swiss AI Agency Startseite"] img {
  max-height: 116px;
}

nav.fixed > a.block[aria-label="Swiss AI Agency Startseite"] {
  width: 460px !important;
}

nav.fixed > a.block[aria-label="Swiss AI Agency Startseite"] img {
  animation: saa-logo-enter 520ms ease both;
  max-height: 104px;
  transform-origin: left center;
  transition: transform 180ms ease, opacity 180ms ease;
}

nav.fixed > a.block[aria-label="Swiss AI Agency Startseite"]:hover img {
  transform: scale(1.025);
}

nav.fixed {
  gap: 24px;
  height: 108px !important;
  min-height: 108px;
}

body > nav.fixed:not(.site-header) + main {
  padding-top: 132px !important;
}

body > nav.fixed:not(.site-header) > .hidden.md\:flex {
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
}

body > nav.fixed:not(.site-header) > .flex.items-center {
  flex: 0 0 auto;
}

.site-nav-primary {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}

.site-nav-primary {
  gap: clamp(14px, 1.45vw, 26px);
  justify-content: center;
  min-height: 56px;
  padding-right: clamp(250px, 18vw, 340px);
  white-space: nowrap;
}

.site-nav-primary a {
  border-bottom: 2px solid transparent;
  color: var(--saa-text);
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.055em;
  line-height: 20px;
  padding: 28px 0 18px;
  text-decoration: none !important;
  text-transform: uppercase;
  transition: border-color 160ms ease, color 160ms ease;
}

.site-nav-primary a.is-active,
.site-nav-primary a:hover {
  border-color: var(--saa-red);
  color: var(--saa-red);
}

.site-main {
  margin-top: var(--saa-header-h);
  position: relative;
  isolation: isolate;
}

.site-bg-paths {
  inset: var(--saa-header-h) 0 0;
  opacity: 0.48;
  overflow: hidden;
  pointer-events: none;
  position: fixed;
  z-index: 2;
}

.site-bg-paths svg {
  height: 100%;
  min-width: 100%;
  shape-rendering: geometricPrecision;
  width: 100%;
}

.site-bg-paths::before,
.site-bg-paths::after {
  content: "";
  pointer-events: none;
  position: absolute;
}

.site-bg-paths::before {
  animation: siteBlueprintBreathe 8.8s ease-in-out infinite;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--saa-red) 88%, transparent), color-mix(in srgb, var(--saa-red) 18%, transparent)) 0 0 / 210px 2px no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--saa-red) 72%, transparent), color-mix(in srgb, var(--saa-red) 12%, transparent)) 0 0 / 2px 168px no-repeat,
    linear-gradient(90deg, color-mix(in srgb, var(--saa-border) 96%, transparent), color-mix(in srgb, var(--saa-border) 28%, transparent)) 0 168px / 320px 2px no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--saa-border) 92%, transparent), color-mix(in srgb, var(--saa-border) 18%, transparent)) 320px 168px / 2px 230px no-repeat,
    linear-gradient(90deg, color-mix(in srgb, var(--saa-border) 22%, transparent), color-mix(in srgb, var(--saa-red) 72%, transparent)) 146px 398px / 174px 2px no-repeat;
  height: 430px;
  left: clamp(18px, 4.8vw, 74px);
  top: clamp(430px, 46vh, 540px);
  width: 360px;
}

.site-bg-paths::after {
  animation: siteBlueprintSweep 6.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  background: color-mix(in srgb, var(--saa-red) 94%, white 6%);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--saa-red) 16%, transparent);
  height: 6px;
  left: clamp(18px, 4.8vw, 74px);
  top: clamp(598px, 63vh, 708px);
  width: 6px;
}

.site-bg-path {
  animation: sitePathBreathe 12s ease-in-out infinite;
  stroke: color-mix(in srgb, var(--saa-border) 78%, transparent);
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: 1;
}

.site-bg-path--primary {
  animation-delay: -2s;
  stroke: color-mix(in srgb, var(--saa-red) 18%, var(--saa-border));
}

.site-bg-path--secondary {
  animation-delay: -5s;
}

.site-bg-path--tertiary {
  animation-delay: -8s;
  stroke: color-mix(in srgb, var(--saa-navy) 22%, var(--saa-border));
}

.site-bg-path--vertical {
  animation-delay: -10s;
  stroke: color-mix(in srgb, var(--saa-red) 18%, var(--saa-border));
}

.site-bg-sweep {
  animation: siteProcessSweep 7.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--saa-red) 16%, transparent));
  stroke: color-mix(in srgb, var(--saa-red) 54%, transparent);
  stroke-dasharray: 92 980;
  stroke-dashoffset: 980;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: 1.5;
}

.site-bg-node {
  animation: siteNodePulse 5.6s ease-in-out infinite;
  fill: var(--saa-red);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--saa-red) 26%, transparent));
  opacity: 0.42;
  transform-box: fill-box;
  transform-origin: center;
}

.site-bg-node--two {
  animation-delay: 1.2s;
}

.site-bg-node--three {
  animation-delay: 2.4s;
}

.site-bg-node--four {
  animation-delay: 3.3s;
}

.site-main > section {
  position: relative;
}

.site-header__utility {
  align-items: flex-end;
  align-self: stretch;
  bottom: 0;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  position: absolute;
  right: clamp(28px, 5vw, 80px);
  top: 0;
}

.site-header__actions {
  align-items: center;
  display: flex;
  gap: 14px;
  justify-content: flex-end;
}

.site-header__cta {
  align-items: center;
  background: var(--saa-red);
  border-radius: 999px;
  box-shadow: 0 18px 44px color-mix(in srgb, var(--saa-red) 18%, transparent);
  color: #fff;
  display: inline-flex;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 600;
  justify-content: center;
  letter-spacing: 0.01em;
  line-height: 1.15;
  min-height: 52px;
  padding: 0 24px;
  text-decoration: none !important;
  white-space: nowrap;
}

.theme-toggle {
  align-items: center;
  border: 1px solid var(--saa-border);
  color: var(--saa-text);
  display: inline-flex;
  gap: 8px;
  height: 40px;
  justify-content: center;
  padding: 0 10px;
  text-transform: uppercase;
}

body > nav.fixed:not(.site-header) {
  background: var(--saa-surface) !important;
  border-bottom: 1px solid var(--saa-border) !important;
  color: var(--saa-text);
  gap: clamp(14px, 2vw, 30px) !important;
  justify-content: flex-start !important;
  min-height: 124px;
  overflow: hidden;
  padding: 0 clamp(28px, 5vw, 80px) !important;
}

body > nav.fixed:not(.site-header) > a[aria-label="Swiss AI Agency Startseite"],
body > nav.fixed:not(.site-header) > a.block {
  flex: 0 0 auto;
  margin-right: clamp(12px, 1.6vw, 26px);
  width: clamp(150px, 12vw, 220px) !important;
}

body > nav.fixed:not(.site-header) img {
  max-height: 82px;
  object-fit: contain;
}

body > nav.fixed:not(.site-header) > div.hidden {
  flex: 0 1 auto;
  gap: clamp(10px, 1.2vw, 20px) !important;
  justify-content: center;
  min-width: 0;
}

body > nav.fixed:not(.site-header) > .theme-toggle,
body > nav.fixed:not(.site-header) > div.flex {
  margin-left: auto;
}

body > nav.fixed:not(.site-header) a {
  font-weight: 500;
}

body > nav.fixed:not(.site-header) > div.hidden a {
  border-bottom: 2px solid transparent;
  color: var(--saa-text-muted) !important;
  font-size: 12px;
  letter-spacing: 0.02em;
  line-height: 18px;
  padding-bottom: 10px;
  text-transform: uppercase;
  white-space: nowrap;
}

body > nav.fixed:not(.site-header) > div.hidden a:hover,
body > nav.fixed:not(.site-header) > div.hidden a.text-primary,
body > nav.fixed:not(.site-header) > div.hidden a.border-primary {
  border-color: var(--saa-red) !important;
  color: var(--saa-red) !important;
}

body > nav.fixed:not(.site-header) > a.bg-primary,
body > nav.fixed:not(.site-header) > a.bg-swiss-red,
body > nav.fixed:not(.site-header) > div.flex > a.bg-swiss-red {
  background: var(--saa-red) !important;
  border-radius: 999px !important;
  box-shadow: 0 18px 44px color-mix(in srgb, var(--saa-red) 18%, transparent);
  color: #fff !important;
  display: inline-flex;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.15;
  min-height: 52px;
  padding: 0 24px !important;
  text-transform: none;
  white-space: nowrap;
}

.theme-toggle__icon {
  font-size: 18px;
  opacity: 0.55;
}

.theme-toggle__track {
  background: var(--saa-border);
  display: inline-block;
  height: 16px;
  position: relative;
  width: 32px;
}

.theme-toggle__track::after {
  background: var(--saa-red);
  content: "";
  height: 10px;
  left: 3px;
  position: absolute;
  top: 3px;
  transition: transform 180ms ease;
  width: 10px;
}

.saa-mobile-nav-toggle {
  align-items: center;
  border: 1px solid var(--saa-border);
  color: var(--saa-text);
  display: none;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.saa-mobile-nav-toggle .material-symbols-outlined {
  font-size: 24px;
}

[data-mobile-nav-panel] {
  transition: opacity 160ms ease, transform 160ms ease;
}

[data-logo-light][data-logo-dark].footer-logo {
  opacity: 1;
}

@keyframes saa-logo-enter {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.975);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Termin Agent visual correction pass - Unterseite only. */
.term-agent-page .site-header .theme-toggle {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.24) !important;
  color: #eff1f3 !important;
  min-width: 104px !important;
}

.term-agent-page .site-header .theme-toggle__track {
  background: rgba(239,241,243,.72) !important;
}

.term-agent-page .site-header .theme-toggle__icon {
  color: #eff1f3 !important;
  opacity: .78 !important;
}

.term-agent .term-hero {
  min-height: min(920px, calc(100vh - var(--saa-header-h))) !important;
  padding: clamp(82px, 8vw, 118px) 0 clamp(44px, 5vw, 70px) !important;
}

.term-agent .term-hero__background {
  inset: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  z-index: 0 !important;
}

.term-agent .term-hero__background img {
  height: 100% !important;
  object-fit: cover !important;
  object-position: 72% center !important;
  opacity: 1 !important;
  width: 100% !important;
}

.term-agent .term-hero__background::after {
  content: none !important;
  display: none !important;
}

.term-agent .term-hero::after {
  content: none !important;
  display: none !important;
}

.term-agent .term-hero__grid {
  align-items: center !important;
  grid-template-columns: minmax(360px, 520px) minmax(560px, 1fr) !important;
  min-height: 620px !important;
}

.term-agent .term-hero__copy {
  max-width: 520px !important;
}

.term-agent .term-hero h1 {
  font-size: clamp(42px, 3.8vw, 60px) !important;
  line-height: .98 !important;
  max-width: 520px !important;
}

.term-agent .term-hero__copy > p {
  color: rgba(239,241,243,.84) !important;
  max-width: 500px !important;
}

.term-agent .term-hero__visual {
  aspect-ratio: auto !important;
  background: transparent !important;
  border: 0 !important;
  bottom: clamp(42px, 5vw, 74px) !important;
  box-shadow: none !important;
  overflow: visible !important;
  position: absolute !important;
  right: clamp(80px, 8vw, 150px) !important;
  width: min(620px, 38vw) !important;
  z-index: 3 !important;
}

.term-agent .term-hero__visual img,
.term-agent .term-hero__visual::before,
.term-agent .term-hero__visual::after {
  display: none !important;
}

.term-agent .term-hero__visual figcaption {
  background: rgba(6,17,29,.76) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.24) !important;
  padding: 20px 24px !important;
  position: static !important;
}

.term-agent .term-hero__signals {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.term-agent .term-solution {
  background: #f3f6f9 !important;
}

.term-agent .term-section:not(.term-dark):not(.term-industries) h2,
.term-agent .term-section:not(.term-dark):not(.term-industries) h3,
.term-agent .term-section:not(.term-dark):not(.term-industries) strong,
.term-agent .term-section:not(.term-dark):not(.term-industries) summary {
  color: #111827 !important;
}

.term-agent .term-section:not(.term-dark):not(.term-industries) p,
.term-agent .term-section:not(.term-dark):not(.term-industries) li,
.term-agent .term-section:not(.term-dark):not(.term-industries) span:not(.material-symbols-outlined):not(.term-kicker) {
  color: #4b5563 !important;
}

.term-agent .term-section:not(.term-dark):not(.term-industries) .term-kicker,
.term-agent .term-section:not(.term-dark):not(.term-industries) .material-symbols-outlined {
  color: #ff302a !important;
}

.term-agent .term-flow-line article > span,
.term-agent .term-kpi-grid strong,
.term-agent .term-hero__signals strong {
  color: #ff302a !important;
}

.term-agent .term-solution__grid {
  align-items: stretch !important;
  grid-template-columns: minmax(360px, .78fr) minmax(560px, 1.22fr) !important;
}

.term-agent .term-solution {
  position: relative !important;
  overflow: hidden !important;
}

.term-agent .term-solution::before {
  background-image:
    linear-gradient(90deg, rgba(243,246,249,.96) 0%, rgba(243,246,249,.86) 35%, rgba(243,246,249,.18) 70%, rgba(243,246,249,.78) 100%),
    url("../assets/img/visuals/termin-agent-hero-technical-showcase-v1.png");
  background-position: center right;
  background-size: cover;
  content: "";
  inset: 0;
  opacity: .42;
  position: absolute;
  z-index: 0;
}

.term-agent .term-solution .term-container {
  position: relative !important;
  z-index: 1 !important;
}

.term-agent .term-showcase-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display: grid !important;
  min-height: 100% !important;
}

.term-agent .term-showcase-card img {
  aspect-ratio: 4 / 5 !important;
  border: 1px solid rgba(7,17,28,.18) !important;
  box-shadow: 0 32px 80px rgba(7,17,28,.2) !important;
  height: auto !important;
  justify-self: end !important;
  max-height: 760px !important;
  object-fit: cover !important;
  object-position: 58% center !important;
  width: min(520px, 100%) !important;
}

.term-agent .term-showcase-card figcaption {
  display: none !important;
}

.term-agent .term-feature-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.term-agent .term-feature {
  min-height: 300px !important;
}

.term-agent .term-feature--visual {
  grid-column: span 2 !important;
  grid-row: span 2 !important;
  padding: 0 !important;
}

.term-agent .term-feature--visual img {
  display: block !important;
  height: 100% !important;
  min-height: 620px !important;
  object-fit: cover !important;
  object-position: 54% center !important;
  width: 100% !important;
}

.term-agent .term-feature h3 {
  font-size: clamp(23px, 1.7vw, 30px) !important;
  overflow-wrap: anywhere !important;
}

.term-agent .term-feature p {
  color: #4b5563 !important;
  font-size: 16px !important;
  line-height: 1.62 !important;
}

.term-agent .term-feature--dark p {
  color: rgba(239,241,243,.82) !important;
}

.term-agent .term-feature--dark h3,
.term-agent .term-feature--dark .material-symbols-outlined {
  color: #fff !important;
}

.term-agent .term-feature--dark p {
  color: rgba(239,241,243,.82) !important;
}

.term-agent .term-feature--dark{
  background: #06111d !important;
  border-color: rgba(255,255,255,.18) !important;
}

.term-agent .term-feature--dark h3{
  color: #fff !important;
  opacity: 1 !important;
}

.term-agent .term-feature--dark p{
  color: rgba(239,241,243,.86) !important;
}

.term-agent .term-dark h2,
.term-agent .term-dark h3,
.term-agent .term-dark strong,
.term-agent .term-dark span,
.term-agent .term-dark summary {
  color: #fff !important;
}

.term-agent .term-dark p,
.term-agent .term-dark li {
  color: rgba(239,241,243,.82) !important;
}

.term-agent .term-industries {
  background: #06111d !important;
}

.term-agent .term-industries h2,
.term-agent .term-industries h3 {
  color: #fff !important;
}

.term-agent .term-industries p {
  color: rgba(239,241,243,.78) !important;
}

.term-agent .term-industry-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.term-agent .term-industry-grid article {
  background: rgba(255,255,255,.045) !important;
  border-color: rgba(255,255,255,.16) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.24) !important;
}

.term-agent .term-industry-grid img {
  aspect-ratio: 16 / 10 !important;
  filter: none !important;
  object-fit: cover !important;
}

.term-agent .term-faq summary {
  align-items: center !important;
  display: flex !important;
  gap: 20px !important;
  justify-content: space-between !important;
}

.term-agent .term-faq summary::after {
  content: "keyboard_arrow_down" !important;
  direction: ltr !important;
  display: inline-flex !important;
  flex: 0 0 28px !important;
  font-family: "Material Symbols Outlined" !important;
  font-size: 28px !important;
  font-style: normal !important;
  font-weight: normal !important;
  line-height: 1 !important;
  transition: transform .2s ease !important;
}

.term-agent .term-faq details[open] summary::after {
  content: "keyboard_arrow_down" !important;
  transform: rotate(180deg) !important;
}

.saa-cookie-banner {
  bottom: clamp(14px, 3vw, 28px) !important;
  left: clamp(14px, 4vw, 48px) !important;
  max-height: calc(100vh - 32px) !important;
  overflow: auto !important;
  position: fixed !important;
  right: clamp(14px, 4vw, 48px) !important;
  top: auto !important;
  transform: none !important;
  z-index: 70 !important;
}

@media (max-width: 1180px) {
  .term-agent .term-hero__grid,
  .term-agent .term-solution__grid {
    grid-template-columns: 1fr !important;
  }

  .term-agent .term-hero__visual {
    bottom: auto !important;
    position: relative !important;
    right: auto !important;
    width: 100% !important;
  }

  .term-agent .term-hero__visual img,
  .term-agent .term-hero__visual::after {
    display: block !important;
  }

  .term-agent .term-feature-grid,
  .term-agent .term-industry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  .term-agent .term-hero {
    min-height: 0 !important;
    padding-top: 70px !important;
  }

  .term-agent .term-hero__background img {
    object-position: 70% center !important;
    opacity: 1 !important;
  }

  .term-agent .term-hero h1 {
    font-size: clamp(33px, 8.7vw, 42px) !important;
    line-height: 1.04 !important;
  }

  .term-agent .term-hero__signals,
  .term-agent .term-feature-grid,
  .term-agent .term-industry-grid {
    grid-template-columns: 1fr !important;
  }

  .term-agent .term-feature--visual {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .term-agent .term-feature--visual img,
  .term-agent .term-showcase-card img {
    min-height: 360px !important;
  }

  .saa-cookie-banner {
    bottom: 10px !important;
    left: 10px !important;
    max-width: calc(var(--saig-vw) - 20px) !important;
    padding: 14px !important;
    right: 10px !important;
    top: auto !important;
  }
}

/* Homepage agent board layout. */
.home-page .home-agent-board {
  aspect-ratio: 16 / 10 !important;
  display: grid !important;
  gap: 20px !important;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 0.42fr) !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  min-height: 430px !important;
  padding: clamp(26px, 3vw, 38px) !important;
}

.home-page .home-agent-board::before,
.home-page .home-agent-board::after,
.home-page .home-agent-board .home-system-line,
.home-page .home-agent-board .home-system-core {
  display: none !important;
}

.home-page .home-agent-board__top {
  color: rgba(239, 241, 243, 0.58) !important;
  display: grid !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  gap: 12px !important;
  grid-column: 1 / -1 !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  letter-spacing: 0.12em !important;
  position: relative !important;
  text-transform: uppercase !important;
  z-index: 2 !important;
}

.home-page .home-agent-board__top span:nth-child(2) {
  color: var(--saa-red) !important;
}

.home-page .home-agent-board__flow {
  display: grid !important;
  gap: 14px !important;
  grid-column: 1 / -1 !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  height: 2px !important;
  position: relative !important;
  z-index: 2 !important;
}

.home-page .home-agent-board__flow span {
  background: linear-gradient(90deg, rgba(217, 30, 24, 0.2), rgba(217, 30, 24, 0.72), rgba(239, 241, 243, 0.1)) !important;
  display: block !important;
  height: 1px !important;
  overflow: hidden !important;
  position: relative !important;
}

.home-page .home-agent-board__flow span::after {
  animation: homeAgentSweep 2.8s linear infinite !important;
  background: var(--saa-red) !important;
  content: "" !important;
  height: 1px !important;
  left: 0 !important;
  position: absolute !important;
  top: 0 !important;
  width: 42px !important;
}

.home-page .home-agent-board__stack {
  display: grid !important;
  gap: 12px !important;
  min-width: 0 !important;
  position: relative !important;
  z-index: 2 !important;
}

.home-page .home-agent-card {
  align-items: center !important;
  animation: homeAgentCard 7.2s ease-in-out infinite !important;
  background: rgba(8, 24, 39, 0.76) !important;
  border: 1px solid rgba(239, 241, 243, 0.16) !important;
  display: grid !important;
  gap: 14px !important;
  grid-template-columns: 30px minmax(0, 1fr) auto !important;
  min-height: 78px !important;
  padding: 14px 16px !important;
}

.home-page .home-agent-card--active {
  background: rgba(217, 30, 24, 0.12) !important;
  border-color: rgba(217, 30, 24, 0.42) !important;
}

.home-page .home-agent-card .material-symbols-outlined {
  color: var(--saa-red) !important;
  font-size: 24px !important;
}

.home-page .home-agent-card strong {
  color: #fff !important;
  display: block !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  line-height: 1.18 !important;
}

.home-page .home-agent-card small {
  color: rgba(239, 241, 243, 0.62) !important;
  display: block !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 1.34 !important;
  margin-top: 3px !important;
}

.home-page .home-agent-board__result {
  align-self: stretch !important;
  background: linear-gradient(180deg, rgba(217, 30, 24, 0.16), rgba(8, 24, 39, 0.86)) !important;
  border: 1px solid rgba(217, 30, 24, 0.28) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  min-width: 0 !important;
  padding: 22px !important;
  position: relative !important;
  z-index: 2 !important;
}

.home-page .home-agent-board__result > .material-symbols-outlined {
  color: var(--saa-red) !important;
  font-size: 34px !important;
  margin-bottom: auto !important;
}

.home-page .home-agent-board__result strong {
  color: #fff !important;
  display: block !important;
  font-size: 24px !important;
  line-height: 1.08 !important;
}

.home-page .home-agent-board__result p {
  color: rgba(239, 241, 243, 0.68) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  margin-top: 12px !important;
}

.home-page .home-agent-board__result ul {
  display: grid !important;
  gap: 9px !important;
  list-style: none !important;
  margin: 20px 0 0 !important;
  padding: 0 !important;
}

.home-page .home-agent-board__result li {
  color: rgba(239, 241, 243, 0.72) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

.home-page .home-agent-board__result li::before {
  color: var(--saa-red) !important;
  content: "✓" !important;
  margin-right: 8px !important;
}

.home-page .home-trust-proof {
  background: #081827 !important;
  border: 1px solid rgba(239, 241, 243, 0.14) !important;
  box-shadow: 0 28px 88px rgba(0, 0, 0, 0.24) !important;
  overflow: hidden !important;
}

/* 13.09.: Bild sass ohne jeden Abstand an der oberen Kartenrundung
   (Rückmeldung Joshua) -- margin-top ergänzt, damit ein sichtbarer Rand
   zur Kartenkante bleibt. */
.home-page .home-trust-proof__media {
  aspect-ratio: 4 / 3 !important;
  background: #06111d !important;
  margin: clamp(20px, 2.4vw, 30px) 0 0 !important;
  overflow: hidden !important;
  position: relative !important;
}

.home-page .home-trust-proof__media::after {
  content: none !important;
  display: none !important;
}

.home-page .home-trust-proof__media img {
  display: block !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  width: 100% !important;
}

.home-page .home-trust-proof__body {
  padding: clamp(28px, 3vw, 38px) !important;
}

.home-page .home-trust-proof__body h3 {
  color: #fff !important;
  font-size: clamp(28px, 2.4vw, 38px) !important;
  font-weight: 850 !important;
  line-height: 1.08 !important;
  margin: 12px 0 0 !important;
}

.home-page .home-trust-proof__body p {
  color: rgba(239, 241, 243, 0.68) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  margin-top: 16px !important;
}

.home-page .home-trust-proof__metrics {
  border-top: 1px solid rgba(239, 241, 243, 0.14) !important;
  display: grid !important;
  gap: 18px !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  margin-top: 26px !important;
  padding-top: 20px !important;
}

.home-page .home-trust-proof__metrics strong,
.home-page .home-trust-proof__metrics small {
  display: block !important;
}

.home-page .home-trust-proof__metrics strong {
  color: #fff !important;
  font-size: 24px !important;
  /* 04.09.: Browser-Default fuer <strong> ist 700 -- verstiess gegen die
     Regel "keine Ueberschrift/Auszeichnung ueber Gewicht 500". */
  font-weight: 500 !important;
  line-height: 1 !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
}

.home-page .home-trust-proof__metrics small {
  color: rgba(239, 241, 243, 0.54) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.07em !important;
  margin-top: 8px !important;
  text-transform: uppercase !important;
}

@keyframes homeAgentSweep {
  from { left: -44px; opacity: 0; }
  16%, 80% { opacity: 1; }
  to { left: 100%; opacity: 0; }
}

@keyframes homeAgentCard {
  0%, 100% { transform: translateX(0); border-color: rgba(239, 241, 243, 0.16); }
  45%, 54% { transform: translateX(4px); border-color: rgba(217, 30, 24, 0.34); }
}

@media (max-width: 1024px) {
  .home-page .home-agent-board {
    aspect-ratio: auto !important;
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }
}

@media (max-width: 680px) {
  .home-page .home-agent-board__top,
  .home-page .home-agent-board__flow {
    display: none !important;
  }

  .home-page .home-agent-card {
    grid-template-columns: 28px minmax(0, 1fr) !important;
  }

  .home-page .home-trust-proof__metrics {
    grid-template-columns: 1fr !important;
  }
}

/* Homepage premium type and card overrides. */
@media (min-width: 1025px) {
  body:not(.term-agent-page) .font-display-lg,
  body:not(.term-agent-page) .text-display-lg,
  body:not(.term-agent-page) .text-display-lg-mobile,
  body:not(.term-agent-page) .text-headline-xl {
    font-size: clamp(34px, 3.2vw, 48px) !important;
    letter-spacing: 0 !important;
    line-height: 1.08 !important;
  }

  body:not(.term-agent-page) .text-headline-lg {
    font-size: clamp(24px, 2vw, 31px) !important;
    letter-spacing: 0 !important;
    line-height: 1.12 !important;
  }
}

body:not(.term-agent-page) .hero-scene__title {
  font-size: clamp(42px, 4.45vw, 64px) !important;
  line-height: 1.05 !important;
  max-width: 700px !important;
}

.home-page .hero-scene__secondary {
  background: transparent !important;
  border-color: rgba(239, 241, 243, 0.34) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.home-page .home-offer-card {
  border-left: 4px solid var(--saa-red) !important;
  box-shadow: 0 24px 70px rgba(7, 17, 28, 0.08) !important;
  justify-content: flex-start !important;
}

.home-page .home-offer-card.bg-graphite {
  background: #06111d !important;
  box-shadow: 0 28px 80px rgba(6, 17, 29, 0.24) !important;
}

.home-page .home-offer-card > div:last-child {
  margin-top: auto !important;
  padding-top: 22px !important;
}

.home-page .home-offer-card h3 {
  font-size: clamp(30px, 2.5vw, 40px) !important;
  font-weight: 850 !important;
}

.home-system-copy h2 {
  hyphens: none !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

@media (max-width: 680px) {
  body:not(.term-agent-page) .hero-scene__title {
    font-size: clamp(32px, 9.6vw, 42px) !important;
  }

  .home-system-copy h2 {
    font-size: clamp(30px, 8.2vw, 36px) !important;
    line-height: 1.08 !important;
  }
}

/* Homepage Agent Board and business proof correction. */
.home-page .home-agent-board {
  aspect-ratio: 16 / 10;
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 0.42fr);
  grid-template-rows: auto minmax(0, 1fr);
  padding: clamp(26px, 3vw, 38px);
}

.home-page .home-agent-board::before,
.home-page .home-agent-board::after,
.home-page .home-agent-board .home-system-line,
.home-page .home-agent-board .home-system-core {
  display: none !important;
}

.home-agent-board__top {
  color: rgba(239, 241, 243, 0.58);
  display: grid;
  font-size: 11px;
  font-weight: 850;
  gap: 12px;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  letter-spacing: 0.12em;
  position: relative;
  text-transform: uppercase;
  z-index: 2;
}

.home-agent-board__top span:nth-child(2) {
  color: var(--saa-red);
}

.home-agent-board__flow {
  align-items: center;
  display: grid;
  gap: 14px;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  height: 2px;
  position: relative;
  z-index: 2;
}

.home-agent-board__flow span {
  background: linear-gradient(90deg, rgba(217, 30, 24, 0.2), rgba(217, 30, 24, 0.72), rgba(239, 241, 243, 0.1));
  display: block;
  height: 1px;
  overflow: hidden;
  position: relative;
}

.home-agent-board__flow span::after {
  animation: homeAgentSweep 2.8s linear infinite;
  background: var(--saa-red);
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  top: 0;
  width: 42px;
}

.home-agent-board__stack {
  display: grid;
  gap: 12px;
  min-width: 0;
  position: relative;
  z-index: 2;
}

.home-agent-card {
  align-items: center;
  animation: homeAgentCard 7.2s ease-in-out infinite;
  background: rgba(8, 24, 39, 0.76);
  border: 1px solid rgba(239, 241, 243, 0.16);
  display: grid;
  gap: 14px;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  min-height: 78px;
  padding: 14px 16px;
}

.home-agent-card:nth-child(2) { animation-delay: 0.7s; }
.home-agent-card:nth-child(3) { animation-delay: 1.4s; }
.home-agent-card:nth-child(4) { animation-delay: 2.1s; }

.home-agent-card--active {
  background: rgba(217, 30, 24, 0.12);
  border-color: rgba(217, 30, 24, 0.42);
}

.home-agent-card .material-symbols-outlined {
  color: var(--saa-red);
  font-size: 24px;
}

.home-agent-card strong {
  color: #fff;
  display: block;
  font-size: 15px;
  font-weight: 850;
  line-height: 1.18;
}

.home-agent-card small {
  color: rgba(239, 241, 243, 0.62);
  display: block;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.34;
  margin-top: 3px;
}

.home-agent-board__result {
  align-self: stretch;
  background: linear-gradient(180deg, rgba(217, 30, 24, 0.16), rgba(8, 24, 39, 0.86));
  border: 1px solid rgba(217, 30, 24, 0.28);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  padding: 22px;
  position: relative;
  z-index: 2;
}

.home-agent-board__result > .material-symbols-outlined {
  color: var(--saa-red);
  font-size: 34px;
  margin-bottom: auto;
}

.home-agent-board__result strong {
  color: #fff;
  display: block;
  font-size: 24px;
  line-height: 1.08;
}

.home-agent-board__result p {
  color: rgba(239, 241, 243, 0.68);
  font-size: 14px;
  line-height: 1.5;
  margin-top: 12px;
}

.home-agent-board__result ul {
  display: grid;
  gap: 9px;
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}

.home-agent-board__result li {
  color: rgba(239, 241, 243, 0.72);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.home-agent-board__result li::before {
  color: var(--saa-red);
  content: "✓";
  margin-right: 8px;
}

.home-trust-proof {
  background: #081827;
  border: 1px solid rgba(239, 241, 243, 0.14);
  box-shadow: 0 28px 88px rgba(0, 0, 0, 0.24);
  overflow: hidden;
}

.home-trust-proof__media {
  aspect-ratio: 4 / 3;
  background: #06111d;
  margin: 0;
  overflow: hidden;
  position: relative;
}

.home-trust-proof__media::after {
  content: none;
  display: none;
}

.home-trust-proof__media img {
  display: block;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  width: 100%;
}

.home-trust-proof__body {
  padding: clamp(28px, 3vw, 38px);
}

.home-trust-proof__body h3 {
  color: #fff;
  font-size: clamp(28px, 2.4vw, 38px);
  font-weight: 850;
  line-height: 1.08;
  margin: 12px 0 0;
}

.home-trust-proof__body p {
  color: rgba(239, 241, 243, 0.68);
  font-size: 15px;
  line-height: 1.65;
  margin-top: 16px;
}

.home-trust-proof__metrics {
  border-top: 1px solid rgba(239, 241, 243, 0.14);
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: 26px;
  padding-top: 20px;
}

.home-trust-proof__metrics strong,
.home-trust-proof__metrics small {
  display: block;
}

.home-trust-proof__metrics strong {
  color: #fff;
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  overflow-wrap: break-word;
  hyphens: auto;
}

.home-trust-proof__metrics small {
  color: rgba(239, 241, 243, 0.54);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.07em;
  margin-top: 8px;
  text-transform: uppercase;
}

@keyframes homeAgentSweep {
  from { left: -44px; opacity: 0; }
  16%, 80% { opacity: 1; }
  to { left: 100%; opacity: 0; }
}

@keyframes homeAgentCard {
  0%, 100% { transform: translateX(0); border-color: rgba(239, 241, 243, 0.16); }
  45%, 54% { transform: translateX(4px); border-color: rgba(217, 30, 24, 0.34); }
}

@media (max-width: 1024px) {
  .home-page .home-agent-board {
    aspect-ratio: auto;
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .home-agent-board__result {
    min-height: 260px;
  }
}

@media (max-width: 680px) {
  .home-agent-board__top,
  .home-agent-board__flow {
    display: none;
  }

  .home-agent-card {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .home-agent-board__result {
    min-height: 0;
  }

  .home-trust-proof__metrics {
    grid-template-columns: 1fr;
  }
}

/* Tereza premium pass: calmer type scale and a stronger homepage system rhythm. */
@media (min-width: 1025px) {
  body:not(.term-agent-page) .font-display-lg,
  body:not(.term-agent-page) .text-display-lg,
  body:not(.term-agent-page) .text-display-lg-mobile,
  body:not(.term-agent-page) .text-headline-xl {
    font-size: clamp(34px, 3.2vw, 48px) !important;
    letter-spacing: 0 !important;
    line-height: 1.08 !important;
  }

  body:not(.term-agent-page) .text-headline-lg {
    font-size: clamp(24px, 2vw, 31px) !important;
    letter-spacing: 0 !important;
    line-height: 1.12 !important;
  }
}

body:not(.term-agent-page) .hero-scene__title {
  font-size: clamp(42px, 4.45vw, 64px) !important;
  line-height: 1.05 !important;
  max-width: 700px;
}

.home-page .hero-scene::before {
  background:
    linear-gradient(102deg, rgba(7, 17, 28, 0.88) 0%, rgba(7, 17, 28, 0.62) 31%, rgba(7, 17, 28, 0.18) 58%, transparent 76%),
    linear-gradient(180deg, rgba(7, 17, 28, 0.1) 0%, transparent 44%, rgba(247, 249, 251, 0.96) 100%) !important;
}

.home-page .hero-scene__copy {
  max-width: 540px;
}

.home-page .hero-scene__secondary {
  background: transparent !important;
  border-color: rgba(239, 241, 243, 0.34) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: 48px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.home-page .hero-scene__secondary:hover {
  background: transparent !important;
  border-color: var(--saa-red) !important;
  color: #fff !important;
}

.home-page .home-offer-card {
  border-left: 4px solid var(--saa-red) !important;
  box-shadow: 0 24px 70px rgba(7, 17, 28, 0.08);
  justify-content: flex-start !important;
}

.home-page .home-offer-card.bg-graphite {
  background: #06111d !important;
  box-shadow: 0 28px 80px rgba(6, 17, 29, 0.24);
}

.home-page .home-offer-card > div:last-child {
  margin-top: auto;
  padding-top: 22px;
}

.home-page .home-offer-card h3 {
  font-size: clamp(30px, 2.5vw, 40px) !important;
  font-weight: 850;
}

.home-page .home-offer-card .visual-media--tile {
  box-shadow: 0 14px 40px rgba(7, 17, 28, 0.1);
}

.home-system-section {
  background: #06111d;
  color: #eff1f3;
  overflow: hidden;
  padding-bottom: clamp(82px, 9vw, 128px);
  padding-top: clamp(82px, 9vw, 128px);
  position: relative;
}

.home-system-section::before {
  background:
    radial-gradient(circle at 76% 28%, rgba(217, 30, 24, 0.18), transparent 28%),
    linear-gradient(90deg, rgba(6, 17, 29, 0.98), rgba(6, 17, 29, 0.82) 48%, rgba(6, 17, 29, 0.96));
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.home-system-shell {
  align-items: center;
  display: grid;
  gap: clamp(38px, 5vw, 72px);
  grid-template-columns: minmax(0, 0.82fr) minmax(520px, 1.18fr);
  position: relative;
  z-index: 1;
}

.home-system-copy {
  border-left: 4px solid var(--saa-red);
  padding-left: clamp(24px, 3vw, 36px);
}

.home-system-copy h2 {
  color: #fff;
  margin-top: 18px;
  max-width: 620px;
  hyphens: none;
  overflow-wrap: normal !important;
  word-break: normal;
}

.home-system-copy p {
  color: rgba(239, 241, 243, 0.72);
  font-size: 17px;
  line-height: 1.7;
  margin-top: 22px;
  max-width: 560px;
}

.home-system-link {
  align-items: center;
  color: #fff;
  display: inline-flex;
  font-size: 13px;
  font-weight: 850;
  gap: 10px;
  letter-spacing: 0.04em;
  margin-top: 30px;
  text-decoration: none;
  text-transform: uppercase;
}

.home-system-link .material-symbols-outlined {
  color: var(--saa-red);
  font-size: 20px;
}

.home-system-map {
  aspect-ratio: 16 / 10;
  border: 1px solid rgba(239, 241, 243, 0.18);
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.28);
  min-height: 390px;
  overflow: hidden;
  position: relative;
}

.home-system-grid {
  background-image:
    linear-gradient(rgba(239, 241, 243, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(239, 241, 243, 0.07) 1px, transparent 1px);
  background-size: 32px 32px;
  inset: 0;
  opacity: 0.7;
  position: absolute;
}

.home-system-map::before,
.home-system-map::after {
  border: 1px solid rgba(217, 30, 24, 0.22);
  border-radius: 999px;
  content: "";
  inset: 18% 20%;
  position: absolute;
}

.home-system-map::after {
  animation: homeSystemPulse 5.2s ease-in-out infinite;
  border-color: rgba(217, 30, 24, 0.14);
  inset: 29% 33%;
}

.home-system-core {
  align-items: center;
  background: #07111c;
  border: 1px solid rgba(239, 241, 243, 0.22);
  box-shadow: 0 0 0 10px rgba(217, 30, 24, 0.06), 0 22px 56px rgba(0, 0, 0, 0.36);
  color: #fff;
  display: flex;
  font-size: 34px;
  font-weight: 900;
  height: 92px;
  justify-content: center;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 92px;
  z-index: 4;
}

.home-system-node {
  align-items: flex-start;
  animation: homeSystemFloat 6.2s ease-in-out infinite;
  background: rgba(8, 24, 39, 0.88);
  border: 1px solid rgba(239, 241, 243, 0.17);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.22);
  color: #fff;
  display: grid;
  gap: 2px 11px;
  grid-template-columns: 24px minmax(0, 1fr);
  min-width: 178px;
  padding: 15px 16px;
  position: absolute;
  z-index: 5;
}

.home-system-node .material-symbols-outlined {
  color: var(--saa-red);
  font-size: 22px;
  grid-row: span 2;
  line-height: 1;
}

.home-system-node strong {
  color: #fff;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.18;
}

.home-system-node small {
  color: rgba(239, 241, 243, 0.58);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.2;
}

.home-system-node--documents { left: 8%; top: 10%; }
.home-system-node--calendar { right: 8%; top: 11%; }
.home-system-node--data { right: 4%; top: 43%; }
.home-system-node--process { bottom: 10%; right: 13%; }
.home-system-node--call { left: 4%; top: 42%; }
.home-system-node--rooms { bottom: 10%; left: 13%; }

.home-system-line {
  background: var(--saa-red);
  height: 1px;
  left: 50%;
  opacity: 0.38;
  position: absolute;
  top: 50%;
  transform-origin: left center;
  z-index: 2;
}

.home-system-line::after {
  animation: homeSystemSignal 3s linear infinite;
  background: var(--saa-red);
  border-radius: 999px;
  content: "";
  height: 5px;
  position: absolute;
  top: -2px;
  width: 5px;
}

.home-system-line--documents { transform: rotate(214deg); width: 214px; }
.home-system-line--calendar { transform: rotate(327deg); width: 214px; }
.home-system-line--data { transform: rotate(0deg); width: 230px; }
.home-system-line--process { transform: rotate(38deg); width: 210px; }
.home-system-line--call { transform: rotate(180deg); width: 230px; }
.home-system-line--rooms { transform: rotate(145deg); width: 210px; }

.home-page .bento-cell {
  display: flex;
  gap: 22px;
}

.home-page .bento-cell h4 {
  font-size: clamp(26px, 2.15vw, 34px) !important;
  line-height: 1.1;
}

.home-page .bento-cell .visual-media--bento {
  margin-top: 4px;
}

@keyframes homeSystemFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes homeSystemPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}

@keyframes homeSystemSignal {
  from { left: 0; opacity: 0; }
  12%, 82% { opacity: 1; }
  to { left: 100%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .home-system-node,
  .home-system-map::after,
  .home-system-line::after {
    animation: none !important;
  }
}

/* Global system step 7: forms and footer. */
main :where(form, .contact-form, .contact-form-panel, .pa-form, .form-panel) {
  box-sizing: border-box !important;
}

main :where(label) {
  color: currentColor !important;
  display: inline-block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  margin-bottom: 8px !important;
}

main :where(input, select, textarea) {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(7, 17, 28, .24) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  color: #07111c !important;
  font: 500 16px/1.4 Inter, system-ui, sans-serif !important;
  min-height: 48px !important;
  padding: 10px 0 !important;
  width: 100% !important;
}

/* 2026-09-01, Website-Audit (a11y/focus-visible, WCAG 2.4.7):
   Die Regel darueber loescht den Fokusring JEDES Eingabefelds in <main> —
   unbedingt und mit !important, nicht nur im Fokuszustand. Einen Ersatz gibt
   es nur fuer .contact-field und .v2-contact-form__field; auf jedem anderen
   Feld war der Tastaturfokus damit unsichtbar.
   Diese Regel gibt ihn zurueck, ohne die Ruhedarstellung anzutasten.
   Spezifitaet bewusst niedrig gehalten (0,1,1): sie schlaegt die Basisregel
   oben (0,0,1), verliert aber gegen die ID-eskalierten Formularregeln der
   Kontakt- und Startseite — deren gestaltete Ringe bleiben also erhalten,
   statt dass sich zwei Fokusdarstellungen ueberlagern. */
main :where(input, select, textarea):focus-visible {
  outline: 2px solid var(--saa-red, #d91e18) !important;
  outline-offset: 2px !important;
}

main :where(input::placeholder, textarea::placeholder) {
  color: rgba(71, 85, 105, .72) !important;
}

main :where(input:focus, select:focus, textarea:focus) {
  border-bottom-color: var(--saa-red) !important;
  box-shadow: 0 1px 0 var(--saa-red) !important;
}

.saa-footer {
  background: #07111c !important;
  border-top: 1px solid rgba(239, 241, 243, .12) !important;
  color: #eff1f3 !important;
}

.saa-footer__inner,
.saa-footer__bottom {
  box-sizing: border-box !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: var(--saa-shell-max) !important;
  width: min(calc(100% - (var(--saa-shell-x-desktop) * 2)), var(--saa-shell-max)) !important;
}

.saa-footer a {
  color: rgba(239, 241, 243, .78) !important;
  text-decoration: none !important;
}

.saa-footer a:hover {
  color: #ffffff !important;
}

/* Theme contrast QA corrections. */
:root {
  --saa-cta-red-accessible: #d91e18;
}

:where(.site-header__cta, .hero-scene__primary, .btn-primary, .term-btn--primary, .usecase-overview__primary, .usecase-overview__cta-link, .contact-submit, .saa-contact-page button[type="submit"], .saa-cookie-banner__primary) {
  background: var(--saa-cta-red-accessible) !important;
  border-color: var(--saa-cta-red-accessible) !important;
  color: #ffffff !important;
}

:where(.site-header__cta, .hero-scene__primary, .btn-primary, .term-btn--primary, .usecase-overview__primary, .usecase-overview__cta-link, .contact-submit, .saa-contact-page button[type="submit"], .saa-cookie-banner__primary) :where(span, strong) {
  color: #ffffff !important;
}

.saa-mobile-nav-toggle,
.site-header .saa-mobile-nav-toggle,
button.saa-mobile-nav-toggle,
button[aria-label*="Navigation"] {
  background: var(--saa-cta-red-accessible) !important;
  border-color: var(--saa-cta-red-accessible) !important;
  color: #ffffff !important;
}

.saa-mobile-nav-toggle .material-symbols-outlined,
button[aria-label*="Navigation"] .material-symbols-outlined {
  color: #ffffff !important;
}

.saa-footer .saa-footer__cta,
.saa-footer .saa-footer__cta:visited {
  color: #ffffff !important;
}

html .site-nav-primary a.is-active,
html body > nav.fixed:not(.site-header) > div.hidden a.is-active {
  color: #d91e18 !important;
}

body.home-page .home-offer-card:not(.bg-graphite) h3 {
  color: #07111c !important;
}

.term-agent .term-feature--dark {
  background-color: #07111c !important;
}

.term-agent .term-feature--dark h3,
.term-agent .term-feature--dark p {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Final light-surface contrast contract 2026-06-27 */
body.page-shell main :where(
  .pa-intake__form-panel,
  .pa-card,
  .pa-decision-card,
  .pa-process-grid article,
  .pa-faq-list article,
  .contact-form-panel,
  .contact-process-panel,
  .contact-decision-item,
  .bg-white
) :where(h1, h2, h3, h4, h5, h6, label, summary, strong):not(.material-symbols-outlined):not(button):not(button *) {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

body.page-shell main :where(
  .pa-intake__form-panel,
  .pa-card,
  .pa-decision-card,
  .pa-process-grid article,
  .pa-faq-list article,
  .contact-form-panel,
  .contact-process-panel,
  .contact-decision-item,
  .bg-white
) :where(p, li, small, .contact-form-note, .contact-consent, .contact-consent span):not(.material-symbols-outlined):not(button):not(button *) {
  color: rgba(17, 24, 39, .68) !important;
  -webkit-text-fill-color: rgba(17, 24, 39, .68) !important;
}

body.page-shell main :where(
  .pa-intake__form-panel,
  .pa-card,
  .pa-decision-card,
  .pa-process-grid article,
  .pa-faq-list article,
  .contact-form-panel,
  .contact-process-panel,
  .contact-decision-item,
  .bg-white
) :where(.pa-eyebrow, .pa-card-number, .contact-kicker, a:not(.hero-scene__primary):not(.contact-submit):not(.site-header__cta)) {
  color: #d91e18 !important;
  -webkit-text-fill-color: #d91e18 !important;
}

body.page-shell main :where(.pa-intake__form-panel, .contact-form-panel) :where(input, select, textarea) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

body.page-shell main :where(.pa-intake__form-panel, .contact-form-panel) :where(input::placeholder, textarea::placeholder) {
  color: rgba(255, 255, 255, .62) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, .62) !important;
}

body.page-shell main :where(.pa-intake__form-panel, .contact-form-panel) :where(button, button *, .contact-submit, .contact-submit *) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Final physical EOF contrast lock 2026-06-27. */
.usecase-overview-page .usecase-map,
.usecase-overview-page .usecase-map__node,
.usecase-overview-page .usecase-map__core,
.usecase-overview-page .usecase-overview__visual {
  background-color: #07111c !important;
  color: #f7f9fb !important;
}

.usecase-overview-page .usecase-map :where(h1, h2, h3, h4, h5, h6, label, summary, strong, span:not(.material-symbols-outlined)),
.usecase-overview-page .usecase-map__node :where(h1, h2, h3, h4, h5, h6, label, summary, strong, span:not(.material-symbols-outlined)),
.usecase-overview-page .usecase-map__core :where(h1, h2, h3, h4, h5, h6, label, summary, strong, span:not(.material-symbols-outlined)) {
  color: #f7f9fb !important;
  -webkit-text-fill-color: #f7f9fb !important;
}

.usecase-overview-page .usecase-map :where(p, li, small, dd, .text-on-surface-variant, .text-surface-variant, .text-tertiary),
.usecase-overview-page .usecase-map__node :where(p, li, small, dd, .text-on-surface-variant, .text-surface-variant, .text-tertiary),
.usecase-overview-page .usecase-map__core :where(p, li, small, dd, .text-on-surface-variant, .text-surface-variant, .text-tertiary) {
  color: rgba(239, 241, 243, .86) !important;
  -webkit-text-fill-color: rgba(239, 241, 243, .86) !important;
}

.usecase-overview-page .usecase-map__node strong,
.usecase-overview-page .usecase-map__core strong {
  color: #f7f9fb !important;
  -webkit-text-fill-color: #f7f9fb !important;
}

.usecase-overview-page .usecase-map__node small,
.usecase-overview-page .usecase-map__core small {
  color: rgba(239, 241, 243, .86) !important;
  -webkit-text-fill-color: rgba(239, 241, 243, .86) !important;
}

.usecase-overview-page .usecase-map__node strong,
.usecase-overview-page .usecase-map__core strong {
  color: #f7f9fb !important;
  -webkit-text-fill-color: #f7f9fb !important;
}

.usecase-overview-page .usecase-map__node small,
.usecase-overview-page .usecase-map__core small {
  color: rgba(239, 241, 243, .86) !important;
  -webkit-text-fill-color: rgba(239, 241, 243, .86) !important;
}

/* EOF authoritative surface contrast repair 2026-06-27.
   Text follows the actual component surface, not the global page theme. */
:root {
  --saa-fixed-light-ink: #111827;
  --saa-fixed-light-muted: rgba(17, 24, 39, .72);
  --saa-fixed-dark-ink: #f7f9fb;
  --saa-fixed-dark-muted: rgba(239, 241, 243, .86);
}

:where(.bg-white, .saa-signal-card.bg-white, .wide-card.bg-white, details.bg-white, .process-card.bg-white) {
  background-color: #ffffff !important;
  color: var(--saa-fixed-light-ink) !important;
}

:where(.bg-white, .saa-signal-card.bg-white, .wide-card.bg-white, details.bg-white, .process-card.bg-white)
  :where(h1, h2, h3, h4, h5, h6, label, summary, strong, span:not(.material-symbols-outlined)):not(a):not(button):not(.site-header__cta *) {
  color: var(--saa-fixed-light-ink) !important;
  -webkit-text-fill-color: var(--saa-fixed-light-ink) !important;
}

:where(.bg-white, .saa-signal-card.bg-white, .wide-card.bg-white, details.bg-white, .process-card.bg-white)
  :where(p, li, small, dd, .text-on-surface-variant, .text-surface-variant, .text-tertiary):not(a):not(button) {
  color: var(--saa-fixed-light-muted) !important;
  -webkit-text-fill-color: var(--saa-fixed-light-muted) !important;
}

:where(.bg-graphite, .page-section--dark, .hero-scene, .usecase-overview__hero, .usecase-overview__visual, .usecase-map, .usecase-map__node, .usecase-map__core, .home-agent-board, .home-agent-card, .home-agent-board__result) {
  background-color: #07111c !important;
  color: var(--saa-fixed-dark-ink) !important;
}

:where(.bg-graphite, .page-section--dark, .hero-scene, .usecase-overview__hero, .usecase-overview__visual, .usecase-map, .usecase-map__node, .usecase-map__core, .home-agent-board, .home-agent-card, .home-agent-board__result)
  :where(h1, h2, h3, h4, h5, h6, label, summary, strong, span:not(.material-symbols-outlined)):not(a):not(button):not(.site-header__cta *) {
  color: var(--saa-fixed-dark-ink) !important;
  -webkit-text-fill-color: var(--saa-fixed-dark-ink) !important;
}

:where(.bg-graphite, .page-section--dark, .hero-scene, .usecase-overview__hero, .usecase-overview__visual, .usecase-map, .usecase-map__node, .usecase-map__core, .home-agent-board, .home-agent-card, .home-agent-board__result)
  :where(p, li, small, dd, .text-on-surface-variant, .text-surface-variant, .text-tertiary):not(a):not(button) {
  color: var(--saa-fixed-dark-muted) !important;
  -webkit-text-fill-color: var(--saa-fixed-dark-muted) !important;
}

body.contact-page-body main :where(.contact-form-panel, .contact-process-panel, .contact-step, .contact-decision-item, .contact-direct-item, .contact-status) :where(a:not(.contact-submit), .contact-kicker),
:where(.bg-white, .saa-signal-card.bg-white, .wide-card.bg-white, details.bg-white, .process-card.bg-white) :where(.material-symbols-outlined, .text-swiss-red, a:not(.contact-submit)),
:where(.bg-graphite, .page-section--dark, .hero-scene, .usecase-overview__hero, .usecase-overview__visual, .usecase-map, .usecase-map__node, .usecase-map__core, .home-agent-board, .home-agent-card, .home-agent-board__result) :where(.material-symbols-outlined, .text-swiss-red, a:not(.contact-submit)) {
  color: var(--saa-red) !important;
  -webkit-text-fill-color: var(--saa-red) !important;
}

:where(.site-header__cta, .site-header__cta *, .hero-scene__primary, .hero-scene__primary *, .btn-primary, .btn-primary *, .usecase-overview__primary, .usecase-overview__primary *, .contact-submit, .contact-submit *, .saa-cookie-banner__primary, .saa-cookie-banner__primary *) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.usecase-overview-page .usecase-map,
.usecase-overview-page .usecase-map__node,
.usecase-overview-page .usecase-map__core,
.usecase-overview-page .usecase-overview__visual {
  background-color: #07111c !important;
  color: var(--saa-fixed-dark-ink) !important;
}

.usecase-overview-page .usecase-map :where(h1, h2, h3, h4, h5, h6, label, summary, strong, span:not(.material-symbols-outlined)),
.usecase-overview-page .usecase-map__node :where(h1, h2, h3, h4, h5, h6, label, summary, strong, span:not(.material-symbols-outlined)),
.usecase-overview-page .usecase-map__core :where(h1, h2, h3, h4, h5, h6, label, summary, strong, span:not(.material-symbols-outlined)) {
  color: var(--saa-fixed-dark-ink) !important;
  -webkit-text-fill-color: var(--saa-fixed-dark-ink) !important;
}

.usecase-overview-page .usecase-map :where(p, li, small, dd, .text-on-surface-variant, .text-surface-variant, .text-tertiary),
.usecase-overview-page .usecase-map__node :where(p, li, small, dd, .text-on-surface-variant, .text-surface-variant, .text-tertiary),
.usecase-overview-page .usecase-map__core :where(p, li, small, dd, .text-on-surface-variant, .text-surface-variant, .text-tertiary) {
  color: var(--saa-fixed-dark-muted) !important;
  -webkit-text-fill-color: var(--saa-fixed-dark-muted) !important;
}

.term-agent .term-feature--dark p {
  color: rgba(239, 241, 243, .9) !important;
  -webkit-text-fill-color: rgba(239, 241, 243, .9) !important;
}

.saa-footer :is(h2, h6) {
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

.saa-footer p,
.saa-footer span {
  color: rgba(239, 241, 243, .72) !important;
}

@media (max-width: 1024px) {
  .saa-footer__inner,
  .saa-footer__bottom {
    width: min(calc(100% - (var(--saa-shell-x-tablet) * 2)), var(--saa-shell-max)) !important;
  }
}

@media (max-width: 640px) {
  .saa-footer__inner,
  .saa-footer__bottom {
    width: min(calc(100% - (var(--saa-shell-x-mobile) * 2)), var(--saa-shell-max)) !important;
  }
}

/* Final absolute header contrast guard. Keep this at the end. */
html .site-header,
html body > nav.fixed:not(.site-header) {
  background: #ffffff !important;
  color: #07111c !important;
}

html .site-header :where(a, button, span),
html body > nav.fixed:not(.site-header) :where(a, button, span) {
  color: #253142 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

html .site-header :where(a:hover, a.is-active),
html .site-nav-primary a.is-active,
html body > nav.fixed:not(.site-header) :where(a:hover, a.text-primary, a.border-primary) {
  color: var(--saa-red) !important;
}

html .site-header__cta,
html .site-header__cta *,
html body > nav.fixed:not(.site-header) a[href="potenzialanalyse.html"],
html body > nav.fixed:not(.site-header) a[href="potenzialanalyse.html"] * {
  color: #ffffff !important;
}

@media (max-width: 1100px) {
  .home-system-shell {
    grid-template-columns: 1fr;
  }

  .home-system-map {
    min-height: 420px;
  }
}

@media (max-width: 680px) {
  body:not(.term-agent-page) .hero-scene__title {
    font-size: clamp(32px, 9.6vw, 42px) !important;
  }

  .home-page .hero-scene__secondary {
    justify-content: center;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .home-system-section {
    padding-bottom: 64px;
    padding-top: 64px;
  }

  .home-system-copy {
    padding-left: 22px;
  }

  .home-system-copy p {
    font-size: 15px;
    line-height: 1.65;
  }

  .home-system-copy h2 {
    font-size: clamp(30px, 8.2vw, 36px) !important;
    line-height: 1.08 !important;
  }

  .home-system-map {
    aspect-ratio: auto;
    min-height: 0;
    padding: 24px;
  }

  .home-system-grid,
  .home-system-map::before,
  .home-system-map::after,
  .home-system-line {
    display: none;
  }

  .home-system-core {
    height: 72px;
    margin: 0 auto 18px;
    position: relative;
    transform: none;
    width: 72px;
    left: auto;
    top: auto;
  }

  .home-system-node {
    animation: none;
    margin-top: 10px;
    min-width: 0;
    position: relative;
    inset: auto;
  }

  .home-page .bento-cell h4 {
    font-size: clamp(25px, 7vw, 31px) !important;
  }
}

/* Termin Agent master v2: approved technical showcase direction. */
.term-agent {
  background: #f5f7fa;
}

.term-agent .term-section {
  background: #f5f7fa;
}

.term-agent .term-kicker,
.term-agent .term-backlink {
  color: #ff302a;
}

.term-agent .term-btn {
  border-radius: 0;
  transition: background .22s ease, border-color .22s ease, color .22s ease, transform .22s ease;
}

.term-agent .term-btn:hover {
  transform: translateY(-2px);
}

.term-agent .term-btn--primary {
  background: #ff302a;
  border-color: #ff302a;
  color: #fff;
}

.term-agent .term-btn--ghost {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.2);
  color: #fff;
}

.term-agent .term-signal-section {
  background: #06111d;
}

.term-agent .term-signal-section::before {
  background:
    radial-gradient(circle at 78% 18%, rgba(217,30,24,.24), transparent 30%),
    radial-gradient(circle at 12% 72%, rgba(45,212,191,.08), transparent 26%),
    linear-gradient(90deg, rgba(6,17,29,.98), rgba(6,17,29,.88) 48%, rgba(6,17,29,.96));
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.term-agent .term-signal-field {
  opacity: .38;
  z-index: 1;
}

.term-agent .term-signal-section .term-container {
  position: relative;
  z-index: 2;
}

.term-agent .term-hero {
  background: #06111d;
  color: #fff;
  min-height: clamp(760px, calc(100vh - var(--saa-header-h)), 1040px);
  overflow: hidden;
  padding: clamp(88px, 9vw, 132px) 0 clamp(66px, 8vw, 112px);
  position: relative;
}

.term-agent .term-hero::after {
  content: none;
  display: none;
}

.term-agent .term-hero__grid {
  align-items: center;
  display: grid;
  gap: clamp(28px, 4vw, 60px);
  grid-template-columns: minmax(0, .88fr) minmax(420px, 1.12fr);
  position: relative;
  z-index: 2;
}

.term-agent .term-hero h1,
.term-agent .term-hero h2,
.term-agent .term-hero h3 {
  color: #fff;
}

.term-agent .term-hero h1 {
  font-size: clamp(54px, 7vw, 104px);
  letter-spacing: 0;
  line-height: .92;
  max-width: 760px;
}

.term-agent .term-hero h1 span {
  color: #ff302a;
}

.term-agent .term-hero__copy > p {
  color: rgba(239,241,243,.82);
  font-size: clamp(18px, 1.35vw, 21px);
  max-width: 640px;
}

.term-agent .term-hero__signals div {
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.14);
  min-width: 168px;
}

.term-agent .term-hero__signals strong {
  color: #ff302a;
}

.term-agent .term-hero__signals span {
  color: rgba(239,241,243,.72);
}

.term-agent .term-hero__visual {
  aspect-ratio: 16 / 10.5;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 42px 110px rgba(0,0,0,.48), 0 0 0 1px rgba(217,30,24,.08);
  overflow: hidden;
}

.term-agent .term-hero__visual--showcase img {
  object-position: 58% center;
}

.term-agent .term-hero__visual figcaption {
  background: rgba(6,17,29,.78);
  backdrop-filter: blur(14px);
}

.term-agent .term-problem::after,
.term-agent .term-compare::after,
.term-agent .term-trust::after,
.term-agent .term-final::after {
  background: linear-gradient(90deg, rgba(6,17,29,.9), rgba(6,17,29,.62) 48%, rgba(6,17,29,.9));
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.term-agent .term-dark h2,
.term-agent .term-dark h3,
.term-agent .term-dark p {
  color: #fff;
}

.term-agent .term-dark p,
.term-agent .term-checklist li,
.term-agent .term-compare-grid li {
  color: rgba(239,241,243,.76);
}

.term-agent .term-loss-card {
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    rgba(255,255,255,.025);
  border-color: rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.term-agent .term-loss-card strong {
  color: #ff302a;
}

.term-agent .term-solution__grid,
.term-agent .term-integrations__grid,
.term-agent .term-implementation__grid {
  align-items: center;
  display: grid;
  gap: clamp(34px, 5vw, 72px);
  grid-template-columns: minmax(0, .92fr) minmax(360px, 1.08fr);
}

.term-agent .term-usecase-list {
  display: grid;
  gap: 14px;
  margin-top: 34px;
}

.term-agent .term-usecase-list article {
  align-items: flex-start;
  background: #fff;
  border: 1px solid rgba(7,17,28,.12);
  display: grid;
  gap: 8px 16px;
  grid-template-columns: 42px 1fr;
  padding: 22px;
}

.term-agent .term-usecase-list .material-symbols-outlined {
  align-items: center;
  background: #06111d;
  color: #ff302a;
  display: inline-flex;
  font-size: 24px;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.term-agent .term-usecase-list strong,
.term-agent .term-usecase-list p {
  grid-column: 2;
}

.term-agent .term-usecase-list strong {
  color: #111827;
  font-size: 18px;
}

.term-agent .term-usecase-list p {
  font-size: 15px;
  line-height: 1.55;
}

.term-agent .term-showcase-card {
  background: #06111d;
  border: 1px solid rgba(7,17,28,.14);
  box-shadow: 0 26px 70px rgba(7,17,28,.18);
  margin: 0;
  overflow: hidden;
}

.term-agent .term-showcase-card img {
  aspect-ratio: 16 / 10;
  display: block;
  object-fit: cover;
  width: 100%;
}

.term-agent .term-showcase-card figcaption {
  color: rgba(239,241,243,.76);
  font-size: 13px;
  line-height: 1.5;
  padding: 18px 22px 22px;
}

.term-agent .term-workflow {
  background: #fff;
}

.term-agent .term-flow-line {
  counter-reset: step;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  position: relative;
}

.term-agent .term-flow-line::before {
  background: linear-gradient(90deg, rgba(217,30,24,.12), rgba(217,30,24,.72), rgba(217,30,24,.12));
  content: "";
  height: 2px;
  left: 7%;
  position: absolute;
  right: 7%;
  top: 34px;
}

.term-agent .term-flow-line article {
  background: #fff;
  border: 1px solid rgba(7,17,28,.12);
  min-height: 268px;
  padding: 22px;
  position: relative;
  z-index: 1;
}

.term-agent .term-flow-line article > span {
  align-items: center;
  background: #fff;
  border: 1px solid rgba(217,30,24,.5);
  color: #ff302a;
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.term-agent .term-flow-line i {
  color: #ff302a;
  display: block;
  font-size: 34px;
  margin: 28px 0 18px;
}

.term-agent .term-flow-line h3 {
  font-size: 21px;
}

.term-agent .term-flow-line p {
  font-size: 15px;
  margin-top: 12px;
}

.term-agent .term-kpi-grid article,
.term-agent .term-feature,
.term-agent .term-industry-grid article,
.term-agent .term-logo-grid span,
.term-agent .term-faq details {
  border-color: rgba(7,17,28,.12);
  box-shadow: 0 18px 44px rgba(7,17,28,.06);
}

.term-agent .term-implementation__steps {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.term-agent .term-implementation__steps article {
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.14);
  padding: 24px;
}

.term-agent .term-implementation__steps strong {
  color: #ff302a;
  display: block;
  font-size: 13px;
  letter-spacing: .14em;
  margin-bottom: 22px;
}

.term-agent .term-implementation__steps span {
  color: #fff;
  display: block;
  font-size: 20px;
  font-weight: 500;
}

.term-agent .term-implementation__steps p {
  color: rgba(239,241,243,.72);
  font-size: 15px;
  margin-top: 10px;
}

.term-agent .term-feature-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.term-agent .term-feature {
  background: #fff;
}

.term-agent .term-feature--wide {
  grid-column: span 2;
}

.term-agent .term-feature--dark {
  background: #06111d;
}

.term-agent .term-feature--dark h3,
.term-agent .term-feature--dark p {
  color: #fff;
}

.term-agent .term-compare-grid article,
.term-agent .term-trust__grid article {
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.16);
  box-shadow: none;
}

.term-agent .term-industry-grid img {
  filter: none;
}

.term-agent .term-industries {
  background: #fff;
}

.term-agent .term-integrations__grid {
  grid-template-columns: minmax(0, .8fr) minmax(420px, 1.2fr);
}

.term-agent .term-integrations {
  text-align: left;
}

.term-agent .term-logo-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 0;
}

.term-agent .term-logo-grid span {
  background: #fff;
  color: #111827;
  min-height: 78px;
  padding: 14px;
}

.term-agent .term-faq__grid {
  display: grid;
  gap: 14px;
  margin: 0 auto;
  max-width: 920px;
}

.term-agent .term-faq details {
  background: #fff;
  border: 1px solid rgba(7,17,28,.12);
  padding: 0;
}

.term-agent .term-faq summary {
  color: #111827;
  cursor: pointer;
  font-size: 18px;
  font-weight: 500;
  list-style: none;
  padding: 22px 26px;
}

.term-agent .term-faq summary::-webkit-details-marker {
  display: none;
}

.term-agent .term-faq summary::after {
  color: #ff302a;
  content: "+";
  float: right;
  font-size: 24px;
  line-height: 1;
}

.term-agent .term-faq details[open] summary::after {
  content: "-";
}

.term-agent .term-faq details p {
  border-top: 1px solid rgba(7,17,28,.08);
  font-size: 16px;
  padding: 0 26px 24px;
}

.term-agent .term-final__panel {
  position: relative;
  z-index: 2;
}

@media (max-width: 1160px) {
  .term-agent .term-hero__grid,
  .term-agent .term-solution__grid,
  .term-agent .term-integrations__grid,
  .term-agent .term-implementation__grid {
    grid-template-columns: 1fr;
  }

  .term-agent .term-flow-line,
  .term-agent .term-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .term-agent .term-flow-line::before {
    display: none;
  }
}

@media (max-width: 768px) {
  .term-agent .term-hero {
    padding-top: 76px;
  }

  .term-agent .term-hero h1 {
    font-size: clamp(39px, 11.4vw, 58px) !important;
  }

  .term-agent .term-hero__actions,
  .term-agent .term-hero__signals {
    display: grid;
    grid-template-columns: 1fr;
  }

  .term-agent .term-hero__visual {
    aspect-ratio: 4 / 3;
  }

  .term-agent .term-hero__visual figcaption {
    left: 14px;
    right: 14px;
  }

  .term-agent .term-flow-line,
  .term-agent .term-kpi-grid,
  .term-agent .term-feature-grid,
  .term-agent .term-implementation__steps,
  .term-agent .term-compare-grid,
  .term-agent .term-industry-grid,
  .term-agent .term-trust__grid,
  .term-agent .term-logo-grid {
    grid-template-columns: 1fr;
  }

  .term-agent .term-feature--wide {
    grid-column: auto;
  }

  .term-agent .term-usecase-list article {
    grid-template-columns: 1fr;
  }

  .term-agent .term-usecase-list strong,
  .term-agent .term-usecase-list p {
    grid-column: auto;
  }

  .term-agent .term-loss-card strong {
    font-size: clamp(68px, 22vw, 96px);
  }
}

/* Termin Agent v2 QA corrections. */
.term-agent .term-backlink {
  display: flex;
  width: fit-content;
}

.term-agent .term-kicker {
  display: block;
}

.term-agent .term-hero__copy {
  max-width: 510px;
}

.term-agent .term-hero h1 {
  font-size: clamp(44px, 4.05vw, 62px) !important;
  max-width: 510px;
}

.term-agent .term-hero__visual--showcase img {
  object-position: 82% center;
}

.term-agent .term-hero__visual--showcase::before {
  background: linear-gradient(90deg, rgba(6,17,29,.72), transparent 34%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.term-agent .term-hero__visual figcaption {
  z-index: 3;
}

@media (min-width: 1160px) {
  .term-agent .term-hero__grid {
    grid-template-columns: minmax(0, .72fr) minmax(600px, 1.28fr);
  }
}

@media (max-width: 768px) {
  .term-agent .term-hero h1 {
    font-size: clamp(34px, 9.2vw, 44px) !important;
    overflow-wrap: anywhere !important;
  }

  .term-agent .term-hero__visual--showcase img {
    object-position: 68% center;
  }
}

/* Consent panel should not cover the mobile header or hero headline. */
.saa-cookie-banner {
  bottom: clamp(14px, 3vw, 28px) !important;
  left: clamp(14px, 4vw, 48px) !important;
  max-height: calc(100vh - 32px) !important;
  overflow: auto !important;
  position: fixed !important;
  right: clamp(14px, 4vw, 48px) !important;
  top: auto !important;
  z-index: 70 !important;
}

@media (max-width: 680px) {
  .saa-cookie-banner {
    bottom: 10px !important;
    left: 10px !important;
    max-width: calc(var(--saig-vw) - 20px) !important;
    padding: 14px !important;
    right: 10px !important;
  }

  .saa-cookie-banner h2 {
    font-size: 18px !important;
    line-height: 1.18 !important;
  }

  .saa-cookie-banner p {
    font-size: 13px !important;
    line-height: 1.35 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  .saa-cookie-banner button {
    min-height: 42px !important;
  }
}

/* Termin Agent compact responsive guard. */
@media (max-width: 680px) {
  .term-agent-page .site-nav-primary {
    display: none !important;
  }

  .term-agent-page .site-header__cta {
    display: none !important;
  }

  .term-agent-page .site-header__utility {
    margin-left: auto !important;
    min-width: 0 !important;
  }

  .term-agent-page .site-header__actions {
    flex-shrink: 0 !important;
  }

  .saa-cookie-banner__actions {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 680px) {
  .saa-cookie-banner__actions {
    grid-template-columns: 1fr !important;
  }
}

.visual-placeholder {
  box-sizing: border-box;
  position: relative;
  display: flex;
  min-height: 180px;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border: 1px solid var(--saa-border);
  background:
    linear-gradient(135deg, rgba(226, 0, 0, 0.14), transparent 32%),
    linear-gradient(315deg, rgba(0, 97, 255, 0.14), transparent 34%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.055) 0, rgba(0, 0, 0, 0.055) 1px, transparent 1px, transparent 44px),
    var(--saa-surface-alt);
  color: var(--saa-text);
  padding: 24px;
  isolation: isolate;
}

/* 12.09.: sichtbarer Rahmen (border) entfernt (Rückmeldung Joshua) --
   Bilder ausserhalb der Hero-Sections sollen keinen Border mehr haben. */
.visual-media {
  box-sizing: border-box;
  position: relative;
  display: block;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  overflow: hidden;
  background: var(--saa-surface-alt);
  color: var(--saa-text);
  isolation: isolate;
}

.visual-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.visual-media--hero {
  min-height: 520px;
  aspect-ratio: 16 / 10;
}

.visual-media--hero-bleed {
  min-height: 520px;
  aspect-ratio: 16 / 10;
}

.visual-media--wide {
  min-height: 320px;
  aspect-ratio: 21 / 9;
}

.visual-media--tile {
  height: 150px;
  min-height: 150px;
  margin-bottom: 24px;
}

.visual-media--bento {
  height: 170px;
  min-height: 140px;
  margin-top: 28px;
}

/* 12.09.: mehrere ältere Duplikat-Regeln setzen für die Bento-/Kachel-Bilder
   auf der Startseite weiterhin einen Border mit !important (gefunden bei
   der Border-Entfernung oben, Rückmeldung Joshua). Statt jede Kopie einzeln
   zu jagen: eine Regel mit derselben Spezifitätseskalation wie an anderen
   Stellen im Projekt (:not(#____never____)), die garantiert zuletzt gilt. */
html body.home-page .visual-media--bento:not(#____never____),
html body.home-page .visual-media--tile:not(#____never____) {
  border: 0 !important;
}

.visual-media--portrait {
  width: 170px;
  height: 170px;
  border-radius: 999px;
}

.visual-media--cta {
  min-height: 220px;
  aspect-ratio: 16 / 7;
}

/* 11.09.: Rückmeldung Joshua widerruft die 09.09.-Reduktion — Bild soll
   wieder deutlich grösser wirken. Auf 88% statt 62% angehoben, weiterhin
   zentriert. Nur ab 768px, auf Mobil bleibt die volle Spaltenbreite. */
@media (min-width: 768px) {
  .home-page [data-asset-slot="homepage.cta.contact"] {
    margin-inline: auto;
    max-width: 88%;
  }
}

.visual-media--rail {
  height: 100%;
  min-height: 100%;
}

.visual-media--dark {
  background: #050b12;
}

.visual-media--soft {
  background: var(--saa-surface);
}

.visual-media--focus-left img {
  object-position: left center;
}

.visual-media--focus-right img {
  object-position: right center;
}

.visual-media--focus-top img {
  object-position: center top;
}

.visual-media--focus-bottom img {
  object-position: center bottom;
}

.visual-system-note {
  border-left: 3px solid var(--saa-red);
  color: var(--saa-text-muted);
  font-size: 13px;
  line-height: 1.55;
  margin-top: 18px;
  max-width: 520px;
  padding-left: 14px;
}

.visual-hero {
  position: relative;
}

.visual-hero .visual-placeholder {
  transform: translateZ(0);
}

.visual-hero--split {
  isolation: isolate;
}

.visual-hero--split::before {
  background:
    linear-gradient(90deg, var(--saa-surface) 0%, rgba(247, 249, 251, 0.88) 38%, transparent 70%),
    linear-gradient(180deg, rgba(226, 0, 0, 0.06), transparent 42%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.visual-hero--dark::before {
  background:
    linear-gradient(90deg, rgba(5, 11, 18, 0.96) 0%, rgba(5, 11, 18, 0.84) 38%, rgba(5, 11, 18, 0.16) 72%),
    linear-gradient(180deg, rgba(226, 0, 0, 0.14), transparent 48%);
}

.subpage-main {
  margin-top: var(--saa-header-h);
  padding-top: 0;
}

.site-main:has(> .hero-scene--subpage) {
  margin-top: var(--saa-header-h);
}

.site-main:has(.page-hero--scene) {
  margin-top: 124px;
}

body > nav.fixed:not(.site-header) + .subpage-hero-scene {
  margin-top: var(--saa-header-h);
}

.visual-hero.subpage-hero-scene,
.page-hero.page-hero--scene {
  align-items: center;
  background:
    radial-gradient(circle at 74% 34%, rgba(30, 58, 138, 0.18) 0, transparent 34%),
    linear-gradient(135deg, #07111c 0%, #0b1724 46%, #0d2031 100%) !important;
  background-color: #07111c !important;
  isolation: isolate;
  margin-top: 0;
  min-height: clamp(700px, calc(100vh - 80px), 880px);
  overflow: hidden;
  padding: 0 clamp(20px, 5vw, 76px) !important;
  position: relative;
}

.visual-hero--split.subpage-hero-scene::before,
.page-hero.page-hero--scene::before {
  background:
    linear-gradient(102deg, rgba(7, 17, 28, 0.98) 0%, rgba(7, 17, 28, 0.9) 34%, rgba(7, 17, 28, 0.48) 56%, transparent 74%),
    linear-gradient(180deg, rgba(7, 17, 28, 0.26) 0%, transparent 44%, rgba(7, 17, 28, 0.66) 100%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.visual-hero.subpage-hero-scene::after,
.page-hero.page-hero--scene::after {
  background:
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--saa-surface) 72%, transparent)),
    linear-gradient(90deg, color-mix(in srgb, var(--saa-red) 52%, transparent) 0 2px, transparent 2px 100%);
  bottom: 0;
  content: "";
  height: 22%;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  z-index: 2;
}

.subpage-hero-scene > .swiss-grid,
.subpage-hero-scene > [class*="max-w"],
.page-hero.page-hero--scene {
  align-items: center;
  display: grid;
  gap: clamp(24px, 3vw, 48px);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  min-height: inherit;
  position: relative;
  width: 100%;
  z-index: 3;
}

.subpage-hero-scene > .swiss-grid > :first-child,
.subpage-hero-scene > [class*="max-w"] > :first-child,
.page-hero.page-hero--scene > :first-child {
  grid-column: auto !important;
  left: 0;
  max-width: min(760px, 54vw);
  position: absolute;
  top: clamp(96px, 14vh, 150px);
  width: min(760px, 54vw);
  z-index: 20 !important;
}

.subpage-hero-scene > .swiss-grid > :last-child,
.subpage-hero-scene > [class*="max-w"] > :last-child,
.page-hero.page-hero--scene > :last-child {
  position: static !important;
}

.subpage-hero-scene h1,
.page-hero.page-hero--scene h1 {
  color: #fff !important;
  font-size: clamp(42px, 4.7vw, 68px) !important;
  line-height: 1.02 !important;
  margin-bottom: 28px !important;
  max-width: 680px;
}

.subpage-hero-scene h1 .text-swiss-red,
.page-hero.page-hero--scene h1 .text-swiss-red {
  color: var(--saa-red) !important;
}

.subpage-hero-scene p,
.page-hero.page-hero--scene p {
  color: color-mix(in srgb, #fff 82%, transparent) !important;
  font-size: clamp(18px, 1.45vw, 21px) !important;
  line-height: 1.55 !important;
  max-width: 640px;
}

.subpage-hero-scene .visual-media,
.page-hero.page-hero--scene .visual-media,
.page-hero.page-hero--scene .visual-placeholder {
  border: 0;
  bottom: 0;
  clip-path: polygon(20% 0, 100% 0, 100% 100%, 5% 100%);
  height: auto;
  margin: 0;
  max-width: none;
  min-height: 0;
  position: absolute;
  right: calc(clamp(20px, 5vw, 76px) * -1);
  top: 0;
  width: min(88vw, 1680px);
  z-index: 1;
}

.subpage-hero-scene .visual-media img,
.page-hero.page-hero--scene .visual-media img {
  height: 100%;
  object-fit: cover;
  object-position: 68% center;
  transform: scale(1.025);
  width: 100%;
}

.subpage-hero-scene .flex.flex-wrap,
.subpage-hero-scene .flex.flex-col,
.page-hero.page-hero--scene .page-actions {
  position: relative;
  z-index: 4;
}

.page-hero:not(.page-hero--scene) {
  background:
    radial-gradient(circle at 82% 20%, rgba(30, 58, 138, 0.18), transparent 34%),
    linear-gradient(135deg, #07111c 0%, #0b1724 52%, #0d2031 100%);
  border-left: 2px solid var(--saa-red);
  color: #fff;
  margin-bottom: 0;
}

.page-hero:not(.page-hero--scene) .page-title,
.page-hero:not(.page-hero--scene) h1 {
  color: #fff;
}

.page-hero:not(.page-hero--scene) .page-copy,
.page-hero:not(.page-hero--scene) p {
  color: color-mix(in srgb, #fff 78%, transparent);
}

.page-hero:not(.page-hero--scene) .page-kicker {
  color: var(--saa-red);
}

.contact-main {
  padding-top: 124px;
}

.contact-form-shell > .contact-hero-scene {
  display: none;
}

.contact-hero-scene {
  background:
    linear-gradient(135deg, var(--saa-graphite), color-mix(in srgb, var(--saa-graphite) 76%, var(--saa-navy) 24%));
  border-left: 2px solid var(--saa-red);
  color: #fff;
  overflow: hidden;
  padding: clamp(36px, 6vw, 72px);
  position: relative;
}

.contact-hero-scene::after {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--saa-red) 72%, transparent), transparent) 0 0 / 190px 2px no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--saa-red) 46%, transparent), transparent) 0 0 / 2px 116px no-repeat,
    linear-gradient(90deg, color-mix(in srgb, var(--saa-border) 64%, transparent), transparent) 0 116px / 300px 1px no-repeat;
  content: "";
  height: 260px;
  opacity: 0.56;
  pointer-events: none;
  position: absolute;
  right: clamp(18px, 5vw, 70px);
  top: clamp(24px, 4vw, 52px);
  width: 340px;
}

.contact-hero-scene h1 {
  color: #fff;
  max-width: 920px;
}

.contact-hero-scene p {
  color: color-mix(in srgb, #fff 78%, transparent);
}

.visual-bleed {
  margin-right: calc((var(--saig-vw) - min(1280px, var(--saig-vw) - 40px)) / -2);
}

.visual-rail {
  align-self: stretch;
  min-height: 420px;
}

.visual-strip {
  margin: 48px 0 0;
}

.visual-bento {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.visual-bento > * {
  min-width: 0;
}

.visual-bento__wide {
  grid-column: span 7;
}

.visual-bento__narrow {
  grid-column: span 5;
}

.visual-bento__full {
  grid-column: 1 / -1;
}

.visual-slot-meta {
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  color: inherit;
  display: flex;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  gap: 8px;
  letter-spacing: 0.08em;
  margin-top: 18px;
  opacity: 0.72;
  padding-top: 12px;
  text-transform: uppercase;
}

.visual-slot-meta::before {
  background: var(--saa-red);
  content: "";
  display: inline-block;
  height: 7px;
  width: 7px;
}

.visual-placeholder::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(226, 0, 0, 0.24);
  pointer-events: none;
  z-index: -1;
}

.visual-placeholder::after {
  content: attr(data-asset-slot);
  position: absolute;
  top: 18px;
  right: 18px;
  color: var(--saa-text-muted);
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.visual-placeholder__label {
  color: var(--saa-red);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.visual-placeholder strong {
  font-size: 22px;
  line-height: 1.05;
  max-width: 360px;
}

.visual-placeholder small {
  color: var(--saa-text-muted);
  display: block;
  margin-top: 8px;
  max-width: 360px;
}

.visual-placeholder--hero {
  min-height: 100%;
  aspect-ratio: 16 / 10;
}

.visual-placeholder--hero-bleed {
  aspect-ratio: 16 / 10;
  min-height: 520px;
}

.visual-placeholder--wide {
  aspect-ratio: 21 / 9;
  min-height: 320px;
}

.visual-placeholder--tile {
  min-height: 150px;
  margin-bottom: 24px;
  padding: 18px;
}

.visual-placeholder--tile strong {
  font-size: 17px;
}

.visual-placeholder--bento {
  min-height: 140px;
  margin-top: 28px;
}

.visual-placeholder--portrait {
  align-items: center;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  justify-content: center;
  min-height: 170px;
  padding: 22px;
  text-align: center;
  width: 170px;
}

.visual-placeholder--cta {
  min-height: 220px;
}

.visual-placeholder--rail {
  min-height: 100%;
}

.visual-placeholder--dark {
  background:
    linear-gradient(135deg, rgba(226, 0, 0, 0.22), transparent 30%),
    linear-gradient(315deg, rgba(0, 214, 198, 0.14), transparent 38%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.055) 0, rgba(255, 255, 255, 0.055) 1px, transparent 1px, transparent 44px),
    #050b12;
  color: #fff;
}

.visual-placeholder--dark small {
  color: rgba(255, 255, 255, 0.68);
}

.visual-placeholder--soft {
  background:
    linear-gradient(135deg, rgba(226, 0, 0, 0.08), transparent 34%),
    linear-gradient(315deg, rgba(30, 58, 138, 0.08), transparent 36%),
    var(--saa-surface);
}

.visual-placeholder--process::before {
  border-color: rgba(0, 214, 198, 0.28);
  inset: 26px;
}

.video-placeholder {
  align-items: center;
  background:
    linear-gradient(135deg, rgba(226, 0, 0, 0.16), transparent 30%),
    linear-gradient(315deg, rgba(0, 97, 255, 0.13), transparent 38%),
    #050b12;
  border: 1px solid var(--saa-border);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 360px;
  padding: 40px;
  position: relative;
  text-align: center;
}

.video-placeholder .material-symbols-outlined {
  align-items: center;
  background: var(--saa-red);
  border-radius: 999px;
  display: flex;
  font-size: 42px;
  height: 84px;
  justify-content: center;
  margin-bottom: 24px;
  width: 84px;
}

.video-placeholder strong {
  font-size: 28px;
}

.video-placeholder small {
  color: rgba(255, 255, 255, 0.68);
  margin-top: 8px;
}

.homepage-video {
  aspect-ratio: 16 / 9;
  background: var(--saa-graphite);
  border: 1px solid var(--saa-border);
  overflow: hidden;
  position: relative;
  width: 100%;
}

.homepage-video video {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.process-card {
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

.process-card > *:not(.process-signal) {
  position: relative;
  z-index: 2;
}

.process-signal {
  height: 56px;
  opacity: 0.52;
  pointer-events: none;
  position: absolute;
  right: 28px;
  top: 24px;
  width: 112px;
  z-index: 1;
}

.process-signal::before,
.process-signal::after {
  content: "";
  position: absolute;
}

.process-signal::before {
  animation: processSignalSweep 5.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  background:
    linear-gradient(90deg, transparent 0 10px, color-mix(in srgb, var(--saa-red) 56%, transparent) 10px 46px, transparent 46px 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--saa-border) 78%, transparent), color-mix(in srgb, var(--saa-border) 24%, transparent));
  height: 1px;
  left: 0;
  top: 18px;
  width: 100%;
}

.process-signal::after {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--saa-border) 72%, transparent), transparent);
  height: 38px;
  right: 28px;
  top: 18px;
  width: 1px;
}

.process-signal span {
  animation: processSignalNode 5.8s ease-in-out infinite;
  background: var(--saa-red);
  border-radius: 999px;
  height: 5px;
  position: absolute;
  top: 16px;
  transform: scale(0.74);
  width: 5px;
}

.process-signal span:nth-child(1) {
  left: 8px;
}

.process-signal span:nth-child(2) {
  animation-delay: 0.9s;
  left: 48px;
}

.process-signal span:nth-child(3) {
  animation-delay: 1.8s;
  left: 82px;
  top: 44px;
}

.process-signal--dienste {
  opacity: 0.74;
}

.process-signal--bento {
  opacity: 0.4;
  right: 20px;
  top: 18px;
  transform: scale(0.86);
  transform-origin: top right;
}

.page-shell {
  background: var(--saa-bg);
  color: var(--saa-text);
}

.page-section {
  padding: 96px 80px;
}

.page-section--alt {
  background: var(--saa-surface-alt);
}

.page-section--dark {
  background: #050b12;
  color: #fff;
}

.page-container {
  margin: 0 auto;
  max-width: 1280px;
}

.page-hero {
  align-items: center;
  display: grid;
  gap: 56px;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.78fr);
  min-height: 620px;
  padding: 112px 80px 88px;
}

.page-kicker {
  color: var(--saa-red);
  display: block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.11em;
  margin-bottom: 18px;
  text-transform: uppercase;
}

.page-title {
  font-size: clamp(44px, 5vw, 76px);
  font-weight: 500;
  hyphens: auto;
  line-height: 1.05;
  max-width: 820px;
  overflow-wrap: break-word;
}

.page-copy {
  color: var(--saa-text-muted);
  font-size: 18px;
  line-height: 1.65;
  margin-top: 28px;
  max-width: 660px;
}

.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}

.btn-primary,
.btn-secondary {
  align-items: center;
  display: inline-flex;
  font-size: 13px;
  font-weight: 600;
  justify-content: center;
  letter-spacing: 0.05em;
  min-height: 48px;
  padding: 0 22px;
  text-transform: uppercase;
}

.btn-primary {
  background: var(--saa-red);
  color: #fff;
}

.btn-secondary {
  border: 1px solid var(--saa-border);
  color: var(--saa-text);
}

.section-heading {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 0.75fr) minmax(280px, 0.45fr);
  margin-bottom: 48px;
}

.section-heading h2 {
  font-size: clamp(32px, 3.2vw, 48px);
  font-weight: 650;
  line-height: 1.05;
}

.section-heading p {
  color: var(--saa-text-muted);
  line-height: 1.6;
}

.skeleton-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.skeleton-card {
  background: var(--saa-surface);
  border: 1px solid var(--saa-border);
  min-height: 220px;
  padding: 28px;
}

.skeleton-card--dark {
  background: #050b12;
  color: #fff;
}

.skeleton-card__number {
  color: var(--saa-red);
  display: block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 28px;
  font-weight: 500;
  margin-bottom: 22px;
}

.skeleton-card h3 {
  font-size: 24px;
  font-weight: 650;
  line-height: 1.15;
  margin-bottom: 12px;
}

.skeleton-card p,
.skeleton-list li {
  color: var(--saa-text-muted);
  line-height: 1.6;
}

.page-section--dark .skeleton-card p,
.page-section--dark .skeleton-list li,
.skeleton-card--dark p {
  color: rgba(255, 255, 255, 0.68);
}

.skeleton-list {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}

.skeleton-list li {
  border-top: 1px solid var(--saa-border);
  padding-top: 14px;
}

.wide-card {
  background: var(--saa-surface);
  border: 1px solid var(--saa-border);
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 0.9fr) minmax(260px, 0.6fr);
  padding: 32px;
}

.form-panel {
  background: var(--saa-surface);
  border: 1px solid var(--saa-border);
  padding: 32px;
}

.form-panel label {
  color: var(--saa-text-muted);
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.form-panel input,
.form-panel textarea,
.form-panel select {
  border: 1px solid var(--saa-border);
  margin-bottom: 18px;
  min-height: 48px;
  padding: 10px 12px;
  width: 100%;
}

.saa-footer {
  background: #07111c;
  color: #fff;
  /* 2026-08-04 (Block 4): frueher 80px festes Seitenpolster. Der Fussbereich
     hatte damit zwei Raender uebereinander — sein eigenes Polster und die
     Zentrierung von .saa-footer__inner — und sass darum als einziger
     Abschnitt systematisch weiter innen. Der Rand kommt jetzt allein aus
     dem Layout-Vertrag ueber .saa-footer__inner. */
  padding: 44px 0 34px;
}

.saa-footer__inner {
  display: grid;
  gap: 56px;
  grid-template-columns: minmax(280px, 1.4fr) minmax(160px, 0.8fr) minmax(160px, 0.8fr);
  margin: 0 auto;
  max-width: 1280px;
}

.saa-footer .footer-logo {
  filter: brightness(0) invert(1);
  margin-bottom: 30px;
  max-height: 96px;
  max-width: 390px;
}

.saa-footer p,
.saa-footer a {
  color: rgba(255, 255, 255, 0.78);
  font-size: 15px;
  line-height: 1.55;
}

.saa-footer__brand p {
  max-width: 380px;
}

.saa-footer :is(h2, h6) {
  color: var(--saa-red);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  margin-bottom: 22px;
  text-transform: uppercase;
}

.saa-footer a {
  display: block;
  margin-bottom: 13px;
  transition: color 160ms ease;
}

.saa-footer a:hover {
  color: #fff;
}

.saa-footer__contact {
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 26px;
}

.saa-footer__contact p {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
}

.saa-footer__contact .material-symbols-outlined {
  color: var(--saa-red);
  font-size: 20px;
}

.saa-footer__cta {
  color: #fff !important;
  font-weight: 500;
  margin-top: 18px;
}

.saa-footer__bottom {
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: grid;
  grid-template-columns: minmax(280px, 1.4fr) minmax(160px, 0.8fr) minmax(160px, 0.8fr);
  gap: 56px;
  margin: 28px auto 0;
  max-width: 1280px;
  padding-top: 24px;
}

.saa-footer__bottom span,
.saa-footer__bottom a {
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
}

.saa-footer__bottom span:last-child {
  text-align: left;
  justify-self: start;
}

.saa-footer__bottom nav {
  display: flex;
  gap: 20px;
}

.saa-footer__bottom a {
  margin-bottom: 0;
}

.saa-footer__proofs {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  gap: 28px;
  margin: 54px auto 0;
  max-width: 1280px;
  padding-top: 24px;
}

.saa-footer__proof {
  align-items: center;
  color: #fff;
  display: flex;
  gap: 12px;
  min-width: 0;
}

.saa-footer__proof .material-symbols-outlined {
  color: var(--saa-red);
  font-size: 20px;
}

.saa-footer__proof strong {
  color: rgba(255, 255, 255, 0.88);
  font-size: 14px;
  line-height: 1.35;
}

.saa-contact-redirect {
  background: var(--saa-surface);
  border: 1px solid var(--saa-border);
  padding: 34px;
}

.saa-contact-redirect__kicker {
  color: var(--saa-red);
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  margin-bottom: 14px;
  text-transform: uppercase;
}

.saa-contact-redirect h3 {
  color: var(--saa-text);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.15;
  margin-bottom: 14px;
}

.saa-contact-redirect p {
  color: var(--saa-text-muted);
  line-height: 1.6;
  margin-bottom: 22px;
}

.saa-contact-redirect a {
  color: var(--saa-red);
  font-weight: 500;
}

.saa-cookie-banner {
  align-items: center;
  background: #07111c;
  border: 1px solid rgba(255, 255, 255, 0.16);
  bottom: 24px;
  box-shadow: 0 24px 70px rgba(7, 17, 28, 0.28);
  color: #fff;
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1fr) auto;
  left: 50%;
  max-width: 1120px;
  padding: 26px 28px;
  position: fixed;
  transform: translateX(-50%);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
  width: calc(100% - 48px);
  z-index: 120;
}

.saa-cookie-banner.is-hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(12px);
  visibility: hidden;
}

.saa-cookie-banner__kicker {
  color: var(--saa-red);
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.saa-cookie-banner h2 {
  font-size: 22px;
  font-weight: 750;
  line-height: 1.15;
  margin-bottom: 8px;
}

.saa-cookie-banner p {
  color: rgba(255, 255, 255, 0.76);
  font-size: 15px;
  line-height: 1.55;
  max-width: 760px;
}

.saa-cookie-banner a {
  color: #fff;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.38);
  text-underline-offset: 3px;
}

.saa-cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}

.saa-cookie-banner button {
  align-items: center;
  display: inline-flex;
  font-size: 12px;
  font-weight: 600;
  justify-content: center;
  letter-spacing: 0.045em;
  min-height: 46px;
  padding: 0 18px;
  text-transform: uppercase;
  white-space: nowrap;
}

.saa-cookie-banner__primary {
  background: var(--saa-red);
  color: #fff;
}

.saa-cookie-banner__secondary {
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
}

@media (max-width: 900px) {
  .site-header {
    height: var(--saa-header-h-mobile);
    min-height: var(--saa-header-h-mobile);
  }

  .site-header__inner {
    display: flex;
    gap: 16px;
    justify-content: space-between;
    min-height: var(--saa-header-h-mobile);
  }

  .site-logo {
    max-width: 290px;
    min-width: 230px;
  }

  .site-logo__img {
    max-height: 68px;
  }

  .footer-logo {
    max-height: 58px;
    max-width: 260px;
  }

  .site-main {
    margin-top: var(--saa-header-h-mobile);
  }

  .site-nav-primary {
    display: none;
  }

  .saa-mobile-nav-toggle {
    display: inline-flex;
  }

  nav [data-mobile-nav-panel] {
    background: var(--saa-surface);
    border-bottom: 1px solid var(--saa-border);
    border-top: 1px solid var(--saa-border);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.14);
    display: none !important;
    flex-direction: column !important;
    gap: 0 !important;
    left: 0;
    padding: 14px 20px 18px;
    position: absolute;
    right: 0;
    top: 100%;
    width: 100%;
    z-index: 80;
  }

  nav.is-mobile-nav-open [data-mobile-nav-panel] {
    display: flex !important;
  }

  nav [data-mobile-nav-panel] a {
    border-bottom: 1px solid var(--saa-border);
    color: var(--saa-text) !important;
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 20px;
    padding: 14px 0;
    text-transform: uppercase;
  }

  nav [data-mobile-nav-panel] a:last-child {
    border-bottom: 0;
  }

  nav.fixed > a[aria-label="Swiss AI Agency Startseite"],
  nav.fixed > a.block {
    width: 250px !important;
  }

  nav.fixed > a[aria-label="Swiss AI Agency Startseite"] img,
  nav.fixed > a.block img {
    max-height: 64px;
  }

  nav.fixed {
    height: var(--saa-header-h-mobile) !important;
    min-height: var(--saa-header-h-mobile);
  }

  body > nav.fixed:not(.site-header) + main {
    padding-top: 0 !important;
  }

  nav.fixed > .site-header__cta,
  nav.fixed > a.bg-primary,
  nav.fixed > a.bg-swiss-red {
    display: none !important;
  }

  .site-header__actions .site-header__cta {
    display: none !important;
  }

  h1,
  h2,
  .section-heading h2 {
    hyphens: auto;
    overflow-wrap: break-word;
  }

  .theme-toggle {
    height: 36px;
    padding: 0 8px;
  }

  .page-section,
  .page-hero {
    padding-left: 20px;
    padding-right: 20px;
  }

  .page-section {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .page-hero {
    min-height: auto;
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .page-hero,
  .section-heading,
  .wide-card {
    grid-template-columns: 1fr;
  }

  .visual-hero--split::before {
    background: linear-gradient(180deg, var(--saa-surface) 0%, rgba(247, 249, 251, 0.92) 42%, transparent 100%);
  }

  .visual-bleed {
    margin-right: 0;
  }

  .visual-placeholder--hero-bleed,
  .visual-placeholder--wide,
  .visual-media--hero,
  .visual-media--hero-bleed,
  .visual-media--wide {
    min-height: 260px;
  }

  .visual-media--tile,
  .visual-media--bento {
    height: 180px;
  }

  .visual-bento {
    grid-template-columns: 1fr;
  }

  .visual-bento__wide,
  .visual-bento__narrow,
  .visual-bento__full {
    grid-column: auto;
  }

  .skeleton-grid {
    grid-template-columns: 1fr;
  }

  .skeleton-card,
  .visual-placeholder,
  .visual-media {
    grid-column: auto !important;
  }

  .saa-footer {
    /* 2026-08-04 (Block 4): ohne Seitenpolster, siehe oben. */
    padding: 56px 0 28px;
  }

  .saa-footer__inner {
    gap: 36px;
    grid-template-columns: 1fr;
  }

  .saa-footer .footer-logo {
    max-height: 74px;
    max-width: 300px;
  }

  .saa-footer__bottom {
    align-items: flex-start;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .saa-footer__bottom nav,
  .saa-footer__proofs {
    flex-direction: column;
    gap: 14px;
  }

  .saa-cookie-banner {
    align-items: stretch;
    bottom: 14px;
    gap: 20px;
    grid-template-columns: 1fr;
    padding: 22px;
    width: calc(100% - 28px);
  }

  .saa-cookie-banner__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .saa-cookie-banner button {
    width: 100%;
  }
}

@media (max-width: 1280px) and (min-width: 1025px) {
  .site-header__inner {
    grid-template-columns: minmax(320px, 420px) minmax(480px, 1fr) minmax(200px, 280px);
  }

  .site-logo {
    max-width: 440px;
    min-width: 320px;
  }

  nav a[aria-label="Swiss AI Agency Startseite"] {
    width: 380px !important;
  }

  nav.fixed > a.block[aria-label="Swiss AI Agency Startseite"] {
    width: 330px !important;
  }

  .site-nav-primary {
    gap: 14px;
  }

  .site-nav-primary a {
    font-size: 11px;
  }
}

@media (max-width: 520px) {
  .site-logo {
    max-width: 220px;
    min-width: 180px;
  }

  .site-logo__img {
    max-height: 58px;
  }

  nav.fixed > a[aria-label="Swiss AI Agency Startseite"],
  nav.fixed > a.block {
    width: 210px !important;
  }

  nav.fixed > a[aria-label="Swiss AI Agency Startseite"] img,
  nav.fixed > a.block img {
    max-height: 56px;
  }

  .theme-toggle {
    gap: 5px;
    width: 78px;
  }

  .theme-toggle__icon {
    font-size: 16px;
  }
}

/* Homepage: immersive first-screen scene */
.hero-scene {
  background:
    radial-gradient(circle at 74% 38%, color-mix(in srgb, var(--saa-navy) 14%, transparent) 0, transparent 32%),
    linear-gradient(135deg, var(--saa-graphite) 0%, color-mix(in srgb, var(--saa-graphite) 72%, var(--saa-navy) 28%) 44%, var(--saa-surface-soft) 100%);
  isolation: isolate;
  min-height: clamp(720px, calc(100svh - var(--saa-header-h)), 920px);
  overflow: hidden;
  padding: 0;
  position: relative;
}

.hero-scene--subpage {
  margin-top: 0;
}

body > nav.fixed:not(.site-header) + .hero-scene--subpage {
  margin-top: var(--saa-header-h);
}

.hero-scene::before {
  background:
    linear-gradient(102deg, color-mix(in srgb, var(--saa-graphite) 94%, transparent) 0%, color-mix(in srgb, var(--saa-graphite) 78%, transparent) 25%, color-mix(in srgb, var(--saa-graphite) 28%, transparent) 47%, transparent 68%),
    linear-gradient(180deg, color-mix(in srgb, var(--saa-graphite) 30%, transparent) 0%, transparent 42%, color-mix(in srgb, var(--saa-graphite) 72%, transparent) 100%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.hero-scene::after {
  background:
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--saa-surface) 88%, transparent)),
    linear-gradient(90deg, color-mix(in srgb, var(--saa-red) 62%, transparent) 0 2px, transparent 2px 100%);
  bottom: 0;
  content: "";
  height: 28%;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  z-index: 2;
}

.hero-scene__media {
  bottom: 0;
  clip-path: polygon(13% 0, 100% 0, 100% 100%, 0 100%);
  margin: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  width: min(88vw, 1680px);
  z-index: 0;
}

.hero-scene__media img {
  filter: saturate(0.98) contrast(1.04);
  height: 100%;
  object-fit: cover;
  object-position: 68% center;
  transform: scale(1.025);
  width: 100%;
}

.hero-scene__media[data-asset-slot="wissen.hero"] img {
  object-position: 58% top;
}

.hero-scene__media[data-asset-slot="beratung.hero"] img,
.hero-scene__media[data-asset-slot="academy.hero"] img,
.hero-scene__media[data-asset-slot="about.hero"] img {
  object-position: 62% top;
}

.hero-scene__media[data-asset-slot="loesungen.hero"] img {
  object-position: 70% center;
}

.hero-scene__media[data-asset-slot="dienste.hero"] img,
.hero-scene__media[data-asset-slot="homepage.hero"] img {
  object-position: 68% center;
}

.hero-scene__media::after {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--saa-graphite) 72%, transparent) 0%, color-mix(in srgb, var(--saa-graphite) 12%, transparent) 32%, transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--saa-graphite) 18%, transparent) 0%, transparent 48%, color-mix(in srgb, var(--saa-graphite) 44%, transparent) 100%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.hero-scene__content {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  left: clamp(20px, 5vw, 76px);
  max-width: min(760px, 54vw);
  min-height: 0;
  position: absolute;
  top: clamp(78px, 10vh, 126px);
  z-index: 3;
}

.hero-scene__kicker {
  color: var(--saa-red);
  display: inline-flex;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  margin-bottom: 22px;
  text-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
  text-transform: uppercase;
}

.hero-scene__title {
  color: #f7f9fb;
  font-size: clamp(46px, 5.35vw, 78px);
  font-weight: 850;
  letter-spacing: 0;
  line-height: 0.95;
  max-width: 760px;
  text-shadow: 0 18px 54px rgba(0, 0, 0, 0.42);
}

.hero-title-line {
  display: block;
}

.hero-title-line--accent {
  color: var(--saa-red);
}

.hero-scene__copy {
  color: rgba(239, 241, 243, 0.82);
  font-size: clamp(17px, 1.24vw, 20px);
  line-height: 1.55;
  margin-top: clamp(24px, 3vw, 34px);
  max-width: 570px;
  text-shadow: 0 14px 38px rgba(0, 0, 0, 0.42);
}

.hero-scene__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(28px, 4vw, 42px);
}

.hero-scene__primary,
.hero-scene__secondary {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: 14px;
  font-weight: 600;
  justify-content: center;
  letter-spacing: 0.01em;
  min-height: 52px;
  padding: 0 22px;
  text-decoration: none !important;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.hero-scene__primary {
  background: var(--saa-red);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--saa-red) 24%, transparent);
  color: #fff;
  gap: 12px;
}

.hero-scene__secondary {
  background: rgba(8, 24, 39, 0.42);
  border: 1px solid rgba(239, 241, 243, 0.24);
  color: #eff1f3;
  backdrop-filter: blur(12px);
}

/* Alleiniger Hero-CTA (Punkt 5: Primary-Button entfernt) — Sekundär-Button
   optisch aufgewertet, damit ein einzelner CTA nicht wie ein Nebenlink wirkt. */
.hero-scene__secondary.hero-scene__secondary--upgraded {
  background: var(--saa-red) !important;
  border-color: var(--saa-red) !important;
  box-shadow: 0 18px 44px color-mix(in srgb, var(--saa-red) 24%, transparent) !important;
  color: #fff !important;
  gap: 12px;
}

.hero-scene__secondary.hero-scene__secondary--upgraded:hover {
  background: color-mix(in srgb, var(--saa-red) 88%, black) !important;
  border-color: color-mix(in srgb, var(--saa-red) 88%, black) !important;
}

.hero-scene__primary:hover,
.hero-scene__secondary:hover {
  transform: translateY(-2px);
}

@keyframes sitePathBreathe {
  0% {
    opacity: 0.16;
  }
  45% {
    opacity: 0.44;
  }
  100% {
    opacity: 0.16;
  }
}

@keyframes siteProcessSweep {
  0%,
  18% {
    opacity: 0;
    stroke-dashoffset: 980;
  }
  34% {
    opacity: 0.78;
  }
  68% {
    opacity: 0.5;
    stroke-dashoffset: 0;
  }
  100% {
    opacity: 0;
    stroke-dashoffset: -180;
  }
}

@keyframes siteBlueprintBreathe {
  0%,
  100% {
    opacity: 0.36;
    transform: translateY(0);
  }
  46% {
    opacity: 0.78;
    transform: translateY(-4px);
  }
}

@keyframes siteBlueprintSweep {
  0%,
  18% {
    opacity: 0;
    transform: translate(0, 0) scale(0.7);
  }
  32% {
    opacity: 0.86;
    transform: translate(210px, 0) scale(1);
  }
  54% {
    opacity: 0.76;
    transform: translate(320px, 168px) scale(0.9);
  }
  76% {
    opacity: 0.42;
    transform: translate(146px, 398px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(174px, 398px) scale(1.16);
  }
}

@keyframes siteNodePulse {
  0%,
  100% {
    opacity: 0.18;
    transform: scale(0.72);
  }
  42% {
    opacity: 0.82;
    transform: scale(1);
  }
  62% {
    opacity: 0.42;
    transform: scale(1.32);
  }
}

@keyframes processSignalSweep {
  0%,
  24%,
  100% {
    opacity: 0.28;
    transform: translateX(-18px);
  }
  48% {
    opacity: 0.9;
    transform: translateX(0);
  }
  70% {
    opacity: 0.42;
    transform: translateX(22px);
  }
}

@keyframes processSignalNode {
  0%,
  32%,
  100% {
    opacity: 0.24;
    transform: scale(0.74);
  }
  48% {
    opacity: 0.88;
    transform: scale(1);
  }
  66% {
    opacity: 0.36;
    transform: scale(1.22);
  }
}

@media (max-width: 1024px) {
  body > nav.fixed:not(.site-header) {
    height: 76px !important;
    min-height: 76px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  body > nav.fixed:not(.site-header) > a.bg-primary,
  body > nav.fixed:not(.site-header) > a.bg-swiss-red,
  body > nav.fixed:not(.site-header) > div.flex > a.bg-swiss-red {
    display: none !important;
  }

  body > nav.fixed:not(.site-header) > .theme-toggle,
  body > nav.fixed:not(.site-header) > div.flex {
    margin-left: auto;
  }

  .subpage-hero-scene {
    display: flex;
    margin-top: 80px;
    min-height: 0;
    padding: 0 !important;
  }

  .page-hero.page-hero--scene {
    display: flex;
    margin-top: 0;
    min-height: 0;
    padding: 0 !important;
  }

  .subpage-hero-scene > .swiss-grid,
  .subpage-hero-scene > [class*="max-w"],
  .page-hero.page-hero--scene {
    display: flex;
    flex-direction: column-reverse;
    gap: 0;
    max-width: none;
    min-height: 0;
  }

  .subpage-hero-scene .visual-media {
    clip-path: none;
    height: 390px;
    position: relative;
    width: 100%;
  }

  .page-hero.page-hero--scene .visual-media,
  .page-hero.page-hero--scene .visual-placeholder {
    clip-path: none;
    height: 390px;
    position: relative;
    right: auto;
    top: auto;
    width: 100%;
  }

  .subpage-hero-scene > .swiss-grid > :first-child,
  .subpage-hero-scene > [class*="max-w"] > :first-child,
  .page-hero.page-hero--scene > :first-child {
    left: auto;
    max-width: none;
    padding: 42px 20px 58px;
    position: relative;
    top: auto;
    width: 100%;
  }

  .subpage-hero-scene h1,
  .page-hero.page-hero--scene h1 {
    font-size: clamp(38px, 10vw, 58px) !important;
  }

  .subpage-hero-scene p,
  .page-hero.page-hero--scene p {
    font-size: 17px !important;
  }

  .hero-scene {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0 0 52px;
  }

  .hero-scene::before {
    background:
      linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--saa-graphite) 86%, transparent) 42%, color-mix(in srgb, var(--saa-graphite) 72%, transparent) 72%, var(--saa-surface) 100%),
      linear-gradient(90deg, color-mix(in srgb, var(--saa-graphite) 68%, transparent), transparent 58%);
    top: 0;
  }

  .hero-scene__media {
    clip-path: none;
    height: min(58vh, 520px);
    min-height: 390px;
    position: relative;
    width: 100%;
  }

  .hero-scene__media img {
    object-position: 70% center;
  }

  .hero-scene__content {
    left: auto;
    max-width: none;
    min-height: 0;
    padding: 0 20px;
    position: relative;
    top: auto;
    transform: translateY(-34px);
  }

}

@media (min-width: 1025px) {
  .hero-title-line {
    white-space: nowrap;
  }
}

@media (max-width: 640px) {
  .hero-scene__media {
    height: 420px;
    min-height: 420px;
  }

  .hero-scene__title {
    font-size: clamp(38px, 12.4vw, 54px);
    line-height: 1.05;
  }

  .hero-scene__copy {
    font-size: 17px;
    line-height: 1.52;
    margin-top: 22px;
  }

  .hero-scene__actions {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
  }

  .hero-scene__primary,
  .hero-scene__secondary {
    width: 100%;
  }

  .site-bg-paths {
    opacity: 0.22;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-bg-path,
  .site-bg-sweep,
  .site-bg-paths::before,
  .site-bg-paths::after,
  .site-bg-node,
  .process-signal::before,
  .process-signal span {
    animation: none;
  }
}

@media (min-width: 1025px) {
  body.page-shell > .site-header .site-nav-primary {
    padding-right: 360px !important;
  }

  body.page-shell > .site-header .site-header__utility {
    bottom: 0 !important;
    position: absolute !important;
    right: clamp(96px, 8vw, 150px) !important;
    top: 0 !important;
  }

  body.page-shell > .site-header .site-header__cta {
    border-radius: 999px !important;
    box-shadow: 0 18px 44px color-mix(in srgb, var(--saa-red) 18%, transparent) !important;
    min-height: 52px !important;
    padding: 0 24px !important;
    text-decoration: none !important;
  }
}

.site-header__cta,
body > nav.fixed:not(.site-header) > a.bg-primary,
body > nav.fixed:not(.site-header) > a.bg-swiss-red,
body > nav.fixed:not(.site-header) > div.flex > a.bg-swiss-red,
body > nav.fixed:not(.site-header) a[href="potenzialanalyse.html"] {
  align-items: center !important;
  display: inline-flex !important;
  height: 52px !important;
  line-height: 1.15 !important;
  padding-bottom: 0 !important;
  padding-top: 0 !important;
}

/* Final header normalization across legacy and site-header pages. */
.site-header,
body > nav.fixed:not(.site-header) {
  background: #07111c !important;
  border-bottom: 1px solid rgba(239, 241, 243, 0.12) !important;
  box-sizing: border-box !important;
  color: #eff1f3 !important;
  height: var(--saa-header-h) !important;
  min-height: var(--saa-header-h) !important;
  overflow: visible !important;
}

.site-header__inner {
  min-height: var(--saa-header-h) !important;
}

body > nav.fixed:not(.site-header) {
  gap: clamp(14px, 1.4vw, 24px) !important;
  padding-left: clamp(20px, 4vw, 80px) !important;
  padding-right: clamp(20px, 4vw, 80px) !important;
}

.site-header .theme-toggle,
body > nav.fixed:not(.site-header) .theme-toggle,
body > nav.fixed:not(.site-header) > div.flex {
  border-color: rgba(239, 241, 243, 0.42) !important;
  color: #eff1f3 !important;
}

.site-header .theme-toggle__icon,
body > nav.fixed:not(.site-header) .theme-toggle__icon {
  color: #eff1f3 !important;
  opacity: 0.72 !important;
}

.site-header .theme-toggle__track,
body > nav.fixed:not(.site-header) .theme-toggle__track {
  background: rgba(239, 241, 243, 0.78) !important;
}

.site-header a,
body > nav.fixed:not(.site-header) a {
  text-decoration: none !important;
}

.site-header .site-nav-primary a,
body > nav.fixed:not(.site-header) > div.hidden a {
  color: rgba(239, 241, 243, 0.86) !important;
}

.site-header .site-nav-primary a:hover,
.site-header .site-nav-primary a.is-active,
body > nav.fixed:not(.site-header) > div.hidden a:hover,
body > nav.fixed:not(.site-header) > div.hidden a.text-primary,
body > nav.fixed:not(.site-header) > div.hidden a.border-primary {
  border-color: var(--saa-red) !important;
  color: var(--saa-red) !important;
}

.site-header__cta,
body > nav.fixed:not(.site-header) > a.bg-primary,
body > nav.fixed:not(.site-header) > a.bg-swiss-red,
body > nav.fixed:not(.site-header) > div.flex > a.bg-swiss-red,
body > nav.fixed:not(.site-header) a[href="potenzialanalyse.html"] {
  align-items: center !important;
  background: var(--saa-red) !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: 0 18px 44px color-mix(in srgb, var(--saa-red) 18%, transparent) !important;
  color: #fff !important;
  display: inline-flex !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  height: 52px !important;
  justify-content: center !important;
  letter-spacing: 0.01em !important;
  line-height: 1.15 !important;
  min-height: 52px !important;
  padding: 0 24px !important;
  text-decoration: none !important;
  text-transform: none !important;
  white-space: nowrap !important;
}

/* Canonical fixed-header spacing and dark-header assets. */
.site-main,
.subpage-main,
.contact-main,
.site-main:has(> .hero-scene--subpage) {
  margin-top: var(--saa-header-h) !important;
  padding-top: 0 !important;
}

body > nav.fixed:not(.site-header) + main {
  margin-top: var(--saa-header-h) !important;
  padding-top: 0 !important;
}

body > nav.fixed:not(.site-header) + .hero-scene,
body > nav.fixed:not(.site-header) + .hero-scene--subpage {
  margin-top: var(--saa-header-h) !important;
}

.site-header .site-logo__img,
body > nav.fixed:not(.site-header) > a[aria-label="Swiss AI Agency Startseite"] img,
body > nav.fixed:not(.site-header) > a.block img {
  filter: none !important;
  opacity: 1 !important;
}

.site-logo,
body > nav.fixed:not(.site-header) > a[aria-label="Swiss AI Agency Startseite"],
body > nav.fixed:not(.site-header) > a.block {
  align-items: center !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  height: var(--saa-header-h) !important;
  max-width: 180px !important;
  min-width: 103px !important;
  width: clamp(103px, 10vw, 176px) !important;
}

.site-logo__img,
body > nav.fixed:not(.site-header) > a[aria-label="Swiss AI Agency Startseite"] img,
body > nav.fixed:not(.site-header) > a.block img {
  height: auto !important;
  max-height: 30px !important;
  object-fit: contain !important;
  object-position: left center !important;
  width: 100% !important;
}

.site-header__cta,
body > nav.fixed:not(.site-header) a[href="potenzialanalyse.html"] {
  flex: 0 0 auto !important;
  margin-left: 0 !important;
  max-width: max-content !important;
}

.hero-scene__media[data-asset-slot="kontakt.hero"] img,
.hero-scene__media[data-asset-slot="potenzialanalyse.hero"] img {
  object-position: 62% top;
}

@media (max-width: 1024px) {
  .site-header,
  body > nav.fixed:not(.site-header) {
    height: var(--saa-header-h-mobile) !important;
    min-height: var(--saa-header-h-mobile) !important;
  }

  .site-header__inner {
    min-height: var(--saa-header-h-mobile) !important;
  }

  .site-main,
  .subpage-main,
  .contact-main,
  .site-main:has(> .hero-scene--subpage),
  body > nav.fixed:not(.site-header) + main,
  body > nav.fixed:not(.site-header) + .hero-scene,
  body > nav.fixed:not(.site-header) + .hero-scene--subpage {
    margin-top: var(--saa-header-h-mobile) !important;
    padding-top: 0 !important;
  }

  .site-logo,
  body > nav.fixed:not(.site-header) > a[aria-label="Swiss AI Agency Startseite"],
  body > nav.fixed:not(.site-header) > a.block {
    height: var(--saa-header-h-mobile) !important;
    max-width: 160px !important;
    min-width: 124px !important;
    width: clamp(124px, 34vw, 160px) !important;
  }

  .site-logo__img,
  body > nav.fixed:not(.site-header) > a[aria-label="Swiss AI Agency Startseite"] img,
  body > nav.fixed:not(.site-header) > a.block img {
    max-height: 32px !important;
  }

  .site-header__cta,
  body > nav.fixed:not(.site-header) > a.bg-primary,
  body > nav.fixed:not(.site-header) > a.bg-swiss-red,
  body > nav.fixed:not(.site-header) > div.flex > a.bg-swiss-red,
  body > nav.fixed:not(.site-header) a[href="potenzialanalyse.html"] {
    display: none !important;
  }

  .hero-scene {
    min-height: 0;
  }
}

/* Mobile QA cleanup: keep first-screen scenes and cookie consent compact. */
@media (max-width: 640px) {
  html,
  body {
    max-width: 100%;
    /* overflow-x: hidden entfernt 2026-08-04 (Responsive-Sanierung, Block 3).
       Es war ein Befund, keine Loesung: es verdeckte den 100vw-Ueberlauf,
       statt ihn zu beheben. Der Ueberlauf ist in Block 2 an der Ursache
       behoben und wird vom Messskript ohne diese Notloesung geprueft. */
  }

  .hero-scene {
    padding-bottom: 34px !important;
  }

  .hero-scene__media {
    height: clamp(300px, 46vh, 350px) !important;
    min-height: 300px !important;
  }

  .hero-scene__content {
    box-sizing: border-box !important;
    max-width: 350px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    transform: translateY(-26px) !important;
    width: calc(var(--saig-vw) - 40px) !important;
  }

  .hero-scene__title {
    font-size: clamp(29px, 8.9vw, 38px) !important;
    max-width: calc(var(--saig-vw) - 40px) !important;
    overflow-wrap: normal !important;
  }

  .hero-title-line {
    display: block !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  .hero-scene__copy {
    font-size: 15px !important;
    margin-top: 18px !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
  }

  .hero-scene__actions {
    margin-top: 24px !important;
  }

  .page-section,
  .py-20,
  .py-24 {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  .saa-cookie-banner {
    box-sizing: border-box !important;
    bottom: auto !important;
    gap: 10px !important;
    left: 10px !important;
    max-width: calc(var(--saig-vw) - 20px) !important;
    padding: 12px !important;
    right: 10px !important;
    top: calc(var(--saa-header-h-mobile) + 10px) !important;
    transform: none !important;
    width: auto !important;
  }

  .saa-cookie-banner__kicker {
    font-size: 12px !important;
    margin-bottom: 4px !important;
  }

  .saa-cookie-banner h2 {
    font-size: 16px !important;
    line-height: 1.12 !important;
    margin-bottom: 4px !important;
  }

  .saa-cookie-banner p {
    display: -webkit-box !important;
    font-size: 13px !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.34 !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    overflow: hidden !important;
  }

  .saa-cookie-banner__actions {
    display: grid !important;
    gap: 8px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    min-width: 0 !important;
  }

  .saa-cookie-banner button {
    font-size: 13px !important;
    line-height: 1.15 !important;
    min-height: 38px !important;
    min-width: 0 !important;
    padding: 0 6px !important;
    white-space: normal !important;
  }
}

@media (max-width: 360px) {
  .saa-cookie-banner__actions {
    grid-template-columns: 1fr !important;
  }
}

/* Use Case Overview catalogue page */
.usecase-overview-page > section:not(.usecase-overview),
.usecase-overview-page > script:not(.usecase-overview-script) {
  display: none !important;
}

.usecase-overview {
  background: #f7f9fb;
  color: #191c1e !important;
}

.usecase-overview__hero {
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(244, 247, 250, 0.99)),
    radial-gradient(circle at 72% 28%, rgba(217, 30, 24, 0.08), transparent 34%),
    linear-gradient(90deg, rgba(15, 23, 42, 0.035), transparent);
  border-bottom: 1px solid var(--saa-border);
  padding: clamp(96px, 11vw, 142px) clamp(20px, 5vw, 80px) clamp(50px, 6vw, 76px);
}

.usecase-overview__inner {
  margin: 0 auto;
  max-width: 1280px;
}

.usecase-overview__hero-grid {
  align-items: center;
  display: grid;
  gap: clamp(34px, 5vw, 72px);
  grid-template-columns: minmax(0, 0.82fr) minmax(520px, 1fr);
}

.usecase-overview__eyebrow,
.usecase-card__category,
.usecase-overview__label {
  color: var(--saa-red);
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.usecase-overview__title {
  color: #101820 !important;
  font-size: 56px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.02;
  margin: 18px 0 20px;
  max-width: 840px;
}

.usecase-overview__title span {
  color: var(--saa-red) !important;
  display: block;
}

.usecase-overview__copy {
  color: #4b5563 !important;
  font-size: 18px;
  line-height: 1.58;
  max-width: 680px;
}

.usecase-overview__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.usecase-overview__primary,
.usecase-overview__secondary,
.usecase-card__link,
.usecase-overview__cta-link {
  align-items: center;
  display: inline-flex;
  font-size: 13px;
  font-weight: 600;
  gap: 10px;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  text-decoration: none !important;
}

.usecase-overview__primary,
.usecase-overview__cta-link {
  background: var(--saa-red);
  color: #fff;
}

.usecase-overview__secondary {
  background: #fff;
  border: 1px solid #111827;
  color: #111827;
}

.usecase-overview__primary:hover,
.usecase-overview__cta-link:hover {
  background: #b91410;
}

.usecase-overview__secondary:hover,
.usecase-card__link:hover {
  background: #111827;
  border-color: #111827;
  color: #fff;
}

.usecase-overview__visual {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98)),
    radial-gradient(circle at 50% 48%, rgba(217, 30, 24, 0.08), transparent 46%);
  border: 1px solid #dfe5ec;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}





















































.usecase-overview__signal-grid {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(3, 1fr);
}

.usecase-overview__signal {
  align-items: flex-start;
  background: #fff;
  border-top: 1px solid var(--saa-border);
  display: grid;
  gap: 4px 10px;
  grid-template-columns: 28px minmax(0, 1fr);
  padding: 18px;
}

.usecase-overview__signal .material-symbols-outlined {
  color: var(--saa-red);
  font-size: 24px;
  grid-row: span 2;
}

.usecase-overview__signal strong {
  color: #111827;
  display: block;
  font-size: 14px;
  line-height: 1.2;
}

.usecase-overview__signal small {
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
}

.usecase-overview__filters {
  background: #fff;
  border-bottom: 1px solid var(--saa-border);
  border-top: 1px solid var(--saa-border);
  padding: 24px clamp(20px, 5vw, 80px);
}

.usecase-overview__filter-summary {
  align-items: baseline;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 18px;
}

.usecase-overview__filter-summary strong {
  color: #111827;
  font-size: 15px;
  font-weight: 850;
}

.usecase-overview__filter-summary span {
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
}

.usecase-overview__filter-row {
  align-items: center;
  display: grid;
  gap: 14px;
  grid-template-columns: 132px minmax(0, 1fr);
}

.usecase-overview__filter-row + .usecase-overview__filter-row {
  margin-top: 14px;
}

.usecase-overview__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.usecase-overview__catalogue {
  padding: 80px clamp(20px, 5vw, 80px);
  scroll-margin-top: 116px;
}

.usecase-overview__section-head {
  align-items: end;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin-bottom: 28px;
}

.usecase-overview__section-head h2 {
  color: #111827 !important;
  font-size: 40px;
  font-weight: 500;
  line-height: 1.08;
  margin: 0;
}

.usecase-overview__section-head p {
  color: #64748b;
  line-height: 1.55;
  margin: 0;
  max-width: 520px;
}

.usecase-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.usecase-segment + .usecase-segment {
  margin-top: clamp(42px, 6vw, 72px);
}

.usecase-segment__head {
  align-items: end;
  border-top: 1px solid #dfe5ec;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-top: 22px;
}

.usecase-segment__head h3 {
  color: #111827 !important;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.1;
  margin: 0;
}

.usecase-segment__head p {
  color: #64748b;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  max-width: 520px;
}

.usecase-segment__icons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  max-width: 520px;
}

.usecase-segment__icons > span {
  align-items: center;
  background: #fff;
  border: 1px solid #dfe5ec;
  color: #475569;
  display: inline-flex;
  font-size: 12px;
  font-weight: 600;
  gap: 7px;
  min-height: 34px;
  padding: 0 10px;
}

.usecase-segment__icons .material-symbols-outlined {
  color: var(--saa-red);
  font-size: 18px;
}

.usecase-card {
  background: #fff;
  border: 1px solid #dfe5ec;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 16px;
  position: relative;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.usecase-card:hover {
  border-color: color-mix(in srgb, var(--saa-red) 42%, #dfe5ec);
  box-shadow: 0 18px 52px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}

.usecase-card[hidden] {
  display: none;
}

.usecase-card__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.usecase-card__category {
  align-items: center;
  display: inline-flex;
  gap: 7px;
}

.usecase-card__category .material-symbols-outlined {
  color: var(--saa-red);
  font-size: 17px;
  line-height: 1;
}

.usecase-card h3 {
  color: #111827 !important;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.18;
  margin: 10px 0 8px;
}

.usecase-card__benefit {
  color: #4b5563 !important;
  font-size: 13px;
  line-height: 1.45;
  margin: 0 0 12px;
}

.usecase-card__proof {
  align-items: start;
  color: #111827 !important;
  display: flex;
  font-size: 12px;
  font-weight: 600;
  gap: 8px;
  line-height: 1.35;
  margin-top: auto;
}

.usecase-card__proof::before {
  background: var(--saa-red);
  content: "";
  flex: 0 0 6px;
  height: 6px;
  margin-top: 6px;
  width: 6px;
}

.usecase-card__media {
  align-self: stretch;
  background: #07111c;
  height: 132px;
  margin-bottom: 16px;
  order: -1;
  overflow: hidden;
}

.usecase-card__media img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.usecase-card__link {
  border: 1px solid #d8dee6;
  color: #111827;
  margin-top: 16px;
  min-height: 38px;
  padding: 0 12px;
  width: 100%;
}

.usecase-overview__proof {
  background: #07111c;
  color: #fff;
  padding: 80px clamp(20px, 5vw, 80px);
}

.usecase-overview__proof-grid {
  align-items: center;
  display: grid;
  gap: clamp(28px, 5vw, 72px);
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1fr);
}

.usecase-overview__proof h2,
.usecase-overview__cta h2 {
  font-size: 48px;
  font-weight: 500;
  line-height: 1.08;
  margin: 0 0 18px;
}

.usecase-overview__proof p,
.usecase-overview__cta p {
  color: rgba(255, 255, 255, 0.76);
  line-height: 1.65;
  margin: 0;
  max-width: 620px;
}

.usecase-overview__decision-panel {
  background:
    linear-gradient(135deg, rgba(217, 30, 24, 0.12), transparent 38%),
    rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.28);
  padding: clamp(28px, 4vw, 42px);
}

.usecase-overview__panel-label {
  color: var(--saa-red);
  display: block;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
  margin-bottom: 18px;
  text-transform: uppercase;
}

.usecase-overview__decision-panel > strong {
  color: #fff;
  display: block;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 500;
  line-height: 1.08;
  margin-bottom: 28px;
  max-width: 560px;
}

.usecase-overview__decision-panel ul {
  display: grid;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.usecase-overview__decision-panel li {
  align-items: flex-start;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: grid;
  gap: 16px;
  grid-template-columns: 32px minmax(0, 1fr);
  padding-top: 16px;
}

.usecase-overview__decision-panel .material-symbols-outlined {
  color: var(--saa-red);
  font-size: 24px;
  line-height: 1;
  margin-top: 2px;
}

.usecase-overview__decision-panel b {
  color: #fff;
  display: block;
  font-size: 15px;
  line-height: 1.35;
  margin-bottom: 4px;
}

.usecase-overview__decision-panel small {
  color: rgba(255, 255, 255, 0.74);
  display: block;
  font-size: 14px;
  line-height: 1.55;
}

.usecase-overview__cta {
  background: #fff;
  padding: 82px clamp(20px, 5vw, 80px);
  text-align: center;
}

.usecase-overview__cta h2 {
  color: #111827 !important;
}

.usecase-overview__cta p {
  color: #64748b;
  margin: 0 auto 30px;
}

@media (max-width: 1240px) {
  .usecase-overview__hero-grid {
    grid-template-columns: minmax(0, 0.82fr) minmax(440px, 1fr);
  }

  .usecase-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .usecase-overview__hero-grid,
  .usecase-overview__proof-grid {
    grid-template-columns: 1fr;
  }

  .usecase-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  
}

@media (max-width: 768px) {
  .usecase-overview__hero {
    padding-top: calc(var(--saa-header-h-mobile) + 44px);
  }

  .usecase-overview__title {
    font-size: 32px;
  }

  .usecase-overview__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .usecase-overview__primary,
  .usecase-overview__secondary {
    width: 100%;
  }

  .usecase-overview__section-head h2,
  .usecase-overview__proof h2,
  .usecase-overview__cta h2 {
    font-size: 34px;
  }

  .usecase-segment__head h3 {
    font-size: 25px;
  }

  .usecase-overview__filter-row,
  .usecase-overview__filter-summary,
  .usecase-overview__section-head,
  .usecase-segment__head,
  .usecase-grid {
    display: grid;
    grid-template-columns: 1fr;
  }

  .usecase-segment__icons {
    justify-content: flex-start;
  }

  .usecase-card {
    display: flex;
  }

  .usecase-card__media {
    height: 190px;
  }

  .usecase-overview__signal-grid {
    grid-template-columns: 1fr;
  }

  

  

  

  

  
}



/* Global mobile quality layer: spacing, cards and contrast across all pages. */
@media (max-width: 768px) {
  :root {
    --saa-mobile-section-y: 52px;
    --saa-mobile-section-y-tight: 40px;
    --saa-mobile-card-pad: 22px;
    --saa-mobile-gap: 18px;
  }

  html,
  body {
    /* overflow-x: hidden entfernt 2026-08-04 (Block 3), siehe oben. */
    width: 100% !important;
  }

  .site-header,
  body > nav.fixed:not(.site-header) {
    background: #06111d !important;
    border-bottom-color: rgba(214, 226, 238, 0.18) !important;
    color: #eff1f3 !important;
  }

  .site-header a,
  body > nav.fixed:not(.site-header) a,
  .saa-mobile-nav-toggle,
  body > nav.fixed:not(.site-header) button {
    color: #eff1f3 !important;
  }

  .saa-mobile-nav-toggle,
  button[aria-label*="Menu"],
  button[aria-label*="Navigation"] {
    background: rgba(8, 24, 39, 0.92) !important;
    border: 1px solid rgba(214, 226, 238, 0.38) !important;
    color: #eff1f3 !important;
  }

  main > section,
  body > section,
  .page-section,
  .py-20,
  .py-24,
  .py-32,
  .md\:py-32,
  .md\:py-40 {
    padding-top: var(--saa-mobile-section-y) !important;
    padding-bottom: var(--saa-mobile-section-y) !important;
  }

  main > section + section,
  body > section + section {
    margin-top: 0 !important;
  }

  .hero-scene + section,
  .hero-scene--subpage + section {
    padding-top: var(--saa-mobile-section-y-tight) !important;
  }

  .swiss-grid,
  .grid,
  .skeleton-grid,
  .visual-bento,
  .sector-grid {
    gap: var(--saa-mobile-gap) !important;
  }

  .p-8,
  .p-10,
  .md\:p-12,
  .bento-card,
  .skeleton-card,
  .process-card,
  .sector-card,
  .term-card,
  .wide-card {
    padding: var(--saa-mobile-card-pad) !important;
  }

  .h-\[400px\],
  .h-\[480px\],
  .min-h-\[420px\],
  .min-h-\[480px\] {
    height: auto !important;
    min-height: 0 !important;
  }

  .visual-media,
  .visual-rail,
  .visual-placeholder,
  .process-card {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .bg-white,
  .bg-surface,
  .bg-surface-bright,
  .bg-surface-container-lowest,
  .term-card,
  .sector-card {
    background-color: #ffffff !important;
    color: #191c1e !important;
  }

  .bg-white *,
  .bg-surface *,
  .bg-surface-bright *,
  .bg-surface-container-lowest *,
  .term-card *,
  .sector-card * {
    color: inherit;
  }

  .bg-white .text-on-surface-variant,
  .bg-surface .text-on-surface-variant,
  .term-card .text-on-surface-variant,
  .sector-card .text-on-surface-variant {
    color: #5d6673 !important;
  }

  .bg-white .text-swiss-red,
  .bg-surface .text-swiss-red,
  .term-card .text-swiss-red,
  .sector-card .text-swiss-red,
  .bg-white .material-symbols-outlined,
  .sector-card .material-symbols-outlined {
    color: var(--saa-red) !important;
  }

  .bg-swiss-red,
  .hero-scene__primary,
  .site-header__cta,
  body > nav.fixed:not(.site-header) a[href="potenzialanalyse.html"] {
    background-color: var(--saa-red) !important;
    color: #ffffff !important;
  }

  .bg-swiss-red *,
  .hero-scene__primary *,
  .site-header__cta *,
  body > nav.fixed:not(.site-header) a[href="potenzialanalyse.html"] * {
    color: #ffffff !important;
  }

  .bg-graphite,
  .page-section--dark,
  .skeleton-card--dark {
    background-color: #06111d !important;
    color: #eff1f3 !important;
  }

  .bg-graphite *,
  .page-section--dark *,
  .skeleton-card--dark * {
    color: inherit;
  }

  .bg-graphite .text-swiss-red,
  .page-section--dark .text-swiss-red {
    color: var(--saa-red) !important;
  }

  h1,
  h2,
  h3 {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
  }

  .font-headline-xl,
  .text-headline-xl,
  .section-heading h2,
  .page-section h2,
  section h2 {
    display: block !important;
    font-size: clamp(26px, 7.1vw, 32px) !important;
    line-height: 1.08 !important;
    max-width: min(330px, calc(var(--saig-vw) - 48px)) !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }

  section p,
  .section-heading p,
  .page-copy {
    max-width: min(340px, calc(var(--saig-vw) - 48px)) !important;
    overflow-wrap: break-word !important;
  }

  .swiss-grid > *,
  .grid > * {
    min-width: 0 !important;
  }

  .swiss-grid,
  .page-container,
  [class*="max-w-"] {
    max-width: 100% !important;
  }

  input,
  textarea,
  select,
  .bg-surface-container-low,
  .bg-surface-container,
  .bg-surface-container-high,
  .bg-surface-container-highest {
    color: #191c1e !important;
  }

  input,
  textarea,
  select {
    background-color: #f7f9fb !important;
    border-color: #cbd5e1 !important;
  }

  input::placeholder,
  textarea::placeholder {
    color: #64748b !important;
    opacity: 1 !important;
  }
}

/* KI-Beratung mobile guard: Robert gate fixes for CTA arrows, spacing and overflow. */
@media (max-width: 768px) {
  .ki-beratung-page .hero-scene {
    background: #06111d !important;
    display: grid !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
  }

  .ki-beratung-page .hero-scene__media {
    height: 280px !important;
    min-height: 280px !important;
  }

  .ki-beratung-page .hero-scene__media img {
    object-position: 58% center !important;
  }

  .ki-beratung-page .hero-scene__content {
    background: #06111d !important;
    box-sizing: border-box !important;
    left: auto !important;
    margin: 0 !important;
    max-width: none !important;
    padding: 28px 20px 34px !important;
    position: relative !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
  }

  .ki-beratung-page .hero-scene__title {
    font-size: clamp(30px, 8.3vw, 36px) !important;
    line-height: 1.02 !important;
    max-width: 100% !important;
    overflow-wrap: normal !important;
  }

  .ki-beratung-page .hero-title-line {
    display: block !important;
    white-space: normal !important;
  }

  .ki-beratung-page .hero-scene__copy {
    font-size: 15px !important;
    line-height: 1.55 !important;
    max-width: 100% !important;
  }

  .ki-beratung-page .hero-scene__actions {
    align-items: stretch !important;
    display: grid !important;
    gap: 10px !important;
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }

  .ki-beratung-page .hero-scene__primary,
  .ki-beratung-page .hero-scene__secondary,
  .ki-beratung-page .wide-card a {
    box-sizing: border-box !important;
    justify-content: center !important;
    min-height: 48px !important;
    padding: 14px 18px !important;
    text-align: center !important;
    width: 100% !important;
  }

  .ki-beratung-page .section-heading,
  .ki-beratung-page .wide-card {
    display: grid !important;
    gap: 18px !important;
    grid-template-columns: 1fr !important;
  }

  .ki-beratung-page .section-heading h2,
  .ki-beratung-page .page-section h2,
  .ki-beratung-page section h2 {
    font-size: clamp(25px, 7vw, 31px) !important;
    line-height: 1.1 !important;
    max-width: 100% !important;
    overflow-wrap: normal !important;
  }

  .ki-beratung-page .section-heading p,
  .ki-beratung-page .page-section p,
  .ki-beratung-page section p {
    max-width: 100% !important;
  }

  .ki-beratung-page .page-section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .ki-beratung-page .page-container {
    max-width: 100% !important;
    width: 100% !important;
  }

  .ki-beratung-page .skeleton-card,
  .ki-beratung-page .bento-card,
  .ki-beratung-page .process-card,
  .ki-beratung-page details,
  .ki-beratung-page .wide-card {
    box-sizing: border-box !important;
    min-height: 0 !important;
    width: 100% !important;
  }

  .ki-beratung-page .process-card h3,
  .ki-beratung-page .skeleton-card h3,
  .ki-beratung-page .bento-card h3 {
    font-size: 21px !important;
    line-height: 1.18 !important;
    max-width: 100% !important;
  }

  .ki-beratung-page .visual-media {
    min-height: 220px !important;
    width: 100% !important;
  }

  .ki-beratung-page .visual-media img {
    height: 100% !important;
    min-height: 220px !important;
    object-fit: cover !important;
  }

  .ki-beratung-page .material-symbols-outlined {
    flex: 0 0 auto !important;
  }
}

/* KI-Dienste mobile guard: Robert gate fixes for services/product distinction page. */
@media (max-width: 768px) {
  .ki-dienste-page .hero-scene {
    background: #06111d !important;
    display: grid !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
  }

  .ki-dienste-page .hero-scene__media {
    height: 280px !important;
    min-height: 280px !important;
  }

  .ki-dienste-page .hero-scene__media img {
    object-position: 58% center !important;
  }

  .ki-dienste-page .hero-scene__content {
    background: #06111d !important;
    box-sizing: border-box !important;
    left: auto !important;
    margin: 0 !important;
    max-width: none !important;
    padding: 28px 20px 34px !important;
    position: relative !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
  }

  .ki-dienste-page .hero-scene__title {
    font-size: clamp(30px, 8.3vw, 36px) !important;
    line-height: 1.02 !important;
    max-width: 100% !important;
    overflow-wrap: normal !important;
  }

  .ki-dienste-page .hero-title-line {
    display: block !important;
    white-space: normal !important;
  }

  .ki-dienste-page .hero-scene__copy,
  .ki-dienste-page section p {
    max-width: 100% !important;
  }

  .ki-dienste-page .hero-scene__actions {
    align-items: stretch !important;
    display: grid !important;
    gap: 10px !important;
    grid-template-columns: 1fr !important;
  }

  .ki-dienste-page .hero-scene__primary,
  .ki-dienste-page .hero-scene__secondary,
  .ki-dienste-page section a.inline-flex {
    box-sizing: border-box !important;
    justify-content: center !important;
    min-height: 48px !important;
    padding: 14px 18px !important;
    text-align: center !important;
    width: 100% !important;
  }

  .ki-dienste-page .swiss-grid,
  .ki-dienste-page .grid,
  .ki-dienste-page .sector-grid {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }

  .ki-dienste-page .swiss-grid > *,
  .ki-dienste-page .grid > *,
  .ki-dienste-page .sector-grid > * {
    grid-column: auto !important;
    min-width: 0 !important;
  }

  .ki-dienste-page .font-headline-xl,
  .ki-dienste-page .text-headline-xl,
  .ki-dienste-page section h2 {
    font-size: clamp(25px, 7vw, 31px) !important;
    line-height: 1.1 !important;
    max-width: 100% !important;
    overflow-wrap: normal !important;
  }

  .ki-dienste-page .bento-card,
  .ki-dienste-page .sector-card,
  .ki-dienste-page .process-card,
  .ki-dienste-page details {
    box-sizing: border-box !important;
    min-height: 0 !important;
    width: 100% !important;
  }

  .ki-dienste-page .bento-card h3,
  .ki-dienste-page .process-card h3,
  .ki-dienste-page details summary {
    font-size: 21px !important;
    line-height: 1.18 !important;
  }

  .ki-dienste-page .visual-media,
  .ki-dienste-page .visual-rail {
    min-height: 220px !important;
    width: 100% !important;
  }

  .ki-dienste-page .visual-media img {
    height: 100% !important;
    min-height: 220px !important;
    object-fit: cover !important;
  }
}
/* Global Robert contrast guard: light containers inside dark sections must stay readable. */
.bg-graphite .bg-white,
.bg-graphite .bento-card,
.bg-graphite .sector-card,
.bg-graphite .term-card,
.bg-graphite .wide-card,
.bg-graphite details.bg-white,
.page-section--dark .bg-white,
.page-section--dark .bento-card,
.page-section--dark .sector-card,
.page-section--dark .term-card,
.page-section--dark .wide-card,
.page-section--dark details.bg-white{
  background-color: #ffffff !important;
  color: #191c1e !important;
}

.bg-graphite .bg-white *,
.bg-graphite .bento-card *,
.bg-graphite .sector-card *,
.bg-graphite .term-card *,
.bg-graphite .wide-card *,
.bg-graphite details.bg-white *,
.page-section--dark .bg-white *,
.page-section--dark .bento-card *,
.page-section--dark .sector-card *,
.page-section--dark .term-card *,
.page-section--dark .wide-card *,
.page-section--dark details.bg-white *{
  color: #191c1e !important;
}

.bg-graphite .bg-white p,
.bg-graphite .bg-white li,
.bg-graphite .bg-white .text-on-surface-variant,
.bg-graphite .bg-white .text-tertiary,
.bg-graphite .bento-card p,
.bg-graphite .bento-card li,
.bg-graphite .bento-card .text-on-surface-variant,
.bg-graphite .bento-card .text-tertiary,
.page-section--dark .bg-white p,
.page-section--dark .bg-white li,
.page-section--dark .bg-white .text-on-surface-variant,
.page-section--dark .bg-white .text-tertiary,
.page-section--dark .bento-card p,
.page-section--dark .bento-card li,
.page-section--dark .bento-card .text-on-surface-variant,
.page-section--dark .bento-card .text-tertiary {
  color: #5d6673 !important;
}

.bg-graphite .bg-white .text-swiss-red,
.bg-graphite .bg-white .material-symbols-outlined,
.bg-graphite .bento-card .text-swiss-red,
.bg-graphite .bento-card .material-symbols-outlined,
.page-section--dark .bg-white .text-swiss-red,
.page-section--dark .bg-white .material-symbols-outlined,
.page-section--dark .bento-card .text-swiss-red,
.page-section--dark .bento-card .material-symbols-outlined {
  color: var(--saa-red) !important;
}
/* Robert contrast guard extension: homepage process/bento cells on dark bands. */
.bg-graphite .process-card,
.bg-graphite .bento-cell,
.page-section--dark .process-card,
.page-section--dark .bento-cell{
  background-color: #ffffff !important;
  color: #191c1e !important;
}

.bg-graphite .process-card *,
.bg-graphite .bento-cell *,
.page-section--dark .process-card *,
.page-section--dark .bento-cell *{
  color: #191c1e !important;
}

.bg-graphite .process-card p,
.bg-graphite .process-card li,
.bg-graphite .process-card .text-on-surface-variant,
.bg-graphite .process-card .text-tertiary,
.bg-graphite .bento-cell p,
.bg-graphite .bento-cell li,
.bg-graphite .bento-cell .text-on-surface-variant,
.bg-graphite .bento-cell .text-tertiary,
.page-section--dark .process-card p,
.page-section--dark .process-card li,
.page-section--dark .process-card .text-on-surface-variant,
.page-section--dark .process-card .text-tertiary,
.page-section--dark .bento-cell p,
.page-section--dark .bento-cell li,
.page-section--dark .bento-cell .text-on-surface-variant,
.page-section--dark .bento-cell .text-tertiary {
  color: #5d6673 !important;
}

.bg-graphite .process-card .text-swiss-red,
.bg-graphite .process-card .material-symbols-outlined,
.bg-graphite .bento-cell .text-swiss-red,
.bg-graphite .bento-cell .material-symbols-outlined,
.page-section--dark .process-card .text-swiss-red,
.page-section--dark .process-card .material-symbols-outlined,
.page-section--dark .bento-cell .text-swiss-red,
.page-section--dark .bento-cell .material-symbols-outlined {
  color: var(--saa-red) !important;
}

/* Robert light-surface contrast contract: only real light cards stay white and readable. */
.bento-card,
.bento-cell,
.sector-card,
.term-card,
.wide-card.bg-white,
details.bg-white,
.process-card.bg-white,
.process-card.bento-cell,
.bg-white.border:not(section):not(a):not(button):not(nav) {
  background-color: #ffffff !important;
  color: #191c1e !important;
}

.bento-card :is(h1, h2, h3, h4, h5, h6, strong, summary, .text-graphite, .text-on-surface),
.bento-cell :is(h1, h2, h3, h4, h5, h6, strong, summary, .text-graphite, .text-on-surface),
.sector-card :is(h1, h2, h3, h4, h5, h6, strong, summary, .text-graphite, .text-on-surface),
.term-card :is(h1, h2, h3, h4, h5, h6, strong, summary, .text-graphite, .text-on-surface),
.wide-card.bg-white :is(h1, h2, h3, h4, h5, h6, strong, summary, .text-graphite, .text-on-surface),
details.bg-white :is(h1, h2, h3, h4, h5, h6, strong, summary, .text-graphite, .text-on-surface),
.process-card.bg-white :is(h1, h2, h3, h4, h5, h6, strong, summary, .text-graphite, .text-on-surface),
.process-card.bento-cell :is(h1, h2, h3, h4, h5, h6, strong, summary, .text-graphite, .text-on-surface),
.bg-white.border:not(section):not(a):not(button):not(nav) :is(h1, h2, h3, h4, h5, h6, strong, summary, .text-graphite, .text-on-surface) {
  color: #191c1e !important;
}

.bento-card :is(p, li, small, .text-on-surface-variant, .text-tertiary, .text-surface-variant),
.bento-cell :is(p, li, small, .text-on-surface-variant, .text-tertiary, .text-surface-variant),
.sector-card :is(p, li, small, .text-on-surface-variant, .text-tertiary, .text-surface-variant),
.term-card :is(p, li, small, .text-on-surface-variant, .text-tertiary, .text-surface-variant),
.wide-card.bg-white :is(p, li, small, .text-on-surface-variant, .text-tertiary, .text-surface-variant),
details.bg-white :is(p, li, small, .text-on-surface-variant, .text-tertiary, .text-surface-variant),
.process-card.bg-white :is(p, li, small, .text-on-surface-variant, .text-tertiary, .text-surface-variant),
.process-card.bento-cell :is(p, li, small, .text-on-surface-variant, .text-tertiary, .text-surface-variant),
.bg-white.border:not(section):not(a):not(button):not(nav) :is(p, li, small, .text-on-surface-variant, .text-tertiary, .text-surface-variant) {
  color: #5d6673 !important;
}

.bento-card :is(.text-swiss-red, .material-symbols-outlined),
.bento-cell :is(.text-swiss-red, .material-symbols-outlined),
.sector-card :is(.text-swiss-red, .material-symbols-outlined),
.term-card :is(.text-swiss-red, .material-symbols-outlined),
.wide-card.bg-white :is(.text-swiss-red, .material-symbols-outlined),
details.bg-white :is(.text-swiss-red, .material-symbols-outlined),
.process-card.bg-white :is(.text-swiss-red, .material-symbols-outlined),
.process-card.bento-cell :is(.text-swiss-red, .material-symbols-outlined),
.bg-white.border:not(section):not(a):not(button):not(nav) :is(.text-swiss-red, .material-symbols-outlined) {
  color: var(--saa-red) !important;
}

.bento-card img,
.bento-cell img,
.sector-card img,
.term-card img,
.wide-card.bg-white img,
details.bg-white img,
.process-card.bg-white img,
.process-card.bento-cell img,
.bg-white.border:not(section):not(a):not(button):not(nav) img {
  filter: none !important;
  opacity: 1 !important;
}

@media (max-width: 768px) {
  .usecase-overview-page .usecase-overview h2 {
    font-size: 34px !important;
    line-height: 1.12 !important;
    max-width: 100% !important;
  }

  .usecase-overview-page .usecase-segment__head h3 {
    font-size: 25px !important;
    line-height: 1.14 !important;
    max-width: 100% !important;
  }
}

/* Tereza system pass: shared header, mobile spacing and icon discipline. */
@media (min-width: 1025px) {
  body.page-shell > .site-header .site-header__inner,
  .site-header .site-header__inner {
    box-sizing: border-box !important;
    column-gap: clamp(18px, 2.2vw, 34px) !important;
    display: grid !important;
    grid-template-columns: minmax(132px, 176px) minmax(0, 1fr) auto !important;
    margin: 0 auto !important;
    /* 2026-08-04 (Block 4): frueher max-width 1500px mit eigenem Polster
       clamp(32,4vw,72). Das war die staerkste Regel auf der Kopfzeile und
       der Grund, warum Logo und Menue auf keiner Breite mit dem
       Seiteninhalt fluchteten. Jetzt dieselbe Geometrie wie .saig-shell. */
    max-width: calc(var(--saig-shell) + var(--saig-gutter) * 2) !important;
    min-height: var(--saa-header-h) !important;
    padding-left: var(--saig-gutter) !important;
    padding-right: var(--saig-gutter) !important;
    width: 100% !important;
  }

  body.page-shell > .site-header .site-header__utility,
  .site-header .site-header__utility {
    align-self: center !important;
    bottom: auto !important;
    justify-self: end !important;
    position: static !important;
    right: auto !important;
    top: auto !important;
  }

  body.page-shell > .site-header .site-nav-primary,
  .site-header .site-nav-primary {
    /* 2026-08-04 (Block 6b): Untergrenze 8px -> 12px. Diese Regel ist die
       staerkste auf der Navigation und hat die weicheren clamp(14px, ...)
       darunter ueberstimmt: bei 1100px standen die acht Links mit 9px
       Abstand. 12px ist die Untergrenze aus dem Abnahmekriterium; darunter
       gehoert die Navigation in den Burger, und der greift seit diesem
       Block schon ab 1024px. */
    gap: clamp(12px, 0.82vw, 14px) !important;
    justify-content: center !important;
    padding-right: 0 !important;
  }

  body.page-shell > .site-header .site-nav-primary a,
  .site-header .site-nav-primary a {
    letter-spacing: 0.045em !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.page-shell > .site-header .site-header__actions,
  .site-header .site-header__actions {
    gap: 16px !important;
  }
}

/* 2026-08-04 (Block 6b): Umschaltpunkt der Kopfzeile von 980px auf die
   lg-Stufe (1024px) gezogen. Zwischen 980 und 1200px wurde die Navigation
   von 912 auf 533px zusammengedrueckt, der Abstand zwischen den acht Links
   fiel auf 8px. Der Burger existierte, griff nur zu spaet. */
@media (max-width: 1024px) {
  :root {
    --saa-mobile-section-y: clamp(52px, 14vw, 76px);
    --saa-mobile-card-pad: clamp(22px, 6vw, 30px);
    --saa-mobile-card-gap: 18px;
    --saa-mobile-field-gap: 20px;
  }

  body.page-shell > .site-header .site-header__inner,
  .site-header .site-header__inner {
    align-items: center !important;
    display: flex !important;
    gap: 10px !important;
    justify-content: space-between !important;
  }

  body.page-shell > .site-header .site-logo,
  .site-header .site-logo {
    min-width: 128px !important;
    width: clamp(128px, 36vw, 144px) !important;
  }

  body.page-shell > .site-header .site-header__utility,
  .site-header .site-header__utility {
    align-items: center !important;
    align-self: center !important;
    bottom: auto !important;
    margin-left: auto !important;
    position: static !important;
    right: auto !important;
    top: auto !important;
  }

  body.page-shell > .site-header .site-header__actions,
  .site-header .site-header__actions {
    gap: 8px !important;
  }

  body.page-shell > .site-header .theme-toggle,
  .site-header .theme-toggle {
    height: 38px !important;
    padding: 0 8px !important;
  }

  body.page-shell > .site-header .saa-mobile-nav-toggle,
  .site-header .saa-mobile-nav-toggle {
    flex: 0 0 42px !important;
    height: 42px !important;
    width: 42px !important;
  }

  .page-section,
  .contact-section,
  .usecase-overview__catalogue,
  .usecase-overview__proof,
  .usecase-overview__cta {
    padding-top: var(--saa-mobile-section-y) !important;
    padding-bottom: var(--saa-mobile-section-y) !important;
  }

  .process-card,
  .bento-card,
  .bento-cell,
  .sector-card,
  .term-card,
  .wide-card.bg-white,
  details.bg-white,
  .usecase-card,
  .contact-form-panel,
  .contact-info-panel,
  .contact-process-panel {
    padding: var(--saa-mobile-card-pad) !important;
  }

  .process-card,
  .bento-cell,
  .usecase-card {
    height: auto !important;
    min-height: 0 !important;
  }

  .contact-form,
  .contact-field-grid,
  .usecase-grid,
  .usecase-overview__signal-grid,
  .usecase-overview__proof-grid {
    gap: var(--saa-mobile-field-gap) !important;
  }

  .contact-step-grid {
    gap: 18px !important;
  }
}

.process-card > .material-symbols-outlined,
.process-card :is(.material-symbols-outlined.text-3xl, .material-symbols-outlined.text-4xl),
.bento-card > .material-symbols-outlined,
.bento-cell > .material-symbols-outlined,
.sector-card .material-symbols-outlined,
.term-card .material-symbols-outlined,
.wide-card .material-symbols-outlined,
.swiss-grid > .bg-white.border > .material-symbols-outlined,
.swiss-grid > .border > .material-symbols-outlined,
.usecase-card .material-symbols-outlined,
.saa-footer__proof .material-symbols-outlined {
  align-items: center !important;
  display: inline-flex !important;
  flex: 0 0 32px !important;
  font-size: 32px !important;
  height: 32px !important;
  justify-content: center !important;
  line-height: 1 !important;
  max-width: 32px !important;
  min-width: 32px !important;
  overflow: hidden !important;
  width: 32px !important;
}

.process-card :is(.material-symbols-outlined.text-3xl, .material-symbols-outlined.text-4xl) {
  margin-bottom: 0 !important;
}

/* Termin Agent master detail page. */
.term-agent { background:#f7f9fb; color:var(--saa-text); overflow:hidden; }
.term-agent *, .term-agent *::before, .term-agent *::after { box-sizing:border-box; }
.term-container { margin:0 auto; max-width:1280px; padding:0 clamp(20px,5vw,80px); width:100%; }
.term-kicker, .term-backlink { color:var(--saa-red); font-size:12px; font-weight: 600; letter-spacing:.16em; text-transform:uppercase; }
.term-backlink { align-items:center; display:inline-flex; gap:8px; letter-spacing:.04em; margin-bottom:30px; text-decoration:none; text-transform:none; }
.term-backlink .material-symbols-outlined { font-size:18px; }
.term-agent h1, .term-agent h2, .term-agent h3 { color:#111827; letter-spacing:0; margin:0; }
.term-agent h1 { font-size:clamp(44px,6vw,86px); line-height:.98; max-width:760px; }
.term-agent h1 span { color:var(--saa-red); }
.term-agent h2 { font-size:clamp(34px,4vw,56px); line-height:1.05; }
.term-agent p { color:#5d6673; font-size:17px; line-height:1.65; margin:0; }
.term-hero { background:linear-gradient(90deg,rgba(247,249,251,.98) 0%,rgba(247,249,251,.92) 42%,rgba(247,249,251,.54) 62%,rgba(247,249,251,.12) 100%),radial-gradient(circle at 82% 28%,rgba(217,30,24,.16),transparent 32%),#f7f9fb; min-height:clamp(720px,calc(100vh - var(--saa-header-h)),980px); padding:clamp(74px,9vw,118px) 0 clamp(54px,7vw,94px); }
.term-hero__grid { align-items:center; display:grid; gap:clamp(30px,4vw,64px); grid-template-columns:minmax(0,.94fr) minmax(360px,1.06fr); }
.term-hero__copy { position:relative; z-index:2; }
.term-hero__copy > p { font-size:clamp(18px,1.45vw,22px); margin-top:24px; max-width:660px; }
.term-hero__actions, .term-hero__signals { display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }
.term-btn { align-items:center; border:1px solid var(--saa-border); display:inline-flex; font-size:14px; font-weight: 600; gap:10px; justify-content:center; min-height:54px; padding:0 24px; text-decoration:none; }
.term-btn--primary { background:var(--saa-red); border-color:var(--saa-red); box-shadow:0 18px 44px rgba(217,30,24,.22); color:#fff; }
.term-btn--ghost { background:rgba(255,255,255,.74); color:#111827; }
.term-btn .material-symbols-outlined { font-size:20px; }
.term-hero__signals div { background:rgba(255,255,255,.86); border:1px solid var(--saa-border); min-width:170px; padding:18px 20px; }
.term-hero__signals strong { color:var(--saa-red); display:block; font-size:28px; line-height:1; }
.term-hero__signals span { color:#5d6673; display:block; font-size:13px; font-weight: 600; margin-top:8px; }
.term-hero__visual { aspect-ratio:16/11; border:1px solid rgba(17,24,39,.14); box-shadow:0 34px 90px rgba(17,24,39,.22); margin:0; overflow:hidden; position:relative; }
.term-hero__visual img { display:block; height:100%; object-fit:cover; object-position:60% center; width:100%; }
.term-hero__visual::after { background:linear-gradient(180deg,transparent 50%,rgba(5,11,18,.88)); content:""; inset:0; position:absolute; }
.term-hero__visual figcaption { background:rgba(5,11,18,.82); border:1px solid rgba(255,255,255,.16); bottom:24px; color:#fff; left:24px; padding:18px 20px; position:absolute; right:24px; z-index:2; }
.term-hero__visual figcaption strong, .term-hero__visual figcaption span { display:block; }
.term-hero__visual figcaption span { color:rgba(255,255,255,.72); font-size:13px; margin-top:6px; }
.term-section, .term-dark { padding:clamp(76px,9vw,128px) 0; }
.term-dark { background:#07111c; }
.term-signal-section { isolation:isolate; overflow:hidden; position:relative; }
.term-signal-section::before { background:radial-gradient(circle at 78% 22%,rgba(217,30,24,.2),transparent 28%),linear-gradient(90deg,rgba(7,17,28,.96),rgba(7,17,28,.82) 46%,rgba(7,17,28,.96)); content:""; inset:0; pointer-events:none; position:absolute; z-index:-1; }
.term-signal-section .term-container { position:relative; z-index:2; }
.term-signal-field { height:100%; inset:0; opacity:.42; pointer-events:none; position:absolute; width:100%; z-index:0; }
.term-problem { background:#07111c; }
.term-problem::after { background:linear-gradient(90deg,rgba(7,17,28,.92),rgba(7,17,28,.66) 42%,rgba(7,17,28,.92)),linear-gradient(180deg,rgba(7,17,28,.9),transparent 38%,rgba(7,17,28,.78)); content:""; inset:0; pointer-events:none; position:absolute; z-index:1; }
.term-dark h2, .term-dark h3, .term-dark p { color:#fff; }
.term-dark p { color:rgba(255,255,255,.72); margin-top:18px; max-width:720px; }
.term-dark__grid { display:grid; gap:clamp(28px,4vw,58px); grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr); }
.term-checklist { display:grid; gap:16px; list-style:none; margin:30px 0 0; padding:0; }
.term-checklist li { align-items:flex-start; color:rgba(255,255,255,.78); display:flex; gap:12px; line-height:1.55; }
.term-checklist .material-symbols-outlined { color:var(--saa-red); font-size:22px; }
.term-loss-card { border:1px solid rgba(255,255,255,.16); color:#fff; min-height:300px; overflow:hidden; padding:clamp(28px,4vw,48px); position:relative; }
.term-loss-card span { color:rgba(255,255,255,.72); display:block; font-weight: 500; }
.term-loss-card strong { color:var(--saa-red); display:block; font-size:clamp(76px,9vw,126px); line-height:.95; margin-top:18px; }
.term-loss-chart { align-items:end; bottom:0; display:flex; gap:10px; height:90px; left:48px; opacity:.34; position:absolute; right:48px; }
.term-loss-chart i { background:linear-gradient(180deg,rgba(255,255,255,.36),var(--saa-red)); display:block; flex:1; }
.term-loss-chart i:nth-child(1){height:82%}.term-loss-chart i:nth-child(2){height:76%}.term-loss-chart i:nth-child(3){height:62%}.term-loss-chart i:nth-child(4){height:48%}.term-loss-chart i:nth-child(5){height:34%}.term-loss-chart i:nth-child(6){height:20%}
.term-section-head { margin:0 auto clamp(38px,5vw,70px); max-width:820px; text-align:center; }
.term-section-head p { margin:16px auto 0; max-width:680px; }
.term-section-head--left { margin-left:0; text-align:left; }
.term-step-grid, .term-kpi-grid, .term-feature-grid, .term-compare-grid, .term-industry-grid, .term-trust__grid, .term-logo-grid { display:grid; gap:24px; }
.term-step-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.term-step-grid article, .term-kpi-grid article, .term-feature, .term-compare-grid article, .term-industry-grid article, .term-trust__grid article, .term-logo-grid span { background:#fff; border:1px solid var(--saa-border); }
.term-step-grid article { min-height:270px; padding:30px 24px; }
.term-step-grid article > span { color:var(--saa-red); font-size:13px; font-weight:900; }
.term-step-grid i { color:var(--saa-red); display:block; font-size:42px; margin:28px 0 20px; }
.term-step-grid h3, .term-feature h3, .term-industry-grid h3, .term-trust h3 { font-size:22px; line-height:1.15; }
.term-step-grid p, .term-feature p, .term-industry-grid p, .term-trust p { font-size:15px; margin-top:12px; }
.term-kpi-grid { grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:32px; }
.term-kpi-grid article { padding:30px; text-align:center; }
.term-kpi-grid strong { color:var(--saa-red); display:block; font-size:clamp(38px,4vw,60px); line-height:1; }
.term-kpi-grid span { color:#5d6673; display:block; font-weight: 500; margin-top:12px; }
.term-feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.term-feature { min-height:260px; overflow:hidden; padding:34px; }
.term-feature > .material-symbols-outlined, .term-feature div > .material-symbols-outlined, .term-trust__grid .material-symbols-outlined { color:var(--saa-red); font-size:36px; margin-bottom:24px; }
.term-feature--wide { align-items:center; display:grid; gap:24px; grid-column:span 2; grid-template-columns:minmax(0,.8fr) minmax(320px,1.2fr); }
.term-feature--wide img { display:block; height:100%; max-height:360px; object-fit:cover; width:100%; }
.term-feature--dark { background:#07111c; border-color:rgba(255,255,255,.12); }
.term-feature--dark h3, .term-feature--dark p { color:#fff; }
.term-feature--dark p { color:rgba(255,255,255,.72); }
.term-compare-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.term-compare-grid article, .term-trust__grid article { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.14); padding:clamp(28px,4vw,48px); }
.term-compare-grid h3 { color:rgba(255,255,255,.72); font-size:24px; }
.term-compare__with h3 { color:var(--saa-red); }
.term-compare-grid ul { display:grid; gap:18px; list-style:none; margin:28px 0 0; padding:0; }
.term-compare-grid li { color:rgba(255,255,255,.74); padding-left:26px; position:relative; }
.term-compare-grid li::before { background:rgba(255,255,255,.46); content:""; height:7px; left:0; position:absolute; top:10px; width:7px; }
.term-compare__with li::before { background:var(--saa-red); }
.term-industry-grid, .term-trust__grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.term-industry-grid article { overflow:hidden; }
.term-industry-grid img { aspect-ratio:16/9; display:block; filter:grayscale(1); height:auto; object-fit:cover; width:100%; }
.term-industry-grid h3, .term-industry-grid p { padding-left:24px; padding-right:24px; }
.term-industry-grid h3 { padding-top:24px; }
.term-industry-grid p { padding-bottom:28px; }
.term-trust p { color:rgba(255,255,255,.72); }
.term-integrations { text-align:center; }
.term-logo-grid { grid-template-columns:repeat(6,minmax(0,1fr)); margin-top:34px; }
.term-logo-grid span { color:#334155; display:grid; font-weight: 500; min-height:88px; place-items:center; text-align:center; }
.term-final { background:radial-gradient(circle at 18% 18%,rgba(217,30,24,.18),transparent 30%),linear-gradient(135deg,#07111c,#0b1724 58%,#07111c); }
.term-final__panel { margin:0 auto; max-width:840px; text-align:center; }
.term-final .term-btn { margin-top:32px; }
@media (max-width:1060px){.term-hero__grid,.term-dark__grid{grid-template-columns:1fr}.term-step-grid,.term-feature-grid,.term-compare-grid,.term-industry-grid,.term-trust__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.term-feature--wide{grid-column:span 2;grid-template-columns:1fr}.term-logo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:680px){.term-agent-page .site-header__cta{display:none!important}.term-agent h1{font-size:clamp(34px,10.4vw,46px);line-height:1.04;overflow-wrap:break-word}.term-container{padding-left:18px;padding-right:18px}.term-hero{min-height:0;padding-top:58px}.term-hero__actions,.term-hero__signals{display:grid;grid-template-columns:1fr}.term-btn,.term-hero__signals div{width:100%}.term-step-grid,.term-kpi-grid,.term-feature-grid,.term-compare-grid,.term-industry-grid,.term-trust__grid,.term-logo-grid{grid-template-columns:1fr}.term-feature--wide{grid-column:auto}.term-hero__visual figcaption{bottom:14px;left:14px;right:14px}.term-loss-card strong{font-size:76px}.saa-cookie-banner{transform:none!important}.saa-cookie-banner.is-hidden{transform:translateY(12px)!important}}
@media (max-width:480px){.saa-cookie-banner__actions{grid-template-columns:1fr!important}}

/* Tereza correction pass: readable mobile menu, stronger CTA states and homepage signal cards. */
/* v2: gemeinsames Card-Flächen-Token statt hartcodiertem bg-white im Markup.
   Fester heller Ton passend zum Section-Rhythmus (siehe VISUALS_LOG.md). */
.saa-card-surface {
  background: var(--saa-surface-soft);
  border: 1px solid var(--saa-border);
  box-shadow: 0 1px 3px rgba(7, 17, 28, 0.06), 0 1px 2px rgba(7, 17, 28, 0.04);
}

.saa-signal-card {
  background:
    linear-gradient(90deg, var(--saa-red) 0 4px, transparent 4px),
    #ffffff !important;
  border-color: rgba(7, 17, 28, 0.14) !important;
  box-shadow: none !important;
  gap: 22px !important;
  min-height: 280px;
  padding: clamp(28px, 3vw, 42px) !important;
  position: relative;
}

.saa-signal-card::after {
  background: rgba(217, 30, 24, 0.16);
  content: "";
  height: 2px;
  left: 34px;
  position: absolute;
  top: 34px;
  width: 34px;
}

.saa-signal-card > .material-symbols-outlined,
.swiss-grid > .saa-signal-card.bg-white.border > .material-symbols-outlined {
  align-items: center !important;
  background: #07111c !important;
  border: 1px solid rgba(7, 17, 28, 0.18) !important;
  color: var(--saa-red) !important;
  display: inline-flex !important;
  flex: 0 0 48px !important;
  font-size: 25px !important;
  height: 48px !important;
  justify-content: center !important;
  line-height: 1 !important;
  margin-top: 18px;
  max-width: 48px !important;
  min-width: 48px !important;
  width: 48px !important;
}

.saa-signal-card h4 {
  color: #07111c !important;
  line-height: 1.12 !important;
  margin: 0 !important;
}

.saa-signal-card p {
  color: #4b5563 !important;
  font-size: 16px !important;
  line-height: 1.58 !important;
  margin: 0 !important;
}

.hero-scene__secondary {
  background: rgba(7, 17, 28, 0.78) !important;
  border: 1px solid rgba(239, 241, 243, 0.26) !important;
  color: #ffffff !important;
}

.hero-scene__secondary:hover {
  background: #07111c !important;
  border-color: var(--saa-red) !important;
  color: #ffffff !important;
}

.about-card::before,
.knowledge-card::before,
.academy-card::before,
.contact-form-panel::before,
.contact-info-panel::before,
.contact-process-panel::before,
.pa-card::before {
  min-width: 4px;
}

@media (max-width: 1024px) {
  nav [data-mobile-nav-panel] {
    background: #07111c !important;
    border-color: rgba(239, 241, 243, 0.14) !important;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.34) !important;
    padding: 24px 26px 28px !important;
  }

  nav [data-mobile-nav-panel] a {
    border-bottom: 1px solid rgba(239, 241, 243, 0.14) !important;
    color: rgba(239, 241, 243, 0.92) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    line-height: 20px !important;
    padding: 16px 0 !important;
    text-align: left !important;
  }

  nav [data-mobile-nav-panel] a:hover,
  nav [data-mobile-nav-panel] a.is-active,
  nav [data-mobile-nav-panel] a.text-primary,
  nav [data-mobile-nav-panel] a.border-primary {
    color: #ff302a !important;
  }

  .hero-scene__actions {
    gap: 12px !important;
  }

  .hero-scene__primary,
  .hero-scene__secondary {
    border-radius: 999px !important;
    min-height: 52px !important;
    width: 100% !important;
  }

  .saa-signal-card {
    gap: 18px !important;
    min-height: 0;
    padding: 28px 28px 30px !important;
  }

  .saa-signal-card::after {
    left: 28px;
    top: 28px;
  }

  .saa-signal-card > .material-symbols-outlined,
  .swiss-grid > .saa-signal-card.bg-white.border > .material-symbols-outlined {
    flex-basis: 46px !important;
    height: 46px !important;
    margin-top: 18px;
    max-width: 46px !important;
    min-width: 46px !important;
    width: 46px !important;
  }
}

.home-page .process-card {
  border-color: rgba(7, 17, 28, 0.14) !important;
  overflow: hidden;
  position: relative;
}

.home-page .home-offer-card {
  height: auto !important;
  min-height: clamp(460px, 34vw, 520px);
  padding: clamp(28px, 2.8vw, 40px) !important;
}

.home-page .home-offer-card:not(.bg-graphite) {
  background: #ffffff !important;
  color: #07111c;
}

.home-page .home-offer-card:not(.bg-graphite) p {
  color: #4b5563 !important;
}

.home-page .home-offer-card.bg-graphite p {
  color: rgba(239, 241, 243, 0.78) !important;
}

.home-page .home-offer-card .process-signal,
.home-page .bento-cell .process-signal {
  display: none !important;
}

.home-page .home-offer-card > div:first-of-type {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.home-page .home-offer-card .visual-media--tile {
  aspect-ratio: 16 / 9;
  height: auto;
  margin-bottom: 24px;
  min-height: 0;
  width: 100%;
}

.home-page .home-offer-card .visual-media--tile img {
  border: 1px solid rgba(7, 17, 28, 0.12);
}

.home-page .home-offer-card h3 {
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.home-page .home-offer-card p {
  max-width: 34ch;
}

.home-page .saa-signal-card {
  background: #ffffff !important;
  border-left: 4px solid var(--saa-red) !important;
  box-shadow: 0 18px 44px rgba(7, 17, 28, 0.08) !important;
}

.home-page .saa-signal-card::after {
  display: none;
}

.home-page .bento-cell {
  background: #ffffff !important;
  border-left: 4px solid var(--saa-red) !important;
  box-shadow: 0 20px 50px rgba(7, 17, 28, 0.08) !important;
}

.home-page .bento-cell img {
  border: 1px solid rgba(7, 17, 28, 0.1);
}

.home-page .bento-cell [class*="px-3"][class*="py-1"] {
  background: rgba(7, 17, 28, 0.06) !important;
  border-color: rgba(7, 17, 28, 0.14) !important;
  color: #07111c !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  line-height: 1 !important;
  min-height: 28px !important;
  padding: 8px 10px !important;
  text-transform: uppercase !important;
}

.home-page .home-card-arrow {
  border-color: currentColor;
  color: rgba(7, 17, 28, 0.72);
}

.home-page .home-card-meta {
  color: rgba(7, 17, 28, 0.58);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.home-page .bg-graphite .home-card-meta{
  color: rgba(239, 241, 243, 0.76);
}

/* 04.09.: Vertrauens-Zeilen im Kontakt-CTA ("Direkte Antwort, keine
   Warteschlaufe" usw.) hatten keine eigene Schriftgroesse -- sie erbten
   die 16px-Standardgroesse und brachen dadurch in der schmalen
   lg:col-span-5-Spalte mitten im Satz um (gemessen bei 1024px: 306px
   Spalte, 320px+ Textbreite noetig). 15px schafft Spielraum, ohne
   erkennbar kleiner zu wirken. */
.home-page .home-trust-line {
  font-size: 15px;
}

.home-page .visual-media--portrait {
  background: #06111d;
  border: 1px solid rgba(239, 241, 243, 0.18);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

.home-page .visual-media--portrait img {
  height: 100%;
  object-fit: contain;
  object-position: center center;
  transform: none;
  width: 100%;
}

@media (max-width: 1024px) {
  .home-page main > section:not(.hero-scene) {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }

  .home-page .process-card,
  .home-page .saa-signal-card,
  .home-page .bento-cell {
    border-left-width: 4px !important;
  }

  .home-page .home-offer-card {
    min-height: 0;
  }

  .home-page .home-offer-card .visual-media--tile {
    aspect-ratio: 21 / 8;
    max-height: 260px;
  }
}

@media (max-width: 680px) {
  .home-page main > section:not(.hero-scene) {
    padding-top: 56px !important;
    padding-bottom: 60px !important;
  }

  .home-page .swiss-grid,
  .home-page .grid {
    gap: 18px !important;
  }

  .home-page .home-offer-card,
  .home-page .bento-cell,
  .home-page .saa-signal-card {
    padding: 26px 26px 28px !important;
  }

  .home-page .home-offer-card .visual-media--tile,
  .home-page .bento-cell .visual-media--bento {
    aspect-ratio: 16 / 8.4;
    margin-bottom: 20px;
    margin-top: 0;
    max-height: none;
  }

  .home-page .home-offer-card p,
  .home-page .bento-cell p,
  .home-page .saa-signal-card p {
    max-width: none;
  }
}

/* Termin Agent responsive header guard. */
@media (max-width: 680px) {
  .term-agent-page .site-nav-primary,
  .term-agent-page .site-header__cta,
  .term-agent-page .theme-toggle {
    display: none !important;
  }

  .term-agent-page .saa-mobile-nav-toggle {
    display: inline-flex !important;
  }

  .term-agent-page .site-header__utility {
    margin-left: auto !important;
    min-width: 0 !important;
  }

  .term-agent-page .site-header__actions {
    flex-shrink: 0 !important;
  }

  .term-agent h1 {
    font-size: clamp(34px, 10.4vw, 46px) !important;
    line-height: 1.04 !important;
    overflow-wrap: break-word !important;
  }

  .term-hero {
    min-height: 0 !important;
  }

  .saa-cookie-banner {
    transform: none !important;
  }

  .saa-cookie-banner.is-hidden {
    transform: translateY(12px) !important;
  }

  .saa-cookie-banner__actions {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  .saa-cookie-banner__actions {
    grid-template-columns: 1fr !important;
  }
}

/* Homepage agent board responsive sizing. */
@media (min-width: 1025px) {
  .home-page .home-agent-board {
    min-height: clamp(470px, 34vw, 560px) !important;
  }

  .home-page .home-agent-card {
    min-height: 72px !important;
    padding: 12px 14px !important;
  }

  .home-page .home-agent-board__result {
    padding: 20px !important;
  }
}

@media (max-width: 680px) {
  .home-page .home-agent-board {
    gap: 16px !important;
    padding: 22px !important;
  }

  .home-page .home-agent-card {
    gap: 12px !important;
    min-height: 0 !important;
    padding: 14px !important;
  }

  .home-page .home-agent-card small {
    font-size: 12px !important;
    line-height: 1.36 !important;
  }
}
/* Homepage agent card hover interaction. */
@media (min-width: 1025px) {
  .home-page .home-agent-card {
    transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease !important;
    will-change: transform;
  }

  .home-page .home-agent-card:hover,
  .home-page .home-agent-card:focus-within {
    animation-play-state: paused !important;
    background: rgba(217, 30, 24, 0.16) !important;
    border-color: rgba(255, 45, 38, 0.72) !important;
    box-shadow: 0 18px 44px rgba(217, 30, 24, 0.18), inset 0 0 0 1px rgba(255, 45, 38, 0.18) !important;
    transform: translateX(10px) scale(1.012) !important;
  }

  .home-page .home-agent-card .material-symbols-outlined {
    transition: color 180ms ease, transform 180ms ease, text-shadow 180ms ease !important;
  }

  .home-page .home-agent-card:hover .material-symbols-outlined,
  .home-page .home-agent-card:focus-within .material-symbols-outlined {
    color: #ff332d !important;
    text-shadow: 0 0 18px rgba(255, 45, 38, 0.42);
    transform: translateX(3px) scale(1.08);
  }
}

@media (max-width: 680px) {
  .home-page .home-agent-card {
    transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease !important;
  }

  .home-page .home-agent-card:hover,
  .home-page .home-agent-card:focus-within,
  .home-page .home-agent-card:active {
    animation-play-state: paused !important;
    background: rgba(217, 30, 24, 0.16) !important;
    border-color: rgba(255, 45, 38, 0.68) !important;
    box-shadow: 0 14px 34px rgba(217, 30, 24, 0.16) !important;
    transform: translateY(-3px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .home-agent-card,
  .home-page .home-agent-card .material-symbols-outlined{
    transition: none !important;
  }

  .home-page .home-agent-card:hover,
  .home-page .home-agent-card:focus-within,
  .home-page .home-agent-card:active {
    transform: none !important;
  }
}
/* KI-Dienste absolute EOF motion guard. */
.ki-dienste-page .hero-scene__media::before { animation: diensteHeroScan 7.5s ease-in-out infinite !important; }
.ki-dienste-page .hero-scene__media img { animation: diensteHeroDrift 14s ease-in-out infinite !important; transform-origin: 60% 50% !important; }
.ki-dienste-page .bento-card,
.ki-dienste-page .sector-card,
.ki-dienste-page .process-card,
.ki-dienste-page details { position: relative !important; transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, background-color 180ms ease !important; }
.ki-dienste-page .bento-card::before,
.ki-dienste-page .sector-card::before,
.ki-dienste-page .process-card::before,
.ki-dienste-page details::before { background: var(--saa-red) !important; content: "" !important; height: 2px !important; left: 28px !important; opacity: 0.9 !important; position: absolute !important; top: 0 !important; transform: scaleX(0.34) !important; transform-origin: left !important; transition: transform 180ms ease, opacity 180ms ease !important; width: 48px !important; }
.ki-dienste-page .bento-card:hover,
.ki-dienste-page .bento-card:focus-within,
.ki-dienste-page .sector-card:hover,
.ki-dienste-page .process-card:hover { border-color: rgba(217, 30, 24, 0.5) !important; box-shadow: 0 22px 58px rgba(7, 17, 28, 0.12) !important; transform: translateY(-5px) !important; }
.ki-dienste-page .bento-card:hover::before,
.ki-dienste-page .bento-card:focus-within::before,
.ki-dienste-page .sector-card:hover::before,
.ki-dienste-page .process-card:hover::before,
.ki-dienste-page details:hover::before,
.ki-dienste-page details[open]::before { opacity: 1 !important; transform: scaleX(1) !important; }
.ki-dienste-page .bento-card img,
.ki-dienste-page .visual-media--soft img { transition: filter 180ms ease, transform 420ms ease !important; }
.ki-dienste-page .bento-card:hover img,
.ki-dienste-page .bento-card:focus-within img,
.ki-dienste-page .visual-media--soft:hover img { filter: contrast(1.04) saturate(1.04) !important; transform: scale(1.04) !important; }
.ki-dienste-page .visual-media--soft { overflow: hidden !important; position: relative !important; }
.ki-dienste-page .visual-media--soft::after { animation: diensteSignalPulse 4.8s ease-in-out infinite !important; background: linear-gradient(90deg, rgba(217, 30, 24, 0.64), rgba(217, 30, 24, 0)) !important; content: "" !important; height: 2px !important; left: 0 !important; opacity: 0.86 !important; position: absolute !important; top: 0 !important; width: 92px !important; z-index: 2 !important; }
.ki-dienste-page .sector-card .material-symbols-outlined { transition: color 180ms ease, transform 180ms ease !important; }
.ki-dienste-page .sector-card:hover .material-symbols-outlined { color: #ff2f2a !important; transform: translateY(-3px) scale(1.08) !important; }
.ki-dienste-page details:hover,
.ki-dienste-page details[open] { border-color: rgba(217, 30, 24, 0.42) !important; box-shadow: 0 14px 36px rgba(7, 17, 28, 0.08) !important; }
@media (max-width: 680px) {
  .ki-dienste-page .hero-scene__media img { animation: none !important; }
  .ki-dienste-page .bento-card:hover,
  .ki-dienste-page .bento-card:focus-within,
  .ki-dienste-page .sector-card:hover,
  .ki-dienste-page .process-card:hover { transform: translateY(-3px) !important; }
  .ki-dienste-page .bento-card:hover img,
  .ki-dienste-page .bento-card:focus-within img,
  .ki-dienste-page .visual-media--soft:hover img { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .ki-dienste-page .hero-scene__media::before,
  .ki-dienste-page .hero-scene__media img,
  .ki-dienste-page .visual-media--soft::after { animation: none !important; }
  .ki-dienste-page .bento-card,
  .ki-dienste-page .sector-card,
  .ki-dienste-page .process-card,
  .ki-dienste-page details,
  .ki-dienste-page .bento-card img,
  .ki-dienste-page .visual-media--soft img,
  .ki-dienste-page .sector-card .material-symbols-outlined { transition: none !important; }
  .ki-dienste-page .bento-card:hover,
  .ki-dienste-page .sector-card:hover,
  .ki-dienste-page .process-card:hover,
  .ki-dienste-page .bento-card:hover img,
  .ki-dienste-page .visual-media--soft:hover img,
  .ki-dienste-page .sector-card:hover .material-symbols-outlined { transform: none !important; }
}

/* Global navigation hover motion. */
.site-header .site-nav-primary a,
body > nav.fixed:not(.site-header) > div.hidden a:not(.bg-primary):not(.bg-swiss-red) {
  display: inline-flex !important;
  isolation: isolate;
  overflow: visible;
  position: relative !important;
  transform-origin: center;
  transition: color 180ms ease, opacity 180ms ease, text-shadow 180ms ease, transform 180ms ease !important;
  will-change: transform;
}

.site-header .site-nav-primary a::after,
body > nav.fixed:not(.site-header) > div.hidden a:not(.bg-primary):not(.bg-swiss-red)::after {
  background: var(--saa-red);
  bottom: -10px;
  content: "";
  height: 2px;
  left: 50%;
  opacity: 0;
  position: absolute;
  transform: translateX(-50%) scaleX(0.22);
  transform-origin: center;
  transition: opacity 180ms ease, transform 180ms ease, width 180ms ease;
  width: 28px;
  z-index: -1;
}

.site-header .site-nav-primary a:hover,
.site-header .site-nav-primary a:focus-visible,
body > nav.fixed:not(.site-header) > div.hidden a:not(.bg-primary):not(.bg-swiss-red):hover,
body > nav.fixed:not(.site-header) > div.hidden a:not(.bg-primary):not(.bg-swiss-red):focus-visible {
  color: var(--saa-red) !important;
  text-shadow: 0 0 18px rgba(217, 30, 24, 0.22);
  transform: translateY(-2px) scale(1.06) !important;
}

.site-header .site-nav-primary a:hover::after,
.site-header .site-nav-primary a:focus-visible::after,
body > nav.fixed:not(.site-header) > div.hidden a:not(.bg-primary):not(.bg-swiss-red):hover::after,
body > nav.fixed:not(.site-header) > div.hidden a:not(.bg-primary):not(.bg-swiss-red):focus-visible::after,
.site-header .site-nav-primary a.is-active::after,
body > nav.fixed:not(.site-header) > div.hidden a.text-primary::after,
body > nav.fixed:not(.site-header) > div.hidden a.border-primary::after {
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
  width: 42px;
}

.site-header .site-nav-primary a.is-active,
body > nav.fixed:not(.site-header) > div.hidden a.text-primary,
body > nav.fixed:not(.site-header) > div.hidden a.border-primary {
  color: var(--saa-red) !important;
}

@media (prefers-reduced-motion: reduce) {
  .site-header .site-nav-primary a,
  body > nav.fixed:not(.site-header) > div.hidden a:not(.bg-primary):not(.bg-swiss-red) {
    transition: color 120ms ease, opacity 120ms ease !important;
  }

  .site-header .site-nav-primary a:hover,
  .site-header .site-nav-primary a:focus-visible,
  body > nav.fixed:not(.site-header) > div.hidden a:not(.bg-primary):not(.bg-swiss-red):hover,
  body > nav.fixed:not(.site-header) > div.hidden a:not(.bg-primary):not(.bg-swiss-red):focus-visible {
    transform: none !important;
  }
}

/* Global content motion system. */
main :where(
  .bento-card,
  .bento-cell,
  .sector-card,
  .process-card,
  .wide-card,
  .term-card,
  .term-feature,
  .solution-card,
  .usecase-card,
  .home-offer-card,
  .home-agent-card,
  details
) {
  position: relative;
  transform: translateZ(0);
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease,
    transform 200ms ease !important;
  will-change: transform;
}

main :where(
  .bento-card,
  .bento-cell,
  .sector-card,
  .process-card,
  .wide-card,
  .term-card,
  .term-feature,
  .solution-card,
  .usecase-card,
  .home-offer-card,
  .home-agent-card,
  details
):hover,
main :where(
  .bento-card,
  .bento-cell,
  .sector-card,
  .process-card,
  .wide-card,
  .term-card,
  .term-feature,
  .solution-card,
  .usecase-card,
  .home-offer-card,
  .home-agent-card,
  details
):focus-within {
  border-color: rgba(217, 30, 24, 0.48) !important;
  box-shadow: 0 22px 58px rgba(7, 17, 28, 0.13) !important;
  transform: translateY(-5px) scale(1.01) !important;
}

main :where(
  .visual-media,
  .hero-scene__media,
  .subpage-hero-scene .visual-media,
  .page-hero .visual-media,
  .usecase-card__media,
  .term-feature--visual
) {
  overflow: hidden;
  transform: translateZ(0);
}

main :where(
  .visual-media,
  .hero-scene__media,
  .subpage-hero-scene .visual-media,
  .page-hero .visual-media,
  .usecase-card__media,
  .term-feature--visual,
  .bento-card,
  .bento-cell,
  .process-card,
  .home-offer-card
) img {
  transform: scale(1);
  transition: filter 180ms ease, transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  will-change: transform;
}

main :where(
  .visual-media,
  .hero-scene__media,
  .subpage-hero-scene .visual-media,
  .page-hero .visual-media,
  .usecase-card__media,
  .term-feature--visual
):hover img,
main :where(
  .bento-card,
  .bento-cell,
  .process-card,
  .home-offer-card,
  .usecase-card
):hover img,
main :where(
  .bento-card,
  .bento-cell,
  .process-card,
  .home-offer-card,
  .usecase-card
):focus-within img {
  filter: contrast(1.04) saturate(1.04) !important;
  transform: scale(1.045) !important;
}

main :where(
  .sector-card,
  .process-card,
  .term-feature,
  .solution-card,
  .usecase-card,
  .home-agent-card
) :where(.material-symbols-outlined, svg) {
  transition: color 180ms ease, stroke 180ms ease, transform 180ms ease !important;
}

main :where(
  .sector-card,
  .process-card,
  .term-feature,
  .solution-card,
  .usecase-card,
  .home-agent-card
):hover :where(.material-symbols-outlined, svg),
main :where(
  .sector-card,
  .process-card,
  .term-feature,
  .solution-card,
  .usecase-card,
  .home-agent-card
):focus-within :where(.material-symbols-outlined, svg) {
  color: #ff2f2a !important;
  stroke: #ff2f2a !important;
  transform: translateY(-3px) scale(1.08) !important;
}

main :where(
  .bento-card,
  .bento-cell,
  .sector-card,
  .process-card,
  .wide-card,
  .term-card,
  .term-feature,
  .solution-card,
  .usecase-card,
  .home-offer-card,
  .home-agent-card
) :where(a, button) {
  transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease, transform 180ms ease !important;
}

main :where(
  .bento-card,
  .bento-cell,
  .sector-card,
  .process-card,
  .wide-card,
  .term-card,
  .term-feature,
  .solution-card,
  .usecase-card,
  .home-offer-card,
  .home-agent-card
):hover :where(a:not(.hero-scene__primary), button:not([type="submit"])) {
  transform: translateX(2px);
}

@media (max-width: 680px) {
  main :where(
    .bento-card,
    .bento-cell,
    .sector-card,
    .process-card,
    .wide-card,
    .term-card,
    .term-feature,
    .solution-card,
    .usecase-card,
    .home-offer-card,
    .home-agent-card,
    details
  ):hover,
  main :where(
    .bento-card,
    .bento-cell,
    .sector-card,
    .process-card,
    .wide-card,
    .term-card,
    .term-feature,
    .solution-card,
    .usecase-card,
    .home-offer-card,
    .home-agent-card,
    details
  ):focus-within {
    transform: translateY(-3px) !important;
  }

  main :where(
    .visual-media,
    .hero-scene__media,
    .subpage-hero-scene .visual-media,
    .page-hero .visual-media,
    .usecase-card__media,
    .term-feature--visual,
    .bento-card,
    .bento-cell,
    .process-card,
    .home-offer-card
  ):hover img {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  main :where(
    .bento-card,
    .bento-cell,
    .sector-card,
    .process-card,
    .wide-card,
    .term-card,
    .term-feature,
    .solution-card,
    .usecase-card,
    .home-offer-card,
    .home-agent-card,
    details,
    .visual-media img,
    .hero-scene__media img,
    .usecase-card__media img,
    .term-feature--visual img,
    .material-symbols-outlined,
    svg
  ) {
    transition: none !important;
  }

  main :where(
    .bento-card,
    .bento-cell,
    .sector-card,
    .process-card,
    .wide-card,
    .term-card,
    .term-feature,
    .solution-card,
    .usecase-card,
    .home-offer-card,
    .home-agent-card,
    details
  ):hover,
  main :where(
    .visual-media,
    .hero-scene__media,
    .usecase-card__media,
    .term-feature--visual
  ):hover img,
  main :where(
    .bento-card,
    .bento-cell,
    .process-card,
    .home-offer-card,
    .usecase-card
  ):hover img {
    transform: none !important;
  }
}

/* Global CTA system. */
:root {
  --saa-cta-red: var(--saa-red, #d91e18);
  --saa-cta-dark: #07111c;
  --saa-cta-light: #ffffff;
}

:where(
  .site-header__cta,
  .hero-scene__primary,
  .btn-primary,
  .academy-primary,
  .about-primary,
  .term-btn--primary,
  .usecase-overview__primary,
  .usecase-overview__cta-link,
  .contact-submit,
  .pa-actions .primary,
  main a.inline-flex.bg-swiss-red,
  body > nav.fixed:not(.site-header) > a.bg-primary,
  body > nav.fixed:not(.site-header) > a.bg-swiss-red,
  body > nav.fixed:not(.site-header) > div.flex > a.bg-swiss-red
) {
  align-items: center !important;
  background: var(--saa-cta-red) !important;
  border: 1px solid var(--saa-cta-red) !important;
  border-radius: 999px !important;
  box-shadow: 0 18px 44px rgba(217, 30, 24, 0.22) !important;
  color: #fff !important;
  cursor: pointer;
  display: inline-flex !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  gap: 10px !important;
  justify-content: center !important;
  letter-spacing: 0 !important;
  line-height: 1.12 !important;
  min-height: 54px !important;
  padding: 0 26px !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: none !important;
  transform: translateZ(0);
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease,
    transform 180ms ease !important;
  white-space: nowrap !important;
}

:where(
  .site-header__cta,
  .hero-scene__primary,
  .btn-primary,
  .academy-primary,
  .about-primary,
  .term-btn--primary,
  .usecase-overview__primary,
  .usecase-overview__cta-link,
  .contact-submit,
  .pa-actions .primary,
  main a.inline-flex.bg-swiss-red,
  body > nav.fixed:not(.site-header) > a.bg-primary,
  body > nav.fixed:not(.site-header) > a.bg-swiss-red,
  body > nav.fixed:not(.site-header) > div.flex > a.bg-swiss-red
):hover,
:where(
  .site-header__cta,
  .hero-scene__primary,
  .btn-primary,
  .academy-primary,
  .about-primary,
  .term-btn--primary,
  .usecase-overview__primary,
  .usecase-overview__cta-link,
  .contact-submit,
  .pa-actions .primary,
  main a.inline-flex.bg-swiss-red,
  body > nav.fixed:not(.site-header) > a.bg-primary,
  body > nav.fixed:not(.site-header) > a.bg-swiss-red,
  body > nav.fixed:not(.site-header) > div.flex > a.bg-swiss-red
):focus-visible {
  background: #ff2f2a !important;
  border-color: #ff2f2a !important;
  box-shadow: 0 24px 58px rgba(217, 30, 24, 0.28) !important;
  color: #fff !important;
  opacity: 1 !important;
  transform: translateY(-2px) scale(1.015) !important;
}

:where(
  .hero-scene__primary,
  .btn-primary,
  .academy-primary,
  .about-primary,
  .term-btn--primary,
  .usecase-overview__primary,
  .usecase-overview__cta-link,
  .pa-actions .primary,
  main a.inline-flex.bg-swiss-red
) .material-symbols-outlined {
  font-size: 20px !important;
  transition: transform 180ms ease !important;
}

:where(
  .hero-scene__primary,
  .btn-primary,
  .academy-primary,
  .about-primary,
  .term-btn--primary,
  .usecase-overview__primary,
  .usecase-overview__cta-link,
  .pa-actions .primary,
  main a.inline-flex.bg-swiss-red
):hover .material-symbols-outlined {
  transform: translateX(3px) !important;
}

.contact-submit {
  width: 100% !important;
}

:where(
  .hero-scene__secondary,
  .btn-secondary,
  .academy-secondary,
  .term-btn--ghost,
  .usecase-overview__secondary,
  .pa-actions .secondary
) {
  align-items: center !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(239, 241, 243, 0.42) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  color: #eff1f3 !important;
  display: inline-flex !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  gap: 10px !important;
  justify-content: center !important;
  letter-spacing: 0 !important;
  line-height: 1.12 !important;
  min-height: 54px !important;
  padding: 0 24px !important;
  text-decoration: none !important;
  text-transform: none !important;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease,
    transform 180ms ease !important;
  white-space: nowrap !important;
}

main :where(
  .page-section:not(.page-section--dark),
  .pa-section:not(.pa-section--red),
  .contact-section,
  .academy-cta,
  .about-cta
) :where(
  .hero-scene__secondary,
  .btn-secondary,
  .academy-secondary,
  .term-btn--ghost,
  .usecase-overview__secondary,
  .pa-actions .secondary
) {
  background: transparent !important;
  border-color: rgba(7, 17, 28, 0.22) !important;
  color: var(--saa-cta-dark) !important;
}

:where(
  .hero-scene__secondary,
  .btn-secondary,
  .academy-secondary,
  .term-btn--ghost,
  .usecase-overview__secondary,
  .pa-actions .secondary
):hover,
:where(
  .hero-scene__secondary,
  .btn-secondary,
  .academy-secondary,
  .term-btn--ghost,
  .usecase-overview__secondary,
  .pa-actions .secondary
):focus-visible {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(217, 30, 24, 0.72) !important;
  box-shadow: 0 16px 38px rgba(7, 17, 28, 0.12) !important;
  color: var(--saa-cta-red) !important;
  opacity: 1 !important;
  transform: translateY(-2px) !important;
}

.saa-footer__cta {
  align-items: center !important;
  color: #fff !important;
  display: inline-flex !important;
  font-weight: 850 !important;
  gap: 8px !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  text-transform: none !important;
  transition: color 180ms ease, transform 180ms ease !important;
}

.saa-footer__cta:hover,
.saa-footer__cta:focus-visible {
  color: #ff2f2a !important;
  transform: translateX(3px) !important;
}

@media (max-width: 680px) {
  main :where(
    .hero-scene__primary,
    .hero-scene__secondary,
    .btn-primary,
    .btn-secondary,
    .academy-primary,
    .academy-secondary,
    .about-primary,
    .term-btn,
    .usecase-overview__primary,
    .usecase-overview__secondary,
    .usecase-overview__cta-link,
    .pa-actions a,
    main a.inline-flex.bg-swiss-red
  ) {
    min-height: 56px !important;
    width: 100% !important;
  }
}

@media (max-width: 1024px) {
  .site-header__cta,
  body > nav.fixed:not(.site-header) > a.bg-primary,
  body > nav.fixed:not(.site-header) > a.bg-swiss-red,
  body > nav.fixed:not(.site-header) > div.flex > a.bg-swiss-red {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(
    .site-header__cta,
    .hero-scene__primary,
    .hero-scene__secondary,
    .btn-primary,
    .btn-secondary,
    .academy-primary,
    .academy-secondary,
    .about-primary,
    .term-btn,
    .usecase-overview__primary,
    .usecase-overview__secondary,
    .usecase-overview__cta-link,
    .contact-submit,
    .pa-actions a,
    main a.inline-flex.bg-swiss-red,
    .saa-footer__cta
  ) {
    transition: none !important;
  }

  :where(
    .site-header__cta,
    .hero-scene__primary,
    .hero-scene__secondary,
    .btn-primary,
    .btn-secondary,
    .academy-primary,
    .academy-secondary,
    .about-primary,
    .term-btn,
    .usecase-overview__primary,
    .usecase-overview__secondary,
    .usecase-overview__cta-link,
    .contact-submit,
    .pa-actions a,
    main a.inline-flex.bg-swiss-red,
    .saa-footer__cta
  ):hover {
    transform: none !important;
  }
}

/* Global shape decision and full-site interaction coverage. */
:root {
  --saa-cta-radius: 999px;
}

:where(
  .site-header__cta,
  .hero-scene__primary,
  .hero-scene__secondary,
  .btn-primary,
  .btn-secondary,
  .academy-primary,
  .academy-secondary,
  .about-primary,
  .knowledge-primary,
  .knowledge-secondary,
  .term-btn,
  .term-btn--primary,
  .term-btn--ghost,
  .usecase-overview__primary,
  .usecase-overview__secondary,
  .usecase-overview__cta-link,
  .contact-submit,
  .pa-actions a,
  .pa-actions .primary,
  .pa-actions .secondary,
  main a.inline-flex.bg-swiss-red,
  body > nav.fixed:not(.site-header) > a.bg-primary,
  body > nav.fixed:not(.site-header) > a.bg-swiss-red,
  body > nav.fixed:not(.site-header) > div.flex > a.bg-swiss-red
) {
  border-radius: var(--saa-cta-radius) !important;
}

main :where(
  .knowledge-card,
  .knowledge-trust-item,
  .knowledge-visual-card,
  .wissen-expectation,
  .wissen-proof-image,
  .wissen-approach-step,
  .wissen-security-card,
  .wissen-security-image,
  .wissen-cta-card,
  .academy-card,
  .academy-step,
  .academy-image,
  .academy-cta-card,
  .about-card,
  .about-step,
  .about-image,
  .about-region-panel,
  .about-region-item,
  .about-cta-card,
  .contact-form-panel,
  .contact-info-panel,
  .contact-process-panel,
  .contact-step,
  .contact-decision-item,
  .contact-direct-item,
  .pa-card,
  .pa-image,
  .pa-result,
  .skeleton-card,
  .term-step-grid article,
  .term-kpi-grid article,
  .term-compare-grid article,
  .term-industry-grid article,
  .term-faq details
) {
  position: relative;
  transform: translateZ(0);
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease,
    transform 200ms ease !important;
  will-change: transform;
}

main :where(
  .knowledge-card,
  .knowledge-trust-item,
  .knowledge-visual-card,
  .wissen-expectation,
  .wissen-proof-image,
  .wissen-approach-step,
  .wissen-security-card,
  .wissen-security-image,
  .wissen-cta-card,
  .academy-card,
  .academy-step,
  .academy-image,
  .academy-cta-card,
  .about-card,
  .about-step,
  .about-image,
  .about-region-panel,
  .about-region-item,
  .about-cta-card,
  .contact-form-panel,
  .contact-info-panel,
  .contact-process-panel,
  .contact-step,
  .contact-decision-item,
  .contact-direct-item,
  .pa-card,
  .pa-image,
  .pa-result,
  .skeleton-card,
  .term-step-grid article,
  .term-kpi-grid article,
  .term-compare-grid article,
  .term-industry-grid article,
  .term-faq details
):hover,
main :where(
  .knowledge-card,
  .knowledge-trust-item,
  .knowledge-visual-card,
  .wissen-expectation,
  .wissen-proof-image,
  .wissen-approach-step,
  .wissen-security-card,
  .wissen-security-image,
  .wissen-cta-card,
  .academy-card,
  .academy-step,
  .academy-image,
  .academy-cta-card,
  .about-card,
  .about-step,
  .about-image,
  .about-region-panel,
  .about-region-item,
  .about-cta-card,
  .contact-form-panel,
  .contact-info-panel,
  .contact-process-panel,
  .contact-step,
  .contact-decision-item,
  .contact-direct-item,
  .pa-card,
  .pa-image,
  .pa-result,
  .skeleton-card,
  .term-step-grid article,
  .term-kpi-grid article,
  .term-compare-grid article,
  .term-industry-grid article,
  .term-faq details
):focus-within {
  border-color: rgba(217, 30, 24, 0.5) !important;
  box-shadow: 0 22px 58px rgba(7, 17, 28, 0.13) !important;
  transform: translateY(-5px) scale(1.01) !important;
}

main :where(
  .knowledge-visual-card,
  .wissen-proof-image,
  .wissen-security-image,
  .academy-image,
  .about-image,
  .pa-image,
  .term-industry-grid article,
  .term-feature--visual
) {
  overflow: hidden;
}

main :where(
  .knowledge-visual-card,
  .wissen-proof-image,
  .wissen-security-image,
  .academy-image,
  .about-image,
  .pa-image,
  .term-industry-grid article,
  .term-feature--visual
) img {
  transform: scale(1);
  transition: filter 180ms ease, transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  will-change: transform;
}

main :where(
  .knowledge-visual-card,
  .wissen-proof-image,
  .wissen-security-image,
  .academy-image,
  .about-image,
  .pa-image,
  .term-industry-grid article,
  .term-feature--visual
):hover img,
main :where(
  .knowledge-visual-card,
  .wissen-proof-image,
  .wissen-security-image,
  .academy-image,
  .about-image,
  .pa-image,
  .term-industry-grid article,
  .term-feature--visual
):focus-within img {
  filter: contrast(1.04) saturate(1.04) !important;
  transform: scale(1.045) !important;
}

main :where(
  .knowledge-card,
  .knowledge-trust-item,
  .wissen-approach-step,
  .wissen-security-card,
  .academy-card,
  .academy-step,
  .about-card,
  .about-step,
  .about-region-item,
  .contact-step,
  .pa-card,
  .term-step-grid article,
  .term-kpi-grid article,
  .term-compare-grid article
) :where(.material-symbols-outlined, svg) {
  transition: color 180ms ease, stroke 180ms ease, transform 180ms ease !important;
}

main :where(
  .knowledge-card,
  .knowledge-trust-item,
  .wissen-approach-step,
  .wissen-security-card,
  .academy-card,
  .academy-step,
  .about-card,
  .about-step,
  .about-region-item,
  .contact-step,
  .pa-card,
  .term-step-grid article,
  .term-kpi-grid article,
  .term-compare-grid article
):hover :where(.material-symbols-outlined, svg),
main :where(
  .knowledge-card,
  .knowledge-trust-item,
  .wissen-approach-step,
  .wissen-security-card,
  .academy-card,
  .academy-step,
  .about-card,
  .about-step,
  .about-region-item,
  .contact-step,
  .pa-card,
  .term-step-grid article,
  .term-kpi-grid article,
  .term-compare-grid article
):focus-within :where(.material-symbols-outlined, svg) {
  color: #ff2f2a !important;
  stroke: #ff2f2a !important;
  transform: translateY(-3px) scale(1.08) !important;
}

@media (max-width: 680px) {
  main :where(
    .knowledge-card,
    .knowledge-trust-item,
    .knowledge-visual-card,
    .wissen-expectation,
    .wissen-proof-image,
    .wissen-approach-step,
    .wissen-security-card,
    .wissen-security-image,
    .wissen-cta-card,
    .academy-card,
    .academy-step,
    .academy-image,
    .academy-cta-card,
    .about-card,
    .about-step,
    .about-image,
    .about-region-panel,
    .about-region-item,
    .about-cta-card,
    .contact-form-panel,
    .contact-info-panel,
    .contact-process-panel,
    .contact-step,
    .contact-decision-item,
    .contact-direct-item,
    .pa-card,
    .pa-image,
    .pa-result,
    .skeleton-card,
    .term-step-grid article,
    .term-kpi-grid article,
    .term-compare-grid article,
    .term-industry-grid article,
    .term-faq details
  ):hover,
  main :where(
    .knowledge-card,
    .knowledge-trust-item,
    .knowledge-visual-card,
    .wissen-expectation,
    .wissen-proof-image,
    .wissen-approach-step,
    .wissen-security-card,
    .wissen-security-image,
    .wissen-cta-card,
    .academy-card,
    .academy-step,
    .academy-image,
    .academy-cta-card,
    .about-card,
    .about-step,
    .about-image,
    .about-region-panel,
    .about-region-item,
    .about-cta-card,
    .contact-form-panel,
    .contact-info-panel,
    .contact-process-panel,
    .contact-step,
    .contact-decision-item,
    .contact-direct-item,
    .pa-card,
    .pa-image,
    .pa-result,
    .skeleton-card,
    .term-step-grid article,
    .term-kpi-grid article,
    .term-compare-grid article,
    .term-industry-grid article,
    .term-faq details
  ):focus-within {
    transform: translateY(-3px) !important;
  }

  main :where(
    .knowledge-visual-card,
    .wissen-proof-image,
    .wissen-security-image,
    .academy-image,
    .about-image,
    .pa-image,
    .term-industry-grid article,
    .term-feature--visual
  ):hover img {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  main :where(
    .knowledge-card,
    .knowledge-trust-item,
    .knowledge-visual-card,
    .wissen-expectation,
    .wissen-proof-image,
    .wissen-approach-step,
    .wissen-security-card,
    .wissen-security-image,
    .wissen-cta-card,
    .academy-card,
    .academy-step,
    .academy-image,
    .academy-cta-card,
    .about-card,
    .about-step,
    .about-image,
    .about-region-panel,
    .about-region-item,
    .about-cta-card,
    .contact-form-panel,
    .contact-info-panel,
    .contact-process-panel,
    .contact-step,
    .contact-decision-item,
    .contact-direct-item,
    .pa-card,
    .pa-image,
    .pa-result,
    .skeleton-card,
    .term-step-grid article,
    .term-kpi-grid article,
    .term-compare-grid article,
    .term-industry-grid article,
    .term-faq details,
    .knowledge-visual-card img,
    .wissen-proof-image img,
    .wissen-security-image img,
    .academy-image img,
    .about-image img,
    .pa-image img
  ) {
    transition: none !important;
  }

  main :where(
    .knowledge-card,
    .knowledge-trust-item,
    .knowledge-visual-card,
    .wissen-expectation,
    .wissen-proof-image,
    .wissen-approach-step,
    .wissen-security-card,
    .wissen-security-image,
    .wissen-cta-card,
    .academy-card,
    .academy-step,
    .academy-image,
    .academy-cta-card,
    .about-card,
    .about-step,
    .about-image,
    .about-region-panel,
    .about-region-item,
    .about-cta-card,
    .contact-form-panel,
    .contact-info-panel,
    .contact-process-panel,
    .contact-step,
    .contact-decision-item,
    .contact-direct-item,
    .pa-card,
    .pa-image,
    .pa-result,
    .skeleton-card,
    .term-step-grid article,
    .term-kpi-grid article,
    .term-compare-grid article,
    .term-industry-grid article,
    .term-faq details
  ):hover,
  main :where(
    .knowledge-visual-card,
    .wissen-proof-image,
    .wissen-security-image,
    .academy-image,
    .about-image,
    .pa-image
  ):hover img {
    transform: none !important;
  }
}

/* Header CTA shape guard. */
body.page-shell > .site-header .site-header__cta,
.site-header .site-header__actions .site-header__cta,
.site-header__cta,
nav.fixed > .site-header__cta,
body > nav.fixed:not(.site-header) > a.bg-primary,
body > nav.fixed:not(.site-header) > a.bg-swiss-red,
body > nav.fixed:not(.site-header) > div.flex > a.bg-swiss-red,
body > nav.fixed:not(.site-header) a[href="potenzialanalyse.html"] {
  border-radius: var(--saa-cta-radius, 6px) !important;
}

/* Global typography scale: quieter, more premium hierarchy. */
:root {
  --saa-type-hero: clamp(36px, 4vw, 56px);
  --saa-type-h1: clamp(34px, 3.6vw, 52px);
  --saa-type-h2: clamp(28px, 2.7vw, 40px);
  --saa-type-h3: clamp(22px, 1.8vw, 28px);
  --saa-type-h4: clamp(19px, 1.35vw, 23px);
  --saa-type-body-lg: clamp(16px, 1.05vw, 18px);
  --saa-type-body: 16px;
  --saa-type-small: 14px;
}

main :where(
  .hero-scene__title,
  .subpage-hero-scene h1,
  .page-hero.page-hero--scene h1,
  .page-hero:not(.page-hero--scene) h1,
  .term-agent .term-hero h1,
  .usecase-overview__title
) {
  font-size: var(--saa-type-hero) !important;
  font-weight: 820 !important;
  letter-spacing: 0 !important;
  line-height: 1.02 !important;
  max-width: 720px !important;
}

main :where(
  h1:not(.hero-scene__title),
  .text-display-lg,
  .text-display-lg-mobile
) {
  font-size: var(--saa-type-h1) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 1.06 !important;
}

main :where(
  h2,
  .text-headline-xl,
  .font-headline-xl,
  .section-heading h2,
  .knowledge-title,
  .academy-title,
  .about-title,
  .pa-heading h2,
  .pa-evaluation h2,
  .pa-result h2,
  .contact-form-panel h2,
  .contact-info-panel h2,
  .contact-process-panel h2,
  .usecase-overview__section-head h2,
  .usecase-overview__proof h2,
  .usecase-overview__cta h2,
  .term-agent h2,
  .term-solution h2
) {
  font-size: var(--saa-type-h2) !important;
  font-weight: 780 !important;
  letter-spacing: 0 !important;
  line-height: 1.12 !important;
  max-width: 820px;
}

main :where(
  h3,
  .text-headline-lg,
  .font-headline-lg,
  .knowledge-card h3,
  .academy-card h3,
  .about-card h3,
  .pa-card h3,
  .contact-step h3,
  .usecase-card h3,
  .term-feature h3,
  .term-step-grid h3
) {
  font-size: var(--saa-type-h3) !important;
  font-weight: 760 !important;
  letter-spacing: 0 !important;
  line-height: 1.18 !important;
}

main :where(
  h4,
  .process-card h4,
  .bento-cell h4,
  .home-offer-card h4
) {
  font-size: var(--saa-type-h4) !important;
  font-weight: 740 !important;
  letter-spacing: 0 !important;
  line-height: 1.22 !important;
}

main :where(
  .hero-scene__copy,
  .page-copy,
  .section-heading p,
  .knowledge-copy,
  .academy-copy,
  .about-copy,
  .pa-heading p,
  .pa-copy,
  .contact-copy,
  .usecase-overview__copy,
  .term-section-head p
) {
  font-size: var(--saa-type-body-lg) !important;
  line-height: 1.58 !important;
}

main :where(
  p,
  li,
  .text-body-lg,
  .text-body-md,
  .knowledge-card p,
  .knowledge-card li,
  .academy-card p,
  .academy-card li,
  .about-card p,
  .pa-card p,
  .contact-decision-item span,
  .contact-direct-item p,
  .usecase-card__benefit,
  .usecase-card__proof,
  .term-agent p,
  .term-agent li
) {
  font-size: var(--saa-type-body) !important;
  line-height: 1.6 !important;
}

main :where(
  small,
  .text-label-sm,
  .text-label-md,
  .page-kicker,
  .knowledge-label,
  .knowledge-eyebrow,
  .academy-kicker,
  .about-kicker,
  .pa-eyebrow,
  .contact-eyebrow,
  .usecase-overview__eyebrow,
  .term-kicker
) {
  font-size: var(--saa-type-small) !important;
}

@media (max-width: 680px) {
  :root {
    --saa-type-hero: clamp(30px, 8.3vw, 36px);
    --saa-type-h1: clamp(29px, 7.8vw, 34px);
    --saa-type-h2: clamp(25px, 6.6vw, 31px);
    --saa-type-h3: clamp(20px, 5.5vw, 24px);
    --saa-type-h4: clamp(18px, 4.8vw, 21px);
    --saa-type-body-lg: 16px;
    --saa-type-body: 15px;
    --saa-type-small: 12px;
  }

  main :where(
    .hero-scene__title,
    .subpage-hero-scene h1,
    .page-hero.page-hero--scene h1,
    .page-hero:not(.page-hero--scene) h1,
    .usecase-overview__title,
    .term-agent .term-hero h1
  ) {
    line-height: 1.05 !important;
    max-width: calc(var(--saig-vw) - 40px) !important;
  }
}

/* Homepage visual coherence pass outside hero. */
.home-page .home-offer-card {
  min-height: 560px !important;
  overflow: hidden !important;
}

.home-page .home-offer-card .visual-media--tile {
  aspect-ratio: 16 / 9 !important;
  border: 1px solid rgba(217, 30, 24, 0.16) !important;
  margin-bottom: 28px !important;
  min-height: 0 !important;
}

.home-page .home-offer-card .visual-media--tile img {
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  width: 100% !important;
}

.home-page .home-offer-card:nth-of-type(3) .visual-media--tile img,
.home-page .home-offer-card .visual-media--focus-right img {
  object-position: center center !important;
}

.home-page .bento-cell {
  min-height: 360px !important;
  overflow: hidden !important;
  padding: clamp(24px, 3vw, 38px) !important;
}

.home-page .bento-cell .visual-media--bento {
  aspect-ratio: 16 / 7 !important;
  border: 1px solid rgba(7, 17, 28, 0.08) !important;
  margin-top: 26px !important;
  min-height: 168px !important;
  position: relative !important;
}

.home-page .bento-cell .visual-media--bento::after,
.home-page .home-offer-card .visual-media--tile::after {
  content: none !important;
}

.home-page .bento-cell .visual-media--bento img {
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  width: 100% !important;
}

.home-page .bento-cell:nth-child(1) .visual-media--bento img {
  object-position: center center !important;
}

.home-page .bento-cell:nth-child(2) .visual-media--bento img,
.home-page .bento-cell:nth-child(3) .visual-media--bento img {
  object-position: center center !important;
}

.home-page .bento-cell:nth-child(4) .visual-media--bento img {
  object-position: center center !important;
}

.home-page .home-agent-board {
  background:
    linear-gradient(90deg, rgba(217, 30, 24, 0.08), transparent 42%),
    radial-gradient(circle at 66% 30%, rgba(217, 30, 24, 0.16), transparent 32%),
    #06111d !important;
  border: 1px solid rgba(239, 241, 243, 0.18) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 34px 90px rgba(2, 10, 18, 0.28) !important;
  min-height: 470px !important;
}

.home-page .home-agent-board::before {
  background:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px) !important;
  background-size: 32px 32px !important;
  opacity: 0.72 !important;
}

.home-page .home-agent-board__flow {
  opacity: 1 !important;
}

.home-page .home-agent-board__flow span {
  animation: homeSignalRun 4.2s ease-in-out infinite !important;
  background: linear-gradient(90deg, transparent, rgba(217, 30, 24, 0.86), transparent) !important;
  height: 1px !important;
}

.home-page .home-agent-board__flow span:nth-child(2) {
  animation-delay: 0.55s !important;
}

.home-page .home-agent-board__flow span:nth-child(3) {
  animation-delay: 1.1s !important;
}

.home-page .home-agent-card {
  backdrop-filter: blur(10px) !important;
  background: rgba(8, 24, 39, 0.78) !important;
  border-color: rgba(239, 241, 243, 0.16) !important;
}

.home-page .home-agent-card--active,
.home-page .home-agent-card:hover,
.home-page .home-agent-card:focus-within {
  background: linear-gradient(90deg, rgba(217, 30, 24, 0.24), rgba(8, 24, 39, 0.86)) !important;
  border-color: rgba(217, 30, 24, 0.62) !important;
}

.home-page .home-agent-board__result {
  background: rgba(8, 24, 39, 0.82) !important;
  border-color: rgba(217, 30, 24, 0.42) !important;
}

@keyframes homeSignalRun {
  0%,
  100% {
    opacity: 0.22;
    transform: translateX(-16px) scaleX(0.64);
  }
  48% {
    opacity: 1;
    transform: translateX(18px) scaleX(1);
  }
}

@media (max-width: 1024px) {
  .home-page .home-offer-card {
    min-height: 0 !important;
  }

  .home-page .home-agent-board {
    min-height: 0 !important;
  }

  .home-page .bento-cell {
    min-height: 0 !important;
  }

  .home-page .bento-cell .visual-media--bento {
    aspect-ratio: 16 / 9 !important;
    min-height: 190px !important;
  }
}

@media (max-width: 680px) {
  .home-page .home-offer-card,
  .home-page .bento-cell {
    padding: 22px !important;
  }

  .home-page .home-offer-card .visual-media--tile,
  .home-page .bento-cell .visual-media--bento {
    margin-bottom: 22px !important;
    margin-top: 20px !important;
    min-height: 176px !important;
  }

  .home-page .home-agent-board {
    padding: 22px !important;
  }

  .home-page .home-agent-card {
    grid-template-columns: 34px 1fr !important;
    padding: 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .home-agent-board__flow span {
    animation: none !important;
  }
}

/* KI-Loesungen card visuals: keep generated 4:3 assets complete and clean. */
.usecase-overview-page .usecase-card__media {
  aspect-ratio: 4 / 3 !important;
  height: auto !important;
  margin-bottom: 20px !important;
}

.usecase-overview-page .usecase-card__media img,
.usecase-overview-page .usecase-card__media:hover img,
.usecase-overview-page .usecase-card:focus-within .usecase-card__media img {
  display: block !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: none !important;
  width: 100% !important;
}

.usecase-overview-page .usecase-overview__cta .usecase-overview__inner {
  align-items: center !important;
  display: flex !important;
  flex-direction: column !important;
  text-align: center !important;
}

.usecase-overview-page .usecase-overview__cta h2,
.usecase-overview-page .usecase-overview__cta p {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* Restored subpage shell for pages recovered after the CSS rollback. */
.restore-page {
  background: var(--saa-bg);
  color: var(--saa-text);
}

.restore-main {
  overflow: hidden;
  padding-top: var(--saa-header-h);
}

.restore-section {
  padding: clamp(72px, 8vw, 132px) clamp(20px, 5vw, 72px);
}

.restore-inner {
  margin: 0 auto;
  max-width: 1280px;
}

.restore-hero {
  align-items: center;
  display: grid;
  gap: clamp(36px, 6vw, 84px);
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1fr);
  min-height: min(760px, calc(100vh - var(--saa-header-h)));
}

.restore-hero h1,
.restore-section h2 {
  color: var(--saa-text);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.04;
  margin: 0;
}

.restore-hero h1 {
  border-left: 4px solid var(--saa-red);
  font-size: clamp(42px, 5.2vw, 74px);
  padding-left: clamp(20px, 2vw, 30px);
}

.restore-section h2 {
  font-size: clamp(32px, 3.4vw, 52px);
  max-width: 820px;
}

.restore-lead {
  color: var(--saa-text-muted);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.65;
  margin: 28px 0 0;
  max-width: 760px;
}

.restore-kicker {
  color: var(--saa-red);
  display: block;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  margin-bottom: 18px;
  text-transform: uppercase;
}

.restore-visual {
  aspect-ratio: 16 / 10;
  background: #07111c;
  border-left: 4px solid var(--saa-red);
  box-shadow: 0 34px 100px rgba(7, 17, 28, 0.16);
  margin: 0;
  overflow: hidden;
}

.restore-visual img {
  display: block;
  filter: none !important;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 1 !important;
  width: 100%;
}

.restore-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(34px, 5vw, 64px);
}

.restore-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.restore-card {
  background: var(--saa-surface);
  border: 1px solid var(--saa-border);
  border-left: 4px solid var(--saa-red);
  color: var(--saa-text);
  min-height: 220px;
  padding: clamp(26px, 3vw, 42px);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.restore-card:hover {
  border-color: rgba(217, 30, 24, 0.45);
  box-shadow: 0 22px 70px rgba(7, 17, 28, 0.1);
  transform: translateY(-3px);
}

.restore-card h3 {
  color: var(--saa-text);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 900;
  line-height: 1.12;
  margin: 0 0 16px;
}

.restore-card p,
.restore-card li {
  color: var(--saa-text-muted);
  font-size: 17px;
  line-height: 1.58;
}

.restore-card ul,
.restore-list {
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}

.restore-card li::before,
.restore-list li::before {
  color: var(--saa-red);
  content: "✓";
  font-weight: 900;
  margin-right: 10px;
}

.restore-band {
  background: #07111c;
  color: #fff;
}

.restore-band h2,
.restore-band h3,
.restore-band .restore-card h3 {
  color: #fff;
}

.restore-band .restore-lead,
.restore-band .restore-card p,
.restore-band .restore-card li {
  color: rgba(239, 241, 243, 0.74);
}

.restore-band .restore-card {
  background: rgba(8, 24, 39, 0.9);
  border-color: rgba(239, 241, 243, 0.14);
  border-left-color: var(--saa-red);
}

.restore-steps {
  counter-reset: step;
  display: grid;
  gap: 1px;
  margin-top: clamp(34px, 5vw, 64px);
}

.restore-step {
  align-items: start;
  background: var(--saa-surface);
  border: 1px solid var(--saa-border);
  counter-increment: step;
  display: grid;
  gap: 24px;
  grid-template-columns: 88px minmax(0, 1fr);
  padding: 28px;
}

.restore-step::before {
  background: var(--saa-red);
  color: #fff;
  content: counter(step, decimal-leading-zero);
  display: grid;
  font-weight: 900;
  height: 48px;
  place-items: center;
  width: 48px;
}

.restore-step h3 {
  margin-top: 0;
}

.restore-cta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 34px;
}

.restore-button {
  align-items: center;
  background: var(--saa-red);
  color: #fff !important;
  display: inline-flex;
  font-size: 15px;
  font-weight: 900;
  justify-content: center;
  min-height: 56px;
  padding: 0 28px;
  text-decoration: none !important;
}

.restore-button--secondary {
  background: transparent;
  border: 1px solid currentColor;
  color: var(--saa-text) !important;
}

.restore-form {
  display: grid;
  gap: 18px;
  margin-top: 34px;
}

.restore-form-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.restore-field label {
  color: var(--saa-text);
  display: block;
  font-size: 13px;
  font-weight: 900;
  margin-bottom: 8px;
}

.restore-field input,
.restore-field select,
.restore-field textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--saa-border);
  color: var(--saa-text);
  font: inherit;
  min-height: 48px;
  padding: 10px 0;
  width: 100%;
}

.restore-field textarea {
  min-height: 130px;
  resize: vertical;
}

@media (max-width: 1024px) {
  .restore-main {
    padding-top: var(--saa-header-h-mobile);
  }

  .restore-hero,
  .restore-grid,
  .restore-grid--two {
    grid-template-columns: 1fr;
  }

  .restore-hero {
    min-height: 0;
  }

  .restore-visual {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 680px) {
  .restore-section {
    padding: 58px 20px;
  }

  .restore-hero h1 {
    font-size: clamp(34px, 10vw, 46px);
    padding-left: 18px;
  }

  .restore-lead {
    font-size: 17px;
  }

  .restore-card {
    min-height: 0;
    padding: 24px;
  }

  .restore-step {
    grid-template-columns: 1fr;
  }

  .restore-form-grid {
    grid-template-columns: 1fr;
  }
}

/* Visual and CTA system contract. */
:root {
  --saa-cta-radius: 999px;
}

main :where(
  .visual-media,
  .visual-placeholder,
  .home-trust-proof__media,
  .knowledge-visual-card,
  .wissen-proof-image,
  .wissen-security-image,
  .academy-image,
  .about-image,
  .pa-image,
  .usecase-card__media,
  .term-showcase-card,
  .term-feature--visual,
  .term-industry-grid article,
  .bento-cell,
  .home-offer-card
)::before,
main :where(
  .visual-media,
  .visual-placeholder,
  .home-trust-proof__media,
  .knowledge-visual-card,
  .wissen-proof-image,
  .wissen-security-image,
  .academy-image,
  .about-image,
  .pa-image,
  .usecase-card__media,
  .term-showcase-card,
  .term-feature--visual,
  .term-industry-grid article,
  .bento-cell,
  .home-offer-card
)::after {
  background: none !important;
  content: none !important;
  display: none !important;
}

main :where(
  .visual-media:not(.visual-media--hero):not(.visual-media--hero-bleed),
  .home-trust-proof__media,
  .knowledge-visual-card,
  .wissen-proof-image,
  .wissen-security-image,
  .academy-image,
  .about-image,
  .pa-image,
  .usecase-card__media,
  .term-showcase-card,
  .term-feature--visual
) {
  background: color-mix(in srgb, var(--saa-surface, #f4f7fa) 72%, #07111c 28%) !important;
}

.home-page .home-offer-card .visual-media--tile,
.home-page .bento-cell .visual-media--bento,
.home-page .home-trust-proof__media,
.home-page .visual-media--portrait {
  background: color-mix(in srgb, var(--saa-surface, #f4f7fa) 72%, #07111c 28%) !important;
}

main .hero-scene__media,
main .visual-media--hero,
main .visual-media--hero-bleed,
main .subpage-hero-scene .visual-media,
main .page-hero.page-hero--scene .visual-media {
  background: #06111d !important;
}

main .hero-scene__media img,
main .hero-scene__media:hover img,
main .visual-media--hero img,
main .visual-media--hero-bleed img,
main .subpage-hero-scene .visual-media img,
main .page-hero.page-hero--scene .visual-media img {
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  width: 100% !important;
}

main :where(
  .visual-media:not(.visual-media--hero):not(.visual-media--hero-bleed),
  .home-trust-proof__media,
  .knowledge-visual-card,
  .wissen-proof-image,
  .wissen-security-image,
  .academy-image,
  .about-image,
  .pa-image,
  .usecase-card__media,
  .term-showcase-card,
  .term-feature--visual
) img,
main :where(
  .visual-media:not(.visual-media--hero):not(.visual-media--hero-bleed),
  .home-trust-proof__media,
  .knowledge-visual-card,
  .wissen-proof-image,
  .wissen-security-image,
  .academy-image,
  .about-image,
  .pa-image,
  .usecase-card__media,
  .term-showcase-card,
  .term-feature--visual
):hover img,
main :where(
  .visual-media:not(.visual-media--hero):not(.visual-media--hero-bleed),
  .home-trust-proof__media,
  .knowledge-visual-card,
  .wissen-proof-image,
  .wissen-security-image,
  .academy-image,
  .about-image,
  .pa-image,
  .usecase-card__media,
  .term-showcase-card,
  .term-feature--visual
):focus-within img {
  filter: none !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: none !important;
  width: 100% !important;
}

main .visual-media:not(.visual-media--hero):not(.visual-media--hero-bleed) img,
main .visual-media:not(.visual-media--hero):not(.visual-media--hero-bleed):hover img,
main .visual-media:not(.visual-media--hero):not(.visual-media--hero-bleed):focus-within img,
main .home-trust-proof__media img,
main .knowledge-visual-card img,
main .wissen-proof-image img,
main .wissen-security-image img,
main .academy-image img,
main .about-image img,
main .pa-image img,
main .usecase-card__media img,
main .usecase-card__media:hover img,
main .usecase-card:focus-within .usecase-card__media img,
main .term-showcase-card img,
main .term-feature--visual img {
  filter: none !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: none !important;
  width: 100% !important;
}

/* Blueprint-Nachtrag 2026-08-31: object-fit war fuer alle Nicht-Hero-Bilder
   (Bento-Kacheln, Trust-Bilder, Wissen/Academy/Ueber-uns-Bilder, Use-Case-
   Karten) auf "contain" gesetzt - das Bild wirkt dadurch kleiner/mit
   Rand statt die Flaeche zu fuellen. Auf "cover" umgestellt (Ruhe-, Hover-
   UND Focus-Zustand, wie oben), Bildflaeche/-groesse bleibt unveraendert. */

/* KI-Loesungen final card polish: large visuals, aligned CTAs, clean decision glow. */
.usecase-overview-page .usecase-grid {
  align-items: stretch !important;
}

.usecase-overview-page .usecase-card {
  height: 100% !important;
}

.usecase-overview-page .usecase-card__body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

.usecase-overview-page .usecase-card__media {
  aspect-ratio: 4 / 3 !important;
  height: auto !important;
  margin-bottom: 20px !important;
}

.usecase-overview-page .usecase-card__media img,
.usecase-overview-page .usecase-card__media:hover img,
.usecase-overview-page .usecase-card:hover .usecase-card__media img,
.usecase-overview-page .usecase-card:focus-within .usecase-card__media img {
  display: block !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  width: 100% !important;
}

.usecase-overview-page .usecase-card__link {
  justify-content: center !important;
  margin-top: 16px !important;
  white-space: nowrap !important;
}

.usecase-overview-page .usecase-overview__decision-panel {
  background:
    radial-gradient(circle at 92% 100%, rgba(217, 30, 24, 0.26), rgba(217, 30, 24, 0) 42%),
    linear-gradient(135deg, rgba(217, 30, 24, 0.14), transparent 38%),
    rgba(255, 255, 255, 0.055) !important;
}

.usecase-overview-page .usecase-overview__cta .usecase-overview__inner {
  align-items: center !important;
  display: flex !important;
  flex-direction: column !important;
  text-align: center !important;
}

.usecase-overview-page .usecase-overview__cta h2,
.usecase-overview-page .usecase-overview__cta p {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.home-page .home-offer-card .visual-media--tile img,
.home-page .home-offer-card .visual-media--tile:hover img,
.home-page .home-offer-card .visual-media--tile:focus-within img,
.home-page .bento-cell .visual-media--bento img,
.home-page .bento-cell .visual-media--bento:hover img,
.home-page .bento-cell .visual-media--bento:focus-within img,
.home-page .home-trust-proof__media img,
.home-page .home-trust-proof__media:hover img,
.home-page .home-trust-proof__media:focus-within img,
.home-page .visual-media--portrait img,
.home-page .visual-media--portrait:hover img,
.home-page .visual-media--portrait:focus-within img {
  filter: none !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 42% !important;
  transform: none !important;
  width: 100% !important;
}

.home-page .home-offer-card .visual-media--tile,
.home-page .bento-cell .visual-media--bento,
.home-page .home-trust-proof__media,
.home-page .visual-media--portrait {
  background: #06111d !important;
  overflow: hidden !important;
}

.home-page .home-offer-card .visual-media--tile img,
.home-page .home-offer-card .visual-media--tile:hover img,
.home-page .home-offer-card .visual-media--tile:focus-within img,
.home-page .bento-cell .visual-media--bento img,
.home-page .bento-cell .visual-media--bento:hover img,
.home-page .bento-cell .visual-media--bento:focus-within img,
.home-page .home-trust-proof__media img,
.home-page .home-trust-proof__media:hover img,
.home-page .home-trust-proof__media:focus-within img,
.home-page .visual-media--portrait img,
.home-page .visual-media--portrait:hover img,
.home-page .visual-media--portrait:focus-within img {
  display: block !important;
  filter: none !important;
  height: 100% !important;
  max-height: none !important;
  max-width: none !important;
  min-height: 100% !important;
  object-fit: cover !important;
  object-position: center 42% !important;
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  width: 100% !important;
}

:where(
  .site-header__cta,
  .hero-scene__primary,
  .hero-scene__secondary,
  .btn-primary,
  .btn-secondary,
  .academy-primary,
  .academy-secondary,
  .about-primary,
  .about-secondary,
  .knowledge-primary,
  .knowledge-secondary,
  .term-btn,
  .term-btn--primary,
  .term-btn--ghost,
  .usecase-overview__primary,
  .usecase-overview__secondary,
  .usecase-overview__cta-link,
  .contact-submit,
  .pa-actions a,
  main a.inline-flex.bg-swiss-red,
  body > nav.fixed:not(.site-header) a[href="potenzialanalyse.html"]
) {
  border-radius: var(--saa-cta-radius) !important;
}

:where(
  .hero-scene__secondary,
  .btn-secondary,
  .academy-secondary,
  .about-secondary,
  .knowledge-secondary,
  .term-btn--ghost,
  .usecase-overview__secondary,
  .pa-actions .secondary
) {
  background: rgba(8, 24, 39, 0.34) !important;
  border: 1px solid rgba(239, 241, 243, 0.72) !important;
  box-shadow: none !important;
  color: #eff1f3 !important;
}

main :where(
  .page-section:not(.page-section--dark),
  .pa-section:not(.pa-section--red),
  .contact-section,
  .academy-cta,
  .about-cta,
  .bg-white,
  .bg-surface,
  .bg-surface-alt
) :where(
  .hero-scene__secondary,
  .btn-secondary,
  .academy-secondary,
  .about-secondary,
  .knowledge-secondary,
  .term-btn--ghost,
  .usecase-overview__secondary,
  .pa-actions .secondary
) {
  background: #fff !important;
  border-color: #07111c !important;
  color: #07111c !important;
}

:where(
  .hero-scene__secondary,
  .btn-secondary,
  .academy-secondary,
  .about-secondary,
  .knowledge-secondary,
  .term-btn--ghost,
  .usecase-overview__secondary,
  .pa-actions .secondary
):hover,
:where(
  .hero-scene__secondary,
  .btn-secondary,
  .academy-secondary,
  .about-secondary,
  .knowledge-secondary,
  .term-btn--ghost,
  .usecase-overview__secondary,
  .pa-actions .secondary
):focus-visible {
  background: #d91e18 !important;
  border-color: #d91e18 !important;
  box-shadow: 0 18px 46px rgba(217, 30, 24, 0.24) !important;
  color: #fff !important;
}

/* Homepage visual correction: fill the card, do not show placeholder gutters. */
.home-page .home-offer-card .visual-media--tile,
.home-page .bento-cell .visual-media--bento,
.home-page .home-trust-proof__media,
.home-page .visual-media--portrait {
  background: #06111d !important;
  overflow: hidden !important;
}

.home-page .home-offer-card .visual-media--tile {
  aspect-ratio: 16 / 9 !important;
  min-height: clamp(190px, 15vw, 240px) !important;
}

.home-page .bento-cell .visual-media--bento {
  aspect-ratio: 16 / 7 !important;
  min-height: clamp(190px, 16vw, 260px) !important;
}

.home-page .home-trust-proof__media {
  aspect-ratio: 16 / 10 !important;
}

/* 09.09.: wirkte auf voller Kartenbreite zu dominant neben dem knappen
   Textblock darunter (Rückmeldung Joshua). Auf 62% begrenzt und zentriert,
   dieselbe Regel wie bei den übrigen Teil-A-Bildern. Nur ab 768px, auf
   Mobil bleibt die volle Kartenbreite. */
@media (min-width: 768px) {
  .home-page .home-trust-proof__media {
    margin-inline: auto !important;
    max-width: 62% !important;
  }
}

.home-page .home-offer-card .visual-media--tile img,
.home-page .home-offer-card .visual-media--tile:hover img,
.home-page .home-offer-card .visual-media--tile:focus-within img,
.home-page .bento-cell .visual-media--bento img,
.home-page .bento-cell .visual-media--bento:hover img,
.home-page .bento-cell .visual-media--bento:focus-within img,
.home-page .home-trust-proof__media img,
.home-page .home-trust-proof__media:hover img,
.home-page .home-trust-proof__media:focus-within img,
.home-page .visual-media--portrait img,
.home-page .visual-media--portrait:hover img,
.home-page .visual-media--portrait:focus-within img {
  display: block !important;
  filter: none !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: none !important;
  width: 100% !important;
}

.home-page .home-offer-card:nth-of-type(1) .visual-media--tile img,
.home-page .bento-cell:nth-child(1) .visual-media--bento img {
  object-position: 50% 42% !important;
}

.home-page .home-offer-card:nth-of-type(2) .visual-media--tile img,
.home-page .bento-cell:nth-child(2) .visual-media--bento img {
  object-position: 50% 44% !important;
}

.home-page .home-offer-card:nth-of-type(3) .visual-media--tile img,
.home-page .home-offer-card .visual-media--focus-right img,
.home-page .bento-cell:nth-child(3) .visual-media--bento img,
.home-page .bento-cell:nth-child(4) .visual-media--bento img {
  object-position: 54% 44% !important;
}

.home-page .home-trust-proof__media img,
.home-page .visual-media--portrait img {
  object-position: 52% 42% !important;
}

.home-page .home-agent-board {
  color: inherit !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

.home-page .home-agent-board:visited {
  color: inherit !important;
}

.home-page .home-agent-board * {
  text-decoration: none !important;
}

.home-page .home-agent-board:hover,
.home-page .home-agent-board:focus-visible {
  border-color: rgba(217, 30, 24, 0.62) !important;
}

.home-page .home-agent-card {
  align-items: start !important;
  overflow: hidden !important;
}

.home-page .home-agent-card > div {
  min-width: 0 !important;
}

.home-page .home-agent-card strong,
.home-page .home-agent-card small{
  overflow-wrap: anywhere !important;
}

.home-page .home-agent-card small {
  display: block !important;
  max-width: 100% !important;
}

@media (max-width: 680px) {
  .home-page .home-offer-card .visual-media--tile,
  .home-page .bento-cell .visual-media--bento {
    aspect-ratio: 16 / 10 !important;
    min-height: 210px !important;
  }
}

/* Tereza global repair: final visual system pass. */
:root {
  --saa-type-hero: clamp(34px, 3.4vw, 50px);
  --saa-type-h1: clamp(32px, 3.05vw, 46px);
  --saa-type-h2: clamp(26px, 2.35vw, 36px);
  --saa-type-h3: clamp(21px, 1.65vw, 26px);
  --saa-type-h4: clamp(18px, 1.18vw, 22px);
  --saa-cta-radius: 999px;
  --saa-cta-red: #d91e18;
  --saa-ink: #07111c;
  --saa-paper: #ffffff;
}

main :where(.hero-scene__title, .subpage-hero-scene h1, .page-hero.page-hero--scene h1, .page-hero:not(.page-hero--scene) h1, .term-agent .term-hero h1, .usecase-overview__title) {
  font-size: var(--saa-type-hero) !important;
  letter-spacing: 0 !important;
  line-height: 1.04 !important;
}

main :where(h1:not(.hero-scene__title), .text-display-lg, .text-display-lg-mobile) {
  font-size: var(--saa-type-h1) !important;
  line-height: 1.08 !important;
}

main :where(h2, .text-headline-xl, .font-headline-xl, .section-heading h2, .knowledge-title, .academy-title, .about-title, .pa-heading h2, .pa-evaluation h2, .pa-result h2, .contact-form-panel h2, .contact-info-panel h2, .contact-process-panel h2, .usecase-overview__section-head h2, .usecase-overview__proof h2, .usecase-overview__cta h2, .term-agent h2, .term-solution h2) {
  font-size: var(--saa-type-h2) !important;
  line-height: 1.14 !important;
}

main :where(h3, .text-headline-lg, .font-headline-lg, .knowledge-card h3, .academy-card h3, .about-card h3, .pa-card h3, .contact-step h3, .usecase-card h3, .term-feature h3, .term-step-grid h3) {
  font-size: var(--saa-type-h3) !important;
  line-height: 1.18 !important;
}

main :where(h4, .process-card h4, .bento-cell h4, .home-offer-card h4) {
  font-size: var(--saa-type-h4) !important;
  line-height: 1.22 !important;
}

.site-header__cta,
.hero-scene__primary,
.btn-primary,
.term-btn--primary,
.usecase-overview__cta-link,
body > nav.fixed:not(.site-header) > a.bg-primary,
body > nav.fixed:not(.site-header) > a.bg-swiss-red,
body > nav.fixed:not(.site-header) > div.flex > a.bg-swiss-red,
body > nav.fixed:not(.site-header) a[href="potenzialanalyse.html"] {
  background: var(--saa-cta-red) !important;
  border: 1px solid var(--saa-cta-red) !important;
  border-radius: var(--saa-cta-radius) !important;
  color: #fff !important;
  font-weight: 500 !important;
  min-height: 52px !important;
  text-decoration: none !important;
}

.site-header__cta:hover,
.hero-scene__primary:hover,
.btn-primary:hover,
.term-btn--primary:hover,
.usecase-overview__cta-link:hover {
  background: #c91612 !important;
  border-color: #c91612 !important;
  transform: translateY(-1px);
}

.hero-scene__secondary,
.btn-secondary,
.term-btn--ghost,
.academy-cta,
.about-cta,
a[class*="border-b"][href*="ki-loesungen"] {
  background: rgba(255, 255, 255, .94) !important;
  border: 1px solid rgba(7, 17, 28, .38) !important;
  border-radius: var(--saa-cta-radius) !important;
  color: var(--saa-ink) !important;
  font-weight: 500 !important;
  min-height: 52px !important;
  padding: 0 24px !important;
  text-decoration: none !important;
}

.bento-card > a,
.knowledge-primary,
.academy-primary,
.about-primary,
.pa-actions .primary,
.pa-actions .secondary,
.saa-footer__cta {
  align-items: center !important;
  border-radius: var(--saa-cta-radius) !important;
  display: inline-flex !important;
  font-weight: 500 !important;
  justify-content: center !important;
  min-height: 46px !important;
  padding: 0 18px !important;
  text-decoration: none !important;
}

.bento-card > a,
.pa-actions .secondary {
  background: transparent !important;
  border: 1px solid rgba(7, 17, 28, .34) !important;
  color: var(--saa-ink) !important;
}

.knowledge-primary,
.academy-primary,
.about-primary,
.pa-actions .primary {
  background: var(--saa-cta-red) !important;
  border: 1px solid var(--saa-cta-red) !important;
  color: #fff !important;
}

.visual-media,
.visual-media--tile,
.visual-media--bento,
.visual-media--wide,
.visual-media--cta,
.term-feature--wide,
.term-hero__visual,
.term-industry-grid figure,
.home-offer-card figure,
.bento-cell figure {
  background: transparent !important;
  overflow: hidden !important;
}

.visual-media img,
.visual-media--tile img,
.visual-media--bento img,
.visual-media--wide img,
.visual-media--cta img,
.term-feature--wide img,
.term-hero__visual img,
.term-industry-grid img,
.home-offer-card figure img,
.bento-cell figure img {
  display: block !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 42% !important;
  width: 100% !important;
}

.visual-media--focus-right img,
.home-page [data-asset-slot="homepage.tile.loesungen"] img,
.home-page [data-asset-slot="homepage.solution.inbox-master"] img {
  object-position: 58% 42% !important;
}

.home-page [data-asset-slot="homepage.tile.beratung"] img,
.home-page [data-asset-slot="homepage.tile.dienste"] img,
.home-page [data-asset-slot="homepage.solution.telefon-agent"] img {
  object-position: center 40% !important;
}

.home-page .visual-media--tile {
  aspect-ratio: 16 / 10 !important;
  border: 1px solid rgba(7, 17, 28, .14) !important;
  height: auto !important;
  margin-bottom: 30px !important;
  min-height: 190px !important;
}

/* 09.09.: "Wer wir sind" ist die einzige Stelle, an der diese generische
   Kachel (ausserhalb der drei Säulen-Karten) ihre Spalte voll ausfüllt --
   Rückmeldung Joshua, wirkte neben dem kurzen Textblock zu dominant. Auf
   62% begrenzt und zentriert, wie die entsprechenden Regeln auf den
   Unterseiten (.saa-figure--wide, .lp-figure--wide). Nur ab 768px, auf
   Mobil bleibt die volle Spaltenbreite. */
@media (min-width: 768px) {
  .home-page [data-asset-slot="homepage.about.team"] {
    margin-inline: auto !important;
    max-width: 62% !important;
  }
}

.home-page .visual-media--bento {
  aspect-ratio: 16 / 7 !important;
  height: auto !important;
  margin-top: 26px !important;
  min-height: 180px !important;
}

.home-page .process-card,
.home-page .saa-signal-card,
.home-page .bento-cell,
.home-page .home-offer-card {
  box-shadow: none !important;
}

.home-page .home-card-meta {
  color: rgba(7, 17, 28, .74) !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
}

.home-page .bg-graphite .home-card-meta{
  color: rgba(239, 241, 243, .86) !important;
}

.home-page .home-agent-board {
  color: #fff !important;
  min-height: clamp(540px, 38vw, 620px) !important;
  overflow: hidden !important;
  text-decoration: none !important;
}

.home-page .home-agent-board__stack {
  gap: 14px !important;
}

.home-page .home-agent-card {
  align-items: center !important;
  display: grid !important;
  gap: 14px !important;
  grid-template-columns: 34px minmax(0, 1fr) minmax(104px, 128px) !important;
  min-height: 76px !important;
  padding: 16px 18px !important;
}

.home-page .home-agent-card > div {
  min-width: 0 !important;
}

.home-page .home-agent-card strong,
.home-page .home-agent-card small{
  overflow-wrap: anywhere !important;
}

.home-page .home-agent-card small {
  color: rgba(239, 241, 243, .72) !important;
  line-height: 1.36 !important;
}

@media (max-width: 900px) {
  .home-page .home-agent-card {
    grid-template-columns: 30px minmax(0, 1fr) !important;
  }
}

@media (max-width: 680px) {
  :root {
    --saa-type-hero: clamp(30px, 8.1vw, 36px);
    --saa-type-h1: clamp(28px, 7.4vw, 33px);
    --saa-type-h2: clamp(24px, 6.2vw, 30px);
    --saa-type-h3: clamp(20px, 5.2vw, 23px);
    --saa-type-h4: 18px;
    --saa-mobile-section-y: clamp(56px, 14vw, 76px);
    --saa-mobile-gap: clamp(18px, 5vw, 28px);
    --saa-mobile-card-pad: clamp(22px, 6vw, 28px);
  }

  main :where(section.py-32, section.py-20, .page-section, .term-section, .term-dark, .pa-section, .academy-section, .about-section, .knowledge-section) {
    padding-bottom: var(--saa-mobile-section-y) !important;
    padding-top: var(--saa-mobile-section-y) !important;
  }

  main :where(.swiss-grid, .grid, .sector-grid, .term-step-grid, .term-feature-grid, .term-kpi-grid, .term-trust__grid) {
    gap: var(--saa-mobile-gap) !important;
  }

  .hero-scene__primary,
  .hero-scene__secondary,
  .btn-primary,
  .btn-secondary,
  .term-btn,
  .usecase-overview__cta-link {
    width: 100% !important;
  }

  .home-page .visual-media--tile,
  .home-page .visual-media--bento {
    min-height: 190px !important;
  }

  .home-page .process-card,
  .home-page .saa-signal-card,
  .home-page .bento-cell,
  .home-page .home-offer-card,
  .bento-card,
  .knowledge-card,
  .academy-card,
  .about-card,
  .pa-card {
    padding: var(--saa-mobile-card-pad) !important;
  }

  main :where(p, li, .text-body-lg, .text-body-md) {
    max-width: 100%;
  }
}

/* Tereza visual rescue: images must render as real visuals, not placeholders. */
main :where(
  .hero-scene__media,
  .visual-media,
  .visual-media--tile,
  .visual-media--bento,
  .visual-media--wide,
  .visual-media--cta,
  .home-trust-proof__media,
  .knowledge-visual-card,
  .wissen-proof-image,
  .wissen-security-image,
  .academy-image,
  .about-image,
  .pa-image,
  .usecase-card__media,
  .term-showcase-card,
  .term-feature--visual,
  .term-hero__visual,
  .term-industry-grid figure
) {
  background: transparent !important;
  display: block !important;
  overflow: hidden !important;
  position: relative !important;
}

main :where(
  .visual-media,
  .visual-media--tile,
  .visual-media--bento,
  .visual-media--wide,
  .visual-media--cta,
  .home-trust-proof__media,
  .knowledge-visual-card,
  .wissen-proof-image,
  .wissen-security-image,
  .academy-image,
  .about-image,
  .pa-image,
  .usecase-card__media,
  .term-showcase-card,
  .term-feature--visual,
  .term-hero__visual,
  .term-industry-grid figure
) {
  min-height: 220px !important;
}

main .hero-scene__media {
  min-height: 100% !important;
}

main :where(
  .hero-scene__media,
  .visual-media,
  .visual-media--tile,
  .visual-media--bento,
  .visual-media--wide,
  .visual-media--cta,
  .home-trust-proof__media,
  .knowledge-visual-card,
  .wissen-proof-image,
  .wissen-security-image,
  .academy-image,
  .about-image,
  .pa-image,
  .usecase-card__media,
  .term-showcase-card,
  .term-feature--visual,
  .term-hero__visual,
  .term-industry-grid figure
) > img,
main :where(
  .hero-scene__media,
  .visual-media,
  .visual-media--tile,
  .visual-media--bento,
  .visual-media--wide,
  .visual-media--cta,
  .home-trust-proof__media,
  .knowledge-visual-card,
  .wissen-proof-image,
  .wissen-security-image,
  .academy-image,
  .about-image,
  .pa-image,
  .usecase-card__media,
  .term-showcase-card,
  .term-feature--visual,
  .term-hero__visual,
  .term-industry-grid figure
):hover > img,
main :where(
  .hero-scene__media,
  .visual-media,
  .visual-media--tile,
  .visual-media--bento,
  .visual-media--wide,
  .visual-media--cta,
  .home-trust-proof__media,
  .knowledge-visual-card,
  .wissen-proof-image,
  .wissen-security-image,
  .academy-image,
  .about-image,
  .pa-image,
  .usecase-card__media,
  .term-showcase-card,
  .term-feature--visual,
  .term-hero__visual,
  .term-industry-grid figure
):focus-within > img {
  display: block !important;
  filter: none !important;
  height: 100% !important;
  max-height: none !important;
  max-width: none !important;
  min-height: 100% !important;
  object-fit: cover !important;
  object-position: center 42% !important;
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  width: 100% !important;
}

main :where(.hero-scene__media)::before,
main :where(.hero-scene__media)::after {
  pointer-events: none !important;
}

.home-page .visual-media--tile,
.home-page .visual-media--bento {
  border: 1px solid rgba(7, 17, 28, .14) !important;
}

@media (max-width: 680px) {
  main :where(
    .visual-media,
    .visual-media--tile,
    .visual-media--bento,
    .visual-media--wide,
    .visual-media--cta,
    .home-trust-proof__media,
    .knowledge-visual-card,
    .wissen-proof-image,
    .wissen-security-image,
    .academy-image,
    .about-image,
    .pa-image,
    .usecase-card__media,
    .term-showcase-card,
    .term-feature--visual,
    .term-hero__visual,
    .term-industry-grid figure
  ) {
    min-height: 190px !important;
  }
}


/* Tereza KI-Beratung layout */
.beratung-main{background:var(--saa-surface,#f7f9fb);color:var(--saa-on-surface,#191c1e)}
.beratung-shell{width:min(1280px,calc(100% - 40px));margin-inline:auto}
.beratung-strip{background:#0b1f31;color:#fff;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.beratung-strip__inner{width:min(1280px,calc(100% - 40px));margin:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.12)}
.beratung-strip__inner span{background:#0b1f31;padding:18px 20px;font: 600 12px/1.35 Inter,sans-serif;letter-spacing:0;text-transform:uppercase;color:rgba(255,255,255,.78)}
.beratung-board-section{padding:112px 0;background:#071927;color:#fff;position:relative;overflow:hidden}
.beratung-board-section:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(217,30,24,.12) 0 1px,transparent 1px 80px),linear-gradient(rgba(255,255,255,.05) 0 1px,transparent 1px 80px);opacity:.28;pointer-events:none}
.beratung-board-shell{position:relative;display:grid;grid-template-columns:minmax(0,.78fr) minmax(560px,1.22fr);gap:48px;align-items:center}
.beratung-board-copy h2,.beratung-section-head h2,.beratung-feature-copy h2,.beratung-trust-grid h2,.beratung-final-panel h2{font: 500 56px/1.06 Inter,sans-serif;letter-spacing:0;margin:18px 0 20px}
.beratung-board-copy p,.beratung-section-head p,.beratung-feature-copy p,.beratung-trust-grid p,.beratung-final-panel p{font:400 18px/1.65 Inter,sans-serif;color:rgba(255,255,255,.76);max-width:660px}
.beratung-board{position:relative;min-height:520px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.045);padding:28px;box-shadow:0 24px 80px rgba(0,0,0,.24);overflow:hidden}
.beratung-board:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(217,30,24,.18),transparent 34%),radial-gradient(circle at 10% 85%,rgba(30,58,138,.25),transparent 36%);pointer-events:none}
.beratung-board__top,.beratung-board__flow,.beratung-board__stack,.beratung-board__result{position:relative;z-index:1}
.beratung-board__top{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:28px;color:rgba(255,255,255,.58);font: 600 11px/1 Inter,sans-serif;text-transform:uppercase;letter-spacing:0}
.beratung-board__flow{height:2px;background:rgba(255,255,255,.13);display:grid;grid-template-columns:repeat(3,1fr);margin-bottom:28px}
.beratung-board__flow span{display:block;width:10px;height:10px;background:#d91e18;margin-top:-4px;box-shadow:0 0 28px rgba(217,30,24,.8)}
.beratung-board__stack{display:grid;gap:12px;width:min(100%,620px)}
.beratung-board-card{display:grid;grid-template-columns:44px 1fr auto;gap:16px;align-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);padding:16px;color:#fff}
.beratung-board-card.is-active{background:rgba(217,30,24,.18);border-color:rgba(217,30,24,.55)}
.beratung-board-card .material-symbols-outlined{color:#d91e18;font-size:28px}.beratung-board-card strong{display:block;font: 500 17px/1.2 Inter,sans-serif}.beratung-board-card small{display:block;color:rgba(255,255,255,.68);font:400 13px/1.45 Inter,sans-serif;margin-top:4px}.beratung-board-card em{font: 600 11px/1 Inter,sans-serif;letter-spacing:0;text-transform:uppercase;color:rgba(255,255,255,.56);font-style:normal}
.beratung-board__result{position:absolute;right:28px;bottom:28px;width:260px;background:#fff;color:#102033;padding:24px;border-left:4px solid #d91e18}.beratung-board__result .material-symbols-outlined{color:#d91e18}.beratung-board__result strong{display:block;margin:8px 0;font: 500 18px/1.2 Inter,sans-serif}.beratung-board__result p,.beratung-board__result li{color:#4b5563;font:400 13px/1.45 Inter,sans-serif}.beratung-board__result ul{margin:14px 0 0;padding-left:18px}
.beratung-problem-section,.beratung-services-section,.beratung-faq-section{padding:112px 0;background:#f1f5f9}.beratung-feature-section,.beratung-workflow-section{padding:112px 0;background:#fff}.beratung-section-head{max-width:820px;margin-bottom:56px}.beratung-section-head h2{color:#102033}.beratung-section-head p,.beratung-feature-copy p{color:#5f6b7a}.beratung-section-head--split{display:grid;grid-template-columns:1fr .72fr;gap:40px;align-items:start;max-width:none}
/* 13.09.: margin-top auf .beratung-problem-grid/.beratung-service-grid
   ergänzt (Rückmeldung Joshua) -- Karten sassen direkt unter dem Bild
   ohne Abstand, wie zuvor bei den .dienste-*-grid-Sektionen. Gleiches
   Referenzmass: clamp(32px, 3.6vw, 46px). */
.beratung-problem-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:clamp(32px, 3.6vw, 46px)}.beratung-problem-grid article,.beratung-service-card,.beratung-faq-grid details{background:#fff;border:1px solid #d8dee8;padding:32px}.beratung-problem-grid .material-symbols-outlined{color:#d91e18;font-size:32px;margin-bottom:28px}.beratung-problem-grid h3,.beratung-service-card h3,.beratung-trust-cards h3{font: 500 20px/1.2 Inter,sans-serif;color:#102033;margin:0 0 12px}.beratung-problem-grid p,.beratung-service-card p,.beratung-trust-cards p,.beratung-faq-grid p{color:#5f6b7a;line-height:1.6}
.beratung-feature-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}.beratung-feature-media{height:520px;border:1px solid #d8dee8;overflow:hidden}.beratung-feature-media img{width:100%;height:100%;object-fit:cover}.beratung-proof-list{display:grid;gap:12px;margin-top:32px}.beratung-proof-list div{border-left:3px solid #d91e18;background:#f1f5f9;padding:18px 20px}.beratung-proof-list strong{display:block;color:#102033}.beratung-proof-list span{display:block;color:#5f6b7a;margin-top:3px}
.beratung-service-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:clamp(32px, 3.6vw, 46px)}.beratung-service-card>span{display:block;color:#d91e18;font: 600 12px/1 Inter,sans-serif;letter-spacing:0;margin-bottom:40px}.beratung-service-card ul{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0;padding:0;list-style:none}.beratung-service-card li{padding:8px 10px;background:#f1f5f9;border:1px solid #d8dee8;font: 600 12px/1 Inter,sans-serif;color:#334155}.beratung-service-card--dark{background:#071927;color:#fff}.beratung-service-card--dark h3,.beratung-service-card--dark p{color:#fff}.beratung-service-card--dark p{color:rgba(255,255,255,.72)}.beratung-service-card--dark li{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#fff}
.beratung-flow-line{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}.beratung-flow-line article{border-top:2px solid #d91e18;padding-top:22px}.beratung-flow-line span{display:block;color:#d91e18;font: 600 12px/1 Inter,sans-serif;letter-spacing:0;margin-bottom:18px}.beratung-flow-line i{font-style:normal;color:#102033;font-size:28px}.beratung-flow-line h3{font: 500 17px/1.2 Inter,sans-serif;color:#102033;margin:16px 0 10px}.beratung-flow-line p{color:#5f6b7a;font-size:14px;line-height:1.55}
.beratung-trust-section,.beratung-final-section{padding:112px 0;background:#071927;color:#fff}.beratung-trust-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}.beratung-trust-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.beratung-trust-cards article{border:1px solid rgba(255,255,255,.12);padding:28px;background:rgba(255,255,255,.045)}.beratung-trust-cards h3{color:#fff}.beratung-trust-cards p{color:rgba(255,255,255,.72)}.beratung-trust-cards .material-symbols-outlined{color:#d91e18;font-size:32px;margin-bottom:24px}
.beratung-faq-grid{display:grid;gap:12px}.beratung-faq-grid summary{cursor:pointer;font: 500 16px/1.35 Inter,sans-serif;color:#102033}.beratung-faq-grid p{margin-top:14px}.beratung-final-panel{background:#d91e18;padding:56px;max-width:900px}.beratung-final-panel p{color:rgba(255,255,255,.9);margin-bottom:32px}
@media (max-width: 1024px){.beratung-board-copy h2,.beratung-section-head h2,.beratung-feature-copy h2,.beratung-trust-grid h2,.beratung-final-panel h2{font-size:44px;line-height:1.08}.beratung-board-shell,.beratung-feature-grid,.beratung-section-head--split,.beratung-trust-grid{grid-template-columns:1fr}.beratung-board-shell{gap:32px}.beratung-board{min-height:auto}.beratung-board__result{position:relative;right:auto;bottom:auto;width:auto;margin-top:18px}.beratung-problem-grid,.beratung-service-grid,.beratung-trust-cards{grid-template-columns:1fr 1fr}.beratung-flow-line{grid-template-columns:1fr 1fr}.beratung-strip__inner{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.beratung-shell,.beratung-strip__inner{width:min(100% - 32px,1280px)}.beratung-board-section,.beratung-problem-section,.beratung-feature-section,.beratung-services-section,.beratung-workflow-section,.beratung-trust-section,.beratung-faq-section,.beratung-final-section{padding:72px 0}.beratung-board{padding:20px}.beratung-board-card{grid-template-columns:36px 1fr}.beratung-board-card em{grid-column:2}.beratung-problem-grid,.beratung-service-grid,.beratung-trust-cards,.beratung-flow-line,.beratung-strip__inner{grid-template-columns:1fr}.beratung-feature-media{height:320px}.beratung-final-panel{padding:32px}.beratung-board-copy h2,.beratung-section-head h2,.beratung-feature-copy h2,.beratung-trust-grid h2,.beratung-final-panel h2{font-size:34px;line-height:1.1}}

/* Homepage visual fill guard: keep approved visuals filling their cards. */
body.home-page main .home-offer-card figure.visual-media--tile > img,
body.home-page main .bento-cell figure.visual-media--bento > img,
body.home-page main figure.home-trust-proof__media > img,
body.home-page main figure.visual-media--portrait > img {
  display: block !important;
  filter: none !important;
  height: 100% !important;
  max-height: none !important;
  max-width: none !important;
  min-height: 100% !important;
  object-fit: cover !important;
  object-position: center 42% !important;
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  width: 100% !important;
}

/* William Tereza KI-Beratung online content blocks */
.beratung-expect-section{padding:112px 0;background:#fff}
/* 09.09.: Bild sass zuvor unter Überschrift+Absatz in derselben Spalte wie
   die Kartenliste daneben -- wirkte klein und verloren (Rückmeldung
   Joshua). Jetzt eigene Spalte wie im übrigen Text-links/Bild-rechts-Muster
   (.saa-split), die drei Karten stehen dafür als volle Zeile darunter. */
.beratung-expect-section .saa-split{margin-bottom:48px}
.beratung-expect-copy h2,.beratung-why-grid h2{font: 500 48px/1.08 Inter,sans-serif;letter-spacing:0;margin:18px 0 20px;color:#102033}
.beratung-expect-copy p,.beratung-why-grid p{font:400 18px/1.65 Inter,sans-serif;color:#5f6b7a;max-width:620px}
.beratung-expect-cards{display:grid;grid-template-columns:repeat(3, 1fr);gap:14px}
.beratung-expect-cards article{position:relative;border:1px solid #d8dee8;background:#f7f9fb;padding:26px 28px 26px 32px}
.beratung-expect-cards article:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:#d91e18}
.beratung-expect-cards strong{display:block;color:#102033;font: 500 20px/1.2 Inter,sans-serif;margin-bottom:8px}
.beratung-expect-cards span{display:block;color:#5f6b7a;font:400 15px/1.55 Inter,sans-serif}
.beratung-why-section{padding:88px 0;background:#071927;color:#fff;position:relative;overflow:hidden}
.beratung-why-section:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,transparent 1px 80px),linear-gradient(rgba(255,255,255,.04) 0 1px,transparent 1px 80px);opacity:.34;pointer-events:none}
.beratung-why-grid{position:relative;display:block}
/* 09.09.: war zentrierte 720px-Spalte mit dem Bild darin (Rückmeldung
   Joshua, wirkte verloren/klein) -- jetzt Text links, Bild rechts wie im
   übrigen Text-links/Bild-rechts-Muster; siehe .saa-split. */
.beratung-why-grid > .saa-split{margin-bottom:48px}
.beratung-why-grid h2,.beratung-why-grid p{color:#fff}.beratung-why-grid p{color:rgba(255,255,255,.74)}
.beratung-why-list{display:grid;grid-template-columns:repeat(6, 1fr);gap:14px}
.beratung-why-list article{grid-column:span 2;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.045);padding:22px;min-height:0}
.beratung-why-list article:nth-child(4),.beratung-why-list article:nth-child(5){grid-column:span 3}
.beratung-why-list span{display:block;color:#d91e18;font: 600 12px/1 Inter,sans-serif;letter-spacing:0;margin-bottom:18px}
.beratung-why-list h3{font: 500 18px/1.2 Inter,sans-serif;color:#fff;margin:0 0 8px}
.beratung-why-list p{font:400 14px/1.55 Inter,sans-serif;color:rgba(255,255,255,.72);margin:0}
.beratung-flow-line em{display:inline-flex;margin-top:16px;padding:8px 10px;background:#f1f5f9;border:1px solid #d8dee8;color:#334155;font: 600 12px/1 Inter,sans-serif;font-style:normal}
@media (max-width: 1024px){.beratung-expect-cards{grid-template-columns:1fr}.beratung-why-list{grid-template-columns:1fr 1fr}.beratung-why-list article{grid-column:span 1 !important}.beratung-expect-copy h2,.beratung-why-grid h2{font-size:40px;line-height:1.1}}
@media (max-width:640px){.beratung-expect-section,.beratung-why-section{padding:64px 0}.beratung-why-list{grid-template-columns:1fr}.beratung-why-list article{grid-column:span 1 !important}.beratung-expect-copy h2,.beratung-why-grid h2{font-size:32px;line-height:1.12}.beratung-expect-cards article,.beratung-why-list article{padding:22px}}

/* Swiss AI signal elements */
.saa-signal-label{display:inline-flex;align-items:center;gap:10px;color:#ff3b35;font: 600 12px/1 Inter,sans-serif;letter-spacing:0;text-transform:uppercase;margin-bottom:18px}
.saa-signal-label:before{content:"";display:block;width:44px;height:1px;background:rgba(255,59,53,.55)}
.saa-signal-label .material-symbols-outlined{font-size:18px;color:#ff3b35;line-height:1}
.saa-signal-label--light{color:#d91e18}.saa-signal-label--light:before{background:rgba(217,30,24,.35)}.saa-signal-label--light .material-symbols-outlined{color:#d91e18}
.beratung-board-section,.beratung-why-section,.beratung-trust-section{isolation:isolate;background:#071927;position:relative;overflow:hidden}
.beratung-board-section:after,.beratung-why-section:after,.beratung-trust-section:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 18% 36%,rgba(255,255,255,.38) 0 2px,transparent 3px),radial-gradient(circle at 37% 14%,rgba(255,255,255,.24) 0 2px,transparent 3px),radial-gradient(circle at 58% 54%,rgba(217,30,24,.42) 0 2px,transparent 3px),radial-gradient(circle at 84% 24%,rgba(255,255,255,.28) 0 2px,transparent 3px),linear-gradient(126deg,transparent 0 18%,rgba(255,255,255,.08) 18.1% 18.25%,transparent 18.35% 38%,rgba(217,30,24,.11) 38.1% 38.25%,transparent 38.35% 100%),linear-gradient(28deg,transparent 0 56%,rgba(255,255,255,.07) 56.1% 56.25%,transparent 56.35%);opacity:.42}
.beratung-board-section:before,.beratung-why-section:before,.beratung-trust-section:before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(112deg,#061724 0%,#081d2b 52%,#2a1019 100%)}
.beratung-board,.beratung-why-list article,.beratung-trust-cards article{backdrop-filter:blur(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.beratung-service-card,.beratung-problem-grid article,.beratung-expect-cards article,.beratung-faq-grid details{position:relative;overflow:hidden}
.beratung-service-card:after,.beratung-problem-grid article:after,.beratung-expect-cards article:after,.beratung-faq-grid details:after{content:"";position:absolute;top:18px;right:18px;width:34px;height:1px;background:rgba(217,30,24,.22);box-shadow:20px 0 0 rgba(217,30,24,.12)}
@media (max-width:640px){.saa-signal-label:before{width:28px}.saa-signal-label{font-size:12px;gap:8px}}

/* Scoped cleanup: homepage, KI-Beratung and KI-Lösungen only. */
body.home-page,
body.ki-beratung-page,
body .usecase-overview-page {
  /* 2026-08-04 (Block 5b, Befund H): ein clamp() ueber den ganzen
     Breitenbereich. Untergrenze und Obergrenze sind die des frueheren
     Mobil- bzw. Desktop-clamp(); dazwischen linear. Das zweite clamp()
     im Media-Query darunter ist entfallen. */
  --saa-page-h1: clamp(32px, 24.5px + 1.88vw, 52px);
  --saa-page-h2: clamp(26px, 21.1px + 1.23vw, 40px);
  --saa-page-h3: clamp(21px, 18.8px + 0.54vw, 28px);
  --saa-page-card-pad: clamp(24px, 2.5vw, 40px);
}

body:has(.usecase-overview-page) > .saa-mobile-nav-toggle-body {
  display: none !important;
}

/* 2026-08-04 (Block 6b): Umschaltpunkt der Kopfzeile von 980px auf die
   lg-Stufe (1024px) gezogen. Zwischen 980 und 1200px wurde die Navigation
   von 912 auf 533px zusammengedrueckt, der Abstand zwischen den acht Links
   fiel auf 8px. Der Burger existierte, griff nur zu spaet. */
@media (max-width: 1024px) {
  body:has(.usecase-overview-page) > .saa-mobile-nav-toggle-body {
    display: inline-flex !important;
  }
}

body.home-page main :where(.hero-scene__title, h1),
body.ki-beratung-page main :where(.hero-scene__title, h1),
.usecase-overview-page .usecase-overview__title {
  font-size: var(--saa-page-h1) !important;
  line-height: 1.04 !important;
  letter-spacing: 0 !important;
}

body.home-page main :where(h2, .font-display-lg, .text-display-lg-mobile),
body.ki-beratung-page main :where(h2, .beratung-board-copy h2, .beratung-section-head h2, .beratung-feature-copy h2, .beratung-trust-grid h2, .beratung-final-panel h2, .beratung-expect-copy h2, .beratung-why-grid h2),
.usecase-overview-page :where(.usecase-overview__section-head h2, .usecase-overview__proof h2, .usecase-overview__cta h2) {
  font-size: var(--saa-page-h2) !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
}

body.home-page main :where(h3, .font-headline-xl, .text-headline-xl),
body.ki-beratung-page main :where(h3),
.usecase-overview-page .usecase-card h3 {
  font-size: var(--saa-page-h3) !important;
  line-height: 1.16 !important;
  letter-spacing: 0 !important;
}

body.home-page .process-card,
body.home-page .saa-signal-card,
body.home-page .bento-cell,
body.home-page .home-offer-card,
body.ki-beratung-page :where(.beratung-problem-grid article, .beratung-service-card, .beratung-expect-cards article, .beratung-why-list article, .beratung-trust-cards article, .beratung-faq-grid details),
.usecase-overview-page :where(.usecase-card, .usecase-overview__filters, .usecase-overview__decision-panel, .usecase-overview__cta .usecase-overview__inner) {
  border-radius: 0 !important;
  box-shadow: 0 22px 60px rgba(7, 17, 28, .08) !important;
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease, background-color .22s ease !important;
}

body.home-page .process-card:hover,
body.home-page .bento-cell:hover,
body.home-page .home-offer-card:hover,
body.ki-beratung-page :where(.beratung-problem-grid article, .beratung-service-card, .beratung-expect-cards article, .beratung-why-list article, .beratung-trust-cards article, .beratung-faq-grid details):hover,
.usecase-overview-page .usecase-card:hover {
  border-color: rgba(217, 30, 24, .72) !important;
  box-shadow: 0 28px 74px rgba(7, 17, 28, .14) !important;
  transform: translateY(-3px) !important;
}
body.ki-beratung-page .saa-signal-label,
.usecase-overview-page :where(.usecase-overview__eyebrow, .usecase-card__category) {
  color: #d91e18 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  gap: 10px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
body.ki-beratung-page .saa-signal-label::before {
  background: #d91e18 !important;
  height: 2px !important;
  opacity: 1 !important;
  width: 34px !important;
}

/* 04.09.: keine CSS-Regel kann hier gewinnen -- js/main.js (Painter,
   IIFE) setzt zur Laufzeit Inline-Styles mit !important auf jeden Span
   ohne .text-swiss-red und schlaegt damit jede noch so hoch spezifische
   Stylesheet-Regel. Der eigentliche Fix steht im Markup: die "Pilot"-
   Eyebrow vor dem FAQ traegt jetzt zusaetzlich .text-swiss-red, die
   Klasse, die der Painter explizit ausnimmt (main.js:210/405/423). */
body.home-page .home-agent-card .material-symbols-outlined,
body.ki-beratung-page :where(.beratung-board-card, .beratung-problem-grid, .beratung-trust-cards, .saa-signal-label) .material-symbols-outlined,
.usecase-overview-page :where(.usecase-card__category, .usecase-segment__icons, .usecase-overview__decision-panel, .usecase-map__node) .material-symbols-outlined {
  color: #d91e18 !important;
  font-size: 21px !important;
  font-variation-settings: "FILL" 0, "wght" 450, "GRAD" 0, "opsz" 24 !important;
  line-height: 1 !important;
}

body.home-page .home-offer-card,
body.home-page .bento-cell {
  padding: var(--saa-page-card-pad) !important;
}

body.home-page .home-offer-card .visual-media--tile,
body.home-page .bento-cell .visual-media--bento,
body.ki-beratung-page :where(.hero-scene__media, .beratung-feature-media),
.usecase-overview-page .usecase-card__media {
  background: #071927 !important;
  border: 1px solid rgba(7, 17, 28, .16) !important;
  overflow: hidden !important;
}

body.home-page .home-offer-card .visual-media--tile img,
body.home-page .bento-cell .visual-media--bento img,
body.ki-beratung-page :where(.hero-scene__media, .beratung-feature-media) img,
.usecase-overview-page .usecase-card__media img {
  display: block !important;
  filter: none !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 42% !important;
  opacity: 1 !important;
  transform: none !important;
  width: 100% !important;
}

body.home-page .home-offer-card .visual-media--tile img,
body.home-page .bento-cell .visual-media--bento img {
  min-height: 100% !important;
}

body.home-page .home-agent-board {
  border: 1px solid rgba(255, 255, 255, .16) !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .22) !important;
  min-height: clamp(500px, 36vw, 600px) !important;
}

body.home-page .home-agent-card {
  border-left: 2px solid rgba(217, 30, 24, .42) !important;
  min-height: 72px !important;
}

body.home-page .home-agent-card:hover,
body.home-page .home-agent-card:focus-within {
  background: rgba(217, 30, 24, .16) !important;
}

body.home-page :where(.site-header__cta, .hero-scene__primary, .btn-primary),
body.ki-beratung-page :where(.hero-scene__primary, nav.fixed a[href="potenzialanalyse.html"], nav.fixed > a.bg-swiss-red),
.usecase-overview-page :where(.usecase-overview__primary, .usecase-overview__cta-link) {
  border-radius: 999px !important;
}

body.home-page :where(.hero-scene__secondary, .btn-secondary, .home-system-link, a[href="ki-loesungen.html"].font-label-md),
body.ki-beratung-page .hero-scene__secondary,
.usecase-overview-page .usecase-overview__secondary {
  background: transparent !important;
  border: 1px solid currentColor !important;
  border-radius: 999px !important;
  color: inherit !important;
  min-height: 48px !important;
}

body.ki-beratung-page > nav.fixed:not(.site-header) {
  background: rgba(7, 25, 39, .96) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .18) !important;
  color: #fff !important;
  display: grid !important;
  gap: clamp(18px, 2.1vw, 32px) !important;
  grid-template-columns: 180px minmax(0, 1fr) auto auto !important;
  justify-content: initial !important;
  padding-left: clamp(48px, 4.2vw, 72px) !important;
  padding-right: clamp(48px, 4.2vw, 72px) !important;
}

body.ki-beratung-page > nav.fixed:not(.site-header) > div.hidden a {
  color: rgba(255, 255, 255, .78) !important;
}

body.ki-beratung-page > nav.fixed:not(.site-header) > a.block {
  max-width: 170px !important;
  min-width: 170px !important;
  width: 170px !important;
}

body.ki-beratung-page > nav.fixed:not(.site-header) > a.block img {
  max-height: 34px !important;
  width: 100% !important;
}

body.ki-beratung-page > nav.fixed:not(.site-header) > div.hidden {
  display: flex !important;
  gap: clamp(18px, 2vw, 32px) !important;
  justify-content: center !important;
  min-width: 0 !important;
}

body.ki-beratung-page > nav.fixed:not(.site-header) > div.hidden a {
  white-space: nowrap !important;
}

body.ki-beratung-page > nav.fixed:not(.site-header) > div.hidden a:hover,
body.ki-beratung-page > nav.fixed:not(.site-header) > div.hidden a.text-primary {
  color: #fff !important;
}

body.ki-beratung-page .beratung-board,
body.ki-beratung-page .beratung-board__result {
  overflow: visible !important;
}

body.ki-beratung-page .beratung-board-card small,
body.home-page .home-agent-card small {
  overflow-wrap: normal !important;
  word-break: normal !important;
}

@media (max-width: 1024px) {
  body.home-page,
  body.ki-beratung-page,
  body .usecase-overview-page {
    /* 2026-08-04 (Block 5b): zweites clamp() entfallen, siehe Basiskurve. */
  }

  body.home-page .home-agent-board {
    min-height: auto !important;
  }

  body.home-page .home-agent-card {
    grid-template-columns: 28px minmax(0, 1fr) !important;
  }

  body.home-page .site-header__cta,
  body.ki-beratung-page > nav.fixed:not(.site-header) > a.bg-swiss-red,
  body.ki-beratung-page > nav.fixed:not(.site-header) a[href="potenzialanalyse.html"],
  body .usecase-overview-page ~ .site-header__cta {
    display: none !important;
  }

  body.home-page .site-header__inner {
    grid-template-columns: minmax(136px, 1fr) auto !important;
  }

  body.home-page .site-logo {
    max-width: 170px !important;
    min-width: 136px !important;
    width: 152px !important;
  }

  body.ki-beratung-page > nav.fixed:not(.site-header) {
    display: flex !important;
    gap: 14px !important;
    height: 88px !important;
    justify-content: space-between !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  body.ki-beratung-page > nav.fixed:not(.site-header) > div.hidden {
    display: none !important;
  }

  body.ki-beratung-page > nav.fixed:not(.site-header) > a.block {
    min-width: 138px !important;
    width: 150px !important;
  }
}

@media (max-width: 680px) {
  body.home-page main :where(section.py-32, .home-system-section),
  body.ki-beratung-page main :where(.beratung-board-section, .beratung-problem-section, .beratung-feature-section, .beratung-expect-section, .beratung-services-section, .beratung-why-section, .beratung-workflow-section, .beratung-trust-section, .beratung-faq-section, .beratung-final-section),
  .usecase-overview-page .usecase-overview {
    padding-bottom: 68px !important;
    padding-top: 68px !important;
  }

  body.home-page .home-offer-card,
  body.home-page .bento-cell,
  body.ki-beratung-page :where(.beratung-problem-grid article, .beratung-service-card, .beratung-expect-cards article, .beratung-why-list article, .beratung-trust-cards article, .beratung-faq-grid details),
  .usecase-overview-page .usecase-card {
    padding: 24px !important;
  }

  body.home-page .home-offer-card .visual-media--tile,
  body.home-page .bento-cell .visual-media--bento,
  body.ki-beratung-page .beratung-feature-media,
  .usecase-overview-page .usecase-card__media {
    aspect-ratio: 16 / 10 !important;
    min-height: 0 !important;
  }
  body.ki-beratung-page .saa-signal-label::before {
    width: 26px !important;
  }
}

/* Canonical two-theme header contract. */
.site-header,
body > nav.fixed:not(.site-header) {
  background: var(--saa-surface) !important;
  border-bottom: 1px solid var(--saa-border) !important;
  box-shadow: 0 12px 34px rgba(7, 17, 28, .06) !important;
  color: var(--saa-text) !important;
  height: var(--saa-header-h) !important;
  min-height: var(--saa-header-h) !important;
  overflow: visible !important;
}

.site-header__inner {
  align-items: center !important;
  display: grid !important;
  grid-template-columns: minmax(150px, 184px) minmax(0, 1fr) auto !important;
  gap: clamp(18px, 2.2vw, 34px) !important;
  height: var(--saa-header-h) !important;
  min-height: var(--saa-header-h) !important;
}

.site-logo,
nav a[aria-label="Swiss AI Agency Startseite"],
body > nav.fixed:not(.site-header) > a.block[aria-label="Swiss AI Agency Startseite"],
body > nav.fixed:not(.site-header) > a[aria-label="Swiss AI Agency Startseite"] {
  align-items: center !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  height: auto !important;
  justify-content: flex-start !important;
  margin: 0 !important;
  max-width: 184px !important;
  min-width: 150px !important;
  width: 164px !important;
}

.site-logo__img,
nav a[aria-label="Swiss AI Agency Startseite"] img,
body > nav.fixed:not(.site-header) > a.block[aria-label="Swiss AI Agency Startseite"] img,
body > nav.fixed:not(.site-header) > a[aria-label="Swiss AI Agency Startseite"] img {
  display: block !important;
  filter: none !important;
  height: 22px !important;
  max-height: 22px !important;
  max-width: 164px !important;
  min-height: 0 !important;
  object-fit: contain !important;
  object-position: left center !important;
  opacity: 1 !important;
  transform: none !important;
  width: 164px !important;
}

.site-logo:hover .site-logo__img,
nav.fixed > a[aria-label="Swiss AI Agency Startseite"]:hover img {
  transform: none !important;
}

.site-nav-primary,
body > nav.fixed:not(.site-header) > div.hidden {
  align-items: center !important;
  display: flex !important;
  gap: clamp(16px, 1.55vw, 28px) !important;
  justify-content: center !important;
  min-width: 0 !important;
  width: 100% !important;
}

.site-nav-primary a,
body > nav.fixed:not(.site-header) > div.hidden a {
  border-bottom: 2px solid transparent !important;
  color: var(--saa-text-muted) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  letter-spacing: .01em !important;
  line-height: 1 !important;
  padding: 10px 0 14px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.site-nav-primary a:hover,
.site-nav-primary a.is-active,
body > nav.fixed:not(.site-header) > div.hidden a:hover,
body > nav.fixed:not(.site-header) > div.hidden a.text-primary,
body > nav.fixed:not(.site-header) > div.hidden a.border-primary {
  border-color: var(--saa-red) !important;
  color: var(--saa-red) !important;
}

.site-header__utility,
body.page-shell > .site-header .site-header__utility {
  align-items: center !important;
  align-self: center !important;
  bottom: auto !important;
  display: flex !important;
  justify-content: flex-end !important;
  margin-left: 0 !important;
  position: static !important;
  right: auto !important;
  top: auto !important;
}

.site-header__actions {
  align-items: center !important;
  display: flex !important;
  gap: 16px !important;
  justify-content: flex-end !important;
}

.theme-toggle,
.site-header .theme-toggle,
body > nav.fixed:not(.site-header) .theme-toggle {
  background: transparent !important;
  border: 1px solid var(--saa-border) !important;
  color: var(--saa-text) !important;
  height: 44px !important;
}

.theme-toggle__icon,
.site-header .theme-toggle__icon,
body > nav.fixed:not(.site-header) .theme-toggle__icon {
  color: currentColor !important;
  opacity: .7 !important;
}

.theme-toggle__track,
.site-header .theme-toggle__track,
body > nav.fixed:not(.site-header) .theme-toggle__track {
  background: color-mix(in srgb, var(--saa-text-muted) 34%, transparent) !important;
}

.site-header__cta,
body > nav.fixed:not(.site-header) > a.bg-primary,
body > nav.fixed:not(.site-header) > a.bg-swiss-red,
body > nav.fixed:not(.site-header) > div.flex > a.bg-swiss-red,
body > nav.fixed:not(.site-header) a[href="potenzialanalyse.html"] {
  background: var(--saa-red) !important;
  border: 1px solid var(--saa-red) !important;
  border-radius: 999px !important;
  box-shadow: 0 18px 44px color-mix(in srgb, var(--saa-red) 16%, transparent) !important;
  color: #fff !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 26px !important;
}

@media (max-width: 1120px) {
  .site-header__inner {
    grid-template-columns: minmax(148px, 164px) minmax(0, 1fr) auto !important;
  }

  .site-nav-primary {
    gap: 14px !important;
  }
}

@media (max-width: 1024px) {
  .site-header__inner {
    display: flex !important;
    height: var(--saa-header-h-mobile) !important;
    min-height: var(--saa-header-h-mobile) !important;
  }

  .site-header,
  body > nav.fixed:not(.site-header) {
    height: var(--saa-header-h-mobile) !important;
    min-height: var(--saa-header-h-mobile) !important;
  }

  .site-logo,
  nav a[aria-label="Swiss AI Agency Startseite"] {
    min-width: 142px !important;
    width: 152px !important;
  }

  .site-logo__img,
  nav a[aria-label="Swiss AI Agency Startseite"] img {
    height: 26px !important;
    max-height: 26px !important;
    max-width: 152px !important;
    width: 152px !important;
  }

  .site-nav-primary,
  body > nav.fixed:not(.site-header) > div.hidden,
  .site-header__cta {
    display: none !important;
  }

  .site-header__utility {
    margin-left: auto !important;
  }
}

/* Final light-mode header contrast guard. */
html .site-header,
html body > nav.fixed:not(.site-header) {
  color: #07111c !important;
}

html .site-nav-primary a,
html body > nav.fixed:not(.site-header) > div.hidden a,
html .site-header a:not(.site-header__cta):not(.site-logo),
html .site-header button {
  color: #253142 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

html .site-nav-primary a:hover,
html .site-nav-primary a.is-active,
html body > nav.fixed:not(.site-header) > div.hidden a:hover,
html body > nav.fixed:not(.site-header) > div.hidden a.text-primary,
html body > nav.fixed:not(.site-header) > div.hidden a.border-primary {
  color: var(--saa-red) !important;
}

html .site-header__cta,
html body > nav.fixed:not(.site-header) a[href="potenzialanalyse.html"] {
  color: #ffffff !important;
}

/* Robert William Tereza KI-Dienste layout */
.dienste-main{background:#f7f9fb;color:#191c1e}.dienste-shell{width:min(1280px,calc(100% - 40px));margin-inline:auto}.dienste-strip{background:#071927;color:#fff;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}.dienste-strip__inner{width:min(1280px,calc(100% - 40px));margin:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.12)}.dienste-strip__inner span{background:#071927;padding:18px 20px;font: 600 12px/1.35 Inter,sans-serif;letter-spacing:0;text-transform:uppercase;color:rgba(255,255,255,.78)}
.dienste-section-head{max-width:820px;margin-bottom:56px}.dienste-section-head h2,.dienste-lanes-copy h2,.dienste-transition-grid h2,.dienste-final-panel h2{font: 500 56px/1.06 Inter,sans-serif;letter-spacing:0;margin:18px 0 20px;color:#102033}.dienste-section-head p,.dienste-lanes-copy p,.dienste-transition-grid p,.dienste-final-panel p{font:400 18px/1.65 Inter,sans-serif;color:#5f6b7a;max-width:720px}.dienste-section-head--split{display:grid;grid-template-columns:1fr .72fr;gap:40px;align-items:start;max-width:none}
/* 13.09.: margin-top auf .dienste-problem-grid/.dienste-practice-grid/
   .dienste-industry-grid ergänzt (Rückmeldung Joshua) -- die Karten
   sassen direkt unter dem Bild ohne jeden Abstand, anders als das
   Referenzmass bei .partner-triad (clamp(32px, 3.6vw, 46px)). */
.dienste-problem-section,.dienste-practice-section,.dienste-industries-section,.dienste-faq-section{padding:112px 0;background:#f1f5f9}.dienste-workflow-section{padding:112px 0;background:#fff}.dienste-problem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:clamp(32px, 3.6vw, 46px)}.dienste-problem-grid article,.dienste-practice-card,.dienste-industry-grid article,.dienste-faq-grid details{position:relative;overflow:hidden;background:#fff;border:1px solid #d8dee8;padding:32px}.dienste-problem-grid article:after,.dienste-practice-card:after,.dienste-industry-grid article:after,.dienste-faq-grid details:after{content:"";position:absolute;top:18px;right:18px;width:34px;height:1px;background:rgba(217,30,24,.22);box-shadow:20px 0 0 rgba(217,30,24,.12)}.dienste-problem-grid .material-symbols-outlined,.dienste-practice-card .material-symbols-outlined{color:#d91e18;font-size:32px;margin-bottom:28px}.dienste-problem-grid h3,.dienste-practice-card h3,.dienste-industry-grid strong{font: 500 20px/1.2 Inter,sans-serif;color:#102033;margin:0 0 12px}.dienste-problem-grid p,.dienste-practice-card p,.dienste-industry-grid p,.dienste-faq-grid p{color:#5f6b7a;line-height:1.6}
.dienste-lanes-section,.dienste-transition-section,.dienste-final-section{isolation:isolate;position:relative;overflow:hidden;padding:112px 0;background:#071927;color:#fff}.dienste-lanes-section:before,.dienste-transition-section:before,.dienste-final-section:before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(112deg,#061724 0%,#081d2b 52%,#2a1019 100%)}.dienste-lanes-section:after,.dienste-transition-section:after,.dienste-final-section:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 16% 30%,rgba(255,255,255,.34) 0 2px,transparent 3px),radial-gradient(circle at 42% 18%,rgba(255,255,255,.22) 0 2px,transparent 3px),radial-gradient(circle at 62% 56%,rgba(217,30,24,.38) 0 2px,transparent 3px),radial-gradient(circle at 88% 26%,rgba(255,255,255,.26) 0 2px,transparent 3px),linear-gradient(126deg,transparent 0 16%,rgba(255,255,255,.08) 16.1% 16.25%,transparent 16.35% 42%,rgba(217,30,24,.11) 42.1% 42.25%,transparent 42.35% 100%);opacity:.42}.dienste-lanes-grid{position:relative;display:grid;grid-template-columns:.78fr 1.22fr;gap:56px;align-items:start}.dienste-lanes-copy h2,.dienste-lanes-copy p,.dienste-transition-grid h2,.dienste-transition-grid p,.dienste-final-panel h2,.dienste-final-panel p{color:#fff}.dienste-lanes-copy p,.dienste-transition-grid p,.dienste-final-panel p{color:rgba(255,255,255,.74)}.dienste-lanes{display:grid;gap:12px}.dienste-lane{display:grid;grid-template-columns:48px 1fr minmax(160px,210px);gap:18px;align-items:start;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.045);padding:22px;backdrop-filter:blur(2px)}.dienste-lane.is-active{background:rgba(217,30,24,.16);border-color:rgba(217,30,24,.52)}.dienste-lane>span{color:#ff3b35;font: 600 13px/1 Inter,sans-serif}.dienste-lane h3{font: 500 21px/1.15 Inter,sans-serif;color:#fff;margin:0 0 10px}.dienste-lane p{color:rgba(255,255,255,.72);line-height:1.55;margin:0}.dienste-lane ul{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none}.dienste-lane li{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.13);color:#fff;padding:7px 9px;font: 600 12px/1 Inter,sans-serif}
.dienste-practice-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:clamp(32px, 3.6vw, 46px)}.dienste-practice-card--wide{grid-column:span 2}.dienste-practice-card--dark{background:#071927;color:#fff}.dienste-practice-card--dark h3,.dienste-practice-card--dark p{color:#fff}.dienste-practice-card--dark p{color:rgba(255,255,255,.74)}.dienste-practice-card a{display:inline-flex;align-items:center;min-height:44px;margin-top:22px;color:#d91e18;font: 600 13px/1 Inter,sans-serif;text-transform:uppercase;text-decoration:none;border-bottom:1px solid rgba(217,30,24,.35)}
.dienste-transition-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:56px;align-items:start}.dienste-transition-map{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:clamp(36px, 4.4vw, 56px)}
/* 09.09.: Bild war vormals Teil der Textspalte (gemeinsam mit Überschrift,
   Absatz und Link) -- dadurch nur wenige hundert Pixel breit und optisch
   verloren (Rückmeldung Joshua). Jetzt eigene Spalte wie beim übrigen
   Text-links/Bild-rechts-Muster; die Ergebniskette darunter steht dafür
   nicht mehr im 2-Spalten-Raster, sondern als eigene volle Zeile. Deckel
   aus der allgemeinen .saa-figure--wide-Regel hier ausgenommen, sonst
   würde das Bild in seiner eigenen Spalte nochmals auf 62% schrumpfen. */
@media (min-width: 1025px) {
  .dienste-transition-grid .saa-figure--wide {
    margin-inline: 0;
    max-width: 100%;
  }
}.dienste-transition-map article{border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.045);border-radius:16px;padding:28px;min-height:190px}.dienste-transition-map strong{display:block;color:#fff;font: 500 20px/1.2 Inter,sans-serif;margin-bottom:12px}.dienste-transition-map span{color:rgba(255,255,255,.72);line-height:1.55}.dienste-transition-link{display:inline-flex;margin-top:28px;color:#ff3b35;font: 600 13px/1 Inter,sans-serif;text-transform:uppercase;text-decoration:none;border-bottom:1px solid rgba(255,59,53,.45);padding-bottom:6px}
.dienste-flow-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.dienste-flow-grid article{border-top:2px solid #d91e18;padding-top:22px}.dienste-flow-grid article>span{display:block;color:#d91e18;font: 600 12px/1 Inter,sans-serif;margin-bottom:18px}.dienste-flow-grid h3{font: 500 19px/1.2 Inter,sans-serif;color:#102033;margin:0 0 12px}.dienste-flow-grid p{color:#5f6b7a;line-height:1.55}.dienste-flow-grid em{display:inline-flex;margin-top:16px;padding:8px 10px;background:#f1f5f9;border:1px solid #d8dee8;color:#334155;font: 600 12px/1 Inter,sans-serif;font-style:normal}.dienste-industry-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:clamp(32px, 3.6vw, 46px)}.dienste-industry-grid .material-symbols-outlined{display:block;color:#d91e18;font-size:30px;margin-bottom:22px}.dienste-faq-grid{display:grid;gap:12px}.dienste-faq-grid summary{cursor:pointer;font: 500 16px/1.35 Inter,sans-serif;color:#102033}.dienste-faq-grid p{margin-top:14px}.dienste-final-panel{background:#d91e18;padding:56px;max-width:920px}.dienste-final-panel p{color:rgba(255,255,255,.9);margin-bottom:32px}.dienste-final-actions{display:flex;gap:16px;flex-wrap:wrap}.dienste-final-panel .hero-scene__secondary{color:#fff;border-color:rgba(255,255,255,.48)}
@media (max-width: 1024px){.dienste-section-head h2,.dienste-lanes-copy h2,.dienste-transition-grid h2,.dienste-final-panel h2{font-size:44px;line-height:1.08}.dienste-lanes-grid,.dienste-transition-grid,.dienste-section-head--split{grid-template-columns:1fr}.dienste-problem-grid,.dienste-practice-grid,.dienste-industry-grid,.dienste-flow-grid{grid-template-columns:1fr 1fr}.dienste-transition-map{grid-template-columns:1fr}.dienste-lane{grid-template-columns:44px 1fr}.dienste-lane ul{grid-column:2}.dienste-strip__inner{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.dienste-shell,.dienste-strip__inner{width:min(100% - 32px,1280px)}.dienste-problem-section,.dienste-lanes-section,.dienste-practice-section,.dienste-transition-section,.dienste-workflow-section,.dienste-industries-section,.dienste-faq-section,.dienste-final-section{padding:72px 0}.dienste-section-head h2,.dienste-lanes-copy h2,.dienste-transition-grid h2,.dienste-final-panel h2{font-size:34px;line-height:1.1}.dienste-problem-grid,.dienste-practice-grid,.dienste-industry-grid,.dienste-flow-grid,.dienste-strip__inner{grid-template-columns:1fr}.dienste-practice-card--wide{grid-column:auto}.dienste-final-panel{padding:32px}.dienste-lane{padding:18px;grid-template-columns:34px 1fr}.dienste-lane h3{font-size:19px}.dienste-final-actions{display:grid;grid-template-columns:1fr}.dienste-final-actions a{width:100%;justify-content:center}}

/* Robert Tereza board design correction */
.beratung-board-section,.dienste-lanes-section{padding:104px 0;background:#071927}
.beratung-board-shell,.dienste-lanes-grid{grid-template-columns:.72fr 1.28fr;gap:64px;align-items:center}
.beratung-board,.dienste-lanes{border:0;background:transparent;box-shadow:none;padding:0;min-height:0;overflow:visible}
.beratung-board:before,.beratung-board__top,.beratung-board__flow{display:none!important}
.beratung-board__stack{width:100%;display:grid;grid-template-columns:repeat(2,1fr);gap:18px;transform:rotate(-1.2deg)}
.beratung-board-card{position:relative;display:block;min-height:190px;padding:28px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.055);box-shadow:0 18px 44px rgba(0,0,0,.16);transform:rotate(1.2deg)}
.beratung-board-card.is-active{background:linear-gradient(135deg,rgba(217,30,24,.24),rgba(255,255,255,.055));border-color:rgba(217,30,24,.56)}
.beratung-board-card .material-symbols-outlined{font-size:28px;margin-bottom:26px;display:block;color:#ff3b35}
.beratung-board-card strong{font-size:24px;margin-bottom:10px}.beratung-board-card small{font-size:15px;line-height:1.5;max-width:260px}.beratung-board-card em{position:absolute;right:24px;bottom:22px;color:rgba(255,255,255,.5)}
.beratung-board__result{position:relative;right:auto;bottom:auto;width:auto;margin:22px 0 0 auto;max-width:420px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-left:4px solid #d91e18;color:#fff;padding:26px;box-shadow:0 18px 44px rgba(0,0,0,.16)}
.beratung-board__result p,.beratung-board__result li{color:rgba(255,255,255,.74)}.beratung-board__result strong{color:#fff}.beratung-board__result .material-symbols-outlined{color:#ff3b35}
.dienste-lanes{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.dienste-lane{display:block;min-height:260px;padding:28px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.055);box-shadow:0 18px 44px rgba(0,0,0,.16)}
.dienste-lane.is-active{background:linear-gradient(135deg,rgba(217,30,24,.2),rgba(255,255,255,.055));border-color:rgba(217,30,24,.5)}
.dienste-lane>span{display:block;margin-bottom:30px;color:#ff3b35}.dienste-lane h3{font-size:24px;line-height:1.12;max-width:330px}.dienste-lane p{font-size:15px;margin-top:14px}.dienste-lane ul{margin-top:24px}.dienste-lane li{background:rgba(255,255,255,.07)}
.beratung-board-copy h2,.dienste-lanes-copy h2{font-size:48px;line-height:1.08}.beratung-board-copy p,.dienste-lanes-copy p{font-size:17px;line-height:1.65;max-width:520px}
@media (max-width: 1024px){.beratung-board-shell,.dienste-lanes-grid{grid-template-columns:1fr}.beratung-board__stack,.dienste-lanes{grid-template-columns:1fr 1fr;transform:none}.beratung-board-card{transform:none}.beratung-board__result{max-width:none;margin-top:18px}.beratung-board-copy h2,.dienste-lanes-copy h2{font-size:42px}}
@media (max-width:640px){.beratung-board-section,.dienste-lanes-section{padding:72px 0}.beratung-board__stack,.dienste-lanes{grid-template-columns:1fr}.beratung-board-card,.dienste-lane{min-height:0;padding:24px}.beratung-board-copy h2,.dienste-lanes-copy h2{font-size:32px}.beratung-board-card strong,.dienste-lane h3{font-size:21px}.beratung-board__result{padding:24px}}
/* 09.09.: Der folgende Block überschrieb .dienste-problem-grid mit einem
   zweiten, unverbundenen Design ("Tereza non-card", dünne Zeilen ohne
   Kartenrahmen) -- .dienste-spine-* wird auf ki-dienste.html gar nicht mehr
   verwendet, die Regel traf also nur noch versehentlich die Karten-Sektion
   weiter oben und liess sie aus dem Design-System fallen (Rückmeldung
   Joshua). Redefinition entfernt, die erste .dienste-problem-grid-Regel
   (Karten wie .dienste-practice-card/.dienste-industry-grid) gilt wieder. */
.dienste-spine-section{padding:110px 0;background:#071927;color:#fff;isolation:isolate;position:relative;overflow:hidden}
.dienste-spine-grid{position:relative;display:grid;grid-template-columns:.72fr 1.28fr;gap:72px;align-items:center}
.dienste-spine{position:relative;padding:12px 0 12px 48px}.dienste-spine__axis{position:absolute;left:16px;top:22px;bottom:22px;width:1px;background:linear-gradient(to bottom,rgba(255,59,53,.15),rgba(255,59,53,.75),rgba(255,255,255,.12))}
.dienste-spine-item{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr) minmax(170px,230px);gap:24px;align-items:start;padding:26px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.dienste-spine-item:last-child{border-bottom:0}.dienste-spine-item:before{content:"";position:absolute;left:-38px;top:35px;width:13px;height:13px;background:#071927;border:2px solid rgba(255,59,53,.8);box-shadow:0 0 0 6px rgba(217,30,24,.08)}.dienste-spine-item.is-active:before{background:#ff3b35;box-shadow:0 0 32px rgba(217,30,24,.72)}
.dienste-spine-item__number{color:#ff3b35;font: 600 13px/1 Inter,sans-serif}.dienste-spine-item h3{font: 500 28px/1.08 Inter,sans-serif;color:#fff;margin:0 0 12px;max-width:460px}.dienste-spine-item p{font:400 16px/1.58 Inter,sans-serif;color:rgba(255,255,255,.72);margin:0;max-width:540px}
.dienste-spine-item ul{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 0;padding:0;list-style:none}.dienste-spine-item li{padding:8px 10px;border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.86);font: 600 12px/1 Inter,sans-serif;background:rgba(255,255,255,.04)}
@media (max-width: 1024px){.dienste-spine-grid{grid-template-columns:1fr;gap:42px}.dienste-spine{padding-left:38px}.dienste-spine-item{grid-template-columns:52px minmax(0,1fr)}.dienste-spine-item ul{grid-column:2}}
@media (max-width:640px){.dienste-spine-section{padding:72px 0}.dienste-spine{padding-left:30px}.dienste-spine__axis{left:8px}.dienste-spine-item{grid-template-columns:1fr;gap:12px;padding:24px 0}.dienste-spine-item:before{left:-28px}.dienste-spine-item ul{grid-column:auto}.dienste-spine-item h3{font-size:22px}}
/* Dienste glowing service tags */
.dienste-spine-item li{position:relative;isolation:isolate;cursor:default;transition:border-color .22s ease,background .22s ease,color .22s ease,box-shadow .22s ease,transform .22s ease}
.dienste-spine-item li:before{content:"";position:absolute;inset:-1px;z-index:-1;background:linear-gradient(90deg,rgba(217,30,24,0),rgba(255,59,53,.75),rgba(217,30,24,0));opacity:0;filter:blur(10px);transition:opacity .22s ease}
.dienste-spine-item li:hover{color:#fff;border-color:rgba(255,59,53,.82);background:rgba(217,30,24,.16);box-shadow:0 0 0 1px rgba(255,59,53,.35),0 0 28px rgba(217,30,24,.32);transform:translateY(-1px);animation:diensteTagBlink .74s ease both}
.dienste-spine-item li:hover:before{opacity:1}
.dienste-spine-item.is-active li:first-child{border-color:rgba(255,59,53,.5);box-shadow:0 0 20px rgba(217,30,24,.16)}
@keyframes diensteTagBlink{0%,100%{filter:brightness(1)}35%{filter:brightness(1.55)}62%{filter:brightness(.9)}}
@media (prefers-reduced-motion:reduce){.dienste-spine-item li:hover{animation:none;transform:none}}

/* Robert typography guard - KI-Dienste labels removed, overflow hardened */
body.ki-dienste-page .dienste-main .text-swiss-red {
  color: #ff3b35 !important;
}

body.ki-dienste-page .dienste-main :where(h1, h2, h3, p, strong, span, a, li, summary) {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

body.ki-dienste-page .dienste-section-head h2,
body.ki-dienste-page .dienste-lanes-copy h2,
body.ki-dienste-page .dienste-transition-grid h2,
body.ki-dienste-page .dienste-final-panel h2 {
  font-weight: 500;
  letter-spacing: 0;
}

body.ki-dienste-page .dienste-practice-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
}

body.ki-dienste-page .dienste-practice-card {
  grid-column: span 4;
  min-width: 0;
}

body.ki-dienste-page .dienste-practice-card--wide {
  grid-column: span 8;
}

body.ki-dienste-page .dienste-practice-card--dark {
  grid-column: span 4;
}

body.ki-dienste-page .dienste-practice-card h3 {
  max-width: 100%;
  font-size: 22px;
  line-height: 1.16;
  font-weight: 500;
  letter-spacing: 0;
}

body.ki-dienste-page .dienste-practice-card p {
  max-width: 100%;
  font-size: 16px;
  line-height: 1.58;
}

@media (max-width: 1024px) {
  body.ki-dienste-page .dienste-practice-card,
  body.ki-dienste-page .dienste-practice-card--dark {
    grid-column: span 6;
  }

  body.ki-dienste-page .dienste-practice-card--wide {
    grid-column: span 12;
  }
}

@media (max-width: 640px) {
  body.ki-dienste-page .dienste-practice-grid {
    grid-template-columns: 1fr;
  }

  body.ki-dienste-page .dienste-practice-card,
  body.ki-dienste-page .dienste-practice-card--wide,
  body.ki-dienste-page .dienste-practice-card--dark {
    grid-column: auto;
  }

  body.ki-dienste-page .dienste-practice-card h3 {
    font-size: 21px;
    line-height: 1.18;
  }
}

/* Robert global rule - section labels removed and typography overflow guarded */
.saa-signal-label {
  display: none !important;
}

:where(main, section, article, nav, footer, header, .card, .bento-card, .bento-cell, .process-card, .term-card, .sector-card, .wide-card, .service-card, .feature-card, .usecase-card, .home-offer-card) {
  min-width: 0;
}

:where(main, section, article, nav, footer, header, .card, .bento-card, .bento-cell, .process-card, .term-card, .sector-card, .wide-card, .service-card, .feature-card, .usecase-card, .home-offer-card) :where(h1, h2, h3, h4, h5, h6, p, a, button, li, summary, strong, span:not(.material-symbols-outlined)) {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

:where(.grid, [class*="grid"], [class*="Grid"]) > * {
  min-width: 0;
}

:where(h1, h2, h3, h4, h5, h6) .text-swiss-red {
  color: #ff3b35 !important;
}

@media (max-width: 640px) {
  :where(main, section, article, nav, footer, header, .card, .bento-card, .bento-cell, .process-card, .term-card, .sector-card, .wide-card, .service-card, .feature-card, .usecase-card, .home-offer-card) :where(h1, h2, h3, h4, h5, h6, p, a, button, li, summary, strong, span:not(.material-symbols-outlined)) {
    overflow-wrap: anywhere;
  }
}
/* Robert William Tereza Wissen reconstruction */
.wissen-main {
  background: #f7f9fb;
  color: #102033;
}

.wissen-shell {
  width: min(1280px, calc(100% - 40px));
  margin-inline: auto;
}

.wissen-strip {
  background: #071927;
  color: #fff;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.wissen-strip__inner {
  width: min(1280px, calc(100% - 40px));
  margin: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,.12);
}

.wissen-strip__inner span {
  background: #071927;
  padding: 18px 20px;
  color: rgba(255,255,255,.78);
  font: 600 12px/1.35 Inter, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0;
}

.wissen-intro-section,
.wissen-glossary-section,
.wissen-faq-section {
  padding: 112px 0;
  background: #f1f5f9;
}

.wissen-map-section,
.wissen-check-section,
.wissen-regulation-section,
.wissen-final-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 112px 0;
  background: #071927;
  color: #fff;
}

.wissen-map-section::before,
.wissen-check-section::before,
.wissen-regulation-section::before,
.wissen-final-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(112deg, #061724 0%, #081d2b 54%, #2a1019 100%);
}

.wissen-map-section::after,
.wissen-check-section::after,
.wissen-regulation-section::after,
.wissen-final-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at 14% 26%, rgba(255,255,255,.28) 0 2px, transparent 3px), radial-gradient(circle at 42% 18%, rgba(255,255,255,.18) 0 2px, transparent 3px), radial-gradient(circle at 63% 58%, rgba(217,30,24,.36) 0 2px, transparent 3px), linear-gradient(126deg, transparent 0 18%, rgba(255,255,255,.08) 18.1% 18.25%, transparent 18.35% 40%, rgba(217,30,24,.11) 40.1% 40.25%, transparent 40.35% 100%);
  opacity: .42;
}

.wissen-intro-grid,
.wissen-map-grid,
.wissen-check-grid,
.wissen-regulation-grid {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 64px;
  align-items: start;
}

.wissen-main h2 {
  margin: 0 0 20px;
  color: #102033;
  font: 500 48px/1.08 Inter, sans-serif;
  letter-spacing: 0;
}

.wissen-main p {
  color: #5f6b7a;
  font: 400 18px/1.65 Inter, sans-serif;
  margin: 0;
}

.wissen-map-section h2,
.wissen-check-section h2,
.wissen-regulation-section h2,
.wissen-final-section h2,
.wissen-map-section p,
.wissen-check-section p,
.wissen-regulation-section p,
.wissen-final-section p {
  color: #fff;
}

.wissen-map-section p,
.wissen-check-section p,
.wissen-regulation-section p,
.wissen-final-section p {
  color: rgba(255,255,255,.74);
}

.wissen-feature-panel {
  position: relative;
  border: 1px solid #d8dee8;
  background: #fff;
  padding: 34px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .05);
}

.wissen-feature-panel::before {
  content: "";
  position: absolute;
  top: 22px;
  right: 22px;
  width: 42px;
  height: 2px;
  background: #d91e18;
  box-shadow: 22px 0 0 rgba(217,30,24,.18);
}

.wissen-feature-panel strong,
.wissen-map article > span,
.wissen-map article > strong {
  color: #d91e18;
  font: 600 12px/1 Inter, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0;
}

.wissen-feature-panel h3,
.wissen-glossary-grid h3,
.wissen-faq-grid h3 {
  margin: 18px 0 12px;
  color: #102033;
  font: 500 24px/1.16 Inter, sans-serif;
  letter-spacing: 0;
}

.wissen-feature-panel ul,
.wissen-check-list ul {
  display: grid;
  gap: 10px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.wissen-feature-panel li,
.wissen-check-list li {
  position: relative;
  padding-left: 20px;
  color: #334155;
  font: 500 15px/1.55 Inter, sans-serif;
}

.wissen-feature-panel li::before,
.wissen-check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 8px;
  height: 2px;
  background: #d91e18;
}

.wissen-map {
  position: relative;
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(255,255,255,.14);
  border-bottom: 1px solid rgba(255,255,255,.14);
}

.wissen-map article {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) minmax(120px, 160px);
  gap: 24px;
  align-items: start;
  padding: 28px 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.wissen-map article:last-child {
  border-bottom: 0;
}

.wissen-map article.is-active {
  border-top: 1px solid rgba(255,59,53,.55);
  border-bottom-color: rgba(255,59,53,.55);
}

.wissen-map h3 {
  margin: 0 0 10px;
  color: #fff;
  font: 500 26px/1.12 Inter, sans-serif;
}

.wissen-map p {
  font-size: 16px;
  line-height: 1.58;
}

.wissen-glossary-grid,
.wissen-faq-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 42px;
}

.wissen-glossary-grid article,
.wissen-faq-grid article {
  position: relative;
  min-width: 0;
  background: #fff;
  border: 1px solid #d8dee8;
  padding: 28px;
  overflow: hidden;
}

.wissen-glossary-grid article::after,
.wissen-faq-grid article::after {
  content: "";
  position: absolute;
  top: 18px;
  right: 18px;
  width: 34px;
  height: 1px;
  background: rgba(217,30,24,.22);
  box-shadow: 20px 0 0 rgba(217,30,24,.12);
}

.wissen-glossary-grid p,
.wissen-faq-grid p {
  font-size: 16px;
  line-height: 1.58;
}

.wissen-check-list {
  display: grid;
  gap: 12px;
}

.wissen-check-list details {
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.045);
  padding: 22px 24px;
}

.wissen-check-list summary {
  cursor: pointer;
  color: #fff;
  font: 500 18px/1.35 Inter, sans-serif;
}

.wissen-check-list li {
  color: rgba(255,255,255,.78);
}

.wissen-regulation-board {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.wissen-regulation-board article {
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.045);
  padding: 26px;
}

.wissen-regulation-board strong {
  display: block;
  color: #fff;
  font: 500 22px/1.18 Inter, sans-serif;
  margin-bottom: 10px;
}

.wissen-final-panel {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  border-left: 4px solid #d91e18;
  padding: 56px;
  max-width: 960px;
}

.wissen-final-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 32px;
}

@media (max-width: 1024px) {
  .wissen-intro-grid,
  .wissen-map-grid,
  .wissen-check-grid,
  .wissen-regulation-grid {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .wissen-main h2 {
    font-size: 40px;
    line-height: 1.1;
  }

  .wissen-glossary-grid,
  .wissen-faq-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wissen-map article {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .wissen-map article > strong {
    grid-column: 2;
  }

  .wissen-strip__inner {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .wissen-shell,
  .wissen-strip__inner {
    width: min(100% - 32px, 1280px);
  }

  .wissen-intro-section,
  .wissen-map-section,
  .wissen-glossary-section,
  .wissen-check-section,
  .wissen-regulation-section,
  .wissen-faq-section,
  .wissen-final-section {
    padding: 72px 0;
  }

  .wissen-main h2 {
    font-size: 32px;
    line-height: 1.12;
  }

  .wissen-main p {
    font-size: 16px;
    line-height: 1.6;
  }

  .wissen-strip__inner,
  .wissen-glossary-grid,
  .wissen-faq-grid {
    grid-template-columns: 1fr;
  }

  .wissen-feature-panel,
  .wissen-glossary-grid article,
  .wissen-faq-grid article,
  .wissen-check-list details,
  .wissen-regulation-board article,
  .wissen-final-panel {
    padding: 24px;
  }

  .wissen-map article {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 24px 0;
  }

  .wissen-map article > strong {
    grid-column: auto;
  }

  .wissen-map h3,
  .wissen-feature-panel h3,
  .wissen-glossary-grid h3,
  .wissen-faq-grid h3 {
    font-size: 21px;
  }

  .wissen-final-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .wissen-final-actions a {
    width: 100%;
    justify-content: center;
  }
}

/* KI-Loesungen senior QA fixes: final override at EOF. */
.usecase-overview-page .usecase-map::after,
.usecase-overview-page .usecase-map__node,
.usecase-overview-page .usecase-map__line::after {
  animation: none !important;
}

.usecase-overview-page .usecase-map__line {
  opacity: 0.2 !important;
  z-index: 0 !important;
}

.usecase-overview-page .usecase-map__core {
  align-content: center !important;
  display: grid !important;
  gap: 3px !important;
  height: 118px !important;
  justify-items: center !important;
  padding: 14px !important;
  text-align: center !important;
  width: 118px !important;
  z-index: 5 !important;
}

.usecase-overview-page .usecase-map__core .material-symbols-outlined {
  font-size: 22px !important;
}

.usecase-overview-page .usecase-map__core strong {
  color: #fff !important;
  display: block !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1.02 !important;
  max-width: 86px !important;
}

.usecase-overview-page .usecase-map__core small {
  color: rgba(239, 241, 243, 0.72) !important;
  display: block !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
}

.usecase-overview-page .usecase-map__node {
  transform: none !important;
  z-index: 4 !important;
}

.usecase-overview-page .usecase-card {
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.usecase-overview-page .usecase-card__body {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-width: 0 !important;
}

.usecase-overview-page .usecase-card__benefit,
.usecase-overview-page .usecase-card__proof {
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.usecase-overview-page .usecase-card__proof {
  margin-top: 0 !important;
}

.usecase-overview-page .usecase-card__link {
  align-self: stretch !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  font-size: 12px !important;
  gap: 8px !important;
  justify-content: center !important;
  margin-top: auto !important;
  max-width: 100% !important;
  min-height: 40px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  text-align: center !important;
  white-space: nowrap !important;
  width: 100% !important;
}

.usecase-overview-page .usecase-card__link .material-symbols-outlined {
  flex: 0 0 auto !important;
  font-size: 20px !important;
}

.usecase-overview-page .usecase-overview__proof h2,
.usecase-overview-page .usecase-overview__cta h2 {
  color: #eff1f3 !important;
}

.usecase-overview-page .usecase-overview__proof p,
.usecase-overview-page .usecase-overview__cta p {
  color: rgba(239, 241, 243, 0.78) !important;
}

.usecase-overview-page .usecase-overview__decision-panel {
  box-sizing: border-box !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.usecase-overview-page .usecase-overview__decision-panel li {
  column-gap: 16px !important;
  grid-template-columns: 32px minmax(0, 1fr) !important;
}

.usecase-overview-page .usecase-overview__decision-panel .material-symbols-outlined {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.usecase-overview-page .usecase-overview__decision-panel li > div {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
}

.usecase-overview-page .usecase-overview__decision-panel b,
.usecase-overview-page .usecase-overview__decision-panel small {
  display: block !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

/* Global system step 1: layout shell and section rhythm.
   2026-08-04 (Responsive-Sanierung, Block 4): Diese Variablen definieren
   keine eigenen Werte mehr, sondern leiten sich aus dem Layout-Vertrag in
   css/_contract.css ab. Vorher standen dieselben Groessen dreifach und
   uneinig im Projekt (hier, bei --saa-page-x und bei --holo-shell) — das
   war die Ursache dafuer, dass jeder Abschnitt eine andere Breite hatte. */
:root {
  --saa-shell-max: var(--saig-shell);
  --saa-shell-x-desktop: var(--saig-gutter);
  /* 2026-08-04 (Block 4/6): Die Tablet- und Mobile-Stufen des Seitenrands
     entfallen als eigene Werte. --saig-gutter ist ein clamp() und deckt den
     ganzen Breitenbereich stufenlos ab; zwei zusaetzliche Stufen erzeugten
     nur Spruenge an den Breakpoints 980 und 680. */
  --saa-shell-x-tablet: var(--saig-gutter);
  --saa-shell-x-mobile: var(--saig-gutter);
  --saa-section-y: clamp(76px, 8vw, 124px);
  --saa-section-y-compact: clamp(56px, 6vw, 88px);
  --saa-grid-gap: clamp(18px, 2.2vw, 32px);
}

main :where(
  .swiss-grid,
  .saa-container,
  .beratung-shell,
  .beratung-strip__inner,
  .dienste-shell,
  .dienste-strip__inner,
  .wissen-shell,
  .wissen-editorial-shell,
  .pa-container,
  .restore-inner,
  .usecase-overview__inner,
  .term-container,
  .container,
  .mx-auto
) {
  box-sizing: border-box !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: var(--saa-shell-max) !important;
  width: min(calc(100% - (var(--saa-shell-x-desktop) * 2)), var(--saa-shell-max)) !important;
}

main > :where(section, .restore-section):not(.hero-scene):not(.hero-scene--subpage):not(.saa-hero):not(.usecase-overview__hero):not(.term-hero) {
  box-sizing: border-box !important;
}

main :where(
  .beratung-problem-section,
  .beratung-services-section,
  .beratung-feature-section,
  .beratung-workflow-section,
  .beratung-faq-section,
  .dienste-problem-section,
  .dienste-practice-section,
  .dienste-workflow-section,
  .dienste-industries-section,
  .dienste-faq-section,
  .wissen-editorial-intro,
  .wissen-feature,
  .wissen-decision,
  .wissen-glossar,
  .wissen-regulation,
  .wissen-questions,
  .wissen-cta,
  .pa-section,
  .contact-section,
  .restore-section
) {
  padding-top: var(--saa-section-y) !important;
  padding-bottom: var(--saa-section-y) !important;
}

main :where(
  .swiss-grid,
  .grid,
  .beratung-board-shell,
  .beratung-section-head--split,
  .dienste-section-head--split,
  .dienste-lanes-grid,
  .dienste-spine-grid,
  .dienste-transition-grid,
  .usecase-overview__grid,
  .usecase-overview__segments,
  .term-step-grid,
  .term-feature-grid
) {
  gap: var(--saa-grid-gap) !important;
}

@media (max-width: 1024px) {
  main :where(
    .swiss-grid,
    .saa-container,
    .beratung-shell,
    .beratung-strip__inner,
    .dienste-shell,
    .dienste-strip__inner,
    .wissen-shell,
    .wissen-editorial-shell,
    .pa-container,
    .restore-inner,
    .usecase-overview__inner,
    .term-container,
    .container,
    .mx-auto
  ) {
    width: min(calc(100% - (var(--saa-shell-x-tablet) * 2)), var(--saa-shell-max)) !important;
  }

  main :where(
    .beratung-problem-section,
    .beratung-services-section,
    .beratung-feature-section,
    .beratung-workflow-section,
    .beratung-faq-section,
    .dienste-problem-section,
    .dienste-practice-section,
    .dienste-workflow-section,
    .dienste-industries-section,
    .dienste-faq-section,
    .wissen-editorial-intro,
    .wissen-feature,
    .wissen-decision,
    .wissen-glossar,
    .wissen-regulation,
    .wissen-questions,
    .wissen-cta,
    .pa-section,
    .contact-section,
    .restore-section
  ) {
    padding-top: var(--saa-section-y-compact) !important;
    padding-bottom: var(--saa-section-y-compact) !important;
  }
}

@media (max-width: 640px) {
  main :where(
    .swiss-grid,
    .saa-container,
    .beratung-shell,
    .beratung-strip__inner,
    .dienste-shell,
    .dienste-strip__inner,
    .wissen-shell,
    .wissen-editorial-shell,
    .pa-container,
    .restore-inner,
    .usecase-overview__inner,
    .term-container,
    .container,
    .mx-auto
  ) {
    width: min(calc(100% - (var(--saa-shell-x-mobile) * 2)), var(--saa-shell-max)) !important;
  }
}

/* Final absolute header contrast guard. Keep this at the end. */
html .site-header,
html body > nav.fixed:not(.site-header) {
  background: #ffffff !important;
  color: #07111c !important;
}

html .site-header :where(a, button, span),
html body > nav.fixed:not(.site-header) :where(a, button, span) {
  color: #253142 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

html .site-header :where(a:hover, a.is-active),
html .site-nav-primary a.is-active,
html body > nav.fixed:not(.site-header) :where(a:hover, a.text-primary, a.border-primary) {
  color: var(--saa-red) !important;
}

html .site-header__cta,
html .site-header__cta *,
html body > nav.fixed:not(.site-header) a[href="potenzialanalyse.html"],
html body > nav.fixed:not(.site-header) a[href="potenzialanalyse.html"] * {
  color: #ffffff !important;
}

/* Global system step 2: hero as full-background section. */
:root {
  --saa-hero-content-max: 720px;
  --saa-hero-content-top: clamp(76px, 10vw, 132px);
  --saa-hero-content-bottom: clamp(72px, 8vw, 118px);
}

main :where(.hero-scene, .hero-scene--subpage) {
  align-items: center !important;
  display: flex !important;
  isolation: isolate !important;
  min-height: min(780px, calc(100svh - var(--saa-header-h))) !important;
  overflow: hidden !important;
  padding: var(--saa-hero-content-top) var(--saa-page-x) var(--saa-hero-content-bottom) !important;
  position: relative !important;
}

main :where(.hero-scene__media) {
  background: #07111c !important;
  bottom: 0 !important;
  clip-path: none !important;
  inset: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  position: absolute !important;
  width: 100% !important;
  z-index: 0 !important;
}

main :where(.hero-scene__media img) {
  animation: none !important;
  display: block !important;
  filter: none !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: none !important;
  transition: none !important;
  width: 100% !important;
}

main :where(.hero-scene__content) {
  left: auto !important;
  max-width: var(--saa-hero-content-max) !important;
  position: relative !important;
  top: auto !important;
  transform: none !important;
  width: min(100%, var(--saa-hero-content-max)) !important;
  z-index: 3 !important;
}

main :where(.hero-scene::before) {
  background:
    linear-gradient(90deg, rgba(7, 17, 28, .92) 0%, rgba(7, 17, 28, .78) 34%, rgba(7, 17, 28, .34) 65%, rgba(7, 17, 28, .08) 100%),
    linear-gradient(180deg, rgba(7, 17, 28, .12) 0%, rgba(7, 17, 28, .72) 100%) !important;
  content: "" !important;
  inset: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  z-index: 1 !important;
}

main :where(.hero-scene::after) {
  background: linear-gradient(180deg, transparent 0%, var(--saa-surface) 100%) !important;
  bottom: 0 !important;
  content: "" !important;
  height: 22% !important;
  left: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  right: 0 !important;
  z-index: 2 !important;
}

@media (max-width: 1024px) {
  main :where(.hero-scene, .hero-scene--subpage) {
    justify-content: flex-end !important;
    min-height: clamp(600px, calc(100svh - var(--saa-header-h-mobile)), 760px) !important;
    padding: clamp(190px, 34svh, 300px) var(--saa-shell-x-tablet) 42px !important;
  }

  main :where(.hero-scene__content) {
    max-width: 100% !important;
    width: 100% !important;
  }

  main :where(.hero-scene__media img) {
    object-position: center top !important;
  }

  main :where(.hero-scene::before) {
    background:
      linear-gradient(180deg, rgba(7, 17, 28, .22) 0%, rgba(7, 17, 28, .58) 44%, rgba(7, 17, 28, .94) 100%),
      linear-gradient(90deg, rgba(7, 17, 28, .38) 0%, rgba(7, 17, 28, .12) 100%) !important;
  }
}

@media (max-width: 640px) {
  main :where(.hero-scene, .hero-scene--subpage) {
    padding-left: var(--saa-shell-x-mobile) !important;
    padding-right: var(--saa-shell-x-mobile) !important;
  }
}

/* Global system step 3: typography scale.

   2026-08-04 (Block 5b, Befund H): JE GROESSE EIN EINZIGES clamp() fuer den
   ganzen Breitenbereich. Vorher wurde jede dieser Variablen unter 980px durch
   ein ZWEITES clamp() mit steilerer vw-Steigung ersetzt. An der 980er-Grenze
   sprang die Ueberschrift dadurch nach OBEN, wenn das Fenster kleiner wurde:
   h2 mass knapp ueber 980px 28px und knapp darunter 34px, und ein 768px-Tablet
   zeigte groessere Ueberschriften als ein 1024px-Laptop.

   Die neuen Kurven behalten Untergrenze (Handy) und Obergrenze (breiter
   Desktop) exakt bei und verbinden sie linear. Sie sind damit ueber alle
   14 Pruefbreiten monoton. */
:root {
  --saa-type-hero-final: clamp(30px, 20.7px + 2.33vw, 58px);
  --saa-type-h1-final: clamp(30px, 24px + 1.5vw, 48px);
  --saa-type-h2-final: clamp(25px, 20px + 1.25vw, 40px);
  --saa-type-h3-final: clamp(20px, 17.3px + 0.67vw, 28px);
  --saa-type-body-final: clamp(16px, 1vw, 18px);
  --saa-type-small-final: 13px;
}

main :where(.hero-scene__title, .usecase-overview__title, .saa-hero h1, .term-agent .term-hero h1, .restore-hero h1) {
  font-size: var(--saa-type-hero-final) !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  line-height: 1.04 !important;
  text-wrap: balance;
}

main :where(h1:not(.hero-scene__title), .text-display-lg, .text-display-lg-mobile) {
  font-size: var(--saa-type-h1-final) !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  line-height: 1.08 !important;
  text-wrap: balance;
}

main :where(h2, .text-headline-xl, .font-headline-xl, .section-heading h2, .knowledge-title, .academy-title, .about-title, .pa-heading h2, .pa-evaluation h2, .pa-result h2, .contact-form-panel h2, .contact-info-panel h2, .contact-process-panel h2, .usecase-overview__section-head h2, .usecase-overview__proof h2, .usecase-overview__cta h2, .term-agent h2) {
  font-size: var(--saa-type-h2-final) !important;
  font-weight: 820 !important;
  letter-spacing: 0 !important;
  line-height: 1.14 !important;
  text-wrap: balance;
}

main :where(h3, .text-headline-lg, .font-headline-lg, .knowledge-card h3, .academy-card h3, .about-card h3, .pa-card h3, .contact-step h3, .usecase-card h3, .term-feature h3, .term-step-grid h3, .process-card h3) {
  font-size: var(--saa-type-h3-final) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 1.18 !important;
}

main :where(p, li, label, input, select, textarea, .text-body-lg, .text-body-md, .hero-scene__copy, .restore-lead, .usecase-overview__lead, .saa-hero-sub) {
  letter-spacing: 0 !important;
}

main :where(p, li, .text-body-lg, .text-body-md, .hero-scene__copy, .restore-lead, .usecase-overview__lead, .saa-hero-sub) {
  font-size: var(--saa-type-body-final) !important;
  line-height: 1.62 !important;
}

main :where(.hero-scene__kicker, .eyebrow, .saa-eyebrow, .saa-hero-badge, .home-card-label, .pa-eyebrow, .restore-kicker) {
  color: var(--saa-red) !important;
  font-size: var(--saa-type-small-final) !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

@media (max-width: 1024px) {
  :root {
    /* 2026-08-04 (Block 5b): Die zweiten clamp() fuer hero/h1/h2/h3 sind
       entfallen — sie waren die Ursache des Groessensprungs an der
       980er-Grenze. Die Basiskurven oben decken den ganzen Bereich ab. */
    --saa-type-body-final: 16px;
  }

  main :where(.hero-scene__title .hero-title-line) {
    display: inline !important;
  }

  main :where(.hero-scene__title .hero-title-line + .hero-title-line)::before {
    content: " " !important;
  }
}

/* Global system step 4: CTA contract. */
:root {
  --saa-cta-h: 52px;
  --saa-cta-radius-final: 999px;
  --saa-cta-px: 24px;
}

:where(
  .site-header__cta,
  .hero-scene__primary,
  .btn-primary,
  .term-btn--primary,
  .usecase-overview__cta-link,
  .saa-footer__cta,
  .saa-contact-page button[type="submit"],
  .contact-submit,
  a[href="kontakt.html#kontaktformular"].bg-primary,
  a[href="kontakt.html#kontaktformular"].bg-swiss-red,
  body > nav.fixed:not(.site-header) a[href="potenzialanalyse.html"]
) {
  align-items: center !important;
  background: var(--saa-red) !important;
  border: 1px solid var(--saa-red) !important;
  border-radius: var(--saa-cta-radius-final) !important;
  box-shadow: 0 18px 42px rgba(217, 30, 24, .18) !important;
  color: #ffffff !important;
  display: inline-flex !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  gap: 10px !important;
  justify-content: center !important;
  letter-spacing: 0 !important;
  min-height: var(--saa-cta-h) !important;
  padding: 0 var(--saa-cta-px) !important;
  text-decoration: none !important;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

:where(
  .site-header__cta,
  .hero-scene__primary,
  .btn-primary,
  .term-btn--primary,
  .usecase-overview__cta-link,
  .saa-footer__cta,
  .saa-contact-page button[type="submit"],
  .contact-submit,
  body > nav.fixed:not(.site-header) a[href="potenzialanalyse.html"]
):hover {
  background: #c91612 !important;
  border-color: #c91612 !important;
  box-shadow: 0 22px 50px rgba(217, 30, 24, .24) !important;
  transform: translateY(-1px) !important;
}

:where(
  .hero-scene__secondary,
  .btn-secondary,
  .term-btn--ghost,
  .academy-cta,
  .about-cta,
  .home-system-link,
  a[class*="border-b"][href*="ki-loesungen"]
) {
  align-items: center !important;
  background: rgba(255, 255, 255, .96) !important;
  border: 1px solid rgba(7, 17, 28, .36) !important;
  border-radius: var(--saa-cta-radius-final) !important;
  color: #07111c !important;
  display: inline-flex !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  justify-content: center !important;
  letter-spacing: 0 !important;
  min-height: var(--saa-cta-h) !important;
  padding: 0 var(--saa-cta-px) !important;
  text-decoration: none !important;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease !important;
}

:where(
  .hero-scene__secondary,
  .btn-secondary,
  .term-btn--ghost,
  .academy-cta,
  .about-cta,
  .home-system-link,
  a[class*="border-b"][href*="ki-loesungen"]
):hover {
  border-color: var(--saa-red) !important;
  color: var(--saa-red) !important;
  transform: translateY(-1px) !important;
}

@media (max-width: 640px) {
  :where(
    .hero-scene__primary,
    .hero-scene__secondary,
    .btn-primary,
    .btn-secondary,
    .term-btn,
    .usecase-overview__cta-link,
    .saa-contact-page button[type="submit"],
    .contact-submit
  ) {
    width: 100% !important;
  }
}

/* Global system step 5: cards, grids and icon language. */
:root {
  --saa-card-pad: clamp(24px, 2.8vw, 36px);
  --saa-card-border-light: rgba(7, 17, 28, .14);
  --saa-card-border-dark: rgba(239, 241, 243, .16);
  --saa-card-bg-light: rgba(255, 255, 255, .96);
  --saa-card-bg-dark: rgba(239, 241, 243, .045);
}

main :where(
  .process-card,
  .bento-card,
  .bento-cell,
  .home-offer-card,
  .home-agent-card,
  .saa-signal-card,
  .knowledge-card,
  .academy-card,
  .about-card,
  .pa-card,
  .usecase-card,
  .beratung-board-card,
  .beratung-service-card,
  .beratung-expect-card,
  .dienste-practice-card,
  .dienste-problem-grid article,
  .dienste-industry-grid article,
  .term-feature,
  .contact-step
) {
  border: 1px solid var(--saa-card-border-light) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  padding: var(--saa-card-pad) !important;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease !important;
}

main :where(
  .process-card,
  .bento-card,
  .bento-cell,
  .home-offer-card,
  .home-agent-card,
  .saa-signal-card,
  .knowledge-card,
  .academy-card,
  .about-card,
  .pa-card,
  .usecase-card,
  .beratung-board-card,
  .beratung-service-card,
  .beratung-expect-card,
  .dienste-practice-card,
  .dienste-problem-grid article,
  .dienste-industry-grid article,
  .term-feature,
  .contact-step
):hover {
  border-color: color-mix(in srgb, var(--saa-red) 52%, transparent) !important;
  box-shadow: 0 22px 54px rgba(7, 17, 28, .10) !important;
  transform: translateY(-3px) !important;
}

main :where(.material-symbols-outlined) {
  color: var(--saa-red) !important;
  font-size: 28px !important;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 28 !important;
  line-height: 1 !important;
}

main :where(.home-icon, .usecase-card__icon, .saa-card-icon, .pa-card .material-symbols-outlined) {
  align-items: center !important;
  color: var(--saa-red) !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  height: 36px !important;
  justify-content: center !important;
  width: 36px !important;
}

@media (max-width: 640px) {
  main :where(
    .process-card,
    .bento-card,
    .bento-cell,
    .home-offer-card,
    .home-agent-card,
    .saa-signal-card,
    .knowledge-card,
    .academy-card,
    .about-card,
    .pa-card,
    .usecase-card,
    .beratung-board-card,
    .beratung-service-card,
    .beratung-expect-card,
    .dienste-practice-card,
    .dienste-problem-grid article,
    .dienste-industry-grid article,
    .term-feature,
    .contact-step
  ) {
    padding: 22px !important;
  }
}

/* Global system step 6: visual media behavior. */
main :where(
  .visual-media,
  .visual-media--tile,
  .visual-media--bento,
  .visual-media--wide,
  .visual-media--cta,
  .home-trust-proof__media,
  .knowledge-visual-card,
  .wissen-proof-image,
  .wissen-security-image,
  .academy-image,
  .about-image,
  .pa-image,
  .usecase-card__media,
  .term-showcase-card,
  .term-feature--visual,
  .term-industry-grid figure
) {
  background: #07111c !important;
  overflow: hidden !important;
  position: relative !important;
}

main :where(
  .visual-media,
  .visual-media--tile,
  .visual-media--bento,
  .visual-media--wide,
  .visual-media--cta,
  .home-trust-proof__media,
  .knowledge-visual-card,
  .wissen-proof-image,
  .wissen-security-image,
  .academy-image,
  .about-image,
  .pa-image,
  .usecase-card__media,
  .term-showcase-card,
  .term-feature--visual,
  .term-industry-grid figure
) > img {
  display: block !important;
  height: 100% !important;
  max-width: none !important;
  min-height: 100% !important;
  object-fit: cover !important;
  object-position: center 38% !important;
  transition: transform .28s ease, filter .28s ease !important;
  width: 100% !important;
}

main :where(
  .visual-media,
  .visual-media--tile,
  .visual-media--bento,
  .visual-media--wide,
  .visual-media--cta,
  .home-trust-proof__media,
  .knowledge-visual-card,
  .wissen-proof-image,
  .wissen-security-image,
  .academy-image,
  .about-image,
  .pa-image,
  .usecase-card__media,
  .term-showcase-card,
  .term-feature--visual,
  .term-industry-grid figure
):hover > img {
  filter: saturate(1.02) contrast(1.02) !important;
  transform: scale(1.025) !important;
}

main :where(.hero-scene__media, .saa-hero-visual, .term-hero__visual) > img,
main :where(.hero-scene__media, .saa-hero-visual, .term-hero__visual):hover > img {
  filter: none !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  main :where(img, .process-card, .bento-card, .bento-cell, .home-offer-card, .home-agent-card, .usecase-card) {
    transition: none !important;
  }

  main :where(
    .visual-media,
    .visual-media--tile,
    .visual-media--bento,
    .visual-media--wide,
    .visual-media--cta,
    .home-trust-proof__media,
    .knowledge-visual-card,
    .wissen-proof-image,
    .wissen-security-image,
    .academy-image,
    .about-image,
    .pa-image,
    .usecase-card__media,
    .term-showcase-card,
    .term-feature--visual,
    .term-industry-grid figure
  ):hover > img {
    transform: none !important;
  }
}

html body:has(.usecase-overview-page) .site-nav-primary a {
  color: #111827 !important;
}

html body:has(.usecase-overview-page) .site-nav-primary a.is-active {
  color: #d91e18 !important;
}

html .usecase-overview-page .usecase-overview__cta h2 {
  color: #07111c !important;
}

html .usecase-overview-page .usecase-overview__cta p {
  color: #475569 !important;
}

/* KI-Loesungen card tag alignment and contrast. */
.usecase-overview-page .usecase-card__body {
  display: grid !important;
  flex: 1 1 auto !important;
  grid-template-rows: auto minmax(58px, auto) minmax(74px, auto) minmax(56px, auto) 26px 40px !important;
  min-width: 0 !important;
  row-gap: 0 !important;
}

.usecase-overview-page .usecase-card h3 {
  align-self: start !important;
  margin-bottom: 8px !important;
}

.usecase-overview-page .usecase-card__benefit {
  align-self: start !important;
  margin-bottom: 12px !important;
}

.usecase-overview-page .usecase-card__proof {
  align-self: start !important;
  margin: 0 !important;
}

.usecase-overview-page .usecase-card__link {
  align-self: end !important;
  margin-top: 0 !important;
}

@media (max-width: 900px) {
  .usecase-overview-page .usecase-card__body {
    grid-template-rows: auto minmax(48px, auto) minmax(0, auto) minmax(0, auto) 26px 40px !important;
  }
}

/* Global page contract: header, hero, type and CTA must behave as one website. */
:root {
  --saa-header-h: 84px;
  --saa-header-h-mobile: 76px;
  /* 2026-08-04 (Block 4): aus dem Layout-Vertrag abgeleitet, siehe oben. */
  --saa-page-x: var(--saig-gutter);
  --saa-content-max: var(--saig-shell);
  --saa-hero-gap: clamp(32px, 5vw, 72px);
  --saa-hero-min: min(760px, calc(100svh - var(--saa-header-h)));
  /* 2026-08-04 (Block 5b, Befund H): ein clamp() ueber den ganzen
     Breitenbereich. Untergrenze und Obergrenze sind die des frueheren
     Mobil- bzw. Desktop-clamp(); dazwischen linear. Das zweite clamp()
     im Media-Query darunter ist entfallen. */
  --saa-hero-title: clamp(30px, 19px + 2.76vw, 58px);
  --saa-page-h1: clamp(30px, 23.5px + 1.64vw, 48px);
  --saa-page-h2: clamp(25px, 19.9px + 1.28vw, 40px);
  --saa-page-h3: clamp(20px, 17.5px + 0.62vw, 28px);
  --saa-lead: clamp(17px, 1.28vw, 20px);
  --saa-button-radius: 999px;
}

.site-header,
body > nav.fixed:not(.site-header) {
  height: var(--saa-header-h) !important;
  min-height: var(--saa-header-h) !important;
}

.site-header__inner {
  height: var(--saa-header-h) !important;
  min-height: var(--saa-header-h) !important;
}

.site-main,
.subpage-main,
.contact-main,
.restore-main,
main.site-main,
main.subpage-main {
  margin-top: 0 !important;
  padding-top: var(--saa-header-h) !important;
}

body > nav.fixed:not(.site-header) + main,
body > nav.fixed:not(.site-header) + .hero-scene,
body > nav.fixed:not(.site-header) + .hero-scene--subpage,
body > nav.fixed:not(.site-header) + .subpage-hero-scene {
  margin-top: 0 !important;
}

.hero-scene,
.hero-scene--subpage,
.restore-hero,
.usecase-overview__hero,
.term-agent .term-hero,
.saa-hero {
  box-sizing: border-box !important;
  min-height: var(--saa-hero-min) !important;
}

.contact-hero {
  box-sizing: border-box !important;
  min-height: 0 !important;
}

.hero-scene,
.hero-scene--subpage {
  display: flex !important;
  align-items: center !important;
  min-height: var(--saa-hero-min) !important;
  padding: clamp(76px, 9vw, 132px) var(--saa-page-x) clamp(72px, 8vw, 118px) !important;
  position: relative !important;
}

.hero-scene__content {
  left: auto !important;
  max-width: min(720px, 58vw) !important;
  position: relative !important;
  top: auto !important;
  width: 100% !important;
  z-index: 3 !important;
}

.hero-scene__media {
  aspect-ratio: auto !important;
  bottom: 0 !important;
  clip-path: none !important;
  height: auto !important;
  inset: 0 !important;
  min-height: 0 !important;
  position: absolute !important;
  width: 100% !important;
  z-index: 0 !important;
}

.hero-scene::before,
.hero-scene::after,
.hero-scene__media::after {
  pointer-events: none !important;
}

.hero-scene::before {
  background:
    linear-gradient(90deg, rgba(7, 17, 28, .9) 0%, rgba(7, 17, 28, .72) 34%, rgba(7, 17, 28, .26) 64%, rgba(7, 17, 28, .08) 100%),
    linear-gradient(180deg, rgba(7, 17, 28, .16) 0%, rgba(7, 17, 28, .76) 100%) !important;
  content: "" !important;
  inset: 0 !important;
  position: absolute !important;
  z-index: 1 !important;
}

.hero-scene::after {
  background: linear-gradient(180deg, transparent 0%, var(--saa-surface) 100%) !important;
  bottom: 0 !important;
  content: "" !important;
  height: 22% !important;
  left: 0 !important;
  position: absolute !important;
  right: 0 !important;
  z-index: 2 !important;
}

.hero-scene__media img,
.saa-hero img,
.contact-hero img,
.term-hero img {
  animation: none !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: none !important;
  transition: none !important;
  width: 100% !important;
}

.hero-scene__media:hover img,
.hero-scene:hover .hero-scene__media img,
.hero-scene:focus-within .hero-scene__media img,
.ki-dienste-page .hero-scene__media img {
  animation: none !important;
  transform: none !important;
  transition: none !important;
}

.ki-dienste-page .hero-scene__media::before {
  animation: none !important;
  display: none !important;
}

.hero-scene__title,
.restore-hero h1,
.usecase-overview__title,
.term-agent .term-hero h1,
.contact-hero h1,
.saa-hero h1 {
  font-size: var(--saa-hero-title) !important;
  letter-spacing: 0 !important;
  line-height: 1.04 !important;
  max-width: 760px !important;
}

main :where(h1:not(.hero-scene__title), .text-display-lg, .text-display-lg-mobile) {
  font-size: var(--saa-page-h1) !important;
  letter-spacing: 0 !important;
  line-height: 1.08 !important;
}

main :where(h2, .text-headline-xl, .font-headline-xl, .section-heading h2, .knowledge-title, .academy-title, .about-title, .pa-heading h2, .pa-evaluation h2, .pa-result h2, .contact-form-panel h2, .contact-info-panel h2, .contact-process-panel h2, .usecase-overview__section-head h2, .usecase-overview__proof h2, .usecase-overview__cta h2, .term-agent h2) {
  font-size: var(--saa-page-h2) !important;
  letter-spacing: 0 !important;
  line-height: 1.14 !important;
}

main :where(h3, .text-headline-lg, .font-headline-lg, .knowledge-card h3, .academy-card h3, .about-card h3, .pa-card h3, .contact-step h3, .usecase-card h3, .term-feature h3, .term-step-grid h3) {
  font-size: var(--saa-page-h3) !important;
  letter-spacing: 0 !important;
  line-height: 1.18 !important;
}

.hero-scene__copy,
.restore-lead,
.usecase-overview__lead,
.term-agent .term-hero__copy > p,
.contact-hero p,
.saa-hero p {
  font-size: var(--saa-lead) !important;
  line-height: 1.6 !important;
  max-width: 640px !important;
}

.site-header__cta,
.hero-scene__primary,
.btn-primary,
.term-btn--primary,
.usecase-overview__cta-link,
body > nav.fixed:not(.site-header) > a.bg-primary,
body > nav.fixed:not(.site-header) > a.bg-swiss-red,
body > nav.fixed:not(.site-header) > div.flex > a.bg-swiss-red,
body > nav.fixed:not(.site-header) a[href="potenzialanalyse.html"] {
  border-radius: var(--saa-button-radius) !important;
}

.hero-scene__secondary,
.btn-secondary,
.term-btn--ghost,
.academy-cta,
.about-cta,
a[class*="border-b"][href*="ki-loesungen"] {
  border-radius: var(--saa-button-radius) !important;
}

@media (max-width: 1024px) {
  :root {
    /* 2026-08-04 (Block 5b): zweites clamp() entfallen, siehe Basiskurve. */
    --saa-lead: 16px;
  }

  .site-header,
  body > nav.fixed:not(.site-header),
  .site-header__inner {
    height: var(--saa-header-h-mobile) !important;
    min-height: var(--saa-header-h-mobile) !important;
  }

  .site-main,
  .subpage-main,
  .contact-main,
  .restore-main,
  main.site-main,
  main.subpage-main {
    padding-top: var(--saa-header-h-mobile) !important;
  }

  .hero-scene,
  .hero-scene--subpage,
  .usecase-overview__hero,
  .saa-hero,
  .term-agent .term-hero,
  .restore-hero {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    min-height: clamp(620px, calc(100svh - var(--saa-header-h-mobile)), 780px) !important;
    overflow: hidden !important;
    padding: clamp(220px, 36svh, 320px) 20px 42px !important;
    position: relative !important;
  }

  .hero-scene__content,
  .usecase-overview__intro,
  .saa-hero-content,
  .term-agent .term-hero__copy,
  .restore-hero > :first-child {
    max-width: 100% !important;
    order: 1 !important;
    position: relative !important;
    transform: none !important;
    z-index: 3 !important;
  }

  .hero-scene__kicker {
    font-size: 11px !important;
    letter-spacing: .08em !important;
    margin-bottom: 14px !important;
  }

  .hero-scene__title,
  .restore-hero h1,
  .usecase-overview__title,
  .term-agent .term-hero h1,
  .saa-hero h1 {
    font-size: var(--saa-hero-title) !important;
    line-height: 1.04 !important;
    max-width: 100% !important;
  }

  .hero-scene__title .hero-title-line {
    display: inline !important;
  }

  .hero-scene__title .hero-title-line + .hero-title-line::before {
    content: " " !important;
  }

  .hero-scene__copy,
  .usecase-overview__lead,
  .saa-hero-sub,
  .term-agent .term-hero__copy > p,
  .restore-lead {
    font-size: var(--saa-lead) !important;
    line-height: 1.55 !important;
    margin-top: 18px !important;
    max-width: 100% !important;
  }

  .hero-scene__media,
  .saa-hero-visual,
  .term-agent .term-hero__visual,
  .restore-visual {
    aspect-ratio: auto !important;
    inset: 0 !important;
    min-height: 0 !important;
    order: 0 !important;
    position: absolute !important;
    width: 100% !important;
    z-index: 0 !important;
  }

  .hero-scene__media img,
  .saa-hero-visual img,
  .term-agent .term-hero__visual img,
  .restore-visual img {
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    transform: none !important;
    width: 100% !important;
  }

  .hero-scene::before,
  .usecase-overview__hero::before,
  .saa-hero::before,
  .term-agent .term-hero::before,
  .restore-hero::before {
    background:
      linear-gradient(180deg, rgba(7, 17, 28, .24) 0%, rgba(7, 17, 28, .58) 42%, rgba(7, 17, 28, .92) 100%),
      linear-gradient(90deg, rgba(7, 17, 28, .42) 0%, rgba(7, 17, 28, .12) 100%) !important;
    content: "" !important;
    inset: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    z-index: 1 !important;
  }

  .hero-scene__actions,
  .usecase-overview__actions,
  .saa-hero-actions,
  .term-agent .term-hero__actions,
  .restore-actions {
    align-items: stretch !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-top: 24px !important;
    width: 100% !important;
  }

  .hero-scene__primary,
  .hero-scene__secondary,
  .btn-primary,
  .btn-secondary,
  .term-btn,
  .usecase-overview__cta-link {
    min-height: 50px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    width: 100% !important;
  }

  .contact-hero {
    min-height: 0 !important;
    padding: 34px 0 18px !important;
  }

  .contact-hero h1 {
    font-size: var(--saa-page-h1) !important;
    line-height: 1.06 !important;
  }
}

@media (max-width: 430px) {
  .hero-scene,
  .hero-scene--subpage,
  .usecase-overview__hero,
  .saa-hero,
  .term-agent .term-hero,
  .restore-hero {
    min-height: clamp(600px, calc(100svh - var(--saa-header-h-mobile)), 740px) !important;
    padding: clamp(190px, 33svh, 280px) 16px 34px !important;
  }

  .hero-scene__title,
  .usecase-overview__title,
  .saa-hero h1,
  .term-agent .term-hero h1,
  .restore-hero h1 {
    font-size: clamp(28px, 8.4vw, 34px) !important;
  }

  .hero-scene__copy,
  .usecase-overview__lead,
  .saa-hero-sub,
  .term-agent .term-hero__copy > p,
  .restore-lead {
    font-size: 15.5px !important;
  }
}

/* Global header alignment and contrast contract. */
.site-header,
body > nav.fixed:not(.site-header) {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(7, 17, 28, .12) !important;
  color: #07111c !important;
}

.site-header__inner {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: minmax(164px, 220px) minmax(0, 1fr) auto !important;
  margin: 0 auto !important;
  max-width: none !important;
  padding-left: var(--saa-page-x) !important;
  padding-right: var(--saa-page-x) !important;
  width: 100% !important;
}

.site-logo,
nav a[aria-label="Swiss AI Agency Startseite"],
body > nav.fixed:not(.site-header) > a.block[aria-label="Swiss AI Agency Startseite"],
body > nav.fixed:not(.site-header) > a[aria-label="Swiss AI Agency Startseite"] {
  justify-self: start !important;
  margin: 0 !important;
}

.site-nav-primary,
body > nav.fixed:not(.site-header) > div.hidden {
  justify-content: center !important;
}

.site-nav-primary a,
body > nav.fixed:not(.site-header) > div.hidden a {
  color: rgba(7, 17, 28, .76) !important;
  opacity: 1 !important;
}

.site-nav-primary a:hover,
.site-nav-primary a.is-active,
body > nav.fixed:not(.site-header) > div.hidden a:hover,
body > nav.fixed:not(.site-header) > div.hidden a.text-primary,
body > nav.fixed:not(.site-header) > div.hidden a.border-primary {
  color: var(--saa-red) !important;
}

.site-header__utility,
body.page-shell > .site-header .site-header__utility {
  justify-self: end !important;
  margin-left: 0 !important;
}

.site-header__actions {
  align-items: center !important;
  display: flex !important;
  gap: 16px !important;
  justify-content: flex-end !important;
}

.theme-toggle,
.site-header .theme-toggle,
body > nav.fixed:not(.site-header) .theme-toggle {
  background: #ffffff !important;
  border: 1px solid rgba(7, 17, 28, .18) !important;
  color: #07111c !important;
}

@media (max-width: 1120px) {
  .site-header__inner {
    grid-template-columns: minmax(152px, 180px) minmax(0, 1fr) auto !important;
  }
}

@media (max-width: 1024px) {
  .site-header__inner {
    display: flex !important;
  }

  .site-logo,
  nav a[aria-label="Swiss AI Agency Startseite"] {
    margin-right: auto !important;
  }

  .site-header__utility {
    margin-left: auto !important;
  }
}

/* Wissen v2 - Tereza knowledge cockpit override */
.wissen-main--lab {
  background: #eef2f6;
  color: #102033;
}

.wissen-main--lab .wissen-shell {
  width: min(100% - 96px, 1280px);
  margin: 0 auto;
}

.wissen-command-strip {
  position: relative;
  z-index: 2;
  background: #071d2a;
  border-top: 1px solid rgba(255,255,255,.1);
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.wissen-command-strip__inner {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.wissen-command-strip span {
  min-width: 0;
  padding: 18px 16px;
  color: rgba(239,241,243,.78);
  font: 600 12px/1.2 Inter, sans-serif;
  text-transform: uppercase;
  letter-spacing: .02em;
  border-left: 1px solid rgba(255,255,255,.1);
}

.wissen-command-strip span:last-child {
  border-right: 1px solid rgba(255,255,255,.1);
}

.wissen-command-strip span::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 10px;
  background: #ff2d28;
  box-shadow: 0 0 18px rgba(255,45,40,.62);
  vertical-align: middle;
}

.wissen-lab-section,
.wissen-guide-section,
.wissen-console-section,
.wissen-check-section--flow,
.wissen-regulation-section--timeline,
.wissen-faq-section--editorial,
.wissen-final-section--lab {
  padding: 104px 0;
}

.wissen-lab-section {
  background:
    linear-gradient(105deg, rgba(7,29,42,.98) 0%, rgba(7,29,42,.96) 48%, rgba(38,19,31,.96) 100%),
    radial-gradient(circle at 82% 18%, rgba(255,45,40,.24), transparent 34%);
  color: #eff1f3;
  overflow: hidden;
}

.wissen-lab-section::before,
.wissen-console-section::before,
.wissen-final-section--lab::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: .22;
}

.wissen-lab-section,
.wissen-console-section,
.wissen-final-section--lab {
  position: relative;
}

.wissen-lab-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
  gap: 72px;
  align-items: center;
}

.wissen-lab-copy h2,
.wissen-guide-copy h2,
.wissen-console-copy h2,
.wissen-check-intro h2,
.wissen-regulation-copy h2,
.wissen-faq-editorial h2,
.wissen-final-panel h2 {
  margin: 0 0 24px;
  font: 500 clamp(34px, 4.2vw, 64px)/1.03 Inter, sans-serif;
  letter-spacing: 0;
  overflow-wrap: normal;
  word-break: normal;
}

.wissen-lab-copy p,
.wissen-guide-copy p,
.wissen-console-copy p,
.wissen-check-intro p,
.wissen-regulation-copy p,
.wissen-faq-editorial p,
.wissen-final-panel p {
  max-width: 680px;
  font: 500 18px/1.72 Inter, sans-serif;
  color: inherit;
}

.wissen-decision-radar {
  position: relative;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  padding: 40px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035);
}

.wissen-radar-axis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-bottom: 34px;
  border-bottom: 1px solid rgba(255,255,255,.18);
}

.wissen-radar-axis span {
  position: relative;
  padding: 0 0 18px;
  color: rgba(239,241,243,.76);
  font: 600 12px/1.2 Inter, sans-serif;
  text-transform: uppercase;
}

.wissen-radar-axis span::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 10px;
  height: 10px;
  background: #ff2d28;
  box-shadow: 0 0 18px rgba(255,45,40,.75);
}

.wissen-radar-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.wissen-radar-grid article {
  min-width: 0;
  min-height: 220px;
  padding: 28px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(7,29,42,.68);
  transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}

.wissen-radar-grid article:hover,
.wissen-console__terms button:hover,
.wissen-console__terms button:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(255,45,40,.72);
  background: rgba(255,45,40,.12);
  box-shadow: 0 0 0 1px rgba(255,45,40,.16), 0 18px 60px rgba(255,45,40,.16);
}

.wissen-radar-grid strong,
.wissen-guide-number span,
.wissen-guide-rules span,
.wissen-console__detail span {
  display: block;
  color: #ff2d28;
  font: 900 12px/1 Inter, sans-serif;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.wissen-radar-grid h3 {
  margin: 28px 0 14px;
  color: #fff;
  font: 500 28px/1.08 Inter, sans-serif;
}

.wissen-radar-grid p {
  color: rgba(239,241,243,.76);
  font: 600 16px/1.58 Inter, sans-serif;
}

.wissen-guide-section {
  background: #f7f9fb;
}

.wissen-guide-layout {
  display: grid;
  grid-template-columns: 170px minmax(0, .9fr) minmax(300px, .82fr);
  gap: 56px;
  align-items: start;
}

.wissen-guide-number {
  position: sticky;
  top: 112px;
  border-left: 5px solid #ff2d28;
  padding: 14px 0 14px 24px;
}

.wissen-guide-number strong {
  display: block;
  margin-top: 8px;
  color: #102033;
  font: 900 28px/1.05 Inter, sans-serif;
}

.wissen-guide-rules {
  display: grid;
  gap: 0;
  border-top: 1px solid #cfd7e3;
}

.wissen-guide-rules div {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 22px;
  padding: 24px 0;
  border-bottom: 1px solid #cfd7e3;
}

.wissen-guide-rules p {
  margin: 0;
  color: #23344a;
  font: 500 19px/1.45 Inter, sans-serif;
}

.wissen-console-section {
  background: #071d2a;
  color: #eff1f3;
  overflow: hidden;
}

.wissen-console-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
  gap: 64px;
  align-items: stretch;
}

.wissen-console {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  min-height: 420px;
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}

.wissen-console__terms {
  display: grid;
  align-content: start;
  border-right: 1px solid rgba(255,255,255,.14);
}

.wissen-console__terms button {
  appearance: none;
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
  background: transparent;
  color: rgba(239,241,243,.86);
  cursor: pointer;
  font: 600 15px/1.2 Inter, sans-serif;
  padding: 22px;
  text-align: left;
  transition: transform .22s ease, background .22s ease, box-shadow .22s ease;
}

.wissen-console__detail {
  display: grid;
  align-content: center;
  padding: clamp(32px, 5vw, 68px);
}

.wissen-console__detail h3 {
  margin: 20px 0 18px;
  color: #fff;
  font: 900 clamp(28px, 3.6vw, 52px)/1.04 Inter, sans-serif;
}

.wissen-console__detail p {
  max-width: 680px;
  color: rgba(239,241,243,.78);
  font: 600 18px/1.72 Inter, sans-serif;
}

.wissen-check-section--flow {
  background: #eef2f6;
}

.wissen-check-flow {
  display: grid;
  grid-template-columns: minmax(280px, .76fr) minmax(0, 1.24fr);
  gap: 72px;
  align-items: start;
}

.wissen-flow-list {
  counter-reset: wissenFlow;
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid #bfc9d7;
}

.wissen-flow-list li {
  counter-increment: wissenFlow;
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 20px;
  padding: 0 0 34px 34px;
}

.wissen-flow-list li::before {
  content: counter(wissenFlow, decimal-leading-zero);
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  background: #071d2a;
  color: #fff;
  font: 900 13px/1 Inter, sans-serif;
  box-shadow: inset 0 -4px 0 #ff2d28;
}

.wissen-flow-list strong {
  display: block;
  color: #102033;
  font: 900 26px/1.08 Inter, sans-serif;
  margin-bottom: 10px;
}

.wissen-flow-list p {
  color: #41536b;
  font: 600 17px/1.58 Inter, sans-serif;
}

.wissen-regulation-section--timeline {
  background: #fff;
}

.wissen-regulation-timeline {
  display: grid;
  grid-template-columns: minmax(280px, .74fr) minmax(0, 1.26fr);
  gap: 72px;
  align-items: start;
}

.wissen-timeline {
  position: relative;
  display: grid;
  gap: 24px;
}

.wissen-timeline::before {
  content: "";
  position: absolute;
  left: 116px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #d8dee8;
}

.wissen-timeline article {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.wissen-timeline article::before {
  content: "";
  position: absolute;
  left: 111px;
  top: 8px;
  width: 11px;
  height: 11px;
  background: #ff2d28;
  box-shadow: 0 0 20px rgba(255,45,40,.45);
}

.wissen-timeline time {
  color: #ff2d28;
  font: 900 13px/1.2 Inter, sans-serif;
  text-transform: uppercase;
}

.wissen-timeline strong {
  display: block;
  color: #102033;
  font: 900 24px/1.12 Inter, sans-serif;
  margin-bottom: 8px;
}

.wissen-timeline p {
  color: #41536b;
  font: 600 16px/1.62 Inter, sans-serif;
}

.wissen-faq-section--editorial {
  background: #f7f9fb;
}

.wissen-faq-editorial {
  display: grid;
  grid-template-columns: minmax(280px, .74fr) minmax(0, 1.26fr);
  gap: 72px;
}

.wissen-question-stack {
  display: grid;
  gap: 14px;
}

.wissen-question-stack details {
  border: 1px solid #cfd7e3;
  background: #fff;
  padding: 24px 28px;
  transition: border-color .22s ease, box-shadow .22s ease;
}

.wissen-question-stack details[open],
.wissen-question-stack details:hover {
  border-color: rgba(255,45,40,.48);
  box-shadow: 0 18px 42px rgba(16,32,51,.08);
}

.wissen-question-stack summary {
  color: #102033;
  cursor: pointer;
  font: 900 20px/1.28 Inter, sans-serif;
}

.wissen-question-stack p {
  margin-top: 16px;
  color: #41536b;
  font: 600 16px/1.62 Inter, sans-serif;
}

.wissen-final-section--lab {
  background: linear-gradient(110deg, #071d2a 0%, #071d2a 58%, #2a121d 100%);
  color: #eff1f3;
}

.wissen-final-section--lab .wissen-final-panel {
  position: relative;
  z-index: 1;
  max-width: 900px;
  background: transparent;
  border: 0;
  border-left: 5px solid #ff2d28;
  padding: 18px 0 18px 42px;
}

@media (max-width: 1024px) {
  .wissen-main--lab .wissen-shell {
    width: min(100% - 48px, 1280px);
  }

  .wissen-lab-grid,
  .wissen-guide-layout,
  .wissen-console-layout,
  .wissen-check-flow,
  .wissen-regulation-timeline,
  .wissen-faq-editorial {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .wissen-guide-number {
    position: static;
  }

  .wissen-radar-grid,
  .wissen-command-strip__inner {
    grid-template-columns: 1fr;
  }

  .wissen-console {
    grid-template-columns: 1fr;
  }

  .wissen-console__terms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.14);
  }

  .wissen-timeline::before,
  .wissen-timeline article::before {
    display: none;
  }

  .wissen-timeline article {
    grid-template-columns: 1fr;
    gap: 10px;
    border-left: 4px solid #ff2d28;
    padding-left: 22px;
  }
}

@media (max-width: 640px) {
  .wissen-main--lab .wissen-shell {
    width: min(100% - 32px, 1280px);
  }

  .wissen-lab-section,
  .wissen-guide-section,
  .wissen-console-section,
  .wissen-check-section--flow,
  .wissen-regulation-section--timeline,
  .wissen-faq-section--editorial,
  .wissen-final-section--lab {
    padding: 72px 0;
  }

  .wissen-lab-copy h2,
  .wissen-guide-copy h2,
  .wissen-console-copy h2,
  .wissen-check-intro h2,
  .wissen-regulation-copy h2,
  .wissen-faq-editorial h2,
  .wissen-final-panel h2 {
    font-size: 32px;
    line-height: 1.12;
  }

  .wissen-decision-radar,
  .wissen-console__detail,
  .wissen-question-stack details {
    padding: 24px;
  }

  .wissen-radar-axis {
    grid-template-columns: 1fr;
    gap: 16px;
    border-bottom: 0;
  }

  .wissen-radar-axis span {
    border-bottom: 1px solid rgba(255,255,255,.14);
  }

  .wissen-console__terms {
    grid-template-columns: 1fr;
  }

  .wissen-guide-rules div,
  .wissen-flow-list li {
    grid-template-columns: 1fr;
  }

  .wissen-flow-list {
    border-left: 0;
  }

  .wissen-final-section--lab .wissen-final-panel {
    padding-left: 24px;
  }
}

/* Robert contrast and readability fix for Wissen v2 */
.wissen-page .wissen-lab-section h2,
.wissen-page .wissen-console-section h2,
.wissen-page .wissen-final-section--lab h2,
.wissen-page .wissen-lab-section h3,
.wissen-page .wissen-console-section h3,
.wissen-page .wissen-final-section--lab h3 {
  color: #ffffff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.18);
}

.wissen-page .wissen-lab-section p,
.wissen-page .wissen-console-section p,
.wissen-page .wissen-final-section--lab p,
.wissen-page .wissen-radar-grid p,
.wissen-page .wissen-console__detail p {
  color: rgba(239, 241, 243, .86) !important;
}

.wissen-page .wissen-guide-section h2,
.wissen-page .wissen-check-section--flow h2,
.wissen-page .wissen-regulation-section--timeline h2,
.wissen-page .wissen-faq-section--editorial h2,
.wissen-page .wissen-guide-section h3,
.wissen-page .wissen-check-section--flow h3,
.wissen-page .wissen-regulation-section--timeline h3,
.wissen-page .wissen-faq-section--editorial h3 {
  color: #102033 !important;
}

.wissen-page .wissen-guide-section p,
.wissen-page .wissen-check-section--flow p,
.wissen-page .wissen-regulation-section--timeline p,
.wissen-page .wissen-faq-section--editorial p {
  color: #334155 !important;
}

.wissen-page .text-swiss-red {
  color: #ff2d28 !important;
}

.wissen-page .wissen-lab-copy h2,
.wissen-page .wissen-check-intro h2 {
  max-width: 620px;
}

.wissen-page .wissen-check-flow {
  align-items: start;
  grid-template-columns: minmax(360px, .88fr) minmax(520px, 1.12fr) !important;
}

.wissen-page .wissen-flow-list {
  min-width: 0;
  width: 100%;
}

.wissen-page .wissen-flow-list li {
  box-sizing: border-box;
  grid-template-columns: 64px minmax(0, 1fr) !important;
  padding-left: 30px !important;
}

.wissen-page .wissen-flow-list strong,
.wissen-page .wissen-flow-list p,
.wissen-page .wissen-radar-grid h3,
.wissen-page .wissen-radar-grid p {
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: auto;
}

.wissen-page .wissen-radar-grid article {
  min-width: 0;
}

.wissen-page .wissen-radar-grid h3 {
  color: #ffffff !important;
  font-size: clamp(24px, 2.1vw, 32px) !important;
}

@media (max-width: 1024px) {
  .wissen-page .wissen-check-flow {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  .wissen-page .wissen-flow-list li {
    grid-template-columns: 1fr !important;
    padding-left: 0 !important;
  }
}

/* Wissen final layout reset - Robert stop-fix */
body.wissen-page .wissen-main--lab :where(h1, h2, h3, p, strong, span, li, summary, a, button) {
  overflow-wrap: normal !important;
  word-break: normal !important;
  letter-spacing: 0 !important;
}

body.wissen-page .wissen-main--lab :where(.wissen-lab-section, .wissen-console-section, .wissen-final-section--lab) {
  background: linear-gradient(112deg, #071d2a 0%, #071d2a 54%, #211423 100%) !important;
  color: #eff1f3 !important;
}

body.wissen-page .wissen-main--lab :where(.wissen-guide-section, .wissen-check-section--flow, .wissen-regulation-section--timeline, .wissen-faq-section--editorial) {
  background: #f4f7fa !important;
  color: #102033 !important;
}

body.wissen-page .wissen-main--lab :where(.wissen-lab-section, .wissen-console-section, .wissen-final-section--lab) :where(h2, h3, strong, summary) {
  color: #ffffff !important;
}

body.wissen-page .wissen-main--lab :where(.wissen-lab-section, .wissen-console-section, .wissen-final-section--lab) :where(p, li) {
  color: rgba(239, 241, 243, .84) !important;
}

body.wissen-page .wissen-main--lab :where(.wissen-guide-section, .wissen-check-section--flow, .wissen-regulation-section--timeline, .wissen-faq-section--editorial) :where(h2, h3, strong, summary) {
  color: #102033 !important;
}

body.wissen-page .wissen-main--lab :where(.wissen-guide-section, .wissen-check-section--flow, .wissen-regulation-section--timeline, .wissen-faq-section--editorial) :where(p, li) {
  color: #34465f !important;
}

body.wissen-page .wissen-main--lab .text-swiss-red {
  color: #ff2d28 !important;
}

body.wissen-page .wissen-lab-grid,
body.wissen-page .wissen-console-layout,
body.wissen-page .wissen-check-flow,
body.wissen-page .wissen-regulation-timeline,
body.wissen-page .wissen-faq-editorial {
  display: grid !important;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr) !important;
  gap: clamp(40px, 6vw, 78px) !important;
  align-items: start !important;
}

body.wissen-page .wissen-lab-copy,
body.wissen-page .wissen-console-copy,
body.wissen-page .wissen-check-intro,
body.wissen-page .wissen-regulation-copy,
body.wissen-page .wissen-faq-editorial > div:first-child {
  min-width: 0 !important;
  max-width: 640px !important;
}

body.wissen-page .wissen-lab-copy h2,
body.wissen-page .wissen-console-copy h2,
body.wissen-page .wissen-check-intro h2,
body.wissen-page .wissen-regulation-copy h2,
body.wissen-page .wissen-faq-editorial h2 {
  font-size: clamp(36px, 4vw, 60px) !important;
  line-height: 1.05 !important;
  max-width: 640px !important;
}

body.wissen-page .wissen-lab-copy p,
body.wissen-page .wissen-console-copy p,
body.wissen-page .wissen-check-intro p,
body.wissen-page .wissen-regulation-copy p,
body.wissen-page .wissen-faq-editorial p {
  max-width: 620px !important;
}

body.wissen-page .wissen-decision-radar {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  padding: clamp(28px, 3vw, 42px) !important;
}

body.wissen-page .wissen-radar-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

body.wissen-page .wissen-radar-grid article {
  box-sizing: border-box !important;
  min-width: 0 !important;
  padding: 30px !important;
}

body.wissen-page .wissen-radar-grid h3 {
  color: #ffffff !important;
  font-size: clamp(24px, 2vw, 30px) !important;
  line-height: 1.08 !important;
  margin: 24px 0 14px !important;
}

body.wissen-page .wissen-radar-grid p {
  color: rgba(239, 241, 243, .82) !important;
  font-size: 16px !important;
  line-height: 1.58 !important;
  hyphens: none !important;
}

body.wissen-page .wissen-check-section--flow::before,
body.wissen-page .wissen-check-section--flow::after {
  display: none !important;
}

body.wissen-page .wissen-check-flow {
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr) !important;
}

body.wissen-page .wissen-flow-list {
  display: grid !important;
  gap: 18px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-left: 0 !important;
}

body.wissen-page .wissen-flow-list li {
  display: grid !important;
  grid-template-columns: 72px minmax(0, 1fr) !important;
  gap: 24px !important;
  padding: 26px 28px !important;
  border: 1px solid #cfd7e3 !important;
  background: #ffffff !important;
}

body.wissen-page .wissen-flow-list li::before {
  position: static !important;
  width: 56px !important;
  height: 56px !important;
  background: #071d2a !important;
  color: #ffffff !important;
  box-shadow: inset 0 -4px 0 #ff2d28 !important;
}

body.wissen-page .wissen-flow-list strong {
  display: block !important;
  color: #102033 !important;
  font-size: clamp(22px, 2vw, 28px) !important;
  line-height: 1.08 !important;
  margin: 0 0 10px !important;
}

body.wissen-page .wissen-flow-list p {
  color: #34465f !important;
  font-size: 17px !important;
  line-height: 1.58 !important;
  margin: 0 !important;
  max-width: 720px !important;
  hyphens: none !important;
}

body.wissen-page .wissen-console {
  width: 100% !important;
  min-width: 0 !important;
}

@media (max-width: 1100px) {
  body.wissen-page .wissen-lab-grid,
  body.wissen-page .wissen-console-layout,
  body.wissen-page .wissen-check-flow,
  body.wissen-page .wissen-regulation-timeline,
  body.wissen-page .wissen-faq-editorial {
    grid-template-columns: 1fr !important;
  }

  body.wissen-page .wissen-radar-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  body.wissen-page .wissen-flow-list li {
    grid-template-columns: 1fr !important;
    padding: 24px !important;
  }

  body.wissen-page .wissen-radar-grid article {
    padding: 24px !important;
  }
}

/* Wissen editorial rebuild - no card grid */
body.wissen-page .wissen-editorial {
  background: #f3f6f9 !important;
  color: #102033 !important;
}

body.wissen-page .wissen-editorial :where(h1, h2, h3, p, a, span, strong, em, dt, dd, summary, time, li) {
  box-sizing: border-box;
  letter-spacing: 0 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

body.wissen-page .wissen-editorial-shell {
  width: min(100% - 96px, 1240px);
  margin: 0 auto;
}

body.wissen-page .wissen-index {
  background: #071d2a;
  border-top: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
}

body.wissen-page .wissen-index .wissen-editorial-shell {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

body.wissen-page .wissen-index a {
  color: rgba(239,241,243,.86);
  display: inline-flex;
  font: 600 13px/1 Inter, sans-serif;
  padding: 20px 28px 20px 0;
  text-decoration: none;
  text-transform: uppercase;
}

body.wissen-page .wissen-index a::before {
  content: "";
  width: 26px;
  height: 2px;
  margin: 5px 12px 0 0;
  background: #ff2d28;
}

body.wissen-page :where(.wissen-editorial-intro, .wissen-feature, .wissen-decision, .wissen-glossar, .wissen-regulation, .wissen-questions, .wissen-cta) {
  padding: clamp(78px, 8vw, 124px) 0;
}

body.wissen-page .wissen-editorial-two {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(44px, 6vw, 84px);
  align-items: start;
}

body.wissen-page .wissen-editorial h2 {
  color: #102033 !important;
  font: 900 clamp(34px, 4vw, 62px)/1.04 Inter, sans-serif !important;
  margin: 0;
  max-width: 660px;
}

body.wissen-page .wissen-editorial p,
body.wissen-page .wissen-editorial dd,
body.wissen-page .wissen-editorial em {
  color: #34465f !important;
  font: 600 18px/1.68 Inter, sans-serif !important;
  margin: 0;
}

body.wissen-page .wissen-editorial p + p {
  margin-top: 18px;
}

body.wissen-page .wissen-editorial .text-swiss-red {
  color: #ff2d28 !important;
}

body.wissen-page .wissen-feature,
body.wissen-page .wissen-regulation,
body.wissen-page .wissen-cta {
  background:
    linear-gradient(112deg, rgba(7,29,42,.98), rgba(7,29,42,.96) 56%, rgba(32,18,31,.98)),
    radial-gradient(circle at 82% 16%, rgba(255,45,40,.22), transparent 34%) !important;
  color: #eff1f3 !important;
}

body.wissen-page .wissen-feature h2,
body.wissen-page .wissen-regulation h2,
body.wissen-page .wissen-cta h2,
body.wissen-page .wissen-feature p,
body.wissen-page .wissen-regulation p,
body.wissen-page .wissen-cta p {
  color: #ffffff !important;
}

body.wissen-page .wissen-feature-line {
  max-width: 900px;
  border-left: 5px solid #ff2d28;
  padding-left: clamp(24px, 4vw, 48px);
}

body.wissen-page .wissen-feature-line > span {
  color: #ff2d28 !important;
  display: block;
  font: 900 13px/1 Inter, sans-serif;
  margin-bottom: 22px;
  text-transform: uppercase;
}

body.wissen-page .wissen-feature-line p,
body.wissen-page .wissen-cta p {
  color: rgba(239,241,243,.86) !important;
  max-width: 720px;
  margin-top: 24px;
}

body.wissen-page .wissen-steps {
  counter-reset: step;
  display: grid;
  gap: 0;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(16,32,51,.14);
}

body.wissen-page .wissen-steps li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(16,32,51,.14);
}

body.wissen-page .wissen-steps span.material-symbols-outlined:not(#____never____) {
  color: #ff2d28 !important;
  -webkit-text-fill-color: #ff2d28 !important;
  font-size: 20px !important;
  line-height: 1 !important;
}

body.wissen-page .wissen-steps p:not(#____never____) {
  color: #34465f !important;
  -webkit-text-fill-color: #34465f !important;
  font: 500 16px/1.5 Inter, sans-serif !important;
}

body.wissen-page .wissen-section-heading {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 60px;
  margin-bottom: 48px;
}

body.wissen-page .wissen-matrix {
  border-top: 2px solid #102033;
  display: grid;
}

body.wissen-page .wissen-matrix > div {
  display: grid;
  grid-template-columns: minmax(150px, .45fr) minmax(0, 1.25fr) minmax(180px, .55fr);
  gap: 32px;
  padding: 26px 0;
  border-bottom: 1px solid #c6d0dc;
  align-items: start;
}

body.wissen-page .wissen-matrix__head span {
  color: #ff2d28 !important;
  font: 900 12px/1 Inter, sans-serif;
  text-transform: uppercase;
}

body.wissen-page .wissen-matrix strong {
  color: #102033 !important;
  font: 900 25px/1.1 Inter, sans-serif;
}

body.wissen-page .wissen-matrix em {
  color: #102033 !important;
  font: 600 15px/1.35 Inter, sans-serif !important;
  font-style: normal;
}

body.wissen-page .wissen-register {
  display: grid;
  gap: 0;
  margin: 0;
  border-top: 1px solid #c6d0dc;
}

body.wissen-page .wissen-register div {
  display: grid;
  grid-template-columns: minmax(150px, .42fr) minmax(0, 1.58fr);
  gap: 34px;
  padding: 24px 0;
  border-bottom: 1px solid #c6d0dc;
}

body.wissen-page .wissen-register dt {
  color: #102033 !important;
  font: 900 24px/1.12 Inter, sans-serif;
}

/* 09.09.: stand zuvor als zweite Spalte neben Überschrift+Bild (Bild dabei
   in der ersten Spalte auf ~450px verkleinert -- Rückmeldung Joshua). Bild
   jetzt in .saa-split neben dem Text, die Chronik darunter als eigene volle
   Zeile; Lesbarkeitsbreite über max-width erhalten, sonst würden die
   Absätze auf voller Containerbreite laufen.
   12.09.: der Block stand mit max-width linksbündig -- rechts blieb auf
   breiten Bildschirmen viel Leerraum stehen (Rückmeldung Joshua). Mit
   margin-inline: auto sitzt er jetzt horizontal zentriert im Abschnitt. */
body.wissen-page .wissen-chronik {
  border-left: 2px solid rgba(255,255,255,.22);
  display: grid;
  gap: 34px;
  margin-top: clamp(36px, 4.4vw, 56px);
  margin-inline: auto;
  max-width: var(--saig-measure);
  padding-left: 22px;
}

body.wissen-page .wissen-chronik div {
  position: relative;
}

body.wissen-page .wissen-chronik div::before {
  content: "";
  position: absolute;
  left: -29px;
  top: 4px;
  width: 12px;
  height: 12px;
  background: #ff2d28;
  box-shadow: 0 0 20px rgba(255,45,40,.58);
}

body.wissen-page .wissen-chronik time {
  color: #ff2d28 !important;
  display: block;
  font: 600 13px/1 Inter, sans-serif;
  margin-bottom: 10px;
  text-transform: uppercase;
}

body.wissen-page .wissen-chronik strong {
  color: #ffffff !important;
  display: block;
  font: 900 25px/1.1 Inter, sans-serif;
  margin-bottom: 8px;
}

body.wissen-page .wissen-questions {
  background: #ffffff;
}

body.wissen-page .wissen-qa {
  display: grid;
  gap: 0;
  border-top: 2px solid #102033;
}

body.wissen-page .wissen-qa details {
  border-bottom: 1px solid #c6d0dc;
  padding: 26px 0;
}

body.wissen-page .wissen-qa summary {
  color: #102033 !important;
  cursor: pointer;
  font: 900 24px/1.22 Inter, sans-serif;
}

body.wissen-page .wissen-qa p {
  margin-top: 16px;
  max-width: 720px;
}

body.wissen-page .wissen-cta .wissen-editorial-shell {
  border-left: 5px solid #ff2d28;
  padding-left: clamp(24px, 4vw, 48px);
}

body.wissen-page .wissen-final-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 34px;
}

@media (max-width: 1024px) {
  body.wissen-page .wissen-editorial-shell {
    width: min(100% - 48px, 1240px);
  }

  body.wissen-page .wissen-editorial-two,
  body.wissen-page .wissen-section-heading,
  body.wissen-page .wissen-matrix > div,
  body.wissen-page .wissen-register div {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 640px) {
  body.wissen-page .wissen-editorial-shell {
    width: min(100% - 32px, 1240px);
  }

  body.wissen-page :where(.wissen-editorial-intro, .wissen-feature, .wissen-decision, .wissen-glossar, .wissen-regulation, .wissen-questions, .wissen-cta) {
    padding: 72px 0;
  }

  body.wissen-page .wissen-editorial h2 {
    font-size: 32px !important;
    line-height: 1.12 !important;
  }

  body.wissen-page .wissen-steps li {
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 10px;
  }

  body.wissen-page .wissen-index a {
    width: 100%;
  }

  body.wissen-page .wissen-final-actions {
    display: grid;
  }

  body.wissen-page .wissen-final-actions a {
    justify-content: center;
    width: 100%;
  }
}

/* Final absolute header contrast guard. Keep this at the end. */
html .site-header,
html body > nav.fixed:not(.site-header) {
  background: #ffffff !important;
  color: #07111c !important;
}

html .site-header :where(a, button, span),
html body > nav.fixed:not(.site-header) :where(a, button, span) {
  color: #253142 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

html .site-header :where(a:hover, a.is-active),
html .site-nav-primary a.is-active,
html body > nav.fixed:not(.site-header) :where(a:hover, a.text-primary, a.border-primary) {
  color: var(--saa-red) !important;
}

html .site-header__cta,
html .site-header__cta *,
html body > nav.fixed:not(.site-header) a[href="potenzialanalyse.html"],
html body > nav.fixed:not(.site-header) a[href="potenzialanalyse.html"] * {
  color: #ffffff !important;
}

/* Academy rebuild - Robert William Tereza */
body.academy-page .academy-main {
  background: #f3f6f9;
  color: #102033;
}

body.academy-page .academy-main :where(h1,h2,h3,p,a,span,strong,li,dt,dd) {
  box-sizing: border-box;
  letter-spacing: 0 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

body.academy-page .academy-shell {
  width: min(100% - 96px, 1240px);
  margin: 0 auto;
}

body.academy-page .academy-index {
  background: #071d2a;
  border-top: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
}

body.academy-page .academy-index .academy-shell {
  display: flex;
  flex-wrap: wrap;
}

body.academy-page .academy-index a {
  color: rgba(239,241,243,.86);
  display: inline-flex;
  font: 600 13px/1 Inter, sans-serif;
  padding: 20px 34px 20px 0;
  text-decoration: none;
  text-transform: uppercase;
}

body.academy-page .academy-index a::before {
  content: "";
  width: 24px;
  height: 2px;
  margin: 5px 12px 0 0;
  background: #ff2d28;
}

body.academy-page :where(.academy-statement,.academy-profile,.academy-learning,.academy-practice,.academy-process,.academy-cta) {
  padding: clamp(82px, 8vw, 128px) 0;
}

body.academy-page .academy-statement,
body.academy-page .academy-practice,
body.academy-page .academy-cta {
  background: linear-gradient(112deg, #071d2a 0%, #071d2a 56%, #211423 100%);
  color: #eff1f3;
}

body.academy-page .academy-profile,
body.academy-page .academy-process {
  background: #f4f7fa;
}

body.academy-page .academy-learning {
  background: #ffffff;
}

body.academy-page .academy-statement-grid,
body.academy-page .academy-profile-grid,
body.academy-page .academy-practice-grid,
body.academy-page .academy-cta-grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(44px, 6vw, 84px);
  align-items: start;
}

body.academy-page .academy-main h2 {
  color: #102033;
  font: 500 clamp(34px, 4vw, 62px)/1.06 Inter, sans-serif;
  margin: 0;
  max-width: 720px;
}

body.academy-page .academy-statement h2,
body.academy-page .academy-practice h2,
body.academy-page .academy-cta h2,
body.academy-page .academy-statement p,
body.academy-page .academy-practice p,
body.academy-page .academy-cta p {
  color: #ffffff !important;
}

body.academy-page .academy-main p,
body.academy-page .academy-main dd {
  color: #34465f;
  font: 600 18px/1.68 Inter, sans-serif;
  margin: 0;
}

body.academy-page .academy-statement p,
body.academy-page .academy-practice p,
body.academy-page .academy-cta p,
body.academy-page .academy-practice dd {
  color: rgba(239,241,243,.86) !important;
}

body.academy-page .academy-statement p + p {
  margin-top: 18px;
}

body.academy-page .text-swiss-red {
  color: #ff2d28 !important;
}

body.academy-page .academy-profile-register {
  border-top: 2px solid #102033;
  display: grid;
  gap: 0;
}

body.academy-page .academy-profile-register article {
  display: grid;
  grid-template-columns: 70px minmax(170px, .48fr) minmax(0, 1fr);
  gap: 28px;
  padding: 28px 0;
  border-bottom: 1px solid #c6d0dc;
  align-items: start;
}

body.academy-page .academy-profile-register strong,
body.academy-page .academy-curriculum span,
body.academy-page .academy-steps span {
  color: #ff2d28 !important;
  font: 600 13px/1 Inter, sans-serif;
  text-transform: uppercase;
}

body.academy-page .academy-profile-register h3 {
  color: #102033;
  font: 500 25px/1.12 Inter, sans-serif;
  margin: 0;
}

body.academy-page .academy-section-head {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 58px;
  margin-bottom: 54px;
  align-items: start;
}

body.academy-page .academy-section-head p {
  max-width: 720px;
}

body.academy-page .academy-curriculum {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 2px solid #102033;
  border-left: 1px solid #c6d0dc;
}

body.academy-page .academy-curriculum div {
  min-width: 0;
  min-height: 270px;
  padding: 30px;
  border-right: 1px solid #c6d0dc;
  border-bottom: 1px solid #c6d0dc;
  background: #fff;
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

body.academy-page .academy-curriculum div:hover {
  border-color: rgba(255,45,40,.55);
  box-shadow: 0 18px 46px rgba(16,32,51,.08);
  transform: translateY(-3px);
}

body.academy-page .academy-curriculum strong {
  color: #102033;
  display: block;
  font: 500 26px/1.1 Inter, sans-serif;
  margin: 28px 0 14px;
}

body.academy-page .academy-curriculum p {
  font-size: 16px;
  line-height: 1.58;
}

body.academy-page .academy-practice figure,
body.academy-page .academy-cta figure {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  margin: 0;
}

body.academy-page .academy-practice img,
body.academy-page .academy-cta img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  display: block;
}

body.academy-page .academy-practice dl {
  display: grid;
  gap: 0;
  margin: 38px 0 0;
  border-top: 1px solid rgba(255,255,255,.2);
}

body.academy-page .academy-practice dl div {
  display: grid;
  grid-template-columns: minmax(170px, .52fr) minmax(0, 1fr);
  gap: 28px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(255,255,255,.2);
}

body.academy-page .academy-practice dt {
  color: #ffffff;
  font: 500 20px/1.18 Inter, sans-serif;
}

body.academy-page .academy-practice dd {
  font-size: 16px !important;
  line-height: 1.6 !important;
}

body.academy-page .academy-steps {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid #102033;
}

body.academy-page .academy-steps li {
  display: grid;
  grid-template-columns: 80px minmax(200px, .45fr) minmax(0, 1fr);
  gap: 30px;
  padding: 28px 0;
  border-bottom: 1px solid #c6d0dc;
  align-items: start;
}

body.academy-page .academy-steps strong {
  color: #102033;
  font: 500 24px/1.12 Inter, sans-serif;
}

body.academy-page .academy-cta .academy-shell {
  border-left: 5px solid #ff2d28;
  padding-left: clamp(24px, 4vw, 48px);
}

body.academy-page .academy-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 34px;
}

@media (max-width: 1100px) {
  body.academy-page .academy-curriculum {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  body.academy-page .academy-shell {
    width: min(100% - 48px, 1240px);
  }

  body.academy-page .academy-statement-grid,
  body.academy-page .academy-profile-grid,
  body.academy-page .academy-practice-grid,
  body.academy-page .academy-cta-grid,
  body.academy-page .academy-section-head,
  body.academy-page .academy-profile-register article,
  body.academy-page .academy-practice dl div,
  body.academy-page .academy-steps li {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 640px) {
  body.academy-page .academy-shell {
    width: min(100% - 32px, 1240px);
  }

  body.academy-page :where(.academy-statement,.academy-profile,.academy-learning,.academy-practice,.academy-process,.academy-cta) {
    padding: 72px 0;
  }

  body.academy-page .academy-main h2 {
    font-size: 32px;
    line-height: 1.12;
  }

  body.academy-page .academy-curriculum {
    grid-template-columns: 1fr;
  }

  body.academy-page .academy-curriculum div {
    min-height: auto;
    padding: 24px;
  }

  body.academy-page .academy-index a {
    width: 100%;
  }

  body.academy-page .academy-actions {
    display: grid;
  }

  body.academy-page .academy-actions a {
    justify-content: center;
    width: 100%;
  }
}

/* Academy v2 program pathway - distinct from Wissen */
body.academy-page .academy-program {
  background: #071d2a !important;
  color: #eff1f3 !important;
}

body.academy-page .academy-program :where(h1,h2,h3,p,a,span,strong,small,b,li) {
  box-sizing: border-box;
  letter-spacing: 0 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

body.academy-page .academy-program-shell {
  width: min(100% - 96px, 1280px);
  margin: 0 auto;
}

body.academy-page .academy-program h2 {
  color: #ffffff !important;
  font: 500 clamp(36px, 5vw, 72px)/1.06 Inter, sans-serif !important;
  margin: 0;
}

body.academy-page .academy-program p {
  color: rgba(239,241,243,.82) !important;
  font: 600 18px/1.68 Inter, sans-serif !important;
  margin: 0;
}

body.academy-page .academy-program-intro,
body.academy-page .academy-pathway,
body.academy-page .academy-lab,
body.academy-page .academy-fit,
body.academy-page .academy-apply {
  position: relative;
  overflow: hidden;
  padding: clamp(84px, 8vw, 132px) 0;
}

body.academy-page .academy-program-intro,
body.academy-page .academy-lab,
body.academy-page .academy-apply {
  background:
    linear-gradient(112deg, #071d2a 0%, #071d2a 55%, #211423 100%),
    radial-gradient(circle at 86% 12%, rgba(255,45,40,.22), transparent 32%) !important;
}

body.academy-page .academy-pathway,
body.academy-page .academy-fit {
  background: #f4f7fa !important;
  color: #102033 !important;
}

body.academy-page .academy-pathway h2,
body.academy-page .academy-fit h2 {
  color: #102033 !important;
}

body.academy-page .academy-pathway p,
body.academy-page .academy-fit p {
  color: #34465f !important;
}

body.academy-page .academy-program-intro .academy-program-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(38px, 6vw, 92px);
  align-items: start;
}

body.academy-page .academy-intro-mark {
  border-left: 5px solid #ff2d28;
  min-height: 150px;
  padding-left: 26px;
}

body.academy-page .academy-intro-mark span {
  color: #ff2d28 !important;
  display: block;
  font: 600 14px/1.2 Inter, sans-serif;
  text-transform: uppercase;
}

body.academy-page .academy-intro-copy {
  max-width: 880px;
}

body.academy-page .academy-intro-copy p {
  margin-top: 24px;
  max-width: 760px;
}

/* 05.09.2026: war zweispaltig — Überschrift links, Vorspann rechts auf
   430px gequetscht. Jetzt gestapelt und linksbündig wie die übrigen
   Sektionsköpfe; der Vorspann bekommt eine lesbare Zeilenlänge statt einer
   schmalen Spalte. */
body.academy-page .academy-pathway-head {
  margin-bottom: clamp(36px, 4.4vw, 56px);
  max-width: 820px;
}

body.academy-page .academy-pathway-head p {
  margin-top: 18px;
  max-width: 62ch;
}

body.academy-page .academy-pathway-track {
  position: relative;
  display: grid;
  /* 04.09.: vorher 1.12fr .88fr .88fr 1.12fr -- ungleiche Spalten liessen
     "Potenzial erkennen"/"Zusammenarbeit pruefen" einzeilig und die beiden
     mittleren Titel zweizeilig umbrechen, der Fliesstext startete dadurch
     auf unterschiedlicher Hoehe. Gleiche Spaltenbreite + reservierte
     Titelhoehe (siehe .academy-pathway-node strong) beheben das. */
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
  border-top: 2px solid #102033;
  border-bottom: 2px solid #102033;
}

body.academy-page .academy-pathway-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: rgba(255,45,40,.45);
  pointer-events: none;
}

body.academy-page .academy-pathway-node {
  position: relative;
  min-height: 330px;
  padding: 34px 28px;
  border-right: 1px solid #c6d0dc;
  display: grid;
  align-content: start;
  gap: 16px;
  background: #f4f7fa;
  z-index: 1;
}

body.academy-page .academy-pathway-node.is-large {
  background: #ffffff;
}

body.academy-page .academy-pathway-node span {
  color: #ff2d28 !important;
  font: 600 13px/1 Inter, sans-serif;
}

body.academy-page .academy-pathway-node strong {
  color: #102033 !important;
  display: block;
  font: 500 clamp(24px, 2.4vw, 36px)/1.04 Inter, sans-serif;
  max-width: 260px;
  /* 04.09.: reserviert Platz fuer zwei Zeilen (2 * line-height 1.04),
     damit der Fliesstext darunter unabhaengig vom Umbruch (1 oder 2
     Zeilen Titel) immer auf derselben Hoehe beginnt. */
  min-height: 2.08em;
}

body.academy-page .academy-pathway-node p {
  font-size: 16px !important;
  line-height: 1.58 !important;
}

body.academy-page .academy-lab-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(360px, .94fr);
  gap: clamp(44px, 6vw, 88px);
  align-items: center;
}

/* 12.09.: sichtbarer Rahmen (border) entfernt (Rückmeldung Joshua).
   13.09.: Radius ergänzt -- fehlte hier komplett, während .saa-figure und
   .lp-figure auf den anderen Seiten durchgehend 14px tragen (Rückmeldung
   Joshua zur Konsistenz). */
body.academy-page .academy-lab-visual {
  min-width: 0;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
}

body.academy-page .academy-lab-visual img {
  display: block;
  width: 100%;
  min-height: 540px;
  object-fit: cover;
}

/* 10.09.: Die frühere 62%-Deckelregel ist mit dem Editorial-Split-Layout
   (EDITORIAL-LAYOUT-SPEC.md) hinfällig -- .saa-split/.saa-split__media
   regelt Breite (520/460/400/340px je Breakpoint) und Position jetzt
   generisch (siehe dort). Das bestehende Praxisbild in #academy-lernen
   (dieselbe Klasse .academy-lab-visual, ausserhalb von .saa-split) bleibt
   davon unberührt, Grösse UND Position unverändert. */
@media (min-width: 768px) {
  body.academy-page #academy-rollen .academy-lab-visual {
    margin-inline: 0;
  }

  body.academy-page #academy-rollen .academy-lab-visual img {
    min-height: 0;
  }
}

body.academy-page .academy-lab-panel {
  border-left: 5px solid #ff2d28;
  padding-left: clamp(26px, 4vw, 48px);
}

body.academy-page .academy-lab-lead {
  margin-top: 22px !important;
  max-width: 620px;
}

body.academy-page .academy-lab-list {
  display: grid;
  gap: 0;
  margin-top: 42px;
  border-top: 1px solid rgba(255,255,255,.2);
}

body.academy-page .academy-lab-list p {
  display: grid;
  grid-template-columns: minmax(180px, .52fr) minmax(0, 1fr);
  gap: 28px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(255,255,255,.2);
}

body.academy-page .academy-lab-list b {
  color: #ffffff !important;
  font: 500 20px/1.18 Inter, sans-serif;
}

body.academy-page .academy-lab-list span {
  color: rgba(239,241,243,.82) !important;
  font: 600 16px/1.58 Inter, sans-serif;
}

body.academy-page .academy-fit-shell {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(44px, 6vw, 84px);
  align-items: center;
}

body.academy-page .academy-fit-copy p {
  margin-top: 24px;
  max-width: 620px;
}

/* 13.09.: erst Radius nur am äusseren Container -- wirkte weiterhin eckig,
   da praktisch jede sichtbare Ecke eine Innenecke zwischen den Feldern war
   (Rückmeldung Joshua). Jetzt wie .partner-triad: einzelne Karten mit Gap
   und je eigenem Radius statt geteilter Rahmenlinien. */
body.academy-page .academy-fit-signals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

body.academy-page .academy-fit-signals div {
  min-height: 300px;
  padding: 32px;
  border: 1px solid #c6d0dc;
  border-radius: 16px;
  background: #ffffff;
}

body.academy-page .academy-fit-signals span {
  display: block;
  width: 46px;
  height: 4px;
  background: #ff2d28;
  margin-bottom: 36px;
  box-shadow: 18px 0 0 rgba(255,45,40,.2);
}

/* Titel passen in die Karte. Die Kacheln sind schmal (156-179px Textbreite;
   der .academy-fit-shell teilt .78fr/1.22fr und der Shell ist auf 1280px
   gedeckelt -> ab ~1376px waechst die Karte NICHT mehr, darum keine vw-Groesse).
   "Verantwortungsbewusst" braucht bei 28px 339px und lief heraus; bei 20px
   trennt es sauber als "Verantwortungs-/bewusst". Die Umbruch-Sperre der
   .academy-program-Ebene (~14093: overflow-wrap/hyphens) wird hier gezielt
   aufgehoben - ohne sie kann ein langes Wort nirgends brechen. */
body.academy-page .academy-fit-signals strong {
  color: #102033 !important;
  display: block;
  font: 500 20px/1.16 Inter, sans-serif;
  margin-bottom: 18px;
  /* Nur hyphens, KEIN overflow-wrap: break-word - break-word schlaegt die
     Silbentrennung und bricht hart mitten im Wort ("...b/ewusst", 3 Zeilen).
     hyphens nutzt die &shy;-Stellen im HTML und setzt einen echten Trennstrich. */
  hyphens: auto !important;
  /* 04.09.: reserviert drei Zeilen Hoehe -- "Verantwortungsbewusst" bricht
     trotz Silbentrennung bei diesem Kartenmass dreizeilig (gemessen:
     69.6px = 3 * 23.2px Zeilenhoehe), "Neugierig"/"Verstaendlich" bleiben
     einzeilig; ohne Reservierung startet der Text darunter je Karte auf
     unterschiedlicher Hoehe. */
  min-height: 3.48em;
}

body.academy-page .academy-fit-signals p {
  font-size: 16px !important;
  line-height: 1.58 !important;
}

body.academy-page .academy-apply-shell {
  display: grid;
  grid-template-columns: minmax(360px, .9fr) minmax(0, 1.1fr);
  gap: clamp(44px, 6vw, 88px);
  align-items: start;
}

body.academy-page .academy-apply-card {
  border-left: 5px solid #ff2d28;
  padding-left: clamp(26px, 4vw, 48px);
}

body.academy-page .academy-apply-card p {
  margin-top: 24px;
  max-width: 640px;
}

html body.academy-page main section.academy-apply .academy-apply-card p.academy-apply-honest {
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: rgba(239,241,243,.72) !important;
  -webkit-text-fill-color: rgba(239,241,243,.72) !important;
  border-left: 3px solid rgba(255,45,40,.6);
  padding-left: 16px;
  max-width: 640px;
}

body.academy-page .academy-apply-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 13.09.: Radius ergänzt (Rückmeldung Joshua zur Konsistenz mit den
   übrigen Karten auf der Seite). */
body.academy-page .academy-apply-steps li {
  min-height: 170px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 16px;
  background: rgba(255,255,255,.045);
  padding: 26px;
}

body.academy-page .academy-apply-steps span {
  color: #ff2d28 !important;
  display: block;
  font: 600 13px/1 Inter, sans-serif;
  margin-bottom: 30px;
}

body.academy-page .academy-apply-steps strong {
  color: #ffffff !important;
  display: block;
  font: 500 25px/1.1 Inter, sans-serif;
}

body.academy-page .academy-apply-steps small {
  color: rgba(239,241,243,.75) !important;
  display: block;
  font: 600 14px/1.4 Inter, sans-serif;
  margin-top: 8px;
}

@media (max-width: 1100px) {
  body.academy-page .academy-pathway-track,
  body.academy-page .academy-fit-signals {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  body.academy-page .academy-program-shell {
    width: min(100% - 48px, 1280px);
  }

  body.academy-page .academy-program-intro .academy-program-shell,
  body.academy-page .academy-lab-shell,
  body.academy-page .academy-fit-shell,
  body.academy-page .academy-apply-shell {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 640px) {
  body.academy-page .academy-program-shell {
    width: min(100% - 32px, 1280px);
  }

  body.academy-page .academy-program-intro,
  body.academy-page .academy-pathway,
  body.academy-page .academy-lab,
  body.academy-page .academy-fit,
  body.academy-page .academy-apply {
    padding: 72px 0;
  }

  body.academy-page .academy-program h2 {
    font-size: 32px !important;
    line-height: 1.12 !important;
  }

  body.academy-page .academy-pathway-track,
  body.academy-page .academy-fit-signals,
  body.academy-page .academy-apply-steps {
    grid-template-columns: 1fr;
  }

  body.academy-page .academy-pathway-track::before {
    display: none;
  }

  body.academy-page .academy-pathway-node,
  body.academy-page .academy-fit-signals div,
  body.academy-page .academy-apply-steps li {
    min-height: auto;
    padding: 24px;
  }

  body.academy-page .academy-lab-list p {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body.academy-page .academy-lab-visual img {
    min-height: 300px;
  }
}

/* Academy impact chain - Unternehmensbezug (Talente -> KMU -> KI-Kultur) */
body.academy-page .academy-impact {
  position: relative;
  overflow: hidden;
  background: #ffffff !important;
  color: #102033 !important;
  padding: clamp(84px, 8vw, 132px) 0;
}

body.academy-page .academy-impact h2 {
  color: #102033 !important;
}

body.academy-page .academy-impact p {
  color: #34465f !important;
}

body.academy-page .academy-impact-head {
  max-width: 860px;
  margin-bottom: clamp(48px, 6vw, 74px);
}

html body.academy-page main section.academy-impact .academy-impact-head .academy-impact-eyebrow {
  color: #d91e18 !important;
  -webkit-text-fill-color: #d91e18 !important;
  display: block;
  font: 600 14px/1.2 Inter, sans-serif;
  text-transform: uppercase;
  margin-bottom: 20px;
}

body.academy-page .academy-impact-head p {
  margin-top: 24px;
  max-width: 720px;
}

/* 13.09.: erst nur der äussere Container bekam Radius (die drei Felder
   teilten sich Rahmenlinien) -- wirkte weiterhin eckig, da praktisch jede
   sichtbare Ecke eine Innenecke zwischen den Feldern war (Rückmeldung
   Joshua). Jetzt wie .partner-triad: einzelne Karten mit Gap und je
   eigenem Radius statt geteilter Rahmenlinien. */
body.academy-page .academy-impact-chain {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

body.academy-page .academy-impact-chain article {
  min-width: 0;
  min-height: 300px;
  padding: 34px 30px;
  border: 1px solid #c6d0dc;
  border-radius: 16px;
  background: #ffffff;
  display: grid;
  align-content: start;
  gap: 16px;
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

body.academy-page .academy-impact-chain article:hover {
  border-color: rgba(255,45,40,.55);
  box-shadow: 0 18px 46px rgba(16,32,51,.08);
  transform: translateY(-3px);
}

html body.academy-page main section.academy-impact .academy-impact-chain .academy-impact-step {
  color: #d91e18 !important;
  -webkit-text-fill-color: #d91e18 !important;
  font: 600 13px/1 Inter, sans-serif;
  letter-spacing: .08em;
}

body.academy-page .academy-impact-chain strong {
  color: #102033 !important;
  display: block;
  font: 500 clamp(22px, 2.1vw, 28px)/1.1 Inter, sans-serif;
}

body.academy-page .academy-impact-chain p {
  font-size: 16px !important;
  line-height: 1.58 !important;
}

body.academy-page .academy-impact-note {
  margin-top: 34px;
  border-left: 5px solid #ff2d28;
  padding-left: clamp(20px, 3vw, 28px);
  max-width: 860px;
}

body.academy-page .academy-impact-note p {
  color: #102033 !important;
  font-weight: 600;
}

@media (max-width: 1024px) {
  body.academy-page .academy-impact-chain {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  body.academy-page .academy-impact {
    padding: 72px 0;
  }

  body.academy-page .academy-impact-chain article {
    min-height: auto;
    padding: 24px;
  }
}

/* Academy Rollen - zwei Richtungen (Beratung / Entwicklung).
   Bewusst kein Stellenanzeigen-Look: gleichwertige Karten, kein Pensum, kein
   Bewerbungs-Button. Siehe ACADEMY-RICHTLINIE.md §7 und §10. */
body.academy-page .academy-roles {
  position: relative;
  overflow: hidden;
  background: #f4f7fa !important;
  color: #102033 !important;
  padding: clamp(84px, 8vw, 132px) 0;
}

body.academy-page .academy-roles h2 {
  color: #102033 !important;
}

body.academy-page .academy-roles p {
  color: #34465f !important;
}

body.academy-page .academy-roles-head {
  max-width: 860px;
  margin-bottom: clamp(48px, 6vw, 74px);
}

html body.academy-page main section.academy-roles .academy-roles-head .academy-roles-eyebrow {
  color: #d91e18 !important;
  -webkit-text-fill-color: #d91e18 !important;
  display: block;
  font: 600 14px/1.2 Inter, sans-serif;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 20px;
}

body.academy-page .academy-roles-head p {
  margin-top: 24px;
  max-width: 720px;
}

body.academy-page .academy-roles-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 34px);
  align-items: stretch;
}

/* 13.09.: Radius ergänzt -- stand bei 0, während vergleichbare Karten auf
   den Partner-Sub-Pages (z. B. .partner-triad article) 14px tragen
   (Rückmeldung Joshua zur Konsistenz). */
body.academy-page .academy-role-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.6vw, 34px);
  background: #ffffff;
  border: 1px solid #c6d0dc;
  border-top: 3px solid #102033;
  border-radius: 16px;
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

body.academy-page .academy-role-card:hover {
  border-color: rgba(255,45,40,.55);
  box-shadow: 0 18px 46px rgba(16,32,51,.08);
  transform: translateY(-3px);
}

html body.academy-page main section.academy-roles .academy-role-card .academy-role-icon {
  color: #d91e18 !important;
  -webkit-text-fill-color: #d91e18 !important;
  font-size: 40px;
  line-height: 1;
  margin-bottom: 22px;
}

/* Kein font-weight: die Ueberschriften-Normalisierung (s.u., "now-500 headings")
   gewinnt hier bewusst per ID-Eskalation. */
body.academy-page .academy-role-card h3 {
  color: #102033 !important;
  font-family: Inter, sans-serif !important;
  font-size: clamp(24px, 2.2vw, 30px) !important;
  line-height: 1.1 !important;
  margin: 0 0 16px;
}

body.academy-page .academy-role-card .academy-role-lead {
  font-size: 17px !important;
  line-height: 1.6 !important;
  margin: 0;
}

body.academy-page .academy-role-card .academy-role-tasks {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

body.academy-page .academy-role-card .academy-role-tasks li {
  position: relative;
  padding-left: 24px;
  color: #34465f !important;
  font-size: 16px !important;
  line-height: 1.58 !important;
}

body.academy-page .academy-role-card .academy-role-tasks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 12px;
  height: 2px;
  background: #ff2d28;
}

body.academy-page .academy-role-card .academy-role-fit {
  margin: 28px 0 0;
  padding-top: 22px;
  border-top: 1px solid #c6d0dc;
  font-size: 16px !important;
  line-height: 1.58 !important;
}

body.academy-page .academy-role-card .academy-role-fit b {
  color: #102033 !important;
  font-weight: 500;
}

body.academy-page .academy-role-card .academy-role-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 28px;
  color: #d91e18 !important;
  -webkit-text-fill-color: #d91e18 !important;
  font: 700 16px/1 Inter, sans-serif;
  text-decoration: none;
  align-self: start;
}

body.academy-page .academy-role-card .academy-role-link:hover {
  text-decoration: underline;
}

body.academy-page .academy-role-card .academy-role-link .material-symbols-outlined {
  font-size: 20px;
  transition: transform .22s ease;
}

body.academy-page .academy-role-card:hover .academy-role-link .material-symbols-outlined {
  transform: translateX(4px);
}

/* p-Selektor, damit die Regel die allgemeine .academy-roles p schlaegt. */
body.academy-page .academy-roles p.academy-roles-bridge {
  margin-top: clamp(34px, 4vw, 48px);
  border-left: 5px solid #ff2d28;
  padding-left: clamp(20px, 3vw, 28px);
  max-width: 860px;
  /* Traegt die Abhebung ueber den roten Balken. font-weight und color greifen
     nicht: p wird auf 400 normalisiert und der Kontrast-Painter (main.js) setzt
     Body-Copy per Inline-!important auf muted. Deklaration bleibt fuer den
     painterlosen Fall und spiegelt .academy-impact-note. */
  color: #102033 !important;
}

@media (max-width: 1024px) {
  body.academy-page .academy-roles-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  body.academy-page .academy-roles {
    padding: 72px 0;
  }

  body.academy-page .academy-role-card {
    padding: 24px;
  }
}

/* Ueber uns rebuild - positioning and trust page */
body.ueber-page .ueber-main {
  background: #f4f7fa;
  color: #102033;
}

body.ueber-page .ueber-main :where(h1,h2,h3,p,a,span,strong,small,dt,dd,li) {
  box-sizing: border-box;
  letter-spacing: 0 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

body.ueber-page .ueber-shell {
  width: min(100% - 96px, 1240px);
  margin: 0 auto;
}

body.ueber-page :where(.ueber-position,.ueber-operating,.ueber-work,.ueber-method,.ueber-values,.ueber-cta) {
  padding: clamp(84px, 8vw, 128px) 0;
}

body.ueber-page .ueber-proof {
  background: #eef2f7;
  border-top: 1px solid #dbe3ec;
  border-bottom: 1px solid #dbe3ec;
}

body.ueber-page .ueber-proof .ueber-shell {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.ueber-page .ueber-proof span {
  color: #26384c !important;
  font: 600 13px/1.25 Inter, sans-serif;
  padding: 20px 18px;
  border-left: 1px solid #dbe3ec;
  text-transform: uppercase;
}

body.ueber-page .ueber-proof span:last-child {
  border-right: 1px solid #dbe3ec;
}

body.ueber-page .ueber-proof span::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 12px;
  background: #ff2d28;
  box-shadow: 0 0 12px rgba(255,45,40,.34);
}

/* --- Section rhythm (R3): Team als dunkle Signature-Sektion.
   Helle Karten bleiben unveraendert und heben sich auf Dunkel ab;
   nur Sektions-Ueberschrift + Intro werden aufgehellt. --- */
body.ueber-page .ueber-team {
  background-color: #071d2a;
  background-image: linear-gradient(112deg, #071d2a 0%, #071d2a 56%, #211423 100%);
}

body.ueber-page .ueber-team > .ueber-shell > h2 {
  color: #ffffff !important;
}

body.ueber-page .ueber-team > .ueber-shell > p {
  color: rgba(239,241,243,.86) !important;
  max-width: 860px;
}

body.ueber-page .ueber-team .ueber-team-card {
  box-shadow: 0 22px 48px -28px rgba(0,0,0,.72);
}

/* --- Section rhythm (R3): Haltung dezent getoent + rote Statement-Kante --- */
body.ueber-page .ueber-position {
  background: #eef2f7;
}

body.ueber-page .ueber-position-grid > div:first-child {
  border-left: 5px solid #ff2d28;
  padding-left: clamp(26px, 4vw, 48px);
}

body.ueber-page .ueber-main h2 {
  color: #102033;
  /* 04.09.: Gewicht 900 -> 500, siehe .ueber-values-list strong oben --
     betrifft jede Sektionsueberschrift der Seite. */
  font: 500 clamp(34px, 4.3vw, 64px)/1.04 Inter, sans-serif;
  margin: 0;
  max-width: 760px;
}

body.ueber-page .ueber-main p,
body.ueber-page .ueber-main dd {
  color: #34465f;
  font: 600 18px/1.68 Inter, sans-serif;
  margin: 0;
}

body.ueber-page .text-swiss-red {
  color: #ff2d28 !important;
}

/* umlaut-gate:off -- bestehende Klassennamen aus dem Projekt, keine neue Schreibweise */
/* 10.09.: .ueber-work-grid/.ueber-cta-grid entfernt -- beide Sektionen
   nutzen jetzt .saa-split wie der Rest der Seiten (EDITORIAL-LAYOUT-SPEC.md,
   alternierend rechts/links). .ueber-position-grid/.ueber-values-grid
   bleiben unverändert, sie zeigen kein Bild. */
body.ueber-page .ueber-position-grid,
body.ueber-page .ueber-values-grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(44px, 6vw, 84px);
  align-items: start;
}

body.ueber-page .ueber-position p {
  max-width: 720px;
}

body.ueber-page .ueber-position-meta {
  display: grid;
  gap: 0;
  margin-top: 42px;
  border-top: 1px solid #c6d0dc;
}

body.ueber-page .ueber-position-meta div {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 28px;
  padding: 20px 0;
  border-bottom: 1px solid #c6d0dc;
}

body.ueber-page .ueber-position-meta small,
body.ueber-page .ueber-operating-steps span,
body.ueber-page .ueber-method-board span {
  color: #ff2d28 !important;
  font: 600 13px/1 Inter, sans-serif;
  text-transform: uppercase;
}

body.ueber-page .ueber-position-meta strong {
  color: #102033 !important;
  font: 900 21px/1.2 Inter, sans-serif;
}

body.ueber-page .ueber-operating,
body.ueber-page .ueber-method {
  background: linear-gradient(112deg, #071d2a 0%, #071d2a 56%, #211423 100%);
  color: #eff1f3;
}

body.ueber-page .ueber-operating h2,
body.ueber-page .ueber-operating p,
body.ueber-page .ueber-method h2,
body.ueber-page .ueber-method p,
body.ueber-page .ueber-method strong {
  color: #ffffff !important;
}

body.ueber-page .ueber-operating-line {
  border-left: 5px solid #ff2d28;
  padding-left: clamp(26px, 4vw, 48px);
  max-width: 920px;
}

body.ueber-page .ueber-operating-line p {
  color: rgba(239,241,243,.86) !important;
  max-width: 760px;
  margin-top: 24px;
}

body.ueber-page .ueber-operating-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(48px, 6vw, 78px);
  border-top: 1px solid rgba(255,255,255,.2);
  border-left: 1px solid rgba(255,255,255,.16);
}

body.ueber-page .ueber-operating-steps article {
  min-height: 280px;
  padding: 32px;
  border-right: 1px solid rgba(255,255,255,.16);
  border-bottom: 1px solid rgba(255,255,255,.16);
}

body.ueber-page .ueber-operating-steps strong {
  color: #ffffff !important;
  display: block;
  /* 04.09.: Gewicht 900 -> 500, siehe .ueber-values-list strong oben. */
  font: 500 28px/1.08 Inter, sans-serif;
  margin: 34px 0 16px;
}

body.ueber-page .ueber-operating-steps p {
  color: rgba(239,241,243,.82) !important;
  font-size: 16px;
  line-height: 1.58;
}

body.ueber-page .ueber-work {
  background: #ffffff;
}

/* umlaut-gate:off -- bestehende Selektoren ueber-work/ueber-cta, keine neue ASCII-Schreibweise */
/* 13.09.: den zwei Figures fehlte die Klasse .saa-figure komplett -- dadurch
   kein Radius, nur die eigene Randlinie hier (Rückmeldung Joshua: "Über uns
   sind die Bilder voll eckig"). .saa-figure jetzt im Markup ergänzt, Border
   hier entfernt (Konsistenz mit der sitéweiten Border-Entfernung vom
   12.09.); margin/overflow bleiben als Fallback stehen, falls die Klasse
   fehlt. */
body.ueber-page .ueber-work figure,
body.ueber-page .ueber-cta figure {
  margin: 0;
  overflow: hidden;
}

/* umlaut-gate:off -- bestehende Selektoren aus dem Projekt, keine neue ASCII-Schreibweise */
/* 10.09.: frühere 62%-Deckelregel entfernt -- .saa-split__media regelt
   Breite (520/460/400/340px je Breakpoint) jetzt einheitlich über die
   Klasse auf der Figure (siehe EDITORIAL-LAYOUT-SPEC.md). */

body.ueber-page .ueber-work img,
body.ueber-page .ueber-cta img {
  display: block;
  width: 100%;
  min-height: 460px;
  height: 100%;
  object-fit: cover;
}

body.ueber-page .ueber-work dl {
  display: grid;
  gap: 0;
  margin-top: 38px;
  border-top: 1px solid #c6d0dc;
}

body.ueber-page .ueber-work dl div {
  display: grid;
  grid-template-columns: minmax(170px, .5fr) minmax(0, 1fr);
  gap: 28px;
  padding: 24px 0;
  border-bottom: 1px solid #c6d0dc;
}

body.ueber-page .ueber-work dt {
  color: #102033;
  font: 900 21px/1.18 Inter, sans-serif;
}

body.ueber-page .ueber-work dd {
  font-size: 16px !important;
  line-height: 1.6 !important;
}

body.ueber-page .ueber-method-head {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 58px;
  align-items: end;
  margin-bottom: 58px;
}

body.ueber-page .ueber-method-head p {
  color: rgba(239,241,243,.84) !important;
  max-width: 620px;
}

body.ueber-page .ueber-method-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid rgba(255,255,255,.2);
  border-left: 1px solid rgba(255,255,255,.16);
}

body.ueber-page .ueber-method-board div {
  min-height: 250px;
  padding: 28px;
  border-right: 1px solid rgba(255,255,255,.16);
  border-bottom: 1px solid rgba(255,255,255,.16);
}

body.ueber-page .ueber-method-board strong {
  display: block;
  /* 04.09.: Gewicht 900 -> 500, siehe .ueber-values-list strong oben. */
  font: 500 25px/1.1 Inter, sans-serif;
  margin: 32px 0 14px;
}

body.ueber-page .ueber-method-board p {
  color: rgba(239,241,243,.82) !important;
  font-size: 16px;
  line-height: 1.58;
}

/* --- Section rhythm (R3): Werte als dunkle Prinzipien-Sektion.
   Flacher Deep-Navy (statt CTA-Gradient), damit Werte und CTA trotz
   Nachbarschaft als zwei eigene Flaechen lesbar bleiben. --- */
body.ueber-page .ueber-values {
  background: #071d2a;
}

body.ueber-page .ueber-values h2 {
  color: #ffffff !important;
}

body.ueber-page .ueber-values-grid > div:first-child p {
  color: rgba(239,241,243,.84) !important;
}

body.ueber-page .ueber-values-list {
  display: grid;
  gap: 0;
  border-top: 2px solid rgba(255,255,255,.32);
}

body.ueber-page .ueber-values-list article {
  display: grid;
  grid-template-columns: minmax(180px, .46fr) minmax(0, 1fr);
  gap: 30px;
  padding: 26px 0;
  border-bottom: 1px solid rgba(255,255,255,.16);
}

body.ueber-page .ueber-values-list strong {
  color: #ffffff !important;
  /* 04.09.: Gewicht 900 -> 500. Verstiess gegen die site-weite Regel
     "keine Ueberschrift traegt ein Gewicht ueber 500" (siehe Academy-
     Typografie-Korrektur vom 29.08.); Kartentitel/Werte-Ueberschriften
     zaehlen als Ueberschrift, nicht als Fliesstext-Betonung. */
  font: 500 25px/1.12 Inter, sans-serif;
}

body.ueber-page .ueber-values-list p {
  color: rgba(239,241,243,.82) !important;
}

body.ueber-page .ueber-cta {
  background: linear-gradient(112deg, #071d2a 0%, #071d2a 56%, #211423 100%);
}

body.ueber-page .ueber-cta h2,
body.ueber-page .ueber-cta p {
  color: #ffffff !important;
}

/* umlaut-gate:off -- bestehende Klassennamen aus dem Projekt, keine neue Schreibweise */
body.ueber-page .ueber-cta .saa-split > div:first-child {
  border-left: 5px solid #ff2d28;
  padding-left: clamp(26px, 4vw, 48px);
}

body.ueber-page .ueber-cta p {
  color: rgba(239,241,243,.84) !important;
  max-width: 720px;
  margin-top: 24px;
}

body.ueber-page .ueber-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 34px;
}

@media (max-width: 1100px) {
  body.ueber-page .ueber-proof .ueber-shell,
  body.ueber-page .ueber-method-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.ueber-page .ueber-operating-steps {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1024px) {
  body.ueber-page .ueber-shell {
    width: min(100% - 48px, 1240px);
  }

  body.ueber-page .ueber-position-grid,
  body.ueber-page .ueber-work-grid,
  body.ueber-page .ueber-values-grid,
  body.ueber-page .ueber-cta-grid,
  body.ueber-page .ueber-method-head,
  body.ueber-page .ueber-position-meta div,
  body.ueber-page .ueber-work dl div,
  body.ueber-page .ueber-values-list article {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 640px) {
  body.ueber-page .ueber-shell {
    width: min(100% - 32px, 1240px);
  }

  body.ueber-page :where(.ueber-position,.ueber-operating,.ueber-work,.ueber-method,.ueber-values,.ueber-cta) {
    padding: 72px 0;
  }

  body.ueber-page .ueber-main h2 {
    font-size: 32px;
    line-height: 1.12;
  }

  body.ueber-page .ueber-proof .ueber-shell,
  body.ueber-page .ueber-method-board {
    grid-template-columns: 1fr;
  }

  body.ueber-page .ueber-operating-steps article,
  body.ueber-page .ueber-method-board div {
    min-height: auto;
    padding: 24px;
  }

  body.ueber-page .ueber-actions {
    display: grid;
  }

  body.ueber-page .ueber-actions a {
    justify-content: center;
    width: 100%;
  }
}

/* ==========================================================================
   Typography + Spacing System Stabilization
   Global safety layer for Swiss AI Agency pages. This keeps the current page
   direction, but normalizes type, rhythm and text overflow across breakpoints.
   ========================================================================== */

:root {
  --saa-font-main: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --saa-container-max: 1280px;
  --saa-container-pad-desktop: 80px;
  --saa-container-pad-tablet: 40px;
  --saa-container-pad-mobile: 20px;
  --saa-section-y: 96px;
  --saa-section-y-compact: 72px;
  --saa-section-y-mobile: 56px;
  --saa-gap-grid: 24px;
  --saa-gap-grid-lg: 32px;
  --saa-h1-hero: clamp(3.25rem, 5.1vw, 5.25rem);
  /* 2026-08-04 (Block 5b, Befund H): ein clamp() ueber den ganzen
     Breitenbereich. Untergrenze und Obergrenze sind die des frueheren
     Mobil- bzw. Desktop-clamp(); dazwischen linear. Das zweite clamp()
     im Media-Query darunter ist entfallen. */
  --saa-h1-subpage: clamp(2.25rem, 1.54rem + 2.84vw, 4.75rem);
  --saa-h2: clamp(1.75rem, 1.33rem + 1.67vw, 3rem);
  --saa-h3: clamp(1.2rem, 1.09rem + 0.43vw, 1.55rem);
  --saa-lead: 1.125rem;
  --saa-lead-line: 1.58;
  --saa-body: 1rem;
  --saa-body-line: 1.6;
}

html,
body,
button,
input,
textarea,
select {
  font-family: var(--saa-font-main) !important;
}

body :not(.material-symbols-outlined) {
  font-family: var(--saa-font-main) !important;
}

body {
  margin: 0;
  font-size: var(--saa-body);
  line-height: var(--saa-body-line);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  /* overflow-x: hidden entfernt 2026-08-04 (Block 3). Die Ursache des
     Ueberlaufs war 100vw in den Hero-Szenen, nicht ein zu breiter Inhalt. */
}

body *,
body *::before,
body *::after {
  box-sizing: border-box;
}

main,
section,
article,
aside,
div,
header,
footer,
nav,
figure,
figcaption,
p,
h1,
h2,
h3,
h4,
h5,
h6,
a,
button,
input,
textarea,
select,
label,
summary,
li,
dt,
dd {
  min-width: 0;
}

p,
li,
dt,
dd,
summary,
label,
input,
textarea,
select,
button,
a,
h1,
h2,
h3,
h4,
h5,
h6,
strong,
span {
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  letter-spacing: 0 !important;
  text-wrap: balance;
}

p,
li,
dd {
  text-wrap: pretty;
}

.material-symbols-outlined {
  font-family: "Material Symbols Outlined" !important;
}

.saa-cookie-banner {
  max-width: calc(var(--saig-vw) - 48px) !important;
}

:where(.container, .saa-container, .pa-container, .term-container, .hero-scene, .dienste-shell, .wissen-editorial-shell, .academy-program-shell, .ueber-shell, .loesungen-shell, .contact-container, .saa-contact-shell) {
  max-width: var(--saa-container-max);
}

:where(.site-main, .subpage-main) > section:not(.hero-scene):not(.hero-scene--subpage),
:where(.pa-section, .term-section, .term-dark, .dienste-problem-section, .dienste-lanes-section, .dienste-practice-section, .dienste-transition-section, .dienste-workflow-section, .dienste-industries-section, .dienste-faq-section, .dienste-final-section, .wissen-editorial-intro, .wissen-feature, .wissen-decision, .wissen-glossar, .wissen-regulation, .wissen-questions, .wissen-cta, .academy-program-intro, .academy-pathway, .academy-lab, .academy-fit, .academy-apply, .ueber-position, .ueber-operating, .ueber-work, .ueber-method, .ueber-values, .ueber-cta) {
  padding-top: var(--saa-section-y);
  padding-bottom: var(--saa-section-y);
}

:where(.site-main, .subpage-main) > section.compact-section,
:where(.dienste-strip, .wissen-index) {
  padding-top: var(--saa-section-y-compact);
  padding-bottom: var(--saa-section-y-compact);
}

:where(.hero-scene__title) {
  font-family: var(--saa-font-main) !important;
  font-size: var(--saa-h1-subpage) !important;
  line-height: .98 !important;
  font-weight: 500 !important;
  max-width: 12ch;
}

body.home-page :where(.hero-scene__title, .hero-title, h1.hero-title),
body:not(.ki-dienste-page):not(.wissen-page):not(.academy-page):not(.ueber-page) .homepage-hero :where(h1, .hero-title) {
  font-size: var(--saa-h1-hero) !important;
}

:where(.site-main, .subpage-main) h2,
:where(.pa-heading.h2, .term-section-head h2, .dienste-section-head h2, .dienste-lanes-copy h2, .wissen-editorial h2, .academy-main h2, .ueber-main h2, .loesungen-main h2, .saa-contact-page h2) {
  font-family: var(--saa-font-main) !important;
  font-size: var(--saa-h2) !important;
  line-height: 1.08 !important;
  font-weight: 500 !important;
}

:where(.site-main, .subpage-main) h3,
:where(.process-card h3, .term-feature h3, .dienste-main h3, .wissen-editorial h3, .academy-main h3, .ueber-main h3, .loesungen-main h3, .saa-contact-page h3) {
  font-family: var(--saa-font-main) !important;
  font-size: var(--saa-h3) !important;
  line-height: 1.18 !important;
  font-weight: 500 !important;
}

:where(.hero-scene__copy, .pa-copy, .term-section-head p, .dienste-section-head p, .wissen-section-heading p, .academy-pathway-head p, .ueber-method-head p, .saa-contact-page .lead, .saa-contact-page .contact-hero__lead) {
  font-size: var(--saa-lead) !important;
  line-height: var(--saa-lead-line) !important;
}

:where(.site-main, .subpage-main) p,
:where(.site-main, .subpage-main) li,
:where(.site-main, .subpage-main) dd,
:where(.site-main, .subpage-main) summary {
  line-height: var(--saa-body-line);
}

:where(.hero-scene__copy, .hero-scene__actions),
:where(.dienste-section-head p, .wissen-section-heading p, .academy-pathway-head p, .ueber-method-head p) {
  margin-top: 24px;
}

:where(.hero-scene__actions, .dienste-final-actions, .wissen-final-actions, .academy-actions, .ueber-actions) {
  gap: 16px;
  margin-top: 34px;
}

:where(.grid, .dienste-problem-grid, .dienste-practice-grid, .dienste-flow-grid, .dienste-industry-grid, .wissen-editorial-two, .academy-fit-signals, .ueber-position-grid, .ueber-work-grid, .ueber-values-grid, .ueber-cta-grid) {
  gap: var(--saa-gap-grid-lg);
}

:where(article, .process-card, .term-feature, .dienste-practice-card, .academy-pathway-node, .ueber-method-board div, .ueber-operating-steps article, .wissen-qa details, .wissen-register div) {
  min-width: 0;
}

@media (max-width: 1024px) {
  :root {
    --saa-container-pad-desktop: var(--saa-container-pad-tablet);
    --saa-section-y: 80px;
    --saa-section-y-compact: 64px;
    --saa-h1-hero: clamp(2.85rem, 7vw, 4.25rem);
    /* 2026-08-04 (Block 5b): zweites clamp() entfallen, siehe Basiskurve. */
  }
}

@media (max-width: 768px) {
  :root {
    --saa-container-pad-desktop: var(--saa-container-pad-mobile);
    --saa-section-y: var(--saa-section-y-mobile);
    --saa-section-y-compact: 48px;
    --saa-gap-grid: 18px;
    --saa-gap-grid-lg: 22px;
    --saa-h1-hero: clamp(2.45rem, 11vw, 3.55rem);
    /* 2026-08-04 (Block 5b): drittes clamp() entfallen, siehe Basiskurve. */
    --saa-lead: 1.05rem;
  }

  :where(.container, .saa-container, .pa-container, .term-container, .dienste-shell, .wissen-editorial-shell, .academy-program-shell, .ueber-shell, .loesungen-shell, .contact-container, .saa-contact-shell) {
    width: min(100% - 40px, var(--saa-container-max)) !important;
  }

  :where(.hero-scene__title) {
    max-width: min(11.5ch, calc(var(--saig-vw) - 48px), 100%) !important;
    line-height: 1.02 !important;
  }

  :where(.hero-title-line) {
    display: block;
    max-width: 100%;
    white-space: normal !important;
    hyphens: auto;
    overflow-wrap: break-word;
  }

  :where(.hero-scene__copy, .pa-copy, .term-section-head p, .dienste-section-head p, .wissen-section-heading p, .academy-pathway-head p, .ueber-method-head p) {
    max-width: 100% !important;
  }

  :where(.hero-scene__actions, .dienste-final-actions, .wissen-final-actions, .academy-actions, .ueber-actions) {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  :where(.hero-scene__actions a, .dienste-final-actions a, .wissen-final-actions a, .academy-actions a, .ueber-actions a) {
    justify-content: center;
    width: 100%;
  }
}

@media (max-width: 430px) {
  :where(.container, .saa-container, .pa-container, .term-container, .dienste-shell, .wissen-editorial-shell, .academy-program-shell, .ueber-shell, .loesungen-shell, .contact-container, .saa-contact-shell) {
    width: min(100% - 32px, var(--saa-container-max)) !important;
  }

  :where(.hero-scene__title) {
    max-width: 100%;
  }

  :where(.site-main, .subpage-main) h2 {
    max-width: 100%;
  }
}

/* ==========================================================================
   Light + Dark Theme Contract
   Final contrast safety layer for shared components. This keeps page layouts
   intact while making the theme contract explicit across legacy page variants.
   ========================================================================== */

:root body {
  background: var(--saa-bg) !important;
  color: var(--saa-text) !important;
}

:root main :where(
  section:not(.hero-scene):not(.hero-scene--subpage):not(.page-section--dark):not(.term-dark):not(.wissen-cta):not(.academy-cta):not(.ueber-cta) h1,
  section:not(.hero-scene):not(.hero-scene--subpage):not(.page-section--dark):not(.term-dark):not(.wissen-cta):not(.academy-cta):not(.ueber-cta) h2,
  section:not(.hero-scene):not(.hero-scene--subpage):not(.page-section--dark):not(.term-dark):not(.wissen-cta):not(.academy-cta):not(.ueber-cta) h3,
  section:not(.hero-scene):not(.hero-scene--subpage):not(.page-section--dark):not(.term-dark):not(.wissen-cta):not(.academy-cta):not(.ueber-cta) h4,
  section:not(.hero-scene):not(.hero-scene--subpage):not(.page-section--dark):not(.term-dark):not(.wissen-cta):not(.academy-cta):not(.ueber-cta) h5,
  section:not(.hero-scene):not(.hero-scene--subpage):not(.page-section--dark):not(.term-dark):not(.wissen-cta):not(.academy-cta):not(.ueber-cta) h6,
  section:not(.hero-scene):not(.hero-scene--subpage):not(.page-section--dark):not(.term-dark):not(.wissen-cta):not(.academy-cta):not(.ueber-cta) strong,
  section:not(.hero-scene):not(.hero-scene--subpage):not(.page-section--dark):not(.term-dark):not(.wissen-cta):not(.academy-cta):not(.ueber-cta) summary,
  section:not(.hero-scene):not(.hero-scene--subpage):not(.page-section--dark):not(.term-dark):not(.wissen-cta):not(.academy-cta):not(.ueber-cta) label
) {
  color: var(--saa-text) !important;
}

:root main :where(
  section:not(.hero-scene):not(.hero-scene--subpage):not(.page-section--dark):not(.term-dark):not(.wissen-cta):not(.academy-cta):not(.ueber-cta) p,
  section:not(.hero-scene):not(.hero-scene--subpage):not(.page-section--dark):not(.term-dark):not(.wissen-cta):not(.academy-cta):not(.ueber-cta) li,
  section:not(.hero-scene):not(.hero-scene--subpage):not(.page-section--dark):not(.term-dark):not(.wissen-cta):not(.academy-cta):not(.ueber-cta) dd,
  section:not(.hero-scene):not(.hero-scene--subpage):not(.page-section--dark):not(.term-dark):not(.wissen-cta):not(.academy-cta):not(.ueber-cta) small
) {
  color: var(--saa-text-muted) !important;
}

main :where(input, textarea, select) {
  caret-color: var(--saa-red) !important;
  color: var(--saa-text) !important;
}

:root main :where(input, textarea, select) {
  background-color: color-mix(in srgb, var(--saa-surface) 92%, transparent) !important;
  border-color: rgba(7, 17, 28, .22) !important;
}

main :where(input::placeholder, textarea::placeholder) {
  color: color-mix(in srgb, var(--saa-text-muted) 78%, transparent) !important;
}

main :where(input:focus, textarea:focus, select:focus) {
  border-color: var(--saa-red) !important;
  outline-color: color-mix(in srgb, var(--saa-red) 46%, transparent) !important;
}

:where(.site-header__cta, .hero-scene__primary, .btn-primary, .term-btn--primary, .usecase-overview__primary, .usecase-overview__cta-link, .contact-submit, .saa-contact-page button[type="submit"], .saa-cookie-banner__primary) {
  background: var(--saa-red) !important;
  border-color: var(--saa-red) !important;
  color: #ffffff !important;
}

:where(.site-header__cta, .hero-scene__primary, .btn-primary, .term-btn--primary, .usecase-overview__primary, .usecase-overview__cta-link, .contact-submit, .saa-contact-page button[type="submit"], .saa-cookie-banner__primary) :where(span, strong) {
  color: #ffffff !important;
}

.saa-cookie-banner,
:root .saa-cookie-banner{
  background: #07111c !important;
  border-color: rgba(255, 255, 255, .18) !important;
  color: #ffffff !important;
}

.saa-cookie-banner :where(h2, strong, button, a) {
  color: #ffffff !important;
}

.saa-cookie-banner p {
  color: rgba(255, 255, 255, .78) !important;
}

.saa-cookie-banner__secondary {
  background: transparent !important;
  border-color: rgba(255, 255, 255, .32) !important;
  color: #ffffff !important;
}

.saa-footer,
:root .saa-footer{
  background: #07111c !important;
  color: #eff1f3 !important;
}

.saa-footer :where(h2, h6, strong) {
  color: #ffffff !important;
}

.saa-footer :where(p, span, a) {
  color: rgba(239, 241, 243, .76) !important;
}

.saa-footer a:hover {
  color: #ffffff !important;
}

/* Contact page redesign - Helvetia Precision form system. */
.contact-page-v2 {
  background: var(--saa-bg);
  color: var(--saa-text);
}

.contact-container {
  margin: 0 auto;
  max-width: 1280px;
  padding-left: clamp(20px, 5vw, 80px);
  padding-right: clamp(20px, 5vw, 80px);
  width: 100%;
}

.contact-page-v2 .contact-kicker {
  color: var(--saa-red);
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.2;
  margin-bottom: 16px;
  text-transform: uppercase;
}

.contact-hero-scene--entry {
  background:
    linear-gradient(135deg, rgba(7, 17, 28, 0.98), rgba(8, 24, 39, 0.96)),
    radial-gradient(circle at 82% 18%, rgba(217, 30, 24, 0.18), transparent 34%);
  border-left: 0;
  color: #fff;
  min-height: clamp(360px, 48vw, 560px);
  padding: clamp(72px, 9vw, 128px) 0 clamp(56px, 7vw, 92px);
}

.contact-hero-grid {
  align-items: end;
  display: grid;
  gap: clamp(32px, 6vw, 88px);
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
  position: relative;
  z-index: 1;
}

.contact-hero-copy h1 {
  color: #fff;
  font-size: clamp(48px, 7vw, 88px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
  max-width: 860px;
}

.contact-hero-copy p {
  color: rgba(239, 241, 243, 0.78);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.55;
  margin: 28px 0 0;
  max-width: 720px;
}

.contact-hero-note {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(239, 241, 243, 0.16);
  border-top: 2px solid var(--saa-red);
  padding: clamp(24px, 3vw, 34px);
}

.contact-hero-note span,
.contact-hero-note strong {
  display: block;
}

.contact-hero-note span {
  color: rgba(239, 241, 243, 0.58);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.contact-hero-note strong {
  color: #fff;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.05;
  margin-top: 14px;
}

.contact-hero-note p {
  color: rgba(239, 241, 243, 0.72);
  font-size: 15px;
  line-height: 1.65;
  margin: 18px 0 0;
}

.contact-section {
  padding: clamp(72px, 8vw, 112px) 0;
}

.contact-section--proof {
  background: var(--saa-surface);
  border-bottom: 1px solid var(--saa-border);
  padding: 0;
}

.contact-proof-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-bottom: 0;
  padding-top: 0;
}

.contact-direct-item {
  align-items: flex-start;
  border-left: 1px solid var(--saa-border);
  color: var(--saa-text);
  display: flex;
  gap: 14px;
  min-height: 128px;
  padding: 30px 24px;
  text-decoration: none;
}

.contact-direct-item:last-child {
  border-right: 1px solid var(--saa-border);
}

.contact-direct-item .material-symbols-outlined {
  color: var(--saa-red);
  font-size: 24px;
  margin-top: -2px;
}

.contact-direct-item strong,
.contact-direct-item small {
  display: block;
}

.contact-direct-item strong {
  color: var(--saa-text);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.contact-direct-item small {
  color: var(--saa-text-muted);
  font-size: 14px;
  line-height: 1.45;
  margin-top: 8px;
  overflow-wrap: anywhere;
}

.contact-direct-item:hover,
.contact-direct-item:focus-visible {
  background: color-mix(in srgb, var(--saa-red) 5%, var(--saa-surface));
}

.contact-form-shell {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--saa-border) 44%, transparent) 1px, transparent 1px) 0 0 / 96px 96px,
    var(--saa-bg);
}

.contact-workflow-grid {
  align-items: start;
  display: grid;
  gap: clamp(32px, 5vw, 72px);
  grid-template-columns: minmax(280px, 0.86fr) minmax(0, 1.14fr);
}

.contact-process-panel,
.contact-form-panel,
.contact-decision-item {
  background: var(--saa-surface);
  border: 1px solid var(--saa-border);
}

.contact-process-panel,
.contact-form-panel {
  padding: clamp(28px, 4vw, 48px);
}

.contact-process-panel {
  position: sticky;
  top: calc(var(--saa-header-h) + 32px);
}

.contact-process-panel h2,
.contact-form-head h2,
.contact-section-head h2 {
  color: var(--saa-text);
  font-size: clamp(32px, 4vw, 54px);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.06;
  margin: 0;
}

.contact-process-panel p,
.contact-form-head p,
.contact-section-head p {
  color: var(--saa-text-muted);
  font-size: 16px;
  line-height: 1.65;
  margin: 20px 0 0;
}

.contact-step-grid {
  display: grid;
  gap: 14px;
  margin-top: 34px;
}

.contact-step {
  border: 1px solid var(--saa-border);
  padding: 24px;
}

.contact-step > span,
.contact-decision-item > span {
  background: var(--saa-red);
  display: block;
  height: 6px;
  margin-bottom: 22px;
  width: 28px;
}

.contact-step > span {
  background: transparent;
  color: var(--saa-red);
  font-size: 12px;
  font-weight: 900;
  height: auto;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
  width: auto;
}

.contact-step h3,
.contact-decision-item h3 {
  color: var(--saa-text);
  font-size: 20px;
  line-height: 1.2;
  margin: 0;
}

.contact-step p,
.contact-decision-item p {
  color: var(--saa-text-muted);
  font-size: 15px;
  line-height: 1.62;
  margin: 12px 0 0;
}

.contact-form-head {
  border-bottom: 1px solid var(--saa-border);
  margin-bottom: 30px;
  padding-bottom: 26px;
}

.contact-status {
  align-items: flex-start;
  border: 1px solid var(--saa-border);
  display: flex;
  gap: 14px;
  margin-bottom: 24px;
  padding: 18px;
}

.contact-status[hidden] {
  display: none !important;
}

.contact-status .material-symbols-outlined {
  font-size: 24px;
}

.contact-status strong,
.contact-status p {
  display: block;
  margin: 0;
}

.contact-status strong {
  color: var(--saa-text);
  font-size: 15px;
}

.contact-status p {
  color: var(--saa-text-muted);
  font-size: 14px;
  line-height: 1.5;
  margin-top: 4px;
}

.contact-status--success {
  background: rgba(22, 163, 74, 0.08);
  border-color: rgba(22, 163, 74, 0.28);
}

.contact-status--success .material-symbols-outlined {
  color: #16a34a;
}

.contact-status--error {
  background: rgba(217, 30, 24, 0.08);
  border-color: rgba(217, 30, 24, 0.34);
}

.contact-status--error .material-symbols-outlined {
  color: var(--saa-red);
}

.contact-form,
.contact-field-grid {
  display: grid;
  gap: 18px;
}

.contact-field-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contact-field label {
  color: var(--saa-text);
  display: block;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
  /* Label buendig zum Platzhalter: Input-Texteinzug = 1px Border + 14px Padding. */
  padding-left: 15px;
  text-transform: uppercase;
}

.contact-field input,
.contact-field select,
.contact-field textarea {
  background: var(--saa-surface);
  border: 1px solid var(--saa-border);
  border-radius: 0;
  color: var(--saa-text);
  font: inherit;
  min-height: 52px;
  padding: 13px 14px;
  width: 100%;
}

.contact-field textarea {
  min-height: 148px;
  resize: vertical;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: color-mix(in srgb, var(--saa-text-muted) 72%, transparent);
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  border-color: var(--saa-red);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--saa-red) 16%, transparent);
}

/* v2 Phase 8: schlanker Nummern-Stepper statt „3 Boxen mit rotem Strich".
   Grosse leichte leichte Ziffer + Titel + eine Zeile, kein Boxen-in-Boxen,
   kein dekorativer roter Strich (roter Akzent nur noch funktional). */
.contact-stepper {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.contact-stepper__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: start;
}

.contact-stepper__item + .contact-stepper__item {
  border-top: 1px solid color-mix(in srgb, var(--saa-border) 70%, transparent);
  padding-top: 26px;
}

/* specificity + !important to beat the global contact-page span/color rules */
body.contact-page-body .contact-stepper__num {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 340;
  font-size: clamp(34px, 4vw, 46px);
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
  color: var(--saa-text) !important;
  -webkit-text-fill-color: var(--saa-text) !important;
  opacity: 0.34 !important;
}

.contact-stepper__body h3 {
  margin: 2px 0 6px;
  font-size: 17px;
  font-weight: 750;
  color: var(--saa-text);
}

.contact-stepper__body p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--saa-text-muted);
}

.contact-honeypot {
  height: 1px;
  left: -9999px;
  overflow: hidden;
  position: absolute;
  top: auto;
  width: 1px;
}

/* Cloudflare-Turnstile-Slot: dormant (leer) unsichtbar, mit Widget mit Abstand. */
.cf-turnstile-slot:not(:empty) {
  margin: 0.25rem 0 1.1rem;
}

.contact-consent {
  align-items: flex-start;
  color: var(--saa-text-muted);
  display: flex;
  font-size: 14px;
  gap: 12px;
  line-height: 1.55;
}

/* 24px statt 18px: Pflicht-Zustimmung ist ein Tippziel und muss WCAG 2.2
   SC 2.5.8 (24x24) erfuellen. margin-top faellt weg, sonst sitzt die groessere
   Box unter der ersten Textzeile. */
.contact-consent input[type="checkbox"] {
  accent-color: var(--saa-red);
  appearance: auto !important;
  border-radius: 0 !important;
  flex: 0 0 auto;
  height: 24px !important;
  margin-top: 0;
  min-height: 24px !important;
  padding: 0 !important;
  width: 24px !important;
}

.contact-consent a {
  color: var(--saa-text);
  font-weight: 750;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--saa-red) 42%, transparent);
  text-underline-offset: 3px;
}

.contact-form-note {
  color: var(--saa-text-muted);
  font-size: 13px;
  line-height: 1.45;
  margin: -4px 0 0;
  text-align: center;
}

.contact-routing {
  background: var(--saa-surface);
  border-top: 1px solid var(--saa-border);
}

.contact-section-head {
  margin-bottom: 34px;
  max-width: 760px;
}

/* 13.09.: Rückmeldung Joshua -- Karten hatten Border, aber keinen Radius
   (wirkte eckig). Von geteilten Rahmenlinien (gap:0, border-right:0 ausser
   beim letzten Kind) auf einzelne Karten mit Gap und je eigenem Radius
   umgestellt, analog .academy-role-card. */
.contact-decision-grid {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.contact-decision-item {
  min-height: 260px;
  padding: 30px;
  border-radius: 16px;
}

@media (max-width: 1100px) {
  .contact-hero-grid,
  .contact-workflow-grid,
  .contact-proof-strip,
  .contact-decision-grid {
    grid-template-columns: 1fr 1fr;
  }

  .contact-process-panel {
    position: static;
  }
}

@media (max-width: 768px) {
  .contact-hero-scene--entry {
    min-height: auto;
    padding-bottom: 56px;
    padding-top: 56px;
  }

  .contact-hero-grid,
  .contact-workflow-grid,
  .contact-proof-strip,
  .contact-decision-grid,
  .contact-field-grid--two {
    grid-template-columns: 1fr;
  }

  .contact-hero-copy h1 {
    font-size: clamp(40px, 12vw, 54px);
  }

  .contact-hero-copy p {
    font-size: 17px;
  }

  .contact-section {
    padding: 56px 0;
  }

  .contact-section--proof {
    padding: 0;
  }

  .contact-direct-item,
  .contact-direct-item:last-child {
    border-left: 1px solid var(--saa-border);
    border-right: 1px solid var(--saa-border);
    border-top: 1px solid var(--saa-border);
    min-height: auto;
    padding: 22px 20px;
  }

  .contact-direct-item:last-child {
    border-bottom: 1px solid var(--saa-border);
  }

  .contact-process-panel,
  .contact-form-panel {
    padding: 24px 20px;
  }

  .contact-step,
  .contact-decision-item {
    padding: 22px 20px;
  }

  .contact-decision-item,
  .contact-decision-item:last-child {
    border-right: 1px solid var(--saa-border);
    min-height: auto;
  }

  .contact-submit {
    white-space: normal !important;
  }
}

@media (max-width: 1100px) {
  /* 2026-08-04 (Block 4): Seitenpolster entfernt — der Rand kommt aus
     .saa-footer__inner und damit aus dem Layout-Vertrag. */

  .saa-footer__inner {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr) !important;
  }

  .saa-footer__contact {
    min-width: 0 !important;
  }
}

@media (max-width: 720px) {
  /* 2026-08-04 (Block 4): Seitenpolster entfernt, siehe oben. */

  .saa-footer__inner,
  .saa-footer__bottom {
    grid-template-columns: 1fr !important;
  }
}

/* Contact page final visual gate overrides. */
.contact-page-body .site-header__cta,
.contact-page-body .contact-submit,
.contact-page-body .saa-cookie-banner button,
.contact-page-body .theme-toggle,
.contact-page-body .saa-mobile-nav-toggle,
.contact-page-body > .saa-mobile-nav-toggle-body {
  border-radius: 999px !important;
}

@media (min-width: 1025px) {
  .contact-page-body > .saa-mobile-nav-toggle-body {
    display: none !important;
  }
}

@media (max-width: 1024px) {
  .contact-page-body > .saa-mobile-nav-toggle-body {
    background: #07111c !important;
    border-color: rgba(239, 241, 243, 0.28) !important;
    color: #eff1f3 !important;
  }
}

.contact-page-body .saa-cookie-banner {
  align-items: start !important;
  bottom: 18px !important;
  left: auto !important;
  max-width: min(520px, calc(var(--saig-vw) - 36px)) !important;
  padding: 18px !important;
  right: 18px !important;
  top: auto !important;
  transform: none !important;
  width: min(520px, calc(var(--saig-vw) - 36px)) !important;
}

.contact-page-body .saa-cookie-banner__content {
  min-width: 0 !important;
}

.contact-page-body .saa-cookie-banner h2 {
  font-size: 18px !important;
  line-height: 1.18 !important;
}

.contact-page-body .saa-cookie-banner p {
  font-size: 13px !important;
  line-height: 1.45 !important;
}

.contact-page-body .saa-cookie-banner__actions {
  display: grid !important;
  gap: 8px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: 100% !important;
}

.contact-page-body .saa-cookie-banner button {
  min-height: 40px !important;
  padding: 0 14px !important;
  width: 100% !important;
}

@media (max-width: 640px) {
  .contact-page-body .saa-cookie-banner {
    bottom: 10px !important;
    left: 10px !important;
    max-height: 34vh !important;
    max-width: calc(var(--saig-vw) - 20px) !important;
    overflow: auto !important;
    padding: 12px !important;
    right: 10px !important;
    top: auto !important;
    width: calc(var(--saig-vw) - 20px) !important;
  }

  .contact-page-body .saa-cookie-banner__kicker {
    font-size: 12px !important;
    margin-bottom: 4px !important;
  }

  .contact-page-body .saa-cookie-banner h2 {
    font-size: 15px !important;
    line-height: 1.15 !important;
    margin: 0 0 4px !important;
  }

  .contact-page-body .saa-cookie-banner p {
    display: -webkit-box !important;
    font-size: 12px !important;
    line-height: 1.32 !important;
    margin: 0 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
  }

  .contact-page-body .saa-cookie-banner button {
    font-size: 13px !important;
    min-height: 38px !important;
  }
}

/* Final light/dark QA lock. Keep this at the physical end of styles.css. */
:root {
  --saa-cta-red-accessible: #b5120f;
}

:where(.site-header__cta, .hero-scene__primary, .btn-primary, .term-btn--primary, .usecase-overview__primary, .usecase-overview__cta-link, .contact-submit, .saa-contact-page button[type="submit"], .saa-cookie-banner__primary, .saa-footer__cta) {
  background: var(--saa-cta-red-accessible) !important;
  border-color: var(--saa-cta-red-accessible) !important;
  color: #ffffff !important;
}

:where(.site-header__cta, .hero-scene__primary, .btn-primary, .term-btn--primary, .usecase-overview__primary, .usecase-overview__cta-link, .contact-submit, .saa-contact-page button[type="submit"], .saa-cookie-banner__primary, .saa-footer__cta) :where(span, strong) {
  color: #ffffff !important;
}

.saa-mobile-nav-toggle,
.site-header .saa-mobile-nav-toggle,
button.saa-mobile-nav-toggle,
button[aria-label*="Navigation"] {
  background: var(--saa-cta-red-accessible) !important;
  border-color: var(--saa-cta-red-accessible) !important;
  color: #ffffff !important;
}

.saa-mobile-nav-toggle *,
.saa-mobile-nav-toggle .material-symbols-outlined,
button[aria-label*="Navigation"] *,
button[aria-label*="Navigation"] .material-symbols-outlined {
  color: #ffffff !important;
}

body.home-page .home-offer-card:not(.bg-graphite) {
  background-color: #ffffff !important;
}

body.home-page .home-offer-card:not(.bg-graphite) h3 {
  color: #07111c !important;
}

/* Contact page validation pass: form-first Helvetia Precision layout. */
/* overflow-x: hidden hier entfernt 2026-08-04 (Block 3). Die Kontaktseite
   war im Messlauf bereits ohne Ueberlauf; die Notloesung verdeckte nichts. */

body.contact-page-body .contact-form-shell {
  padding-top: calc(var(--saa-header-h) + clamp(22px, 4vw, 42px)) !important;
}

body.contact-page-body .contact-workflow-grid {
  align-items: stretch !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.contact-page-body .contact-form-panel,
body.contact-page-body .contact-process-panel {
  min-width: 0 !important;
  width: 100% !important;
}

body.contact-page-body .contact-process-panel {
  height: 100% !important;
  position: static !important;
}

body.contact-page-body .contact-form-head h2,
body.contact-page-body .contact-process-panel h2 {
  max-width: 12ch;
}

body.contact-page-body .contact-form-head p,
body.contact-page-body .contact-process-panel > p {
  max-width: 56ch;
}

body.contact-page-body .contact-field input,
body.contact-page-body .contact-field select,
body.contact-page-body .contact-field textarea {
  min-width: 0 !important;
}

body.contact-page-body .contact-consent {
  min-width: 0 !important;
}

body.contact-page-body .contact-consent span {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

body.contact-page-body .contact-submit {
  justify-content: center !important;
  min-height: 54px !important;
  overflow-wrap: anywhere !important;
  text-align: center !important;
  width: 100% !important;
}

@media (max-width: 920px) {
  body.contact-page-body .contact-workflow-grid {
    grid-template-columns: 1fr !important;
  }

  body.contact-page-body .contact-form-shell {
    padding-top: calc(var(--saa-header-h) + 18px) !important;
  }
}

@media (max-width: 640px) {
  body.contact-page-body .contact-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body.contact-page-body .contact-form-panel,
  body.contact-page-body .contact-process-panel {
    padding: 22px 16px !important;
  }

  body.contact-page-body .contact-field-grid--two {
    grid-template-columns: 1fr !important;
  }

  body.contact-page-body .contact-field input,
  body.contact-page-body .contact-field select,
  body.contact-page-body .contact-field textarea,
  body.contact-page-body .contact-submit,
  body.contact-page-body .contact-consent input[type="checkbox"] {
    touch-action: manipulation;
  }

  body.contact-page-body .contact-submit {
    font-size: 13px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }
}

.site-header__cta,
.hero-scene__primary,
.btn-primary,
.term-btn--primary,
.usecase-overview__primary,
.usecase-overview__cta-link,
.contact-submit,
.saa-contact-page button[type="submit"],
.saa-cookie-banner__primary,
.saa-footer__cta {
  background: var(--saa-cta-red-accessible) !important;
  border-color: var(--saa-cta-red-accessible) !important;
  color: #ffffff !important;
}

.site-header__cta span,
.hero-scene__primary span,
.btn-primary span,
.term-btn--primary span,
.usecase-overview__primary span,
.usecase-overview__cta-link span,
.contact-submit span,
.saa-contact-page button[type="submit"] span,
.saa-cookie-banner__primary span,
.saa-footer__cta span {
  color: #ffffff !important;
}

html .site-header .saa-mobile-nav-toggle,
html .site-header button.saa-mobile-nav-toggle{
  color: #ffffff !important;
}

html .site-header .saa-mobile-nav-toggle *,
html .site-header button.saa-mobile-nav-toggle *{
  color: #ffffff !important;
}

.hero-scene .hero-scene__secondary {
  background: rgba(7, 17, 28, .72) !important;
  border-color: rgba(255, 255, 255, .42) !important;
  color: #ffffff !important;
}

.hero-scene .hero-scene__secondary span {
  color: #ffffff !important;
}

body.home-page .home-offer-card.bg-graphite h3 {
  color: #ffffff !important;
}

body .hero-scene a.hero-scene__secondary,
body.ki-beratung-page .hero-scene a.hero-scene__secondary,
html body.ki-beratung-page .hero-scene a.hero-scene__secondary{
  background: rgba(7, 17, 28, .72) !important;
  border-color: rgba(255, 255, 255, .42) !important;
  color: #ffffff !important;
}

body .hero-scene a.hero-scene__secondary span,
body.ki-beratung-page .hero-scene a.hero-scene__secondary span {
  color: #ffffff !important;
}

/* Minimal global contrast patch: keep text readable on explicit light/dark surfaces. */
main :where(
  .bg-graphite,
  .page-section--dark,
  .term-dark,
  .beratung-board-section,
  .beratung-why-section,
  .beratung-trust-section,
  .beratung-final-section,
  .beratung-service-card--dark,
  .dienste-lanes-section,
  .dienste-transition-section,
  .dienste-final-section,
  .dienste-spine-section,
  .dienste-practice-card--dark,
  .wissen-cta,
  .academy-cta,
  .ueber-cta
) :where(h1, h2, h3, h4, h5, h6, strong, summary, label):not(.text-swiss-red):not(.material-symbols-outlined) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

main :where(
  .bg-graphite,
  .page-section--dark,
  .term-dark,
  .beratung-board-section,
  .beratung-why-section,
  .beratung-trust-section,
  .beratung-final-section,
  .beratung-service-card--dark,
  .dienste-lanes-section,
  .dienste-transition-section,
  .dienste-final-section,
  .dienste-spine-section,
  .dienste-practice-card--dark,
  .wissen-cta,
  .academy-cta,
  .ueber-cta
) :where(p, li, small, dd, span:not(.text-swiss-red):not(.material-symbols-outlined)) {
  color: rgba(239, 241, 243, .84) !important;
  -webkit-text-fill-color: rgba(239, 241, 243, .84) !important;
}

main :where(
  .bg-white,
  .beratung-problem-section,
  .beratung-feature-section,
  .beratung-expect-section,
  .beratung-services-section,
  .beratung-workflow-section,
  .beratung-faq-section,
  .beratung-problem-grid article,
  .beratung-service-card:not(.beratung-service-card--dark),
  .beratung-expect-cards article,
  .beratung-faq-grid details,
  .dienste-problem-section,
  .dienste-practice-section,
  .dienste-workflow-section,
  .dienste-industries-section,
  .dienste-faq-section,
  .dienste-problem-grid article,
  .dienste-practice-card:not(.dienste-practice-card--dark),
  .dienste-industry-grid article,
  .dienste-faq-grid details,
  .contact-form-panel,
  .contact-process-panel,
  .contact-step,
  .contact-decision-item
) :where(h1, h2, h3, h4, h5, h6, strong, summary, label):not(.text-swiss-red):not(.material-symbols-outlined) {
  color: #07111c !important;
  -webkit-text-fill-color: #07111c !important;
}

main :where(
  .bg-white,
  .beratung-problem-section,
  .beratung-feature-section,
  .beratung-expect-section,
  .beratung-services-section,
  .beratung-workflow-section,
  .beratung-faq-section,
  .beratung-problem-grid article,
  .beratung-service-card:not(.beratung-service-card--dark),
  .beratung-expect-cards article,
  .beratung-faq-grid details,
  .dienste-problem-section,
  .dienste-practice-section,
  .dienste-workflow-section,
  .dienste-industries-section,
  .dienste-faq-section,
  .dienste-problem-grid article,
  .dienste-practice-card:not(.dienste-practice-card--dark),
  .dienste-industry-grid article,
  .dienste-faq-grid details,
  .contact-form-panel,
  .contact-process-panel,
  .contact-step,
  .contact-decision-item
) :where(p, li, small, dd, span:not(.text-swiss-red):not(.material-symbols-outlined)) {
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
}

main :where(.text-swiss-red, .material-symbols-outlined) {
  -webkit-text-fill-color: currentColor;
}

main :where(
  .site-header__cta,
  .hero-scene__primary,
  .btn-primary,
  .term-btn--primary,
  .usecase-overview__primary,
  .usecase-overview__cta-link,
  .contact-submit,
  .saa-contact-page button[type="submit"],
  .saa-cookie-banner__primary,
  .saa-footer__cta
),
main :where(
  .site-header__cta,
  .hero-scene__primary,
  .btn-primary,
  .term-btn--primary,
  .usecase-overview__primary,
  .usecase-overview__cta-link,
  .contact-submit,
  .saa-contact-page button[type="submit"],
  .saa-cookie-banner__primary,
  .saa-footer__cta
) :where(span, strong) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Global secondary CTA contract: navy surface, red label. */
:root {
  --saa-secondary-cta-bg: #07111c;
  --saa-secondary-cta-bg-hover: #0b1a2a;
  --saa-secondary-cta-text: var(--saa-red);
  --saa-secondary-cta-text-dark: var(--saa-red);
  --saa-secondary-cta-border: rgba(217, 30, 24, .68);
}

.hero-scene__secondary,
.btn-secondary,
.term-btn--ghost,
.usecase-overview__secondary,
.academy-secondary,
.pa-actions .secondary,
.saa-cookie-banner__secondary {
  background: var(--saa-secondary-cta-bg) !important;
  border-color: var(--saa-secondary-cta-border) !important;
  color: var(--saa-secondary-cta-text) !important;
  -webkit-text-fill-color: var(--saa-secondary-cta-text) !important;
}

.hero-scene__secondary :where(span, strong),
.btn-secondary :where(span, strong),
.term-btn--ghost :where(span, strong),
.usecase-overview__secondary :where(span, strong),
.academy-secondary :where(span, strong),
.pa-actions .secondary :where(span, strong),
.saa-cookie-banner__secondary :where(span, strong) {
  color: var(--saa-secondary-cta-text) !important;
  -webkit-text-fill-color: var(--saa-secondary-cta-text) !important;
}

.hero-scene__secondary:hover,
.hero-scene__secondary:focus-visible,
.btn-secondary:hover,
.btn-secondary:focus-visible,
.term-btn--ghost:hover,
.term-btn--ghost:focus-visible,
.usecase-overview__secondary:hover,
.usecase-overview__secondary:focus-visible,
.academy-secondary:hover,
.academy-secondary:focus-visible,
.pa-actions .secondary:hover,
.pa-actions .secondary:focus-visible,
.saa-cookie-banner__secondary:hover,
.saa-cookie-banner__secondary:focus-visible {
  background: var(--saa-secondary-cta-bg-hover) !important;
  border-color: var(--saa-secondary-cta-text) !important;
}

body .hero-scene a.hero-scene__secondary,
body.home-page .hero-scene a.hero-scene__secondary,
body.ki-beratung-page .hero-scene a.hero-scene__secondary,
html body .hero-scene a.hero-scene__secondary{
  background: var(--saa-secondary-cta-bg) !important;
  border-color: var(--saa-secondary-cta-border) !important;
  color: var(--saa-secondary-cta-text) !important;
  -webkit-text-fill-color: var(--saa-secondary-cta-text) !important;
}

body .hero-scene a.hero-scene__secondary span,
body.home-page .hero-scene a.hero-scene__secondary span,
body.ki-beratung-page .hero-scene a.hero-scene__secondary span,
html body .hero-scene a.hero-scene__secondary span{
  color: var(--saa-secondary-cta-text) !important;
  -webkit-text-fill-color: var(--saa-secondary-cta-text) !important;
}

.usecase-overview-page .usecase-overview__secondary,
html .usecase-overview-page .usecase-overview__secondary{
  background: var(--saa-secondary-cta-bg) !important;
  border-color: var(--saa-secondary-cta-border) !important;
  color: var(--saa-secondary-cta-text) !important;
  -webkit-text-fill-color: var(--saa-secondary-cta-text) !important;
}

.usecase-overview-page .usecase-overview__primary{
  background: var(--saa-cta-red-accessible) !important;
  border-color: var(--saa-cta-red-accessible) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

body.ki-beratung-page .hero-scene a.hero-scene__secondary,
body.ki-beratung-page .hero-scene a.hero-scene__secondary:visited,
html body.ki-beratung-page .hero-scene a.hero-scene__secondary {
  background: var(--saa-secondary-cta-bg) !important;
  border-color: var(--saa-secondary-cta-border) !important;
  color: var(--saa-secondary-cta-text) !important;
  -webkit-text-fill-color: var(--saa-secondary-cta-text) !important;
}

body.ki-beratung-page .hero-scene a.hero-scene__secondary *,
html body.ki-beratung-page .hero-scene a.hero-scene__secondary * {
  color: var(--saa-secondary-cta-text) !important;
  -webkit-text-fill-color: var(--saa-secondary-cta-text) !important;
}

html .hero-scene__secondary,
html .btn-secondary,
html .term-btn--ghost,
html .usecase-overview__secondary,
html .academy-secondary,
html .pa-actions .secondary,
html .saa-cookie-banner__secondary {
  color: var(--saa-secondary-cta-text) !important;
  -webkit-text-fill-color: var(--saa-secondary-cta-text) !important;
}

html .hero-scene__secondary *,
html .btn-secondary *,
html .term-btn--ghost *,
html .usecase-overview__secondary *,
html .academy-secondary *,
html .pa-actions .secondary *,
html .saa-cookie-banner__secondary * {
  color: var(--saa-secondary-cta-text) !important;
  -webkit-text-fill-color: var(--saa-secondary-cta-text) !important;
}

/* Brand red + contrast correction: one red token, stable dark/light surfaces. */
:root{
  --saa-red: #d91e18;
  --saa-cta-red: #d91e18;
  --saa-cta-red-accessible: #d91e18;
  --saa-secondary-cta-bg: #07111c;
  --saa-secondary-cta-bg-hover: #0b1a2a;
  --saa-secondary-cta-text: #d91e18;
  --saa-secondary-cta-text-dark: #d91e18;
  --saa-secondary-cta-border: rgba(217, 30, 24, .68);
}

.hero-scene__primary,
.usecase-overview__primary,
.site-header__cta,
.contact-submit,
.term-btn--primary,
a[href="potenzialanalyse.html"].bg-primary,
button[type="submit"] {
  background: var(--saa-red) !important;
  border-color: var(--saa-red) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.hero-scene__primary *,
.usecase-overview__primary *,
.site-header__cta *,
.contact-submit *,
.term-btn--primary *,
a[href="potenzialanalyse.html"].bg-primary *,
button[type="submit"] * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.hero-scene__secondary,
.btn-secondary,
.term-btn--ghost,
.usecase-overview__secondary,
.academy-secondary,
.pa-actions .secondary,
.saa-cookie-banner__secondary,
.dienste-final-panel .hero-scene__secondary,
.wissen-final-actions .hero-scene__secondary,
.ueber-actions .hero-scene__secondary {
  background: var(--saa-secondary-cta-bg) !important;
  border-color: var(--saa-secondary-cta-border) !important;
  color: var(--saa-red) !important;
  -webkit-text-fill-color: var(--saa-red) !important;
}

.hero-scene__secondary *,
.btn-secondary *,
.term-btn--ghost *,
.usecase-overview__secondary *,
.academy-secondary *,
.pa-actions .secondary *,
.saa-cookie-banner__secondary *,
.dienste-final-panel .hero-scene__secondary *,
.wissen-final-actions .hero-scene__secondary *,
.ueber-actions .hero-scene__secondary * {
  color: var(--saa-red) !important;
  -webkit-text-fill-color: var(--saa-red) !important;
}

.hero-scene__secondary:hover,
.hero-scene__secondary:focus-visible,
.btn-secondary:hover,
.btn-secondary:focus-visible,
.term-btn--ghost:hover,
.term-btn--ghost:focus-visible,
.usecase-overview__secondary:hover,
.usecase-overview__secondary:focus-visible,
.academy-secondary:hover,
.academy-secondary:focus-visible,
.pa-actions .secondary:hover,
.pa-actions .secondary:focus-visible,
.saa-cookie-banner__secondary:hover,
.saa-cookie-banner__secondary:focus-visible {
  background: var(--saa-secondary-cta-bg-hover) !important;
  border-color: var(--saa-red) !important;
}

body.ki-beratung-page,
body.ki-dienste-page,
body.wissen-page,
body.ueber-page,
body.academy-page,
body.contact-page-body,
body.page-shell {
  background: var(--saa-surface) !important;
  color: var(--saa-text) !important;
}

body.ki-beratung-page .hero-scene,
body.ki-dienste-page .hero-scene,
body.wissen-page .hero-scene,
body.ueber-page .hero-scene,
body.academy-page .hero-scene,
.usecase-overview-page .usecase-overview__hero {
  background: #07111c !important;
  color: #f7f9fb !important;
}

body.ki-beratung-page .hero-scene :where(h1, h2, h3, p, span, strong),
body.ki-dienste-page .hero-scene :where(h1, h2, h3, p, span, strong),
body.wissen-page .hero-scene :where(h1, h2, h3, p, span, strong),
body.ueber-page .hero-scene :where(h1, h2, h3, p, span, strong),
body.academy-page .hero-scene :where(h1, h2, h3, p, span, strong),
.usecase-overview-page .usecase-overview__hero :where(h1, h2, h3, p, span, strong),
.usecase-overview-page .usecase-map :where(strong, small) {
  color: #f7f9fb !important;
  -webkit-text-fill-color: #f7f9fb !important;
}

body.ki-beratung-page .hero-scene :where(.hero-scene__copy, p),
body.ki-dienste-page .hero-scene :where(.hero-scene__copy, p),
body.wissen-page .hero-scene :where(.hero-scene__copy, p),
body.ueber-page .hero-scene :where(.hero-scene__copy, p),
body.academy-page .hero-scene :where(.hero-scene__copy, p),
.usecase-overview-page .usecase-overview__hero :where(.usecase-overview__copy, p),
.usecase-overview-page .usecase-map small {
  color: rgba(239, 241, 243, .84) !important;
  -webkit-text-fill-color: rgba(239, 241, 243, .84) !important;
}

body.contact-page-body :where(.contact-panel, .contact-form-card, form, fieldset),
body.contact-page-body main :where(section, article, .bg-white, .bg-surface),
body.page-shell main :where(.pa-card, .pa-panel, .pa-section, .legal-panel) {
  background: var(--saa-surface) !important;
  color: var(--saa-text) !important;
}

body.contact-page-body main :where(h1, h2, h3, label, p, span, small, strong),
body.page-shell main :where(.pa-heading, .pa-copy, h1, h2, h3, label, p, span, small, strong) {
  color: var(--saa-text) !important;
  -webkit-text-fill-color: var(--saa-text) !important;
}

body.contact-page-body main :where(p, small, .contact-kicker, .text-on-surface-variant),
body.page-shell main :where(.pa-copy, p, small, .text-on-surface-variant) {
  color: var(--saa-text-muted) !important;
  -webkit-text-fill-color: var(--saa-text-muted) !important;
}

.beratung-timeline :where(h3, p, span, strong),
.process-rail :where(h3, p, span, strong),
.faq-section :where(h2, h3, summary, p),
.ki-beratung-page details :where(summary, p, span),
.ki-dienste-page details :where(summary, p, span),
.wissen-page details :where(summary, p, span) {
  color: var(--saa-text) !important;
  -webkit-text-fill-color: var(--saa-text) !important;
}

body.page-shell .hero-scene,
body.term-agent-page .term-hero {
  background: #07111c !important;
  color: #f7f9fb !important;
}

body.page-shell .hero-scene :where(h1, h2, h3, p, span, strong, small),
body.term-agent-page .term-hero :where(h1, h2, h3, p, span, strong, small),
body.term-agent-page .term-hero__signals :where(strong, span) {
  color: #f7f9fb !important;
  -webkit-text-fill-color: #f7f9fb !important;
}

body.page-shell .hero-scene :where(.hero-scene__copy, p, small),
body.term-agent-page .term-hero :where(p, small),
body.term-agent-page .term-hero__signals span {
  color: rgba(239, 241, 243, .84) !important;
  -webkit-text-fill-color: rgba(239, 241, 243, .84) !important;
}

.usecase-overview-page .usecase-map__node,
.usecase-overview-page .usecase-map__core {
  background: #07111c !important;
  border-color: rgba(217, 30, 24, .42) !important;
  color: #f7f9fb !important;
}

.usecase-overview-page .usecase-map__node :where(span, strong),
.usecase-overview-page .usecase-map__core :where(span, strong) {
  color: #f7f9fb !important;
  -webkit-text-fill-color: #f7f9fb !important;
}

.usecase-overview-page .usecase-map__node small,
.usecase-overview-page .usecase-map__core small {
  color: rgba(239, 241, 243, .84) !important;
  -webkit-text-fill-color: rgba(239, 241, 243, .84) !important;
}

body.contact-page-body .contact-form-panel,
body.contact-page-body .contact-next-panel,
body.contact-page-body .contact-card,
body.contact-page-body .contact-step,
body.contact-page-body .contact-workflow-grid > * {
  background: var(--saa-surface) !important;
  color: var(--saa-text) !important;
}

body.contact-page-body .contact-form-panel :where(h1, h2, h3, label, span, strong),
body.contact-page-body .contact-next-panel :where(h1, h2, h3, label, span, strong),
body.contact-page-body .contact-card :where(h1, h2, h3, label, span, strong),
body.contact-page-body .contact-step :where(h1, h2, h3, label, span, strong) {
  color: var(--saa-text) !important;
  -webkit-text-fill-color: var(--saa-text) !important;
}

body.contact-page-body .contact-form-panel :where(p, small, .contact-kicker),
body.contact-page-body .contact-next-panel :where(p, small, .contact-kicker),
body.contact-page-body .contact-card :where(p, small, .contact-kicker),
body.contact-page-body .contact-step :where(p, small, .contact-kicker) {
  color: var(--saa-text-muted) !important;
  -webkit-text-fill-color: var(--saa-text-muted) !important;
}

body.page-shell main > :where(section, article):not(.hero-scene):not(.term-hero),
body.page-shell main :where(.pa-shell, .pa-container, .pa-content, .pa-card, .pa-panel, .pa-section, .legal-panel) {
  background: var(--saa-surface) !important;
  color: var(--saa-text) !important;
}

body.page-shell main > :where(section, article):not(.hero-scene):not(.term-hero) :where(h1, h2, h3, h4, label, span, strong, summary),
body.page-shell main :where(.pa-shell, .pa-container, .pa-content, .pa-card, .pa-panel, .pa-section, .legal-panel) :where(h1, h2, h3, h4, label, span, strong, summary) {
  color: var(--saa-text) !important;
  -webkit-text-fill-color: var(--saa-text) !important;
}

body.page-shell main > :where(section, article):not(.hero-scene):not(.term-hero) :where(p, small, li),
body.page-shell main :where(.pa-shell, .pa-container, .pa-content, .pa-card, .pa-panel, .pa-section, .legal-panel) :where(p, small, li) {
  color: var(--saa-text-muted) !important;
  -webkit-text-fill-color: var(--saa-text-muted) !important;
}

/* RUNDE 3 — Rhythmus-Rebalancing: dies ist die HELLE Basis fuer alle
   Nicht-Hero-Sections (Selektoren bewusst unveraendert gelassen, um
   die Kaskaden-Beziehungen zu bestehenden Korrektur-Regeln nicht zu
   verschieben). Die als DUNKEL definierten Akzent-Sections werden vom
   gescopten Dunkel-Set weiter unten (spaeter + staerker) uebersteuert.
   Abfolge Homepage: Hero D, Partner D, Potenzial h, Angebote h,
   System D, Bento h, Einstieg h, Prozess D, Region D (bg-graphite),
   FAQ h, CTA D, About h. */
.home-page main > section:not(.hero-scene):not(.hero-scene--subpage) {
  background-color: var(--saa-surface) !important;
  color: var(--saa-text) !important;
}

.home-page main > section:not(.hero-scene):not(.hero-scene--subpage) :where(h1, h2, h3, h4, strong, span) {
  color: var(--saa-text) !important;
  -webkit-text-fill-color: var(--saa-text) !important;
}

.home-page main > section:not(.hero-scene):not(.hero-scene--subpage) :where(p, small, li) {
  color: var(--saa-text-muted) !important;
  -webkit-text-fill-color: var(--saa-text-muted) !important;
}

.usecase-overview-page .usecase-overview__hero,
.usecase-overview-page .usecase-overview__visual,
.usecase-overview-page .usecase-map,
.usecase-overview-page .usecase-map__node,
.usecase-overview-page .usecase-map__core {
  background: #07111c !important;
  color: #f7f9fb !important;
}

.usecase-overview-page .usecase-overview__hero :where(h1, h2, h3, h4, span, strong),
.usecase-overview-page .usecase-overview__visual :where(h1, h2, h3, h4, span, strong),
.usecase-overview-page .usecase-map :where(span, strong),
.usecase-overview-page .usecase-map__node :where(span, strong),
.usecase-overview-page .usecase-map__core :where(span, strong) {
  color: #f7f9fb !important;
  -webkit-text-fill-color: #f7f9fb !important;
}

.usecase-overview-page .usecase-overview__hero :where(p, small),
.usecase-overview-page .usecase-overview__visual :where(p, small),
.usecase-overview-page .usecase-map :where(p, small),
.usecase-overview-page .usecase-map__node small,
.usecase-overview-page .usecase-map__core small {
  color: rgba(239, 241, 243, .84) !important;
  -webkit-text-fill-color: rgba(239, 241, 243, .84) !important;
}

body.contact-page-body .contact-main,
body.contact-page-body .contact-section,
body.contact-page-body .contact-container,
body.contact-page-body .contact-workflow-grid,
body.contact-page-body .contact-form-panel,
body.contact-page-body .contact-next-panel,
body.contact-page-body .contact-form,
body.contact-page-body .contact-field,
body.contact-page-body .contact-step,
body.contact-page-body .contact-step-grid {
  background: var(--saa-surface) !important;
  background-color: var(--saa-surface) !important;
  color: var(--saa-text) !important;
}

body.contact-page-body :where(.contact-main, .contact-section, .contact-container, .contact-workflow-grid, .contact-form-panel, .contact-next-panel, .contact-form, .contact-field, .contact-step, .contact-step-grid) :where(h1, h2, h3, h4, label, span, strong) {
  color: var(--saa-text) !important;
  -webkit-text-fill-color: var(--saa-text) !important;
}

body.contact-page-body :where(.contact-main, .contact-section, .contact-container, .contact-workflow-grid, .contact-form-panel, .contact-next-panel, .contact-form, .contact-field, .contact-step, .contact-step-grid) :where(p, small, li, .contact-kicker) {
  color: var(--saa-text-muted) !important;
  -webkit-text-fill-color: var(--saa-text-muted) !important;
}

/* RUNDE 3 — Rhythmus-Rebalancing: die fruehere Blanket-Regel ("ALLE
   Nicht-Hero-Sections dunkel") ist aufgeloest — dunkel sind jetzt nur
   noch die bewusst gewaehlten Akzent-Sections. never-ID-Boost, damit
   dieses Set die (spezifischere) helle Basis oben sicher schlaegt. */
.home-page main > section:is(.partner-carousel, .home-system-section, .home-process-section, .bg-graphite, .home-cta-section):not(#____never____) {
  background-color: #07111c !important;
  color: #f7f9fb !important;
}

/* Innere Text-Regeln bewusst OHNE never-ID (max. (0,3,2) wie die alte
   Blanket-Regel), damit bestehende Korrektur-Regeln fuer helle Karten
   in dunklen Sections (z. B. Kontakt-Panel) weiterhin gewinnen. */
.home-page main > section:is(.partner-carousel, .home-system-section, .home-process-section, .bg-graphite, .home-cta-section) :is(h2, h3, span, strong),
.home-page main > section:is(.partner-carousel, .home-system-section, .home-process-section, .bg-graphite, .home-cta-section) :is(h2, h3, span, strong):not(.____never____x) {
  color: #f7f9fb !important;
  -webkit-text-fill-color: #f7f9fb !important;
}

.home-page main > section:is(.partner-carousel, .home-system-section, .home-process-section, .bg-graphite, .home-cta-section) :is(p, small, li),
.home-page main > section:is(.partner-carousel, .home-system-section, .home-process-section, .bg-graphite, .home-cta-section) :is(p, small, li):not(.____never____x) {
  color: rgba(239, 241, 243, .84) !important;
  -webkit-text-fill-color: rgba(239, 241, 243, .84) !important;
}

.usecase-overview-page .usecase-overview__eyebrow,
.usecase-overview-page .usecase-overview__title,
.usecase-overview-page .usecase-overview__title span,
.usecase-overview-page .usecase-map .material-symbols-outlined,
.usecase-overview-page .usecase-map strong,
.usecase-overview-page .usecase-map__core strong,
.usecase-overview-page .usecase-map__node strong {
  color: #f7f9fb !important;
  -webkit-text-fill-color: #f7f9fb !important;
}

.usecase-overview-page .usecase-overview__copy,
.usecase-overview-page .usecase-map small,
.usecase-overview-page .usecase-map__core small,
.usecase-overview-page .usecase-map__node small {
  color: rgba(239, 241, 243, .84) !important;
  -webkit-text-fill-color: rgba(239, 241, 243, .84) !important;
}

body.contact-page-body .contact-main p,
body.contact-page-body .contact-section p,
body.contact-page-body .contact-form-panel p,
body.contact-page-body .contact-next-panel p,
body.contact-page-body .contact-step p {
  color: rgba(239, 241, 243, .84) !important;
  -webkit-text-fill-color: rgba(239, 241, 243, .84) !important;
}

/* UI UX Pro Max polish pass: Swiss-grid cards, readable type, restrained motion. */
:root {
  --saa-card-border-light: rgba(7, 17, 28, .14);
  --saa-card-border-dark: rgba(239, 241, 243, .16);
  --saa-card-shadow-light: 0 24px 70px rgba(7, 17, 28, .08);
  --saa-card-shadow-dark: 0 28px 84px rgba(0, 0, 0, .26);
}

main :where(
  .beratung-trust-cards,
  .beratung-why-list,
  .beratung-service-grid,
  .beratung-expect-cards,
  .beratung-problem-grid,
  .dienste-practice-grid,
  .dienste-industry-grid,
  .dienste-flow-grid,
  .term-feature-grid,
  .term-step-grid,
  .term-kpi-grid,
  .contact-step-grid,
  .contact-decision-grid
) {
  align-items: stretch !important;
  grid-auto-rows: 1fr !important;
}

main :where(
  .beratung-trust-cards article,
  .beratung-why-list article,
  .beratung-board-card,
  .beratung-service-card,
  .beratung-expect-cards article,
  .beratung-problem-grid article,
  .beratung-faq-grid details,
  .dienste-practice-card,
  .dienste-industry-grid article,
  .dienste-faq-grid details,
  .term-feature,
  .term-step-grid article,
  .term-kpi-grid article,
  .contact-step,
  .contact-decision-item,
  .contact-form-panel,
  .contact-process-panel,
  .bento-card,
  .bento-cell,
  .process-card
) {
  min-width: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease, background-color 220ms ease !important;
}

main :where(
  .beratung-trust-cards article,
  .beratung-why-list article,
  .beratung-board-card,
  .beratung-service-card,
  .beratung-expect-cards article,
  .beratung-problem-grid article,
  .dienste-practice-card,
  .dienste-industry-grid article,
  .term-feature,
  .term-step-grid article,
  .term-kpi-grid article,
  .contact-step,
  .contact-decision-item
)::before {
  background: linear-gradient(90deg, var(--saa-red), rgba(217, 30, 24, 0)) !important;
  content: "" !important;
  height: 2px !important;
  left: 0 !important;
  opacity: .88 !important;
  position: absolute !important;
  top: 0 !important;
  transform: scaleX(.32) !important;
  transform-origin: left center !important;
  transition: transform 240ms ease, opacity 240ms ease !important;
  width: 120px !important;
}

main :where(
  .beratung-trust-cards article,
  .beratung-why-list article,
  .beratung-board-card,
  .beratung-service-card,
  .beratung-expect-cards article,
  .beratung-problem-grid article,
  .dienste-practice-card,
  .dienste-industry-grid article,
  .term-feature,
  .term-step-grid article,
  .term-kpi-grid article,
  .contact-step,
  .contact-decision-item
):hover::before,
main :where(
  .beratung-trust-cards article,
  .beratung-why-list article,
  .beratung-board-card,
  .beratung-service-card,
  .beratung-expect-cards article,
  .beratung-problem-grid article,
  .dienste-practice-card,
  .dienste-industry-grid article,
  .term-feature,
  .term-step-grid article,
  .term-kpi-grid article,
  .contact-step,
  .contact-decision-item
):focus-within::before {
  opacity: 1 !important;
  transform: scaleX(1) !important;
}

main :where(
  .beratung-trust-cards article,
  .beratung-why-list article,
  .beratung-board-card,
  .beratung-service-card,
  .dienste-practice-card,
  .dienste-industry-grid article,
  .term-feature,
  .contact-step,
  .contact-decision-item
):hover,
main :where(
  .beratung-trust-cards article,
  .beratung-why-list article,
  .beratung-board-card,
  .beratung-service-card,
  .dienste-practice-card,
  .dienste-industry-grid article,
  .term-feature,
  .contact-step,
  .contact-decision-item
):focus-within {
  border-color: color-mix(in srgb, var(--saa-red) 46%, var(--saa-card-border-dark)) !important;
  box-shadow: var(--saa-card-shadow-dark) !important;
  transform: translateY(-3px) !important;
}

main :where(
  .beratung-trust-cards h3,
  .beratung-why-list h3,
  .beratung-board-card strong,
  .beratung-service-card h3,
  .beratung-expect-cards strong,
  .beratung-problem-grid h3,
  .dienste-spine-item h3,
  .dienste-practice-card h3,
  .dienste-industry-grid strong,
  .dienste-flow-grid h3,
  .term-feature h3,
  .contact-step h3,
  .contact-decision-item h3
) {
  hyphens: none !important;
  overflow-wrap: normal !important;
  text-wrap: balance;
  word-break: normal !important;
}

main :where(
  .beratung-trust-cards p,
  .beratung-why-list p,
  .beratung-board-card small,
  .beratung-service-card p,
  .beratung-expect-cards span,
  .beratung-problem-grid p,
  .dienste-spine-item p,
  .dienste-practice-card p,
  .dienste-industry-grid p,
  .dienste-flow-grid p,
  .term-feature p,
  .contact-step p,
  .contact-decision-item p
) {
  line-height: 1.58 !important;
  overflow-wrap: break-word !important;
  text-wrap: pretty;
}

body.ki-beratung-page .beratung-trust-cards {
  grid-template-columns: repeat(3, minmax(250px, 1fr)) !important;
}

body.ki-beratung-page .beratung-trust-cards article {
  min-height: 300px !important;
  padding: clamp(28px, 3.2vw, 40px) !important;
}

body.ki-beratung-page .beratung-trust-cards h3 {
  font-size: clamp(23px, 2vw, 29px) !important;
  line-height: 1.08 !important;
  max-width: 100% !important;
}

body.ki-beratung-page .beratung-trust-cards p {
  font-size: clamp(16px, 1.2vw, 18px) !important;
  max-width: 26ch !important;
}

body.ki-beratung-page .beratung-board-card {
  min-height: 210px !important;
  padding: clamp(28px, 3vw, 38px) !important;
}

body.ki-beratung-page .beratung-board__stack {
  gap: clamp(18px, 2vw, 26px) !important;
}

body.ki-beratung-page .beratung-board__result {
  margin-top: clamp(22px, 3vw, 34px) !important;
}

body.ki-dienste-page .dienste-spine {
  padding-left: clamp(34px, 4vw, 58px) !important;
}

body.ki-dienste-page .dienste-spine-item {
  gap: clamp(22px, 3vw, 42px) !important;
  grid-template-columns: 56px minmax(280px, .95fr) minmax(190px, 260px) !important;
  min-height: 170px !important;
  padding: clamp(28px, 3.2vw, 42px) 0 !important;
}

body.ki-dienste-page .dienste-spine-item h3 {
  font-size: clamp(26px, 2.4vw, 34px) !important;
  line-height: 1.04 !important;
  max-width: 14ch !important;
}

body.ki-dienste-page .dienste-spine-item p {
  font-size: clamp(16px, 1.25vw, 19px) !important;
  max-width: 38ch !important;
}

body.ki-dienste-page .dienste-spine-item ul {
  align-content: start !important;
  display: flex !important;
  gap: 10px !important;
}

body.ki-dienste-page .dienste-spine-item li {
  min-height: 46px !important;
  padding: 12px 14px !important;
}

body.contact-page-body .contact-main p,
body.contact-page-body .contact-section p,
body.contact-page-body .contact-form-panel p,
body.contact-page-body .contact-next-panel p,
body.contact-page-body .contact-step p {
  color: var(--saa-text-muted) !important;
  -webkit-text-fill-color: var(--saa-text-muted) !important;
}

html main :where(
  .beratung-problem-grid article,
  .beratung-service-card:not(.beratung-service-card--dark),
  .beratung-expect-cards article,
  .beratung-faq-grid details,
  .dienste-practice-card:not(.dienste-practice-card--dark),
  .dienste-industry-grid article,
  .dienste-faq-grid details,
  .contact-form-panel,
  .contact-process-panel,
  .contact-step,
  .contact-decision-item
):hover,
html main :where(
  .beratung-problem-grid article,
  .beratung-service-card:not(.beratung-service-card--dark),
  .beratung-expect-cards article,
  .beratung-faq-grid details,
  .dienste-practice-card:not(.dienste-practice-card--dark),
  .dienste-industry-grid article,
  .dienste-faq-grid details,
  .contact-form-panel,
  .contact-process-panel,
  .contact-step,
  .contact-decision-item
):focus-within {
  border-color: color-mix(in srgb, var(--saa-red) 42%, var(--saa-card-border-light)) !important;
  box-shadow: var(--saa-card-shadow-light) !important;
}

@media (max-width: 1100px) {
  body.ki-beratung-page .beratung-trust-cards,
  body.ki-dienste-page .dienste-spine-item {
    grid-template-columns: 1fr !important;
  }

  body.ki-beratung-page .beratung-trust-cards article,
  body.ki-dienste-page .dienste-spine-item {
    min-height: 0 !important;
  }

  body.ki-dienste-page .dienste-spine-item ul {
    max-width: 100% !important;
  }
}

@media (max-width: 680px) {
  main :where(.beratung-trust-cards article, .beratung-board-card, .dienste-spine-item, .dienste-practice-card) {
    padding: 24px !important;
  }

  body.ki-beratung-page .beratung-trust-cards h3,
  body.ki-dienste-page .dienste-spine-item h3 {
    max-width: 100% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  main :where(
    .beratung-trust-cards article,
    .beratung-why-list article,
    .beratung-board-card,
    .beratung-service-card,
    .dienste-practice-card,
    .dienste-industry-grid article,
    .term-feature,
    .contact-step,
    .contact-decision-item
  ) {
    transition: none !important;
  }

  main :where(
    .beratung-trust-cards article,
    .beratung-why-list article,
    .beratung-board-card,
    .beratung-service-card,
    .dienste-practice-card,
    .dienste-industry-grid article,
    .term-feature,
    .contact-step,
    .contact-decision-item
  ):hover,
  main :where(
    .beratung-trust-cards article,
    .beratung-why-list article,
    .beratung-board-card,
    .beratung-service-card,
    .dienste-practice-card,
    .dienste-industry-grid article,
    .term-feature,
    .contact-step,
    .contact-decision-item
  ):focus-within {
    transform: none !important;
  }
}

/* Surface-aware contrast repair: keep text tied to the component surface, not the whole section. */
html :where(
  .home-offer-card,
  .home-page .process-card,
  .contact-form-panel,
  .contact-process-panel,
  .contact-step,
  .contact-decision-item,
  .bento-card,
  .bento-cell,
  .process-card,
  .usecase-card,
  .pa-card,
  .pa-panel,
  .pa-section .pa-container
) {
  background-color: var(--saa-surface) !important;
  color: var(--saa-text) !important;
}

html :where(
  .home-offer-card,
  .home-page .process-card,
  .contact-form-panel,
  .contact-process-panel,
  .contact-step,
  .contact-decision-item,
  .bento-card,
  .bento-cell,
  .process-card,
  .usecase-card,
  .pa-card,
  .pa-panel,
  .pa-section .pa-container
) :where(h1, h2, h3, h4, label, summary, strong, span:not(.material-symbols-outlined)) {
  color: var(--saa-text) !important;
  -webkit-text-fill-color: var(--saa-text) !important;
}

html :where(
  .home-offer-card,
  .home-page .process-card,
  .contact-form-panel,
  .contact-process-panel,
  .contact-step,
  .contact-decision-item,
  .bento-card,
  .bento-cell,
  .process-card,
  .usecase-card,
  .pa-card,
  .pa-panel,
  .pa-section .pa-container
) :where(p, small, li, dd, .text-on-surface-variant, .text-surface-variant, .contact-kicker) {
  color: var(--saa-text-muted) !important;
  -webkit-text-fill-color: var(--saa-text-muted) !important;
}

html .home-agent-board,
html .home-agent-card,
html .home-agent-board__result,
html .usecase-overview__hero,
html .usecase-overview__visual,
html .usecase-map,
html .usecase-map__core,
html .usecase-map__node {
  background-color: #07111c !important;
  color: #f7f9fb !important;
}

html :where(
  .home-agent-board,
  .home-agent-card,
  .home-agent-board__result,
  .usecase-overview__hero,
  .usecase-overview__visual,
  .usecase-map,
  .usecase-map__core,
  .usecase-map__node
) :where(h1, h2, h3, h4, strong, span:not(.material-symbols-outlined)) {
  color: #f7f9fb !important;
  -webkit-text-fill-color: #f7f9fb !important;
}

html :where(
  .home-agent-board,
  .home-agent-card,
  .home-agent-board__result,
  .usecase-overview__hero,
  .usecase-overview__visual,
  .usecase-map,
  .usecase-map__core,
  .usecase-map__node
) :where(p, small, li) {
  color: rgba(239, 241, 243, .84) !important;
  -webkit-text-fill-color: rgba(239, 241, 243, .84) !important;
}

html .home-page :where(.bg-white, .saa-signal-card, section.bg-white, .home-offer-card:not(.bg-graphite)) {
  background-color: #ffffff !important;
  color: var(--saa-text) !important;
}

html .home-page :where(.bg-white, .saa-signal-card, section.bg-white, .home-offer-card:not(.bg-graphite)) :where(h1, h2, h3, h4, h5, h6, summary, strong, span:not(.material-symbols-outlined)) {
  color: var(--saa-text) !important;
  -webkit-text-fill-color: var(--saa-text) !important;
}

html .home-page :where(.bg-white, .saa-signal-card, section.bg-white, .home-offer-card:not(.bg-graphite)) :where(p, small, li, .text-on-surface-variant, .text-surface-variant) {
  color: var(--saa-text-muted) !important;
  -webkit-text-fill-color: var(--saa-text-muted) !important;
}

html .home-page .home-offer-card.bg-graphite,
html .home-page .home-offer-card.bg-graphite :where(h1, h2, h3, h4, h5, h6, summary, strong, span:not(.material-symbols-outlined)) {
  color: #f7f9fb !important;
  -webkit-text-fill-color: #f7f9fb !important;
}

html .home-page .home-offer-card.bg-graphite :where(p, small, li, .text-on-surface-variant, .text-surface-variant) {
  color: rgba(239, 241, 243, .84) !important;
  -webkit-text-fill-color: rgba(239, 241, 243, .84) !important;
}

html .home-page .bg-white,
html .home-page .saa-signal-card.bg-white {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: var(--saa-text) !important;
  -webkit-text-fill-color: var(--saa-text) !important;
}

html .home-page .bg-white h1,
html .home-page .bg-white h2,
html .home-page .bg-white h3,
html .home-page .bg-white h4,
html .home-page .bg-white h5,
html .home-page .bg-white h6,
html .home-page .bg-white strong,
html .home-page .saa-signal-card.bg-white h4{
  color: var(--saa-text) !important;
  -webkit-text-fill-color: var(--saa-text) !important;
}

html .home-page .bg-white p,
html .home-page .bg-white small,
html .home-page .bg-white li,
html .home-page .bg-white .text-on-surface-variant,
html .home-page .bg-white .text-surface-variant,
html .home-page .saa-signal-card.bg-white p,
html .home-page .saa-signal-card.bg-white .text-on-surface-variant {
  color: var(--saa-text-muted) !important;
  -webkit-text-fill-color: var(--saa-text-muted) !important;
}

html .home-page .bg-white .material-symbols-outlined,
html .home-page .saa-signal-card.bg-white .material-symbols-outlined {
  color: var(--saa-red) !important;
  -webkit-text-fill-color: var(--saa-red) !important;
}

html .home-page .bg-white a.bg-swiss-red,
html .home-page .bg-white a.bg-swiss-red *,
html .home-page .bg-white .site-header__cta,
html .home-page .bg-white .site-header__cta * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body.home-page main section .bg-white h1,
html body.home-page main section .bg-white h2,
html body.home-page main section .bg-white h3,
html body.home-page main section .bg-white h4,
html body.home-page main section .bg-white h5,
html body.home-page main section .bg-white h6,
html body.home-page main section .bg-white strong,
html body.home-page main section .bg-white span:not(.material-symbols-outlined) {
  color: var(--saa-text) !important;
  -webkit-text-fill-color: var(--saa-text) !important;
}

html body.home-page main section .bg-white p,
html body.home-page main section .bg-white small,
html body.home-page main section .bg-white li,
html body.home-page main section .bg-white .text-on-surface-variant,
html body.home-page main section .bg-white .text-surface-variant {
  color: var(--saa-text-muted) !important;
  -webkit-text-fill-color: var(--saa-text-muted) !important;
}

html body.home-page main section .bg-white a.bg-swiss-red,
html body.home-page main section .bg-white a.bg-swiss-red *,
html body.home-page main section .bg-white .site-header__cta,
html body.home-page main section .bg-white .site-header__cta * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* High priority conversion fixes 2026-06-27 */
.potenzialanalyse-page .pa-intake {
  background: #07111c;
  color: #fff;
  min-height: calc(100vh - var(--saa-header-h, 96px));
  overflow: hidden;
  padding: calc(var(--saa-header-h, 96px) + 42px) var(--saa-shell-x, 80px) 72px;
  position: relative;
}

.potenzialanalyse-page .pa-intake__media {
  position: absolute;
  inset: 0;
  opacity: .42;
  pointer-events: none;
}

.potenzialanalyse-page .pa-intake__media::after {
  background:
    linear-gradient(90deg, rgba(7, 17, 28, .98) 0%, rgba(7, 17, 28, .82) 42%, rgba(7, 17, 28, .62) 100%),
    linear-gradient(0deg, rgba(7, 17, 28, .95) 0%, rgba(7, 17, 28, .2) 46%, rgba(7, 17, 28, .88) 100%);
  content: "";
  inset: 0;
  position: absolute;
}

.potenzialanalyse-page .pa-intake__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.potenzialanalyse-page .pa-intake__inner {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  grid-template-columns: minmax(320px, .82fr) minmax(620px, 1.18fr);
  margin: 0 auto;
  max-width: 1320px;
  position: relative;
  z-index: 1;
}

.potenzialanalyse-page .pa-intake__copy {
  align-self: center;
  max-width: 620px;
}

.potenzialanalyse-page .pa-intake__copy h1 {
  color: #fff;
  font-size: clamp(46px, 6vw, 82px);
  font-weight: 900;
  letter-spacing: 0;
  line-height: .98;
  margin: 0 0 26px;
}

.potenzialanalyse-page .pa-intake__copy p {
  color: rgba(255, 255, 255, .78);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.6;
  margin: 0;
}

.potenzialanalyse-page .pa-intake__proof {
  display: grid;
  gap: 12px;
  margin-top: 34px;
}

.potenzialanalyse-page .pa-intake__proof span {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  display: grid;
  gap: 2px;
  padding: 14px 16px;
}

.potenzialanalyse-page .pa-intake__proof strong {
  color: #fff;
  font-size: 14px;
  text-transform: uppercase;
}

.potenzialanalyse-page .pa-intake__proof small {
  color: rgba(255, 255, 255, .68);
  font-size: 14px;
}

.potenzialanalyse-page .pa-intake__form-panel {
  background: rgba(255, 255, 255, .98);
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .34);
  padding: clamp(24px, 3vw, 42px);
}

.potenzialanalyse-page .pa-intake__form-panel .contact-form-head h2 {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  font-size: clamp(28px, 3vw, 42px);
  letter-spacing: 0;
  line-height: 1.04;
}

.potenzialanalyse-page .pa-intake__form-panel .contact-form-head p {
  color: rgba(17, 24, 39, .68) !important;
  -webkit-text-fill-color: rgba(17, 24, 39, .68) !important;
}

.potenzialanalyse-page .pa-intake__form-panel :where(.contact-kicker, label) {
  color: #d91e18 !important;
  -webkit-text-fill-color: #d91e18 !important;
}

.potenzialanalyse-page .pa-intake__form-panel .contact-consent,
.potenzialanalyse-page .pa-intake__form-panel .contact-consent span,
.potenzialanalyse-page .pa-intake__form-panel .contact-form-note {
  color: rgba(17, 24, 39, .72) !important;
  -webkit-text-fill-color: rgba(17, 24, 39, .72) !important;
}

.potenzialanalyse-page .pa-intake__form-panel .contact-consent a {
  color: #b10006 !important;
  -webkit-text-fill-color: #b10006 !important;
}

.potenzialanalyse-page .pa-top-form {
  margin-top: 24px;
}

.potenzialanalyse-page .pa-top-form .contact-field-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.potenzialanalyse-page .pa-top-form .contact-submit {
  width: 100%;
}

body.page-shell main :where(
  .pa-card,
  .pa-decision-card,
  .pa-process-grid article,
  .pa-faq-list article,
  .contact-form-panel,
  .contact-process-panel,
  .contact-decision-item,
  .process-card:not(.bg-graphite),
  .bg-white
) :where(h1, h2, h3, h4, h5, h6, label, strong, summary):not(.material-symbols-outlined) {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

body.page-shell main :where(
  .pa-card,
  .pa-decision-card,
  .pa-process-grid article,
  .pa-faq-list article,
  .contact-form-panel,
  .contact-process-panel,
  .contact-decision-item,
  .process-card:not(.bg-graphite),
  .bg-white
) :where(p, li, small):not(.material-symbols-outlined) {
  color: rgba(17, 24, 39, .68) !important;
  -webkit-text-fill-color: rgba(17, 24, 39, .68) !important;
}

body.page-shell main :where(.pa-eyebrow, .pa-card-number, .contact-kicker, .home-card-label) {
  color: #d91e18 !important;
  -webkit-text-fill-color: #d91e18 !important;
}

.saa-cookie-banner {
  left: auto !important;
  right: 24px !important;
  bottom: 24px !important;
  top: auto !important;
  max-width: 720px !important;
  padding: 20px 22px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  align-items: center !important;
}

.saa-cookie-banner h2 {
  font-size: 22px !important;
  line-height: 1.2 !important;
  margin: 0 0 6px !important;
}

.saa-cookie-banner p {
  font-size: 14px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

.saa-cookie-banner__actions {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

.saa-cookie-banner button {
  min-height: 46px !important;
  padding: 0 20px !important;
  white-space: nowrap !important;
}

.potenzialanalyse-page .pa-section {
  padding: clamp(64px, 8vw, 112px) var(--saa-shell-x, 80px);
}

.potenzialanalyse-page .pa-container {
  width: min(1180px, 100%);
  margin: 0 auto;
}

.potenzialanalyse-page .pa-two-column {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .78fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}

.potenzialanalyse-page .pa-section-head {
  max-width: 760px;
  margin-bottom: 34px;
}

.potenzialanalyse-page .pa-eyebrow,
.potenzialanalyse-page .pa-card-number {
  color: #d91e18;
  display: inline-flex;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  margin-bottom: 14px;
  text-transform: uppercase;
}

.potenzialanalyse-page .pa-section h2 {
  color: var(--saa-text-strong, #111827);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.04;
  margin: 0 0 18px;
}

.potenzialanalyse-page .pa-section h3 {
  color: var(--saa-text-strong, #111827);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.25;
  margin: 0 0 10px;
}

.potenzialanalyse-page .pa-section p {
  color: rgba(25, 28, 30, .72);
  font-size: 17px;
  line-height: 1.7;
  margin: 0;
}

.potenzialanalyse-page .pa-card-grid,
.potenzialanalyse-page .pa-process-grid,
.potenzialanalyse-page .pa-trust-grid {
  display: grid;
  gap: 18px;
}

.potenzialanalyse-page .pa-card-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.potenzialanalyse-page .pa-card,
.potenzialanalyse-page .pa-decision-card,
.potenzialanalyse-page .pa-scorecard,
.potenzialanalyse-page .pa-process-grid article,
.potenzialanalyse-page .pa-faq-list article {
  background: #fff;
  border: 1px solid rgba(17, 24, 39, .14);
  box-shadow: 0 18px 44px rgba(15, 23, 42, .08);
  padding: clamp(22px, 3vw, 34px);
}

.potenzialanalyse-page .pa-scorecard-section,
.potenzialanalyse-page .pa-final {
  background: #07111c;
}

.potenzialanalyse-page .pa-scorecard-section :where(h2, h3, p, span),
.potenzialanalyse-page .pa-final :where(h2, h3, p, span) {
  color: #fff;
}

.potenzialanalyse-page .pa-scorecard {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .18);
  box-shadow: none;
}

.potenzialanalyse-page .pa-scorecard__row,
.potenzialanalyse-page .pa-scorecard__result {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.potenzialanalyse-page .pa-scorecard__result {
  border-bottom: 0;
  padding-top: 22px;
}

.potenzialanalyse-page .pa-scorecard strong {
  color: #fff;
  text-align: right;
}

.potenzialanalyse-page .pa-process-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.potenzialanalyse-page .pa-process-grid article > span {
  color: #d91e18;
  display: block;
  font-weight: 900;
  margin-bottom: 18px;
}

.potenzialanalyse-page .pa-trust-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.potenzialanalyse-page .pa-trust-grid span {
  background: #fff;
  border: 1px solid rgba(17, 24, 39, .14);
  color: #111827;
  font-weight: 500;
  padding: 18px 20px;
}

.potenzialanalyse-page .pa-faq-list {
  display: grid;
  gap: 16px;
}

.potenzialanalyse-page .pa-final-panel {
  align-items: center;
  display: flex;
  gap: 28px;
  justify-content: space-between;
}

.potenzialanalyse-page .pa-final-panel > div {
  max-width: 760px;
}

.potenzialanalyse-page .pa-inline-cta {
  margin-top: 28px;
}

@media (max-width: 1024px) {
  .saa-cookie-banner {
    left: 16px !important;
    grid-template-columns: 1fr !important;
    max-height: 34vh !important;
    overflow: auto !important;
  }

  .potenzialanalyse-page .pa-two-column,
  .potenzialanalyse-page .pa-card-grid,
  .potenzialanalyse-page .pa-process-grid,
  .potenzialanalyse-page .pa-trust-grid {
    grid-template-columns: 1fr;
  }

  .potenzialanalyse-page .pa-intake {
    min-height: auto;
    padding: calc(var(--saa-header-h-mobile, 98px) + 28px) var(--saa-shell-x-mobile, 20px) 48px;
  }

  .potenzialanalyse-page .pa-intake__inner {
    grid-template-columns: 1fr;
  }

  .potenzialanalyse-page .pa-intake__copy {
    max-width: none;
  }

  .potenzialanalyse-page .pa-final-panel {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 680px) {
  .saa-cookie-banner {
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    top: auto !important;
    max-height: 34vh !important;
    padding: 16px !important;
  }

  .saa-cookie-banner h2 {
    font-size: 18px !important;
  }

  .saa-cookie-banner p {
    font-size: 12px !important;
  }

  .saa-cookie-banner__actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-content: stretch !important;
  }

  .saa-cookie-banner button {
    min-height: 42px !important;
    padding: 0 10px !important;
    white-space: normal !important;
  }

  .potenzialanalyse-page .pa-section {
    padding: 56px var(--saa-shell-x-mobile, 20px);
  }

  .potenzialanalyse-page .pa-intake__copy h1 {
    font-size: clamp(38px, 11vw, 52px);
  }

  .potenzialanalyse-page .pa-intake__form-panel {
    padding: 20px;
  }

  .potenzialanalyse-page .pa-top-form .contact-field-grid--two {
    grid-template-columns: 1fr;
  }
}

/* EOF light-surface contrast safety net 2026-06-27 */
body.page-shell main .pa-intake__form-panel :where(h1, h2, h3, h4, h5, h6, label, strong):not(.material-symbols-outlined),
body.page-shell main .pa-card :where(h1, h2, h3, h4, h5, h6, label, strong):not(.material-symbols-outlined),
body.page-shell main .pa-decision-card :where(h1, h2, h3, h4, h5, h6, label, strong):not(.material-symbols-outlined),
body.page-shell main .pa-process-grid article :where(h1, h2, h3, h4, h5, h6, label, strong):not(.material-symbols-outlined),
body.page-shell main .pa-faq-list article :where(h1, h2, h3, h4, h5, h6, label, strong):not(.material-symbols-outlined),
body.page-shell main .contact-form-panel :where(h1, h2, h3, h4, h5, h6, label, strong):not(.material-symbols-outlined),
body.page-shell main .contact-process-panel :where(h1, h2, h3, h4, h5, h6, label, strong):not(.material-symbols-outlined),
body.page-shell main .contact-decision-item :where(h1, h2, h3, h4, h5, h6, label, strong):not(.material-symbols-outlined),
body.page-shell main .bg-white :where(h1, h2, h3, h4, h5, h6, label, strong):not(.material-symbols-outlined) {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

body.page-shell main .pa-intake__form-panel :where(p, li, small, .contact-form-note, .contact-consent, .contact-consent span):not(.material-symbols-outlined),
body.page-shell main .pa-card :where(p, li, small):not(.material-symbols-outlined),
body.page-shell main .pa-decision-card :where(p, li, small):not(.material-symbols-outlined),
body.page-shell main .pa-process-grid article :where(p, li, small):not(.material-symbols-outlined),
body.page-shell main .pa-faq-list article :where(p, li, small):not(.material-symbols-outlined),
body.page-shell main .contact-form-panel :where(p, li, small, .contact-form-note, .contact-consent, .contact-consent span):not(.material-symbols-outlined),
body.page-shell main .contact-process-panel :where(p, li, small):not(.material-symbols-outlined),
body.page-shell main .contact-decision-item :where(p, li, small):not(.material-symbols-outlined),
body.page-shell main .bg-white :where(p, li, small):not(.material-symbols-outlined) {
  color: rgba(17, 24, 39, .68) !important;
  -webkit-text-fill-color: rgba(17, 24, 39, .68) !important;
}

body.page-shell main :where(.pa-intake__form-panel, .contact-form-panel) :where(.contact-kicker, a:not(.contact-submit)),
body.page-shell main :where(.pa-card, .pa-decision-card, .pa-process-grid article, .pa-faq-list article, .bg-white) :where(.pa-eyebrow, .pa-card-number, a:not(.contact-submit)) {
  color: #d91e18 !important;
  -webkit-text-fill-color: #d91e18 !important;
}

body.page-shell main :where(.pa-intake__form-panel, .contact-form-panel) :where(input, select, textarea) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

body.page-shell main :where(.pa-intake__form-panel, .contact-form-panel) :where(input::placeholder, textarea::placeholder) {
  color: rgba(255, 255, 255, .62) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, .62) !important;
}

body.page-shell main :where(.pa-intake__form-panel, .contact-form-panel) :where(button, button *, .contact-submit, .contact-submit *) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Final physical EOF contrast lock 2026-06-27. */
.usecase-overview-page .usecase-map,
.usecase-overview-page .usecase-map__node,
.usecase-overview-page .usecase-map__core,
.usecase-overview-page .usecase-overview__visual {
  background-color: #07111c !important;
  color: #f7f9fb !important;
}

.usecase-overview-page .usecase-map :where(h1, h2, h3, h4, h5, h6, label, summary, strong, span:not(.material-symbols-outlined)),
.usecase-overview-page .usecase-map__node :where(h1, h2, h3, h4, h5, h6, label, summary, strong, span:not(.material-symbols-outlined)),
.usecase-overview-page .usecase-map__core :where(h1, h2, h3, h4, h5, h6, label, summary, strong, span:not(.material-symbols-outlined)) {
  color: #f7f9fb !important;
  -webkit-text-fill-color: #f7f9fb !important;
}

.usecase-overview-page .usecase-map :where(p, li, small, dd, .text-on-surface-variant, .text-surface-variant, .text-tertiary),
.usecase-overview-page .usecase-map__node :where(p, li, small, dd, .text-on-surface-variant, .text-surface-variant, .text-tertiary),
.usecase-overview-page .usecase-map__core :where(p, li, small, dd, .text-on-surface-variant, .text-surface-variant, .text-tertiary) {
  color: rgba(239, 241, 243, .86) !important;
  -webkit-text-fill-color: rgba(239, 241, 243, .86) !important;
}

/* Absolute EOF usecase map contrast lock 2026-06-27. */
.usecase-overview-page .usecase-map__node strong,
.usecase-overview-page .usecase-map__core strong {
  color: #f7f9fb !important;
  -webkit-text-fill-color: #f7f9fb !important;
}

.usecase-overview-page .usecase-map__node small,
.usecase-overview-page .usecase-map__core small {
  color: rgba(239, 241, 243, .86) !important;
  -webkit-text-fill-color: rgba(239, 241, 243, .86) !important;
}

/* Absolute EOF light-mode usecase map contrast lock 2026-06-27. */
html .usecase-overview-page .usecase-map__node strong,
html .usecase-overview-page .usecase-map__core strong {
  color: #f7f9fb !important;
  -webkit-text-fill-color: #f7f9fb !important;
}

html .usecase-overview-page .usecase-map__node small,
html .usecase-overview-page .usecase-map__core small {
  color: rgba(239, 241, 243, .86) !important;
  -webkit-text-fill-color: rgba(239, 241, 243, .86) !important;
}

/* Absolute EOF primary CTA child contrast lock 2026-06-27. */
:where(.site-header__cta, .hero-scene__primary, .btn-primary, .term-btn--primary, .usecase-overview__primary, .usecase-overview__cta-link, .contact-submit, .saa-cookie-banner__primary),
:where(.site-header__cta, .hero-scene__primary, .btn-primary, .term-btn--primary, .usecase-overview__primary, .usecase-overview__cta-link, .contact-submit, .saa-cookie-banner__primary) :where(span, strong, b, em, small, .material-symbols-outlined) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Absolute EOF primary CTA icon contrast lock 2026-06-27. */
html .usecase-overview__primary span,
html .usecase-overview__primary .material-symbols-outlined,
html .usecase-overview__cta-link span,
html .usecase-overview__cta-link .material-symbols-outlined,
html .term-btn--primary span,
html .term-btn--primary .material-symbols-outlined,
html .contact-submit span,
html .contact-submit .material-symbols-outlined,
html .hero-scene__primary span,
html .hero-scene__primary .material-symbols-outlined,
html .site-header__cta span,
html .site-header__cta .material-symbols-outlined {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Global surface contrast lock 2026-06-27c.
   These cards keep fixed visual surfaces across themes, so their text must follow
   the surface color rather than the active theme palette. */
html body.page-shell main :where(.bg-white, section.bg-white, article.bg-white, details.bg-white, .bg-white.border, .saa-signal-card.bg-white, .process-card.bg-white, .wide-card.bg-white) {
  background-color: #ffffff !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

html body.page-shell main :where(.bg-white, section.bg-white, article.bg-white, details.bg-white, .bg-white.border, .saa-signal-card.bg-white, .process-card.bg-white, .wide-card.bg-white)
  :where(h1, h2, h3, h4, h5, h6, label, summary, strong, span:not(.material-symbols-outlined), .text-graphite, .text-on-surface) {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

html body.page-shell main :where(.bg-white, section.bg-white, article.bg-white, details.bg-white, .bg-white.border, .saa-signal-card.bg-white, .process-card.bg-white, .wide-card.bg-white)
  :where(p, li, small, dd, .faq-content, .text-on-surface-variant, .text-surface-variant, .text-tertiary) {
  color: rgba(17, 24, 39, .72) !important;
  -webkit-text-fill-color: rgba(17, 24, 39, .72) !important;
}

html body.page-shell main :where(.bg-white, section.bg-white, article.bg-white, details.bg-white, .bg-white.border, .saa-signal-card.bg-white, .process-card.bg-white, .wide-card.bg-white)
  :where(.text-swiss-red, .material-symbols-outlined, .pa-eyebrow, .contact-kicker, .home-card-label .material-symbols-outlined) {
  color: #d91e18 !important;
  -webkit-text-fill-color: #d91e18 !important;
}

html body.page-shell main :where(.bg-white, section.bg-white, article.bg-white, details.bg-white, .bg-white.border, .saa-signal-card.bg-white, .process-card.bg-white, .wide-card.bg-white)
  :where(.bg-swiss-red, .bg-swiss-red *, .site-header__cta, .site-header__cta *, .hero-scene__primary, .hero-scene__primary *, .btn-primary, .btn-primary *, .contact-submit, .contact-submit *) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body.page-shell main :where(.bg-graphite, .home-offer-card.bg-graphite, .beratung-service-card--dark, .usecase-overview__visual, .usecase-map, .usecase-map__node, .usecase-map__core) {
  background-color: #07111c !important;
  color: #f7f9fb !important;
  -webkit-text-fill-color: #f7f9fb !important;
}

html body.page-shell main :where(.bg-graphite, .home-offer-card.bg-graphite, .beratung-service-card--dark, .usecase-overview__visual, .usecase-map, .usecase-map__node, .usecase-map__core)
  :where(h1, h2, h3, h4, h5, h6, label, summary, strong, span:not(.material-symbols-outlined), .text-white, .text-on-surface, .text-graphite) {
  color: #f7f9fb !important;
  -webkit-text-fill-color: #f7f9fb !important;
}

html body.page-shell main :where(.bg-graphite, .home-offer-card.bg-graphite, .beratung-service-card--dark, .usecase-overview__visual, .usecase-map, .usecase-map__node, .usecase-map__core)
  :where(p, li, small, dd, .text-surface-variant, .text-on-surface-variant, .text-tertiary) {
  color: rgba(239, 241, 243, .84) !important;
  -webkit-text-fill-color: rgba(239, 241, 243, .84) !important;
}

html body.page-shell main :where(.bg-graphite, .home-offer-card.bg-graphite, .beratung-service-card--dark, .usecase-overview__visual, .usecase-map, .usecase-map__node, .usecase-map__core)
  :where(.text-swiss-red, .material-symbols-outlined, .home-card-label .material-symbols-outlined) {
  color: #ff4a45 !important;
  -webkit-text-fill-color: #ff4a45 !important;
}

html body.page-shell main :where(.hero-scene__secondary, .usecase-overview__secondary, .academy-secondary, .term-backlink),
html body.page-shell main :where(.hero-scene__secondary, .usecase-overview__secondary, .academy-secondary, .term-backlink) :where(span, strong, .material-symbols-outlined) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body .saa-mobile-nav-toggle,
html body .saa-mobile-nav-toggle .material-symbols-outlined {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Cross-page contrast lock 2026-06-27d: applies to pages without body.page-shell too. */
html body main :where(.bg-white, section.bg-white, article.bg-white, details.bg-white, .bg-white.border, .saa-signal-card.bg-white, .process-card.bg-white, .wide-card.bg-white, .home-offer-card:not(.bg-graphite), .bento-cell, .beratung-service-card:not(.beratung-service-card--dark), .beratung-faq-grid details, .wissen-feature, .wissen-editorial-intro, .wissen-decision, .wissen-glossar, .wissen-regulation, .wissen-questions, .ueber-position, .ueber-method, .academy-program-intro, .academy-pathway, .academy-fit) {
  background-color: #ffffff !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

html body main :where(.bg-white, section.bg-white, article.bg-white, details.bg-white, .bg-white.border, .saa-signal-card.bg-white, .process-card.bg-white, .wide-card.bg-white, .home-offer-card:not(.bg-graphite), .bento-cell, .beratung-service-card:not(.beratung-service-card--dark), .beratung-faq-grid details, .wissen-feature, .wissen-editorial-intro, .wissen-decision, .wissen-glossar, .wissen-regulation, .wissen-questions, .ueber-position, .ueber-method, .academy-program-intro, .academy-pathway, .academy-fit)
  :where(h1, h2, h3, h4, h5, h6, label, summary, strong, span:not(.material-symbols-outlined), b, em, .text-graphite, .text-on-surface, .home-card-label, .home-card-meta) {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

html body main :where(.bg-white, section.bg-white, article.bg-white, details.bg-white, .bg-white.border, .saa-signal-card.bg-white, .process-card.bg-white, .wide-card.bg-white, .home-offer-card:not(.bg-graphite), .bento-cell, .beratung-service-card:not(.beratung-service-card--dark), .beratung-faq-grid details, .wissen-feature, .wissen-editorial-intro, .wissen-decision, .wissen-glossar, .wissen-regulation, .wissen-questions, .ueber-position, .ueber-method, .academy-program-intro, .academy-pathway, .academy-fit)
  :where(p, li, small, dd, .faq-content, .text-on-surface-variant, .text-surface-variant, .text-tertiary) {
  color: rgba(17, 24, 39, .72) !important;
  -webkit-text-fill-color: rgba(17, 24, 39, .72) !important;
}

html body main :where(.bg-white, section.bg-white, article.bg-white, details.bg-white, .bg-white.border, .saa-signal-card.bg-white, .process-card.bg-white, .wide-card.bg-white, .home-offer-card:not(.bg-graphite), .bento-cell, .beratung-service-card:not(.beratung-service-card--dark), .beratung-faq-grid details, .wissen-feature, .wissen-editorial-intro, .wissen-decision, .wissen-glossar, .wissen-regulation, .wissen-questions, .ueber-position, .ueber-method, .academy-program-intro, .academy-pathway, .academy-fit)
  :where(.text-swiss-red, .material-symbols-outlined, .home-card-label .material-symbols-outlined, .pa-eyebrow, .contact-kicker) {
  color: #b10006 !important;
  -webkit-text-fill-color: #b10006 !important;
}

html body main :where(.bg-white, section.bg-white, article.bg-white, details.bg-white, .bg-white.border, .saa-signal-card.bg-white, .process-card.bg-white, .wide-card.bg-white, .home-offer-card:not(.bg-graphite), .bento-cell, .beratung-service-card:not(.beratung-service-card--dark), .beratung-faq-grid details, .wissen-feature, .wissen-editorial-intro, .wissen-decision, .wissen-glossar, .wissen-regulation, .wissen-questions, .ueber-position, .ueber-method, .academy-program-intro, .academy-pathway, .academy-fit)
  :where(.bg-swiss-red, .bg-swiss-red *, .bg-primary, .bg-primary *, .hero-scene__primary, .hero-scene__primary *, .btn-primary, .btn-primary *, .contact-submit, .contact-submit *) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body main :where(.bg-graphite, .home-offer-card.bg-graphite, .beratung-service-card--dark, .page-section--dark, .hero-scene, .wissen-cta, .academy-apply, .academy-lab, .ueber-cta, .usecase-overview__visual, .usecase-map, .usecase-map__node, .usecase-map__core) {
  background-color: #07111c !important;
  color: #f7f9fb !important;
  -webkit-text-fill-color: #f7f9fb !important;
}

html body main :where(.bg-graphite, .home-offer-card.bg-graphite, .beratung-service-card--dark, .page-section--dark, .hero-scene, .wissen-cta, .academy-apply, .academy-lab, .ueber-cta, .usecase-overview__visual, .usecase-map, .usecase-map__node, .usecase-map__core)
  :where(h1, h2, h3, h4, h5, h6, label, summary, strong, span:not(.material-symbols-outlined), b, em, .text-white, .text-on-surface, .text-graphite, .home-card-label, .home-card-meta) {
  color: #f7f9fb !important;
  -webkit-text-fill-color: #f7f9fb !important;
}

html body main :where(.bg-graphite, .home-offer-card.bg-graphite, .beratung-service-card--dark, .page-section--dark, .hero-scene, .wissen-cta, .academy-apply, .academy-lab, .ueber-cta, .usecase-overview__visual, .usecase-map, .usecase-map__node, .usecase-map__core)
  :where(p, li, small, dd, .hero-scene__copy, .text-surface-variant, .text-on-surface-variant, .text-tertiary) {
  color: rgba(239, 241, 243, .86) !important;
  -webkit-text-fill-color: rgba(239, 241, 243, .86) !important;
}

html body main :where(.bg-graphite, .home-offer-card.bg-graphite, .beratung-service-card--dark, .page-section--dark, .hero-scene, .wissen-cta, .academy-apply, .academy-lab, .ueber-cta, .usecase-overview__visual, .usecase-map, .usecase-map__node, .usecase-map__core)
  :where(.text-swiss-red, .material-symbols-outlined, .home-card-label .material-symbols-outlined) {
  color: #ff6b66 !important;
  -webkit-text-fill-color: #ff6b66 !important;
}

html body main a.hero-scene__secondary,
html body main a.usecase-overview__secondary,
html body main a.academy-secondary,
html body main a.term-backlink,
html body main a.hero-scene__secondary:visited,
html body main a.usecase-overview__secondary:visited,
html body main a.academy-secondary:visited,
html body main a.term-backlink:visited,
html body .saa-cookie-banner__secondary,
html body .saa-cookie-banner__secondary:visited {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body main a.hero-scene__secondary *,
html body main a.usecase-overview__secondary *,
html body main a.academy-secondary *,
html body main a.term-backlink *,
html body .saa-cookie-banner__secondary * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body .saa-cookie-banner__kicker {
  color: #ff6b66 !important;
  -webkit-text-fill-color: #ff6b66 !important;
}

html body nav .saa-mobile-nav-toggle,
html body nav .saa-mobile-nav-toggle .material-symbols-outlined {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Hero full-bleed visual lock 2026-06-27.
   The new 16:9 hero assets are page backgrounds, not framed illustrations. */
body:is(.home-page, .ki-beratung-page, .ki-dienste-page, .wissen-page, .academy-page, .ueber-page, .labs-page, .partner-page, .page-shell) main > .hero-scene {
  align-items: center !important;
  background: #07111c !important;
  display: flex !important;
  isolation: isolate !important;
  margin: 0 !important;
  max-width: none !important;
  min-height: calc(100svh - var(--saa-header-h, 96px)) !important;
  overflow: hidden !important;
  padding: clamp(76px, 9vw, 128px) var(--saa-shell-x, 80px) clamp(56px, 7vw, 104px) !important;
  position: relative !important;
  width: 100% !important;
}

body:is(.home-page, .ki-beratung-page, .ki-dienste-page, .wissen-page, .academy-page, .ueber-page, .labs-page, .partner-page, .page-shell) main > .hero-scene > .hero-scene__media {
  aspect-ratio: auto !important;
  background: #07111c !important;
  border: 0 !important;
  bottom: 0 !important;
  clip-path: none !important;
  height: 100% !important;
  inset: 0 !important;
  margin: 0 !important;
  max-height: none !important;
  max-width: none !important;
  min-height: 100% !important;
  opacity: 1 !important;
  overflow: hidden !important;
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  width: 100% !important;
  z-index: 0 !important;
}

body:is(.home-page, .ki-beratung-page, .ki-dienste-page, .wissen-page, .academy-page, .ueber-page, .labs-page, .partner-page, .page-shell) main > .hero-scene > .hero-scene__media img {
  animation: none !important;
  display: block !important;
  filter: none !important;
  height: 100% !important;
  max-height: none !important;
  max-width: none !important;
  min-height: 100% !important;
  min-width: 100% !important;
  object-fit: cover !important;
  opacity: 1 !important;
  transform: none !important;
  width: 100% !important;
}

body:is(.home-page, .ki-beratung-page, .ki-dienste-page, .wissen-page, .academy-page, .ueber-page, .labs-page, .partner-page, .page-shell) main > .hero-scene > .hero-scene__media::after {
  background:
    linear-gradient(90deg, rgba(7, 17, 28, .98) 0%, rgba(7, 17, 28, .9) 34%, rgba(7, 17, 28, .42) 58%, rgba(7, 17, 28, .08) 100%),
    linear-gradient(180deg, rgba(7, 17, 28, .28) 0%, rgba(7, 17, 28, .08) 48%, rgba(7, 17, 28, .58) 100%) !important;
  content: "" !important;
  inset: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  z-index: 1 !important;
}

body:is(.home-page, .ki-beratung-page, .ki-dienste-page, .wissen-page, .academy-page, .ueber-page, .labs-page, .partner-page, .page-shell) main > .hero-scene > .hero-scene__content {
  margin: 0 !important;
  max-width: min(720px, 56vw) !important;
  padding: 0 !important;
  position: relative !important;
  width: min(720px, 56vw) !important;
  z-index: 3 !important;
}

.home-page .hero-scene__media[data-asset-slot="homepage.hero"] img { object-position: 66% center !important; }
.ki-beratung-page .hero-scene__media[data-asset-slot="beratung.hero"] img { object-position: 62% center !important; }
.ki-dienste-page .hero-scene__media[data-asset-slot="dienste.hero"] img { object-position: 58% center !important; }
.wissen-page .hero-scene__media[data-asset-slot="wissen.hero"] img { object-position: 62% center !important; }
.academy-page .hero-scene__media[data-asset-slot="academy.hero"] img { object-position: 64% center !important; }
.ueber-page .hero-scene__media[data-asset-slot="ueber.hero"] img { object-position: 70% center !important; }
.page-shell .hero-scene__media img[src*="saa-hero-technische-use-cases"] { object-position: 62% center !important; }
/* 2026-09-01: ki-loesungen fehlte als einzige Hero-Seite in dieser Liste und
   stand damit auf dem Vorgabewert 50% center. Alle uebrigen sind auf 58-70%
   eingestellt, damit das Motiv nach rechts rueckt und nicht unter dem linken
   Textblock verschwindet, sobald der Ausschnitt waagrecht beschnitten wird
   (unterhalb rund 1635px Fensterbreite). 62% = Median der Geschwister und
   derselbe Wert wie ki-beratung. Die Seite traegt keine eigene Body-Klasse,
   daher wie eine Zeile darueber ueber den Slot adressiert. */
.page-shell .hero-scene__media[data-asset-slot="loesungen.hero"] img { object-position: 62% center !important; }

.term-agent-page .term-hero {
  min-height: calc(100svh - var(--saa-header-h, 96px)) !important;
  overflow: hidden !important;
  position: relative !important;
}

.term-agent-page .term-hero__background,
.potenzialanalyse-page .pa-intake__media {
  inset: 0 !important;
  height: 100% !important;
  max-height: none !important;
  max-width: none !important;
  overflow: hidden !important;
  position: absolute !important;
  width: 100% !important;
}

.term-agent-page .term-hero__background img,
.potenzialanalyse-page .pa-intake__media img {
  display: block !important;
  height: 100% !important;
  max-height: none !important;
  max-width: none !important;
  min-height: 100% !important;
  min-width: 100% !important;
  object-fit: cover !important;
  transform: none !important;
  width: 100% !important;
}

.term-agent-page .term-hero__background img { object-position: 64% center !important; }
.potenzialanalyse-page .pa-intake__media {
  opacity: .72 !important;
}
.potenzialanalyse-page .pa-intake__media img { object-position: 62% center !important; }

@media (max-width: 1024px) {
  body:is(.home-page, .ki-beratung-page, .ki-dienste-page, .wissen-page, .academy-page, .ueber-page, .labs-page, .partner-page, .page-shell) main > .hero-scene {
    align-items: flex-end !important;
    min-height: calc(100svh - var(--saa-header-h-mobile, var(--saa-header-h, 96px))) !important;
    padding: calc(var(--saa-header-h-mobile, 88px) + 38px) var(--saa-shell-x-mobile, 20px) 54px !important;
  }

  body:is(.home-page, .ki-beratung-page, .ki-dienste-page, .wissen-page, .academy-page, .ueber-page, .labs-page, .partner-page, .page-shell) main > .hero-scene > .hero-scene__media {
    height: 100% !important;
    min-height: 100% !important;
    position: absolute !important;
  }

  body:is(.home-page, .ki-beratung-page, .ki-dienste-page, .wissen-page, .academy-page, .ueber-page, .labs-page, .partner-page, .page-shell) main > .hero-scene > .hero-scene__media::after {
    background:
      linear-gradient(180deg, rgba(7, 17, 28, .68) 0%, rgba(7, 17, 28, .44) 36%, rgba(7, 17, 28, .92) 100%),
      linear-gradient(90deg, rgba(7, 17, 28, .92) 0%, rgba(7, 17, 28, .34) 100%) !important;
  }

  body:is(.home-page, .ki-beratung-page, .ki-dienste-page, .wissen-page, .academy-page, .ueber-page, .labs-page, .partner-page, .page-shell) main > .hero-scene > .hero-scene__content {
    max-width: 100% !important;
    width: 100% !important;
  }

  .home-page .hero-scene__media[data-asset-slot="homepage.hero"] img,
  .ki-beratung-page .hero-scene__media[data-asset-slot="beratung.hero"] img,
  .ki-dienste-page .hero-scene__media[data-asset-slot="dienste.hero"] img,
  .wissen-page .hero-scene__media[data-asset-slot="wissen.hero"] img,
  .academy-page .hero-scene__media[data-asset-slot="academy.hero"] img,
  .ueber-page .hero-scene__media[data-asset-slot="ueber.hero"] img,
  .page-shell .hero-scene__media img[src*="saa-hero-technische-use-cases"],
  .term-agent-page .term-hero__background img,
  .potenzialanalyse-page .pa-intake__media img {
    object-position: 64% center !important;
  }
}

body.term-agent-page main.term-agent .term-hero .term-hero__background > img {
  object-position: 64% center !important;
  transform: none !important;
}

@media (max-width: 1024px) {
  body.term-agent-page main.term-agent .term-hero .term-hero__background > img {
    object-position: 64% center !important;
    transform: none !important;
  }
}

/* KI-Loesungen QA lock 2026-06-27: keep the approved visuals, but let them fill the card. */
.usecase-overview-page .usecase-card__media {
  align-self: stretch !important;
  aspect-ratio: 16 / 10 !important;
  box-sizing: border-box !important;
  display: block !important;
  flex: 0 0 auto !important;
  height: auto !important;
  margin: 0 0 22px !important;
  max-width: none !important;
  min-height: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

.usecase-overview-page .usecase-card__media img,
.usecase-overview-page .usecase-card__media:hover img,
.usecase-overview-page .usecase-card:hover .usecase-card__media img,
.usecase-overview-page .usecase-card:focus-within .usecase-card__media img {
  display: block !important;
  height: 100% !important;
  max-width: none !important;
  min-height: 100% !important;
  object-fit: cover !important;
  object-position: center 42% !important;
  opacity: 1 !important;
  transform: none !important;
  width: 100% !important;
}

html body.page-shell:has(.usecase-overview-page) {
  background: #f4f7fa !important;
  color: #111827 !important;
}

html body.page-shell .usecase-overview-page > .usecase-overview:not(.usecase-overview__hero) {
  background: #f4f7fa !important;
  color: #111827 !important;
}

html body.page-shell .usecase-overview-page .usecase-overview__hero {
  background:
    radial-gradient(circle at 76% 20%, rgba(217, 30, 24, .10), transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #f4f7fa 100%) !important;
  color: #111827 !important;
}

html body.page-shell .usecase-overview-page .usecase-overview__hero :where(h1, h2, h3, h4, span:not(.material-symbols-outlined), strong),
html body.page-shell .usecase-overview-page .usecase-overview__section-head :where(h1, h2, h3, h4, span:not(.material-symbols-outlined), strong),
html body.page-shell .usecase-overview-page .usecase-segment__head :where(h1, h2, h3, h4, span:not(.material-symbols-outlined), strong),
html body.page-shell .usecase-overview-page .usecase-overview__proof :where(h1, h2, h3, h4, span:not(.material-symbols-outlined), strong),
html body.page-shell .usecase-overview-page .usecase-overview__cta :where(h1, h2, h3, h4, span:not(.material-symbols-outlined), strong) {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

html body.page-shell .usecase-overview-page :where(.usecase-overview__copy, .usecase-overview__section-head p, .usecase-segment__head p, .usecase-overview__proof p, .usecase-overview__cta p) {
  color: #4b5563 !important;
  -webkit-text-fill-color: #4b5563 !important;
}

html body.page-shell .usecase-overview-page .usecase-overview__filter {
  background: #ffffff !important;
  border-color: #d7dee8 !important;
}

html body.page-shell .usecase-overview-page .usecase-card {
  background: #ffffff !important;
  border-color: #d7dee8 !important;
  color: #111827 !important;
}

html body.page-shell .usecase-overview-page .usecase-card h3,
html body.page-shell .usecase-overview-page .usecase-card__category,
html body.page-shell .usecase-overview-page .usecase-card__proof {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

html body.page-shell .usecase-overview-page .usecase-card__benefit {
  color: #4b5563 !important;
  -webkit-text-fill-color: #4b5563 !important;
}

html body.page-shell .usecase-overview-page .usecase-card__link {
  background: #ffffff !important;
  border-color: #aeb9c7 !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

html body.page-shell .usecase-overview-page .usecase-card__link:hover,
html body.page-shell .usecase-overview-page .usecase-card__link:focus-visible {
  background: #111827 !important;
  border-color: #111827 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body.page-shell .usecase-overview-page .usecase-card__link:hover *,
html body.page-shell .usecase-overview-page .usecase-card__link:focus-visible * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body.page-shell .usecase-overview-page .usecase-overview__proof {
  background: #f4f7fa !important;
}

html body.page-shell .usecase-overview-page .usecase-overview__decision-panel {
  background:
    linear-gradient(145deg, #ffffff 0%, #f7f9fb 58%, rgba(217, 30, 24, .12) 100%) !important;
  border-color: #d7dee8 !important;
  color: #111827 !important;
}

html body.page-shell .usecase-overview-page .usecase-overview__decision-panel :where(strong, b) {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

html body.page-shell .usecase-overview-page .usecase-overview__decision-panel small {
  color: #4b5563 !important;
  -webkit-text-fill-color: #4b5563 !important;
}

html body.page-shell .usecase-overview-page .usecase-overview__cta {
  background: #ffffff !important;
  border-top: 1px solid #d7dee8 !important;
}

@media (max-width: 1024px) {
  .usecase-overview-page .usecase-card__media {
    aspect-ratio: 16 / 9 !important;
  }
}

/* Hero visual clarity lock 2026-06-27: keep text readable without fogging the image. */
body:is(.home-page, .ki-beratung-page, .ki-dienste-page, .wissen-page, .academy-page, .ueber-page, .labs-page, .partner-page, .page-shell) .site-bg-paths {
  display: none !important;
}

body:is(.home-page, .ki-beratung-page, .ki-dienste-page, .wissen-page, .academy-page, .ueber-page, .labs-page, .partner-page, .page-shell) main > .hero-scene::before,
body:is(.home-page, .ki-beratung-page, .ki-dienste-page, .wissen-page, .academy-page, .ueber-page, .labs-page, .partner-page, .page-shell) main > .hero-scene::after,
body:is(.home-page, .ki-beratung-page, .ki-dienste-page, .wissen-page, .academy-page, .ueber-page, .labs-page, .partner-page, .page-shell) main > .hero-scene > .hero-scene__media::before {
  animation: none !important;
  content: none !important;
  display: none !important;
}

body:is(.home-page, .ki-beratung-page, .ki-dienste-page, .wissen-page, .academy-page, .ueber-page, .labs-page, .partner-page, .page-shell) main > .hero-scene > .hero-scene__media img,
.potenzialanalyse-page .pa-intake__media img {
  filter: none !important;
  opacity: 1 !important;
}

body:is(.home-page, .ki-beratung-page, .ki-dienste-page, .wissen-page, .academy-page, .ueber-page, .labs-page, .partner-page, .page-shell) main > .hero-scene > .hero-scene__media::after {
  background: linear-gradient(90deg, rgba(7, 17, 28, .94) 0%, rgba(7, 17, 28, .78) 30%, rgba(7, 17, 28, .28) 48%, rgba(7, 17, 28, 0) 68%) !important;
  backdrop-filter: none !important;
  content: "" !important;
  filter: none !important;
  inset: 0 !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  pointer-events: none !important;
  position: absolute !important;
  z-index: 1 !important;
}

.potenzialanalyse-page .pa-intake__media {
  opacity: 1 !important;
}

.potenzialanalyse-page .pa-intake__media::after {
  background: linear-gradient(90deg, rgba(7, 17, 28, .92) 0%, rgba(7, 17, 28, .74) 34%, rgba(7, 17, 28, .18) 56%, rgba(7, 17, 28, 0) 74%) !important;
  backdrop-filter: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}

@media (max-width: 1024px) {
  body:is(.home-page, .ki-beratung-page, .ki-dienste-page, .wissen-page, .academy-page, .ueber-page, .labs-page, .partner-page, .page-shell) main > .hero-scene > .hero-scene__media::after {
    background: linear-gradient(180deg, rgba(7, 17, 28, 0) 0%, rgba(7, 17, 28, .16) 36%, rgba(7, 17, 28, .88) 100%) !important;
  }

  .potenzialanalyse-page .pa-intake__media::after {
    background: linear-gradient(180deg, rgba(7, 17, 28, 0) 0%, rgba(7, 17, 28, .18) 38%, rgba(7, 17, 28, .9) 100%) !important;
  }
}

.hero-scene .hero-word-accent {
  color: var(--saa-red) !important;
  -webkit-text-fill-color: var(--saa-red) !important;
}

/* KI-Loesungen card typography lock 2026-06-27: cleaner rhythm below the image. */
.usecase-overview-page .usecase-card {
  padding: 22px !important;
}

.usecase-overview-page .usecase-card__media {
  margin-bottom: 24px !important;
}

.usecase-overview-page .usecase-card__body {
  display: grid !important;
  flex: 1 1 auto !important;
  grid-template-rows: auto auto auto minmax(56px, 1fr) auto auto !important;
  min-width: 0 !important;
  row-gap: 12px !important;
}

.usecase-overview-page .usecase-card__category {
  align-items: center !important;
  display: inline-flex !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  gap: 8px !important;
  letter-spacing: 0.045em !important;
  line-height: 1 !important;
  margin: 0 !important;
  text-transform: uppercase !important;
}

.usecase-overview-page .usecase-card__category .material-symbols-outlined {
  flex: 0 0 auto !important;
  font-size: 18px !important;
}

.usecase-overview-page .usecase-card h3 {
  align-self: start !important;
  font-size: clamp(21px, 1.55vw, 28px) !important;
  font-weight: 850 !important;
  line-height: 1.08 !important;
  margin: 2px 0 4px !important;
  text-wrap: balance !important;
}

.usecase-overview-page .usecase-card__benefit {
  align-self: start !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.58 !important;
  margin: 0 !important;
  max-width: 31ch !important;
}

.usecase-overview-page .usecase-card__proof {
  align-self: start !important;
  display: grid !important;
  font-size: 13px !important;
  font-weight: 760 !important;
  gap: 10px !important;
  grid-template-columns: 6px minmax(0, 1fr) !important;
  line-height: 1.48 !important;
  margin: 4px 0 0 !important;
  max-width: 30ch !important;
}

.usecase-overview-page .usecase-card__proof::before {
  align-self: start !important;
  flex: 0 0 auto !important;
  height: 5px !important;
  margin-top: 8px !important;
  width: 5px !important;
}

.usecase-overview-page .usecase-card__link {
  align-self: end !important;
  font-size: 12px !important;
  gap: 12px !important;
  justify-content: center !important;
  margin-top: 0 !important;
  min-height: 42px !important;
  padding: 0 14px !important;
}

.usecase-overview-page .usecase-card__link .material-symbols-outlined {
  font-size: 21px !important;
}

@media (max-width: 900px) {
  .usecase-overview-page .usecase-card {
    padding: 20px !important;
  }

  .usecase-overview-page .usecase-card__body {
    grid-template-rows: auto auto auto auto auto auto !important;
    row-gap: 11px !important;
  }
}

/* CTA system lock 2026-06-27: exactly two CTA color roles with one typography. */
:root {
  --saa-cta-primary-bg: #d91e18;
  --saa-cta-primary-bg-hover: #b5120f;
  --saa-cta-primary-text: #ffffff;
  --saa-cta-secondary-bg: #07111c;
  --saa-cta-secondary-bg-hover: #0b1a2a;
  --saa-cta-secondary-text: #ffffff;
  --saa-cta-font: Inter, Arial, sans-serif;
  --saa-cta-radius: 999px;
  --saa-cta-shadow: 0 18px 44px rgba(217, 30, 24, .22);
}

:where(
  .site-header__cta,
  .hero-scene__primary,
  .hero-scene__secondary,
  .btn-primary,
  .term-btn,
  .term-btn--primary,
  .term-btn--ghost,
  .usecase-overview__primary,
  .usecase-overview__secondary,
  .usecase-overview__cta-link,
  .contact-submit,
  .saa-footer__cta,
  .saa-cookie-banner__primary,
  .saa-cookie-banner__secondary,
  .saa-contact-redirect a,
  .home-system-link,
  main a.inline-flex.bg-swiss-red,
  main a.bg-primary
) {
  align-items: center !important;
  border-radius: var(--saa-cta-radius) !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  font-family: var(--saa-cta-font) !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 850 !important;
  gap: 10px !important;
  justify-content: center !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  min-height: 52px !important;
  padding: 0 26px !important;
  text-decoration: none !important;
  text-transform: none !important;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
  white-space: nowrap !important;
}

:where(
  .site-header__cta,
  .hero-scene__primary,
  .btn-primary,
  .term-btn--primary,
  .usecase-overview__primary,
  .usecase-overview__cta-link,
  .contact-submit,
  .saa-footer__cta,
  .saa-cookie-banner__primary,
  .saa-contact-redirect a,
  main a.inline-flex.bg-swiss-red,
  main a.bg-primary
) {
  background: var(--saa-cta-primary-bg) !important;
  border: 1px solid var(--saa-cta-primary-bg) !important;
  box-shadow: var(--saa-cta-shadow) !important;
  color: var(--saa-cta-primary-text) !important;
  -webkit-text-fill-color: var(--saa-cta-primary-text) !important;
}

:where(
  .site-header__cta,
  .hero-scene__primary,
  .btn-primary,
  .term-btn--primary,
  .usecase-overview__primary,
  .usecase-overview__cta-link,
  .contact-submit,
  .saa-footer__cta,
  .saa-cookie-banner__primary,
  .saa-contact-redirect a,
  main a.inline-flex.bg-swiss-red,
  main a.bg-primary
) :where(span, strong, b, em, small, .material-symbols-outlined) {
  color: var(--saa-cta-primary-text) !important;
  -webkit-text-fill-color: var(--saa-cta-primary-text) !important;
}

:where(
  .site-header__cta:hover,
  .site-header__cta:focus-visible,
  .hero-scene__primary:hover,
  .hero-scene__primary:focus-visible,
  .btn-primary:hover,
  .btn-primary:focus-visible,
  .term-btn--primary:hover,
  .term-btn--primary:focus-visible,
  .usecase-overview__primary:hover,
  .usecase-overview__primary:focus-visible,
  .usecase-overview__cta-link:hover,
  .usecase-overview__cta-link:focus-visible,
  .contact-submit:hover,
  .contact-submit:focus-visible,
  .saa-footer__cta:hover,
  .saa-footer__cta:focus-visible,
  .saa-cookie-banner__primary:hover,
  .saa-cookie-banner__primary:focus-visible,
  .saa-contact-redirect a:hover,
  .saa-contact-redirect a:focus-visible,
  main a.inline-flex.bg-swiss-red:hover,
  main a.inline-flex.bg-swiss-red:focus-visible,
  main a.bg-primary:hover,
  main a.bg-primary:focus-visible
) {
  background: var(--saa-cta-primary-bg-hover) !important;
  border-color: var(--saa-cta-primary-bg-hover) !important;
  box-shadow: 0 22px 52px rgba(217, 30, 24, .28) !important;
  transform: translateY(-1px) !important;
}

:where(
  .hero-scene__secondary,
  .term-btn--ghost,
  .usecase-overview__secondary,
  .home-system-link,
  .saa-cookie-banner__secondary
) {
  background: var(--saa-cta-secondary-bg) !important;
  border: 1px solid rgba(255, 255, 255, .28) !important;
  box-shadow: 0 14px 34px rgba(7, 17, 28, .22) !important;
  color: var(--saa-cta-secondary-text) !important;
  -webkit-text-fill-color: var(--saa-cta-secondary-text) !important;
}

:where(
  .hero-scene__secondary,
  .term-btn--ghost,
  .usecase-overview__secondary,
  .home-system-link,
  .saa-cookie-banner__secondary
) :where(span, strong, b, em, small, .material-symbols-outlined) {
  color: var(--saa-cta-secondary-text) !important;
  -webkit-text-fill-color: var(--saa-cta-secondary-text) !important;
}

:where(
  .hero-scene__secondary:hover,
  .hero-scene__secondary:focus-visible,
  .term-btn--ghost:hover,
  .term-btn--ghost:focus-visible,
  .usecase-overview__secondary:hover,
  .usecase-overview__secondary:focus-visible,
  .home-system-link:hover,
  .home-system-link:focus-visible,
  .saa-cookie-banner__secondary:hover,
  .saa-cookie-banner__secondary:focus-visible
) {
  background: var(--saa-cta-secondary-bg-hover) !important;
  border-color: rgba(255, 255, 255, .48) !important;
  box-shadow: 0 18px 42px rgba(7, 17, 28, .28) !important;
  transform: translateY(-1px) !important;
}

.site-header__cta {
  min-height: 44px !important;
  padding: 0 18px !important;
}

.saa-footer__cta {
  min-height: 46px !important;
  padding: 0 18px !important;
}

.contact-submit {
  width: 100% !important;
}

@media (max-width: 680px) {
  .site-header__cta {
    display: none !important;
  }

  :where(
    .hero-scene__primary,
    .hero-scene__secondary,
    .btn-primary,
    .term-btn,
    .usecase-overview__primary,
    .usecase-overview__secondary,
    .usecase-overview__cta-link,
    .contact-submit,
    .saa-contact-redirect a,
    .home-system-link,
    main a.inline-flex.bg-swiss-red,
    main a.bg-primary
  ) {
    min-height: 50px !important;
    padding: 0 18px !important;
    width: 100% !important;
    white-space: normal !important;
  }
}

/* CTA contrast lock: primary action placed on red surfaces uses the dark CTA color role. */
:where(
  .beratung-final-panel .hero-scene__primary,
  .dienste-final-panel .hero-scene__primary,
  .pa-section--red .hero-scene__primary,
  .bg-swiss-red .hero-scene__primary,
  .bg-swiss-red .btn-primary
) {
  background: var(--saa-cta-secondary-bg) !important;
  border: 1px solid rgba(255, 255, 255, .28) !important;
  box-shadow: 0 14px 34px rgba(7, 17, 28, .22) !important;
  color: var(--saa-cta-secondary-text) !important;
  -webkit-text-fill-color: var(--saa-cta-secondary-text) !important;
}

:where(
  .beratung-final-panel .hero-scene__primary,
  .dienste-final-panel .hero-scene__primary,
  .pa-section--red .hero-scene__primary,
  .bg-swiss-red .hero-scene__primary,
  .bg-swiss-red .btn-primary
) :where(span, strong, b, em, small, .material-symbols-outlined) {
  color: var(--saa-cta-secondary-text) !important;
  -webkit-text-fill-color: var(--saa-cta-secondary-text) !important;
}

:where(
  .beratung-final-panel .hero-scene__primary:hover,
  .beratung-final-panel .hero-scene__primary:focus-visible,
  .dienste-final-panel .hero-scene__primary:hover,
  .dienste-final-panel .hero-scene__primary:focus-visible,
  .pa-section--red .hero-scene__primary:hover,
  .pa-section--red .hero-scene__primary:focus-visible,
  .bg-swiss-red .hero-scene__primary:hover,
  .bg-swiss-red .hero-scene__primary:focus-visible,
  .bg-swiss-red .btn-primary:hover,
  .bg-swiss-red .btn-primary:focus-visible
) {
  background: var(--saa-cta-secondary-bg-hover) !important;
  border-color: rgba(255, 255, 255, .48) !important;
}

body.page-shell main .hero-scene .hero-scene__title .hero-word-accent,
body.page-shell main .hero-scene .hero-scene__copy .hero-word-accent {
  color: var(--saa-red) !important;
  -webkit-text-fill-color: var(--saa-red) !important;
}

.home-page .home-agent-card {
  color: inherit !important;
  text-decoration: none !important;
}

.home-page .home-agent-card:focus-visible {
  outline: 2px solid rgba(217, 30, 24, .85) !important;
  outline-offset: 4px !important;
}

.home-page .home-agent-card__badge--glow {
  background: rgba(217, 30, 24, .22) !important;
  border-color: rgba(255, 45, 38, .72) !important;
  box-shadow: 0 0 0 1px rgba(217, 30, 24, .28), 0 0 28px rgba(217, 30, 24, .42) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.home-page .home-agent-card:hover .home-agent-card__badge--glow,
.home-page .home-agent-card:focus-visible .home-agent-card__badge--glow {
  background: var(--saa-red) !important;
  border-color: rgba(255, 255, 255, .46) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .2), 0 0 36px rgba(217, 30, 24, .58) !important;
}

.home-page main :where(p, li, dd, .faq-content) {
  text-align: left !important;
  text-align-last: auto !important;
  text-wrap: pretty;
  word-spacing: normal !important;
}

.home-page main :where(.text-center, .lg\:text-left) :where(p, li, dd) {
  text-align: left !important;
  text-align-last: auto !important;
  word-spacing: normal !important;
}

@media (min-width: 1024px) {
  .home-page main .lg\:text-left :where(p, li, dd) {
    text-align-last: auto;
  }
}

.home-page .space-y-6 > .border .font-label-md.text-label-md,
main :where(.faq-section, .term-faq, .pa-faq-list, .beratung-faq-grid, .wissen-questions) :where(h3, h4, summary, .font-label-md.text-label-md) {
  font-size: clamp(15px, 1.05vw, 17px) !important;
  letter-spacing: .01em !important;
  line-height: 1.36 !important;
}

@media (max-width: 680px) {
  .home-page .space-y-6 > .border .font-label-md.text-label-md,
  main :where(.faq-section, .term-faq, .pa-faq-list, .beratung-faq-grid, .wissen-questions) :where(h3, h4, summary, .font-label-md.text-label-md) {
    font-size: 16px !important;
    line-height: 1.32 !important;
  }
}

.home-page .home-faq-section {
  background: #ffffff !important;
}

.home-page .home-faq-shell {
  box-sizing: border-box !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 1280px !important;
  width: min(100%, 1280px) !important;
}

.home-page .home-faq-head {
  margin-bottom: clamp(48px, 5vw, 72px) !important;
  text-align: left !important;
}

.home-page .home-faq-head h2 {
  color: #061326 !important;
  font-size: clamp(42px, 4vw, 64px) !important;
  line-height: 1.02 !important;
  margin: 0 !important;
  text-align: left !important;
  -webkit-text-fill-color: #061326 !important;
}

.home-page .home-faq-list {
  display: grid !important;
  gap: 12px !important;
}

.home-page .home-faq-item {
  background: #ffffff !important;
  border: 1px solid rgba(7, 17, 28, .08) !important;
  box-shadow: none !important;
  padding: clamp(18px, 1.6vw, 24px) clamp(20px, 1.8vw, 26px) !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}

.home-page .home-faq-item:hover {
  border-color: rgba(217, 30, 24, .4) !important;
}

.home-page .home-faq-item.is-open {
  border-color: rgba(217, 30, 24, .55) !important;
}

.home-page .home-faq-item > .flex {
  cursor: pointer !important;
}

.home-page .home-faq-item > .flex {
  align-items: center !important;
  display: grid !important;
  gap: 20px !important;
  grid-template-columns: minmax(0, 1fr) 28px !important;
}

.home-page .home-faq-item h4 {
  color: #061326 !important;
  margin: 0 !important;
  max-width: 72ch !important;
  text-align: left !important;
  -webkit-text-fill-color: #061326 !important;
}

.home-page .home-faq-item .material-symbols-outlined {
  color: #d91e18 !important;
  justify-self: end !important;
  line-height: 1 !important;
  -webkit-text-fill-color: #d91e18 !important;
  transition: transform .3s ease !important;
}

.home-page .home-faq-item.is-open .material-symbols-outlined {
  transform: rotate(180deg) !important;
}

.home-page .home-faq-item .faq-content {
  color: rgba(7, 17, 28, .72) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  text-align: left !important;
  -webkit-text-fill-color: rgba(7, 17, 28, .72) !important;
}

.home-page .home-faq-item .faq-content:not(.hidden) {
  animation: faqReveal .26s ease both;
}

@keyframes faqReveal {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 680px) {
  .home-page .home-faq-section {
    padding-block: 88px !important;
  }

  .home-page .home-faq-head h2 {
    font-size: clamp(36px, 11vw, 46px) !important;
  }

  .home-page .home-faq-item {
    padding: 22px !important;
  }
}

/* Wissen hero crop correction: keep people visible in wide hero ratios. */
.wissen-page .hero-scene__media[data-asset-slot="wissen.hero"] img {
  object-position: 58% top !important;
}

@media (max-width: 1024px) {
  .wissen-page .hero-scene__media[data-asset-slot="wissen.hero"] img {
    object-position: 64% top !important;
  }
}

/* Academy text layout correction: avoid stretched single words and cramped hero spans. */
body.academy-page main :where(h1, h2, h3, p, li, dd, span, strong, small) {
  text-align: left !important;
  text-align-last: auto !important;
  word-spacing: normal !important;
}

body.academy-page .hero-scene__title .hero-title-line {
  display: block !important;
  width: fit-content !important;
  max-width: 100% !important;
}

body.academy-page main :where(.academy-intro-mark span, .academy-pathway-node > span, .academy-apply-steps span, .academy-apply-steps strong, .academy-apply-steps small) {
  display: inline-block !important;
  width: auto !important;
  max-width: 100% !important;
}

body.academy-page .academy-apply-steps li,
body.academy-page .academy-pathway-node {
  text-align: left !important;
}

@media (max-width: 680px) {
  body.academy-page .hero-scene__title .hero-title-line {
    width: fit-content !important;
  }
}

/* William + Tereza audit pass: first layout corrections for KI-Dienste and KI-Beratung. */
body.ki-dienste-page .dienste-spine-grid {
  align-items: start !important;
  gap: clamp(48px, 5vw, 86px) !important;
  grid-template-columns: minmax(300px, .58fr) minmax(0, 1.42fr) !important;
}

body.ki-dienste-page .dienste-lanes-copy {
  align-self: start;
  padding-top: 8px;
  position: sticky;
  top: 128px;
}

body.ki-dienste-page .dienste-spine {
  padding-block: 0 !important;
}

body.ki-dienste-page .dienste-spine-item {
  gap: 20px 28px !important;
  grid-template-columns: 48px minmax(280px, 1fr) !important;
  min-height: 0 !important;
  padding: clamp(26px, 3vw, 38px) 0 !important;
}

body.ki-dienste-page .dienste-spine-item__number {
  padding-top: .3em;
}

body.ki-dienste-page .dienste-spine-item h3 {
  max-width: 18ch !important;
}

body.ki-dienste-page .dienste-spine-item p {
  max-width: 48ch !important;
}

body.ki-dienste-page .dienste-spine-item ul {
  grid-column: 2 !important;
  margin-top: 4px !important;
  max-width: 100% !important;
}

body.ki-dienste-page .dienste-spine-item li {
  min-height: 0 !important;
  padding: 9px 11px !important;
}

body.ki-beratung-page .beratung-board-shell {
  align-items: center !important;
  gap: clamp(48px, 5vw, 84px) !important;
  grid-template-columns: minmax(320px, .62fr) minmax(0, 1.38fr) !important;
}

body.ki-beratung-page .beratung-board {
  display: grid !important;
  gap: clamp(18px, 2vw, 26px) !important;
}

body.ki-beratung-page .beratung-board__stack {
  display: grid !important;
  gap: clamp(18px, 2vw, 24px) !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  transform: none !important;
  width: 100% !important;
}

body.ki-beratung-page .beratung-board-card {
  display: grid !important;
  grid-template-rows: auto 1fr auto;
  min-height: 210px !important;
  padding: clamp(26px, 2.6vw, 34px) !important;
  transform: none !important;
}

body.ki-beratung-page .beratung-board-card .material-symbols-outlined {
  margin-bottom: clamp(22px, 2.4vw, 30px) !important;
}

body.ki-beratung-page .beratung-board-card small {
  max-width: 32ch !important;
}

body.ki-beratung-page .beratung-board-card em {
  justify-self: end;
  margin-top: 24px;
  position: static !important;
}

body.ki-beratung-page .beratung-board__result {
  align-items: start !important;
  display: grid !important;
  gap: 14px 22px !important;
  grid-template-columns: 44px minmax(0, .78fr) minmax(220px, .42fr) !important;
  margin: 0 !important;
  max-width: none !important;
  padding: clamp(24px, 2.5vw, 32px) !important;
}

body.ki-beratung-page .beratung-board__result .material-symbols-outlined {
  grid-row: span 2;
  margin-top: 2px;
}

body.ki-beratung-page .beratung-board__result strong {
  margin: 0 0 8px !important;
}

body.ki-beratung-page .beratung-board__result p {
  margin: 0 !important;
  max-width: 52ch;
}

body.ki-beratung-page .beratung-board__result ul {
  align-self: center;
  display: grid;
  gap: 8px;
  margin: 0 !important;
  padding-left: 18px !important;
}

@media (max-width: 1100px) {
  body.ki-dienste-page .dienste-spine-grid,
  body.ki-beratung-page .beratung-board-shell {
    grid-template-columns: 1fr !important;
  }

  body.ki-dienste-page .dienste-lanes-copy {
    max-width: 760px;
    position: static;
  }
}

@media (max-width: 768px) {
  body.ki-dienste-page .dienste-spine-item,
  body.ki-beratung-page .beratung-board__result,
  body.ki-beratung-page .beratung-board__stack {
    grid-template-columns: 1fr !important;
  }

  body.ki-dienste-page .dienste-spine-item ul {
    grid-column: auto !important;
  }

  body.ki-beratung-page .beratung-board-card {
    min-height: 0 !important;
  }

  body.ki-beratung-page .beratung-board__result .material-symbols-outlined {
    grid-row: auto;
  }
}

/* Screenshot audit fixes 2026-06-27: Wissen dark sections, KI-Beratung trust cards. */
body.wissen-page main :where(.wissen-feature, .wissen-regulation) {
  background:
    linear-gradient(112deg, rgba(7, 29, 42, .98), rgba(7, 29, 42, .96) 56%, rgba(32, 18, 31, .98)),
    radial-gradient(circle at 82% 16%, rgba(255, 45, 40, .22), transparent 34%) !important;
  color: #f7f9fb !important;
  -webkit-text-fill-color: #f7f9fb !important;
}

body.wissen-page main :where(.wissen-feature, .wissen-regulation)
  :where(h1, h2, h3, h4, h5, h6, strong, span:not(.material-symbols-outlined), time) {
  color: #f7f9fb !important;
  -webkit-text-fill-color: #f7f9fb !important;
}

body.wissen-page main :where(.wissen-feature, .wissen-regulation)
  :where(p, li, dd, small) {
  color: rgba(239, 241, 243, .86) !important;
  -webkit-text-fill-color: rgba(239, 241, 243, .86) !important;
}

body.wissen-page main :where(.wissen-feature, .wissen-regulation)
  :where(.text-swiss-red, .material-symbols-outlined, .wissen-feature-line > span, .wissen-steps span) {
  color: #ff4a45 !important;
  -webkit-text-fill-color: #ff4a45 !important;
}

body.ki-beratung-page .beratung-trust-cards {
  gap: clamp(18px, 2vw, 26px) !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body.ki-beratung-page .beratung-trust-cards article {
  box-sizing: border-box !important;
  min-width: 0 !important;
  overflow: visible !important;
  padding: clamp(26px, 2.6vw, 34px) !important;
}

body.ki-beratung-page .beratung-trust-cards h3 {
  font-size: clamp(19px, 1.55vw, 24px) !important;
  hyphens: auto;
  line-height: 1.12 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere;
}

body.ki-beratung-page .beratung-trust-cards p {
  max-width: 100% !important;
}

@media (max-width: 1024px) {
  body.ki-beratung-page .beratung-trust-cards {
    grid-template-columns: 1fr !important;
  }
}

/* Homepage process repair: replace narrow justified columns with a readable decision path. */
body.home-page .home-process-section {
  background:
    linear-gradient(112deg, rgba(7, 17, 28, .98), rgba(7, 29, 42, .96) 58%, rgba(28, 19, 31, .98)),
    radial-gradient(circle at 78% 12%, rgba(217, 30, 24, .18), transparent 34%) !important;
  color: #f7f9fb !important;
}

body.home-page .home-process-section h2 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

body.home-page .home-process-section .absolute.bg-outline-variant {
  display: none !important;
}

body.home-page .home-process-grid {
  display: grid !important;
  gap: clamp(16px, 1.6vw, 22px) !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body.home-page .home-process-step {
  align-content: start !important;
  background: rgba(255, 255, 255, .045) !important;
  border: 1px solid rgba(239, 241, 243, .16) !important;
  border-top: 1px solid rgba(239, 241, 243, .16) !important;
  box-shadow: none !important;
  display: grid !important;
  gap: 18px !important;
  grid-column: auto !important;
  min-height: 252px !important;
  padding: clamp(22px, 2vw, 28px) !important;
  position: relative !important;
  text-align: left !important;
}

body.home-page .home-process-step::before {
  background: rgba(239, 241, 243, .24) !important;
  content: "" !important;
  height: 1px !important;
  left: 66px !important;
  position: absolute !important;
  right: 24px !important;
  top: 38px !important;
}

body.home-page .home-process-step:first-child {
  background: rgba(255, 255, 255, .045) !important;
  border-color: rgba(239, 241, 243, .16) !important;
  border-top-color: rgba(239, 241, 243, .16) !important;
}

body.home-page .home-process-step > div {
  align-items: center !important;
  background: rgba(239, 241, 243, .08) !important;
  border: 1px solid rgba(239, 241, 243, .2) !important;
  color: #ffffff !important;
  display: inline-flex !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  height: 34px !important;
  justify-content: center !important;
  margin: 0 !important;
  position: relative !important;
  width: 34px !important;
  z-index: 1 !important;
}

body.home-page .home-process-step:first-child > div {
  background: #d91e18 !important;
  border-color: #d91e18 !important;
}

body.home-page .home-process-step h3 {
  color: #ffffff !important;
  font-size: clamp(14px, .9vw, 16px) !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  line-height: 1.22 !important;
  margin: 0 !important;
  max-width: 18ch !important;
  text-align: left !important;
  -webkit-text-fill-color: #ffffff !important;
}

body.home-page .home-process-step p {
  color: rgba(239, 241, 243, .82) !important;
  font-size: clamp(15px, 1vw, 17px) !important;
  hyphens: none !important;
  line-height: 1.62 !important;
  margin: 0 !important;
  max-width: 32ch !important;
  text-align: left !important;
  text-align-last: auto !important;
  text-wrap: pretty !important;
  -webkit-text-fill-color: rgba(239, 241, 243, .82) !important;
  word-spacing: normal !important;
}

@media (max-width: 1180px) {
  body.home-page .home-process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.home-page .home-process-step {
    min-height: 220px !important;
  }
}

@media (max-width: 680px) {
  body.home-page .home-process-section {
    padding-block: 88px !important;
  }

  body.home-page .home-process-grid {
    grid-template-columns: 1fr !important;
  }

  body.home-page .home-process-step {
    min-height: 0 !important;
  }
}

/* Canonical header/footer brand pass: consistent logo and compact theme switch on every page. */
body .site-header,
body > nav.site-header.fixed,
body > nav.fixed:not(.site-header) {
  align-items: center !important;
  background: #ffffff !important;
  border-bottom: 1px solid rgba(7, 17, 28, .12) !important;
  box-shadow: 0 10px 28px rgba(7, 17, 28, .06) !important;
  color: #07111c !important;
  display: flex !important;
  height: 84px !important;
  min-height: 84px !important;
}

body .site-header__inner {
  align-items: center !important;
  box-sizing: border-box !important;
  display: grid !important;
  gap: clamp(18px, 2vw, 32px) !important;
  grid-template-columns: 220px minmax(0, 1fr) auto !important;
  height: 84px !important;
  margin-inline: auto !important;
  min-height: 84px !important;
  /* 2026-08-04 (Block 4): Der Kopfzeileninhalt folgt dem Layout-Vertrag,
     damit Logo und Menue auf derselben Kante sitzen wie der Seiteninhalt.
     Bewusst als Polster und Maximalbreite formuliert statt als Breite —
     so greifen die Mobile-Regeln in mobile-refine.css (10px ab 640px)
     weiterhin, und Kriterium 7 (Mobile unveraendert) bleibt erfuellt.
     Geometrie identisch zu .saig-shell: min(1280px, 100% - 2 * gutter). */
  max-width: calc(var(--saig-shell) + var(--saig-gutter) * 2) !important;
  padding-left: var(--saig-gutter) !important;
  padding-right: var(--saig-gutter) !important;
  width: 100% !important;
}

body .site-logo,
body nav a.site-logo,
body nav a[aria-label="Swiss AI Agency Startseite"],
body > nav.fixed:not(.site-header) > a.block[aria-label="Swiss AI Agency Startseite"],
body > nav.fixed:not(.site-header) > a[aria-label="Swiss AI Agency Startseite"] {
  align-items: center !important;
  align-self: center !important;
  display: inline-flex !important;
  height: 41px !important;
  justify-content: flex-start !important;
  justify-self: start !important;
  margin: 0 !important;
  max-width: 164px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  width: 164px !important;
}

body .site-logo__img,
body nav a.site-logo img,
body nav a[aria-label="Swiss AI Agency Startseite"] img,
body > nav.fixed:not(.site-header) > a.block[aria-label="Swiss AI Agency Startseite"] img,
body > nav.fixed:not(.site-header) > a[aria-label="Swiss AI Agency Startseite"] img {
  display: block !important;
  filter: none !important;
  height: 41px !important;
  max-height: 41px !important;
  max-width: 164px !important;
  min-height: 0 !important;
  object-fit: contain !important;
  object-position: left center !important;
  opacity: 1 !important;
  transform: none !important;
  width: 164px !important;
}

body .site-logo:hover .site-logo__img,
body nav a[aria-label="Swiss AI Agency Startseite"]:hover img {
  transform: none !important;
}

body .site-nav-primary,
body > nav.fixed:not(.site-header) > div.hidden {
  align-items: center !important;
  display: flex !important;
  gap: clamp(14px, 1.55vw, 26px) !important;
  justify-content: center !important;
  min-width: 0 !important;
  width: 100% !important;
}

body .site-nav-primary a,
body > nav.fixed:not(.site-header) > div.hidden a {
  color: rgba(7, 17, 28, .72) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  padding: 10px 0 12px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

body .site-nav-primary a:hover,
body .site-nav-primary a.is-active,
body > nav.fixed:not(.site-header) > div.hidden a:hover,
body > nav.fixed:not(.site-header) > div.hidden a.text-primary,
body > nav.fixed:not(.site-header) > div.hidden a.border-primary {
  color: #d91e18 !important;
}

body .site-header__utility,
body.page-shell > .site-header .site-header__utility {
  align-items: center !important;
  align-self: center !important;
  display: flex !important;
  justify-content: flex-end !important;
  justify-self: end !important;
  margin: 0 !important;
  min-width: 0 !important;
  position: static !important;
}

body .site-header__actions {
  align-items: center !important;
  display: flex !important;
  gap: 12px !important;
  justify-content: flex-end !important;
}

body .theme-toggle,
body .site-header .theme-toggle,
body > nav.fixed:not(.site-header) .theme-toggle {
  align-items: center !important;
  appearance: none !important;
  background: transparent !important;
  border: 1px solid rgba(7, 17, 28, .16) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  color: #07111c !important;
  cursor: pointer !important;
  display: inline-flex !important;
  flex: 0 0 34px !important;
  height: 34px !important;
  justify-content: center !important;
  min-height: 34px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: relative !important;
  width: 34px !important;
}

body .theme-toggle__track,
body .site-header .theme-toggle__track,
body > nav.fixed:not(.site-header) .theme-toggle__track,
body .theme-toggle__track::after {
  display: none !important;
}

body .theme-toggle__icon,
body .site-header .theme-toggle__icon,
body > nav.fixed:not(.site-header) .theme-toggle__icon {
  color: currentColor !important;
  font-size: 19px !important;
  height: 19px !important;
  line-height: 1 !important;
  opacity: 1 !important;
  position: absolute !important;
  width: 19px !important;
}

body .theme-toggle__icon--light {
  display: none !important;
}

body .theme-toggle__icon--dark {
  display: block !important;
}

body .site-header__cta {
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 18px !important;
}

body .saa-footer .footer-logo {
  /* content: url(.../ai-agency-logo-main-white.png) am 31.08. entfernt. Die Datei existierte nie im Repo, und die Regel feuerte auf keiner Seite: alle 29 Seiten tragen .v2-logo-fix (~Z. 23934), das content wieder auf normal setzt. Das Footer-Logo kommt aus dem SVG im Markup. */
  display: block !important;
  filter: none !important;
  height: auto !important;
  max-height: none !important;
  max-width: 220px !important;
  object-fit: contain !important;
  object-position: left center !important;
  opacity: 1 !important;
  width: 220px !important;
}

@media (max-width: 1180px) {
  body .site-header__inner {
    grid-template-columns: 188px minmax(0, 1fr) auto !important;
    /* 2026-08-04 (Block 4): festes 22px-Polster entfernt — der Rand kommt
       jetzt stufenlos aus --saig-gutter, damit die Kopfzeile an derselben
       Kante liegt wie der Seiteninhalt. */
  }

  body .site-logo,
  body nav a.site-logo,
  body nav a[aria-label="Swiss AI Agency Startseite"] {
    height: 46px !important;
    width: 188px !important;
  }

  body .site-logo__img,
  body nav a.site-logo img,
  body nav a[aria-label="Swiss AI Agency Startseite"] img {
    height: 46px !important;
    max-height: 46px !important;
    max-width: 188px !important;
    width: 188px !important;
  }
}

/* 2026-08-04 (Block 6b): Umschaltpunkt der Kopfzeile von 980px auf die
   lg-Stufe (1024px) gezogen. Zwischen 980 und 1200px wurde die Navigation
   von 912 auf 533px zusammengedrueckt, der Abstand zwischen den acht Links
   fiel auf 8px. Der Burger existierte, griff nur zu spaet.

   2026-08-31: auf 1279px angehoben. Die Links selbst wurden nie kleiner
   (font-size blieb 12px) - ".site-nav-primary a" hatte kein
   flex-shrink:0, darum schrumpfte nur die LAYOUT-BOX jedes Links unter
   seine Textbreite, waehrend der Text selbst (white-space:nowrap,
   overflow:visible) unveraendert gross weiterrenderte und sichtbar in
   den Nachbarlink lief - false Boxen lagen mit 12px Abstand nebeneinander,
   der Text selbst beruehrte sich. Mit Labs+Partner (zehn statt acht
   Links) passierte das schon ab ca. 1279px statt vorher bei 1024px.
   flex-shrink:0 auf den Links (siehe body .site-nav-primary a) verhindert
   das Schrumpfen jetzt grundsaetzlich; dieser Umschaltpunkt ist die dazu
   gemessene Mindestbreite, ab der alle zehn Links plus Logo und CTA ohne
   Ueberlappung nebeneinander passen.

   2026-09-16: auf 1359px angehoben — elfter Reiter «Pionierpartner».
   Gemessen: bei 1320px liefen Navigation und CTA 3px ineinander, bei
   1340px blieben 7px, ab 1360px die üblichen 17-25px. Wert steht an drei
   Stellen (hier, Burger-Regel ~Z. 21171, js/main.js matchMedia). */
@media (max-width: 1359px) {
  body .site-header__inner {
    display: flex !important;
    gap: 12px !important;
  }

  body .site-logo,
  body nav a.site-logo,
  body nav a[aria-label="Swiss AI Agency Startseite"] {
    margin-right: auto !important;
  }

  /* id-hack noetig: eine spaetere, media-lose Regel (~Z. 20091,
     "body .site-nav-primary { display: flex !important; ... }") schlaegt
     sonst diese Regel unabhaengig vom Umschaltpunkt - das war der
     eigentliche Grund, warum die Navigation bei 1024px nie wirklich
     verschwand (der Menue-Knopf wurde von main.js zwar erzeugt, lag aber
     zusaetzlich neben der weiterhin sichtbaren, zusammengedrueckten
     Navigation). */
  html body .site-nav-primary:not(#____never____) {
    display: none !important;
  }

  /* 2026-08-31: Menue-Knopf muss ueberall sichtbar sein, wo die Navigation
     oben versteckt wird. Die einzige bestehende Sichtbar-Regel dafuer lag
     bei @media(max-width:900px) (Zeile ~4089, ohne !important) - zwischen
     901-1279px war der Knopf dadurch weiterhin display:none (Basiswert,
     Zeile ~475), obwohl die Navigation hier schon fehlt: Kopfzeile ganz
     ohne Navigationsmoeglichkeit. */
  body .saa-mobile-nav-toggle {
    display: inline-flex !important;
  }

  /* 2026-08-31: Aufklapp-Panel fehlte in dieser Lueckenbreite komplett -
     die einzige bestehende "display:flex bei is-mobile-nav-open"-Regel lag
     bei @media(max-width:900px) (Zeile ~4110); zwischen 901-1279px oeffnete
     der jetzt sichtbare Menue-Knopf rein gar nichts, weil .site-nav-primary
     (== [data-mobile-nav-panel], via main.js) weiterhin display:none blieb.
     id-hack noetig, um dieselbe unconditional display:flex-Regel (Z. ~20091)
     UND die eigene Versteck-Regel oben in diesem Block zu schlagen. */
  html body nav.is-mobile-nav-open .site-nav-primary:not(#____never____) {
    align-items: stretch !important;
    background: var(--saa-surface) !important;
    border-bottom: 1px solid var(--saa-border) !important;
    border-top: 1px solid var(--saa-border) !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.14) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    justify-content: flex-start !important;
    left: 0 !important;
    padding: 14px 20px 18px !important;
    position: absolute !important;
    right: 0 !important;
    top: 100% !important;
    width: 100% !important;
    z-index: 80 !important;
  }

  html body nav.is-mobile-nav-open .site-nav-primary a:not(#____never____) {
    border-bottom: 1px solid var(--saa-border) !important;
    display: block !important;
    line-height: 20px !important;
    padding: 14px 0 !important;
    text-align: left !important;
    white-space: normal !important;
  }

  html body nav.is-mobile-nav-open .site-nav-primary a:last-child {
    border-bottom: 0 !important;
  }

  /* Der rote Unterstrich-Indikator (::after, Zeile ~7286) ist fuer die
     horizontale Desktop-Navigation gebaut (zentriert unter dem Link) und
     wirkt im gestapelten Panel wie ein losgeloester Strich - hier aus. */
  html body nav.is-mobile-nav-open .site-nav-primary a::after {
    display: none !important;
  }
}

@media (max-width: 680px) {
  body .site-header,
  body > nav.site-header.fixed,
  body > nav.fixed:not(.site-header),
  body .site-header__inner {
    height: 76px !important;
    min-height: 76px !important;
  }

  body .site-logo,
  body nav a.site-logo,
  body nav a[aria-label="Swiss AI Agency Startseite"] {
    height: 40px !important;
    width: 164px !important;
  }

  body .site-logo__img,
  body nav a.site-logo img,
  body nav a[aria-label="Swiss AI Agency Startseite"] img {
    height: 40px !important;
    max-height: 40px !important;
    max-width: 164px !important;
    width: 164px !important;
  }

  body .saa-footer .footer-logo {
    width: 190px !important;
  }
}

/* Header offset lock: page content starts exactly under the fixed header, with no white gap. */
:root {
  --saa-header-h: 84px;
  --saa-header-h-mobile: 76px;
}

body .site-main,
body > nav.fixed:not(.site-header) + main,
body > nav.fixed:not(.site-header) + .hero-scene,
body > nav.fixed:not(.site-header) + .hero-scene--subpage,
body > nav.fixed:not(.site-header) + .subpage-hero-scene {
  margin-top: var(--saa-header-h) !important;
  padding-top: 0 !important;
}

body .site-main > :first-child,
body main.site-main > :first-child,
body > nav.fixed:not(.site-header) + main > :first-child {
  margin-top: 0 !important;
}

body main > .hero-scene,
body .site-main > .hero-scene,
body .site-main > .hero-scene--subpage {
  margin-top: 0 !important;
}

body .hero-scene__media {
  top: 0 !important;
}

@media (max-width: 680px) {
  body .site-main,
  body > nav.fixed:not(.site-header) + main,
  body > nav.fixed:not(.site-header) + .hero-scene,
  body > nav.fixed:not(.site-header) + .hero-scene--subpage,
  body > nav.fixed:not(.site-header) + .subpage-hero-scene {
    margin-top: var(--saa-header-h-mobile) !important;
    padding-top: 0 !important;
  }
}

 header, footer and controls live here. */
:root {
  --saa-bg: #f6f8fb;
  --saa-surface: #ffffff;
  --saa-surface-soft: #eef3f8;
  --saa-surface-strong: #07111c;
  --saa-text: #07111c;
  --saa-text-muted: #445160;
  --saa-border: rgba(7, 17, 28, .14);
  --saa-red: #d91e18;
  --saa-red-strong: #b10006;
  --saa-header-h: 84px;
  --saa-header-h-mobile: 76px;
  color-scheme: light;
}

html body {
  background: var(--saa-bg) !important;
  color: var(--saa-text) !important;
}

body .site-header,
body > nav.site-header.fixed {
  align-items: center !important;
  background: var(--saa-surface) !important;
  border-bottom: 1px solid var(--saa-border) !important;
  box-shadow: 0 10px 28px rgba(7, 17, 28, .06) !important;
  color: var(--saa-text) !important;
  display: flex !important;
  height: var(--saa-header-h) !important;
  min-height: var(--saa-header-h) !important;
  overflow: visible !important;
}

body .site-header__inner {
  align-items: center !important;
  box-sizing: border-box !important;
  display: grid !important;
  gap: clamp(18px, 2vw, 32px) !important;
  grid-template-columns: 220px minmax(0, 1fr) auto !important;
  height: var(--saa-header-h) !important;
  margin-inline: auto !important;
  min-height: var(--saa-header-h) !important;
  /* 2026-08-04 (Block 4): Der Kopfzeileninhalt folgt dem Layout-Vertrag,
     damit Logo und Menue auf derselben Kante sitzen wie der Seiteninhalt.
     Bewusst als Polster und Maximalbreite formuliert statt als Breite —
     so greifen die Mobile-Regeln in mobile-refine.css (10px ab 640px)
     weiterhin, und Kriterium 7 (Mobile unveraendert) bleibt erfuellt.
     Geometrie identisch zu .saig-shell: min(1280px, 100% - 2 * gutter). */
  max-width: calc(var(--saig-shell) + var(--saig-gutter) * 2) !important;
  padding-left: var(--saig-gutter) !important;
  padding-right: var(--saig-gutter) !important;
  width: 100% !important;
}

body .site-logo,
body nav a.site-logo {
  align-items: center !important;
  align-self: center !important;
  display: inline-flex !important;
  height: 41px !important;
  justify-content: flex-start !important;
  justify-self: start !important;
  margin: 0 !important;
  max-width: 164px !important;
  overflow: hidden !important;
  padding: 0 !important;
  width: 164px !important;
}

body .site-logo__img,
body nav a.site-logo img {
  display: block !important;
  filter: none !important;
  height: 41px !important;
  max-height: 41px !important;
  max-width: 164px !important;
  object-fit: contain !important;
  object-position: left center !important;
  opacity: 1 !important;
  transform: none !important;
  width: 164px !important;
}

body .site-nav-primary {
  align-items: center !important;
  display: flex !important;
  gap: clamp(14px, 1.55vw, 26px) !important;
  justify-content: center !important;
  min-width: 0 !important;
  width: 100% !important;
}

body .site-nav-primary a {
  border-bottom: 2px solid transparent !important;
  color: color-mix(in srgb, var(--saa-text) 76%, transparent) !important;
  flex: 0 0 auto !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  padding: 10px 0 12px !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

body .site-nav-primary a:hover,
body .site-nav-primary a.is-active,
body .site-nav-primary a.text-primary,
body .site-nav-primary a.border-primary {
  border-bottom-color: var(--saa-red) !important;
  color: var(--saa-red) !important;
}

body .site-header__utility,
body .site-header__actions {
  align-items: center !important;
  display: flex !important;
  justify-content: flex-end !important;
  margin: 0 !important;
}

body .site-header__actions {
  gap: 12px !important;
}

body .theme-toggle,
body .saa-mobile-nav-toggle {
  align-items: center !important;
  appearance: none !important;
  background: transparent !important;
  border: 1px solid var(--saa-border) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  color: var(--saa-text) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  flex: 0 0 34px !important;
  height: 34px !important;
  justify-content: center !important;
  min-height: 34px !important;
  padding: 0 !important;
  position: relative !important;
  width: 34px !important;
}

body .theme-toggle__track,
body .theme-toggle__track::after {
  display: none !important;
}

body .theme-toggle__icon,
body .saa-mobile-nav-toggle .material-symbols-outlined {
  color: currentColor !important;
  font-size: 19px !important;
  height: 19px !important;
  line-height: 1 !important;
  opacity: 1 !important;
  position: absolute !important;
  width: 19px !important;
}

body .theme-toggle__icon--light {
  display: none !important;
}

body .theme-toggle__icon--dark {
  display: block !important;
}

body .site-header__cta,
body main :where(.hero-scene__primary, .btn-primary, .term-btn--primary, .usecase-overview__primary, .usecase-overview__cta-link, .contact-submit, .saa-footer__cta, .saa-cookie-banner__primary),
body main :where(a.bg-primary, a.bg-swiss-red, a.inline-flex.bg-swiss-red) {
  align-items: center !important;
  background: #d91e18 !important;
  border: 1px solid #d91e18 !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  display: inline-flex !important;
  font-weight: 850 !important;
  justify-content: center !important;
  text-decoration: none !important;
  -webkit-text-fill-color: #ffffff !important;
}

body .site-header__cta *,
body main :where(.hero-scene__primary, .btn-primary, .term-btn--primary, .usecase-overview__primary, .usecase-overview__cta-link, .contact-submit, .saa-footer__cta, .saa-cookie-banner__primary) *,
body main :where(a.bg-primary, a.bg-swiss-red, a.inline-flex.bg-swiss-red) * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

body .site-header__cta {
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 18px !important;
}

body main {
  background: var(--saa-bg) !important;
  color: var(--saa-text) !important;
}

body main :where(h1, h2, h3, h4, h5, h6, label, summary, strong, b, em, span:not(.material-symbols-outlined)):not(.text-swiss-red):not(.hero-title-line--accent):not(.hero-word-accent) {
  color: var(--saa-text) !important;
  -webkit-text-fill-color: var(--saa-text) !important;
}

body main :where(p, li, small, dd, .faq-content, .text-on-surface-variant, .text-surface-variant, .text-tertiary, .hero-scene__copy) {
  color: var(--saa-text-muted) !important;
  -webkit-text-fill-color: var(--saa-text-muted) !important;
}

body main :where(.text-swiss-red, .hero-title-line--accent, .hero-word-accent, .material-symbols-outlined, .pa-eyebrow, .contact-kicker, .usecase-overview__eyebrow) {
  color: var(--saa-red) !important;
  -webkit-text-fill-color: var(--saa-red) !important;
}

html body main :where(.bg-white, .bg-surface, .bg-surface-alt, .bg-surface-container, section.bg-white, article.bg-white, details.bg-white, .saa-signal-card.bg-white, .process-card, .wide-card, .bento-cell, .home-offer-card:not(.bg-graphite), .beratung-service-card:not(.beratung-service-card--dark), .beratung-faq-grid details, .wissen-editorial-intro, .wissen-decision, .wissen-glossar, .wissen-questions, .ueber-position, .ueber-method, .academy-program-intro, .academy-pathway, .academy-fit, .usecase-overview__filters, .usecase-overview__catalogue, .usecase-overview__proof, .usecase-segment, .usecase-card, .usecase-overview__decision-panel) {
  background-color: var(--saa-surface) !important;
  border-color: var(--saa-border) !important;
  color: var(--saa-text) !important;
}

body main :where(.hero-scene, .page-section--dark, .bg-graphite, .home-offer-card.bg-graphite, .beratung-service-card--dark, .wissen-feature, .wissen-regulation, .wissen-cta, .academy-apply, .academy-lab, .ueber-cta, .usecase-overview__visual, .usecase-map, .usecase-map__node, .usecase-map__core, .usecase-overview__cta) {
  background-color: var(--saa-surface-strong) !important;
  border-color: var(--saa-border) !important;
  color: #f7f9fb !important;
}

body main :where(.hero-scene, .page-section--dark, .bg-graphite, .home-offer-card.bg-graphite, .beratung-service-card--dark, .wissen-feature, .wissen-regulation, .wissen-cta, .academy-apply, .academy-lab, .ueber-cta, .usecase-overview__visual, .usecase-map, .usecase-map__node, .usecase-map__core, .usecase-overview__cta)
  :where(h1, h2, h3, h4, h5, h6, label, summary, strong, b, em, span:not(.material-symbols-outlined)):not(.text-swiss-red):not(.hero-title-line--accent):not(.hero-word-accent) {
  color: #f7f9fb !important;
  -webkit-text-fill-color: #f7f9fb !important;
}

body main :where(.hero-scene, .page-section--dark, .bg-graphite, .home-offer-card.bg-graphite, .beratung-service-card--dark, .wissen-feature, .wissen-regulation, .wissen-cta, .academy-apply, .academy-lab, .ueber-cta, .usecase-overview__visual, .usecase-map, .usecase-map__node, .usecase-map__core, .usecase-overview__cta)
  :where(p, li, small, dd, .hero-scene__copy, .text-surface-variant, .text-on-surface-variant, .text-tertiary) {
  color: rgba(239, 241, 243, .84) !important;
  -webkit-text-fill-color: rgba(239, 241, 243, .84) !important;
}
body main :where(button:not(.theme-toggle):not(.saa-mobile-nav-toggle):not(.contact-submit)) {
  background: var(--saa-surface) !important;
  border: 1px solid var(--saa-border) !important;
  color: var(--saa-text) !important;
  -webkit-text-fill-color: var(--saa-text) !important;
}

body .saa-footer {
  background: #07111c !important;
  color: #f7f9fb !important;
}

body .saa-footer :where(h1, h2, h3, h4, h5, h6, p, a, span, small, strong) {
  color: #f7f9fb !important;
  -webkit-text-fill-color: #f7f9fb !important;
}

body .saa-footer .footer-logo {
  /* content: url(.../ai-agency-logo-main-white.png) am 31.08. entfernt. Die Datei existierte nie im Repo, und die Regel feuerte auf keiner Seite: alle 29 Seiten tragen .v2-logo-fix (~Z. 23934), das content wieder auf normal setzt. Das Footer-Logo kommt aus dem SVG im Markup. */
  display: block !important;
  filter: none !important;
  height: auto !important;
  max-height: none !important;
  max-width: 220px !important;
  object-fit: contain !important;
  object-position: left center !important;
  opacity: 1 !important;
  width: 220px !important;
}

body .site-main,
body main.site-main,
body .subpage-main,
body main.subpage-main {
  margin-top: var(--saa-header-h) !important;
  padding-top: 0 !important;
}

body .site-main > :first-child,
body main.site-main > :first-child,
body .subpage-main > :first-child,
body main.subpage-main > :first-child {
  margin-top: 0 !important;
}

@media (max-width: 1180px) {
  body .site-header__inner {
    grid-template-columns: 188px minmax(0, 1fr) auto !important;
    /* 2026-08-04 (Block 4): festes 22px-Polster entfernt — der Rand kommt
       jetzt stufenlos aus --saig-gutter, damit die Kopfzeile an derselben
       Kante liegt wie der Seiteninhalt. */
  }

  /* 2026-08-04: Anker und Bild getrennt. Frueher setzte dieselbe Regel
     BEIDE auf dieselbe feste Breite. Weiter unten verschmaelert ein
     anderer Block nur den ANKER (clamp(128px, 36vw, 144px)) — das Bild
     blieb bei 188px und wurde rechts um 44px angeschnitten
     ("AI AGEN" statt "AI AGENCY"). Das Bild folgt jetzt seinem Anker. */
  body .site-logo,
  body nav a.site-logo {
    height: 46px !important;
    max-height: 46px !important;
    max-width: 188px !important;
    width: 188px !important;
  }

  body .site-logo__img,
  body nav a.site-logo img {
    height: 46px !important;
    max-height: 46px !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* 2026-08-04 (Block 6b): Umschaltpunkt der Kopfzeile von 980px auf die
   lg-Stufe (1024px) gezogen. Zwischen 980 und 1200px wurde die Navigation
   von 912 auf 533px zusammengedrueckt, der Abstand zwischen den acht Links
   fiel auf 8px. Der Burger existierte, griff nur zu spaet. */
@media (max-width: 1024px) {
  body .site-header__inner {
    display: flex !important;
    gap: 12px !important;
  }

  body .site-logo {
    margin-right: auto !important;
    /* 2026-08-04: In diesem Block wird die Kopfzeile zu einem Flex-Container.
       Der Logo-Anker hat zwar width:188px, durfte als Flex-Element aber
       schrumpfen (min-width:0 aus dem globalen Reset) — gemessen 144px,
       waehrend das Bild darin bei 188px blieb. Das Logo war dadurch rechts
       um 44px angeschnitten ("AI AGEN" statt "AI AGENCY"). Das war schon
       vor dieser Runde so, betraf aber nur 700-980px; mit dem Umschaltpunkt
       auf 1024px waere es bis 1024px gewandert. */
    flex: 0 0 auto;
  }

  html body .site-nav-primary:not(#____never____) {
    display: none !important;
  }
}

@media (max-width: 680px) {
  body .site-header,
  body > nav.site-header.fixed,
  body .site-header__inner {
    height: var(--saa-header-h-mobile) !important;
    min-height: var(--saa-header-h-mobile) !important;
  }

  /* 2026-08-04: Anker und Bild getrennt. Frueher setzte dieselbe Regel
     BEIDE auf dieselbe feste Breite. Weiter unten verschmaelert ein
     anderer Block nur den ANKER (clamp(128px, 36vw, 144px)) — das Bild
     blieb bei 188px und wurde rechts um 44px angeschnitten
     ("AI AGEN" statt "AI AGENCY"). Das Bild folgt jetzt seinem Anker. */
  body .site-logo,
  body nav a.site-logo {
    height: 40px !important;
    max-height: 40px !important;
    max-width: 164px !important;
    width: 164px !important;
  }

  body .site-logo__img,
  body nav a.site-logo img {
    height: 40px !important;
    max-height: 40px !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  body .site-main,
  body main.site-main,
  body .subpage-main,
  body main.subpage-main {
    margin-top: var(--saa-header-h-mobile) !important;
  }

  body .site-header__cta {
    display: none !important;
  }
}

/* Card contrast lock 2026-06-29: repeated cards must never inherit invisible
   low-contrast text from older utility classes or hover polish. */
html body main :where(.home-offer-card:not(.bg-graphite), .bento-cell, .process-card:not(.bg-graphite), .usecase-card, .dienste-practice-card:not(.dienste-practice-card--dark), .dienste-transition-map article, .dienste-industry-grid article, .dienste-faq-grid details) {
  background-color: #ffffff !important;
  color: #07111c !important;
  -webkit-text-fill-color: #07111c !important;
}

html body main :where(.home-offer-card:not(.bg-graphite), .bento-cell, .process-card:not(.bg-graphite), .usecase-card, .dienste-practice-card:not(.dienste-practice-card--dark), .dienste-transition-map article, .dienste-industry-grid article, .dienste-faq-grid details)
  :where(h1, h2, h3, h4, h5, h6, strong, b, em, summary, .home-card-label, .home-card-label span:not(.material-symbols-outlined), .home-card-meta, .usecase-card__category, .usecase-card__proof, .usecase-card__tag):not(.text-swiss-red) {
  color: #07111c !important;
  -webkit-text-fill-color: #07111c !important;
  opacity: 1 !important;
}

html body main :where(.home-offer-card:not(.bg-graphite), .bento-cell, .process-card:not(.bg-graphite), .usecase-card, .dienste-practice-card:not(.dienste-practice-card--dark), .dienste-transition-map article, .dienste-industry-grid article, .dienste-faq-grid details)
  :where(p, li, small, dd, .text-on-surface-variant, .text-surface-variant, .text-tertiary, .usecase-card__benefit) {
  color: #445160 !important;
  -webkit-text-fill-color: #445160 !important;
  opacity: 1 !important;
}

body main :where(.home-offer-card.bg-graphite, .bg-graphite, .dienste-practice-card--dark) {
  background-color: #07111c !important;
  color: #f7f9fb !important;
  -webkit-text-fill-color: #f7f9fb !important;
}

body main :where(.home-offer-card.bg-graphite, .bg-graphite, .dienste-practice-card--dark)
  :where(h1, h2, h3, h4, h5, h6, strong, b, em, summary, .home-card-label, .home-card-label span:not(.material-symbols-outlined), .home-card-meta):not(.text-swiss-red) {
  color: #f7f9fb !important;
  -webkit-text-fill-color: #f7f9fb !important;
  opacity: 1 !important;
}

body main :where(.home-offer-card.bg-graphite, .bg-graphite, .dienste-practice-card--dark)
  :where(p, li, small, dd, .text-on-surface-variant, .text-surface-variant, .text-tertiary) {
  color: rgba(239, 241, 243, .84) !important;
  -webkit-text-fill-color: rgba(239, 241, 243, .84) !important;
  opacity: 1 !important;
}

body main :where(.home-process-step) {
  color: var(--saa-text) !important;
  -webkit-text-fill-color: var(--saa-text) !important;
}

body main :where(.home-process-step) :where(h1, h2, h3, h4, h5, h6, strong, b, em):not(.text-swiss-red) {
  color: var(--saa-text) !important;
  -webkit-text-fill-color: var(--saa-text) !important;
  opacity: 1 !important;
}

body main :where(.home-process-step) :where(p, li, small, dd, .text-on-surface-variant, .text-surface-variant) {
  color: var(--saa-text-muted) !important;
  -webkit-text-fill-color: var(--saa-text-muted) !important;
  opacity: 1 !important;
}

/* Absolute surface contract 2026-06-29: explicit white surfaces stay readable in
   both themes. This beats theme-level card rules and old utility text colors. */
html body main :where(.bg-white, [class~="bg-white"], section.bg-white, article.bg-white, details.bg-white, .saa-signal-card.bg-white, .process-card.bg-white, .wide-card.bg-white) {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: rgba(7, 17, 28, .14) !important;
  color: #07111c !important;
  -webkit-text-fill-color: #07111c !important;
}

html body main :where(.bg-white, [class~="bg-white"], section.bg-white, article.bg-white, details.bg-white, .saa-signal-card.bg-white, .process-card.bg-white, .wide-card.bg-white)
  :where(h1, h2, h3, h4, h5, h6, label, summary, strong, b, em, span:not(.material-symbols-outlined), .home-card-label, .home-card-meta, .text-graphite, .text-on-surface):not(.text-swiss-red):not(.hero-title-line--accent):not(.hero-word-accent) {
  color: #07111c !important;
  -webkit-text-fill-color: #07111c !important;
  opacity: 1 !important;
}

html body main :where(.bg-white, [class~="bg-white"], section.bg-white, article.bg-white, details.bg-white, .saa-signal-card.bg-white, .process-card.bg-white, .wide-card.bg-white)
  :where(p, li, small, dd, .faq-content, .text-on-surface-variant, .text-surface-variant, .text-tertiary) {
  color: #445160 !important;
  -webkit-text-fill-color: #445160 !important;
  opacity: 1 !important;
}

html body main :where(.bg-white, [class~="bg-white"], section.bg-white, article.bg-white, details.bg-white, .saa-signal-card.bg-white, .process-card.bg-white, .wide-card.bg-white)
  :where(.material-symbols-outlined, .text-swiss-red, .hero-title-line--accent, .hero-word-accent) {
  color: #d91e18 !important;
  -webkit-text-fill-color: #d91e18 !important;
  opacity: 1 !important;
}

html body main :where(.bg-white, [class~="bg-white"], section.bg-white, article.bg-white, details.bg-white, .saa-signal-card.bg-white, .process-card.bg-white, .wide-card.bg-white)
  :where(.bg-swiss-red, .bg-swiss-red *, .bg-primary, .bg-primary *, .btn-primary, .btn-primary *, .hero-scene__primary, .hero-scene__primary *, .contact-submit, .contact-submit *) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Absolute dark surface contract 2026-06-29: explicit dark sections/cards keep
   readable light text, independent of the active theme toggle. */
html body main :where(.bg-graphite, [class~="bg-graphite"], .term-dark, .page-section--dark, .hero-scene, .home-agent-board, .home-agent-card, .home-agent-board__result, .beratung-board-section, .beratung-board, .beratung-board-card, .beratung-board__result, .beratung-trust-section, .beratung-trust-cards article, .beratung-service-card--dark, .wissen-feature, .wissen-regulation, .wissen-cta, .academy-apply, .academy-lab, .ueber-cta, .usecase-overview__visual, .usecase-map, .usecase-map__node, .usecase-map__core, .dienste-spine-section, .dienste-spine-item, .dienste-final-panel, .term-feature--dark, .term-compare, .term-trust, .term-final, .term-implementation) {
  background-color: #07111c !important;
  border-color: rgba(239, 241, 243, .18) !important;
  color: #f7f9fb !important;
  -webkit-text-fill-color: #f7f9fb !important;
}

html body main :where(.bg-graphite, [class~="bg-graphite"], .term-dark, .page-section--dark, .hero-scene, .home-agent-board, .home-agent-card, .home-agent-board__result, .beratung-board-section, .beratung-board, .beratung-board-card, .beratung-board__result, .beratung-trust-section, .beratung-trust-cards article, .beratung-service-card--dark, .wissen-feature, .wissen-regulation, .wissen-cta, .academy-apply, .academy-lab, .ueber-cta, .usecase-overview__visual, .usecase-map, .usecase-map__node, .usecase-map__core, .dienste-spine-section, .dienste-spine-item, .dienste-final-panel, .term-feature--dark, .term-compare, .term-trust, .term-final, .term-implementation)
  :where(h1, h2, h3, h4, h5, h6, label, summary, strong, b, em, span:not(.material-symbols-outlined), .text-graphite, .text-on-surface, .home-card-label, .home-card-meta, .saa-signal-label, .term-kicker):not(.text-swiss-red):not(.hero-title-line--accent):not(.hero-word-accent) {
  color: #f7f9fb !important;
  -webkit-text-fill-color: #f7f9fb !important;
  opacity: 1 !important;
}

html body main :where(.bg-graphite, [class~="bg-graphite"], .term-dark, .page-section--dark, .hero-scene, .home-agent-board, .home-agent-card, .home-agent-board__result, .beratung-board-section, .beratung-board, .beratung-board-card, .beratung-board__result, .beratung-trust-section, .beratung-trust-cards article, .beratung-service-card--dark, .wissen-feature, .wissen-regulation, .wissen-cta, .academy-apply, .academy-lab, .ueber-cta, .usecase-overview__visual, .usecase-map, .usecase-map__node, .usecase-map__core, .dienste-spine-section, .dienste-spine-item, .dienste-final-panel, .term-feature--dark, .term-compare, .term-trust, .term-final, .term-implementation)
  :where(p, li, small, dd, .hero-scene__copy, .text-on-surface-variant, .text-surface-variant, .text-tertiary) {
  color: rgba(239, 241, 243, .84) !important;
  -webkit-text-fill-color: rgba(239, 241, 243, .84) !important;
  opacity: 1 !important;
}

html body main :where(.bg-graphite, [class~="bg-graphite"], .term-dark, .page-section--dark, .hero-scene, .home-agent-board, .home-agent-card, .home-agent-board__result, .beratung-board-section, .beratung-board, .beratung-board-card, .beratung-board__result, .beratung-trust-section, .beratung-trust-cards article, .beratung-service-card--dark, .wissen-feature, .wissen-regulation, .wissen-cta, .academy-apply, .academy-lab, .ueber-cta, .usecase-overview__visual, .usecase-map, .usecase-map__node, .usecase-map__core, .dienste-spine-section, .dienste-spine-item, .dienste-final-panel, .term-feature--dark, .term-compare, .term-trust, .term-final, .term-implementation)
  :where(.material-symbols-outlined, .text-swiss-red, .hero-title-line--accent, .hero-word-accent) {
  color: #ff312b !important;
  -webkit-text-fill-color: #ff312b !important;
  opacity: 1 !important;
}

/* Explicit light chips inside dark sections. */
html body main :where(.beratung-strip__inner span, .term-logo-grid span, .home-process-step div[class*="bg-white"], .term-kpi-grid article, .pa-scorecard__row, .pa-scorecard__result) {
  background-color: #ffffff !important;
  border-color: rgba(7, 17, 28, .16) !important;
  color: #07111c !important;
  -webkit-text-fill-color: #07111c !important;
  opacity: 1 !important;
}

html body main :where(.beratung-strip__inner span, .term-logo-grid span, .term-kpi-grid article, .pa-scorecard__row, .pa-scorecard__result)
  :where(h1, h2, h3, h4, h5, h6, strong, b, em, span:not(.material-symbols-outlined), p, li, small, dd) {
  color: #07111c !important;
  -webkit-text-fill-color: #07111c !important;
  opacity: 1 !important;
}

/* Re-assert explicit white surfaces after dark contracts. */
html body main :where(.bg-white, [class~="bg-white"], section.bg-white, article.bg-white, details.bg-white, .saa-signal-card.bg-white, .process-card.bg-white, .wide-card.bg-white) {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: rgba(7, 17, 28, .14) !important;
  color: #07111c !important;
  -webkit-text-fill-color: #07111c !important;
}

html body main :where(.bg-white, [class~="bg-white"], section.bg-white, article.bg-white, details.bg-white, .saa-signal-card.bg-white, .process-card.bg-white, .wide-card.bg-white)
  :where(h1, h2, h3, h4, h5, h6, label, summary, strong, b, em, span:not(.material-symbols-outlined), p, li, small, dd, .faq-content, .text-on-surface-variant, .text-surface-variant, .text-tertiary, .home-card-label, .home-card-meta, .text-graphite, .text-on-surface):not(.text-swiss-red):not(.hero-title-line--accent):not(.hero-word-accent) {
  color: #07111c !important;
  -webkit-text-fill-color: #07111c !important;
  opacity: 1 !important;
}

/* Final paint reset 2026-06-29e.
   The site had old utility rules setting color and -webkit-text-fill-color in
   opposite directions. This final layer makes text fill follow computed color,
   then assigns color from the actual surface: white, dark, or red. */
html body main,
html body main * {
  -webkit-text-fill-color: currentColor !important;
}

html body main :is(.bg-white, [class~="bg-white"], section.bg-white, article.bg-white, details.bg-white, .saa-signal-card.bg-white, .process-card.bg-white, .wide-card.bg-white, .pa-card, .pa-decision-card, .pa-process-grid article, .pa-faq-list article) {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: rgba(7, 17, 28, .14) !important;
  color: #07111c !important;
}

html body main :is(.bg-white, [class~="bg-white"], section.bg-white, article.bg-white, details.bg-white, .saa-signal-card.bg-white, .process-card.bg-white, .wide-card.bg-white, .pa-card, .pa-decision-card, .pa-process-grid article, .pa-faq-list article)
  :is(h1, h2, h3, h4, h5, h6, label, summary, strong, b, em, span:not(.material-symbols-outlined), p, li, small, dd, .faq-content, .text-on-surface-variant, .text-surface-variant, .text-tertiary, .home-card-label, .home-card-meta, .text-graphite, .text-on-surface):not(.text-swiss-red):not(.hero-title-line--accent):not(.hero-word-accent) {
  color: #07111c !important;
  opacity: 1 !important;
}

html body main :is(.bg-white, [class~="bg-white"], section.bg-white, article.bg-white, details.bg-white, .saa-signal-card.bg-white, .process-card.bg-white, .wide-card.bg-white, .pa-card, .pa-decision-card, .pa-process-grid article, .pa-faq-list article)
  :is(.material-symbols-outlined, .text-swiss-red, .hero-title-line--accent, .hero-word-accent, .pa-eyebrow, .contact-kicker) {
  color: #d91e18 !important;
  opacity: 1 !important;
}

html body main :is(.bg-graphite, [class~="bg-graphite"], .term-dark, .page-section--dark, .hero-scene, .home-agent-board, .home-agent-card, .home-agent-board__result, .beratung-board-section, .beratung-board, .beratung-board-card, .beratung-board__result, .beratung-trust-section, .beratung-trust-cards article, .beratung-service-card--dark, .wissen-feature, .wissen-regulation, .wissen-cta, .academy-apply, .academy-lab, .ueber-cta, .usecase-overview__visual, .usecase-map, .usecase-map__node, .usecase-map__core, .dienste-spine-section, .dienste-spine-item, .dienste-final-panel, .term-feature--dark, .term-compare, .term-trust, .term-final, .term-implementation) {
  background-color: #07111c !important;
  border-color: rgba(239, 241, 243, .18) !important;
  color: #f7f9fb !important;
}

html body main :is(.bg-graphite, [class~="bg-graphite"], .term-dark, .page-section--dark, .hero-scene, .home-agent-board, .home-agent-card, .home-agent-board__result, .beratung-board-section, .beratung-board, .beratung-board-card, .beratung-board__result, .beratung-trust-section, .beratung-trust-cards article, .beratung-service-card--dark, .wissen-feature, .wissen-regulation, .wissen-cta, .academy-apply, .academy-lab, .ueber-cta, .usecase-overview__visual, .usecase-map, .usecase-map__node, .usecase-map__core, .dienste-spine-section, .dienste-spine-item, .dienste-final-panel, .term-feature--dark, .term-compare, .term-trust, .term-final, .term-implementation)
  :is(h1, h2, h3, h4, h5, h6, label, summary, strong, b, em, span:not(.material-symbols-outlined), p, li, small, dd, .hero-scene__copy, .text-graphite, .text-on-surface, .text-on-surface-variant, .text-surface-variant, .text-tertiary, .home-card-label, .home-card-meta, .saa-signal-label, .term-kicker):not(.text-swiss-red):not(.hero-title-line--accent):not(.hero-word-accent) {
  color: #f7f9fb !important;
  opacity: 1 !important;
}

html body main :is(.bg-graphite, [class~="bg-graphite"], .term-dark, .page-section--dark, .hero-scene, .home-agent-board, .home-agent-card, .home-agent-board__result, .beratung-board-section, .beratung-board, .beratung-board-card, .beratung-board__result, .beratung-trust-section, .beratung-trust-cards article, .beratung-service-card--dark, .wissen-feature, .wissen-regulation, .wissen-cta, .academy-apply, .academy-lab, .ueber-cta, .usecase-overview__visual, .usecase-map, .usecase-map__node, .usecase-map__core, .dienste-spine-section, .dienste-spine-item, .dienste-final-panel, .term-feature--dark, .term-compare, .term-trust, .term-final, .term-implementation)
  :is(.material-symbols-outlined, .text-swiss-red, .hero-title-line--accent, .hero-word-accent) {
  color: #ff312b !important;
  opacity: 1 !important;
}

html body main :is(.bg-swiss-red, [class~="bg-swiss-red"], .pa-section--red, .beratung-final-panel, .dienste-final-panel) {
  background: #d91e18 !important;
  background-color: #d91e18 !important;
  border-color: #d91e18 !important;
  color: #07111c !important;
}

html body main :is(.bg-swiss-red, [class~="bg-swiss-red"], .pa-section--red, .beratung-final-panel, .dienste-final-panel)
  :is(h1, h2, h3, h4, h5, h6, label, summary, strong, b, em, span:not(.material-symbols-outlined), p, li, small, dd, .text-on-surface-variant, .text-surface-variant, .text-tertiary):not(.text-swiss-red):not(.hero-title-line--accent):not(.hero-word-accent) {
  color: #07111c !important;
  opacity: 1 !important;
}

html body main :is(.bg-swiss-red, [class~="bg-swiss-red"], .pa-section--red, .beratung-final-panel, .dienste-final-panel)
  :is(.hero-scene__primary, .btn-primary, .term-btn--primary, .contact-submit, a.bg-primary, a.bg-swiss-red, a.inline-flex.bg-swiss-red),
html body main :is(.bg-swiss-red, [class~="bg-swiss-red"], .pa-section--red, .beratung-final-panel, .dienste-final-panel)
  :is(.hero-scene__primary, .btn-primary, .term-btn--primary, .contact-submit, a.bg-primary, a.bg-swiss-red, a.inline-flex.bg-swiss-red) * {
  background: #07111c !important;
  background-color: #07111c !important;
  border-color: #07111c !important;
  color: #ffffff !important;
}

html body main :is(.beratung-strip__inner span, .term-logo-grid span, .term-kpi-grid article, .pa-scorecard__row, .pa-scorecard__result, .home-process-step div[class*="bg-white"]) {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: rgba(7, 17, 28, .16) !important;
  color: #07111c !important;
  opacity: 1 !important;
}

html body main :is(.beratung-strip__inner span, .term-logo-grid span, .term-kpi-grid article, .pa-scorecard__row, .pa-scorecard__result, .home-process-step div[class*="bg-white"]) * {
  color: #07111c !important;
  opacity: 1 !important;
}

/* Final high-specificity contrast lock 2026-06-29f.
   This overrides older !important text utilities on the actual repeated surfaces. */
html body main .saa-signal-card,
html body main .bento-cell,
html body main .home-offer-card:not(.bg-graphite),
html body main .usecase-card,
html body main .process-card:not(.bg-graphite):not(.home-agent-card),
html body main .pa-card,
html body main .pa-decision-card,
html body main .pa-process-grid article,
html body main .pa-faq-list article,
html body main .ueber-operating-steps article,
html body main .ueber-method-board > div,
html body main .dienste-practice-card:not(.dienste-practice-card--dark),
html body main .dienste-transition-map article,
html body main .dienste-industry-grid article,
html body main .dienste-faq-grid details,
html body main .term-feature:not(.term-feature--dark):not(.term-feature--visual),
html body main .term-industry-grid article,
html body main .term-faq__grid details {
  background-color: #ffffff !important;
  border-color: rgba(7, 17, 28, .14) !important;
  color: #07111c !important;
  -webkit-text-fill-color: #07111c !important;
}

html body main .saa-signal-card h1,
html body main .saa-signal-card h2,
html body main .saa-signal-card h3,
html body main .saa-signal-card h4,
html body main .saa-signal-card h5,
html body main .saa-signal-card h6,
html body main .saa-signal-card p,
html body main .saa-signal-card small,
html body main .saa-signal-card strong,
html body main .saa-signal-card span:not(.material-symbols-outlined),
html body main .bento-cell h1,
html body main .bento-cell h2,
html body main .bento-cell h3,
html body main .bento-cell h4,
html body main .bento-cell h5,
html body main .bento-cell h6,
html body main .bento-cell p,
html body main .bento-cell small,
html body main .bento-cell strong,
html body main .bento-cell span:not(.material-symbols-outlined),
html body main .home-offer-card:not(.bg-graphite) h1,
html body main .home-offer-card:not(.bg-graphite) h2,
html body main .home-offer-card:not(.bg-graphite) h3,
html body main .home-offer-card:not(.bg-graphite) h4,
html body main .home-offer-card:not(.bg-graphite) p,
html body main .home-offer-card:not(.bg-graphite) small,
html body main .home-offer-card:not(.bg-graphite) strong,
html body main .home-offer-card:not(.bg-graphite) span:not(.material-symbols-outlined),
html body main .usecase-card h1,
html body main .usecase-card h2,
html body main .usecase-card h3,
html body main .usecase-card h4,
html body main .usecase-card p,
html body main .usecase-card small,
html body main .usecase-card strong,
html body main .usecase-card span:not(.material-symbols-outlined),
html body main .process-card:not(.bg-graphite):not(.home-agent-card) h1,
html body main .process-card:not(.bg-graphite):not(.home-agent-card) h2,
html body main .process-card:not(.bg-graphite):not(.home-agent-card) h3,
html body main .process-card:not(.bg-graphite):not(.home-agent-card) h4,
html body main .process-card:not(.bg-graphite):not(.home-agent-card) p,
html body main .process-card:not(.bg-graphite):not(.home-agent-card) small,
html body main .process-card:not(.bg-graphite):not(.home-agent-card) strong,
html body main .process-card:not(.bg-graphite):not(.home-agent-card) span:not(.material-symbols-outlined),
html body main .pa-card h3,
html body main .pa-card p,
html body main .pa-decision-card h3,
html body main .pa-decision-card p,
html body main .pa-process-grid article h3,
html body main .pa-process-grid article p,
html body main .pa-faq-list article h3,
html body main .pa-faq-list article p,
html body main .ueber-operating-steps article strong,
html body main .ueber-operating-steps article p,
html body main .ueber-method-board > div strong,
html body main .ueber-method-board > div p,
html body main .dienste-practice-card:not(.dienste-practice-card--dark) h3,
html body main .dienste-practice-card:not(.dienste-practice-card--dark) p,
html body main .dienste-transition-map article strong,
html body main .dienste-transition-map article span:not(.material-symbols-outlined),
html body main .dienste-industry-grid article strong,
html body main .dienste-industry-grid article p,
html body main .dienste-faq-grid details summary,
html body main .dienste-faq-grid details p,
html body main .term-feature:not(.term-feature--dark):not(.term-feature--visual) h3,
html body main .term-feature:not(.term-feature--dark):not(.term-feature--visual) p,
html body main .term-industry-grid article h3,
html body main .term-industry-grid article p,
html body main .term-faq__grid details summary,
html body main .term-faq__grid details p {
  color: #07111c !important;
  -webkit-text-fill-color: #07111c !important;
  opacity: 1 !important;
}

html body main .saa-signal-card .material-symbols-outlined,
html body main .bento-cell .material-symbols-outlined,
html body main .home-offer-card:not(.bg-graphite) .material-symbols-outlined,
html body main .process-card:not(.bg-graphite):not(.home-agent-card) .material-symbols-outlined,
html body main .usecase-card .material-symbols-outlined,
html body main .term-feature:not(.term-feature--dark):not(.term-feature--visual) .material-symbols-outlined,
html body main .text-swiss-red {
  color: #d91e18 !important;
  -webkit-text-fill-color: #d91e18 !important;
}

html body main .beratung-board-section,
html body main .beratung-board,
html body main .beratung-board-card,
html body main .beratung-board__result,
html body main .beratung-trust-section,
html body main .beratung-trust-cards article,
html body main .beratung-service-card--dark,
html body main .home-agent-board,
html body main .home-agent-card,
html body main .home-agent-board__result,
html body main .home-offer-card.bg-graphite,
html body main .dienste-spine-section,
html body main .dienste-spine-item,
html body main .dienste-final-panel,
html body main .dienste-practice-card--dark,
html body main .wissen-feature,
html body main .wissen-regulation,
html body main .wissen-cta,
html body main .term-dark,
html body main .term-dark article,
html body main .term-feature--dark,
html body main .term-implementation,
html body main .term-trust,
html body main .term-compare,
html body main .term-final {
  background-color: #07111c !important;
  border-color: rgba(239, 241, 243, .18) !important;
  color: #f7f9fb !important;
  -webkit-text-fill-color: #f7f9fb !important;
}

html body main .beratung-board-section h1,
html body main .beratung-board-section h2,
html body main .beratung-board-section h3,
html body main .beratung-board-section p,
html body main .beratung-board-section small,
html body main .beratung-board-section strong,
html body main .beratung-board-section span:not(.material-symbols-outlined),
html body main .beratung-board-card strong,
html body main .beratung-board-card small,
html body main .beratung-board-card em,
html body main .beratung-board__result strong,
html body main .beratung-board__result p,
html body main .beratung-board__result li,
html body main .beratung-trust-section h1,
html body main .beratung-trust-section h2,
html body main .beratung-trust-section h3,
html body main .beratung-trust-section p,
html body main .beratung-trust-section small,
html body main .beratung-trust-section strong,
html body main .beratung-trust-section span:not(.material-symbols-outlined),
html body main .beratung-trust-cards article h3,
html body main .beratung-trust-cards article p,
html body main .home-agent-board strong,
html body main .home-agent-board p,
html body main .home-agent-board small,
html body main .home-agent-board li,
html body main .home-agent-board span:not(.material-symbols-outlined),
html body main .home-agent-card strong,
html body main .home-agent-card small,
html body main .home-offer-card.bg-graphite h3,
html body main .home-offer-card.bg-graphite p,
html body main .home-offer-card.bg-graphite span:not(.material-symbols-outlined),
html body main .dienste-spine-section h1,
html body main .dienste-spine-section h2,
html body main .dienste-spine-section h3,
html body main .dienste-spine-section p,
html body main .dienste-spine-section li,
html body main .dienste-spine-section span:not(.material-symbols-outlined),
html body main .dienste-practice-card--dark h3,
html body main .dienste-practice-card--dark p,
html body main .wissen-feature h2,
html body main .wissen-feature p,
html body main .wissen-feature li,
html body main .wissen-regulation h2,
html body main .wissen-regulation p,
html body main .wissen-regulation strong,
html body main .wissen-cta h2,
html body main .wissen-cta p,
html body main .term-dark h1,
html body main .term-dark h2,
html body main .term-dark h3,
html body main .term-dark p,
html body main .term-dark li,
html body main .term-dark small,
html body main .term-dark strong,
html body main .term-dark span:not(.material-symbols-outlined),
html body main .term-feature--dark h3,
html body main .term-feature--dark p {
  color: #f7f9fb !important;
  -webkit-text-fill-color: #f7f9fb !important;
  opacity: 1 !important;
}

html body main .beratung-board-section .material-symbols-outlined,
html body main .beratung-trust-section .material-symbols-outlined,
html body main .home-agent-board .material-symbols-outlined,
html body main .home-offer-card.bg-graphite .material-symbols-outlined,
html body main .dienste-spine-section .material-symbols-outlined,
html body main .dienste-practice-card--dark .material-symbols-outlined,
html body main .wissen-feature .material-symbols-outlined,
html body main .wissen-regulation .material-symbols-outlined,
html body main .term-dark .material-symbols-outlined,
html body main .term-feature--dark .material-symbols-outlined {
  color: #ff312b !important;
  -webkit-text-fill-color: #ff312b !important;
}

html body main .bg-swiss-red,
html body main .pa-section--red,
html body main .beratung-final-panel,
html body main .dienste-final-panel {
  background-color: #d91e18 !important;
  color: #07111c !important;
  -webkit-text-fill-color: #07111c !important;
}

html body main .bg-swiss-red h1,
html body main .bg-swiss-red h2,
html body main .bg-swiss-red h3,
html body main .bg-swiss-red p,
html body main .pa-section--red h1,
html body main .pa-section--red h2,
html body main .pa-section--red h3,
html body main .pa-section--red p,
html body main .beratung-final-panel h2,
html body main .beratung-final-panel p,
html body main .dienste-final-panel h2,
html body main .dienste-final-panel p {
  color: #07111c !important;
  -webkit-text-fill-color: #07111c !important;
  opacity: 1 !important;
}

html body main .bg-swiss-red .hero-scene__primary,
html body main .pa-section--red .hero-scene__primary,
html body main .beratung-final-panel .hero-scene__primary,
html body main .dienste-final-panel .hero-scene__primary,
html body main .bg-swiss-red .btn-primary,
html body main .pa-section--red .btn-primary {
  background-color: #07111c !important;
  border-color: #07111c !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body main .bg-swiss-red .hero-scene__primary *,
html body main .pa-section--red .hero-scene__primary *,
html body main .beratung-final-panel .hero-scene__primary *,
html body main .dienste-final-panel .hero-scene__primary *,
html body main .bg-swiss-red .btn-primary *,
html body main .pa-section--red .btn-primary * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Header cleanup 2026-06-29: hide the mobile hamburger on desktop headers.
   2026-08-31: 1025px -> 1280px angehoben, passend zum neuen Umschaltpunkt
   der Navigation (siehe Block 6b, Zeile ~19918). Vorher blieb der Burger
   zwischen 1025-1279px unsichtbar (.saa-mobile-nav-toggle{display:inline-flex}
   greift nur bis 900px, siehe Zeile ~4089), waehrend die Navigation dort
   schon versteckt war - Kopfzeile ohne jede Navigationsmoeglichkeit.
   2026-09-16: 1280 -> 1360px (elfter Reiter, siehe Block ~Z. 20121). */
@media (min-width: 1360px) {
  body .site-header .saa-mobile-nav-toggle,
  body nav .saa-mobile-nav-toggle {
    display: none !important;
  }
}

/* Numberless visual system: use calm icon markers instead of ordered labels. */
html body main :where(
  .beratung-service-card,
  .beratung-trust-cards article,
  .beratung-workflow-grid article,
  .dienste-flow-grid article,
  .contact-step,
  .pa-process-grid article,
  .pa-card,
  .academy-pathway-node,
  .academy-apply-steps li,
  .ueber-operating-steps article,
  .ueber-method-board > div,
  .term-flow-line article,
  .term-implementation__steps article
) > .material-symbols-outlined,
html body main .home-process-icon > .material-symbols-outlined,
html body main .pa-card-number.material-symbols-outlined,
html body main .dienste-spine-item__number.material-symbols-outlined,
html body main .term-step-icon .material-symbols-outlined {
  width: 42px !important;
  height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 0 22px !important;
  border: 1px solid rgba(217, 30, 24, 0.34) !important;
  background: rgba(217, 30, 24, 0.08) !important;
  color: #d91e18 !important;
  -webkit-text-fill-color: #d91e18 !important;
  font-size: 24px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
}

html body main .home-process-icon {
  border: 1px solid rgba(217, 30, 24, 0.42) !important;
  background: rgba(217, 30, 24, 0.1) !important;
  color: #d91e18 !important;
}

html body main .home-process-icon > .material-symbols-outlined {
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}

html body main :where(.beratung-service-card, .pa-card, .contact-step, .term-flow-line article, .dienste-flow-grid article) {
  box-shadow: 0 18px 48px rgba(7, 17, 28, 0.07) !important;
}

html body main .beratung-service-card > .material-symbols-outlined {
  margin-bottom: 28px !important;
}

html body main .beratung-service-card--dark > .material-symbols-outlined,
html body main .term-dark .term-step-icon .material-symbols-outlined {
  border-color: rgba(255, 255, 255, 0.2) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ff312b !important;
  -webkit-text-fill-color: #ff312b !important;
}

html body main .term-step-icon {
  display: inline-flex !important;
  margin: 0 !important;
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}

/* KI-Beratung contrast guard: keep advisory sections readable in light and dark theme states. */
html body.ki-beratung-page main :where(
  .beratung-problem-section,
  .beratung-feature-section,
  .beratung-expect-section,
  .beratung-services-section,
  .beratung-workflow-section,
  .beratung-faq-section
) {
  background-color: #f1f5f9 !important;
  color: #07111c !important;
  -webkit-text-fill-color: #07111c !important;
}

html body.ki-beratung-page main :where(.beratung-feature-section, .beratung-workflow-section) {
  background-color: #ffffff !important;
}

html body.ki-beratung-page main :where(
  .beratung-problem-section,
  .beratung-feature-section,
  .beratung-expect-section,
  .beratung-services-section,
  .beratung-workflow-section,
  .beratung-faq-section
) :where(h1, h2, h3, h4, h5, h6, summary, strong, b, em, label, span:not(.material-symbols-outlined)):not(.text-swiss-red):not(.saa-signal-label) {
  color: #07111c !important;
  -webkit-text-fill-color: #07111c !important;
  opacity: 1 !important;
}

html body.ki-beratung-page main :where(
  .beratung-problem-section,
  .beratung-feature-section,
  .beratung-expect-section,
  .beratung-services-section,
  .beratung-workflow-section,
  .beratung-faq-section
) :where(p, li, small, dd, .faq-content, .text-on-surface-variant, .text-surface-variant, .text-tertiary) {
  color: #4a5563 !important;
  -webkit-text-fill-color: #4a5563 !important;
  opacity: 1 !important;
}

html body.ki-beratung-page main :where(
  .beratung-problem-grid article,
  .beratung-expect-cards article,
  .beratung-service-card:not(.beratung-service-card--dark),
  .beratung-faq-grid details
) {
  background-color: #ffffff !important;
  border-color: #cfd8e3 !important;
  color: #07111c !important;
  -webkit-text-fill-color: #07111c !important;
}

html body.ki-beratung-page main .beratung-service-card--dark,
html body.ki-beratung-page main .beratung-service-card--dark :where(h1, h2, h3, h4, h5, h6, summary, strong, b, em, label, span:not(.material-symbols-outlined), p, li, small, dd) {
  color: #f7f9fb !important;
  -webkit-text-fill-color: #f7f9fb !important;
}

/* Global typography guard: keep German words intact inside cards and grids. */
html body main :where(
  article,
  details,
  .process-card,
  .bento-cell,
  .wide-card,
  .saa-signal-card,
  .home-offer-card,
  .beratung-service-card,
  .beratung-problem-grid article,
  .beratung-expect-cards article,
  .beratung-trust-cards article,
  .beratung-faq-grid details,
  .dienste-practice-card,
  .dienste-flow-grid article,
  .dienste-faq-grid details,
  .usecase-card,
  .pa-card,
  .pa-faq-list article,
  .contact-step,
  .term-feature,
  .term-step-grid article,
  .term-trust__grid article,
  .term-faq__grid details,
  .wissen-qa details,
  .academy-pathway-node,
  .ueber-operating-steps article,
  .ueber-method-board > div
) :where(h1, h2, h3, h4, h5, h6, p, li, summary, strong, small, span:not(.material-symbols-outlined), em) {
  hyphens: none !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

html body main :where(h1, h2, h3, h4, h5, h6, p, li, summary, strong, small, dd, span:not(.material-symbols-outlined), em) {
  hyphens: none !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

html body.ki-beratung-page main :where(
  .beratung-problem-section,
  .beratung-feature-section,
  .beratung-expect-section,
  .beratung-services-section,
  .beratung-workflow-section,
  .beratung-faq-section
) :where(h1, h2, h3, h4, h5, h6, summary, strong, b, em, label, span:not(.material-symbols-outlined)):not(.text-swiss-red):not(.saa-signal-label) {
  color: #07111c !important;
  -webkit-text-fill-color: #07111c !important;
}

html body.ki-beratung-page main :where(
  .beratung-problem-section,
  .beratung-feature-section,
  .beratung-expect-section,
  .beratung-services-section,
  .beratung-workflow-section,
  .beratung-faq-section
) :where(p, li, small, dd, .faq-content, .text-on-surface-variant, .text-surface-variant, .text-tertiary) {
  color: #4a5563 !important;
  -webkit-text-fill-color: #4a5563 !important;
}

html body.ki-beratung-page main .beratung-problem-section h1,
html body.ki-beratung-page main .beratung-problem-section h2,
html body.ki-beratung-page main .beratung-problem-section h3,
html body.ki-beratung-page main .beratung-feature-section h1,
html body.ki-beratung-page main .beratung-feature-section h2,
html body.ki-beratung-page main .beratung-feature-section h3,
html body.ki-beratung-page main .beratung-expect-section h1,
html body.ki-beratung-page main .beratung-expect-section h2,
html body.ki-beratung-page main .beratung-expect-section h3,
html body.ki-beratung-page main .beratung-expect-section strong,
html body.ki-beratung-page main .beratung-services-section h1,
html body.ki-beratung-page main .beratung-services-section h2,
html body.ki-beratung-page main .beratung-services-section h3,
html body.ki-beratung-page main .beratung-workflow-section h1,
html body.ki-beratung-page main .beratung-workflow-section h2,
html body.ki-beratung-page main .beratung-workflow-section h3,
html body.ki-beratung-page main .beratung-faq-section h1,
html body.ki-beratung-page main .beratung-faq-section h2,
html body.ki-beratung-page main .beratung-faq-section h3,
html body.ki-beratung-page main .beratung-faq-section summary {
  color: #07111c !important;
  -webkit-text-fill-color: #07111c !important;
}

html body.ki-beratung-page main .beratung-problem-section p,
html body.ki-beratung-page main .beratung-problem-section li,
html body.ki-beratung-page main .beratung-feature-section p,
html body.ki-beratung-page main .beratung-feature-section li,
html body.ki-beratung-page main .beratung-feature-section span:not(.material-symbols-outlined),
html body.ki-beratung-page main .beratung-expect-section p,
html body.ki-beratung-page main .beratung-expect-section li,
html body.ki-beratung-page main .beratung-expect-section span:not(.material-symbols-outlined),
html body.ki-beratung-page main .beratung-services-section p,
html body.ki-beratung-page main .beratung-services-section li,
html body.ki-beratung-page main .beratung-workflow-section p,
html body.ki-beratung-page main .beratung-workflow-section li,
html body.ki-beratung-page main .beratung-workflow-section em,
html body.ki-beratung-page main .beratung-faq-section p,
html body.ki-beratung-page main .beratung-faq-section li {
  color: #4a5563 !important;
  -webkit-text-fill-color: #4a5563 !important;
}

html body.ki-dienste-page main :where(.dienste-spine-item),
html body.ki-dienste-page main :where(.dienste-spine-item),
html body.ki-beratung-page main :where(.beratung-why-section, .beratung-service-card--dark, .beratung-trust-section, .beratung-trust-cards article) {
  color: #f7f9fb !important;
  -webkit-text-fill-color: #f7f9fb !important;
}

html body.ki-dienste-page main :where(.dienste-spine-item) :where(h1, h2, h3, h4, h5, h6, strong, b, span:not(.material-symbols-outlined)),
html body.ki-dienste-page main :where(.dienste-spine-item) :where(h1, h2, h3, h4, h5, h6, strong, b, span:not(.material-symbols-outlined)),
html body.ki-beratung-page main :where(.beratung-why-section, .beratung-service-card--dark, .beratung-trust-section, .beratung-trust-cards article) :where(h1, h2, h3, h4, h5, h6, strong, b, span:not(.material-symbols-outlined)) {
  color: #f7f9fb !important;
  -webkit-text-fill-color: #f7f9fb !important;
}

html body.ki-dienste-page main :where(.dienste-spine-item) :where(p, li, small, dd),
html body.ki-dienste-page main :where(.dienste-spine-item) :where(p, li, small, dd),
html body.ki-beratung-page main :where(.beratung-why-section, .beratung-service-card--dark, .beratung-trust-section, .beratung-trust-cards article) :where(p, li, small, dd) {
  color: rgba(239, 241, 243, 0.86) !important;
  -webkit-text-fill-color: rgba(239, 241, 243, 0.86) !important;
}

html body main :where(.hero-scene__primary, .btn-primary, .term-btn--primary, .usecase-overview__primary, .usecase-overview__cta-link, .contact-submit, .saa-cookie-banner__primary),
html body main :where(.hero-scene__primary, .btn-primary, .term-btn--primary, .usecase-overview__primary, .usecase-overview__cta-link, .contact-submit, .saa-cookie-banner__primary) * {
  background-color: #d91e18 !important;
  border-color: #d91e18 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body main .beratung-final-panel,
html body main .beratung-final-panel :where(h1, h2, h3, p, li, small, strong, span:not(.material-symbols-outlined), a:not(.hero-scene__primary)) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}

/* Final contrast authority: fixes repeated light/dark inversions across service pages. */
html body main :where(
  .saa-signal-card,
  .process-card:not(.bg-graphite),
  .wide-card:not(.bg-graphite),
  .bento-card,
  .bento-cell,
  .home-offer-card:not(.bg-graphite),
  .beratung-problem-grid article,
  .beratung-expect-cards article,
  .beratung-service-card:not(.beratung-service-card--dark),
  .beratung-faq-grid details,
  .dienste-problem-grid article,
  .dienste-practice-card:not(.dienste-practice-card--dark),
  .dienste-transition-map article,
  .dienste-flow-grid article,
  .dienste-industry-grid article,
  .dienste-faq-grid details,
  .usecase-card,
  .contact-step,
  .pa-card,
  .pa-process-grid article,
  .term-card,
  .term-feature:not(.term-feature--dark),
  .term-flow-line article,
  .term-trust__grid article,
  .term-faq__grid details,
  .wissen-qa details,
  .academy-pathway-node,
  .ueber-operating-steps article,
  .ueber-method-board > div
) {
  background-color: #ffffff !important;
  border-color: #cfd8e3 !important;
  color: #07111c !important;
  -webkit-text-fill-color: #07111c !important;
}

html body main :where(
  .saa-signal-card,
  .process-card:not(.bg-graphite),
  .wide-card:not(.bg-graphite),
  .bento-card,
  .bento-cell,
  .home-offer-card:not(.bg-graphite),
  .beratung-problem-grid article,
  .beratung-expect-cards article,
  .beratung-service-card:not(.beratung-service-card--dark),
  .beratung-faq-grid details,
  .dienste-problem-grid article,
  .dienste-practice-card:not(.dienste-practice-card--dark),
  .dienste-transition-map article,
  .dienste-flow-grid article,
  .dienste-industry-grid article,
  .dienste-faq-grid details,
  .usecase-card,
  .contact-step,
  .pa-card,
  .pa-process-grid article,
  .term-card,
  .term-feature:not(.term-feature--dark),
  .term-flow-line article,
  .term-trust__grid article,
  .term-faq__grid details,
  .wissen-qa details,
  .academy-pathway-node,
  .ueber-operating-steps article,
  .ueber-method-board > div
) :where(h1, h2, h3, h4, h5, h6, summary, strong, b, em, label, span:not(.material-symbols-outlined), a:not(.hero-scene__primary)) {
  color: #07111c !important;
  -webkit-text-fill-color: #07111c !important;
  opacity: 1 !important;
}

html body main :where(
  .saa-signal-card,
  .process-card:not(.bg-graphite),
  .wide-card:not(.bg-graphite),
  .bento-card,
  .bento-cell,
  .home-offer-card:not(.bg-graphite),
  .beratung-problem-grid article,
  .beratung-expect-cards article,
  .beratung-service-card:not(.beratung-service-card--dark),
  .beratung-faq-grid details,
  .dienste-problem-grid article,
  .dienste-practice-card:not(.dienste-practice-card--dark),
  .dienste-transition-map article,
  .dienste-flow-grid article,
  .dienste-industry-grid article,
  .dienste-faq-grid details,
  .usecase-card,
  .contact-step,
  .pa-card,
  .pa-process-grid article,
  .term-card,
  .term-feature:not(.term-feature--dark),
  .term-flow-line article,
  .term-trust__grid article,
  .term-faq__grid details,
  .wissen-qa details,
  .academy-pathway-node,
  .ueber-operating-steps article,
  .ueber-method-board > div
) :where(p, li, small, dd, .faq-content, .text-on-surface-variant, .text-surface-variant, .text-tertiary) {
  color: #445160 !important;
  -webkit-text-fill-color: #445160 !important;
  opacity: 1 !important;
}

html body main :where(.dienste-strip, .beratung-why-section, .beratung-trust-section, .beratung-final-section, .beratung-service-card--dark, .beratung-trust-cards article, .dienste-spine-item, .dienste-final-section, .dienste-final-panel, .dienste-practice-card--dark, .bg-graphite, .page-section--dark, .hero-scene) {
  color: #f7f9fb !important;
  -webkit-text-fill-color: #f7f9fb !important;
}

html body main :where(.dienste-strip, .beratung-why-section, .beratung-trust-section, .beratung-final-section, .beratung-service-card--dark, .beratung-trust-cards article, .dienste-spine-item, .dienste-final-section, .dienste-final-panel, .dienste-practice-card--dark, .bg-graphite, .page-section--dark, .hero-scene)
:where(h1, h2, h3, h4, h5, h6, summary, strong, b, em, label, span:not(.material-symbols-outlined), a:not(.hero-scene__primary)) {
  color: #f7f9fb !important;
  -webkit-text-fill-color: #f7f9fb !important;
  opacity: 1 !important;
}

html body main :where(.dienste-strip, .beratung-why-section, .beratung-trust-section, .beratung-final-section, .beratung-service-card--dark, .beratung-trust-cards article, .dienste-spine-item, .dienste-final-section, .dienste-final-panel, .dienste-practice-card--dark, .bg-graphite, .page-section--dark, .hero-scene)
:where(p, li, small, dd, .faq-content, .text-on-surface-variant, .text-surface-variant, .text-tertiary) {
  color: rgba(239, 241, 243, 0.86) !important;
  -webkit-text-fill-color: rgba(239, 241, 243, 0.86) !important;
  opacity: 1 !important;
}

html body.ki-dienste-page main :where(.dienste-lanes-section, .dienste-practice-section, .dienste-transition-section, .dienste-workflow-section, .dienste-industries-section, .dienste-faq-section) {
  background-color: #f7f9fb !important;
  color: #07111c !important;
  -webkit-text-fill-color: #07111c !important;
}

html body.ki-dienste-page main :where(.dienste-lanes-section, .dienste-practice-section, .dienste-transition-section, .dienste-workflow-section, .dienste-industries-section, .dienste-faq-section)
:where(h1, h2, h3, h4, h5, h6, strong, b, a:not(.hero-scene__primary)) {
  color: #07111c !important;
  -webkit-text-fill-color: #07111c !important;
}

html body.ki-dienste-page main :where(.dienste-lanes-section, .dienste-practice-section, .dienste-transition-section, .dienste-workflow-section, .dienste-industries-section, .dienste-faq-section)
:where(p, li, small, dd) {
  color: #445160 !important;
  -webkit-text-fill-color: #445160 !important;
}

html body main :where(.hero-scene__primary, .btn-primary, .term-btn--primary, .usecase-overview__primary, .usecase-overview__cta-link, .contact-submit, .saa-cookie-banner__primary) {
  background-color: #d91e18 !important;
  border-color: #d91e18 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body main :where(.beratung-final-panel .hero-scene__primary) {
  background-color: #07111c !important;
  border-color: #07111c !important;
}

html body main :where(.hero-scene__primary, .btn-primary, .term-btn--primary, .usecase-overview__primary, .usecase-overview__cta-link, .contact-submit, .saa-cookie-banner__primary) * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body main .beratung-final-panel :where(h1, h2, h3, p, li, small, strong, span:not(.material-symbols-outlined), a:not(.hero-scene__primary)) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}

/* Authoritative surface contrast contract 2026-06-29.
   Text color follows the nearest semantic surface, independent of global theme. */
html body main :where(
  .bg-white,
  .bg-surface,
  .bg-surface-alt,
  .bg-surface-container,
  .bg-surface-container-low,
  .bg-surface-container-high,
  .saa-signal-card,
  .process-card:not(.bg-graphite),
  .wide-card:not(.bg-graphite),
  .bento-card,
  .bento-cell,
  .home-offer-card:not(.bg-graphite),
  .beratung-problem-grid article,
  .beratung-expect-cards article,
  .beratung-service-card:not(.beratung-service-card--dark),
  .beratung-faq-grid details,
  .dienste-problem-grid article,
  .dienste-practice-card:not(.dienste-practice-card--dark),
  .dienste-transition-map article,
  .dienste-flow-grid article,
  .dienste-industry-grid article,
  .dienste-faq-grid details,
  .usecase-card,
  .contact-step,
  .pa-card,
  .pa-process-grid article,
  .term-card,
  .term-feature:not(.term-feature--dark),
  .term-flow-line article,
  .term-trust__grid article,
  .term-faq__grid details,
  .wissen-editorial-intro,
  .wissen-decision,
  .wissen-glossar,
  .wissen-questions,
  .wissen-qa details,
  .academy-program-intro,
  .academy-pathway,
  .academy-fit,
  .ueber-position,
  .ueber-method
) {
  background-color: #ffffff;
  color: #07111c !important;
  -webkit-text-fill-color: #07111c !important;
}

html body main :where(
  .bg-white,
  .bg-surface,
  .bg-surface-alt,
  .bg-surface-container,
  .bg-surface-container-low,
  .bg-surface-container-high,
  .saa-signal-card,
  .process-card:not(.bg-graphite),
  .wide-card:not(.bg-graphite),
  .bento-card,
  .bento-cell,
  .home-offer-card:not(.bg-graphite),
  .beratung-problem-grid article,
  .beratung-expect-cards article,
  .beratung-service-card:not(.beratung-service-card--dark),
  .beratung-faq-grid details,
  .dienste-problem-grid article,
  .dienste-practice-card:not(.dienste-practice-card--dark),
  .dienste-transition-map article,
  .dienste-flow-grid article,
  .dienste-industry-grid article,
  .dienste-faq-grid details,
  .usecase-card,
  .contact-step,
  .pa-card,
  .pa-process-grid article,
  .term-card,
  .term-feature:not(.term-feature--dark),
  .term-flow-line article,
  .term-trust__grid article,
  .term-faq__grid details,
  .wissen-editorial-intro,
  .wissen-decision,
  .wissen-glossar,
  .wissen-questions,
  .wissen-qa details,
  .academy-program-intro,
  .academy-pathway,
  .academy-fit,
  .ueber-position,
  .ueber-method
) :where(h1, h2, h3, h4, h5, h6, summary, strong, b, em, label, span:not(.material-symbols-outlined), a:not(.hero-scene__primary)) {
  color: #07111c !important;
  -webkit-text-fill-color: #07111c !important;
  opacity: 1 !important;
}

html body main :where(
  .bg-white,
  .bg-surface,
  .bg-surface-alt,
  .bg-surface-container,
  .bg-surface-container-low,
  .bg-surface-container-high,
  .saa-signal-card,
  .process-card:not(.bg-graphite),
  .wide-card:not(.bg-graphite),
  .bento-card,
  .bento-cell,
  .home-offer-card:not(.bg-graphite),
  .beratung-problem-grid article,
  .beratung-expect-cards article,
  .beratung-service-card:not(.beratung-service-card--dark),
  .beratung-faq-grid details,
  .dienste-problem-grid article,
  .dienste-practice-card:not(.dienste-practice-card--dark),
  .dienste-transition-map article,
  .dienste-flow-grid article,
  .dienste-industry-grid article,
  .dienste-faq-grid details,
  .usecase-card,
  .contact-step,
  .pa-card,
  .pa-process-grid article,
  .term-card,
  .term-feature:not(.term-feature--dark),
  .term-flow-line article,
  .term-trust__grid article,
  .term-faq__grid details,
  .wissen-editorial-intro,
  .wissen-decision,
  .wissen-glossar,
  .wissen-questions,
  .wissen-qa details,
  .academy-program-intro,
  .academy-pathway,
  .academy-fit,
  .ueber-position,
  .ueber-method
) :where(p, li, small, dd, .faq-content, .text-on-surface-variant, .text-surface-variant, .text-tertiary) {
  color: #445160 !important;
  -webkit-text-fill-color: #445160 !important;
  opacity: 1 !important;
}

html body main :where(
  .hero-scene,
  .bg-graphite,
  .page-section--dark,
  .home-agent-board,
  .home-agent-card,
  .home-agent-board__result,
  .beratung-board-section,
  .beratung-board,
  .beratung-board-card,
  .beratung-board__result,
  .beratung-service-card--dark,
  .beratung-trust-section,
  .beratung-trust-cards article,
  .beratung-final-section,
  .beratung-final-panel,
  .dienste-spine-section,
  .dienste-spine-item,
  .dienste-practice-card--dark,
  .dienste-final-section,
  .dienste-final-panel,
  .wissen-feature,
  .wissen-regulation,
  .wissen-cta,
  .academy-lab,
  .academy-apply,
  .ueber-cta,
  .term-dark,
  .term-feature--dark,
  .term-compare,
  .term-trust,
  .term-final,
  .term-implementation,
  .usecase-overview__visual,
  .usecase-map,
  .usecase-map__node,
  .usecase-map__core,
  .usecase-overview__cta
) {
  color: #f7f9fb !important;
  -webkit-text-fill-color: #f7f9fb !important;
}

html body main :where(
  .hero-scene,
  .bg-graphite,
  .page-section--dark,
  .home-agent-board,
  .home-agent-card,
  .home-agent-board__result,
  .beratung-board-section,
  .beratung-board,
  .beratung-board-card,
  .beratung-board__result,
  .beratung-service-card--dark,
  .beratung-trust-section,
  .beratung-trust-cards article,
  .beratung-final-section,
  .beratung-final-panel,
  .dienste-spine-section,
  .dienste-spine-item,
  .dienste-practice-card--dark,
  .dienste-final-section,
  .dienste-final-panel,
  .wissen-feature,
  .wissen-regulation,
  .wissen-cta,
  .academy-lab,
  .academy-apply,
  .ueber-cta,
  .term-dark,
  .term-feature--dark,
  .term-compare,
  .term-trust,
  .term-final,
  .term-implementation,
  .usecase-overview__visual,
  .usecase-map,
  .usecase-map__node,
  .usecase-map__core,
  .usecase-overview__cta
) :where(h1, h2, h3, h4, h5, h6, summary, strong, b, em, label, span:not(.material-symbols-outlined), a:not(.hero-scene__primary)) {
  color: #f7f9fb !important;
  -webkit-text-fill-color: #f7f9fb !important;
  opacity: 1 !important;
}

html body main :where(
  .hero-scene,
  .bg-graphite,
  .page-section--dark,
  .home-agent-board,
  .home-agent-card,
  .home-agent-board__result,
  .beratung-board-section,
  .beratung-board,
  .beratung-board-card,
  .beratung-board__result,
  .beratung-service-card--dark,
  .beratung-trust-section,
  .beratung-trust-cards article,
  .beratung-final-section,
  .beratung-final-panel,
  .dienste-spine-section,
  .dienste-spine-item,
  .dienste-practice-card--dark,
  .dienste-final-section,
  .dienste-final-panel,
  .wissen-feature,
  .wissen-regulation,
  .wissen-cta,
  .academy-lab,
  .academy-apply,
  .ueber-cta,
  .term-dark,
  .term-feature--dark,
  .term-compare,
  .term-trust,
  .term-final,
  .term-implementation,
  .usecase-overview__visual,
  .usecase-map,
  .usecase-map__node,
  .usecase-map__core,
  .usecase-overview__cta
) :where(p, li, small, dd, .faq-content, .text-on-surface-variant, .text-surface-variant, .text-tertiary) {
  color: rgba(239, 241, 243, 0.86) !important;
  -webkit-text-fill-color: rgba(239, 241, 243, 0.86) !important;
  opacity: 1 !important;
}

html body main :where(.text-swiss-red, .hero-title-line--accent, .hero-word-accent, .material-symbols-outlined, .pa-eyebrow, .contact-kicker) {
  color: #d91e18 !important;
  -webkit-text-fill-color: #d91e18 !important;
}

html body main :where(.hero-scene__primary, .btn-primary, .term-btn--primary, .usecase-overview__primary, .usecase-overview__cta-link, .contact-submit, .saa-cookie-banner__primary) {
  background-color: #d91e18 !important;
  border-color: #d91e18 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body main :where(.hero-scene__primary, .btn-primary, .term-btn--primary, .usecase-overview__primary, .usecase-overview__cta-link, .contact-submit, .saa-cookie-banner__primary) * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

body.ki-beratung-page main .beratung-problem-section h1,
body.ki-beratung-page main .beratung-problem-section h2,
body.ki-beratung-page main .beratung-problem-section h3,
body.ki-beratung-page main .beratung-feature-section h1,
body.ki-beratung-page main .beratung-feature-section h2,
body.ki-beratung-page main .beratung-feature-section h3,
body.ki-beratung-page main .beratung-expect-section h1,
body.ki-beratung-page main .beratung-expect-section h2,
body.ki-beratung-page main .beratung-expect-section h3,
body.ki-beratung-page main .beratung-expect-section strong,
body.ki-beratung-page main .beratung-services-section h1,
body.ki-beratung-page main .beratung-services-section h2,
body.ki-beratung-page main .beratung-services-section h3,
body.ki-beratung-page main .beratung-workflow-section h1,
body.ki-beratung-page main .beratung-workflow-section h2,
body.ki-beratung-page main .beratung-workflow-section h3,
body.ki-beratung-page main .beratung-faq-section h1,
body.ki-beratung-page main .beratung-faq-section h2,
body.ki-beratung-page main .beratung-faq-section h3,
body.ki-beratung-page main .beratung-faq-section summary {
  color: #07111c !important;
  -webkit-text-fill-color: #07111c !important;
}

body.ki-beratung-page main .beratung-problem-section p,
body.ki-beratung-page main .beratung-problem-section li,
body.ki-beratung-page main .beratung-feature-section p,
body.ki-beratung-page main .beratung-feature-section li,
body.ki-beratung-page main .beratung-feature-section span:not(.material-symbols-outlined),
body.ki-beratung-page main .beratung-expect-section p,
body.ki-beratung-page main .beratung-expect-section li,
body.ki-beratung-page main .beratung-expect-section span:not(.material-symbols-outlined),
body.ki-beratung-page main .beratung-services-section p,
body.ki-beratung-page main .beratung-services-section li,
body.ki-beratung-page main .beratung-workflow-section p,
body.ki-beratung-page main .beratung-workflow-section li,
body.ki-beratung-page main .beratung-workflow-section em,
body.ki-beratung-page main .beratung-faq-section p,
body.ki-beratung-page main .beratung-faq-section li {
  color: #4a5563 !important;
  -webkit-text-fill-color: #4a5563 !important;
}

html body.ki-dienste-page main :where(.dienste-spine-item),
html body.ki-dienste-page main :where(.dienste-spine-item),
html body.ki-beratung-page main :where(.beratung-why-section, .beratung-service-card--dark, .beratung-trust-section, .beratung-trust-cards article) {
  color: #f7f9fb !important;
  -webkit-text-fill-color: #f7f9fb !important;
}

html body.ki-dienste-page main :where(.dienste-spine-item) :where(h1, h2, h3, h4, h5, h6, strong, b, span:not(.material-symbols-outlined)),
html body.ki-dienste-page main :where(.dienste-spine-item) :where(h1, h2, h3, h4, h5, h6, strong, b, span:not(.material-symbols-outlined)),
html body.ki-beratung-page main :where(.beratung-why-section, .beratung-service-card--dark, .beratung-trust-section, .beratung-trust-cards article) :where(h1, h2, h3, h4, h5, h6, strong, b, span:not(.material-symbols-outlined)) {
  color: #f7f9fb !important;
  -webkit-text-fill-color: #f7f9fb !important;
}

html body.ki-dienste-page main :where(.dienste-spine-item) :where(p, li, small, dd),
html body.ki-dienste-page main :where(.dienste-spine-item) :where(p, li, small, dd),
html body.ki-beratung-page main :where(.beratung-why-section, .beratung-service-card--dark, .beratung-trust-section, .beratung-trust-cards article) :where(p, li, small, dd) {
  color: rgba(239, 241, 243, 0.86) !important;
  -webkit-text-fill-color: rgba(239, 241, 243, 0.86) !important;
}

html body main :where(.hero-scene__primary, .btn-primary, .term-btn--primary, .usecase-overview__primary, .usecase-overview__cta-link, .contact-submit, .saa-cookie-banner__primary) {
  background-color: #d91e18 !important;
  border-color: #d91e18 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body main :where(.hero-scene__primary, .btn-primary, .term-btn--primary, .usecase-overview__primary, .usecase-overview__cta-link, .contact-submit, .saa-cookie-banner__primary) * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body main .beratung-final-panel,
html body main .beratung-final-panel :where(h1, h2, h3, p, li, small, strong, span:not(.material-symbols-outlined), a:not(.hero-scene__primary)) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}

body.ki-beratung-page main .beratung-why-section h1,
body.ki-beratung-page main .beratung-why-section h2,
body.ki-beratung-page main .beratung-why-section h3,
body.ki-beratung-page main .beratung-why-section h4,
body.ki-beratung-page main .beratung-why-section h5,
body.ki-beratung-page main .beratung-why-section h6,
body.ki-beratung-page main .beratung-why-section strong,
body.ki-beratung-page main .beratung-why-section span:not(.material-symbols-outlined),
body.ki-beratung-page main .beratung-final-panel h1,
body.ki-beratung-page main .beratung-final-panel h2,
body.ki-beratung-page main .beratung-final-panel h3,
body.ki-beratung-page main .beratung-final-panel p,
body.ki-beratung-page main .beratung-final-panel span:not(.material-symbols-outlined) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}

body.ki-beratung-page main .beratung-why-section p,
body.ki-beratung-page main .beratung-why-section li,
body.ki-beratung-page main .beratung-why-section small,
body.ki-beratung-page main .beratung-why-section dd {
  color: rgba(239, 241, 243, 0.86) !important;
  -webkit-text-fill-color: rgba(239, 241, 243, 0.86) !important;
  opacity: 1 !important;
}

body main .hero-scene .hero-scene__secondary,
body main .hero-scene .hero-scene__secondary * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.72) !important;
}

body.ki-dienste-page main .dienste-practice-card:not(.dienste-practice-card--dark) h1,
body.ki-dienste-page main .dienste-practice-card:not(.dienste-practice-card--dark) h2,
body.ki-dienste-page main .dienste-practice-card:not(.dienste-practice-card--dark) h3,
body.ki-dienste-page main .dienste-practice-card:not(.dienste-practice-card--dark) a,
body.ki-dienste-page main .dienste-transition-map article strong,
body.ki-dienste-page main .dienste-flow-grid article h3,
body.ki-dienste-page main .dienste-industry-grid article strong,
body.ki-beratung-page main .beratung-strip span,
body.ki-beratung-page main .beratung-feature-section strong,
body.ki-beratung-page main .beratung-workflow-section em {
  color: #07111c !important;
  -webkit-text-fill-color: #07111c !important;
  opacity: 1 !important;
}

body.ki-dienste-page main .dienste-practice-card:not(.dienste-practice-card--dark) p,
body.ki-dienste-page main .dienste-transition-map article span,
body.ki-dienste-page main .dienste-flow-grid article p,
body.ki-dienste-page main .dienste-industry-grid article p,
body.ki-beratung-page main .beratung-feature-section span:not(.material-symbols-outlined) {
  color: #445160 !important;
  -webkit-text-fill-color: #445160 !important;
  opacity: 1 !important;
}

body.ki-dienste-page main .dienste-practice-card--dark h1,
body.ki-dienste-page main .dienste-practice-card--dark h2,
body.ki-dienste-page main .dienste-practice-card--dark h3,
body.ki-dienste-page main .dienste-practice-card--dark p,
body.ki-dienste-page main .dienste-final-panel h1,
body.ki-dienste-page main .dienste-final-panel h2,
body.ki-dienste-page main .dienste-final-panel h3,
body.ki-dienste-page main .dienste-final-panel p,
body.ki-beratung-page main .beratung-service-card--dark h1,
body.ki-beratung-page main .beratung-service-card--dark h2,
body.ki-beratung-page main .beratung-service-card--dark h3,
body.ki-beratung-page main .beratung-service-card--dark p,
body.ki-beratung-page main .beratung-service-card--dark li {
  color: #f7f9fb !important;
  -webkit-text-fill-color: #f7f9fb !important;
  opacity: 1 !important;
}

html body.ki-beratung-page main section.beratung-why-section h1,
html body.ki-beratung-page main section.beratung-why-section h2,
html body.ki-beratung-page main section.beratung-why-section h3,
html body.ki-beratung-page main section.beratung-why-section h4,
html body.ki-beratung-page main section.beratung-why-section h5,
html body.ki-beratung-page main section.beratung-why-section h6,
html body.ki-beratung-page main section.beratung-services-section article.beratung-service-card--dark h1,
html body.ki-beratung-page main section.beratung-services-section article.beratung-service-card--dark h2,
html body.ki-beratung-page main section.beratung-services-section article.beratung-service-card--dark h3,
html body.ki-beratung-page main section.beratung-services-section article.beratung-service-card--dark h4,
html body.ki-beratung-page main section.beratung-services-section article.beratung-service-card--dark h5,
html body.ki-beratung-page main section.beratung-services-section article.beratung-service-card--dark h6 {
  color: #f7f9fb !important;
  -webkit-text-fill-color: #f7f9fb !important;
  opacity: 1 !important;
}

html body.ki-beratung-page main section.beratung-services-section article.beratung-service-card--dark p,
html body.ki-beratung-page main section.beratung-services-section article.beratung-service-card--dark li,
html body.ki-beratung-page main section.beratung-services-section article.beratung-service-card--dark small,
html body.ki-beratung-page main section.beratung-services-section article.beratung-service-card--dark dd {
  color: rgba(239, 241, 243, 0.86) !important;
  -webkit-text-fill-color: rgba(239, 241, 243, 0.86) !important;
  opacity: 1 !important;
}

html body.ki-beratung-page main section.beratung-why-section.beratung-why-section h1,
html body.ki-beratung-page main section.beratung-why-section.beratung-why-section h2,
html body.ki-beratung-page main section.beratung-why-section.beratung-why-section h3,
html body.ki-beratung-page main section.beratung-why-section.beratung-why-section h4,
html body.ki-beratung-page main section.beratung-why-section.beratung-why-section h5,
html body.ki-beratung-page main section.beratung-why-section.beratung-why-section h6,
html body.ki-beratung-page main section.beratung-services-section article.beratung-service-card.beratung-service-card--dark h1,
html body.ki-beratung-page main section.beratung-services-section article.beratung-service-card.beratung-service-card--dark h2,
html body.ki-beratung-page main section.beratung-services-section article.beratung-service-card.beratung-service-card--dark h3,
html body.ki-beratung-page main section.beratung-services-section article.beratung-service-card.beratung-service-card--dark h4,
html body.ki-beratung-page main section.beratung-services-section article.beratung-service-card.beratung-service-card--dark h5,
html body.ki-beratung-page main section.beratung-services-section article.beratung-service-card.beratung-service-card--dark h6 {
  color: #f7f9fb !important;
  -webkit-text-fill-color: #f7f9fb !important;
  opacity: 1 !important;
}

/* Surface contrast authority 2026-06-29w: exact repeated failures from QA markers. */
html body.ki-beratung-page main .beratung-proof-list > div,
html body.ki-beratung-page main .beratung-flow-line article > em,
html body.home-page main .home-offer-card:not(.bg-graphite),
html body.academy-page main .academy-pathway-node {
  background-color: #ffffff !important;
  border-color: #cfd8e3 !important;
  color: #07111c !important;
  -webkit-text-fill-color: #07111c !important;
  opacity: 1 !important;
}

html body.ki-beratung-page main .beratung-proof-list > div :where(strong, span, p, small),
html body.ki-beratung-page main .beratung-flow-line article > em,
html body.home-page main .home-offer-card:not(.bg-graphite) :where(h1, h2, h3, h4, h5, h6, strong, b, em, label, span:not(.material-symbols-outlined), a:not(.hero-scene__primary)),
html body.academy-page main .academy-pathway-node :where(strong, h1, h2, h3, h4, h5, h6, span:not(.material-symbols-outlined)) {
  color: #07111c !important;
  -webkit-text-fill-color: #07111c !important;
  opacity: 1 !important;
}

html body.home-page main .home-offer-card:not(.bg-graphite) :where(p, li, small, dd, .text-on-surface-variant, .text-surface-variant, .text-tertiary),
html body.academy-page main .academy-pathway-node :where(p, li, small, dd, .text-on-surface-variant, .text-surface-variant, .text-tertiary) {
  color: #445160 !important;
  -webkit-text-fill-color: #445160 !important;
  opacity: 1 !important;
}

html body.ki-beratung-page main .beratung-proof-list > div .material-symbols-outlined,
html body.home-page main .home-offer-card:not(.bg-graphite) .material-symbols-outlined,
html body.academy-page main .academy-pathway-node .material-symbols-outlined {
  color: #d91e18 !important;
  -webkit-text-fill-color: #d91e18 !important;
}

/* Design QA stabilization 2026-06-29ab.
   Locks recurring surfaces before visual polish: no unreadable text, no card drift. */
@media (min-width: 1025px) {
  html body.home-page main .swiss-grid:has(.home-offer-card) {
    align-items: stretch !important;
  }

  html body.home-page main .swiss-grid > div:has(> .home-offer-card) {
    display: flex !important;
    min-width: 0 !important;
  }

  html body.home-page main .home-offer-card {
    width: 100% !important;
    height: 100% !important;
    min-height: 630px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    transform: none;
  }

  html body.home-page main .home-offer-card .visual-media--tile {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    height: auto !important;
    margin: 0 0 34px !important;
    overflow: hidden !important;
  }

  html body.home-page main .home-offer-card .visual-media--tile img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

html body.home-page main .home-offer-card {
  transition: border-color .22s ease, box-shadow .22s ease, background-color .22s ease !important;
}

html body.home-page main .home-offer-card:hover {
  transform: none !important;
  box-shadow: 0 24px 70px rgba(7, 17, 28, .14) !important;
}

html body.ki-dienste-page main .dienste-final-panel,
html body.ki-dienste-page main .dienste-final-panel h1,
html body.ki-dienste-page main .dienste-final-panel h2,
html body.ki-dienste-page main .dienste-final-panel h3,
html body.ki-dienste-page main .dienste-final-panel strong,
html body.ki-dienste-page main .dienste-final-panel span:not(.material-symbols-outlined) {
  color: #f7f9fb !important;
  -webkit-text-fill-color: #f7f9fb !important;
  opacity: 1 !important;
}

html body.ki-dienste-page main .dienste-final-panel p,
html body.ki-dienste-page main .dienste-final-panel li,
html body.ki-dienste-page main .dienste-final-panel small {
  color: rgba(239, 241, 243, .9) !important;
  -webkit-text-fill-color: rgba(239, 241, 243, .9) !important;
  opacity: 1 !important;
}

html body.wissen-page main section.wissen-feature,
html body.wissen-page main section.wissen-feature .wissen-feature-line {
  background-color: #ffffff !important;
  color: #07111c !important;
  -webkit-text-fill-color: #07111c !important;
}

html body.wissen-page main section.wissen-feature .wissen-feature-line h1,
html body.wissen-page main section.wissen-feature .wissen-feature-line h2,
html body.wissen-page main section.wissen-feature .wissen-feature-line h3,
html body.wissen-page main section.wissen-feature .wissen-feature-line strong,
html body.wissen-page main section.wissen-feature .wissen-feature-line span:not(.material-symbols-outlined) {
  color: #07111c !important;
  -webkit-text-fill-color: #07111c !important;
  opacity: 1 !important;
}

html body.wissen-page main section.wissen-feature .wissen-feature-line p,
html body.wissen-page main section.wissen-feature .wissen-steps p {
  color: #445160 !important;
  -webkit-text-fill-color: #445160 !important;
  opacity: 1 !important;
}

html body.academy-page main section.academy-program-intro {
  background-color: #07111c !important;
  color: #f7f9fb !important;
  -webkit-text-fill-color: #f7f9fb !important;
}

html body.academy-page main section.academy-program-intro .academy-intro-copy h1,
html body.academy-page main section.academy-program-intro .academy-intro-copy h2,
html body.academy-page main section.academy-program-intro .academy-intro-copy h3,
html body.academy-page main section.academy-program-intro .academy-intro-mark span {
  color: #f7f9fb !important;
  -webkit-text-fill-color: #f7f9fb !important;
  opacity: 1 !important;
}

html body.academy-page main section.academy-program-intro .academy-intro-copy p {
  color: rgba(239, 241, 243, .86) !important;
  -webkit-text-fill-color: rgba(239, 241, 243, .86) !important;
  opacity: 1 !important;
}

html body.ki-dienste-page main .dienste-spine-item {
  min-width: 0 !important;
  overflow: visible !important;
}

html body.ki-dienste-page main .dienste-spine-item h3,
html body.ki-dienste-page main .dienste-spine-item p {
  max-width: 100% !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

@media (min-width: 700px) {
  html body.home-page main .home-offer-card.home-offer-card {
    min-height: 590px !important;
  }
}

html body.ki-dienste-page.ki-dienste-page main .dienste-final-section .dienste-final-panel.dienste-final-panel > p,
html body.ki-dienste-page.ki-dienste-page main .dienste-final-section .dienste-final-panel.dienste-final-panel p {
  color: rgba(239, 241, 243, .9) !important;
  -webkit-text-fill-color: rgba(239, 241, 243, .9) !important;
  opacity: 1 !important;
}

/* System validation fixes 2026-06-29ad: nav contrast, red footer proofs, white footer logo. */
@media (max-width: 1024px) {
  html body nav.site-header.is-mobile-nav-open [data-mobile-nav-panel],
  html body nav.is-mobile-nav-open [data-mobile-nav-panel] {
    background: #07111c !important;
    border-color: rgba(247, 249, 251, .18) !important;
    box-shadow: 0 32px 80px rgba(0, 0, 0, .38) !important;
  }

  html body nav.site-header.is-mobile-nav-open [data-mobile-nav-panel] a,
  html body nav.is-mobile-nav-open [data-mobile-nav-panel] a {
    color: #f7f9fb !important;
    -webkit-text-fill-color: #f7f9fb !important;
    opacity: 1 !important;
    border-color: rgba(247, 249, 251, .18) !important;
    text-shadow: none !important;
  }

  html body nav.site-header.is-mobile-nav-open [data-mobile-nav-panel] a:hover,
  html body nav.site-header.is-mobile-nav-open [data-mobile-nav-panel] a:focus-visible,
  html body nav.site-header.is-mobile-nav-open [data-mobile-nav-panel] a.is-active,
  html body nav.is-mobile-nav-open [data-mobile-nav-panel] a:hover,
  html body nav.is-mobile-nav-open [data-mobile-nav-panel] a:focus-visible,
  html body nav.is-mobile-nav-open [data-mobile-nav-panel] a.is-active {
    color: #ff312b !important;
    -webkit-text-fill-color: #ff312b !important;
  }
}

html body footer.saa-footer .footer-logo,
html body footer.saa-footer img.footer-logo,
html body .saa-footer .footer-logo {
  filter: brightness(0) invert(1) grayscale(1) contrast(12) !important;
  opacity: 1 !important;
}

html body footer.saa-footer .saa-footer__proof,
html body footer.saa-footer .saa-footer__proof *,
html body footer.saa-footer .saa-footer__proof strong,
html body footer.saa-footer .saa-footer__proof .material-symbols-outlined {
  color: #ff312b !important;
  -webkit-text-fill-color: #ff312b !important;
  opacity: 1 !important;
}

/* Audit closure 2026-06-29af: remaining contrast and viewport guarantees. */
html body :where(.hero-scene__primary, .btn-primary, .term-btn--primary, .usecase-overview__primary, .usecase-overview__cta-link, .contact-submit, .saa-cookie-banner__primary),
html body main :where(.hero-scene__primary, .btn-primary, .term-btn--primary, .usecase-overview__primary, .usecase-overview__cta-link, .contact-submit),
html body .saa-cookie-banner__primary {
  background: #d91e18 !important;
  background-color: #d91e18 !important;
  border-color: #d91e18 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}

html body :where(.hero-scene__primary, .btn-primary, .term-btn--primary, .usecase-overview__primary, .usecase-overview__cta-link, .contact-submit, .saa-cookie-banner__primary) *,
html body main :where(.hero-scene__primary, .btn-primary, .term-btn--primary, .usecase-overview__primary, .usecase-overview__cta-link, .contact-submit) *,
html body .saa-cookie-banner__primary * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}

html body .saa-cookie-banner__secondary,
html body .saa-cookie-banner__secondary:visited {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: rgba(7, 17, 28, .34) !important;
  color: #07111c !important;
  -webkit-text-fill-color: #07111c !important;
  opacity: 1 !important;
}

html body .saa-cookie-banner__secondary *,
html body .saa-cookie-banner__secondary:visited * {
  color: #07111c !important;
  -webkit-text-fill-color: #07111c !important;
  opacity: 1 !important;
}

@media (min-width: 1025px) {
  html body.home-page main .home-system-shell {
    grid-template-columns: minmax(0, .86fr) minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  html body.home-page main .home-system-map.home-agent-board {
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  html body.home-page main .home-agent-board__top,
  html body.home-page main .home-agent-board__flow,
  html body.home-page main .home-agent-board__stack,
  html body.home-page main .home-agent-board__result {
    max-width: 100% !important;
  }
}

html body.term-page main img,
html body.termin-page main img,
html body.termin-agent-page main img {
  max-width: 100% !important;
}

html body main a.hero-scene__primary.hero-scene__primary,
html body main button.contact-submit.contact-submit,
html body main a.btn-primary.btn-primary,
html body main a.term-btn--primary.term-btn--primary,
html body main a.usecase-overview__primary.usecase-overview__primary,
html body main a.usecase-overview__cta-link.usecase-overview__cta-link,
html body .saa-cookie-banner button.saa-cookie-banner__primary.saa-cookie-banner__primary {
  background: #d91e18 !important;
  background-color: #d91e18 !important;
  border-color: #d91e18 !important;
}

/* KI-Loesungen Variante Zwei 2026-06-29. */
html body.usecase-v2-page {
  background: #fbfcfe !important;
  color: #07111c !important;
}

.usecase-v2-main {
  background:
    radial-gradient(circle at 76% 18%, rgba(255, 49, 43, .08), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #fbfcfe 48%, #f6f8fb 100%);
  color: #07111c;
  overflow: hidden;
}

.usecase-v2-shell {
  margin: 0 auto;
  max-width: 1320px;
  padding-left: clamp(22px, 4vw, 56px);
  padding-right: clamp(22px, 4vw, 56px);
}

.usecase-v2-hero {
  padding: clamp(120px, 12vw, 170px) 0 clamp(66px, 8vw, 106px);
}

.usecase-v2-hero__grid {
  align-items: center;
  display: grid;
  gap: clamp(44px, 6vw, 86px);
  grid-template-columns: minmax(0, .78fr) minmax(560px, 1fr);
}

.usecase-v2-eyebrow {
  color: #d91e18 !important;
  display: block;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.usecase-v2-hero h1 {
  color: #07111c !important;
  font-size: clamp(48px, 5.8vw, 82px);
  font-weight: 900;
  letter-spacing: 0;
  line-height: .98;
  margin: 24px 0;
}

.usecase-v2-hero h1 span {
  color: #e01914 !important;
  display: block;
}

.usecase-v2-hero p,
.usecase-v2-section-head p,
.usecase-v2-card p,
.usecase-v2-next p {
  color: #4a5565 !important;
  -webkit-text-fill-color: #4a5565 !important;
  font-size: 18px;
  line-height: 1.7;
}

.usecase-v2-hero__copy > p {
  max-width: 560px;
}

.usecase-v2-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 36px;
}

.usecase-v2-primary,
.usecase-v2-secondary {
  align-items: center;
  border-radius: 6px;
  display: inline-flex;
  font-size: 14px;
  font-weight: 900;
  gap: 12px;
  min-height: 54px;
  padding: 0 24px;
  text-decoration: none;
}

.usecase-v2-primary {
  background: #d91e18 !important;
  border: 1px solid #d91e18 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 18px 44px rgba(217, 30, 24, .22);
}

.usecase-v2-primary * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.usecase-v2-secondary {
  background: #ffffff !important;
  border: 1px solid #d7dde7 !important;
  color: #07111c !important;
  -webkit-text-fill-color: #07111c !important;
}

.usecase-v2-hub {
  aspect-ratio: 16 / 10;
  min-height: 430px;
  position: relative;
}

.usecase-v2-hub__core {
  align-items: center;
  background: rgba(255, 255, 255, .92);
  border: 2px solid #ff312b;
  border-radius: 10px;
  box-shadow: 0 24px 70px rgba(217, 30, 24, .18), 0 0 0 12px rgba(255, 49, 43, .05);
  color: #ff312b !important;
  display: flex;
  font-size: 48px;
  font-weight: 900;
  height: 112px;
  justify-content: center;
  left: 50%;
  line-height: 1;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 112px;
  z-index: 5;
}

.usecase-v2-hub__item {
  align-items: center;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(217, 30, 24, .08);
  border-radius: 10px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, .06);
  display: grid;
  gap: 2px 14px;
  grid-template-columns: 34px minmax(0, 1fr);
  min-height: 88px;
  padding: 18px 20px;
  position: absolute;
  width: 205px;
  z-index: 4;
}

.usecase-v2-hub__item .material-symbols-outlined {
  color: #ff312b !important;
  -webkit-text-fill-color: #ff312b !important;
  font-size: 32px;
  grid-row: 1 / span 2;
}

.usecase-v2-hub__item strong {
  color: #07111c !important;
  -webkit-text-fill-color: #07111c !important;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.18;
}

.usecase-v2-hub__item small {
  color: #283444 !important;
  -webkit-text-fill-color: #283444 !important;
  font-size: 12px;
  font-weight: 600;
}

.usecase-v2-hub__item--doc { left: 18%; top: 10%; transform: translate(-50%, -50%); }
.usecase-v2-hub__item--calendar { left: 76%; top: 10%; transform: translate(-50%, -50%); }
.usecase-v2-hub__item--data { left: 86%; top: 48%; transform: translate(-50%, -50%); }
.usecase-v2-hub__item--process { left: 75%; top: 84%; transform: translate(-50%, -50%); }
.usecase-v2-hub__item--room { left: 29%; top: 84%; transform: translate(-50%, -50%); }
.usecase-v2-hub__item--call { left: 14%; top: 50%; transform: translate(-50%, -50%); }

.usecase-v2-hub__line {
  background: linear-gradient(90deg, rgba(255, 49, 43, .46), rgba(255, 49, 43, .06));
  height: 1px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform-origin: left center;
  z-index: 1;
}

.usecase-v2-hub__line--doc { transform: rotate(226deg); width: 190px; }
.usecase-v2-hub__line--calendar { transform: rotate(313deg); width: 190px; }
.usecase-v2-hub__line--data { transform: rotate(0deg); width: 218px; }
.usecase-v2-hub__line--process { transform: rotate(50deg); width: 196px; }
.usecase-v2-hub__line--room { transform: rotate(132deg); width: 174px; }
.usecase-v2-hub__line--call { transform: rotate(180deg); width: 194px; }

.usecase-v2-catalogue {
  padding: clamp(48px, 7vw, 92px) 0 clamp(54px, 7vw, 96px);
}

.usecase-v2-section-head {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, .7fr) minmax(320px, .72fr);
  margin-bottom: 54px;
}

.usecase-v2-section-head .usecase-v2-eyebrow {
  grid-column: 1 / -1;
}

.usecase-v2-section-head h2,
.usecase-v2-next h2 {
  color: #07111c !important;
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 900;
  line-height: 1.06;
  margin: 0;
}

.usecase-v2-roadmap {
  display: grid;
  gap: clamp(28px, 4vw, 54px) clamp(34px, 5vw, 74px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  position: relative;
}

.usecase-v2-roadmap::before {
  background:
    radial-gradient(circle, #ff312b 0 4px, transparent 5px),
    linear-gradient(90deg, transparent 0, transparent 20%, rgba(255, 49, 43, .5) 20% 22%, transparent 22% 100%);
  border: 0;
  content: "";
  inset: 13% 7% 15%;
  opacity: .55;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.usecase-v2-card {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(118px, .7fr) minmax(0, 1fr);
  min-width: 0;
  position: relative;
  z-index: 1;
}

.usecase-v2-card figure {
  align-self: start;
  aspect-ratio: 1 / 1;
  margin: 0;
  overflow: hidden;
}

.usecase-v2-card img {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.usecase-v2-card h3 {
  color: #07111c !important;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.15;
  margin: 0 0 10px;
}

.usecase-v2-card p {
  font-size: 14px;
  line-height: 1.58;
  margin: 0 0 18px;
}

.usecase-v2-card a {
  align-items: center;
  border: 1px solid #ff312b;
  border-radius: 999px;
  color: #ff312b !important;
  display: inline-flex;
  height: 30px;
  justify-content: center;
  text-decoration: none;
  width: 30px;
}

.usecase-v2-card a .material-symbols-outlined {
  color: #ff312b !important;
  font-size: 18px;
}

.usecase-v2-next {
  padding: 0 0 clamp(56px, 8vw, 104px);
}

.usecase-v2-next__grid {
  align-items: center;
  background:
    radial-gradient(circle at 84% 40%, rgba(255, 49, 43, .08), transparent 28%),
    linear-gradient(135deg, #ffffff 0%, #fff7f6 100%);
  border: 1px solid #e4e9f0;
  border-radius: 8px;
  display: grid;
  gap: 42px;
  grid-template-columns: minmax(0, .75fr) minmax(340px, .8fr);
  padding-bottom: clamp(36px, 5vw, 64px);
  padding-top: clamp(36px, 5vw, 64px);
}

.usecase-v2-next ul {
  display: grid;
  gap: 18px;
  list-style: none;
  margin: 28px 0 28px;
  padding: 0;
}

.usecase-v2-next li {
  align-items: flex-start;
  display: flex;
  gap: 14px;
}

.usecase-v2-next li > .material-symbols-outlined {
  color: #ff312b !important;
  font-size: 28px;
}

.usecase-v2-next strong {
  color: #07111c !important;
  display: block;
  font-weight: 900;
  margin-bottom: 4px;
}

.usecase-v2-next figure {
  margin: 0;
}

.usecase-v2-next img {
  display: block;
  height: auto;
  margin: 0 auto;
  max-width: 520px;
  width: 100%;
}

@media (max-width: 1100px) {
  .usecase-v2-hero__grid,
  .usecase-v2-section-head,
  .usecase-v2-next__grid {
    grid-template-columns: 1fr;
  }

  .usecase-v2-hub {
    min-height: 390px;
  }

  .usecase-v2-roadmap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .usecase-v2-hero {
    padding-top: 112px;
  }

  .usecase-v2-actions,
  .usecase-v2-primary,
  .usecase-v2-secondary {
    width: 100%;
  }

  .usecase-v2-primary,
  .usecase-v2-secondary {
    justify-content: center;
  }

  .usecase-v2-hub {
    aspect-ratio: auto;
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .usecase-v2-hub__core,
  .usecase-v2-hub__item {
    left: auto;
    position: relative;
    top: auto;
    transform: none;
  }

  .usecase-v2-hub__core {
    justify-self: center;
  }

  .usecase-v2-hub__item {
    width: 100%;
  }

  .usecase-v2-hub__line {
    display: none;
  }

  .usecase-v2-roadmap {
    grid-template-columns: 1fr;
  }

  .usecase-v2-roadmap::before {
    content: none;
  }

  .usecase-v2-card {
    grid-template-columns: 116px minmax(0, 1fr);
  }
}

@media (max-width: 460px) {
  .usecase-v2-card {
    grid-template-columns: 1fr;
  }

  .usecase-v2-card figure {
    max-width: 210px;
  }
}

/* KI-Loesungen hero hub visual 2026-06-29. */


















































/* KI-Loesungen V2 mockup route section 2026-06-29. */
html body.usecase-v2-page .usecase-v2-catalogue {
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 49, 43, .035), transparent 22%),
    radial-gradient(circle at 78% 70%, rgba(255, 49, 43, .045), transparent 26%),
    #ffffff !important;
  color: #07111c !important;
  padding: clamp(54px, 7vw, 96px) 0 clamp(64px, 8vw, 112px) !important;
}

html body.usecase-v2-page .usecase-v2-section-head {
  align-items: end !important;
  display: grid !important;
  gap: 22px clamp(40px, 6vw, 90px) !important;
  grid-template-columns: minmax(300px, .64fr) minmax(320px, .76fr) !important;
  margin-bottom: clamp(44px, 5.5vw, 74px) !important;
}

html body.usecase-v2-page .usecase-v2-section-head h2 {
  color: #07111c !important;
  -webkit-text-fill-color: #07111c !important;
  max-width: 520px !important;
}

html body.usecase-v2-page .usecase-v2-section-head p {
  color: #586473 !important;
  -webkit-text-fill-color: #586473 !important;
  font-size: clamp(16px, 1.35vw, 19px) !important;
  line-height: 1.68 !important;
  max-width: 560px !important;
}

html body.usecase-v2-page .usecase-v2-roadmap {
  align-items: start !important;
  display: grid !important;
  gap: clamp(48px, 5.2vw, 82px) clamp(34px, 5.5vw, 86px) !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  min-height: 1120px !important;
  overflow: visible !important;
  padding: 12px 0 34px !important;
  position: relative !important;
}

html body.usecase-v2-page .usecase-v2-roadmap::before {
  content: none !important;
}

html body.usecase-v2-page .usecase-v2-roadmap__path {
  display: block !important;
  height: calc(100% - 120px) !important;
  inset: 64px 2% 56px !important;
  overflow: visible !important;
  pointer-events: none !important;
  position: absolute !important;
  width: 96% !important;
  z-index: 0 !important;
}

html body.usecase-v2-page .usecase-v2-roadmap__path path {
  animation: usecase-v2-route-dash 18s linear infinite;
  fill: none !important;
  filter: drop-shadow(0 12px 18px rgba(255, 49, 43, .16)) !important;
  opacity: .9 !important;
  stroke: #ff312b !important;
  stroke-dasharray: 5 12 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  stroke-width: 2.6 !important;
}

html body.usecase-v2-page .usecase-v2-rope-runner {
  fill: #ff312b !important;
  filter: drop-shadow(0 0 10px rgba(255, 49, 43, .5)) !important;
  opacity: .95 !important;
}

html body.usecase-v2-page .usecase-v2-rope-runner--slow {
  fill: #ffffff !important;
  stroke: #ff312b !important;
  stroke-width: 3 !important;
}

html body.usecase-v2-page .usecase-v2-card {
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display: grid !important;
  gap: clamp(16px, 2vw, 28px) !important;
  grid-template-columns: minmax(118px, clamp(132px, 12.5vw, 184px)) minmax(0, 1fr) !important;
  min-height: clamp(168px, 16vw, 218px) !important;
  min-width: 0 !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

html body.usecase-v2-page .usecase-v2-card::after {
  background: #ff312b !important;
  border: 3px solid #ffffff !important;
  border-radius: 999px !important;
  box-shadow: 0 0 0 3px rgba(255, 49, 43, .15), 0 12px 26px rgba(255, 49, 43, .22) !important;
  content: "" !important;
  height: 12px !important;
  left: clamp(84px, 10vw, 148px) !important;
  pointer-events: none !important;
  position: absolute !important;
  top: calc(100% - 10px) !important;
  width: 12px !important;
  z-index: 2 !important;
}

html body.usecase-v2-page .usecase-v2-card figure {
  align-self: center !important;
  aspect-ratio: 1 / 1 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  max-width: 190px !important;
  overflow: visible !important;
  width: 100% !important;
}

html body.usecase-v2-page .usecase-v2-card img {
  display: block !important;
  filter: drop-shadow(0 18px 26px rgba(7, 17, 28, .08)) !important;
  height: 100% !important;
  object-fit: contain !important;
  width: 100% !important;
}

html body.usecase-v2-page .usecase-v2-card figure::before,
html body.usecase-v2-page .usecase-v2-card figure::after {
  content: "" !important;
  pointer-events: none !important;
  position: absolute !important;
  z-index: 2 !important;
}

html body.usecase-v2-page .usecase-v2-card figure::before {
  background: #ff312b !important;
  border: 4px solid #ffffff !important;
  border-radius: 999px !important;
  box-shadow: 0 0 0 7px rgba(255, 49, 43, .11), 0 14px 30px rgba(255, 49, 43, .2) !important;
  height: 16px !important;
  right: 10px !important;
  top: 10px !important;
  width: 16px !important;
}

html body.usecase-v2-page .usecase-v2-card figure::after {
  border: 1px dashed rgba(255, 49, 43, .38) !important;
  border-radius: 999px !important;
  height: 46px !important;
  left: -14px !important;
  top: -14px !important;
  width: 46px !important;
}

html body.usecase-v2-page .usecase-v2-card > div {
  min-width: 0 !important;
}

html body.usecase-v2-page .usecase-v2-card h3 {
  color: #07111c !important;
  -webkit-text-fill-color: #07111c !important;
  font-size: clamp(17px, 1.55vw, 22px) !important;
  font-weight: 900 !important;
  line-height: 1.14 !important;
  margin: 0 0 10px !important;
  max-width: 260px !important;
  overflow-wrap: anywhere !important;
}

html body.usecase-v2-page .usecase-v2-card p {
  color: #566272 !important;
  -webkit-text-fill-color: #566272 !important;
  font-size: 14px !important;
  line-height: 1.58 !important;
  margin: 0 0 16px !important;
  max-width: 285px !important;
}

html body.usecase-v2-page .usecase-v2-card a {
  align-items: center !important;
  background: #ffffff !important;
  border: 1px solid #ff312b !important;
  border-radius: 999px !important;
  color: #ff312b !important;
  display: inline-flex !important;
  height: 28px !important;
  justify-content: center !important;
  text-decoration: none !important;
  width: 28px !important;
}

html body.usecase-v2-page .usecase-v2-card a .material-symbols-outlined {
  color: #ff312b !important;
  -webkit-text-fill-color: #ff312b !important;
  font-size: 17px !important;
  line-height: 1 !important;
}

html body.usecase-v2-page .usecase-v2-card:nth-of-type(2),
html body.usecase-v2-page .usecase-v2-card:nth-of-type(5),
html body.usecase-v2-page .usecase-v2-card:nth-of-type(8),
html body.usecase-v2-page .usecase-v2-card:nth-of-type(11),
html body.usecase-v2-page .usecase-v2-card:nth-of-type(14) {
  margin-top: clamp(24px, 4vw, 58px) !important;
}

html body.usecase-v2-page .usecase-v2-card:nth-of-type(3),
html body.usecase-v2-page .usecase-v2-card:nth-of-type(6),
html body.usecase-v2-page .usecase-v2-card:nth-of-type(9),
html body.usecase-v2-page .usecase-v2-card:nth-of-type(12),
html body.usecase-v2-page .usecase-v2-card:nth-of-type(15) {
  margin-top: clamp(8px, 2.5vw, 34px) !important;
}

html body.usecase-v2-page .usecase-v2-card:nth-of-type(4n+4) {
  grid-template-columns: minmax(0, 1fr) minmax(118px, clamp(132px, 12.5vw, 184px)) !important;
}

html body.usecase-v2-page .usecase-v2-card:nth-of-type(4n+4) figure {
  grid-column: 2 !important;
}

html body.usecase-v2-page .usecase-v2-card:nth-of-type(4n+4) > div {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

html body.usecase-v2-page .usecase-v2-card:nth-of-type(4n+4)::after {
  left: auto !important;
  right: clamp(84px, 10vw, 148px) !important;
}

@keyframes usecase-v2-route-dash {
  to {
    stroke-dashoffset: -140;
  }
}

@media (max-width: 1100px) {
  html body.usecase-v2-page .usecase-v2-roadmap {
    gap: 42px 34px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    min-height: 0 !important;
  }

  html body.usecase-v2-page .usecase-v2-roadmap__path {
    display: block !important;
    height: calc(100% - 70px) !important;
    inset: 38px 1% 32px !important;
    opacity: .62 !important;
    width: 98% !important;
  }

  html body.usecase-v2-page .usecase-v2-card,
  html body.usecase-v2-page .usecase-v2-card:nth-of-type(4n+4) {
    grid-template-columns: minmax(112px, 150px) minmax(0, 1fr) !important;
    margin-top: 0 !important;
  }

  html body.usecase-v2-page .usecase-v2-card:nth-of-type(4n+4) figure,
  html body.usecase-v2-page .usecase-v2-card:nth-of-type(4n+4) > div {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  html body.usecase-v2-page .usecase-v2-card::after {
    content: none !important;
  }
}

@media (max-width: 720px) {
  html body.usecase-v2-page .usecase-v2-section-head {
    grid-template-columns: 1fr !important;
    margin-bottom: 38px !important;
  }

  html body.usecase-v2-page .usecase-v2-roadmap {
    gap: 28px !important;
    grid-template-columns: 1fr !important;
  }

  html body.usecase-v2-page .usecase-v2-roadmap__path {
    display: none !important;
  }

  html body.usecase-v2-page .usecase-v2-card,
  html body.usecase-v2-page .usecase-v2-card:nth-of-type(4n+4) {
    gap: 16px !important;
    grid-template-columns: 104px minmax(0, 1fr) !important;
    min-height: 136px !important;
  }

  html body.usecase-v2-page .usecase-v2-card h3 {
    font-size: 18px !important;
  }

  html body.usecase-v2-page .usecase-v2-card p {
    font-size: 13.5px !important;
    line-height: 1.52 !important;
  }
}

@media (max-width: 430px) {
  html body.usecase-v2-page .usecase-v2-card,
  html body.usecase-v2-page .usecase-v2-card:nth-of-type(4n+4) {
    grid-template-columns: 92px minmax(0, 1fr) !important;
  }
}

/* KI-Loesungen V2 playful robotic visual pass. */
html body.usecase-v2-page .usecase-v2-card figure {
  position: relative !important;
  transform: translateZ(0) !important;
  transition: transform 220ms ease, filter 220ms ease !important;
}

html body.usecase-v2-page .usecase-v2-card:hover figure {
  filter: saturate(1.04) contrast(1.02) !important;
  transform: translateY(-6px) rotate(-1deg) !important;
}

html body.usecase-v2-page .usecase-v2-card:nth-of-type(1) figure,
html body.usecase-v2-page .usecase-v2-card:nth-of-type(2) figure,
html body.usecase-v2-page .usecase-v2-card:nth-of-type(3) figure {
  aspect-ratio: 4 / 3 !important;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, rgba(255, 49, 43, .7), rgba(7, 17, 28, .12)) border-box !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  box-shadow: 0 24px 46px rgba(7, 17, 28, .12), 0 0 0 8px rgba(255, 49, 43, .035) !important;
  max-width: 218px !important;
  overflow: hidden !important;
}

html body.usecase-v2-page .usecase-v2-card:nth-of-type(1) img,
html body.usecase-v2-page .usecase-v2-card:nth-of-type(2) img,
html body.usecase-v2-page .usecase-v2-card:nth-of-type(3) img {
  filter: none !important;
  object-fit: cover !important;
}

html body.usecase-v2-page .usecase-v2-card:nth-of-type(1) figure::after,
html body.usecase-v2-page .usecase-v2-card:nth-of-type(2) figure::after,
html body.usecase-v2-page .usecase-v2-card:nth-of-type(3) figure::after {
  background:
    linear-gradient(90deg, rgba(255, 49, 43, .92), rgba(255, 49, 43, .18)) 0 0 / 72px 2px no-repeat,
    linear-gradient(180deg, rgba(255, 49, 43, .82), rgba(255, 49, 43, .14)) 0 0 / 2px 54px no-repeat !important;
  border: 0 !important;
  border-radius: 0 !important;
  height: 54px !important;
  left: 0 !important;
  top: 0 !important;
  width: 72px !important;
}

html body.usecase-v2-page .usecase-v2-card:nth-of-type(2) figure {
  transform: translateY(10px) rotate(.8deg) !important;
}

html body.usecase-v2-page .usecase-v2-card:nth-of-type(3) figure {
  transform: translateY(-4px) rotate(-.6deg) !important;
}

html body.usecase-v2-page .usecase-v2-card:nth-of-type(5) figure,
html body.usecase-v2-page .usecase-v2-card:nth-of-type(8) figure,
html body.usecase-v2-page .usecase-v2-card:nth-of-type(12) figure {
  animation: usecase-v2-float 5.8s ease-in-out infinite !important;
}

html body.usecase-v2-page .usecase-v2-card:nth-of-type(7) figure,
html body.usecase-v2-page .usecase-v2-card:nth-of-type(10) figure,
html body.usecase-v2-page .usecase-v2-card:nth-of-type(15) figure {
  animation: usecase-v2-float 6.6s ease-in-out infinite reverse !important;
}

@keyframes usecase-v2-float {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.usecase-v2-page .usecase-v2-card figure,
  html body.usecase-v2-page .usecase-v2-card:nth-of-type(5) figure,
  html body.usecase-v2-page .usecase-v2-card:nth-of-type(8) figure,
  html body.usecase-v2-page .usecase-v2-card:nth-of-type(12) figure,
  html body.usecase-v2-page .usecase-v2-card:nth-of-type(7) figure,
  html body.usecase-v2-page .usecase-v2-card:nth-of-type(10) figure,
  html body.usecase-v2-page .usecase-v2-card:nth-of-type(15) figure {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 720px) {
  html body.usecase-v2-page .usecase-v2-card:nth-of-type(1) figure,
  html body.usecase-v2-page .usecase-v2-card:nth-of-type(2) figure,
  html body.usecase-v2-page .usecase-v2-card:nth-of-type(3) figure {
    aspect-ratio: 1 / 1 !important;
    border-radius: 8px !important;
    max-width: 104px !important;
  }

  html body.usecase-v2-page .usecase-v2-card:nth-of-type(2) figure,
  html body.usecase-v2-page .usecase-v2-card:nth-of-type(3) figure {
    transform: none !important;
  }
}

html body.usecase-v2-page .usecase-v2-primary .material-symbols-outlined {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Global FAQ design system 2026-06-29. */
html body :where(
  .home-faq-section,
  .beratung-faq-section,
  .dienste-faq-section,
  .pa-faq,
  .term-faq,
  .wissen-questions
) {
  background:
    radial-gradient(circle at 14% 20%, rgba(255, 49, 43, .055), transparent 24%),
    linear-gradient(180deg, color-mix(in srgb, var(--saa-bg) 82%, #ffffff 18%) 0%, var(--saa-bg) 100%) !important;
  overflow: hidden !important;
  position: relative !important;
}

html body :where(
  .home-faq-section,
  .beratung-faq-section,
  .dienste-faq-section,
  .pa-faq,
  .term-faq,
  .wissen-questions
)::before {
  background:
    linear-gradient(90deg, rgba(255, 49, 43, .9), rgba(255, 49, 43, .08)) 0 0 / 112px 2px no-repeat,
    linear-gradient(180deg, rgba(255, 49, 43, .8), rgba(255, 49, 43, .06)) 0 0 / 2px 76px no-repeat !important;
  content: "" !important;
  height: 86px !important;
  left: clamp(18px, 5vw, 86px) !important;
  pointer-events: none !important;
  position: absolute !important;
  top: clamp(34px, 4vw, 64px) !important;
  width: 122px !important;
}

html body :where(
  .home-faq-shell,
  .beratung-faq-section .beratung-shell,
  .dienste-faq-section .dienste-shell,
  .pa-faq .pa-container,
  .term-faq .term-container,
  .wissen-questions .wissen-editorial-shell
) {
  display: grid !important;
  gap: clamp(28px, 4vw, 58px) !important;
  grid-template-columns: minmax(260px, .46fr) minmax(0, .86fr) !important;
  max-width: 1280px !important;
  position: relative !important;
  width: min(100% - clamp(32px, 7vw, 120px), 1280px) !important;
  z-index: 1 !important;
}

html body .home-faq-head,
html body :where(.beratung-faq-section, .dienste-faq-section) .dienste-section-head,
html body :where(.beratung-faq-section) .beratung-section-head,
html body .term-faq .term-section-head,
html body .pa-faq .pa-container > div:first-child,
html body .wissen-questions .wissen-editorial-shell > div:first-child {
  align-self: start !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .68)) !important;
  border: 1px solid rgba(226, 232, 240, .9) !important;
  border-radius: 8px !important;
  box-shadow: 0 28px 70px rgba(7, 17, 28, .08) !important;
  margin: 0 !important;
  padding: clamp(24px, 3vw, 38px) !important;
  position: sticky !important;
  top: calc(var(--saa-header-h) + 24px) !important;
}

html body :where(
  .home-faq-head h2,
  .beratung-faq-section h2,
  .dienste-faq-section h2,
  .pa-faq h2,
  .term-faq h2,
  .wissen-questions h2
) {
  color: #07111c !important;
  -webkit-text-fill-color: #07111c !important;
  font-size: clamp(32px, 4vw, 54px) !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  line-height: 1.04 !important;
  margin: 0 !important;
  max-width: 520px !important;
}

html body :where(
  .beratung-faq-section .beratung-section-head p,
  .dienste-faq-section .dienste-section-head p,
  .pa-faq .pa-container > div:first-child p,
  .term-faq .term-section-head p,
  .wissen-questions .wissen-editorial-shell > div:first-child p
) {
  color: #596676 !important;
  -webkit-text-fill-color: #596676 !important;
  font-size: 17px !important;
  line-height: 1.65 !important;
  margin-top: 18px !important;
}

html body :where(
  .home-faq-list,
  .beratung-faq-grid,
  .dienste-faq-grid,
  .pa-faq-list,
  .term-faq__grid,
  .wissen-qa
) {
  display: grid !important;
  gap: 14px !important;
  grid-column: 2 !important;
  margin: 0 !important;
  width: 100% !important;
}

html body :where(
  .home-faq-item,
  .beratung-faq-grid details,
  .dienste-faq-grid details,
  .term-faq__grid details,
  .wissen-qa details,
  .pa-faq-list article
) {
  background:
    linear-gradient(90deg, rgba(255, 49, 43, .03), transparent 42%),
    #ffffff !important;
  border: 1px solid #d8e1eb !important;
  border-radius: 8px !important;
  box-shadow: 0 20px 60px rgba(7, 17, 28, .055) !important;
  color: #07111c !important;
  -webkit-text-fill-color: #07111c !important;
  min-height: 82px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: relative !important;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease !important;
}

html body :where(
  .home-faq-item,
  .beratung-faq-grid details,
  .dienste-faq-grid details,
  .term-faq__grid details,
  .wissen-qa details,
  .pa-faq-list article
)::before {
  background: #ff312b !important;
  content: "" !important;
  height: 100% !important;
  left: 0 !important;
  opacity: .85 !important;
  position: absolute !important;
  top: 0 !important;
  transform: scaleY(.38) !important;
  transform-origin: top !important;
  transition: transform 180ms ease !important;
  width: 4px !important;
}

html body :where(
  .home-faq-item:hover,
  .beratung-faq-grid details:hover,
  .dienste-faq-grid details:hover,
  .term-faq__grid details:hover,
  .wissen-qa details:hover,
  .pa-faq-list article:hover
) {
  border-color: rgba(255, 49, 43, .38) !important;
  box-shadow: 0 26px 70px rgba(7, 17, 28, .08), 0 0 0 1px rgba(255, 49, 43, .08) !important;
  transform: translateY(-2px) !important;
}

html body :where(
  .beratung-faq-grid details[open],
  .dienste-faq-grid details[open],
  .term-faq__grid details[open],
  .wissen-qa details[open]
) {
  border-color: rgba(255, 49, 43, .55) !important;
}

html body :where(
  .beratung-faq-grid details[open],
  .dienste-faq-grid details[open],
  .term-faq__grid details[open],
  .wissen-qa details[open],
  .home-faq-item:has(.faq-content:not(.hidden))
)::before {
  transform: scaleY(1) !important;
}

html body :where(
  .home-faq-item > .flex,
  .beratung-faq-grid summary,
  .dienste-faq-grid summary,
  .term-faq__grid summary,
  .wissen-qa summary
) {
  align-items: center !important;
  color: #07111c !important;
  -webkit-text-fill-color: #07111c !important;
  cursor: pointer !important;
  display: grid !important;
  font-size: clamp(17px, 1.45vw, 20px) !important;
  font-weight: 850 !important;
  gap: 18px !important;
  grid-template-columns: 34px minmax(0, 1fr) 34px !important;
  letter-spacing: 0 !important;
  line-height: 1.24 !important;
  list-style: none !important;
  min-height: 82px !important;
  padding: 20px clamp(20px, 3vw, 32px) 20px clamp(22px, 3vw, 36px) !important;
}

html body :where(
  .beratung-faq-grid summary,
  .dienste-faq-grid summary,
  .term-faq__grid summary,
  .wissen-qa summary
)::-webkit-details-marker {
  display: none !important;
}

html body :where(
  .beratung-faq-grid summary,
  .dienste-faq-grid summary,
  .term-faq__grid summary,
  .wissen-qa summary
)::before,
html body .home-faq-item > .flex::before {
  align-items: center !important;
  background: rgba(255, 49, 43, .08) !important;
  border: 1px solid rgba(255, 49, 43, .2) !important;
  border-radius: 999px !important;
  color: #ff312b !important;
  content: "?" !important;
  display: flex !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  height: 34px !important;
  justify-content: center !important;
  width: 34px !important;
}

html body :where(
  .beratung-faq-grid summary,
  .dienste-faq-grid summary,
  .term-faq__grid summary,
  .wissen-qa summary
)::after {
  align-items: center !important;
  border: 1px solid rgba(7, 17, 28, .16) !important;
  border-radius: 999px !important;
  color: #ff312b !important;
  content: "+" !important;
  display: flex !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  height: 34px !important;
  justify-content: center !important;
  line-height: 1 !important;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease !important;
  width: 34px !important;
}

html body :where(
  .beratung-faq-grid details[open] summary,
  .dienste-faq-grid details[open] summary,
  .term-faq__grid details[open] summary,
  .wissen-qa details[open] summary
)::after {
  background: #ff312b !important;
  border-color: #ff312b !important;
  color: #ffffff !important;
  content: "-" !important;
  transform: rotate(180deg) !important;
}

html body .home-faq-item h4 {
  color: #07111c !important;
  -webkit-text-fill-color: #07111c !important;
  font-size: clamp(17px, 1.45vw, 20px) !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  line-height: 1.24 !important;
  margin: 0 !important;
  text-transform: none !important;
}

html body .home-faq-item .material-symbols-outlined {
  align-items: center !important;
  border: 1px solid rgba(7, 17, 28, .16) !important;
  border-radius: 999px !important;
  color: #ff312b !important;
  display: flex !important;
  font-size: 22px !important;
  height: 34px !important;
  justify-content: center !important;
  width: 34px !important;
}

html body :where(
  .beratung-faq-grid details p,
  .dienste-faq-grid details p,
  .term-faq__grid details p,
  .wissen-qa details p,
  .home-faq-item .faq-content,
  .pa-faq-list article p
) {
  border-top: 1px solid rgba(216, 225, 235, .9) !important;
  color: #4a5868 !important;
  -webkit-text-fill-color: #4a5868 !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  margin: 0 !important;
  padding: 0 clamp(22px, 3vw, 36px) 24px calc(clamp(22px, 3vw, 36px) + 52px) !important;
}

html body :where(.pa-faq-list article) {
  padding: 24px clamp(22px, 3vw, 34px) 26px !important;
}

html body :where(.pa-faq-list article h3) {
  color: #07111c !important;
  -webkit-text-fill-color: #07111c !important;
  font-size: clamp(18px, 1.5vw, 21px) !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  margin: 0 0 14px !important;
  padding-left: 52px !important;
  position: relative !important;
}

html body :where(.pa-faq-list article h3)::before {
  align-items: center !important;
  background: rgba(255, 49, 43, .08) !important;
  border: 1px solid rgba(255, 49, 43, .2) !important;
  border-radius: 999px !important;
  color: #ff312b !important;
  content: "?" !important;
  display: flex !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  height: 34px !important;
  justify-content: center !important;
  left: 0 !important;
  position: absolute !important;
  top: -5px !important;
  width: 34px !important;
}

html body :where(.pa-faq-list article p) {
  border-top: 0 !important;
  padding: 0 0 0 52px !important;
}

@media (max-width: 1024px) {
  html body :where(
    .home-faq-shell,
    .beratung-faq-section .beratung-shell,
    .dienste-faq-section .dienste-shell,
    .pa-faq .pa-container,
    .term-faq .term-container,
    .wissen-questions .wissen-editorial-shell
  ) {
    grid-template-columns: 1fr !important;
  }

  html body :where(
    .home-faq-list,
    .beratung-faq-grid,
    .dienste-faq-grid,
    .pa-faq-list,
    .term-faq__grid,
    .wissen-qa
  ) {
    grid-column: auto !important;
  }

  html body .home-faq-head,
  html body :where(.beratung-faq-section) .beratung-section-head,
  html body :where(.dienste-faq-section) .dienste-section-head,
  html body .term-faq .term-section-head,
  html body .pa-faq .pa-container > div:first-child,
  html body .wissen-questions .wissen-editorial-shell > div:first-child {
    position: relative !important;
    top: auto !important;
  }
}

@media (max-width: 620px) {
  html body :where(
    .home-faq-item > .flex,
    .beratung-faq-grid summary,
    .dienste-faq-grid summary,
    .term-faq__grid summary,
    .wissen-qa summary
  ) {
    grid-template-columns: 30px minmax(0, 1fr) 30px !important;
    min-height: 76px !important;
    padding: 18px 18px 18px 20px !important;
  }

  html body :where(
    .beratung-faq-grid details p,
    .dienste-faq-grid details p,
    .term-faq__grid details p,
    .wissen-qa details p,
    .home-faq-item .faq-content
  ) {
    padding: 0 18px 22px 68px !important;
  }
}

/* KI-Loesungen V2 illustration pass: use complete approved illustrations, not photo crops. */
html body.usecase-v2-page .usecase-v2-card:nth-of-type(1) figure,
html body.usecase-v2-page .usecase-v2-card:nth-of-type(2) figure,
html body.usecase-v2-page .usecase-v2-card:nth-of-type(3) figure {
  aspect-ratio: 1 / 1 !important;
  background:
    radial-gradient(circle at 58% 42%, rgba(255, 49, 43, .08), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(255, 246, 245, .88)) !important;
  border: 1px solid rgba(255, 49, 43, .12) !important;
  border-radius: 16px !important;
  box-shadow: 0 22px 52px rgba(7, 17, 28, .08), 0 0 0 8px rgba(255, 49, 43, .035) !important;
  max-width: 190px !important;
  overflow: visible !important;
  padding: 10px !important;
  transform: none !important;
}

html body.usecase-v2-page .usecase-v2-card:nth-of-type(1) img,
html body.usecase-v2-page .usecase-v2-card:nth-of-type(2) img,
html body.usecase-v2-page .usecase-v2-card:nth-of-type(3) img {
  filter: drop-shadow(0 16px 22px rgba(7, 17, 28, .08)) !important;
  height: 100% !important;
  object-fit: contain !important;
  width: 100% !important;
}

html body.usecase-v2-page .usecase-v2-card:nth-of-type(1) figure::after,
html body.usecase-v2-page .usecase-v2-card:nth-of-type(2) figure::after,
html body.usecase-v2-page .usecase-v2-card:nth-of-type(3) figure::after {
  background: none !important;
  border: 1px dashed rgba(255, 49, 43, .34) !important;
  border-radius: 999px !important;
  height: 48px !important;
  left: -14px !important;
  top: -14px !important;
  width: 48px !important;
}

html body.usecase-v2-page .usecase-v2-card:hover:nth-of-type(1) figure,
html body.usecase-v2-page .usecase-v2-card:hover:nth-of-type(2) figure,
html body.usecase-v2-page .usecase-v2-card:hover:nth-of-type(3) figure {
  transform: translateY(-6px) rotate(-1deg) !important;
}

@media (max-width: 720px) {
  html body.usecase-v2-page .usecase-v2-card:nth-of-type(1) figure,
  html body.usecase-v2-page .usecase-v2-card:nth-of-type(2) figure,
  html body.usecase-v2-page .usecase-v2-card:nth-of-type(3) figure {
    max-width: 104px !important;
    padding: 7px !important;
    transform: none !important;
  }
}

html body.ki-dienste-page main.dienste-main :where(.dienste-problem-section, .dienste-practice-section, .dienste-workflow-section, .dienste-industries-section, .dienste-faq-section)
  :where(h1, h2, h3, h4, h5, h6, strong, summary, label):not(.text-swiss-red):not(.material-symbols-outlined) {
  color: #07111c !important;
  -webkit-text-fill-color: #07111c !important;
  opacity: 1 !important;
}

html body.ki-dienste-page main.dienste-main :where(.dienste-problem-section, .dienste-practice-section, .dienste-workflow-section, .dienste-industries-section, .dienste-faq-section)
  :where(p, li, small, dd, span:not(.text-swiss-red):not(.material-symbols-outlined)) {
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
  opacity: 1 !important;
}

html body.ki-dienste-page main.dienste-main :where(.dienste-spine-item, .dienste-practice-card--dark, .dienste-final-panel)
  :where(h1, h2, h3, h4, h5, h6, strong, summary, label):not(.text-swiss-red):not(.material-symbols-outlined) {
  color: #f7f9fb !important;
  -webkit-text-fill-color: #f7f9fb !important;
  opacity: 1 !important;
}

html body.ki-dienste-page main.dienste-main :where(.dienste-spine-item, .dienste-practice-card--dark, .dienste-final-panel)
  :where(p, li, small, dd, span:not(.text-swiss-red):not(.material-symbols-outlined)) {
  color: rgba(239, 241, 243, .86) !important;
  -webkit-text-fill-color: rgba(239, 241, 243, .86) !important;
  opacity: 1 !important;
}

/* KI-Loesungen V2 flat mockup-style illustrations. */
html body.usecase-v2-page .usecase-v2-illustration {
  align-self: center !important;
  aspect-ratio: 1 / 1 !important;
  background:
    radial-gradient(circle at 74% 18%, rgba(255, 49, 43, .11) 0 4px, transparent 5px),
    radial-gradient(circle at 28% 76%, rgba(255, 49, 43, .08) 0 26px, transparent 27px),
    linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 246, 245, .78)) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: block !important;
  isolation: isolate !important;
  margin: 0 !important;
  max-width: 190px !important;
  overflow: visible !important;
  padding: 0 !important;
  position: relative !important;
  transform: none !important;
  width: 100% !important;
}

html body.usecase-v2-page .usecase-v2-illustration .material-symbols-outlined {
  align-items: center !important;
  background: #ffffff !important;
  border: 2px solid #ff312b !important;
  border-radius: 8px !important;
  box-shadow: 0 14px 30px rgba(255, 49, 43, .12) !important;
  color: #ff312b !important;
  display: flex !important;
  font-size: clamp(42px, 4vw, 60px) !important;
  height: 58% !important;
  justify-content: center !important;
  left: 24% !important;
  line-height: 1 !important;
  position: absolute !important;
  top: 15% !important;
  width: 58% !important;
  z-index: 2 !important;
}

html body.usecase-v2-page .usecase-v2-illustration::before,
html body.usecase-v2-page .usecase-v2-illustration::after,
html body.usecase-v2-page .usecase-v2-illustration i,
html body.usecase-v2-page .usecase-v2-illustration b {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 3 !important;
}

html body.usecase-v2-page .usecase-v2-illustration::before,
html body.usecase-v2-page .usecase-v2-illustration::after {
  background:
    radial-gradient(circle at 50% 12%, #07111c 0 7px, transparent 8px),
    linear-gradient(#ff312b, #ff312b) 50% 30% / 18px 40px no-repeat,
    linear-gradient(115deg, transparent 0 48%, #07111c 49% 55%, transparent 56%) 50% 75% / 34px 38px no-repeat !important;
  height: 76px !important;
  width: 36px !important;
}

html body.usecase-v2-page .usecase-v2-illustration::before {
  bottom: 4px !important;
  left: 4px !important;
}

html body.usecase-v2-page .usecase-v2-illustration::after {
  bottom: 10px !important;
  right: 0 !important;
  transform: scale(.86) !important;
}

html body.usecase-v2-page .usecase-v2-illustration i {
  border-bottom: 2px solid rgba(255, 49, 43, .45) !important;
  border-left: 2px solid rgba(255, 49, 43, .45) !important;
  border-radius: 0 0 0 20px !important;
  bottom: 20px !important;
  height: 34px !important;
  left: 26px !important;
  width: 72% !important;
  z-index: 1 !important;
}

html body.usecase-v2-page .usecase-v2-illustration b {
  background:
    radial-gradient(circle, #ff312b 0 4px, transparent 5px),
    radial-gradient(circle, rgba(255, 49, 43, .35) 0 2px, transparent 3px) 18px 18px / 22px 22px !important;
  height: 54px !important;
  right: 8px !important;
  top: 0 !important;
  width: 64px !important;
  z-index: 1 !important;
}

html body.usecase-v2-page .usecase-v2-illustration--docs .material-symbols-outlined,
html body.usecase-v2-page .usecase-v2-illustration--image .material-symbols-outlined,
html body.usecase-v2-page .usecase-v2-illustration--video .material-symbols-outlined {
  border-radius: 16px !important;
  height: 62% !important;
  left: 18% !important;
  top: 12% !important;
  width: 64% !important;
}

html body.usecase-v2-page .usecase-v2-illustration--search .material-symbols-outlined {
  border-radius: 999px !important;
  transform: rotate(-12deg) !important;
}

html body.usecase-v2-page .usecase-v2-illustration--data .material-symbols-outlined,
html body.usecase-v2-page .usecase-v2-illustration--market .material-symbols-outlined,
html body.usecase-v2-page .usecase-v2-illustration--social .material-symbols-outlined {
  border-radius: 4px !important;
  height: 64% !important;
  left: 20% !important;
  top: 10% !important;
  width: 60% !important;
}

html body.usecase-v2-page .usecase-v2-illustration--immo .material-symbols-outlined,
html body.usecase-v2-page .usecase-v2-illustration--house .material-symbols-outlined {
  border-radius: 6px !important;
  height: 56% !important;
  left: 21% !important;
  top: 18% !important;
  width: 62% !important;
}

html body.usecase-v2-page .usecase-v2-illustration--gastro .material-symbols-outlined,
html body.usecase-v2-page .usecase-v2-illustration--service .material-symbols-outlined {
  border-radius: 999px 999px 10px 10px !important;
}

html body.usecase-v2-page .usecase-v2-card:hover .usecase-v2-illustration {
  transform: translateY(-6px) rotate(-1deg) !important;
}

@media (max-width: 720px) {
  html body.usecase-v2-page .usecase-v2-illustration {
    max-width: 104px !important;
  }

  html body.usecase-v2-page .usecase-v2-illustration .material-symbols-outlined {
    font-size: 34px !important;
  }

  html body.usecase-v2-page .usecase-v2-illustration::before,
  html body.usecase-v2-page .usecase-v2-illustration::after {
    height: 46px !important;
    transform: scale(.72) !important;
    width: 26px !important;
  }
}

/* FAQ final contrast and overflow guard. Keep this after legacy card guards. */
html body :where(
  .home-faq-section,
  .beratung-faq-section,
  .dienste-faq-section,
  .pa-faq,
  .term-faq,
  .wissen-questions
),
html body :where(
  .home-faq-shell,
  .beratung-faq-section .beratung-shell,
  .dienste-faq-section .dienste-shell,
  .pa-faq .pa-container,
  .term-faq .term-container,
  .wissen-questions .wissen-editorial-shell,
  .home-faq-list,
  .beratung-faq-grid,
  .dienste-faq-grid,
  .pa-faq-list,
  .term-faq__grid,
  .wissen-qa,
  .home-faq-item,
  .beratung-faq-grid details,
  .dienste-faq-grid details,
  .pa-faq-list article,
  .term-faq__grid details,
  .wissen-qa details
) {
  box-sizing: border-box !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

html body main :where(
  .home-faq-item,
  .beratung-faq-grid details,
  .dienste-faq-grid details,
  .pa-faq-list article,
  .term-faq__grid details,
  .wissen-qa details
) {
  background:
    linear-gradient(90deg, rgba(255, 49, 43, .035), transparent 44%),
    #ffffff !important;
  background-color: #ffffff !important;
  border-color: #d8e1eb !important;
  color: #07111c !important;
  -webkit-text-fill-color: #07111c !important;
}

html body main :where(
  .home-faq-item h4,
  .beratung-faq-grid summary,
  .dienste-faq-grid summary,
  .pa-faq-list article h3,
  .term-faq__grid summary,
  .wissen-qa summary
) {
  color: #07111c !important;
  -webkit-text-fill-color: #07111c !important;
}

html body main :where(
  .home-faq-item .faq-content,
  .beratung-faq-grid details p,
  .dienste-faq-grid details p,
  .pa-faq-list article p,
  .term-faq__grid details p,
  .wissen-qa details p
) {
  color: #445160 !important;
  -webkit-text-fill-color: #445160 !important;
}

/* ==========================================================================
   v2 — Redesign refinements (Module A/B/E/F/G)
   Typography elegance, hero restructuring, button/card standardization,
   embedded contact form, slimmer footer, "Über uns" homepage section.
   ========================================================================== */

/* --- Module B: Hero eyebrow label --- */
.hero-scene__eyebrow {
  color: rgba(239, 241, 243, 0.65);
  display: block;
  font-family: Inter, Arial, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  margin-bottom: 20px;
  text-transform: uppercase;
}

html .hero-scene__eyebrow {
  color: rgba(7, 17, 28, 0.55);
}

/* --- Module E: Unified button padding / touch target --- */
.hero-scene__primary,
.hero-scene__secondary,
.site-header__cta,
.saa-footer__cta,
.v2-btn-primary {
  align-items: center;
  display: inline-flex;
  gap: 8px;
  min-height: 48px;
  padding: 14px 28px !important;
}

/* --- Module E: Card depth — replace flat "picture frame" borders with soft elevation --- */
.bento-cell,
.saa-signal-card,
.home-offer-card,
.process-card {
  box-shadow: 0 1px 3px rgba(7, 17, 28, 0.06), 0 1px 2px rgba(7, 17, 28, 0.04);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.bento-cell:hover,
.saa-signal-card:hover,
.home-offer-card:hover {
  box-shadow: 0 8px 20px rgba(7, 17, 28, 0.1), 0 2px 6px rgba(7, 17, 28, 0.06);
  transform: translateY(-2px);
}

/* --- Module F: Embedded contact form (homepage) --- */
.v2-contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.v2-contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.v2-contact-form__field label {
  color: var(--saa-text-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.v2-contact-form__field input,
.v2-contact-form__field textarea {
  background: var(--saa-bg);
  border: 1px solid var(--saa-border);
  color: var(--saa-text);
  font-family: Inter, Arial, sans-serif;
  font-size: 15px;
  padding: 12px 16px;
  transition: border-color 0.18s ease, background 0.18s ease;
  width: 100%;
}

.v2-contact-form__field input:focus,
.v2-contact-form__field textarea:focus {
  background: var(--saa-surface);
  border-color: var(--saa-red);
}

.v2-contact-form__field textarea {
  min-height: 96px;
  resize: vertical;
}

.v2-contact-form__submit {
  align-items: center;
  background: var(--saa-cta-red-accessible, #d91e18);
  border: none;
  color: #ffffff !important;
  cursor: pointer;
  display: inline-flex;
  font-family: Inter, Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  gap: 8px;
  justify-content: center;
  letter-spacing: 0.04em;
  margin-top: 4px;
  min-height: 48px;
  padding: 14px 28px;
  text-transform: uppercase;
  transition: opacity 0.18s ease;
}

.v2-contact-form__submit:hover {
  opacity: 0.9;
}

.v2-contact-form__note {
  color: var(--saa-text-muted);
  font-size: 12px;
  margin-top: -8px;
}

/* --- Module G: "Über uns" homepage section --- */
.v2-about-section {
  background: var(--saa-surface);
}

.v2-about-section__copy {
  color: var(--saa-text-muted);
  font-size: 18px;
  line-height: 1.6;
  max-width: 620px;
}

.v2-about-section__link {
  align-items: center;
  color: var(--saa-red);
  display: inline-flex;
  font-weight: 600;
  gap: 6px;
  margin-top: 20px;
  text-decoration: none;
}

.v2-about-section__link:hover {
  text-decoration: underline;
}

/* --- Module F: Slimmer footer --- */
.saa-footer.v2-footer-slim .saa-footer__proofs {
  display: none;
}

.saa-footer.v2-footer-slim .saa-footer__brand p {
  max-width: 360px;
}

/* --- Module D: Undo the legacy "white footer logo" filter hack.
   That rule forced brightness(0) invert(1) on the ENTIRE logo, turning the
   red Swiss-cross square and the white cross bars into the same flat white —
   the cross became indistinguishable, not "missing". v2 ships a clean
   dark-mode SVG (red square, white cross, white wordmark) instead of a
   filtered/forced PNG, so the filter and content-swap must be cancelled. --- */
html body footer.saa-footer img.footer-logo.v2-logo-fix,
html body .saa-footer .v2-logo-fix {
  content: normal !important;
  filter: none !important;
}

/* ==========================================================================
   v2 — Module H: Technology Partners marquee (ekona.ai-style trust strip)
   CSS-only infinite marquee: two identical logo groups, track translated
   -50% so the second group seamlessly takes the first group's place. Pauses
   on hover, honours prefers-reduced-motion. Neutral text labels (no
   partnership claim); swap in official brand SVGs later if licensed.
   ========================================================================== */
/* ID-escalated so it beats the many mobile/desktop media-query rules that set
   `.site-main > section { padding: var(--saa-section-y) !important }` (0,1,1).
   `:not(#____never____)` counts as ID specificity (1,1,2) but always matches,
   keeping the trust strip compact at every breakpoint (ekona.ai band height). */
html body .partner-carousel:not(#____never____) {
  padding: 30px 0 !important;
  overflow: hidden !important;
  border-top: 0 !important; /* V3: Fineline zwischen Hero und Technologie-Strip entfernt (Screenshot 1) */
  border-bottom: 1px solid var(--saa-border);
}

.partner-carousel__kicker {
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 12px !important;
  line-height: 1.3 !important;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--saa-text-muted);
  margin: 0 0 18px !important;
}

.partner-carousel__track {
  display: flex;
  width: max-content;
  animation: partnerMarquee 34s linear infinite;
  will-change: transform;
}

.partner-carousel__track:hover {
  animation-play-state: paused;
}

.partner-carousel__group {
  display: flex;
  align-items: center;
  gap: clamp(40px, 6vw, 80px);
  padding-right: clamp(40px, 6vw, 80px);
}

.partner-carousel__logo {
  filter: grayscale(1);
  opacity: 0.5;
  font-family: 'Inter', sans-serif;
  font-size: clamp(16px, 1.6vw, 19px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--saa-text-muted);
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.partner-carousel__logo:hover {
  opacity: 0.9;
}

@keyframes partnerMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .partner-carousel__track {
    animation: none;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 0;
  }
  .partner-carousel__group[aria-hidden="true"] {
    display: none;
  }
}

/* ==========================================================================
   v2 — FINAL typography override, specificity-escalated (must stay last)
   The legacy stylesheet accumulated 60+ scattered `font-weight: 900/850/800
   !important` rules from earlier "bolder" passes (e.g. body.wissen-page
   .wissen-editorial h2 {font:900} and body.academy-page .academy-main h2
   {font:900}, specificity (0,2,2)). A plain `html body h2` override is only
   (0,0,3) and loses to those. The `:not(#____never____)` guard below matches
   EVERY element (the id never exists) but counts as ID-level specificity
   (1,0,0), so it structurally out-ranks any class-only rule no matter how
   many classes it stacks. Restricted to real heading content (h1–h6 /
   display / headline classes), NOT labels, eyebrows, nav links or buttons —
   their small bold uppercase caps are a legitimate, separate pattern and use
   other tags/classes, so this block never touches them.
   ========================================================================== */
html body h1:not(#____never____),
html body .font-display-lg:not(#____never____),
html body .hero-scene__title:not(#____never____),
html body .subpage-hero-scene h1:not(#____never____),
html body .page-hero.page-hero--scene h1:not(#____never____),
html body .page-title:not(#____never____),
html body .contact-hero-copy h1:not(#____never____),
html body main :where(.hero-scene__title, .usecase-overview__title, .saa-hero h1, .term-agent .term-hero h1, .restore-hero h1):not(#____never____) {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 500 !important;
}

html body h2:not(#____never____),
html body h3:not(#____never____),
html body h4:not(#____never____),
html body h5:not(#____never____),
html body h6:not(#____never____),
html body .font-headline-xl:not(#____never____),
html body .font-headline-lg:not(#____never____),
html body.home-page .home-offer-card h3:not(#____never____),
html body.home-page .home-trust-proof__body h3:not(#____never____),
html body .saa-footer :is(h2, h6):not(#____never____),
html body main :where(h1:not(.hero-scene__title), .text-display-lg, .text-display-lg-mobile):not(#____never____) {
  font-weight: 500 !important;
}

/* v2 — body-copy weight normalization (Befund 4: "zu dick geschrieben").
   wissen / academy / ueber shipped their body <p>/<li>/<dd> at 600–800
   (semibold–bold) — heavier than the now-500 headings and against DESIGN.md
   (body = Inter 400). The homepage, ki-beratung and ki-dienste already render
   body at 400; this brings the three outliers in line for a lighter, ekona.ai-
   style read. Scoped to real body copy only — eyebrows, kickers and signal
   labels on these pages are <div>/<span>, and <strong>/<em>/<dt>/<time>
   emphasis is a different tag, so none of them are touched. ID-escalated to
   beat the page-specific `font: 600 …` shorthands. */
html body.wissen-page main :where(p, li, dd):not(#____never____),
html body.academy-page main :where(p, li, dd):not(#____never____),
html body.ueber-page main :where(p, li, dd):not(#____never____) {
  font-weight: 400 !important;
}

/* ==========================================================================
   v2 — FAQ / accordion layout fix, specificity-escalated
   Consolidates the ~40 scattered, partly-contradictory grid rules for the
   five FAQ container classes into one authoritative single-column, full-width
   definition. `grid-column: auto` neutralises the legacy `grid-column: 2`
   (harmless today because the shells are not multi-col grids, but a latent
   trap). Same `:not(#____never____)` ID-escalation as above.
   ========================================================================== */
html body :where(.beratung-faq-grid, .dienste-faq-grid, .wissen-qa, .term-faq__grid, .pa-faq-list):not(#____never____) {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-column: auto !important;
  width: 100% !important;
  gap: 14px !important;
}

html body :where(.beratung-faq-grid, .dienste-faq-grid, .wissen-qa, .term-faq__grid, .pa-faq-list) details:not(#____never____) {
  width: 100% !important;
  display: block !important;
}

html body :where(.beratung-faq-grid, .dienste-faq-grid, .wissen-qa, .term-faq__grid, .pa-faq-list) details p:not(#____never____) {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  box-sizing: border-box !important;
}

/* Homepage FAQ header (.home-faq-item > .flex): an earlier pass defined a
   2-column grid (minmax(0,1fr) 28px) for [question | icon]; a later pass added
   a ::before "?" badge as a 3rd grid item, so the badge seized column 1, the
   <h4> question collapsed into the 28px column 2 (one word per line), and the
   icon wrapped to a second row. Restore the intended 3-column
   [badge | question | icon] grid, matching the subpage FAQ summaries.
   ID-escalated to beat `.home-page .home-faq-item > .flex` (0,3,0). */
html body .home-faq-item > .flex:not(#____never____) {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) 34px !important;
  align-items: center !important;
  gap: 18px !important;
}

html body .home-faq-item > .flex > h4:not(#____never____) {
  grid-column: 2 !important;
  min-width: 0 !important;
  max-width: none !important;
}

html body .home-faq-item > .flex > .material-symbols-outlined:not(#____never____) {
  grid-column: 3 !important;
}

html body .home-faq-item .faq-content:not(#____never____) {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Homepage agent board (.home-agent-board): the 2-column [stack | result]
   layout only fits when the max-w-1280-capped board cell is wide enough
   (viewport ≳ 1580px). Below that — i.e. on most laptops — the stack column
   collapsed to ~160px and the agent-card titles ("Call Agent" …) wrapped ONE
   LETTER PER LINE. Default to a single column (stack, then result below — the
   same layout already used < 980px), and only restore the two-column diagram
   where it demonstrably fits. ID-escalated to beat `.home-page .home-agent-
   board { … !important }` (line ~979). */
html body.home-page .home-agent-board:not(#____never____) {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: none !important;
  aspect-ratio: auto !important;
  min-height: 0 !important;
}

@media (min-width: 1580px) {
  html body.home-page .home-agent-board:not(#____never____) {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.4fr) !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
  }
}

/* Homepage "Einsatzgebiete" bento cards: justify-content:space-between spread
   the sparse content across the row-stretched card height, leaving 90–120px
   empty gaps between text and image (the hollow look in the review). Let the
   text sit at the top and the image fill the remaining height (object-fit
   cover already applied), so every card reads as one cohesive block with
   aligned bottoms and consistent image proportions. */
html body.home-page .bento-cell:not(#____never____) {
  justify-content: flex-start !important;
  gap: 20px !important;
}

html body.home-page .bento-cell .visual-media--bento:not(#____never____) {
  margin: 0 !important;
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 190px !important;
  aspect-ratio: auto !important;
  width: 100% !important;
  align-self: stretch !important;
}

/* Tag row (Sales/Support, Marketing/Brand) sits directly under the image. */
html body.home-page .bento-cell > .flex.gap-2:not(#____never____) {
  margin-top: 16px !important;
}

/* ==========================================================================
   v2 — Defensive text-overflow guard for the wissen regulation timeline
   (Befund 3). Long descriptions in .wissen-chronik must wrap, never clip.
   ========================================================================== */
html body.wissen-page .wissen-chronik div:not(#____never____),
html body.wissen-page .wissen-chronik strong:not(#____never____),
html body.wissen-page .wissen-chronik time:not(#____never____),
html body.wissen-page .wissen-chronik p:not(#____never____) {
  overflow-wrap: break-word !important;
  word-break: normal !important;
  max-width: 100% !important;
}

/* =====================================================================
   v2 — GLOBALE CARD-MODERNISIERUNG (konsolidierte Basis-Regeln)
   Ans Dateiende angehaengt. Spezifitaet `html body main :is()` (0,1,3)
   + !important + spaetere Quellreihenfolge schlaegt die bestehende
   Basisregel `main :where(){ … !important }` sowie die Contrast-Locks.
   Ton je Karte EMPIRISCH gemessen (getComputedStyle) — jede Karte
   bleibt in ihrem Ton (hell->Off-White, dunkel->angehobenes Dunkel),
   damit der JS-Kontrast-Painter die Textfarbe korrekt haelt.
   Diagramm-Knoten (home-agent-card, usecase-map__node/__core),
   Accent-Bloecke (academy-apply-card, *-lab-panel, *-feature-line),
   rote/CTA-Panels und editoriale Tabellen-Zeilen sind bewusst NICHT
   Teil dieses Systems.
   ===================================================================== */
:root {
  --saa-card-pad:        clamp(20px, 2.4vw, 30px);
  --saa-card-pad-tight:  12px 16px;
  --saa-card-radius:     16px;
  --saa-card-radius-sm:  8px;
  --saa-card-bg-light:   #fbfcfd;
  --saa-card-border-light: #dfe6ee;
  --saa-card-bg-dark:    #0c1a27;
  --saa-card-border-dark:  rgba(233,240,248,.14);
  --saa-card-shadow-rest:      0 1px 2px rgba(7,17,28,.05);
  --saa-card-shadow-hover:     0 2px 6px rgba(7,17,28,.06), 0 16px 40px rgba(7,17,28,.12);
  --saa-card-shadow-rest-dark: 0 1px 2px rgba(0,0,0,.28);
  --saa-card-shadow-hover-dark:0 2px 8px rgba(0,0,0,.34), 0 22px 54px rgba(0,0,0,.42);
  --saa-card-ring:  0 0 0 1px color-mix(in srgb, var(--saa-red, #d91e18) 26%, transparent);
  --saa-card-lift:  -3px;
  --saa-card-ease:  220ms cubic-bezier(.2,.6,.25,1);
}

/* ---- Strukturelle Basis: alle inhaltlichen Karten ---- */
html body main :is(
  .saa-signal-card, .home-offer-card, .process-card, .bento-card, .bento-cell, .home-faq-item,
  .usecase-card, .usecase-overview__decision-panel,
  .beratung-problem-grid article, .beratung-expect-cards article, .beratung-service-card,
  .beratung-service-card--dark, .beratung-board-card, .beratung-why-grid article,
  .beratung-trust-grid article, .beratung-faq-grid details,
  .dienste-problem-grid article, .dienste-practice-card, .dienste-practice-card--dark,
  .dienste-transition-grid article, .dienste-flow-grid article, .dienste-industry-grid article,
  .dienste-spine-item, .dienste-lanes-section article, .dienste-faq-grid details,
  .pa-card, .pa-process-grid article, .pa-faq-list article, .pa-intake__form-panel, .pa-scorecard,
  .term-feature, .term-usecase-list article, .term-kpi-grid article, .term-flow-line article,
  .term-industry-grid article, .term-loss-card, .term-compare-grid article,
  .term-trust__grid article, .term-implementation__steps article, .term-hero__signals div,
  .wissen-qa details,
  .academy-pathway-node
) {
  box-sizing: border-box !important;
  border: 1px solid var(--saa-card-border-light) !important;
  border-radius: var(--saa-card-radius) !important;
  padding: var(--saa-card-pad) !important;
  box-shadow: var(--saa-card-shadow-rest) !important;
  transition:
    border-color var(--saa-card-ease),
    box-shadow   var(--saa-card-ease),
    transform    var(--saa-card-ease),
    background-color var(--saa-card-ease) !important;
}
/* Karten mit randlosem Medienbild oben an die Radius-Ecke klippen */
html body main :is(.usecase-card) { overflow: hidden !important; }

/* ---- Kompakte Chips (kleiner Radius, enges Padding) ---- */
html body main :is(
  .usecase-segment__icons > span, .term-logo-grid span, .pa-trust-grid span,
  .ueber-proof span, .pa-intake__proof span
) {
  border: 1px solid var(--saa-card-border-light) !important;
  border-radius: var(--saa-card-radius-sm) !important;
  padding: var(--saa-card-pad-tight) !important;
  box-shadow: none !important;
}

/* ---- HELLER Ton: Off-White-Flaeche statt totem #fff ---- */
html body main :is(
  .saa-signal-card, .home-offer-card, .process-card, .bento-card, .bento-cell, .home-faq-item,
  .usecase-card,
  .beratung-problem-grid article, .beratung-expect-cards article, .beratung-service-card,
  .beratung-faq-grid details,
  .dienste-problem-grid article, .dienste-practice-card, .dienste-transition-grid article,
  .dienste-flow-grid article, .dienste-industry-grid article, .dienste-faq-grid details,
  .pa-card, .pa-process-grid article, .pa-faq-list article, .pa-intake__form-panel,
  .term-feature, .term-usecase-list article, .term-kpi-grid article, .term-flow-line article,
  .term-industry-grid article,
  .wissen-qa details, .academy-pathway-node,
  .usecase-segment__icons > span, .term-logo-grid span, .pa-trust-grid span
) {
  background-color: var(--saa-card-bg-light) !important;
  border-color: var(--saa-card-border-light) !important;
}

/* ---- DUNKLER Ton: angehobenes Off-Black, hebt sich von #07111c ab ---- */
html body main :is(
  .usecase-overview__decision-panel,
  .beratung-service-card--dark, .beratung-board-card, .beratung-why-grid article,
  .beratung-trust-grid article,
  .dienste-practice-card--dark, .dienste-spine-item, .dienste-lanes-section article,
  .pa-scorecard, .pa-intake__proof span,
  .term-loss-card, .term-compare-grid article, .term-trust__grid article,
  .term-implementation__steps article, .term-hero__signals div,
  .ueber-proof span
) {
  background-color: var(--saa-card-bg-dark) !important;
  border-color: var(--saa-card-border-dark) !important;
  box-shadow: var(--saa-card-shadow-rest-dark) !important;
}

/* ---- Hover/Aktiv: nur interaktive Karten ---- */
html body main :is(
  .usecase-card, .home-faq-item, .wissen-qa details, .pa-faq-list article,
  .beratung-faq-grid details, .dienste-faq-grid details, .term-industry-grid article
):hover {
  transform: translateY(var(--saa-card-lift)) !important;
  box-shadow: var(--saa-card-shadow-hover), var(--saa-card-ring) !important;
  border-color: color-mix(in srgb, var(--saa-red, #d91e18) 45%, var(--saa-card-border-light)) !important;
}
html body main :is(
  .usecase-card, .home-faq-item, .wissen-qa details, .pa-faq-list article,
  .beratung-faq-grid details, .dienste-faq-grid details, .term-industry-grid article
):active {
  transform: translateY(-1px) !important;
  transition-duration: 90ms !important;
}
/* geoeffnete Disclosure = bleibender roter Rand statt Schatten */
html body main :is(
  .wissen-qa details[open], .beratung-faq-grid details[open], .dienste-faq-grid details[open],
  .pa-faq-list article[open]
) {
  border-color: color-mix(in srgb, var(--saa-red, #d91e18) 55%, var(--saa-card-border-light)) !important;
}
@media (prefers-reduced-motion: reduce) {
  html body main :is(
    .usecase-card, .home-faq-item, .wissen-qa details, .pa-faq-list article,
    .beratung-faq-grid details, .dienste-faq-grid details, .term-industry-grid article
  ):hover {
    transform: none !important;
  }
}

/* ---- Homepage-Scope-Boost: die .home-page-Kartenregeln liegen bei (0,2,1);
   dieser Block (0,2,3) + spaetere Quellreihenfolge setzt die Modernisierung
   auch dort durch. Alle Homepage-Karten sind hell. ---- */
html body.home-page main :is(.saa-signal-card, .home-offer-card, .process-card, .bento-card, .bento-cell, .home-faq-item) {
  border: 1px solid var(--saa-card-border-light) !important;
  border-radius: var(--saa-card-radius) !important;
  box-shadow: var(--saa-card-shadow-rest) !important;
  background-color: var(--saa-card-bg-light) !important;
}
html body.home-page main :is(.home-faq-item):hover {
  transform: translateY(var(--saa-card-lift)) !important;
  box-shadow: var(--saa-card-shadow-hover), var(--saa-card-ring) !important;
  border-color: color-mix(in srgb, var(--saa-red, #d91e18) 45%, var(--saa-card-border-light)) !important;
}

/* =====================================================================
   v2 — SECTION-RHYTHMUS (Tiefe statt bloss Ton-Wechsel)
   ===================================================================== */
/* (1) Dezenter, tonneutraler Trennsaum zwischen aufeinanderfolgenden
   Sections — mildert harte Kanten zwischen gleich- wie andersfarbigen
   Bloecken (rgba-Grau liest sich auf hell wie dunkel als feine Linie). */
html body main > section + section {
  border-top: 1px solid rgba(120, 132, 148, .16);
}
/* (2) Textur auf flach-dunklen Sections (per JS markiert): feines
   Punktraster + EIN zurueckhaltender roter Glow oben rechts. Ersetzt den
   toten flachen #07111c durch subtile Struktur. Nur dort, wo vorher
   KEIN background-image existierte -> kein Clobbern bestehender Gradients. */
html body main > section[data-saa-texture] {
  background-image:
    radial-gradient(58% 46% at 84% 4%, rgba(217, 30, 24, .10), transparent 58%),
    radial-gradient(rgba(233, 240, 248, .055) 1px, transparent 1.5px);
  background-size: 100% 100%, 22px 22px;
  background-repeat: no-repeat, repeat;
  background-position: center top, 0 0;
}

/* =====================================================================
   v2 — Plan v6 / Befund 16-21 (2026-07-02)
   Konsolidierter, spezifitaets-eskalierter Block ans Dateiende angehaengt.
   Nutzt bestehende Tokens (--saa-card-radius, --saa-card-bg-*, --saa-red)
   aus dem Card-Modernisierungs-Block weiter oben. Siehe VISUALS_LOG.md
   fuer Vorher/Nachher-Notizen pro Befund.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Befund 16 — Abschluss-CTA-Panels werden echte Karten statt grauer/
   roter Restflaeche. Section-Hintergrund bleibt/wird bewusst ANDERS als
   die Panel-Flaeche, damit die Karte sichtbar "poppt".
   Betroffen: .usecase-overview__cta .usecase-overview__inner (hell),
   .beratung-final-panel / .dienste-final-panel (rot, bekommen jetzt
   Tiefe statt Flatcolor), .pa-final-panel (dunkle Section, angehobener
   Kartenton).
   --------------------------------------------------------------------- */

/* Section-Hintergrund hinter dem Katalog-CTA-Panel: helles, leicht
   abgesetztes Grau statt reinem Weiss, damit die Karte darauf sichtbar
   abgesetzt ist. */
html body.page-shell .usecase-overview-page .usecase-overview__cta:not(#____never____) {
  background: #eef2f6 !important;
  border-top: 1px solid #d7dee8 !important;
}

html body.page-shell .usecase-overview-page .usecase-overview__cta .usecase-overview__inner:not(#____never____) {
  background: var(--saa-card-bg-light, #fbfcfd) !important;
  border: 1px solid var(--saa-card-border-light, #dfe6ee) !important;
  border-radius: var(--saa-card-radius, 10px) !important;
  box-shadow: 0 2px 6px rgba(7, 17, 28, .06), 0 24px 60px rgba(7, 17, 28, .10) !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: clamp(40px, 5vw, 64px) clamp(28px, 4vw, 56px) !important;
}

/* Beratung/Dienste: roter Flatcolor-Block -> Karte mit Rahmen/Schatten,
   Section dahinter bleibt im bestehenden dunklen Ton (071927) so die
   rote Karte klar als eigenstaendiges Element abgesetzt ist. */
html body main .beratung-final-panel:not(#____never____),
html body main .dienste-final-panel:not(#____never____) {
  border: 1px solid rgba(255, 255, 255, .22) !important;
  border-radius: var(--saa-card-radius, 10px) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .22), 0 28px 70px rgba(0, 0, 0, .38) !important;
  padding: clamp(36px, 4.4vw, 56px) !important;
}

/* Potenzialanalyse: Section ist bereits dunkel (#07111c) -> Panel
   bekommt den angehobenen dunklen Kartenton statt flach in die Section
   zu verschwinden. */
/* RUNDE 3 Fix: Selektor stand vorher als "html body main
   .potenzialanalyse-page ..." (Body-Klasse HINTER main) und matchte
   nie — die Karten-Optik griff seit Befund 16 nicht. */
html body.potenzialanalyse-page main .pa-final-panel:not(#____never____) {
  background: var(--saa-card-bg-dark, #0c1a27) !important;
  border: 1px solid var(--saa-card-border-dark, rgba(233, 240, 248, .14)) !important;
  border-radius: var(--saa-card-radius, 10px) !important;
  box-shadow: var(--saa-card-shadow-hover-dark, 0 2px 8px rgba(0,0,0,.34), 0 22px 54px rgba(0,0,0,.42)) !important;
  padding: clamp(32px, 4vw, 48px) !important;
}

/* ---------------------------------------------------------------------
   Befund 17 (erweitert 15b) — KI-Hub-Mindmap: Puls-Glow am Kern,
   wandernde Datenfluss-Punkte je Linie, gestaffelter Scroll-Entrance
   der 6 Nodes, dunkle Node-Karten statt ausgewaschener weisser Boxen.
   IntersectionObserver-Hook (.is-visible) wird in js/main.js gesetzt,
   siehe dortiger Kommentar "Mindmap scroll entrance".
   --------------------------------------------------------------------- */

/* (1) Puls-Glow am zentralen KI-Kern */




/* (2) Wandernder Datenfluss-Punkt je Linie. Jede Linie ist ein 1px
   hohes, horizontales Element, das per transform-origin:left center um
   den jeweiligen Winkel rotiert ist (siehe usecase-map__line--* weiter
   oben). Ein Kindelement (::after) bewegt sich per translateX entlang
   der lokalen (bereits rotierten) X-Achse der Linie von 0 bis zur
   jeweiligen Linienlaenge -> folgt automatisch dem korrekten Winkel. */











/* (3) Gestaffelter Scroll-Entrance: Basiszustand (unsichtbar/versetzt)
   nur bevor .usecase-map--hub die .is-visible-Klasse traegt (per JS bei
   IntersectionObserver-Eintritt gesetzt, siehe main.js). Nach dem
   Eintritt wird jeder Node ueber nth-child gestaffelt eingeblendet. Die
   bestehende Absolut-Positionierung/transform (translate(-50%,-50%))
   bleibt erhalten -> Entrance ergaenzt nur opacity + einen zusaetzlichen
   kleinen Y-Versatz on top, keine Layout-Verschiebung. */









/* Ohne JS/vor Observer-Eintritt (z.B. no-JS Fallback) trotzdem sichtbar
   bleiben -> kein leeres Diagramm, falls das Script aus irgendeinem
   Grund nicht laeuft. */


/* (5, Befund 15b) Node-Karten: dunkle Karten statt ausgewaschener
   Weiss-Transparenz, passend zum umgebenden Hub-Rahmen. Roter
   Akzent-Glow bei Hover/Fokus statt reinem Weiss-auf-Creme-Kontrastbruch. */










/* (4) prefers-reduced-motion: alle neuen Bewegungs-Effekte aus, Nodes
   bleiben permanent sichtbar. */


/* ---------------------------------------------------------------------
   Befund 18 — Inter-Akzent auf der Katalog-Headline
   (.usecase-overview__title). Basistext -> Inter 500, nur der Teil im
   <span> ("Schweizer KMU.") -> Inter 500, analog zum
   .hero-title-line--accent-Muster der Homepage (dort: gleiche Schrift,
   nur Farbwechsel; hier zusaetzlich Schriftwechsel, wie in Plan v6
   Befund 18 verbindlich entschieden). Ueberschreibt den bisherigen
   Akzent-fuer-die-ganze-Zeile-Override bei Zeile ~24160.
   --------------------------------------------------------------------- */
html body main .usecase-overview__title:not(#____never____):not(#____never____) {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 500 !important;
}

html body main .usecase-overview__title span:not(#____never____):not(#____never____) {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 500 !important;
}

/* ---------------------------------------------------------------------
   Befund 19 — FAQ-Item-Redesign, EINE gemeinsame Basisregel fuer alle
   FAQ-Vorkommen (.beratung-faq-grid, .dienste-faq-grid, .wissen-qa,
   .term-faq__grid als <details>-Akkordeon; .pa-faq-list als statische
   Q&A ohne open/close). Entfernt das runde rote "?"-Icon und ersetzt es
   durch nichts (kein Ersatz-Icon), Frage wird fett gesetzt, ein
   dezenter Chevron rechts rotiert bei [open]. Sanfter Hover/Open-
   Uebergang. Ueberschreibt den Icon-Badge-Block bei Zeile ~23384-23437.
   --------------------------------------------------------------------- */

/* (a) "?"-Icon-Badge entfernen (::before auf den Accordion-Summaries
   und auf die statische pa-h3-Variante) */
html body :where(
  .beratung-faq-grid summary,
  .dienste-faq-grid summary,
  .term-faq__grid summary,
  .wissen-qa summary
):not(#____never____)::before,
html body :where(.pa-faq-list article h3):not(#____never____)::before {
  content: none !important;
  display: none !important;
}

/* (b) Summary-Layout: Frage links (fett), Chevron rechts, kein linker
   Icon-Slot mehr noetig -> zweispaltiges statt dreispaltiges Grid. */
html body :where(
  .beratung-faq-grid summary,
  .dienste-faq-grid summary,
  .term-faq__grid summary,
  .wissen-qa summary
):not(#____never____) {
  align-items: center !important;
  color: #101820 !important;
  -webkit-text-fill-color: #101820 !important;
  cursor: pointer !important;
  display: grid !important;
  font-size: clamp(16px, 1.3vw, 18px) !important;
  font-weight: 500 !important;
  gap: 16px !important;
  grid-template-columns: minmax(0, 1fr) 22px !important;
  letter-spacing: 0 !important;
  line-height: 1.35 !important;
  list-style: none !important;
  min-height: 0 !important;
  padding: 18px clamp(20px, 3vw, 28px) !important;
  border-radius: var(--saa-card-radius-sm, 8px) !important;
  transition: background-color 180ms ease, color 180ms ease !important;
}

html body :where(
  .beratung-faq-grid summary,
  .dienste-faq-grid summary,
  .term-faq__grid summary,
  .wissen-qa summary
):not(#____never____)::-webkit-details-marker {
  display: none !important;
}

/* (c) Chevron statt "+"/"-"-Zeichen: dezentes SVG-Symbol per Material
   Symbols-Font (expand_more), rotiert 180deg wenn <details open>. */
html body :where(
  .beratung-faq-grid summary,
  .dienste-faq-grid summary,
  .term-faq__grid summary,
  .wissen-qa summary
):not(#____never____)::after {
  align-items: center !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  color: rgba(16, 24, 32, .55) !important;
  content: "expand_more" !important;
  display: flex !important;
  font-family: 'Material Symbols Outlined' !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  height: 22px !important;
  justify-content: center !important;
  line-height: 1 !important;
  transform: rotate(0deg) !important;
  transition: transform 220ms ease, color 220ms ease !important;
  width: 22px !important;
}

html body :where(
  .beratung-faq-grid details[open] summary,
  .dienste-faq-grid details[open] summary,
  .term-faq__grid details[open] summary,
  .wissen-qa details[open] summary
):not(#____never____)::after {
  background: none !important;
  border: none !important;
  color: var(--saa-red, #d91e18) !important;
  content: "expand_more" !important;
  transform: rotate(180deg) !important;
}

/* (d) Hover-State: dezenter Hintergrund-Shift statt reinem Farbwechsel */
html body :where(
  .beratung-faq-grid summary,
  .dienste-faq-grid summary,
  .term-faq__grid summary,
  .wissen-qa summary
):not(#____never____):hover {
  background-color: rgba(217, 30, 24, .05) !important;
}

/* (e) Antworttext: keine erzwungene linke Icon-Einrueckung mehr (war
   52px fuer die alte Icon-Spalte reserviert), sanfter Fade statt
   hartem Sprung. */
html body :where(
  .beratung-faq-grid details p,
  .dienste-faq-grid details p,
  .term-faq__grid details p,
  .wissen-qa details p
):not(#____never____) {
  border-top: 1px solid rgba(216, 225, 235, .9) !important;
  color: #4a5868 !important;
  -webkit-text-fill-color: #4a5868 !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  margin: 0 !important;
  padding: 4px clamp(20px, 3vw, 28px) 22px !important;
  animation: usecaseFaqFadeIn 260ms ease;
}

@keyframes usecaseFaqFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* (f) Potenzialanalyse: statische Q&A (kein <details>, kein Chevron) —
   nur den Icon-Badge/Einzug entfernen, Frage fett ohne Icon-Slot. */
html body :where(.pa-faq-list article h3):not(#____never____) {
  color: #101820 !important;
  -webkit-text-fill-color: #101820 !important;
  font-weight: 500 !important;
  padding-left: 0 !important;
}

html body :where(.pa-faq-list article p):not(#____never____) {
  padding-left: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  html body :where(
    .beratung-faq-grid summary,
    .dienste-faq-grid summary,
    .term-faq__grid summary,
    .wissen-qa summary
  ):not(#____never____)::after {
    transition: none !important;
  }
  html body :where(
    .beratung-faq-grid details p,
    .dienste-faq-grid details p,
    .term-faq__grid details p,
    .wissen-qa details p
  ):not(#____never____) {
    animation: none !important;
  }
}

/* ---------------------------------------------------------------------
   Befund 20 — Homepage-Bento ("Einsatzgebiete") strukturell vereinheit-
   lichen: alle 4 .bento-cell (2x md:col-span-2 breit, 2x einspaltig)
   bekommen dieselbe Innenarchitektur (Label -> Titel -> Text -> Bild-
   bereich an gleicher relativer Position, gleiche Abstands-/Schatten-
   Skala). Fotos selbst bleiben unangetastet (separat geplant, Befund 8).
   Ueberschreibt/ergaenzt den bestehenden bento-cell-Block bei ~24279.
   --------------------------------------------------------------------- */
html body.home-page .bento-cell:not(#____never____):not(#____never____) {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 18px !important;
  padding: clamp(26px, 3vw, 38px) !important;
}

/* Textblock (Label + Titel + Text) immer als erster, gleich hoher Block
   oben in der Karte -- unabhaengig davon, ob die Karte 1 oder 2 Spalten
   breit ist. */
html body.home-page .bento-cell:not(#____never____):not(#____never____) > div:first-child {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  order: 1 !important;
}

/* Bildbereich: immer als zweites Element, gleiches Seitenverhaeltnis
   und gleicher Rahmen/Radius ueber alle 4 Kacheln hinweg, damit die
   Bildzone an derselben relativen Stelle sitzt (bricht die "zwei
   verschiedene Komponenten"-Optik zwischen den grossen und kleinen
   Kacheln). */
html body.home-page .bento-cell:not(#____never____):not(#____never____) .visual-media--bento {
  order: 2 !important;
  aspect-ratio: 16 / 9 !important;
  min-height: 180px !important;
  margin: 0 !important;
  border-radius: var(--saa-card-radius-sm, 8px) !important;
  overflow: hidden !important;
}

/* Tag-Reihe (Sales/Support, Marketing/Brand) -- falls vorhanden -- immer
   als letztes Element, gleicher Abstand zum Bild darueber, egal ob
   Karte breit oder schmal ist. */
html body.home-page .bento-cell:not(#____never____):not(#____never____) > .flex.gap-2 {
  order: 3 !important;
  margin-top: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  html body.home-page .bento-cell:not(#____never____):not(#____never____) {
    transition: none !important;
  }
}

/* ---------------------------------------------------------------------
   Befund 21 — Card-Ecken global abgerundet (10px), explizite Abkehr vom
   0px-Scharfkanten-Prinzip. Die meisten Karten haben --saa-card-radius
   (10px) bereits ueber den Card-Modernisierungs-Block (~Zeile 24325 ff)
   -- dieser Block deckt die dort NICHT erfassten Karten-Klassen ab
   (Inventar aus Plan v6 Befund 21: .sector-card, .term-card, .bento-card
   als eigenstaendige Selektoren, plus die neuen Befund-16/20-Elemente).
   Buttons/Links (.hero-scene__primary etc.) und das Schweizer-Kreuz-Logo
   sind bewusst NICHT Teil dieser Liste. */
html body main :is(
  .bento-cell, .saa-signal-card, .home-offer-card, .process-card,
  .home-agent-card, .usecase-card, .beratung-service-card,
  .beratung-problem-grid article, .beratung-expect-cards article,
  .beratung-trust-grid article, .beratung-board-card,
  .dienste-practice-card, .dienste-problem-grid article,
  .dienste-industry-grid article, .dienste-transition-grid article,
  .bento-card, .sector-card, .term-card, .term-feature,
  .usecase-overview__cta .usecase-overview__inner,
  .beratung-final-panel, .dienste-final-panel, .pa-final-panel,
  .visual-media--bento
):not(#____never____):not(#____never____) {
  border-radius: var(--saa-card-radius, 10px) !important;
}

/* Kompakte Unterkomponenten (Badges/Tags innerhalb von Karten) bekommen
   bewusst den kleineren Radius-Schritt, nicht denselben wie die Karte
   selbst -- vermeidet "Pillen"-Optik bei kleinen Elementen. */
html body main :is(
  .usecase-card__tag, .home-card-label
):not(#____never____):not(#____never____) {
  border-radius: var(--saa-card-radius-sm, 8px) !important;
}

/* =====================================================================
   RUNDE 3 — PHASE 7a: Stockfoto-Ersatz durch CSS-Visuals
   Ersetzt ~21 generische Stockfotos (15 usecase-cards, 3 Homepage-
   Offer-Cards, ki-beratung Hero+Ansatz, ki-dienste Hero) durch
   CSS-Kacheln im etablierten Diagramm-Stil (.usecase-map /
   .home-agent-board / .process-signal als Precedent). Bilddateien
   bleiben auf der Platte, nur <img>-Referenzen im HTML entfernt.
   ===================================================================== */

/* --- Basis: Icon-Gradient-Kachel (dunkler Navy-Grund, Punktraster,
   zentrales Material-Symbol, Akzentring). Akzentton kommt aus
   --tile-accent (siehe data-accent-Mapping unten). --- */
/* Default-Akzent bewusst OHNE never-ID-Spezifität, damit die
   [data-accent]-Overrides unten (0,1,2) den Default (0,1,0) schlagen. */
.saa-visual-tile {
  --tile-accent: var(--saa-red, #d91e18);
}

html body .saa-visual-tile:not(#____never____) {
  align-items: center !important;
  background:
    radial-gradient(120% 100% at 82% 8%, color-mix(in srgb, var(--tile-accent) 20%, transparent) 0%, transparent 58%),
    radial-gradient(90% 90% at 10% 94%, color-mix(in srgb, var(--tile-accent) 9%, transparent) 0%, transparent 52%),
    linear-gradient(160deg, #0d1b28 0%, #071019 100%) !important;
  border: 1px solid rgba(233, 240, 248, 0.08) !important;
  display: flex !important;
  justify-content: center !important;
  overflow: hidden !important;
  position: relative !important;
}

/* feines Punktraster — gleiches Muster wie [data-saa-texture]/.usecase-map */
html body .saa-visual-tile:not(#____never____)::before {
  background-image: radial-gradient(rgba(233, 240, 248, 0.07) 1px, transparent 1.4px) !important;
  background-size: 22px 22px !important;
  border: none !important;
  border-radius: 0 !important;
  content: "" !important;
  inset: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
}

/* Akzentring um das zentrale Icon */
html body .saa-visual-tile:not(#____never____)::after {
  animation: none !important;
  border: 1px solid color-mix(in srgb, var(--tile-accent) 36%, transparent) !important;
  border-radius: 999px !important;
  box-shadow: 0 0 0 18px color-mix(in srgb, var(--tile-accent) 6%, transparent) !important;
  content: "" !important;
  height: 76px !important;
  inset: auto !important;
  left: 50% !important;
  pointer-events: none !important;
  position: absolute !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 76px !important;
}

html body .saa-visual-tile:not(#____never____) > .material-symbols-outlined {
  color: color-mix(in srgb, var(--tile-accent) 55%, #ffffff) !important;
  filter: drop-shadow(0 0 16px color-mix(in srgb, var(--tile-accent) 55%, transparent));
  font-size: 40px !important;
  line-height: 1 !important;
  position: relative !important;
  z-index: 2 !important;
}

/* --- Akzent-Mapping: 5 Toene aus der --saa-red-Familie via color-mix,
   abgeleitet aus data-funktion (data-accent auf <article> bzw. direkt
   auf der Kachel/Figure). --- */
html body [data-accent="backoffice"] .saa-visual-tile,
html body .saa-visual-tile[data-accent="backoffice"] {
  --tile-accent: var(--saa-red, #d91e18);
}
html body [data-accent="kommunikation"] .saa-visual-tile,
html body .saa-visual-tile[data-accent="kommunikation"] {
  --tile-accent: color-mix(in srgb, var(--saa-red, #d91e18) 66%, #ff9640);
}
html body [data-accent="daten-wissen"] .saa-visual-tile,
html body .saa-visual-tile[data-accent="daten-wissen"] {
  --tile-accent: color-mix(in srgb, var(--saa-red, #d91e18) 58%, #ff5d8f);
}
html body [data-accent="content"] .saa-visual-tile,
html body .saa-visual-tile[data-accent="content"] {
  --tile-accent: color-mix(in srgb, var(--saa-red, #d91e18) 62%, #ffb56b);
}
html body [data-accent="visuals"] .saa-visual-tile,
html body .saa-visual-tile[data-accent="visuals"] {
  --tile-accent: color-mix(in srgb, var(--saa-red, #d91e18) 56%, #ff7a59);
}

/* --- Hero-Variante (ki-beratung/ki-dienste): gleiche Technik, auf
   Hero-Groesse skaliert — groesseres Icon, doppelter Ring, mehr Glow.
   Ueberstimmt u. a. body.ki-beratung-page .hero-scene__media
   { background:#071927 !important } (Zeile ~10511). --- */
/* Ohne <img> hat die Hero-Figure keine intrinsische Hoehe mehr:
   im Flex-/Grid-Layout der Subpage-Heroes auf volle Hoehe strecken,
   plus Fallback-Mindesthoehe (280px = bestehender Mobile-Wert). */
html body .saa-visual-tile--hero:not(#____never____) {
  align-self: stretch !important;
  min-height: 280px !important;
}

html body .saa-visual-tile--hero:not(#____never____) > .material-symbols-outlined {
  font-size: clamp(72px, 9vw, 120px) !important;
}

html body .saa-visual-tile--hero:not(#____never____)::after {
  border-color: color-mix(in srgb, var(--tile-accent) 42%, transparent) !important;
  box-shadow:
    0 0 0 44px color-mix(in srgb, var(--tile-accent) 7%, transparent),
    0 0 0 110px color-mix(in srgb, var(--tile-accent) 4%, transparent),
    0 0 90px 30px color-mix(in srgb, var(--tile-accent) 16%, transparent) !important;
  height: clamp(170px, 22vw, 260px) !important;
  width: clamp(170px, 22vw, 260px) !important;
}

html body .saa-visual-tile--hero:not(#____never____)::before {
  background-image: radial-gradient(rgba(233, 240, 248, 0.09) 1px, transparent 1.4px) !important;
  background-size: 26px 26px !important;
}

/* Sub-Hero-Variante (ki-beratung "Ansatz"-Feature-Media): zwischen
   Karte und Hero — Icon mittelgross, ein Ring. */
html body .saa-visual-tile--feature:not(#____never____) {
  min-height: 320px !important;
}

html body .saa-visual-tile--feature:not(#____never____) > .material-symbols-outlined {
  font-size: 64px !important;
}

html body .saa-visual-tile--feature:not(#____never____)::after {
  box-shadow:
    0 0 0 30px color-mix(in srgb, var(--tile-accent) 6%, transparent),
    0 0 60px 18px color-mix(in srgb, var(--tile-accent) 12%, transparent) !important;
  height: 120px !important;
  width: 120px !important;
}

/* --- Flow-Variante (3 Homepage-Offer-Cards): Mini-Diagramm angelehnt
   an .home-agent-board — 3 Node-Chips als Treppe + wiederverwendetes
   .process-signal (Sweep-Linie + Puls-Punkte) als Flow-Basis. --- */
html body .saa-visual-tile--flow:not(#____never____) {
  align-items: flex-start !important;
  flex-direction: column !important;
  gap: 9px !important;
  justify-content: center !important;
  padding: 16px 20px !important;
}

/* kein zentraler Ring in der Flow-Variante — stattdessen diagonale
   Verbindungslinie hinter den Chips */
html body .saa-visual-tile--flow:not(#____never____)::after {
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--tile-accent) 42%, transparent) 22% 78%, transparent 100%) !important;
  border: none !important;
  border-radius: 0 !important;
  bottom: 16% !important;
  box-shadow: none !important;
  height: auto !important;
  left: 36px !important;
  top: 16% !important;
  transform: none !important;
  width: 1px !important;
}

html body .saa-flow-chip:not(#____never____) {
  align-items: center;
  background: rgba(7, 17, 28, 0.92);
  border: 1px solid rgba(233, 240, 248, 0.14);
  border-radius: var(--saa-card-radius-sm, 8px);
  color: rgba(247, 249, 251, 0.82);
  display: flex;
  font: 600 11px/1 Inter, system-ui, sans-serif;
  gap: 8px;
  letter-spacing: 0.06em;
  padding: 8px 12px;
  position: relative;
  text-transform: uppercase;
  width: max-content;
  z-index: 2;
}

html body .saa-flow-chip:not(#____never____) .material-symbols-outlined {
  color: var(--tile-accent);
  font-size: 15px;
  line-height: 1;
}

html body .saa-flow-chip--core:not(#____never____) {
  border-color: color-mix(in srgb, var(--tile-accent) 55%, transparent);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--tile-accent) 10%, transparent),
    0 10px 26px rgba(0, 0, 0, 0.3);
  color: #ffffff;
  margin-left: 24px;
}

html body .saa-flow-chip:not(#____never____):last-of-type {
  margin-left: 48px;
}

/* .process-signal innerhalb der Flow-Kachel wieder sichtbar machen
   (globale Regel .home-page .home-offer-card .process-signal
   { display:none !important } bei ~Zeile 7173 wird hier gezielt fuer
   die --tile-Variante aufgehoben) und in die Kachel einpassen. */
html body .process-signal--tile:not(#____never____) {
  bottom: 10px !important;
  display: block !important;
  height: 34px !important;
  left: auto !important;
  opacity: 0.75 !important;
  position: absolute !important;
  right: 16px !important;
  top: auto !important;
  width: 96px !important;
  z-index: 2 !important;
}

@media (prefers-reduced-motion: reduce) {
  html body .saa-visual-tile:not(#____never____) > .material-symbols-outlined {
    filter: none;
  }
}

/* =====================================================================
   RUNDE 3 — PHASE 7b: Badge/Tag-Vereinheitlichung .saa-tag
   Ersetzt die vier bisherigen Muster fuer "kleines Uppercase-Label":
   .home-card-label (--label), .usecase-card__tag (--chip),
   .home-agent-card em (--chip-outline), .usecase-filter (--filter).
   Die Alt-Bloecke wurden entfernt (55 Selektoren, brace-aware);
   .usecase-filter bleibt als reiner JS-Hook im Markup erhalten.
   never-ID-Spezifitaet schlaegt verbliebene generische Kontrast-Regeln.
   ===================================================================== */

html body .saa-tag:not(#____never____) {
  align-items: center !important;
  display: inline-flex !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  gap: 8px !important;
  letter-spacing: 0.07em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  width: max-content;
}

html body .saa-tag:not(#____never____) .material-symbols-outlined {
  color: var(--saa-red, #d91e18) !important;
  font-size: 18px !important;
  font-variation-settings: "FILL" 0, "wght" 420, "GRAD" 0, "opsz" 24 !important;
  line-height: 1 !important;
}

/* --label: Linien-Variante (ehem. .home-card-label) — roter Text,
   kurze rote Linie links, Icon-Support, kein Rahmen/Fuellung. */
html body .saa-tag--label:not(#____never____) {
  background: none !important;
  border: none !important;
  color: var(--saa-red, #d91e18) !important;
  -webkit-text-fill-color: var(--saa-red, #d91e18) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  gap: 10px !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 16px !important;
  padding: 0 !important;
}

html body .saa-tag--label:not(#____never____)::before {
  background: var(--saa-red, #d91e18) !important;
  content: "" !important;
  display: inline-block !important;
  height: 2px !important;
  width: 34px !important;
}

html body .saa-tag--label:not(#____never____) .material-symbols-outlined {
  font-size: 21px !important;
}

/* --label-red Variante (ehem. .home-card-label--red): identisch, da das
   Label-System jetzt einheitlich rot ist — Klasse bleibt fuer Semantik. */

/* --chip: gefuellte Variante (ehem. .usecase-card__tag) — heller Chip
   auf hellen Karten. */
html body .saa-tag--chip:not(#____never____) {
  background: #eef3f8 !important;
  border: 1px solid #dce6f1 !important;
  border-radius: var(--saa-card-radius-sm, 8px) !important;
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
  font-size: 10px !important;
  margin-top: 14px !important;
  padding: 6px 10px !important;
}

/* --chip-outline: umrandete Variante fuer dunkle Karten
   (ehem. .home-agent-card em). */
html body .saa-tag--chip-outline:not(#____never____) {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: var(--saa-card-radius-sm, 8px) !important;
  color: rgba(239, 241, 243, 0.78) !important;
  -webkit-text-fill-color: rgba(239, 241, 243, 0.78) !important;
  font-size: 10px !important;
  padding: 8px 10px !important;
}

/* Glow-Badge (Data-Insight-Karte) behaelt seine Sonderoptik —
   spaeter in der Quelle = gewinnt bei gleicher Spezifitaet. */
html body .saa-tag--chip-outline.home-agent-card__badge--glow:not(#____never____) {
  background: rgba(217, 30, 24, 0.22) !important;
  border-color: rgba(255, 45, 38, 0.72) !important;
  box-shadow: 0 0 0 1px rgba(217, 30, 24, 0.28), 0 0 28px rgba(217, 30, 24, 0.42) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body .home-agent-card:hover .saa-tag--chip-outline.home-agent-card__badge--glow:not(#____never____),
html body .home-agent-card:focus-visible .saa-tag--chip-outline.home-agent-card__badge--glow:not(#____never____) {
  background: var(--saa-red, #d91e18) !important;
  border-color: rgba(255, 255, 255, 0.46) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 0 36px rgba(217, 30, 24, 0.58) !important;
}

/* --filter: klickbare Filter-Chip-Variante (ehem. .usecase-filter).
   Die Klasse .usecase-filter bleibt als JS-Hook im Markup. */
html body .saa-tag--filter:not(#____never____) {
  background: #ffffff !important;
  border: 1px solid #cdd6e1 !important;
  border-radius: var(--saa-card-radius-sm, 8px) !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  cursor: pointer !important;
  font-size: 12px !important;
  min-height: 36px !important;
  padding: 0 16px !important;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease !important;
}

html body .saa-tag--filter.is-active:not(#____never____),
html body .saa-tag--filter:not(#____never____):hover,
html body .saa-tag--filter:not(#____never____):focus-visible {
  background: var(--saa-red, #d91e18) !important;
  border-color: var(--saa-red, #d91e18) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

@media (prefers-reduced-motion: reduce) {
  html body .saa-tag--filter:not(#____never____) {
    transition: none !important;
  }
}

/* =====================================================================
   RUNDE 3 — BEFUND 15c: .home-agent-board / .home-agent-card Politur
   Vorher: aktive Karte transparent (nur roter Rand), inaktive Karten
   MIT Fuellung (invertierte Gewichtung), Titel und Beschreibung beide
   in Weiss 850 (keine Hierarchie). Nachher: aktive Karte klar erhoben
   (Gradient + Glow-Ring), inaktive zurueckgenommen (dunkler, gedimmtes
   Icon), Typo gestaffelt (Titel > Beschreibung).
   ===================================================================== */

html body.home-page .home-agent-card:not(#____never____) {
  background: rgba(10, 22, 36, 0.55) !important;
  border: 1px solid rgba(239, 241, 243, 0.1) !important;
  box-shadow: none !important;
  transition: border-color 180ms ease, background-color 180ms ease !important;
}

html body.home-page .home-agent-card:not(#____never____):hover,
html body.home-page .home-agent-card:not(#____never____):focus-visible {
  background: rgba(14, 28, 44, 0.85) !important;
  border-color: rgba(239, 241, 243, 0.28) !important;
}

html body.home-page .home-agent-card--active:not(#____never____),
html body.home-page .home-agent-card--active:not(#____never____):hover {
  background: linear-gradient(160deg, #13253a 0%, #0b1826 100%) !important;
  border: 1px solid rgba(255, 63, 56, 0.72) !important;
  box-shadow:
    0 0 0 3px rgba(217, 30, 24, 0.12),
    0 18px 44px rgba(0, 0, 0, 0.38) !important;
}

/* Icon: nur die aktive Karte behaelt das rote Signal-Icon, inaktive
   werden neutral gedimmt — lenkt den Blick auf die aktive Karte. */
html body.home-page .home-agent-card:not(.home-agent-card--active):not(#____never____) .material-symbols-outlined {
  color: rgba(239, 241, 243, 0.5) !important;
}

html body.home-page .home-agent-card--active:not(#____never____) .material-symbols-outlined {
  color: var(--saa-red, #d91e18) !important;
}

/* Typo-Hierarchie: Titel klar ueber Beschreibung gestaffelt statt
   beides gleich gewichtet weiss. */
html body.home-page .home-agent-card:not(#____never____) strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  display: block !important;
  font-size: 15px !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
  margin-bottom: 4px !important;
}

html body.home-page .home-agent-card:not(#____never____) small {
  color: rgba(233, 240, 248, 0.6) !important;
  -webkit-text-fill-color: rgba(233, 240, 248, 0.6) !important;
  display: block !important;
  font-size: 12.5px !important;
  line-height: 1.55 !important;
}

html body.home-page .home-agent-card--active:not(#____never____) small {
  color: rgba(233, 240, 248, 0.78) !important;
  -webkit-text-fill-color: rgba(233, 240, 248, 0.78) !important;
}

@media (prefers-reduced-motion: reduce) {
  html body.home-page .home-agent-card:not(#____never____) {
    transition: none !important;
  }
}

/* =====================================================================
   RUNDE 3 — Rhythmus-Rebalancing, Schutzregeln
   Die Offer-Card-Section ist jetzt HELL; die mittlere Karte
   (.home-offer-card.bg-graphite) bleibt bewusst dunkel und braucht
   lichten Text gegen die helle Section-Basis (deren :where-Regeln
   sonst dunklen Text erzwingen wuerden).
   ===================================================================== */

html body.home-page .home-offer-card.bg-graphite:not(#____never____) {
  background: var(--saa-card-bg-dark, #0c1a27) !important;
  color: #f7f9fb !important;
}

html body.home-page .home-offer-card.bg-graphite:not(#____never____) :is(h3, strong, .home-card-meta) {
  color: #f7f9fb !important;
  -webkit-text-fill-color: #f7f9fb !important;
}

html body.home-page .home-offer-card.bg-graphite:not(#____never____) :is(p, small) {
  color: rgba(239, 241, 243, 0.78) !important;
  -webkit-text-fill-color: rgba(239, 241, 243, 0.78) !important;
}

/* Kontakt-Panel (helle Karte) in der dunklen CTA-Section: Text-Inhalte
   des Panels explizit dunkel halten (die Section-Text-Regeln wuerden
   sonst hellen Text in die helle Karte erben — war unter der alten
   Voll-Dunkel-Blanket-Regel bereits so, faellt jetzt im Hell/Dunkel-
   Rhythmus aber auf und wird hier korrigiert). */
html body.home-page .home-cta-section .saa-card-surface:not(#____never____) :is(h3, h4, strong, label, span:not(.material-symbols-outlined):not(.text-swiss-red)) {
  color: #101820 !important;
  -webkit-text-fill-color: #101820 !important;
}

html body.home-page .home-cta-section .saa-card-surface:not(#____never____) :is(p, small) {
  color: #4a5868 !important;
  -webkit-text-fill-color: #4a5868 !important;
}

html body.home-page .home-cta-section .saa-card-surface:not(#____never____) .text-swiss-red {
  color: var(--saa-red, #d91e18) !important;
  -webkit-text-fill-color: var(--saa-red, #d91e18) !important;
}

/* =====================================================================
   RUNDE 3 — Rhythmus-Rebalancing termin-agent.html
   Befund: body.page-shell main > :where(section,article):not(.hero-scene)
   :not(.term-hero) { background: var(--saa-surface) !important } (0,3,2)
   zwang ALLE .term-dark-Sections auf Weiss — deren helle Ueberschriften
   (#f7f9fb) waren damit weiss-auf-weiss unsichtbar. Der Hero wirkte nur
   wegen des hellen "text-safe"-Stockfotos hell (jetzt durch dunkle
   saa-visual-tile ersetzt). Dieses Set setzt den .term-dark/.term-hero-
   Rhythmus mit never-ID wieder durch: D-D-h-h-D-h-D-h-h-D-h-D.
   ===================================================================== */

html body.term-agent-page main :is(.term-dark, .term-hero):not(#____never____) {
  background-color: #07111c !important;
  color: #f7f9fb !important;
}

html body.term-agent-page main :is(.term-dark, .term-hero):not(#____never____) :is(h1, h2, h3, h4, strong, summary, .term-kicker, span:not(.material-symbols-outlined)) {
  color: #f7f9fb !important;
  -webkit-text-fill-color: #f7f9fb !important;
}

html body.term-agent-page main :is(.term-dark, .term-hero):not(#____never____) :is(p, li, small) {
  color: rgba(239, 241, 243, 0.84) !important;
  -webkit-text-fill-color: rgba(239, 241, 243, 0.84) !important;
}

/* Backlink/Kicker im Hero dezenter als der Titel */
html body.term-agent-page .term-hero .term-backlink:not(#____never____),
html body.term-agent-page .term-hero .term-kicker:not(#____never____) {
  color: rgba(239, 241, 243, 0.72) !important;
  -webkit-text-fill-color: rgba(239, 241, 243, 0.72) !important;
}

/* Der Hero-Hintergrund ist eine absolute Vollflaeche (Regel ~18272);
   die Kachel soll dort keine eigene Mindesthoehe erzwingen. */
html body.term-agent-page .term-hero__background.saa-visual-tile:not(#____never____) {
  min-height: 0 !important;
}

/* =====================================================================
   RUNDE 3 — Rhythmus-Rebalancing potenzialanalyse.html
   Vorher effektiv komplett hell (die page-shell-Weiss-Regel (0,3,2)
   ueberstimmte auch pa-final). Neu: Scorecard-/Ergebnis-Section und
   Final-CTA als dunkle Akzente -> h-h-h-D-h-h-D.
   ===================================================================== */

html body.potenzialanalyse-page main :is(.pa-scorecard-section, .pa-final):not(#____never____) {
  background-color: #07111c !important;
  color: #f7f9fb !important;
}

html body.potenzialanalyse-page main :is(.pa-scorecard-section, .pa-final):not(#____never____) :is(h2, h3, h4, strong, .pa-eyebrow, span:not(.material-symbols-outlined)) {
  color: #f7f9fb !important;
  -webkit-text-fill-color: #f7f9fb !important;
}

html body.potenzialanalyse-page main :is(.pa-scorecard-section, .pa-final):not(#____never____) :is(p, li, small) {
  color: rgba(239, 241, 243, 0.84) !important;
  -webkit-text-fill-color: rgba(239, 241, 243, 0.84) !important;
}

/* Eyebrow-Labels in den dunklen Sections rot lassen (Signalfarbe) */
html body.potenzialanalyse-page main :is(.pa-scorecard-section, .pa-final):not(#____never____) .pa-eyebrow {
  color: #ff6a63 !important;
  -webkit-text-fill-color: #ff6a63 !important;
}

/* Die page-shell-Regel malt auch .pa-container/.pa-shell weiss —
   innerhalb der dunklen Sections muessen die Wrapper transparent sein. */
html body.potenzialanalyse-page main :is(.pa-scorecard-section, .pa-final):not(#____never____) :is(.pa-container, .pa-shell, .pa-two-column, .pa-section-head):not(.pa-final-panel) {
  background: transparent !important;
}

/* =====================================================================
   RUNDE 3 — Mobile-Guard fuer die Flow-Kacheln (Phase 7a)
   Die Offer-Cards laufen mobil als ~200px-Karussell-Karten; drei
   gestaffelte Chips passen dort nicht (gemessen: Overflow bei 375px).
   Unter 760px zeigt die Kachel nur den Kern-Chip, zentriert, ohne
   Treppen-Einzug; Sweep-Signal ausgeblendet.
   ===================================================================== */
@media (max-width: 768px) {
  html body .saa-visual-tile--flow:not(#____never____) {
    align-items: center !important;
    padding: 12px !important;
  }

  html body .saa-visual-tile--flow:not(#____never____) .saa-flow-chip:not(.saa-flow-chip--core) {
    display: none !important;
  }

  html body .saa-flow-chip--core:not(#____never____) {
    font-size: 9px;
    margin-left: 0;
    padding: 7px 9px;
  }

  html body .saa-visual-tile--flow:not(#____never____)::after,
  html body .saa-visual-tile--flow:not(#____never____) .process-signal--tile {
    display: none !important;
  }
}

/* ==========================================================================
   RUNDE 5 - REPORT-FIXES (Kunden-Word-Report, 24 Screenshots)
   Alle Regeln nutzen die etablierte :not(#____never____)-Eskalation
   (siehe FIXES_LOG.md Abschnitt 9). Suchanker: "RUNDE 5".
   ========================================================================== */

/* --- R5.1 Buttons: Report "Agentur 1" - Text klebt an der Border.
   Sekundaer-Button (KI-Loesungen ansehen) auf Spec-Padding 14px 28px;
   Header-CTA ebenfalls Richtung DESIGN.md-Buttonspec angehoben. --- */
html body .hero-scene__secondary:not(#____never____) {
  padding: 14px 28px !important;
  min-height: 48px !important;
}
html body .site-header__cta:not(#____never____) {
  padding: 12px 24px !important;
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* --- R5.2 Partner-Carousel: Kicker zentriert (Report "Agentur 2"),
   echte Logos (Icon + Wortmarke), lueckenfreier Loop mit 3 Gruppen
   (Report "Agentur 7": 2 Gruppen a 967px < Viewport 1280px ->
   sichtbare Leere am Zyklusende; 3 Gruppen + -33.333%-Keyframe decken
   Viewports bis ~2x Gruppenbreite ab). --- */
html body .partner-carousel__kicker:not(#____never____) {
  text-align: center !important;
  width: 100% !important;
}
html body .partner-carousel__track:not(#____never____) {
  animation-name: partnerMarqueeThirds;
}
@keyframes partnerMarqueeThirds {
  from { transform: translateX(0); }
  to { transform: translateX(-33.3333%); }
}
html body .partner-carousel__logo:not(#____never____) {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  filter: none; /* Icons sind bereits im gedeckten Hellton eingefaerbt */
  opacity: .62;
}
html body .partner-carousel__logo img {
  display: block;
  width: auto;
  height: 26px;
}
@media (prefers-reduced-motion: reduce) {
  html body .partner-carousel__group[aria-hidden="true"]:not(#____never____) {
    display: none;
  }
}

/* --- R5.3 FAQ kompakter (Report global: "FAQ muessen weniger Platz
   einnehmen"). Baut auf dem Chevron-Redesign (VISUALS_LOG Befund 19)
   auf: gleiche Struktur, deutlich weniger Flaeche. --- */
html body :where(
  .beratung-faq-grid details,
  .dienste-faq-grid details,
  .term-faq__grid details,
  .wissen-qa details
):not(#____never____) {
  padding: 0 !important;
}
html body :where(
  .beratung-faq-grid summary,
  .dienste-faq-grid summary,
  .term-faq__grid summary,
  .wissen-qa summary
):not(#____never____) {
  padding: 14px 18px !important;
  font-size: 15.5px !important;
  line-height: 1.4 !important;
}
html body :where(
  .beratung-faq-grid details p,
  .dienste-faq-grid details p,
  .term-faq__grid details p,
  .wissen-qa details p
):not(#____never____) {
  padding: 10px 18px 16px !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
}
html body :where(.beratung-faq-grid, .dienste-faq-grid, .term-faq__grid):not(#____never____) {
  gap: 10px !important;
}
html body .home-faq-item:not(#____never____) {
  padding: 18px 22px !important;
}
html body .home-faq-item .faq-content:not(#____never____) {
  margin-top: 14px !important;
  padding-top: 14px !important;
}
html body :where(.pa-faq-list article):not(#____never____) {
  padding: 18px 20px !important;
}

/* --- R5.4 Kontakt-Formulare: Report "Kontakt 1" - native Select-Popups
   zeigten weisse Schrift auf weissem Grund (Screenshot: nur die
   markierte Option lesbar). Gemessen: input/select/textarea erbten
   color:#fff auf ~weissem Feldgrund. Explizite Feldfarben + option-
   Farben + color-scheme:light beheben Feld UND natives Popup. --- */
html body :where(.contact-field, .v2-contact-form__field, .pa-field, .pa-form__field) :where(input, select, textarea):not(#____never____) {
  color: #16202b !important;
  -webkit-text-fill-color: #16202b !important;
  background-color: #ffffff !important;
  color-scheme: light;
  caret-color: #16202b;
  border: 1px solid rgba(7, 17, 28, .22) !important;
}
html body select option {
  color: #16202b !important;
  background-color: #ffffff !important;
}
html body :where(.contact-field, .v2-contact-form__field, .pa-field, .pa-form__field) :where(input, select, textarea):not(#____never____)::placeholder {
  color: #7c8794 !important;
  -webkit-text-fill-color: #7c8794 !important;
}
html body :where(.contact-field select):not(#____never____) {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235d6673' stroke-width='2'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 12px 8px !important;
  padding-right: 42px !important;
}

/* --- R5.5 Akzent-Spans: ki-dienste/wissen laden kein Tailwind mehr,
   .text-swiss-red war dort wirkungslos (gemessen: Span identisch mit
   Resttext). Report "KI-Dienste 4": "Von"/"und" ohne Kontrastanker.
   Helle Sections -> UI-Rot; dunkle wissen-Sections -> aufgehelltes Rot
   (Lesbarkeit auf #07111c). --- */
html body.ki-dienste-page main :is(h1, h2, h3) .text-swiss-red:not(#____never____),
html body.wissen-page main :is(h1, h2, h3) .text-swiss-red:not(#____never____) {
  color: var(--saa-red, #d91e18) !important;
  -webkit-text-fill-color: var(--saa-red, #d91e18) !important;
}
html body.wissen-page main :is(.wissen-regulation, .wissen-cta) :is(h1, h2, h3) .text-swiss-red:not(#____never____) {
  color: #ff7d76 !important;
  -webkit-text-fill-color: #ff7d76 !important;
}
/* Transition-Section (Report "KI-Dienste 4", "Von"/"und" unlesbar):
   Root Cause war ein Konflikt zweier Altregeln - die Aufhellungs-Regel
   (~20982) setzt background-color:#f7f9fb + dunklen Text, der dunkle
   ::before-Gradient der Basisregel (~10758) malt aber DARUEBER ->
   dunkler Text auf dunklem Grund, und der JS-Kontrast-Painter liest
   die (helle) background-color und malt ebenfalls dunkel. Fix: Section
   konsistent dunkel deklarieren; damit liest auch der Painter den
   richtigen Ton und setzt helle Textfarben. */
html body.ki-dienste-page main .dienste-transition-section:not(#____never____) {
  background-color: #071927 !important;
}
html body.ki-dienste-page .dienste-transition-grid h2:not(#____never____) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html body.ki-dienste-page .dienste-transition-grid > div > p:not(#____never____) {
  color: rgba(239, 241, 243, .84) !important;
  -webkit-text-fill-color: rgba(239, 241, 243, .84) !important;
}
html body.ki-dienste-page .dienste-transition-link:not(#____never____) {
  color: #ff6f68 !important;
  -webkit-text-fill-color: #ff6f68 !important;
  border-bottom: 1px solid currentColor;
  font-weight: 600;
}

/* --- R5.6 wissen-Tab-Leiste (Report "Wissen 1": behalten, staerker ans
   Gesamtdesign anbinden; live gemessen waren die Links fast-weiss auf
   weiss). Schlichte Leiste: dunkle Uppercase-Labels, roter Unterstrich
   bei Hover/Fokus. --- */
html body .wissen-index:not(#____never____) {
  background: #ffffff !important;
  border-top: 1px solid rgba(7, 17, 28, .08);
  border-bottom: 1px solid rgba(7, 17, 28, .08);
  padding: 0 !important;
}
html body .wissen-index .wissen-editorial-shell:not(#____never____) {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 clamp(18px, 4vw, 48px);
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
html body .wissen-index a:not(#____never____) {
  color: #3c4654 !important;
  -webkit-text-fill-color: #3c4654 !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 16px 2px !important;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
html body .wissen-index a:hover:not(#____never____),
html body .wissen-index a:focus-visible:not(#____never____) {
  color: var(--saa-red, #d91e18) !important;
  -webkit-text-fill-color: var(--saa-red, #d91e18) !important;
  border-bottom-color: var(--saa-red, #d91e18);
}

/* --- R5.7 Academy "stell dich kurz vor": strong/small klebten ohne
   Abstand nebeneinander (gemessen 0px Luecke). Sauberes Icon/Text-Grid
   pro Schritt. --- */
html body .academy-apply-steps li:not(#____never____) {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 2px;
  align-items: center;
  align-content: center;
  padding: 20px 22px !important;
}
html body .academy-apply-steps li > .material-symbols-outlined:not(#____never____) {
  grid-row: 1 / span 2;
  align-self: center;
}
html body .academy-apply-steps li > strong:not(#____never____) {
  display: block;
  grid-column: 2;
  margin: 0;
}
html body .academy-apply-steps li > small:not(#____never____) {
  display: block;
  grid-column: 2;
  margin: 0;
  opacity: .72;
}

/* --- R5.8 ueber-uns Proof-Leiste (Report "Ueber uns 4": "Style:
   Schlicht, Modern"): gemessen 96px Padding, Boxen mit Rahmen und
   dunkler Text auf dunklem Grund. Neu: schlanke Zeile, helle
   Uppercase-Labels, roter Punkt als Marker, keine Boxen. --- */
html body .ueber-proof:not(#____never____) {
  padding: 26px 0 !important;
  background: #eef2f7 !important;
  border-top: 1px solid #dbe3ec;
  border-bottom: 1px solid #dbe3ec;
}
html body .ueber-proof .ueber-shell:not(#____never____) {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px clamp(24px, 4vw, 56px);
}
html body .ueber-proof span:not(#____never____) {
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: #26384c !important;
  -webkit-text-fill-color: #26384c !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: .09em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
html body .ueber-proof span:not(#____never____)::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--saa-red, #d91e18);
  flex: 0 0 auto;
}

/* --- R5.9 ueber-uns Team-Section (Report: "Section fuer Mitarbeiter
   mit Bildern, Name, Position"). Kartenraster im Card-System der Seite;
   Media-Kachel ist der Foto-Slot (echte Portraits liegen noch nicht im
   Projekt - Slot nimmt <img> auf, faellt sonst auf Icon zurueck). --- */
.ueber-team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-top: 40px;
}
/* Flex statt Grid, damit eine unvollstaendige letzte Reihe (5 Karten in
   3 Spalten) horizontal zentriert wird statt links zu haengen. */
.ueber-team-grid > .ueber-team-card {
  flex: 0 1 calc((100% - 48px) / 3);
  box-sizing: border-box;
}
@media (max-width: 1024px) {
  .ueber-team-grid > .ueber-team-card { flex-basis: calc((100% - 24px) / 2); }
}
@media (max-width: 640px) {
  .ueber-team-grid > .ueber-team-card { flex-basis: 100%; }
}
.ueber-team-card {
  background: #fbfcfd;
  border: 1px solid rgba(7, 17, 28, .1);
  border-radius: var(--saa-card-radius, 10px);
  box-shadow: 0 1px 2px rgba(7, 17, 28, .05);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ueber-team-card__media {
  aspect-ratio: 1 / 1;
  border-radius: var(--saa-card-radius-sm, 8px);
  background: linear-gradient(160deg, #0d1b28, #071019);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0 0 16px;
}
.ueber-team-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ueber-team-card__media .material-symbols-outlined {
  font-size: 64px;
  color: rgba(233, 240, 248, .34);
}
.ueber-team-card strong {
  font-size: 17px;
  font-weight: 600;
  color: #101820;
}
.ueber-team-card small {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--saa-red, #d91e18);
}
.ueber-team-card p {
  margin: 8px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: #4a5868;
}

/* Agentur: acht konkrete Vorteile als ruhige, vertikal lesbare Kartenfolge. */
.home-benefits-section__heading {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
}
.home-benefits-section .swiss-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.home-benefits-section .saa-signal-card {
  display: grid !important;
  min-height: 0;
  grid-column: span 1 !important;
  grid-template-columns: 58px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 10px 24px !important;
  align-content: start;
  padding: clamp(28px, 3vw, 40px) !important;
}
.home-benefits-section .saa-signal-card > .material-symbols-outlined {
  display: grid;
  width: 56px;
  height: 56px;
  grid-row: 1 / 3;
  place-items: center;
  border: 1px solid currentColor;
}
.home-benefits-section .saa-signal-card h4 { margin: 0; }
.home-benefits-section .saa-signal-card p { max-width: 52ch; margin: 0; line-height: 1.68; }
@media (max-width: 768px) {
  .home-benefits-section .swiss-grid { grid-template-columns: 1fr; }
  .home-benefits-section .saa-signal-card { grid-template-columns: 50px minmax(0, 1fr); gap-inline: 18px !important; }
  .home-benefits-section .saa-signal-card > .material-symbols-outlined { width: 48px; height: 48px; }
}

/* --- R5.10 termin-agent Hero-Foto zurueck (Cross-Cutting "echte
   Fotos"): das text-safe-Foto ist hell, die Hero-Section (Runde 3)
   dunkel mit hellem Text. Dunkler Verlauf ueber dem Bild haelt den
   Titel lesbar; Alt-Regel "::after content:none !important" wird per
   never-ID ueberstimmt. --- */
html body .term-agent .term-hero__background img:not(#____never____) {
  opacity: .88 !important;
}
html body .term-agent .term-hero__background:not(#____never____)::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg, rgba(4, 11, 19, .93) 0%, rgba(4, 11, 19, .82) 42%, rgba(4, 11, 19, .5) 100%) !important;
  pointer-events: none;
}

/* --- R5.11 Subpage-Hero-Fotos (ki-beratung/ki-dienste): Lesbarkeits-
   Netz - dunkler Verlauf am Content-Rand des absoluten Media-Layers
   (Basisregel ~4373), damit der Titel auf jedem Bildausschnitt sichtbar
   bleibt (Report "Beratung 1": Titel nicht komplett sichtbar). Kein
   Eingriff in Position/Clip-Path der Basisregel. --- */
html body :is(.beratung-hero, .dienste-hero) .hero-scene__media:not(#____never____)::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg, rgba(4, 11, 19, .82) 0%, rgba(4, 11, 19, .45) 46%, rgba(4, 11, 19, .12) 100%) !important;
  pointer-events: none;
  z-index: 1;
}

/* ==========================================================================
   RUNDE 6 — KATALOG-MOSAIK (nur ki-loesungen.html / .usecase-overview-page)
   Suchanker: "RUNDE 6". Eskalation :not(#____never____) wie RUNDE 5.
   Bento-Rhythmus statt uniformem Raster: pro Segment 1 dunkle Feature-
   Karte (Muster: Homepage-Offer-Cards/bg-graphite, dienste-practice-card
   --dark) + helle Wide-Karten als Lochfueller, Standardkarten mit rand-
   losem Foto. Painter-Hinweis: dunkle Karte funktioniert ueber die Klasse
   bg-graphite auf dem __body-DIV (Dark-Liste in main.js closestSurfaceTone
   matcht das Body-Div, bevor der Walk das .usecase-card-Article erreicht,
   das pauschal in der Light-Liste steht). Segment-Scoping unten haengt an
   :nth-last-of-type — bricht, wenn Segmente ergaenzt/entfernt werden.
   ========================================================================== */

/* --- R6.1 Kartenbasis: Padding wandert vom <article> auf den __body
   (randloses Foto; overflow:hidden besteht ~L24106). Keine Negativ-
   Margins (width:100% !important ~L18363 macht die ueberbestimmt). --- */
html body .usecase-overview-page .usecase-card:not(#____never____) {
  --r6-pad: clamp(18px, 1.8vw, 26px);
  --r6-accent: var(--saa-red, #d91e18);
  padding: 0 !important;
}

/* --- R6.2 Akzent-Mapping (Toene wie .saa-visual-tile ~L24777). --- */
html body .usecase-overview-page .usecase-card[data-accent="kommunikation"]:not(#____never____) { --r6-accent: color-mix(in srgb, var(--saa-red, #d91e18) 66%, #ff9640); }
html body .usecase-overview-page .usecase-card[data-accent="daten-wissen"]:not(#____never____)  { --r6-accent: color-mix(in srgb, var(--saa-red, #d91e18) 58%, #ff5d8f); }
html body .usecase-overview-page .usecase-card[data-accent="content"]:not(#____never____)       { --r6-accent: color-mix(in srgb, var(--saa-red, #d91e18) 62%, #ffb56b); }
html body .usecase-overview-page .usecase-card[data-accent="visuals"]:not(#____never____)       { --r6-accent: color-mix(in srgb, var(--saa-red, #d91e18) 56%, #ff7a59); }

/* --- R6.3 EIN Akzentelement: 3px Linie an der Karten-Oberkante (fuer
   alle Kartenformen identisch). Karte ist position:relative (~L5646);
   ::before absolut -> kein Flex-/Grid-Item. --- */
html body .usecase-overview-page .usecase-card:not(#____never____)::before {
  background: var(--r6-accent, var(--saa-red, #d91e18)) !important;
  content: "" !important;
  height: 3px !important;
  left: 0 !important;
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  z-index: 2 !important;
}

/* --- R6.4 Media-Basis (vertikale Form): 16/10 + cover aus dem QA-Lock
   (~L18352/L18374) bleiben; Rahmen (~L10334), Alt-Margins (~L18359,
   ~L8889) und Radius neutralisieren. --- */
html body .usecase-overview-page .usecase-card__media:not(#____never____) {
  aspect-ratio: 16 / 10 !important;
  border: 0 !important;
  border-radius: 0 !important;
  height: auto !important;
  margin: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
}

/* --- R6.5 Sanfter Hover-Zoom (transform:none aus ~L18377/L9384 nur im
   Hover-/Fokusfall ueberstimmen). --- */
html body .usecase-overview-page .usecase-card__media img:not(#____never____) {
  transition: transform 340ms cubic-bezier(.2, .6, .25, 1) !important;
}
html body .usecase-overview-page .usecase-card:hover .usecase-card__media img:not(#____never____),
html body .usecase-overview-page .usecase-card:focus-within .usecase-card__media img:not(#____never____) {
  transform: scale(1.04) !important;
}

/* --- R6.6 Body: 2-Spalten-Grid, Bottom-Row = Chip links + Textlink
   rechts. Ersetzt die 6-Zeilen-Templates ~L12169/~L18559 inkl. 900px-
   Variante ~L18638. Zeile 4 (Proof) = 1fr pinnt die Bottom-Row an die
   Kartenunterkante — Karten einer Grid-Reihe werden gestreckt (~L9390/
   L9393), dadurch liegen Bottom-Rows reihenweise buendig. --- */
html body .usecase-overview-page .usecase-card__body:not(#____never____) {
  column-gap: 10px !important;
  display: grid !important;
  flex: 1 1 auto !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto auto minmax(48px, 1fr) auto !important;
  min-width: 0 !important;
  padding: 20px var(--r6-pad) var(--r6-pad) !important;
  row-gap: 12px !important;
}
html body .usecase-overview-page .usecase-card__body:not(#____never____) > :where(.usecase-card__category, h3, .usecase-card__benefit, .usecase-card__proof) {
  grid-column: 1 / -1 !important;
}

/* --- R6.7 Ruhigere Hierarchie (nur Form — Textfarben malt der Painter
   inline). Titel Richtung DESIGN.md (700 statt 850er-Altbestand ~L18584),
   Proof: 2px-Linie statt Quadrat. --- */
html body .usecase-overview-page .usecase-card h3:not(#____never____) {
  font-size: clamp(19px, 1.5vw, 23px) !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  margin: 0 !important;
}
html body .usecase-overview-page .usecase-card__benefit:not(#____never____) {
  margin: 0 !important;
}
html body .usecase-overview-page .usecase-card__proof:not(#____never____) {
  font-weight: 600 !important;
  grid-template-columns: 2px minmax(0, 1fr) !important;
  margin: 0 !important;
}
html body .usecase-overview-page .usecase-card__proof:not(#____never____)::before {
  align-self: stretch !important;
  background: color-mix(in srgb, var(--saa-red, #d91e18) 72%, #ffffff) !important;
  height: auto !important;
  margin: 2px 0 !important;
  width: 2px !important;
}

/* --- R6.8 Chip in die Bottom-Row (Alt-Margin ~L25002 weg). Gescoped auf
   .usecase-card__body — index.html-Chips bleiben unberuehrt. --- */
html body .usecase-overview-page .usecase-card__body .saa-tag--chip:not(#____never____) {
  align-self: center !important;
  display: inline-block !important;
  grid-column: 1 !important;
  grid-row: 5 !important;
  justify-self: start !important;
  letter-spacing: 0.04em !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  padding: 5px 8px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* --- R6.9 CTA: Button -> Textlink. Ueberstimmt ~L5219, ~L11405,
   ~L18435-18454 (Hover-Invertierung) und die 32px-Icon-Box ~L6787.
   Laufzeitfarbe: Painter — helle Karten via HTML-Klasse text-swiss-red
   (rot), Feature-Karten OHNE die Klasse (Painter malt weiss auf dunkler
   Surface). CSS-Farbe = No-JS-Fallback. Kein Button mehr -> RULES.md-
   Buttonspec greift nicht; Tap-Target ist die ganze Karte (R6.10). --- */
html body .usecase-overview-page .usecase-card__link:not(#____never____) {
  align-self: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--saa-red, #d91e18) !important;
  -webkit-text-fill-color: var(--saa-red, #d91e18) !important;
  display: inline-flex !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  gap: 6px !important;
  grid-column: 2 !important;
  grid-row: 5 !important;
  justify-content: flex-end !important;
  justify-self: end !important;
  margin: 0 !important;
  min-height: 44px !important;
  padding: 0 !important;
  white-space: nowrap !important;
  width: auto !important;
}
html body .usecase-overview-page .usecase-card__link:hover:not(#____never____),
html body .usecase-overview-page .usecase-card__link:focus-visible:not(#____never____) {
  background: transparent !important;
  border: 0 !important;
}
html body .usecase-overview-page .usecase-card__link .material-symbols-outlined:not(#____never____) {
  flex: 0 0 auto !important;
  font-size: 18px !important;
  height: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  transition: transform 200ms ease !important;
  width: auto !important;
}
html body .usecase-overview-page .usecase-card:hover .usecase-card__link .material-symbols-outlined:not(#____never____),
html body .usecase-overview-page .usecase-card__link:focus-visible .material-symbols-outlined:not(#____never____) {
  transform: translateX(4px) !important;
}

/* --- R6.10 Stretched-Link: ganze Karte klickbar; Link bleibt static,
   ::after ankert am position:relative-Article. Bricht, falls __body oder
   __link je eine position erhalten. --- */
html body .usecase-overview-page .usecase-card__link:not(#____never____)::after {
  content: "" !important;
  inset: 0 !important;
  position: absolute !important;
  z-index: 1 !important;
}
html body .usecase-overview-page .usecase-card__link:focus-visible:not(#____never____) {
  outline: 2px solid var(--saa-red, #d91e18) !important;
  outline-offset: 4px !important;
}

/* --- R6.11 Segment-Koepfe: Icon-Chips raus (HTML geloescht, Guard),
   roter Index-Kicker per CSS-Counter. ::before erbt -webkit-text-fill-
   color:#111827 aus ~L18400 -> beide Kanaele explizit rot. --- */
html body .usecase-overview-page .usecase-segment__icons:not(#____never____) { display: none !important; }
html body .usecase-overview-page .usecase-overview__catalogue:not(#____never____) { counter-reset: r6-segment; }
/* Segmente sind KEINE Karten: das alte harte Weiss auf dem Segment-
   Container stand als 1137px-Kasten auf dem grauen Seitengrund
   (sichtbare Kanten links/rechts, Kicker klebte an der Oberkante).
   Transparent — die Karten tragen ihre Flaechen selbst. */
html body .usecase-overview-page .usecase-segment:not(#____never____) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  counter-increment: r6-segment;
}
/* Nummern-Kicker (01, 02 …) auf Wunsch komplett entfernt. */
html body .usecase-overview-page .usecase-segment__head h3:not(#____never____)::before {
  content: none !important;
  display: none !important;
}
html body .usecase-overview-page .usecase-segment__head:not(#____never____) { margin-bottom: 28px !important; }

/* --- R6.12 MOSAIK. Basis: gap 20px (ueberstimmt ~L5579 und ~L6767).
   Segment-Scoping per :nth-last-of-type: Seg4=:last-of-type,
   Seg3=:nth-last-of-type(2), Seg2=:nth-last-of-type(3). Alle Span-/
   Platzierungsregeln in min-width-Queries — unter 761px greift das
   bestehende 1fr-Grid (~L5907). --- */
html body .usecase-overview-page .usecase-grid:not(#____never____) { gap: 20px !important; }

@media (min-width: 769px) {
  /* Feature + Wide spannen 2 Spalten (Tablet-2er- wie Desktop-3er-Grid). */
  html body .usecase-overview-page .usecase-card--feature:not(#____never____),
  html body .usecase-overview-page .usecase-card--wide:not(#____never____) {
    grid-column: auto / span 2 !important;
  }

  /* Horizontale Anatomie: Article wird Grid. Feature: Text links, Foto
     rechts; Wide: Foto links, Text rechts (Spiegel-Rhythmus). Foto
     volle Hoehe, 16/10-Lock aufgeloest. Body bekommt Vollpadding. */
  html body .usecase-overview-page :is(.usecase-card--feature, .usecase-card--wide):not(#____never____) {
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) !important;
  }
  html body .usecase-overview-page .usecase-card--feature .usecase-card__body:not(#____never____) { grid-column: 1 !important; grid-row: 1 !important; }
  html body .usecase-overview-page .usecase-card--feature .usecase-card__media:not(#____never____) { grid-column: 2 !important; grid-row: 1 !important; }
  html body .usecase-overview-page .usecase-card--wide:not(#____never____) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) !important;
  }
  html body .usecase-overview-page .usecase-card--wide .usecase-card__media:not(#____never____) { grid-column: 1 !important; grid-row: 1 !important; }
  html body .usecase-overview-page .usecase-card--wide .usecase-card__body:not(#____never____) { grid-column: 2 !important; grid-row: 1 !important; }
  html body .usecase-overview-page :is(.usecase-card--feature, .usecase-card--wide) .usecase-card__media:not(#____never____) {
    aspect-ratio: auto !important;
    height: 100% !important;
    min-height: 220px !important;
  }
  html body .usecase-overview-page :is(.usecase-card--feature, .usecase-card--wide) .usecase-card__body:not(#____never____) {
    padding: var(--r6-pad) !important;
  }
  html body .usecase-overview-page .usecase-card--feature h3:not(#____never____) {
    font-size: clamp(22px, 2vw, 28px) !important;
  }
}

@media (min-width: 769px) and (max-width: 1100px) {
  /* Tablet-Ausnahmen (2-Spalten-Grid): Seg3 haette 9 Zellen -> Loch;
     Video Studio (5. Karte) faellt auf 1sp vertikal zurueck (8 Zellen =
     4 volle Reihen). Seg4: 1 Spalte, Karten volle Breite horizontal. */
  html body .usecase-overview-page .usecase-segment:nth-last-of-type(2) .usecase-grid > .usecase-card--wide:nth-child(5):not(#____never____) {
    display: flex !important;
    grid-column: auto / span 1 !important;
  }
  html body .usecase-overview-page .usecase-segment:nth-last-of-type(2) .usecase-grid > .usecase-card--wide:nth-child(5) .usecase-card__media:not(#____never____) {
    aspect-ratio: 16 / 10 !important;
    height: auto !important;
    min-height: 0 !important;
  }
  html body .usecase-overview-page .usecase-segment:nth-last-of-type(2) .usecase-grid > .usecase-card--wide:nth-child(5) .usecase-card__body:not(#____never____) {
    padding: 20px var(--r6-pad) var(--r6-pad) !important;
  }
  html body .usecase-overview-page .usecase-segment:last-of-type .usecase-grid:not(#____never____) {
    grid-template-columns: 1fr !important;
  }
  html body .usecase-overview-page .usecase-segment:last-of-type .usecase-grid > .usecase-card:not(#____never____) {
    grid-column: auto !important;
  }
}

@media (min-width: 1100px) {
  /* 3-Spalten-Grid (ueberstimmt Basis 4sp ~L5580 und 1240er-3sp ~L5855). */
  html body .usecase-overview-page .usecase-grid:not(#____never____) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  /* Segment 2 gespiegelt: W beidachsig definit (Platzierungsschritt 1),
     sonst blockiert die auto-platzierte 3. Karte r2c1 und W rutscht mit
     Loch in Reihe 3. dense fuellt r1c1/r2c3 mit den Standardkarten. */
  html body .usecase-overview-page .usecase-segment:nth-last-of-type(3) .usecase-grid:not(#____never____) {
    grid-auto-flow: row dense !important;
  }
  html body .usecase-overview-page .usecase-segment:nth-last-of-type(3) .usecase-card--feature:not(#____never____) {
    grid-column: 2 / 4 !important;
  }
  html body .usecase-overview-page .usecase-segment:nth-last-of-type(3) .usecase-card--wide:not(#____never____) {
    grid-column: 1 / 3 !important;
    grid-row: 2 !important;
  }
  /* Segment 4: eigenes 50/50-Grid, Spans neutralisieren. Text-Spalte
     der Halbbreiten-Karten leicht verbreitert (1.2fr), damit die
     Bottom-Row (Chip "Kommunikation" + Link) nicht kappt. */
  html body .usecase-overview-page .usecase-segment:last-of-type .usecase-grid:not(#____never____) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  html body .usecase-overview-page .usecase-segment:last-of-type .usecase-grid > .usecase-card:not(#____never____) {
    grid-column: auto / span 1 !important;
    grid-row: auto !important;
  }
  html body .usecase-overview-page .usecase-segment:last-of-type .usecase-card--feature:not(#____never____) {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr) !important;
  }
  html body .usecase-overview-page .usecase-segment:last-of-type .usecase-card--wide:not(#____never____) {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) !important;
  }
}

/* --- R6.13 DUNKLE Feature-Karte (Tokens aus CARD-MODERNISIERUNG ~L24059).
   Ueberstimmt #fff-Locks ~L18418 und bg-light ~L24133. Painter-Hook ist
   die Klasse bg-graphite auf dem __body-DIV (HTML); dessen evtl. Utility-
   Hintergrund wird neutralisiert — fuer den Painter zaehlt der Klassen-
   Match, nicht die Farbe. Chip als Outline-Variante (Muster ~L25008),
   Link-Fallback hell. Gilt auf ALLEN Breakpoints. --- */
html body .usecase-overview-page .usecase-card--feature:not(#____never____) {
  background-color: var(--saa-card-bg-dark, #0c1a27) !important;
  border-color: var(--saa-card-border-dark, rgba(233, 240, 248, .14)) !important;
  box-shadow: var(--saa-card-shadow-rest-dark, 0 1px 2px rgba(0, 0, 0, .28)) !important;
}
html body .usecase-overview-page .usecase-card--feature:hover:not(#____never____) {
  box-shadow: var(--saa-card-shadow-hover-dark), var(--saa-card-ring) !important;
}
html body .usecase-overview-page .usecase-card--feature .usecase-card__body:not(#____never____) {
  background: transparent !important;
}
html body .usecase-overview-page .usecase-card--feature .usecase-card__body .saa-tag--chip:not(#____never____) {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: rgba(239, 241, 243, 0.78) !important;
  -webkit-text-fill-color: rgba(239, 241, 243, 0.78) !important;
}
html body .usecase-overview-page .usecase-card--feature .usecase-card__link:not(#____never____) {
  color: #eff1f3 !important;
  -webkit-text-fill-color: #eff1f3 !important;
}

/* --- R6.14 Reduced Motion. --- */
@media (prefers-reduced-motion: reduce) {
  html body .usecase-overview-page .usecase-card__media img:not(#____never____),
  html body .usecase-overview-page .usecase-card__link .material-symbols-outlined:not(#____never____) {
    transition: none !important;
  }
  html body .usecase-overview-page .usecase-card:hover .usecase-card__media img:not(#____never____),
  html body .usecase-overview-page .usecase-card:focus-within .usecase-card__media img:not(#____never____),
  html body .usecase-overview-page .usecase-card:hover .usecase-card__link .material-symbols-outlined:not(#____never____),
  html body .usecase-overview-page .usecase-card__link:focus-visible .material-symbols-outlined:not(#____never____) {
    transform: none !important;
  }
}

/* --- R6.15 wissen.html #fragen (User-Entscheid): Die grosse
   Ueberschrift-Spalte ("Fragen, die vor einem KI-Projekt...") wirkte
   verloren und wurde ersatzlos entfernt — die Q&A-Akkordeons laufen
   jetzt zentriert ueber die volle Shell-Breite. --- */
html body.wissen-page .wissen-questions .wissen-editorial-shell:not(#____never____) {
  display: block !important;
}
/* Verwaistes Deko-Eck der geloeschten Ueberschrift-Spalte (122x86px
   ::before, absolut) ausblenden. */
html body.wissen-page .wissen-questions:not(#____never____)::before {
  content: none !important;
  display: none !important;
}
html body.wissen-page .wissen-questions .wissen-qa:not(#____never____) {
  margin: 0 auto !important;
  max-width: 860px !important;
  width: 100% !important;
}

/* --- Section rhythm (R3): "Wir beginnen beim Betrieb" wieder als dunkle
   Sektion (Arbeitsweise). Der frueher gemeldete dunkel-auf-dunkel-Bug
   (R6.16: transparenter background-color liess den Painter die Flaeche
   fuer hell halten) tritt hier NICHT auf, weil Ueberschrift + Intro
   unten autoritativ aufgehellt werden; Step-Karten bleiben helle Karten
   im etablierten Card-System (dunkle Ueberschrift/Text auf hell). --- */
html body.ueber-page .ueber-operating:not(#____never____) {
  background-color: #071d2a !important;
  background-image: linear-gradient(112deg, #071d2a 0%, #071d2a 56%, #211423 100%) !important;
  color: #eff1f3 !important;
}
html body.ueber-page .ueber-operating .ueber-operating-line h2:not(#____never____) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html body.ueber-page .ueber-operating .ueber-operating-line p:not(#____never____) {
  color: rgba(239, 241, 243, .86) !important;
  -webkit-text-fill-color: rgba(239, 241, 243, .86) !important;
}
html body.ueber-page .ueber-operating-steps:not(#____never____) {
  border-top: 0 !important;
  gap: 20px !important;
}
html body.ueber-page .ueber-operating-steps article:not(#____never____) {
  background: #fbfcfd !important;
  border: 1px solid rgba(7, 17, 28, .1) !important;
  border-radius: var(--saa-card-radius, 10px) !important;
  box-shadow: 0 1px 2px rgba(7, 17, 28, .05) !important;
  min-height: 0 !important;
  padding: 26px !important;
}
html body.ueber-page .ueber-operating-steps article strong:not(#____never____) {
  color: #101820 !important;
  -webkit-text-fill-color: #101820 !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  margin: 22px 0 10px !important;
}
html body.ueber-page .ueber-operating-steps article p:not(#____never____) {
  color: #4a5868 !important;
  -webkit-text-fill-color: #4a5868 !important;
}

/* --- Section rhythm (R3): Haltung als dezent getoente Flaeche + rote
   Statement-Kante. Autoritative Ebene, schlaegt die :where()-
   Normalisierung, die .ueber-position sonst auf reines Weiss zieht. --- */
html body.ueber-page .ueber-position:not(#____never____) {
  background: #eef2f7 !important;
}
html body.ueber-page .ueber-position-grid > div:first-child:not(#____never____) {
  border-left: 5px solid #ff2d28;
  padding-left: clamp(26px, 4vw, 48px);
}

/* --- Section rhythm (R3): Textaufhellung fuer die neuen dunklen
   Sektionen Team + Werte. Autoritative Ebene (ID-Level via :not),
   schlaegt die globale "Ueberschrift/Absatz dunkel"-Normalisierung,
   deren Dunkel-Allowlist bisher nur .ueber-cta kennt. Karten in Team
   bleiben hell und behalten ihren dunklen Text. --- */
html body.ueber-page .ueber-team > .ueber-shell > h2:not(#____never____) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html body.ueber-page .ueber-team > .ueber-shell > p:not(#____never____) {
  color: rgba(239, 241, 243, .86) !important;
  -webkit-text-fill-color: rgba(239, 241, 243, .86) !important;
}
html body.ueber-page .ueber-values h2:not(#____never____),
html body.ueber-page .ueber-values-list strong:not(#____never____) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html body.ueber-page .ueber-values-grid > div:first-child p:not(#____never____),
html body.ueber-page .ueber-values-list p:not(#____never____) {
  color: rgba(239, 241, 243, .84) !important;
  -webkit-text-fill-color: rgba(239, 241, 243, .84) !important;
}

/* --- R6.17 academy "Wir suchen keine Selbstdarsteller": H2 rendert 64px
   in einer ~426px-Spalte — "Selbstdarsteller." ist breiter als die
   Spalte und laeuft in die Nachbarkarte. Proportionale Groesse +
   Umbruch-Absicherung. --- */
html body.academy-page .academy-fit-copy h2:not(#____never____) {
  font-size: clamp(26px, 3vw, 36px) !important;
  line-height: 1.15 !important;
  overflow-wrap: break-word !important;
}

/* --- R6.18 kontakt: Formular ohne Scrollen ausfuellbar (User-Vorgabe).
   Vorher: 118px Section-Padding + 204px Kopf -> erstes Feld bei y~508.
   Kompakter Kopf + reduziertes Padding; Prozess-Aside-Titel
   proportional statt Display-Groesse. --- */
html body.contact-page-body .contact-form-shell:not(#____never____) {
  padding-top: 18px !important;
}
html body.contact-page-body .contact-form-head h2:not(#____never____) {
  font-size: clamp(26px, 2.6vw, 34px) !important;
  line-height: 1.15 !important;
  margin: 6px 0 10px !important;
}
html body.contact-page-body .contact-form-head p:not(#____never____) {
  margin: 0 0 8px !important;
}
html body.contact-page-body .contact-form-head:not(#____never____) {
  margin-bottom: 6px !important;
  padding-bottom: 10px !important;
}
html body.contact-page-body .contact-form-panel:not(#____never____) {
  padding-top: 22px !important;
}
html body.contact-page-body .contact-process-panel h2:not(#____never____) {
  font-size: clamp(24px, 2.4vw, 32px) !important;
  line-height: 1.18 !important;
}

/* --- R6.19 kontakt: (a) Feld-Innenabstand — Inputs hatten padding
   10px 0, Platzhalter klebten an der Border. (b) Kompaktere vertikale
   Dichte, damit das GESAMTE Formular inkl. Submit bei 1280x900 ohne
   Scrollen sichtbar ist (Submit lag bei y=1104). Label "Bereich" statt
   Zweizeiler (HTML) haelt die Select-Reihe symmetrisch. --- */
html body.contact-page-body :where(.contact-field) :where(input, select, textarea):not(#____never____) {
  padding: 8px 14px !important;
  min-height: 40px !important;
  height: auto !important;
}
html body.contact-page-body .contact-field select:not(#____never____) {
  padding-right: 42px !important;
}
html body.contact-page-body #contact-form:not(#____never____) {
  gap: 10px !important;
  row-gap: 10px !important;
}
html body.contact-page-body .contact-field label:not(#____never____),
html body.contact-page-body .contact-field-grid label:not(#____never____) {
  margin-bottom: 2px !important;
}
html body.contact-page-body .contact-field textarea:not(#____never____) {
  height: 56px !important;
  min-height: 56px !important;
}
html body.contact-page-body .contact-consent:not(#____never____) {
  font-size: 12.5px !important;
  line-height: 1.45 !important;
  margin: 2px 0 !important;
}
html body.contact-page-body .contact-submit:not(#____never____) {
  margin-top: 4px !important;
}
html body.contact-page-body .contact-form-panel:not(#____never____) {
  padding-bottom: 28px !important;
}

/* --- R6.20 FAQ ki-dienste + ki-beratung (User-Entscheid, analog
   wissen #fragen): Titelblock entfernt (HTML), Fragenliste zentriert
   ueber volle Shell-Breite; rote Streu-Deko der Karten
   (details::before 48x2px/4x80px, ::after 34x1px) neutralisiert. --- */
html body :is(.dienste-faq-section .dienste-shell, .beratung-faq-section .beratung-shell):not(#____never____) {
  display: block !important;
}
html body :is(.dienste-faq-grid, .beratung-faq-grid):not(#____never____) {
  margin: 0 auto !important;
  max-width: 860px !important;
  width: 100% !important;
}
html body :is(.dienste-faq-grid, .beratung-faq-grid) details:not(#____never____)::before,
html body :is(.dienste-faq-grid, .beratung-faq-grid) details:not(#____never____)::after {
  content: none !important;
  display: none !important;
}
/* Verwaistes rotes Deko-Eck der Sections (122x86px ::before, gehoerte
   optisch zum entfernten Titelblock) ausblenden. */
html body :is(.dienste-faq-section, .beratung-faq-section):not(#____never____)::before,
html body :is(.dienste-faq-section, .beratung-faq-section):not(#____never____)::after {
  content: none !important;
  display: none !important;
}

/* --- R6.21 kontakt: Optik-Redesign (User: "zu eckig", "mehr Breite").
   Breiterer Container, Formular-Spalte dominanter, Panels als weiche
   Karten (14px Radius, zarter Schatten), Felder mit 9px Radius +
   ruhigem Fokusring, Submit abgerundet. Dichte aus R6.19 bleibt. --- */
html body.contact-page-body .contact-container:not(#____never____) {
  max-width: 1360px !important;
}
html body.contact-page-body .contact-workflow-grid:not(#____never____) {
  gap: 28px !important;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) !important;
}
@media (max-width: 1024px) {
  html body.contact-page-body .contact-workflow-grid:not(#____never____) {
    grid-template-columns: 1fr !important;
  }
}
html body.contact-page-body :is(.contact-form-panel, .contact-process-panel):not(#____never____) {
  background: #fbfcfd !important;
  border: 1px solid rgba(7, 17, 28, .08) !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 2px rgba(7, 17, 28, .04), 0 14px 36px rgba(7, 17, 28, .06) !important;
}
html body.contact-page-body .contact-form-panel:not(#____never____) {
  padding: 26px 32px 30px !important;
}
html body.contact-page-body .contact-process-panel:not(#____never____) {
  padding: 26px 32px !important;
}
html body.contact-page-body :where(.contact-field) :where(input, select, textarea):not(#____never____) {
  border: 1px solid rgba(7, 17, 28, .14) !important;
  border-radius: 9px !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
html body.contact-page-body :where(.contact-field) :where(input, select, textarea):not(#____never____):hover {
  border-color: rgba(7, 17, 28, .3) !important;
}
html body.contact-page-body :where(.contact-field) :where(input, select, textarea):not(#____never____):focus {
  border-color: var(--saa-red, #d91e18) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--saa-red, #d91e18) 14%, transparent) !important;
}
html body.contact-page-body .contact-field textarea:not(#____never____) {
  height: 74px !important;
  min-height: 74px !important;
  overflow: auto !important;
  resize: vertical !important;
}
html body.contact-page-body .contact-consent input[type="checkbox"]:not(#____never____) {
  accent-color: var(--saa-red, #d91e18);
}
html body.contact-page-body .contact-submit:not(#____never____) {
  border-radius: 999px !important;
}

/* --- R6.22 FAQ ohne Titelkarte + zentriert, jetzt SITE-WEIT (User:
   "ueberall, wo es eine FAQ gibt"): index (home-faq), termin-agent
   (term-faq), potenzialanalyse (pa-faq); wissen/dienste/beratung sind
   bereits umgestellt. Homepage-Items zusaetzlich kompakter, das
   "?"-Badge (::before der Kopfzeile) entfaellt — 2-Spalten-Kopf
   [Frage|Chevron] wie auf den Subpages. --- */
html body.home-page .home-faq-shell:not(#____never____) {
  display: block !important;
  max-width: 900px !important;
}
html body.home-page .home-faq-list:not(#____never____) {
  margin: 0 auto !important;
  max-width: 860px !important;
  width: 100% !important;
}
html body.home-page .home-faq-item:not(#____never____) {
  padding: 14px 20px !important;
}
html body.home-page .home-faq-list > * + *:not(#____never____) {
  margin-top: 12px !important;
}
html body .home-faq-item > .flex:not(#____never____)::before {
  content: none !important;
  display: none !important;
}
html body .home-faq-item > .flex:not(#____never____) {
  grid-template-columns: minmax(0, 1fr) 34px !important;
}
html body .home-faq-item > .flex > h4:not(#____never____) {
  grid-column: 1 !important;
}
html body .home-faq-item > .flex > .material-symbols-outlined:not(#____never____) {
  grid-column: 2 !important;
}
html body .term-faq .term-container:not(#____never____),
html body .pa-faq .pa-container:not(#____never____) {
  display: block !important;
}
html body .term-faq .term-container > .term-faq__grid:not(#____never____),
html body .pa-faq .pa-container > .pa-faq-list:not(#____never____) {
  display: grid !important;
  grid-template-columns: 1fr !important;
  margin: 0 auto !important;
  max-width: 860px !important;
  width: 100% !important;
}
html body :is(.term-faq, .pa-faq, .home-faq-section):not(#____never____)::before,
html body :is(.term-faq, .pa-faq, .home-faq-section):not(#____never____)::after {
  content: none !important;
  display: none !important;
}

/* ============================================================
   Hero-Visual "Problem -> Loesung -> Was wir bringen"
   Namespace saa-hero-flow. Eigenstaendig, ohne !important.
   Ersetzt das alte .usecase-map--hub Mindmap-Visual.
   ============================================================ */
.saa-hero-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px 18px;
  align-items: stretch;
  padding: 26px 24px;
  border: 1px solid #dfe5ec;
  border-radius: 16px;
  overflow: hidden;
  background:
    linear-gradient(135deg, #ffffff, #f6f9fc),
    radial-gradient(circle at 50% 42%, rgba(217, 30, 24, 0.06), transparent 52%);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.07);
}
.saa-hero-flow__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 2px 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--saa-text-muted, #5d6673);
}
.saa-hero-flow__head--solution { justify-content: center; }
.saa-hero-flow__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--saa-text-muted, #5d6673);
  flex: 0 0 auto;
}
.saa-hero-flow__head--solution .saa-hero-flow__dot { background: var(--saa-ink, #07111c); }
.saa-hero-flow__head--gain .saa-hero-flow__dot { background: var(--saa-red, #d91e18); }

.saa-hero-flow__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.saa-hero-flow__item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 12px 13px;
  border: 1px solid var(--saa-border, #e2e8f0);
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  color: #1e293b !important;
}
.saa-hero-flow__item .material-symbols-outlined { font-size: 20px; flex: 0 0 auto; }

/* Problem = gedaempft */
.saa-hero-flow__col--problem .saa-hero-flow__item { background: var(--saa-surface-soft, #f1f5f9); }
.saa-hero-flow__col--problem .material-symbols-outlined { color: var(--saa-text-muted, #5d6673); }

/* Nutzen = weiss, roter Check */
.saa-hero-flow__col--gain .saa-hero-flow__item {
  background: #ffffff;
  border-color: rgba(217, 30, 24, 0.28);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}
.saa-hero-flow__col--gain .material-symbols-outlined { color: var(--saa-red, #d91e18); }

/* Zentrum: KI-Kern + Pfeile */
.saa-hero-flow__core {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 6px;
}
.saa-hero-flow__arrow { color: var(--saa-red, #d91e18); font-size: 26px; opacity: 0.5; }
.saa-hero-flow__hub {
  width: 112px;
  height: 112px;
  border-radius: 24px;
  background: var(--saa-ink, #07111c);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  box-shadow: 0 0 0 8px rgba(217, 30, 24, 0.08), 0 20px 44px rgba(7, 17, 28, 0.24);
}
.saa-hero-flow__hub strong { font-size: 32px; font-weight: 500; line-height: 1; }
.saa-hero-flow__hub span {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);
}
.saa-hero-flow__note {
  margin: 0;
  max-width: 130px;
  font-size: 11px;
  line-height: 1.35;
  text-align: center;
  color: var(--saa-text-muted, #5d6673);
}

@media (max-width: 640px) {
  .saa-hero-flow { grid-template-columns: 1fr; gap: 14px; }
  .saa-hero-flow__head--solution { justify-content: flex-start; }
  .saa-hero-flow__core { flex-direction: row; justify-content: center; gap: 18px; }
  .saa-hero-flow__arrow { transform: rotate(90deg); }
  .saa-hero-flow__note { display: none; }
}

/* ============================================================
   saa-hero-flow v2 (User-Review): Hero fuellt den Viewport
   (Katalog erst nach dem Scrollen), klarere Spalten-Definition
   (Pill-Header Problem / KI-Agent / Ergebnis) und KI-lastigere
   Optik (Puls am Kern, fliessende Pfeile, dezentes Datenraster).
   Ohne !important, gewinnt per Quellreihenfolge ueber den
   v1-Block direkt darueber. Keine neue Kachel-Grafik.
   ============================================================ */
.usecase-overview-page .usecase-overview__hero {
  /* Die Altregel ~12057 setzt min-height: var(--saa-hero-min) !important —
     wir ueberschreiben die Custom Property am Element statt der Deklaration. */
  --saa-hero-min: calc(100vh - var(--saa-header-h, 108px));
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.usecase-overview-page .usecase-overview__hero > .usecase-overview__inner {
  width: 100%;
}

/* Datenraster als zusaetzliche Hintergrund-Lage (kein Bild, kein Tile) */
.saa-hero-flow {
  background:
    radial-gradient(rgba(7, 17, 28, 0.05) 1px, transparent 1.4px),
    linear-gradient(135deg, #ffffff, #f6f9fc),
    radial-gradient(circle at 50% 42%, rgba(217, 30, 24, 0.06), transparent 52%);
  background-size: 18px 18px, auto, auto;
}

/* Klar definierte Spalten-Header als Pills */
.saa-hero-flow__head {
  width: max-content;
  padding: 6px 12px;
  border-radius: 999px;
  background: #eef2f7;
  color: #1e293b !important;
}
.saa-hero-flow__head--problem { justify-self: start; }
.saa-hero-flow__head--solution {
  justify-self: center;
  background: var(--saa-ink, #07111c);
  color: #ffffff;
}
.saa-hero-flow__head--solution .saa-hero-flow__dot { background: var(--saa-red, #d91e18); }
.saa-hero-flow__head--gain {
  justify-self: start;
  background: rgba(217, 30, 24, 0.08);
  color: var(--saa-red, #d91e18);
}

/* Icon-Chips in der Problem-Spalte: strukturierter, technischer */
.saa-hero-flow__col--problem .saa-hero-flow__item .material-symbols-outlined {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid var(--saa-border, #e2e8f0);
  font-size: 18px;
}

/* KI-Kern: ruhiger Puls-Ring */
@keyframes saaHeroFlowPulse {
  0%, 100% { box-shadow: 0 0 0 8px rgba(217, 30, 24, 0.08), 0 20px 44px rgba(7, 17, 28, 0.24); }
  50% { box-shadow: 0 0 0 15px rgba(217, 30, 24, 0.13), 0 20px 44px rgba(7, 17, 28, 0.24); }
}
.saa-hero-flow__hub {
  animation: saaHeroFlowPulse 3.2s ease-in-out infinite;
}

/* Pfeile: fliessende Bewegung Richtung Ergebnis */
@keyframes saaHeroFlowNudge {
  0%, 100% { transform: translateX(-3px); opacity: 0.35; }
  50% { transform: translateX(3px); opacity: 0.9; }
}
.saa-hero-flow__arrow {
  animation: saaHeroFlowNudge 2.4s ease-in-out infinite;
}

@media (max-width: 640px) {
  .usecase-overview-page .usecase-overview__hero { --saa-hero-min: 0px; }
  .saa-hero-flow__head--solution { justify-self: start; }
  .saa-hero-flow__arrow {
    animation: none;
    transform: rotate(90deg);
    opacity: 0.5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .saa-hero-flow__hub,
  .saa-hero-flow__arrow {
    animation: none;
  }
  .saa-hero-flow__arrow { opacity: 0.5; }
}

/* =====================================================================
   RUNDE 8 — HOMEPAGE-KONTAKTFORMULAR + KONTAKT-ANKER (User-Review)
   (a) index.html "Ihre Anfrage richtig einordnen": Die Legacy-Regel
       main :where(input,...) (~Z. 1850) erzwang padding 10px 0 (Platz-
       halter klebten an der Border), border-radius 0 ("zu eckig") und
       width:100% / min-height:48px — Letzteres blies die Datenschutz-
       Checkbox zur vollbreiten Leerbox auf, deren Labeltext darunter
       kollidierte (main :where(label) machte das Flex-Label zusaetzlich
       inline-block). Optik jetzt analog kontakt.html (R6.21 als
       Vorlage): weiche Panel-Karte, 9px-Feldradius, Fokusring,
       18px-Checkbox, runder Submit. Scope .home-cta-section /
       .v2-contact-form__field existiert nur auf der Startseite —
       kontakt.html (.contact-field/.contact-consent) bleibt unberuehrt.
   (b) Alle Seiten verlinken kontakt.html#kontaktformular; ohne
       scroll-margin landete das Anker-Ziel HINTER dem fixen Header,
       die Formular-Kopfzeile war abgeschnitten ("Die muss obenstehen").
   ===================================================================== */

/* (b) Anker-Ziel unter den fixen Header setzen (gilt auch fuer den
   In-Page-Anker #kontaktformular der Startseite). */
#kontaktformular {
  scroll-margin-top: calc(var(--saa-header-h, 108px) + 12px);
}

/* (a1) Formular-Karte wie die kontakt-Panels (R6.21). */
html body.home-page .home-cta-section .saa-card-surface:not(#____never____) {
  background: #fbfcfd !important;
  border: 1px solid rgba(7, 17, 28, .08) !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 2px rgba(7, 17, 28, .04), 0 14px 36px rgba(7, 17, 28, .06) !important;
}

/* (a2) Feld-Labels wie kontakt (klein, uppercase, ruhig) —
   Checkbox-Label ausgenommen. */
html body.home-page .v2-contact-form__field > label:not([for="hp-datenschutz"]):not(#____never____) {
  color: #45505c !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  margin-bottom: 6px !important;
  text-transform: uppercase !important;
}

/* (a3) Text-Felder: Innenabstand (Platzhalter weg vom Rand), Radius,
   Hover/Fokusring nach kontakt-Vorlage. */
html body.home-page .v2-contact-form__field input:not([type="checkbox"]):not(#____never____),
html body.home-page .v2-contact-form__field textarea:not(#____never____) {
  background: #ffffff !important;
  border: 1px solid rgba(7, 17, 28, .14) !important;
  border-radius: 9px !important;
  min-height: 46px !important;
  padding: 11px 14px !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
html body.home-page .v2-contact-form__field input:not([type="checkbox"]):not(#____never____):hover,
html body.home-page .v2-contact-form__field textarea:not(#____never____):hover {
  border-color: rgba(7, 17, 28, .3) !important;
}
html body.home-page .v2-contact-form__field input:not([type="checkbox"]):not(#____never____):focus,
html body.home-page .v2-contact-form__field textarea:not(#____never____):focus {
  border-color: var(--saa-red, #d91e18) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--saa-red, #d91e18) 14%, transparent) !important;
}
html body.home-page .v2-contact-form__field textarea:not(#____never____) {
  min-height: 96px !important;
  resize: vertical !important;
}

/* (a4) Checkbox: nativ, 18px, roter Akzent (Rettung analog
   .contact-consent input[type="checkbox"], ~Z. 15624). */
/* 24px, gleiche Begruendung wie bei .contact-consent (WCAG 2.2 SC 2.5.8). */
html body.home-page .v2-contact-form__field input[type="checkbox"]:not(#____never____) {
  accent-color: var(--saa-red, #d91e18);
  appearance: auto !important;
  border: 0 !important;
  box-shadow: none !important;
  flex: 0 0 auto !important;
  height: 24px !important;
  margin-top: 0 !important;
  min-height: 24px !important;
  padding: 0 !important;
  width: 24px !important;
}

/* (a5) Checkbox-Zeile wieder als Flex-Zeile, Text unfett + gedaempft. */
html body.home-page .v2-contact-form__field > label[for="hp-datenschutz"]:not(#____never____) {
  align-items: flex-start !important;
  color: #5d6673 !important;
  display: flex !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  gap: 10px !important;
  letter-spacing: 0 !important;
  line-height: 1.5 !important;
  margin-bottom: 0 !important;
  text-transform: none !important;
}
html body.home-page .v2-contact-form__field label[for="hp-datenschutz"] span:not(#____never____) {
  color: #5d6673 !important;
  -webkit-text-fill-color: #5d6673 !important;
  font-weight: 400 !important;
}
html body.home-page .v2-contact-form__field label[for="hp-datenschutz"] a:not(#____never____) {
  color: #16202b !important;
  -webkit-text-fill-color: #16202b !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* (a6) Submit abgerundet wie der kontakt-Submit (R6.21). */
html body.home-page .v2-contact-form__submit:not(#____never____) {
  border-radius: 999px !important;
}

/* ============================================================
   Hero-Story Premium (saa-hero-story) — Problem -> Loesung ->
   Was wir machen als ausgeschmueckte Karten mit farbiger Kante,
   Glow-Ecke, Ghost-Icon und Badge. Mittlere Loesungs-Karte als
   dunkles Herzstueck. Layout ohne !important; Textfarben mit
   Page+Hero-Scope + !important gegen die Legacy-Hero-Overrides.
   ============================================================ */
.saa-hero-story {
  position: relative;
  overflow: hidden;
  border: 1px solid #dfe5ec;
  border-radius: 20px;
  background: linear-gradient(135deg, #ffffff, #f4f8fc);
  box-shadow: 0 30px 70px rgba(15, 23, 42, 0.1);
  padding: 16px;
}
.saa-hero-story__lead {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 14px;
}
.saa-hero-story__kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.saa-hero-story__rule { flex: 1; height: 1px; background: var(--saa-border, #e2e8f0); }
.saa-hero-story__stack { display: flex; flex-direction: column; gap: 14px; }

.saa-hero-story__row {
  --acc: #7c8aa0;
  position: relative;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--saa-border, #e2e8f0);
  border-radius: 16px;
  padding: 20px 22px 20px 24px;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.saa-hero-story__row--solution { --acc: #07111c; }
.saa-hero-story__row--do { --acc: #d91e18; }
.saa-hero-story__row::before {
  content: "";
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 5px;
  border-radius: 0 5px 5px 0;
  background: var(--acc);
}
.saa-hero-story__row::after {
  content: "";
  position: absolute;
  right: -46px; top: -46px;
  width: 170px; height: 170px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--acc) 15%, transparent), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.saa-hero-story__row:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(15, 23, 42, 0.12); }
.saa-hero-story__ghost {
  position: absolute;
  right: 8px; bottom: -22px;
  font-family: "Material Symbols Outlined";
  font-size: 112px;
  line-height: 1;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}
.saa-hero-story__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}
.saa-hero-story__badge {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  background: var(--acc);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--acc) 12%, transparent), 0 6px 14px color-mix(in srgb, var(--acc) 30%, transparent);
}
.saa-hero-story__badge .material-symbols-outlined { font-size: 23px; line-height: 1; display: block; }
.saa-hero-story__tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.saa-hero-story__title {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 400;
  font-size: 21px;
  line-height: 1.14;
  margin: 2px 0 6px;
  position: relative;
  z-index: 1;
}
.saa-hero-story__text {
  font-size: 14.5px;
  line-height: 1.5;
  margin: 0;
  position: relative;
  z-index: 1;
}
.saa-hero-story__chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  position: relative;
  z-index: 1;
}
.saa-hero-story__chips li {
  font-size: 13px;
  font-weight: 600;
  background: var(--saa-surface-soft, #f1f5f9);
  border: 1px solid var(--saa-border, #e2e8f0);
  border-radius: 9px;
  padding: 6px 12px;
}

/* Loesungs-Karte als heller Anker mit rotem Akzent (robust lesbar, kein
   Dunkel-auf-Dunkel-Risiko in dieser Umgebung) */
.saa-hero-story__row--solution {
  background: linear-gradient(120deg, color-mix(in srgb, #d91e18 6%, #ffffff), #ffffff 62%);
  border-color: #f3d3d1;
}
.saa-hero-story__row--solution::before { background: #d91e18; }
.saa-hero-story__row--solution::after { background: radial-gradient(circle, rgba(217, 30, 24, 0.16), transparent 70%); }
.saa-hero-story__row--solution .saa-hero-story__badge {
  background: #d91e18;
  box-shadow: 0 0 0 5px rgba(217, 30, 24, 0.14), 0 8px 18px rgba(217, 30, 24, 0.32);
}

/* Textfarben per ID (#saa-hero-story) + !important: ein ID-Selektor schlaegt
   jede klassenbasierte Legacy-!important-Regel im Hero zuverlaessig. */
#saa-hero-story .saa-hero-story__kicker { color: #5d6673 !important; }
#saa-hero-story .saa-hero-story__title { font-family: 'Inter', system-ui, sans-serif !important; }
#saa-hero-story .saa-hero-story__row--problem .saa-hero-story__tag { color: #5d6673 !important; }
#saa-hero-story .saa-hero-story__row--solution .saa-hero-story__tag { color: #d91e18 !important; }
#saa-hero-story .saa-hero-story__row--do .saa-hero-story__tag { color: #d91e18 !important; }
#saa-hero-story .saa-hero-story__row--problem .saa-hero-story__title,
#saa-hero-story .saa-hero-story__row--do .saa-hero-story__title { color: #1e293b !important; }
#saa-hero-story .saa-hero-story__row--solution .saa-hero-story__title { color: #1e293b !important; }
#saa-hero-story .saa-hero-story__row--problem .saa-hero-story__text,
#saa-hero-story .saa-hero-story__row--do .saa-hero-story__text { color: #5d6673 !important; }
#saa-hero-story .saa-hero-story__row--solution .saa-hero-story__text { color: #5d6673 !important; }
#saa-hero-story .saa-hero-story__row--problem .saa-hero-story__chips li { color: #1e293b !important; }
#saa-hero-story .saa-hero-story__badge .material-symbols-outlined { color: #ffffff !important; }
#saa-hero-story .saa-hero-story__ghost { font-size: 112px !important; }
#saa-hero-story .saa-hero-story__row--problem .saa-hero-story__ghost { color: #7c8aa0 !important; }
#saa-hero-story .saa-hero-story__row--solution .saa-hero-story__ghost { color: #ffffff !important; }
#saa-hero-story .saa-hero-story__row--do .saa-hero-story__ghost { color: #d91e18 !important; }

/* --- Interaktivitaet & kompakter Hero (User-Review R2) --- */
/* Hero kompakter: keine erzwungene Bildschirmhoehe mehr */
.usecase-overview-page .usecase-overview__hero { --saa-hero-min: auto; }

/* Karten als Links */
.saa-hero-story__row { display: block; text-decoration: none; color: inherit; cursor: pointer; }
.saa-hero-story__go {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 2;
  font-size: 20px;
  line-height: 1;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
#saa-hero-story .saa-hero-story__row--problem .saa-hero-story__go,
#saa-hero-story .saa-hero-story__row--do .saa-hero-story__go { color: #d91e18 !important; }
#saa-hero-story .saa-hero-story__row--solution .saa-hero-story__go { color: #d91e18 !important; }

/* ============================================================
   Touch-Targets (Responsive-Review): sichere Mindestgroessen >=48px.
   Nur mobil (<=980px) gescoped, damit Desktop unveraendert bleibt.
   ============================================================ */
@media (max-width: 1024px) {
  /* Toggle NICHT vergroessern: .site-header hat feste Hoehe + overflow:hidden,
     ein hoeherer Button wuerde beschnitten. Tap-Flaeche via unsichtbares
     ::before erweitert (kein Einfluss auf die Box/Layout). */
  .saa-mobile-nav-toggle {
    position: relative;
  }
  .saa-mobile-nav-toggle::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
  }
  nav [data-mobile-nav-panel] a,
  .site-header nav [data-mobile-nav-panel] a {
    min-height: 48px !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    display: flex !important;
    align-items: center !important;
    line-height: 1.25 !important;
  }
  .contact-form.v2-contact-form .contact-field input:not([type="checkbox"]),
  .contact-form.v2-contact-form .contact-field select,
  .v2-contact-form__field input:not([type="checkbox"]),
  .v2-contact-form__field select {
    min-height: 48px !important;
    height: auto !important;
  }
  /* Mobile-Header entlasten: der grosse CTA sprengte die Header-Zeile
     (Inhalt 469px in 375px) und schob den Hamburger aus dem Viewport.
     CTA auf Mobile ausblenden (bleibt im Hamburger-Menue + auf der Seite). */
  html body nav.site-header .site-header__inner .site-header__utility .site-header__actions a.site-header__cta,
  html body nav.site-header .site-header__actions a.site-header__cta,
  html body .site-header__cta {
    display: none !important;
  }
}

/* Staerkerer Hover */
.saa-hero-story__row:hover { transform: translateY(-4px); box-shadow: 0 22px 46px rgba(15, 23, 42, 0.16); }
.saa-hero-story__row:hover::before { top: 8px; bottom: 8px; width: 7px; }
.saa-hero-story__row:hover::after { transform: scale(1.15); }
.saa-hero-story__row:hover .saa-hero-story__go { opacity: 1; transform: translateX(0); }
.saa-hero-story__row:focus-visible { outline: 2px solid #d91e18; outline-offset: 3px; }

/* Sanftes gestaffeltes Einblenden (nur bei erlaubter Motion; backwards-Fill,
   damit der Hover-Transform danach greift) */
@media (prefers-reduced-motion: no-preference) {
  #saa-hero-story .saa-hero-story__lead { animation: saaStoryIn 0.5s ease backwards; }
  #saa-hero-story .saa-hero-story__row { animation: saaStoryIn 0.6s ease backwards; }
  #saa-hero-story .saa-hero-story__row--problem { animation-delay: 0.08s; }
  #saa-hero-story .saa-hero-story__row--solution { animation-delay: 0.2s; }
  #saa-hero-story .saa-hero-story__row--do { animation-delay: 0.32s; }
}
@keyframes saaStoryIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* =====================================================================
   v2 — Eigene Software-Produkte (ki-loesungen, Section #saa-produkte).
   Eigenes Grid statt .usecase-segment, damit die positionsbasierten
   Katalog-Regeln (:last-of-type / :nth-last-of-type) der bestehenden
   Segmente unberührt bleiben. Bildbereit: <figure>.saa-produkte-media
   ist Platzhalter und wird später durch ein <img> ersetzt.
   ===================================================================== */
#saa-produkte .saa-produkte-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 24px;
}
/* Standard-Karten: 3 pro Reihe (je 2 von 6 Spalten) */
#saa-produkte .saa-produkte-card { grid-column: span 2; }
/* Featured-Karten (Offertwerk, LiqPlaner): gross, 2 pro Reihe (je 3 von 6) */
#saa-produkte .saa-produkte-card--featured { grid-column: span 3; }
/* Reihenfolge: Offertwerk + LiqPlaner zuerst (gross), dann Wissens-Assistent */
#saa-produkte .saa-produkte-card:nth-child(1) { order: 1; } /* Offertwerk */
#saa-produkte .saa-produkte-card:nth-child(2) { order: 2; } /* LiqPlaner */
#saa-produkte .saa-produkte-card:nth-child(3) { order: 3; } /* Wissens-Assistent */
#saa-produkte .saa-produkte-media {
  align-items: center;
  background: linear-gradient(135deg, #07111c 0%, #0c2233 100%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
}
/* Media mit echtem Produkt-Screenshot: Bild randlos einpassen */
#saa-produkte .saa-produkte-media--shot { display: block; padding: 0; }
#saa-produkte .saa-produkte-media--shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
/* Grosseres Bild fuer Featured-Karten */
#saa-produkte .saa-produkte-card--featured .usecase-card__media { height: 300px; }
#saa-produkte .saa-produkte-media .material-symbols-outlined { font-size: 40px; line-height: 1; }
#saa-produkte .saa-produkte-card--featured .saa-produkte-media .material-symbols-outlined { font-size: 56px; }
#saa-produkte .saa-produkte-media__tag {
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
@media (max-width: 1024px) {
  #saa-produkte .saa-produkte-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #saa-produkte .saa-produkte-card,
  #saa-produkte .saa-produkte-card--featured { grid-column: auto; }
  #saa-produkte .saa-produkte-card--featured .usecase-card__media { height: 220px; }
}
@media (max-width: 600px) {
  #saa-produkte .saa-produkte-grid { grid-template-columns: 1fr; }
  #saa-produkte .saa-produkte-card--featured .usecase-card__media { height: 200px; }
}

/* === Einheitliches FAQ-Layout site-weit (User: "das bei allen FAQ machen"
   wie ki-dienste). Alle titel-tragenden FAQ (Home, KI-Beratung, KI-Dienste,
   Potenzialanalyse, Termin Agent): Shell einspaltig/volle Breite, Fragen
   zentriert (860px), Kopf als schlichter zentrierter Block (keine Sticky-
   Karte) mit feiner Typo (H2 500 statt 900, Kicker mittig). Ersetzt die
   Sticky-Karten-/2-Spalten-Regeln (~L22597/L22614/L22632) und erweitert
   R6.20 (~L25735) auf alle FAQ. Wissen (#fragen) bleibt bewusst aussen vor
   (titellose Q&A im Editorial-Layout). Hohe Spezifitaet via
   :not(#____never____). --- */
html body :is(
  .home-faq-shell,
  .beratung-faq-section .beratung-shell,
  .dienste-faq-section .dienste-shell,
  .pa-faq .pa-container,
  .term-faq .term-container
):not(#____never____) {
  display: block !important;
}
html body :is(
  .home-faq-list,
  .beratung-faq-grid,
  .dienste-faq-grid,
  .pa-faq-list,
  .term-faq__grid
):not(#____never____) {
  grid-column: auto !important;
  margin: 0 auto !important;
  max-width: 860px !important;
  width: 100% !important;
}
html body :is(
  .home-faq-head,
  .beratung-faq-section .beratung-section-head,
  .dienste-faq-section .dienste-faq-head,
  .pa-faq .pa-section-head,
  .term-faq .term-section-head
):not(#____never____) {
  position: static !important;
  top: auto !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  max-width: 860px !important;
  margin: 0 auto clamp(34px, 4vw, 54px) !important;
  padding: 0 !important;
  text-align: center !important;
}
html body :is(
  .home-faq-head,
  .beratung-faq-section .beratung-section-head,
  .dienste-faq-section .dienste-faq-head,
  .pa-faq .pa-section-head,
  .term-faq .term-section-head
) > span:not(#____never____) {
  display: block !important;
  margin: 0 0 14px !important;
  text-align: center !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
}
html body :is(
  .home-faq-head,
  .beratung-faq-section .beratung-section-head,
  .dienste-faq-section .dienste-faq-head,
  .pa-faq .pa-section-head,
  .term-faq .term-section-head
) h2:not(#____never____) {
  max-width: none !important;
  margin: 0 auto !important;
  text-align: center !important;
  font-weight: 500 !important;
  font-size: clamp(34px, 4.4vw, 52px) !important;
  line-height: 1.06 !important;
  letter-spacing: -.01em !important;
  text-wrap: balance !important;
}

/* =====================================================================
   RUNDE 9 — DESIGN-RUNDE 2 (P1/P2/P3/P6), autoritativer Block am
   Dateiende. Gewinnt per Quellreihenfolge gegen fruehere !important-
   Regeln gleicher Spezifitaet.
   ===================================================================== */

/* ---------- P2b: Radius-Tokens ---------- */
:root {
  /* Blueprint 2026-08-30 (Paket 5): Card-Radius auf den dokumentierten
     Labs-Wert (14px) gehoben; vorher 12px (davor 10px, Z. 24207). */
  --saa-radius-card: 16px;
  --saa-radius-control: 999px;
  --saa-radius-sm: 8px;
  /* Legacy-Token des Card-Modernisierungs-Blocks (~Z.23731) anheben */
  --saa-card-radius: 16px;
}

/* Cards: weicher Radius + Schatten statt nacktem Rahmen */
html body :is(
  .usecase-card, .saa-signal-card, .saa-card-surface, .home-offer-card,
  .home-agent-card, .home-faq-item, .bento-cell, .beratung-service-card,
  .channel-card, .saa-produkte-card, .process-card,
  .beratung-problem-grid article, .beratung-expect-cards article,
  .beratung-why-list article, .beratung-flow-line article,
  .home-trust-proof, .beratung-final-panel, .saa-why__item,
  .term-feature, .term-loss-card, .term-showcase-card,
  .term-industry-grid article, .term-kpi-grid article,
  .academy-role-card
):not(#____never____) {
  border-radius: var(--saa-radius-card) !important;
  box-shadow: 0 1px 3px rgba(7,17,28,.06), 0 1px 2px rgba(7,17,28,.04);
}
html body :is(
  .usecase-card, .saa-signal-card, .home-offer-card, .home-agent-card,
  .bento-cell, .beratung-service-card, .saa-produkte-card, .process-card,
  .academy-role-card
):not(#____never____):hover {
  box-shadow: 0 8px 20px rgba(7,17,28,.1), 0 2px 6px rgba(7,17,28,.06);
  transform: translateY(-2px);
}

/* FAQ-Items (details) */
html body :is(.beratung-faq-grid, .dienste-faq-grid, .term-faq__grid, .pa-faq-list, .wissen-qa) details:not(#____never____) {
  border-radius: var(--saa-radius-card) !important;
  overflow: hidden !important;
}

/* Buttons & Controls */
html body :is(
  .site-header__cta, .hero-scene__primary, .hero-scene__secondary,
  .v2-contact-form__submit, .usecase-card__link, .term-btn,
  .usecase-overview__cta-link, .home-system-link, .v2-about-section__link
):not(#____never____) {
  border-radius: var(--saa-radius-control) !important;
}

/* Chips/Tags */
html body [class*="saa-tag"]:not(#____never____) {
  border-radius: var(--saa-radius-control) !important;
}

/* Inputs */
html body :is(.v2-contact-form, form) :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select):not(#____never____) {
  border-radius: var(--saa-radius-sm) !important;
}

/* Bild-/Media-Flaechen */
html body :is(
  .usecase-card__media, .hero-scene__media, figure.visual-media,
  .saa-produkte-media, .home-trust-proof__media, .homepage-video,
  .term-showcase-card img, .term-feature--visual img,
  .term-industry-grid article img
):not(#____never____):not(#____never____) {
  border-radius: var(--saa-radius-card) !important;
  overflow: hidden !important;
}
html body :is(.usecase-card__media, .hero-scene__media, figure.visual-media, .saa-produkte-media, .home-trust-proof__media) img:not(#____never____) {
  border-radius: 0 !important; /* Parent clippt via overflow */
  object-fit: cover;
}
/* Karten mit angeschnittenem Media-Bereich sauber clippen */
html body :is(.usecase-card, .saa-produkte-card, .home-trust-proof, .beratung-service-card):not(#____never____) {
  overflow: hidden !important;
}

/* ---------- P1: Prozess-Sektion Startseite — Raster 2+3, kein Loch ---------- */
body.home-page .home-process-step:first-child {
  grid-column: span 2 !important;
  text-align: left !important;
  padding: clamp(26px, 2.4vw, 36px) !important;
}
body.home-page .home-process-step:first-child h3 {
  font-size: clamp(16px, 1.1vw, 19px) !important;
  max-width: 26ch !important;
}
body.home-page .home-process-step:first-child p {
  font-size: clamp(16px, 1.1vw, 18px) !important;
  max-width: 52ch !important;
}
body.home-page .home-process-step:first-child::before {
  right: 40% !important;
}
body.home-page .home-process-step {
  border-radius: var(--saa-radius-card) !important;
}
@media (max-width: 1024px) {
  body.home-page .home-process-grid {
    grid-template-columns: 1fr !important;
  }
  body.home-page .home-process-step:first-child {
    grid-column: auto !important;
  }
}

/* ---------- P3: Workflow-Intro KI-Beratung zentrieren (scoped) ---------- */
html body .beratung-workflow-section .beratung-section-head:not(#____never____) {
  text-align: center !important;
  max-width: 780px !important;
  margin-inline: auto !important;
}
html body .beratung-workflow-section .beratung-section-head :is(h2, p):not(#____never____) {
  text-align: center !important;
  margin-inline: auto !important;
}
html body .beratung-workflow-section .beratung-section-head .saa-signal-label:not(#____never____) {
  margin-inline: auto !important;
  display: inline-flex !important;
}

/* ---------- P6: Hero-CTAs im ersten Viewport (1280x720 / 375x812) ---------- */
html body :is(.hero-scene, .beratung-hero, .dienste-hero, .term-hero):not(#____never____) {
  min-height: min(920px, calc(100svh - var(--saa-header-h, 96px))) !important;
}
@media (max-height: 780px) and (min-width: 1025px) {
  html body .hero-scene:not(#____never____) {
    padding-block: 40px !important;
  }
  html body .hero-scene__media:not(#____never____) {
    max-height: calc(100svh - var(--saa-header-h, 96px) - 40px);
  }
}
@media (max-width: 1024px) {
  html body :is(.hero-scene, .beratung-hero, .dienste-hero):not(#____never____) {
    min-height: 0 !important;
    padding-top: 28px !important;
  }
  html body .hero-scene__media:not(#____never____) {
    max-height: 34svh;
  }
  html body .hero-scene__media img:not(#____never____) {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  html body .hero-scene__actions:not(#____never____) {
    margin-top: 18px !important;
  }
}

/* =====================================================================
   RUNDE 10 — Feedback-Runde (Screenshots 1–3):
   (1) Workflow-Karten KI-Beratung: alles zentriert, Icon neben dem
       Titel (Markup: <i> jetzt IM <h3>), Meta-Badge (<em>) als sauberer
       zentrierter Pill.
   (2) Kategorie-Tags ("Finanzen" etc.) site-weit konsistent: Pill-Form
       (999px), gleiche Typo/Padding/Farben — Referenz: FINANZEN-Chip.
   (3) Produktkarte im Katalog zeigt das Marken-Logo (contain statt
       cover) via .saa-produkte-media--brand.
   ===================================================================== */

/* (1) Flow-Karten zentriert */
html body .beratung-flow-line article:not(#____never____):not(#____never____) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 28px 22px 26px !important;
  border-top: 2px solid var(--saa-red, #d91e18) !important;
}
html body .beratung-flow-line article h3:not(#____never____) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 0 0 12px !important;
  font: 500 17px/1.25 Inter, sans-serif !important;
}
html body .beratung-flow-line article h3 i:not(#____never____) {
  font-style: normal !important;
  font-size: 22px !important;
  color: var(--saa-red, #d91e18) !important;
  -webkit-text-fill-color: var(--saa-red, #d91e18) !important;
  line-height: 1 !important;
}
html body .beratung-flow-line article p:not(#____never____) {
  margin: 0 !important;
  max-width: 30ch !important;
}
html body.ki-beratung-page main .beratung-flow-line article > em:not(#____never____),
html body .beratung-flow-line article > em:not(#____never____) {
  margin: 16px auto 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font: 600 12px/1 Inter, sans-serif !important;
  font-style: normal !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  padding: 7px 14px !important;
  background: #eef2f6 !important;
  border: 1px solid #dbe3ec !important;
  border-radius: 999px !important;
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
}

/* (2) Kategorie-Tags konsistent als Pill (Referenz: FINANZEN-Chip) */
html body .saa-tag--label:not(#____never____):not(#____never____) {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}
html body :is(.saa-tag--chip, .saa-tag--chip-outline, .saa-tag--filter):not(#____never____):not(#____never____) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  padding: 7px 14px !important;
  width: max-content !important;
}
html body .saa-tag--chip:not(#____never____):not(#____never____) {
  background: #eef2f6 !important;
  border: 1px solid #dbe3ec !important;
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
  margin-top: 14px !important;
}
html body .saa-tag--chip-outline:not(#____never____):not(#____never____) {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: rgba(239, 241, 243, 0.82) !important;
  -webkit-text-fill-color: rgba(239, 241, 243, 0.82) !important;
}

/* (3) Produkt-Logo-Kachel: Logo wird gezeigt, nicht beschnitten */
html body .saa-produkte-media--brand:not(#____never____):not(#____never____) {
  background: #f4f7fa !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  border-radius: var(--saa-radius-card, 12px) !important;
  overflow: hidden !important;
}
html body .saa-produkte-media--brand img:not(#____never____) {
  width: auto !important;
  height: 100% !important;
  max-height: 220px !important;
  object-fit: contain !important;
  border-radius: 0 !important;
}

/* Final Agentur benefit layout: two broad columns, never a four-card strip. */
html body .home-benefits-section .swiss-grid:not(#____never____) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 22px !important;
}
html body .home-benefits-section .saa-signal-card:not(#____never____) {
  display: grid !important;
  min-height: 0 !important;
  grid-column: span 1 !important;
  grid-template-columns: 58px minmax(0, 1fr) !important;
  grid-template-rows: auto 1fr !important;
  gap: 10px 24px !important;
  align-content: start !important;
}
html body .home-benefits-section__heading:not(#____never____) {
  margin-inline: auto !important;
  text-align: center !important;
}
@media (max-width: 768px) {
  html body .home-benefits-section .swiss-grid:not(#____never____) { grid-template-columns: 1fr !important; }
  html body .home-benefits-section .saa-signal-card:not(#____never____) { grid-template-columns: 50px minmax(0, 1fr) !important; gap-inline: 18px !important; }
}

/* Header consistency: keep navigation links at a lighter semibold weight on every page.
   Canonical pages load Inter up to 700. Pages that also load Inter 800/900
   (e.g. KI-Lösungen) would otherwise render
   the header heavier — this keeps the navigation identical everywhere while the
   heavy weights stay available for page body/hero typography. */
html body .site-header .site-nav-primary a:not(#____never____),
html body .site-header .site-nav-primary a.is-active:not(#____never____) {
  font-weight: 600 !important;
}
html body .site-header .site-header__cta:not(#____never____),
html body .site-header .site-header__cta:not(#____never____) * {
  font-weight: 700 !important;
}


/* =====================================================================
   Phase 2 (2026-07-12): FAQ-Standard site-wide
   - saa-faq-help: einheitlicher "Noch Fragen?"-Abschluss (Screenshot-4-Standard)
   - pa-faq-list: Potenzialanalyse-FAQ als Accordion (details/summary)
   Selbst-tragend, nur auf hellen FAQ-Sektionen eingesetzt.
   ===================================================================== */
.saa-faq-help {
  margin-top: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}
.saa-faq-help__icon {
  font-size: 34px;
  color: var(--saa-red, #d91e18);
  margin-bottom: 8px;
}
.saa-faq-help__title {
  font-size: 1.14rem;
  font-weight: 700;
  color: #0f1b2d;
  margin: 0;
  line-height: 1.3;
}
.saa-faq-help__sub {
  font-size: .98rem;
  color: #5d6673;
  margin: 0 0 20px;
  line-height: 1.5;
}
.saa-faq-help__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--saa-red, #d91e18);
  color: #fff;
  font-weight: 600;
  font-size: .98rem;
  padding: 13px 26px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 8px 20px rgba(217, 30, 24, .26);
}
.saa-faq-help__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(217, 30, 24, .32);
  color: #fff;
}
.saa-faq-help__cta .material-symbols-outlined {
  font-size: 18px;
}

/* Potenzialanalyse-FAQ: statische Liste -> Accordion */
.pa-faq-list details {
  background: #fff;
  border: 1px solid #e6eaef;
  border-radius: 12px;
  margin-bottom: 12px;
  padding: 0 24px;
  box-shadow: 0 1px 3px rgba(7, 17, 28, .05);
}
.pa-faq-list summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  font-weight: 600;
  font-size: 1.02rem;
  color: #102033;
}
.pa-faq-list summary::-webkit-details-marker { display: none; }
.pa-faq-list summary::after {
  content: "+";
  font-size: 1.35rem;
  line-height: 1;
  color: var(--saa-red, #d91e18);
  flex-shrink: 0;
}
.pa-faq-list details[open] summary::after { content: "\2013"; }
.pa-faq-list details > p {
  margin: 0;
  padding: 0 0 20px;
  color: #5d6673;
  line-height: 1.6;
  max-width: 72ch;
}


/* =====================================================================
   Phase 2 (2026-07-12) Task 5: Hero-CD-Konsistenz
   Bespoke Heroes (pa-intake / pn-hero / pv-hero) an die Referenz der
   Agentur-Seite (.hero-scene) angleichen: dunkler Grund, weisse fette
   grosse Headline, linksbuendig. Die weissen Panels (Formular /
   Produkt-Visual) bleiben unberuehrt. Das :not(#____never____) hebt die
   Spezifitaet ueber die globalen !important-Regeln (html body h1 = 500).
   ===================================================================== */
html body.page-shell main > .pa-intake:not(#____never____),
html body.page-shell main > .pn-hero:not(#____never____),
html body.page-shell main > .pv-hero:not(#____never____) {
  background: #071927 !important;
}
html body .pa-intake h1:not(#____never____),
html body .pn-hero h1:not(#____never____),
html body .pv-hero h1:not(#____never____) {
  color: #ffffff !important;
  font-weight: 500 !important;
  font-size: clamp(2.4rem, 4.1vw, 3.5rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.01em !important;
}
/* Hero-Fliesstext hell (nur die Copy-Spalten, nicht die weissen Panels) */
html body .pa-intake__copy :where(p, small, li):not(#____never____),
html body .pn-hero .pn-container :where(p, li, span):not(#____never____),
html body .pv-hero .pv-container :where(p, li, span):not(#____never____) {
  color: #c4cdd6 !important;
  -webkit-text-fill-color: #c4cdd6 !important;
}
html body .pa-intake__copy .pa-intake__proof strong:not(#____never____),
html body .pn-hero .pn-hero__badges span:not(#____never____) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html body .pa-intake .pa-eyebrow:not(#____never____),
html body .pn-hero .pn-kicker:not(#____never____),
html body .pv-hero .pv-kicker:not(#____never____) {
  color: #ff5751 !important;
  -webkit-text-fill-color: #ff5751 !important;
}
html body .pn-backlink:not(#____never____),
html body .pv-backlink:not(#____never____) {
  color: #aab4c0 !important;
  -webkit-text-fill-color: #aab4c0 !important;
}


/* Phase 2 (2026-07-12): sichtbare Fokus-Ringe fuer neue interaktive Elemente
   (globale outline:none-Regeln wuerden Tastatur-Fokus sonst verschlucken). */
html body .saa-faq-help__cta:not(#____never____):focus-visible {
  outline: 3px solid #0f1b2d !important;
  outline-offset: 3px !important;
}
html body .pa-faq-list summary:not(#____never____):focus-visible {
  outline: 2px solid var(--saa-red, #d91e18) !important;
  outline-offset: 3px !important;
  border-radius: 8px;
}


/* Phase 2 (2026-07-12) Codex-Befund 1: FAQ-CTA-Text + Pfeil garantiert weiss
   (globale Material-Symbol-Rotregel + helle Sektions-Textregeln wuerden sonst
   rot-auf-rot / dunkel-auf-rot erzeugen). */
html body .saa-faq-help__cta:not(#____never____),
html body .saa-faq-help__cta:not(#____never____) * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
/* Codex-Risiko B: Primaer-Buttons in den nun dunklen Produkt-Heroes bleiben
   voll weiss (die breite Copy-Hell-Regel darf Button-Pfeile nicht ausgrauen). */
html body :where(.pn-hero, .pv-hero) :where(.pn-btn--primary, .pv-btn--primary, .pn-btn--ghost, .pv-btn--ghost):not(#____never____),
html body :where(.pn-hero, .pv-hero) :where(.pn-btn--primary, .pv-btn--primary, .pn-btn--ghost, .pv-btn--ghost):not(#____never____) * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}


/* Phase 2 (2026-07-12) Codex-Risiko A: lange Produkt-Headlines auf kleinen
   Screens nicht auf 2.4rem zwingen (sonst 6-zeiliger Umbruch). Gewicht/Farbe
   bleiben (aus der Basisregel); nur die Groesse wird mobil reduziert. */
@media (max-width: 640px) {
  html body .pa-intake h1:not(#____never____),
  html body .pn-hero h1:not(#____never____),
  html body .pv-hero h1:not(#____never____) {
    font-size: clamp(1.75rem, 7vw, 2.2rem) !important;
    line-height: 1.12 !important;
  }
}


/* Phase 2 (2026-07-12): Cookie-Banner immer horizontal zentriert (nie links/rechts angeheftet).
   Eine spaetere Regel hatte es per left:auto;right:24px;transform:none in die rechte
   Ecke gezogen — hier wieder mittig erzwungen (:not(#____never____) schlaegt die !important-Ecke). */
html body .saa-cookie-banner:not(#____never____) {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: min(720px, calc(100% - 32px)) !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
html body .saa-cookie-banner.is-hidden:not(#____never____) {
  transform: translateX(-50%) translateY(16px) !important;
}


/* Footer-Paritaet (2026-07-14): Der Footer bezog seine Metrik bisher unbemerkt aus
   Tailwind — das laedt aber nur auf 3 der 17 Seiten (index/datenschutz/academy).
   Dort leistet Tailwind zweierlei, worauf sich das Footer-CSS stillschweigend verliess:
     1. Preflight nullt die UA-Margins: h6{margin-block:2.33em}=30.29px, p{margin:1em 0}=15px.
     2. `text-body-md` am <body> setzt line-height:24px als LAENGE (nicht als Faktor),
        die sich in den Footer vererbt.
   Auf den 14 Seiten ohne Tailwind blieben die UA-Margins stehen und die line-height fiel
   auf den Faktor 1.6 aus dieser Datei zurueck -> Footer 395px statt 371px.
   Referenz ist laut HEADER-FOOTER.md der GERENDERTE Footer der Agentur-Seite (index.html).
   Diese Regeln schreiben genau dessen Metrik fest, ohne Tailwind vorauszusetzen; auf den
   3 Tailwind-Seiten sind sie wertgleich und damit wirkungslos. */
.saa-footer {
  line-height: 24px;
}

/* Spiegelt exakt Tailwinds Preflight-Reset, aber nur innerhalb des Footers.
   :where() hat Spezifitaet 0 -> `.saa-footer h6{margin-bottom:22px}` (0,1,1) und die
   Mobile-Regel in mobile-refine.css behalten die Oberhand. */
.saa-footer :where(blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre) {
  margin: 0;
}

/* Footer-Typografie bleibt innerhalb des Footers gekapselt. */
html body .saa-footer :where(p, a):not(#____never____) {
  line-height: 1.55;
}

/* Integrationskarten: Markenfarben und passende Symbole statt statischer Textfelder. */
html body main .term-agent .term-logo-grid {
  gap: 16px;
}

html body main .term-agent .term-logo-grid .term-logo-grid__item {
  --brand: #64748b;
  --brand-soft: #f1f5f9;
  align-items: center;
  background: linear-gradient(145deg, var(--brand-soft), #ffffff 78%) !important;
  border: 1px solid color-mix(in srgb, var(--brand) 22%, #ffffff) !important;
  border-radius: 12px;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--brand) 10%, transparent);
  color: #07111c !important;
  display: flex;
  flex-direction: column;
  font-weight: 500;
  gap: 10px;
  min-height: 104px;
  overflow: hidden;
  padding: 16px 12px;
  position: relative;
  text-align: center;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

html body main .term-agent .term-logo-grid .term-logo-grid__item::after {
  background: var(--brand);
  border-radius: 999px;
  content: "";
  height: 72px;
  opacity: .08;
  position: absolute;
  right: -28px;
  top: -30px;
  width: 72px;
}

html body main .term-agent .term-logo-grid .term-logo-grid__item:hover {
  border-color: color-mix(in srgb, var(--brand) 48%, #ffffff) !important;
  box-shadow: 0 16px 30px color-mix(in srgb, var(--brand) 17%, transparent);
  transform: translateY(-3px);
}

html body main .term-agent .term-logo-grid .term-logo-grid__mark {
  align-items: center;
  background: #ffffff !important;
  border: 1px solid color-mix(in srgb, var(--brand) 25%, #ffffff) !important;
  border-radius: 10px;
  color: var(--brand) !important;
  display: inline-flex;
  flex: 0 0 38px;
  font-size: 22px;
  justify-content: center;
  line-height: 1;
  position: relative;
  width: 38px;
  z-index: 1;
}

html body main .term-agent .term-logo-grid .term-logo-grid__label {
  background: transparent !important;
  color: #07111c !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  position: relative;
  z-index: 1;
}

html body main .term-agent .term-logo-grid__item--google { --brand: #4285f4; --brand-soft: #edf4ff; }
html body main .term-agent .term-logo-grid__item--microsoft { --brand: #0078d4; --brand-soft: #eaf6ff; }
html body main .term-agent .term-logo-grid__item--outlook { --brand: #0a64c7; --brand-soft: #edf5ff; }
html body main .term-agent .term-logo-grid__item--hubspot { --brand: #ff7a59; --brand-soft: #fff1ed; }
html body main .term-agent .term-logo-grid__item--pipedrive { --brand: #7457d9; --brand-soft: #f3f0ff; }
html body main .term-agent .term-logo-grid__item--zoom { --brand: #2d8cff; --brand-soft: #edf6ff; }
html body main .term-agent .term-logo-grid__item--website { --brand: #159957; --brand-soft: #ebfaf2; }
html body main .term-agent .term-logo-grid__item--crm { --brand: #334155; --brand-soft: #eef2f6; }

@media (prefers-reduced-motion: reduce) {
  html body main .term-agent .term-logo-grid .term-logo-grid__item {
    transition: none;
  }
}

/* --- Blueprint 2026-08-30 (Paket 2, P1-07): H2/H3-Skala auf die freigegebene
   Ziel-Baseline vereinheitlicht (DESIGN.md §7.5: H2 28-36px, H3 22-28px).
   Autoritative Ebene nach dem etablierten :not(#____never____)-Muster,
   schlaegt die aelteren seiten-/abschnittsspezifischen Sondergroessen
   (Academy 72px, Wissen 57.6px u.a.). ki-loesungen bleibt hier aussen vor,
   siehe P0-01 (eigenes Paket fuer die Holo-Rueckfuehrung). */
html body.home-page main :where(h2):not(#____never____),
html body.ki-beratung-page main :where(h2):not(#____never____),
html body.ki-dienste-page main :where(h2):not(#____never____),
html body.wissen-page main :where(h2):not(#____never____),
html body.academy-page main :where(h2):not(#____never____),
html body.ueber-page main :where(h2):not(#____never____),
html body.labs-page main :where(h2):not(#____never____),
html body.partner-page main :where(h2):not(#____never____),
html .holo-page :where(h2):not(#____never____) {
  font-size: clamp(28px, 25px + 0.76vw, 36px) !important;
  line-height: 1.15 !important;
}

html body.home-page main :where(h3):not(#____never____),
html body.ki-beratung-page main :where(h3):not(#____never____),
html body.ki-dienste-page main :where(h3):not(#____never____),
html body.wissen-page main :where(h3):not(#____never____),
html body.academy-page main :where(h3):not(#____never____),
html body.ueber-page main :where(h3):not(#____never____),
html body.labs-page main :where(h3):not(#____never____),
html body.partner-page main :where(h3):not(#____never____),
html .holo-page :where(h3):not(#____never____) {
  font-size: clamp(22px, 19.8px + 0.57vw, 28px) !important;
  line-height: 1.2 !important;
}

/* FAQ-Ueberschriften bleiben bewusst aussen vor: die geteilte
   :is(.home-faq-head, .beratung-faq-section .beratung-section-head, ...)
   h2-Regel weiter oben ist der Agentur-Referenzwert (52px) und gilt laut
   Blueprint-FAQ-Regel unveraendert auf allen Haupttabs. */


/* Bug-Fix 04.09.: .dienste-final-panel geriet versehentlich in die grosse
   Sammelregel fuer dunkle Sektionen (~20577/20665, gemeinsam mit
   .dienste-spine-section/.dienste-spine-item) und wurde dadurch auf
   Navy (#07111c) statt Rot gezogen -- obwohl mehrere andere Regeln
   (u. a. ~10633, ~20683, ~20942) es weiterhin als rotes Panel wie
   .beratung-final-panel behandeln. Live gerendert gewann bislang Navy,
   weil die Sammelregel spaeter in der Datei steht. Diese Regel gewinnt
   garantiert, weil sie die letzte im Stylesheet ist. */
html body main .dienste-final-panel:not(#____never____) {
  background-color: #d91e18 !important;
  color: #07111c !important;
  -webkit-text-fill-color: #07111c !important;
}

html body main .dienste-final-panel:not(#____never____) :is(h1, h2, h3, h4, h5, h6, strong, b, em, span:not(.material-symbols-outlined), p, li, small, dd):not(.text-swiss-red) {
  color: #07111c !important;
  -webkit-text-fill-color: #07111c !important;
  opacity: 1 !important;
}

/* Bug-Fix 04.09.: Regel fuer den Abschluss-CTA in dunklen Panels.
   .hero-scene__primary erbt ausserhalb des Hero die dunkle
   Referenz-Button-Optik aus hero-unify.css Block 6a (Spezifitaet 2 IDs
   durch zwei :not()-Tricks). Das ist korrekt, WENN das Panel selbst schon
   rot ist (.beratung-final-panel, .dienste-final-panel -- Kontrast-Lock
   weiter oben in dieser Datei haelt den Button dort bewusst dunkel, siehe
   "html body main .bg-swiss-red .hero-scene__primary, ..."). Liegt der
   Button dagegen in einem DUNKLEN Panel (.academy-apply, .ueber-cta,
   .wissen-cta), muss er ROT sein -- sonst zwei dunkle Flaechen ohne
   Kontrast. Nutzer-Vorgabe 04.09.: "Diese CTA muessen in Rot sein" /
   05.09.: "Bei Dienste darf dieser nicht ROT sein, Hintergrund ist auch
   rot" -- darum hier bewusst nur die drei dunklen Panels gelistet, NICHT
   die roten. Braucht ebenfalls zwei :not()-IDs, um 6a zu schlagen -- eine
   reicht nicht, weil 6a bereits bei 2 IDs liegt; bei Gleichstand
   entscheidet die zusaetzliche Klasse hier (.academy-apply/.ueber-cta/
   .wissen-cta + .hero-scene__primary = 2 vs. 1 bei 6a). */
html body main :is(.academy-apply, .ueber-cta, .wissen-cta) .hero-scene__primary:not(#____never____):not(#____never2____) {
  background-color: #d91e18 !important;
  border-color: #d91e18 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html body main :is(.academy-apply, .ueber-cta, .wissen-cta) .hero-scene__primary:not(#____never____):not(#____never2____) * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html body main :is(.academy-apply, .ueber-cta, .wissen-cta) .hero-scene__primary:not(#____never____):not(#____never2____):hover,
html body main :is(.academy-apply, .ueber-cta, .wissen-cta) .hero-scene__primary:not(#____never____):not(#____never2____):focus-visible {
  background-color: #b91813 !important;
  border-color: #b91813 !important;
}

/* Bug-Fix 05.09.: Der sekundaere Ghost-Button ("KI-Loesungen ansehen" etc.)
   auf den ROTEN Abschluss-Panels (.beratung-final-panel, .dienste-final-panel)
   behielt den globalen Referenz-Rahmen aus hero-unify.css Block 6b
   (rgba(255,255,255,.22), fuer dunkle Panels gedacht) -- auf gesaettigtem
   Rot praktisch unsichtbar, wirkt wie eine rote Flaeche ohne erkennbaren
   Button-Rand (Nutzer-Screenshot 05.09.: "Button rot auf rotem
   Hintergrund"). Rahmen/Text auf den dunklen Ton des Primaer-Buttons
   gezogen, der auf denselben Panels bereits nachweislich Kontrast hat. */
html body main :is(.beratung-final-panel, .dienste-final-panel) .hero-scene__secondary:not(#____never____):not(#____never2____) {
  border-color: rgba(7, 17, 28, .55) !important;
  background-color: rgba(7, 17, 28, .12) !important;
  color: #07111c !important;
  -webkit-text-fill-color: #07111c !important;
}
html body main :is(.beratung-final-panel, .dienste-final-panel) .hero-scene__secondary:not(#____never____):not(#____never2____):hover,
html body main :is(.beratung-final-panel, .dienste-final-panel) .hero-scene__secondary:not(#____never____):not(#____never2____):focus-visible {
  border-color: #07111c !important;
  background-color: rgba(7, 17, 28, .22) !important;
}


/* ==========================================================================
   Rueckmeldung 05.09.2026 ("Korrektur webseite 02") -- Academy
   Plan und Messwerte: _intern/KORREKTUR-02-PLAN.md
   Alle Zahlen im laufenden Browser mit getComputedStyle/Range gemessen,
   nicht aus der Kaskade abgeleitet.
   ========================================================================== */

/* Ein Satz pro Zeile in Ueberschriften. Verhindert, dass ein neuer Satz mit
   ein bis vier Woertern am Zeilenende haengt. Gleiches Mittel wie
   .hero-title-line in den Heroes. */
.saa-sentence {
  display: block;
}

/* Haelt die ersten Woerter eines neuen Satzes zusammen, damit ein Satzanfang
   nicht mit ein bis vier Woertern am Zeilenende haengt. Bewusst nowrap statt
   geschuetzter Leerzeichen: enthaelt ein gebundenes Wort einen Bindestrich,
   nutzt der Browser den als Umbruchstelle und die Bindung faellt auseinander
   (05.09. nachgewiesen an "Zwischen Tool-Demos, Sicherheitsfragen" -- brach
   mit &nbsp;, haelt mit nowrap). Deutsche Komposita machen das zur Regel,
   nicht zum Sonderfall. */
/* Versuch 08.09.2026, sitebreit ab 342px Textspalte (Teil B) zu aktivieren,
   im Browser gemessen und wieder zurückgenommen: der Dreier-Kern hält zwar
   in den vier bekannten Sonderfällen (Fan-Karten, Chronik, Prozess-Spur,
   Claim-Zeile), aber die AEUSSERE Fünfergruppe reisst bei einzelnen langen
   Komposita neuen horizontalen Überlauf auf, und zwar in den allgemeinen
   Fliesstext-Containern selbst (.lp-body, .lp-head, .beratung-section-head,
   article.wr) — keine schmalen Sonderfälle, sondern der Haupttext von
   partner/labs/ki-beratung/wissen. Gemessen bei 390px: partner.html bis zu
   396>390 und 385>362, labs.html 417>336, ki-beratung.html 476>390,
   wissen.html 407>360. Eine "gezielte Ausnahme" wie bei den vier
   Sonderfällen würde hier praktisch den gesamten Fliesstext dieser Seiten
   ausnehmen — das ist keine Ausnahme mehr, sondern eine Abschaltung.
   Projektregel: ein hängender Satzanfang ist das kleinere Übel als Text,
   der aus der Karte läuft. Bleibt darum bei der alten Schwelle ab 1025px;
   Kern-Markup ist im HTML bereits vorhanden und wirkungsbereit, sobald hier
   eine sauberere Lösung (z. B. kürzere Bindung auf Mobil) entschieden ist. */
@media (min-width: 1025px) {
  .saa-bind {
    white-space: nowrap;
  }

  .saa-bind-kern {
    white-space: nowrap;
  }

  /* Ausnahme auch auf dem Desktop: die Fan-Karten der Startseite sind nur
     230px breit, dort passt keine Fuenfergruppe. */
  .saig-fan-card .saa-bind {
    white-space: normal;
  }
}

/* Wirkungskette: "Verantwortungsvolle KI-Kultur" bricht zweizeilig um, die
   beiden anderen Titel einzeilig -- der Fliesstext startete dadurch 31px
   tiefer (gemessen: y 4671 vs. 4702). Zwei Zeilen reservieren. */
body.academy-page .academy-impact-chain strong {
  min-height: 2.2em;
}

/* Rollenkarten: die "Passt zu dir, wenn"-Zeile sass 53px versetzt
   (gemessen: y 3803 vs. 3856), weil Lead und Aufgabenliste unterschiedlich
   hoch sind. Subgrid stellt beide Karten auf dieselben sechs Zeilen
   (Icon, Titel, Lead, Aufgaben, Passt-zu-dir, CTA). */
@media (min-width: 1025px) {
  body.academy-page .academy-roles-grid {
    grid-template-rows: repeat(6, auto);
    row-gap: 0;
  }

  body.academy-page .academy-role-card {
    display: grid;
    grid-row: span 6;
    grid-template-rows: subgrid;
  }
}

/* Als Rasterzelle waere der CTA sonst kartenbreit und die Klickflaeche liefe
   ueber die ganze Zeile. */
body.academy-page .academy-role-card .academy-role-link {
  justify-self: start;
}

/* Drei Merkmalskacheln: 178px Textbreite lagen unter der Lesbarkeitsgrenze
   aus _contract.css, der Text brach fuenf- bis sechszeilig um.
   Nur ab 1025px: darunter schaltet ~14521 auf eine Spalte, und da diese Regel
   spaeter in der Datei steht, wuerde sie die Umschaltung sonst ueberstimmen
   (Media Queries erhoehen die Spezifitaet nicht). */
@media (min-width: 1025px) {
  body.academy-page .academy-fit-shell {
    grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr);
  }
}

/* Rueckmeldung #21: "Warum jetzt?" groesser setzen. Die Basisregel (~14237)
   nutzt das font-Kurzformat, deshalb hier mit hoeherer Spezifitaet. */
html body.academy-page main section.academy-program-intro .academy-intro-mark span {
  font-size: 20px;
  letter-spacing: .04em;
}

/* Kartentitel "Zusammenarbeit pruefen" lief 33px aus der Karte (gemessen:
   291px Text in 258px Kasten). Im HTML steht jetzt ein weicher Trenner
   (Zusammen&shy;arbeit); damit er wirkt, muss die Umbruch-Sperre der
   .academy-program-Ebene (~14165: hyphens/word-break/overflow-wrap auf
   "none !important") hier gezielt aufgehoben werden -- sonst ignoriert der
   Browser das &shy; und der Titel laeuft weiter heraus. Gleiches Vorgehen
   wie bei .academy-fit-signals strong (~14437). */
html body.academy-page main .academy-pathway-node strong {
  hyphens: auto !important;
}


/* --- Rueckmeldung 05.09.2026 -- KI-Beratung ------------------------------- */

/* #12: Die vier Problemkarten sind gleich hoch, aber ohne gemeinsames
   Zeilenraster -- "Zu wenig Zeit fuer Recherche" und "Akzeptanz im Team"
   brechen zweizeilig um, "Unklare Kosten" und "Zu viele Tools" einzeilig.
   Der Fliesstext startete dadurch 34px versetzt (gemessen: y 1355 vs. 1389).
   Subgrid stellt alle vier auf dieselben drei Zeilen (Ikone, Titel, Text).
   Nur ab 1025px: darunter schaltet ~10062 auf zwei Spalten und ~10063 auf
   eine; dort wuerde row-gap: 0 die Abstaende zwischen den Kartenreihen
   schlucken. */
@media (min-width: 1025px) {
  .beratung-problem-grid {
    grid-template-rows: repeat(3, auto);
    row-gap: 0;
  }

  .beratung-problem-grid article {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
  }
}

/* #13: Die linke Textspalte war gegen die Kartenreihe vertikal zentriert
   (align-items: center in ~10086) und sass dadurch tiefer als die erste
   Karte. Oben ansetzen. */
@media (min-width: 1025px) {
  .beratung-expect-grid {
    align-items: start;
  }
}

/* ==========================================================================
   .saa-stack — Schichtenstapel (gemeinsames Bauteil, 05.09.2026)

   Eine Reihe aufeinander aufbauender Ebenen: Titelzeile plus ein Satz, der
   sich per Klick öffnet. An der linken Kante läuft eine Spur mit, die sich
   bis zur geöffneten Ebene rot füllt — sie macht die Reihenfolge sichtbar,
   statt sie nur zu behaupten.

   Ersetzt gleichförmige Kartenraster mit Symbol-Kacheln: beides steht in
   den Gestaltungsregeln des Projekts ausdrücklich auf der Streichliste.

   Verwendet auf labs.html („Technologie folgt der Aufgabe") und
   academy.html („Vom Potenzial zur belastbaren Arbeitsweise").

   Ohne JavaScript stehen alle Texte offen da — das Verhalten kommt aus
   js/main.js und ist reine Verbesserung, keine Voraussetzung.
   ========================================================================== */

.saa-stack {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

/* Die Spur: graues Bett, roter Teil wächst per --saa-stack-fill mit. */
.saa-stack::before,
.saa-stack::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  border-radius: 2px;
}

.saa-stack::before {
  bottom: 0;
  background: var(--saa-border);
}

.saa-stack::after {
  height: var(--saa-stack-fill, 0px);
  background: #ff2d28;
  transition: height .42s cubic-bezier(.16, 1, .3, 1);
}

.saa-stack__step {
  position: relative;
  /* Untergrenze bewusst an --saig-pad-x-rail gebunden statt an einer eigenen
     Zahl: hier läuft der Fortschrittsstrich .saa-stack::before/::after,
     unter rund 20px kollidiert Text mit der Linie (Teil B3, kein Gewinn). */
  padding: 0 0 0 clamp(var(--saig-pad-x-rail), 2.2vw, 30px);
  border-bottom: 1px solid var(--saa-border);
}

.saa-stack__step:last-child {
  border-bottom: 0;
}

.saa-stack__name {
  margin: 0;
  padding: 18px 0 8px;
  font-size: clamp(19px, 1.7vw, 23px) !important;
  line-height: 1.24 !important;
}

.saa-stack__text {
  margin: 0;
  padding-bottom: 18px;
  max-width: 52ch;
}

/* --- Mit JavaScript --------------------------------------------------- */

.saa-stack--interactive .saa-stack__name {
  padding: 0;
}

.saa-stack__toggle {
  appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .28s cubic-bezier(.16, 1, .3, 1), color .2s ease;
}

/* Ein globaler Button-Reset gibt jedem <button> Weiss und einen 1px-Rahmen;
   die Zeilen sähen sonst wie Kästen aus. Welche Regel das ist, liess sich
   über die CSSOM nicht ermitteln — daher die ID-Eskalation, dem Muster
   dieses Projekts folgend. */
html body .saa-stack--interactive .saa-stack__toggle:not(#____never____) {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.saa-stack__toggle:focus-visible {
  outline: 2px solid #ff2d28;
  outline-offset: 4px;
}

/* Der Zeiger: ein Strich, dessen Querbalken beim Öffnen verschwindet. */
.saa-stack__mark {
  flex: none;
  width: 14px;
  height: 2px;
  background: var(--saa-text-soft);
  position: relative;
  transition: background .2s ease;
}

.saa-stack__mark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  transform: rotate(90deg) scaleX(1);
  transform-origin: center;
  transition: transform .32s cubic-bezier(.16, 1, .3, 1);
}

.saa-stack__step.is-open .saa-stack__mark::after {
  transform: rotate(90deg) scaleX(0);
}

.saa-stack__step.is-open .saa-stack__mark {
  background: #ff2d28;
}

.saa-stack__step.is-open .saa-stack__toggle {
  color: #d91e18;
}

.saa-stack--interactive .saa-stack__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .38s cubic-bezier(.16, 1, .3, 1);
}

.saa-stack--interactive .saa-stack__step.is-open .saa-stack__panel {
  grid-template-rows: 1fr;
}

.saa-stack--interactive .saa-stack__panel > * {
  overflow: hidden;
  min-height: 0;
}

/* Der Innenabstand muss mitschalten. Eine 0fr-Zeile wird am Mindestinhalt
   des Kindes bemessen, und dazu zählt sein Polster — mit min-height: 0
   allein blieben die geschlossenen Ebenen 18px hoch offen. */
.saa-stack--interactive .saa-stack__text {
  padding-bottom: 0;
}

.saa-stack--interactive .saa-stack__step.is-open .saa-stack__text {
  padding-bottom: 18px;
}

/* Ein kleiner Versatz beim Zeigen — nur mit Maus, nicht auf Tippgeräten. */
@media (hover: hover) and (pointer: fine) {
  .saa-stack__toggle:hover {
    transform: translateX(6px);
  }

  .saa-stack__toggle:hover .saa-stack__mark {
    background: #ff2d28;
  }
}

@media (max-width: 900px) {
  .saa-stack__text {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .saa-stack::after,
  .saa-stack__toggle,
  .saa-stack__mark::after,
  .saa-stack--interactive .saa-stack__panel {
    transition: none !important;
  }

  .saa-stack__toggle:hover {
    transform: none !important;
  }
}


/* ==========================================================================
   .home-call — Was das Erstgespräch bringt (Startseite, Abschnitt vor dem
   Formular). 06.09.2026.

   Ersetzt drei zusammenhanglose Vertrauenszeilen („Direkte Antwort, keine
   Warteschlaufe" und so weiter). Die beantworteten nicht die Frage, die
   jemand direkt vor dem Absendeknopf hat: Was passiert, wenn ich das jetzt
   abschicke? Der Block sagt es in drei Sätzen.

   Der Haken ist bewusst das blanke Zeichen ohne Kachel oder Kreis — die
   Gestaltungsregeln des Projekts schliessen Symbol-Kacheln aus.

   Keine festen Breiten: der Block sitzt in einer Rasterspalte, die auf
   schmalen Fenstern auf eine Spalte umschaltet.
   ========================================================================== */

.home-page .home-call {
  border-top: 1px solid var(--saa-border);
  padding-top: clamp(24px, 3vw, 32px);
}

.home-page .home-call__title {
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 500;
  line-height: 1.15;
  margin: 0;
}

.home-page .home-call__lead {
  color: var(--saa-red);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
  margin: 10px 0 0;
  text-transform: uppercase;
}

.home-page .home-call__list {
  display: grid;
  gap: 14px;
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}

.home-page .home-call__list li {
  align-items: start;
  display: grid;
  gap: 12px;
  grid-template-columns: 28px minmax(0, 1fr);
}

/* Grösse und Achsen des Zeichens führt styles.css weiter oben; eigene Werte
   hier wären toter Code. Gemessen kommen 28px heraus — danach ist die Spalte
   bemessen, sonst ragt die Glyphe heraus. Die Farbe holt sich der
   Farb-Anstreicher in main.js; auf dem dunklen Abschnitt malt er Weiss, was
   hier stimmt. */
.home-page .home-call__list .material-symbols-outlined {
  line-height: 1.5;
  width: 28px;
}

.home-page .home-call__note {
  color: var(--saa-text-muted);
  margin: 20px 0 0;
}

/* =====================================================================
   Kontaktformular: Umschaltung Unternehmen / Partner / Labs (07.09.2026)

   Labs- und Partner-Besucher landen auf demselben Formular wie KMU-Leads.
   Statt einer zweiten Seite mit eigenem Spamschutz schaltet eine Reiterzeile
   über dem Formular die passenden Felder frei.

   Die Zeile muss als Bedienelement lesbar sein und nicht als Erklärung:
   deshalb ein sichtbarer Auswahlpunkt je Reiter, die Gruppenbeschriftung in
   derselben Schrift wie jede andere Feldbeschriftung (13px Versalien) und
   ein gefüllter Grund für die getroffene Wahl. Ohne diese drei Merkmale
   liest sich die Zeile wie ein Textkasten.

   Progressive Enhancement: ohne JavaScript steht keine Gruppe auf "is-off",
   also sind alle Felder und alle drei Erklärzeilen sichtbar und das
   Formular bleibt vollständig benutzbar.

   Die Wahl zeigen Rahmen, Grund und Punkt an, nicht die Textfarbe: der
   Painter in main.js schreibt auf jeden Textknoten inline color !important
   und würde eine Farbregel hier überstimmen. Die Taste "Wechseln" trägt
   deshalb die Klasse text-swiss-red, die der Painter kennt.
   ===================================================================== */

html body .contact-mode:not(#____never____) {
  border: 0 !important;
  margin: 0 0 clamp(20px, 2.5vw, 28px) !important;
  min-inline-size: 0;
  padding: 0 !important;
}

/* Gleiche Schrift wie label[for="vorname"] und die übrigen Feldnamen,
   gemessen 13px, 600, Versalien. Sonst ordnet sich die Zeile optisch den
   Überschriften zu statt den Feldern. */
html body .contact-mode legend:not(#____never____) {
  float: none;
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 10px;
  padding: 0;
  text-transform: uppercase;
}

.contact-mode__options {
  display: grid;
  gap: 8px;
  /* 14.09.2026: vier Modi (Pionierpartner dazu) -> zwei mal zwei statt
     einer Dreierzeile; vier Reiter nebeneinander brechen die Titel um. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.contact-mode__option {
  position: relative;
}

/* Fokussierbar bleiben, aber keinen Platz beanspruchen. Gemessen setzt
   styles.css jedem Feld im Formular volle Breite und 48px Höhe, deshalb
   die ID-Stufe: ohne sie schiebt das Wahlfeld den Reiter um fünf Pixel
   über seinen Kasten hinaus. */
html body .contact-mode__input:not(#____never____) {
  clip-path: inset(50%);
  height: 1px !important;
  left: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  opacity: 0 !important;
  overflow: hidden;
  padding: 0 !important;
  pointer-events: none;
  position: absolute !important;
  top: 0 !important;
  width: 1px !important;
}

/* Gemessen macht styles.css aus jedem label im Formular ein inline-block
   mit automatischer Breite. Ohne die ID-Stufe schrumpft der Reiter auf
   seinen Text und der Auswahlpunkt bleibt ein inline-Element, an dem
   Breite und Höhe wirkungslos sind. */
html body .contact-mode__label:not(#____never____) {
  align-items: center;
  border: 1px solid var(--saa-border);
  border-radius: 10px;
  box-sizing: border-box;
  cursor: pointer;
  display: flex !important;
  gap: 10px;
  height: 100%;
  padding: 11px 13px;
  transition: background-color .2s ease, border-color .2s ease;
  width: 100% !important;
}

.contact-mode__label:hover {
  border-color: var(--saa-text-muted);
}

.contact-mode__marker {
  background: transparent;
  block-size: 16px;
  display: block;
  border: 2px solid var(--saa-border);
  border-radius: 50%;
  box-sizing: border-box;
  flex: 0 0 auto;
  inline-size: 16px;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.contact-mode__input:checked + .contact-mode__label {
  background-color: rgba(255, 45, 40, .07);
  border-color: #ff2d28;
}

.contact-mode__input:checked + .contact-mode__label .contact-mode__marker {
  background-color: #ff2d28;
  border-color: #ff2d28;
  box-shadow: inset 0 0 0 3px #fff;
}

.contact-mode__input:focus-visible + .contact-mode__label {
  outline: 2px solid #ff2d28;
  outline-offset: 2px;
}

.contact-mode__title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}

.contact-mode__hint {
  display: block;
  font-size: 14px;
  line-height: 1.45;
  margin-top: 10px;
}

/* Die Hülle darf im Layout nicht auftauchen, sonst verliert das Formular
   seine eigenen Abstände zwischen den Feldern. */
.contact-field-set,
.contact-routing-variant {
  display: contents;
}

html body [data-kontext-gruppe].is-off:not(#____never____) {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .contact-mode__label,
  .contact-mode__marker {
    transition: none;
  }
}

@media (max-width: 700px) {
  .contact-mode__options {
    grid-template-columns: 1fr;
  }
}

/* Hinweiszeilen einer Feldgruppe (14.09.2026, Pionierpartner): unter dem
   Nachrichtenfeld und unter dem Absendeknopf. Ausgeblendet wie die übrige
   Gruppe über [data-kontext-gruppe].is-off. */
.contact-field-note {
  color: #5f6b7a;
  margin: 10px 0 0;
}

.contact-submit-note {
  margin-top: 14px;
}

/* =====================================================================
   Academy-Einstieg: die Frage trägt den Abschnitt (07.09.2026)

   Bis dahin stand "Warum jetzt?" als kleine Marke in einer eigenen
   220px-Spalte links, die eigentliche Überschrift daneben. Die Frage ist
   aber das, was den Abschnitt erklärt — sie steht jetzt gross als
   Überschrift, der bisherige Zweisatz darunter als Vorspann.

   Der rote Anschlag der alten Marke bleibt als kurzer Strich über der
   Frage erhalten, damit die Sektion ihr Erkennungszeichen behält.

   Die Grössen brauchen die ID-Stufe: styles.css setzt weiter oben jedes
   <p> im Hauptbereich auf 16px/1.62 !important.
   ===================================================================== */

html body .academy-program-intro .academy-program-shell:not(#____never____) {
  display: block;
}

.academy-intro-copy--wide {
  max-width: 62rem;
}

.academy-intro-question {
  position: relative;
}

.academy-intro-question::before {
  background: #ff2d28;
  block-size: 3px;
  border-radius: 2px;
  content: "";
  display: block;
  inline-size: 44px;
  margin-block-end: 18px;
}

html body .academy-intro-lead:not(#____never____) {
  font-size: clamp(18px, 1.5vw, 21px) !important;
  font-weight: 500 !important;
  line-height: 1.42 !important;
  margin: 18px 0 0 !important;
}

html body .academy-intro-lead:not(#____never____) + p {
  margin-top: 18px !important;
}

@media (max-width: 700px) {
  .academy-intro-question::before {
    margin-block-end: 14px;
  }
}

/* Abschnittsbilder auf Seiten ohne Tailwind und ohne Figure-Klasse
   (ki-beratung, ki-dienste, wissen). Entspricht inhaltlich .lp-figure aus
   labs-partner.css. height:auto ist Pflicht, sonst erzwingt ein gesetztes
   height-Attribut im Markup ein falsches Seitenverhältnis.
   12.09.: sichtbarer Rahmen (border) entfernt (Rückmeldung Joshua) -- Bilder
   ausserhalb der Hero-Sections sollen keinen Border mehr haben, nur noch
   den Radius. Die dark-Section-Regel für die Randfarbe ist damit hinfällig
   und wurde mitentfernt. */
html body .saa-figure:not(#____never____) {
  border-radius: 16px;
  margin: 0;
  max-width: 100%;
  overflow: hidden;
}

html body .saa-figure img:not(#____never____) {
  aspect-ratio: 16 / 9;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

html body .saa-figure--wide:not(#____never____) {
  margin-top: clamp(36px, 4.4vw, 56px);
  margin-bottom: clamp(24px, 3vw, 40px);
}

/* 09.09.: volle Spaltenbreite wirkte neben dem Fliesstext zu dominant
   (Rückmeldung Joshua, ~1280px breit / 721px hoch bei 1440px Fenster).
   Auf 62% der Spalte begrenzt und zentriert -- rund 38% schmaler, greift
   erst ab dem Punkt, an dem die Spalte tatsächlich so breit wird (auf
   schmaleren Spalten, z. B. der Zweispalten-Sonderfälle, bleibt die Regel
   wirkungslos, weil dort schon vorher unter 62% lag). Nur ab 768px: auf
   Mobil (390px) ergab dieselbe Regel nur noch 224px breite Bilder --
   spürbar zu klein, dort bleibt die volle Spaltenbreite. */
@media (min-width: 768px) {
  html body .saa-figure--wide:not(#____never____) {
    margin-inline: auto;
    max-width: 62%;
  }
}

/* 10.09.: Handover-Spezifikation angepasst. Textspalte 54-58 Prozent,
   Bildspalte 40-44 Prozent mit fester Maximalbreite pro Breakpoint statt
   reiner 1fr/1fr-Teilung, dazu alternierend rechts und links über die
   Modifierklasse für die geraden Bildnummern je Sitemap. Das Bildelement
   trägt zusätzlich eine feste Markierungsklasse (Figure oder abweichender
   Bildcontainer wie bei Academy), damit Reihenfolge und Breite unabhängig
   von der konkreten Bildklasse greifen. Zweispaltig bleibt bis 768px, erst
   darunter folgt der Stapel mit Text vor Bild. align-items: start (09.09.,
   Rücksprache Joshua): bei unterschiedlich langem Text pro Sektion sass
   das Bild sonst mal neben dem ersten Satz, mal neben der Bildmitte, mit
   "start" liegt die Bildoberkante immer auf der Höhe der Überschrift. */
html body .saa-split:not(#____never____) {
  align-items: start;
  display: grid;
  gap: clamp(48px, 5vw, 72px);
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 1fr);
}

html body .saa-split--media-first:not(#____never____) {
  grid-template-columns: minmax(260px, 1fr) minmax(0, 1.35fr);
}

html body .saa-split--media-first .saa-split__media:not(#____never____) {
  order: -1;
}

html body .saa-split .saa-figure--wide:not(#____never____) {
  margin: 0;
}

html body .saa-split__media:not(#____never____) {
  justify-self: end;
  max-width: 520px;
  width: 100%;
}

html body .saa-split--media-first .saa-split__media:not(#____never____) {
  justify-self: start;
}

@media (max-width: 1199px) {
  html body .saa-split__media:not(#____never____) {
    max-width: 460px;
  }
}

@media (max-width: 1023px) {
  html body .saa-split__media:not(#____never____) {
    max-width: 400px;
  }
}

@media (max-width: 767px) {
  html body .saa-split:not(#____never____),
  html body .saa-split--media-first:not(#____never____) {
    grid-template-columns: minmax(0, 1fr);
  }

  html body .saa-split--media-first .saa-split__media:not(#____never____) {
    order: 0;
  }

  html body .saa-split__media:not(#____never____) {
    justify-self: stretch;
    margin-inline: auto;
    max-width: 340px;
    width: min(100%, calc(100vw - 40px));
  }
}