/* /site.css */
@font-face {
  font-family: Sztos;
  src: url('/assets/media/schrift/sztos-variable.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
}

@font-face {
  font-family: Inter;
  src: url('/assets/media/schrift/inter-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --orange: #f2490c;
  --purple: #7f27ff;
  --navy: #321066;
  --ink: #0d0406;
  --muted: #6e686a;
  --grey: #f2f0f0;
  --lavender: #e5d9f8;
  --white: #fff;
  --display: Sztos,Arial,sans-serif;
  --body: Inter,Arial,sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}

body {
  margin: 0;
  color: var(--ink);
  font: 16px/1.4 var(--body);
  background: #fff;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

button,a {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 6px;
}

img {
  display: block;
  max-width: 100%;
}

figure,blockquote {
  margin: 0;
}

h1,h2,h3,p {
  margin: 0;
}

h1,h2 {
  font-family: var(--display);
  font-variation-settings: 'wdth' 200,'wght' 400;
  font-weight: 400;
  font-size: 34px;
  line-height: 1.3;
  letter-spacing: 0;
  background: linear-gradient(90deg,#f2490c 0%,#942dd1 58.8%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

h3 {
  font: 700 20px/1.3 var(--body);
}

p+p {
  margin-top: 16px;
}

ul,ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.section {
  position: relative;
}

.container {
  width: calc(100% - 280px);
  max-width: 1160px;
  margin-inline: auto;
}

.wide-container {
  width: calc(100% - 160px);
  max-width: 1280px;
  margin-inline: auto;
}

.grey {
  background: var(--grey);
}

.navy {
  background: var(--navy);
  color: var(--white);
}

.purple {
  background: var(--purple);
  color: var(--white);
}

.eyebrow {
  font: 400 14px/18px var(--display);
  font-variation-settings: 'wdth' 200,'wght' 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 18px;
}

.navy .eyebrow {
  color: #cfcdcd;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 44px;
  padding: 10px 14px;
  border: 2px solid var(--purple);
  color: var(--purple);
  background: var(--white);
  font: 400 14px/20px var(--display);
  font-variation-settings: 'wdth' 200,'wght' 400;
  letter-spacing: 1.4px;
  white-space: nowrap;
  transition: color .22s,background .22s,box-shadow .22s,transform .22s;
}

.button svg {
  width: 20px;
  height: 14px;
  flex: none;
  transition: transform .22s;
}

.button:hover {
  background: var(--purple);
  color: #fff;
  box-shadow: 0 5px 18px #7f27ff25;
}

.button:hover svg {
  transform: translateX(3px);
}

.button.primary {
  background: var(--purple);
  color: #fff;
}

.button.primary:hover {
  background: var(--navy);
  border-color: var(--navy);
}

.button.light {
  border-color: transparent;
}

.button-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.skip-link {
  position: fixed;
  left: 20px;
  top: -80px;
  z-index: 100;
  background: #fff;
  padding: 12px;
}

.skip-link:focus {
  top: 12px;
}

/* Header: the desktop and mobile frames have distinct navigation layouts. */

.header {
  height: 110px;
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
}

.header-inner {
  max-width: 1270px;
  width: calc(100% - 170px);
  height: 100%;
  margin: auto;
  display: flex;
  align-items: flex-start;
  position: relative;
}

.brand {
  width: 216px;
  display: block;
  flex: none;
  padding-top: 20px;
}

.brand-word {
  display: flex;
  align-items: center;
  width: 216px;
  height: 27px;
  gap: 2px;
}

.brand-word img:first-child {
  width: 37px;
  height: 27px;
}

.brand-word img:last-child {
  width: 176px;
  height: 27px;
}

.brand-claim {
  width: 196px;
  height: 24px;
  object-fit: contain;
  object-position: left;
  margin-top: 13px;
}

.main-nav {
  display: flex;
  gap: 40px;
  align-items: center;
  flex: 1;
  margin: 23px 0 0 123px;
}

.main-nav>a:not(.button) {
  font: 400 16px/21px var(--display);
  font-variation-settings: 'wdth' 200,'wght' 400;
  letter-spacing: 1.6px;
  font-variant: normal;
  text-transform: uppercase;
  transition: color .2s;
}

.main-nav>a:not(.button):hover,.main-nav>a:not(.button)[aria-current] {
  color: var(--purple);
}

.main-nav .nav-contact {
  margin-left: auto;
  min-width: 142px;
}

.menu-toggle {
  display: none;
}

/* Hero background is the supplied Figma shader; no rasterized page content. */

.hero {
  min-height: 586px;
  padding: 184px 0 80px;
  background: #fff url('/assets/media/start/hero-shader.webp') center/100% 100% no-repeat;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 44px;
  grid-template-rows: auto auto 1fr;
  align-items: start;
}

.hero-kicker {
  grid-area: 1/1/2/3;
}

.hero h1 {
  grid-area: 2/1;
  font-size: 34px;
  line-height: 45px;
  max-width: 580px;
}

.hero-copy {
  grid-area: 2/2/4/3;
  padding-top: 64px;
  color: #403b3e;
  font-size: 18px;
  line-height: 26px;
}

.hero-copy p+p {
  margin-top: 18px;
}

.hero-chevron {
  width: 32px;
  height: 36px;
  object-fit: contain;
  margin-bottom: 44px;
}

.hero-action {
  grid-area: 3/1;
  margin-top: 40px;
}

.hero-start {
  height: 624px;
  padding-top: 168px;
  background-image: url('/assets/media/start/raster-hero.webp'),url('/assets/media/start/hero-shader.webp');
  background-size: auto 624px,100% 100%;
  background-position: 270px top,center;
}

.hero-start .hero-grid {
  width: calc(100% - 170px);
  max-width: 1270px;
  grid-template-columns: 653px 1fr;
  column-gap: 151px;
  grid-template-rows: 180px auto;
}

.hero-start h1 {
  grid-area: 1/1;
  line-height: 45px;
  max-width: 653px;
}

.hero-start .hero-copy {
  grid-area: 1/2/3/3;
  padding-top: 125px;
  font-size: 16px;
  line-height: 22px;
  min-width: 472px;
}

.hero-start .hero-chevron {
  margin-bottom: 35px;
}

.hero-start .hero-action {
  grid-area: 2/1;
  margin-top: 44px;
}

/* Überschrift 653 + Abstand 151 + Text mindestens 472 px = 1276 px, der
   Container ist aber nur 100 % − 170 px breit: unter 1446 px ragte der Text
   rechts aus dem Fenster (bei 1280 px um rund 80 px). Bis 1459 px schrumpft
   deshalb der Abstand mit der Breite, und die Textspalte gibt nach; darüber
   bleibt es beim Entwurf, unter 1251 px gilt die eigene Regel weiter unten. */
@media (min-width:1251px) and (max-width:1459px) {
  .hero-start .hero-grid { grid-template-columns: 653px minmax(0, 1fr); column-gap: clamp(64px, calc(100vw - 1301px), 151px); }
  .hero-start .hero-copy { min-width: 0; }
}

.text-link {
  display: block;
  margin-top: 24px;
  color: var(--navy);
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
}

.text-link:hover {
  color: var(--purple);
}

.advantages {
  height: 116px;
  background: var(--grey);
}

.advantages .wide-container {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 48px;
  align-items: center;
  padding: 0 24px;
}

.advantage {
  display: flex;
  align-items: center;
  gap: 24px;
}

.advantage img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.advantage span {
  max-width: 285px;
  font: 400 14px/18px var(--display);
  font-variation-settings: 'wdth' 200,'wght' 400;
  color: var(--orange);
}

/* Editorial cards retain the exact exported image crops. */

.editorial {
  padding: 44px 0 0;
  height: 620px;
}

.editorial-heading {
  font: 600 14px/18px var(--display);
  font-variation-settings: 'wdth' 200,'wght' 600;
  margin-bottom: 32px;
}

.slider {
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.slider::-webkit-scrollbar {
  display: none;
}

.editorial-slider {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 24px;
}

.editorial-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  height: 480px;
  padding: 22px 22px 33px;
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  background: var(--ink);
  transition: border-color .25s,box-shadow .25s;
  scroll-snap-align: center;
}

.editorial-card:after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(#0d0406 0%,#0d0406a0 15%,transparent 46%);
}

.editorial-card:hover {
  border-color: var(--purple);
  box-shadow: 0 0 0 1px var(--orange),0 10px 22px #7f27ff40;
}

.card-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.card-label {
  font: 400 14px/18px var(--display);
  font-variation-settings: 'wdth' 200,'wght' 600;
  margin-bottom: 27px;
}

.editorial-card h3 {
  overflow-wrap: anywhere;
  hyphens: auto;
  font: 400 16px/20px var(--display);
  font-variation-settings: 'wdth' 200,'wght' 400;
}

.editorial-card:not(:has(.card-background)) h3 {
  color: var(--purple);
}

.editorial-card p {
  font-size: 16px;
  line-height: 22px;
  margin-top: 24px;
}

.read-more {
  font: 400 14px/18px var(--display);
  font-variation-settings: 'wdth' 200,'wght' 500;
  margin-top: auto;
  display: flex;
  gap: 16px;
}

.slider-dots {
  display: none;
}

.trust {
  height: 239px;
  padding: 0 0 64px;
  overflow: hidden;
}

.trust>p {
  width: 660px;
  max-width: calc(100% - 48px);
  text-align: center;
  margin: 0 auto 56px;
  font: 400 14px/18px var(--display);
  font-variation-settings: 'wdth' 200,'wght' 400;
}

.logo-window {
  overflow: hidden;
  width: 100%;
}

.logo-track {
  display: flex;
  width: max-content;
  gap: 24px;
  animation: logos 54s linear infinite;
}

.logo-track img {
  width: 151px;
  height: 46px;
  object-fit: contain;
}

.logo-window:hover .logo-track {
  animation-play-state: paused;
}

@keyframes logos {
  to {
    transform: translateX(-50%);
  }
}

.testimonials {
  height: 848px;
  padding: 58px 0 44px;
  background: #f5f4f4 url('/assets/media/start/raster-stimmen.webp') left center/425px auto no-repeat;
  overflow: hidden;
  color: var(--navy);
}

.testimonials h2 {
  text-align: center;
  max-width: 850px;
  margin: auto;
  color: #ff5100;
  background: none;
}

.testimonial-intro {
  max-width: 830px;
  margin: 18px auto 0;
  text-align: center;
  font-size: 18px;
  line-height: 24px;
}

.quotes {
  height: 458px;
  margin: 36px auto 0;
  position: relative;
  max-width: 860px;
  perspective: 1400px;
  touch-action: pan-y;
}

.quote {
  width: 346px;
  min-height: 392px;
  border-radius: 24px;
  background: var(--purple);
  color: #fff;
  padding: 28px 24px;
  position: absolute;
  left: 50%;
  top: 10px;
  box-shadow: 0 12px 30px #0004;
  transform-origin: center;
  transition: transform .65s cubic-bezier(.22,.7,.2,1),filter .65s;
}

.quote[data-position='-1'] {
  transform: translateX(calc(-50% - 234px)) translateY(26px) rotate(-2deg) scale(.92);
  z-index: 1;
}

.quote[data-position='0'] {
  transform: translateX(-50%);
  z-index: 3;
}

.quote[data-position='1'] {
  transform: translateX(calc(-50% + 234px)) translateY(26px) rotate(3deg) scale(.92);
  z-index: 2;
}

.stars {
  display: flex;
  gap: 3px;
  margin-bottom: 32px;
}

.stars img {
  width: 16px;
  height: 16px;
}

.quote[data-position='0'] .stars img {
  filter: invert(41%) sepia(99%) saturate(4984%) hue-rotate(5deg) brightness(104%) contrast(107%);
}

.quote blockquote {
  font: 400 16px/22px var(--display);
  font-variation-settings: 'wdth' 200,'wght' 300;
}

.quote-person {
  font: 400 12px/16px var(--display);
  font-variation-settings: 'wdth' 200,'wght' 400;
  margin-top: 30px;
}

.quote-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  opacity: 0;
  transition: opacity .2s;
}

.quotes:hover .quote-controls,.quotes:focus-within .quote-controls {
  opacity: 1;
}

.quote-controls button,.slider-arrows button {
  width: 32px;
  height: 32px;
  border: 1px solid currentColor;
  background: transparent;
  color: var(--purple);
}

.testimonial-action {
  text-align: center;
  margin-top: 6px;
}

.landscape {
  min-height: 1183px;
  padding: 151px 0 102px;
}

.landscape .container {
  max-width: 1201px;
  width: calc(100% - 239px);
  margin-left: auto;
  margin-right: 82px;
}

.landscape h2>span {
  display: block;
}

.landscape h2 {
  max-width: 938px;
  margin-bottom: 67px;
  line-height: 45px;
}

.landscape-image {
  border-radius: 10px;
  overflow: hidden;
}

.landscape-image img {
  width: 100%;
  height: 293px;
  object-fit: cover;
}

.benefits {
  display: grid;
  grid-template-columns: 442px 1fr;
  gap: 55px 0;
  margin-top: 48px;
}

.benefit-intro {
  grid-column: 1/3;
  max-width: 683px;
  min-height: 113px;
  font-size: 16px;
  line-height: 24px;
}

.benefit-action {
  grid-area: 2/1;
}

.benefit-list {
  grid-area: 2/2;
}

.benefit-list li+li {
  margin-top: 24px;
}

.benefit-list h3,.benefit-list p {
  font: 400 18px/24px var(--display);
  font-variation-settings: 'wdth' 200,'wght' 400;
}

.benefit-list h3 {
  font-variation-settings: 'wdth' 200,'wght' 500;
}

.team-teaser {
  height: 910px;
  padding-top: 164px;
  overflow: hidden;
  color: #cfcdcd;
}

.team-teaser-grid {
  display: grid;
  grid-template-columns: 1fr 492px;
  gap: 36px 115px;
  grid-template-rows: auto auto auto;
}

.team-teaser h2 {
  grid-area: 1/1;
  color: #cfcdcd;
  background: none;
  font-size: 34px;
  line-height: 45px;
  max-width: 640px;
}

.team-teaser-grid>p {
  grid-area: 2/1;
  font: 400 18px/24px var(--display);
  font-variation-settings: 'wdth' 200,'wght' 400;
}

.team-teaser-action {
  grid-area: 3/1;
}

.team-teaser-image {
  grid-area: 1/2/4/3;
  border-radius: 18px;
  overflow: hidden;
}

.team-teaser-image img {
  width: 100%;
  height: 460px;
  object-fit: cover;
}

.team-teaser:after {
  content: '';
  position: absolute;
  right: 0;
  top: 530px;
  width: 300px;
  height: 300px;
  background: url('/assets/media/start/raster-cta.webp') center/contain no-repeat;
  pointer-events: none;
}

.marquee {
  margin-top: 148px;
  overflow: hidden;
  font: 400 44px/60px var(--display);
  font-variation-settings: 'wdth' 200,'wght' 200;
  color: #cfcdcd;
}

.marquee>div {
  width: max-content;
  display: flex;
  animation: logos 45s linear infinite;
}

.marquee span {
  white-space: nowrap;
}

.final-cta {
  height: 700px;
  overflow: hidden;
  padding: 88px 0 80px;
}

.cta-inner {
  width: 750px;
  margin-left: max(calc((100vw - 1054px)/2),13.4%);
  position: relative;
  z-index: 1;
}

.final-cta h2 {
  color: var(--navy);
  background: none;
  max-width: 750px;
  margin-bottom: 44px;
}

.cta-kicker {
  font: 500 14px/18px var(--display);
  font-variation-settings: 'wdth' 200,'wght' 500;
  text-transform: none;
  color: var(--navy);
  max-width: 620px;
}

.cta-copy {
  font: 400 16px/21px var(--display);
  font-variation-settings: 'wdth' 200,'wght' 400;
  color: var(--navy);
  max-width: 650px;
  margin-top: 20px;
}

.final-cta .button-row {
  margin-top: 62px;
}

.cta-bars {
  position: absolute;
  right: -1px;
  top: 86px;
  width: 526px;
  height: 526px;
  object-fit: fill;
  pointer-events: none;
}

.back-top {
  height: 125px;
  background: var(--grey);
  display: grid;
  place-items: center;
}

.back-top a {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--purple);
  border: 1.5px solid var(--purple);
  border-radius: 50%;
  font-size: 23px;
  transition: background .2s,color .2s;
}

.back-top a:hover {
  color: white;
  background: var(--purple);
}

.footer {
  background: var(--navy);
  color: #fff;
}

.footer-inner {
  height: 373px;
  position: relative;
  /* Dieselbe Flucht wie .header-inner (1270 px, mindestens 85 px Rand). Als
     Innenabstand statt als schmalere Box, damit Faecher und Linien weiter am
     Fensterrand sitzen. */
  padding: 56px max(85px, calc((100% - 1270px) / 2));
  background: url('/assets/media/start/fuss-faecher.webp') right bottom/800px auto no-repeat;
  display: grid;
  grid-template-columns: 100px 1fr 265px;
  grid-template-rows: 70px 110px 1fr;
  gap: 0 50px;
}

.footer-brand {
  grid-area: 1/1;
  display: block;
  width: 54px;
}

.footer-brand img {
  width: 54px;
  height: 40px;
}

.footer-nav {
  grid-area: 1/2;
  display: flex;
  gap: 32px;
  padding-top: 22px;
  align-items: start;
  white-space: nowrap;
}

.footer-nav a,.social-links,.legal-links {
  font: 400 18px/24px var(--display);
  font-variation-settings: 'wdth' 200,'wght' 400;
}

.footer a:not(.button):hover {
  color: #c398ff;
}

.footer-contact {
  grid-area: 2/2;
  padding-top: 55px;
}

.social-links {
  grid-area: 3/3;
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.social-links span {
  display: flex;
  align-items: center;
  gap: 12px;
}

.social-links img {
  width: 18px;
  height: 18px;
}

.legal-links {
  grid-area: 3/2;
  align-self: end;
  display: flex;
  gap: 30px;
  font-size: 14px;
  line-height: 18px;
}

.footer-baseline {
  height: 46px;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--purple);
  font: 400 14px/18px var(--display);
  font-variation-settings: 'wdth' 200,'wght' 400;
}

/* Solutions */

.problems {
  min-height: 1471px;
  padding: 110px 0;
}

.problem-heading {
  position: relative;
  text-align: center;
  max-width: 1000px;
  margin: 0 auto 136px;
}

.problem-heading>p:first-of-type {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 22px;
}

.problem-heading>p:last-child {
  font-size: 18px;
  line-height: 26px;
  max-width: 830px;
  margin: 22px auto 0;
  color: var(--muted);
}

.outline-number {
  position: absolute;
  color: transparent;
  -webkit-text-stroke: 1px #d9a0d2;
  font: 400 400px/.9 var(--display);
  font-variation-settings: 'wdth' 200,'wght' 200;
  z-index: 0;
  pointer-events: none;
}

.problem-heading .outline-number {
  left: 50%;
  top: -70px;
  transform: translateX(-50%);
  opacity: .7;
}

.problem-heading>*:not(.outline-number) {
  position: relative;
}

.problem-list {
  counter-reset: problem;
}

.problem-list li {
  counter-increment: problem;
  position: relative;
  padding-left: 56px;
  margin-bottom: 32px;
}

.problem-list li:before {
  content: counter(problem);
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--purple);
  color: #fff;
  text-align: center;
  font-size: 16px;
  line-height: 32px;
}

.problem-list h3 {
  font-size: 20px;
  line-height: 28px;
  margin-bottom: 8px;
}

.problem-list p {
  font-size: 16px;
  line-height: 24px;
  color: var(--muted);
}

.problem-list strong {
  color: var(--ink);
}

.problem-action {
  margin: 60px 0 0 56px;
}

.use-cases {
  min-height: 810px;
  padding: 100px 0 76px;
  overflow: hidden;
}

.use-cases h2 {
  margin-bottom: 40px;
}

.use-cases .container>p {
  max-width: 800px;
  color: #cfcdcd;
  font-size: 18px;
  line-height: 26px;
}

.use-case-window {
  margin: 48px 0 42px max(140px,calc((100% - 1160px)/2));
  overflow: hidden;
}

.use-case-slider {
  display: flex;
  gap: 24px;
  overflow: auto;
  padding-bottom: 8px;
}

.use-case {
  width: 225px;
  flex: none;
  scroll-snap-align: start;
}

.use-case>img {
  width: 225px;
  height: 172px;
  border-radius: 14px;
  object-fit: cover;
  margin-bottom: 32px;
}

.use-case h3 {
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 8px;
}

.use-case p {
  font-size: 14px;
  line-height: 20px;
  color: #bca4de;
}

.case-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.slider-arrows {
  display: flex;
  gap: 12px;
}

.slider-arrows button {
  color: #fff;
  width: 24px;
  height: 24px;
  line-height: 18px;
  padding: 0;
}

.one-stop {
  padding: 86px 0 78px;
  min-height: 704px;
  background: #faf9f7;
}

.one-stop .eyebrow {
  color: var(--orange);
}

.one-stop h2 {
  margin-bottom: 28px;
}

.one-stop p:not(.eyebrow) {
  font-size: 18px;
  line-height: 26px;
  color: var(--muted);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 44px 0 46px;
  max-width: 1090px;
}

.chip {
  background: var(--lavender);
  color: var(--purple);
  border-radius: 30px;
  padding: 9px 18px;
  font-size: 14px;
  line-height: 22px;
}

.chip.outlined {
  background: transparent;
  border: 1.5px solid var(--purple);
  padding: 6px 18px;
}

.chip.outlined:first-of-type {
  break-before: always;
}

.faq {
  min-height: 837px;
  padding: 84px 0 72px;
}

.faq h2 {
  margin-bottom: 30px;
}

.faq details {
  border-bottom: 1px solid #dfdddd;
}

.faq details:last-child {
  border-bottom: 0;
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
}

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

.faq summary>span {
  width: 12px;
  height: 12px;
  position: relative;
  flex: none;
}

.faq summary>span:before,.faq summary>span:after {
  content: '';
  position: absolute;
  background: #8c8589;
  top: 5px;
  left: 0;
  width: 12px;
  height: 1px;
}

.faq summary>span:after {
  transform: rotate(90deg);
  transition: transform .2s;
}

.faq details[open] summary>span:after {
  transform: rotate(0);
}

.faq-answer {
  padding-bottom: 24px;
  max-width: 1050px;
  color: var(--muted);
  font-size: 16px;
  line-height: 24px;
}

.faq-answer .button {
  margin-top: 18px;
}

/* Services and contact cards. */

.services {
  min-height: 887px;
  padding: 80px 0 76px;
}

.services h2 {
  margin-bottom: 48px;
}

.service-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 48px;
}

.service-card {
  border-radius: 24px;
  background: #fff;
  color: var(--ink);
  padding: 40px;
  position: relative;
  overflow: hidden;
  min-height: 288px;
}

.service-number {
  position: absolute;
  right: 0;
  top: 0;
  font: 400 90px/1.2 var(--display);
  font-variation-settings: 'wdth' 200,'wght' 200;
  color: #eee5ff;
}

.service-card h3 {
  position: relative;
  font-size: 24px;
  margin-bottom: 18px;
}

.service-card p {
  font-size: 16px;
  line-height: 24px;
  position: relative;
  color: #403b3e;
  margin-bottom: 14px;
}

.service-card ul {
  font-size: 14px;
  line-height: 20px;
}

.service-card li {
  position: relative;
  padding-left: 20px;
  margin-top: 10px;
}

.service-card li:before {
  content: '✓';
  color: var(--orange);
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
}

.partners {
  min-height: 605px;
  padding: 82px 0 80px;
}

.partners .eyebrow {
  color: var(--purple);
}

.partners h2 {
  margin-bottom: 24px;
}

.partners p:not(.eyebrow) {
  font-size: 18px;
  line-height: 26px;
  color: #403b3e;
  max-width: 1080px;
}

.simple-cards {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 40px;
  margin-top: 48px;
}

.simple-card {
  background: #fff;
  color: var(--ink);
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
}

.simple-card h3 {
  font-size: 20px;
  line-height: 28px;
  margin-bottom: 14px;
}

.simple-card p {
  font-size: 16px;
  line-height: 22px;
  color: var(--muted);
}

.simple-card .button {
  align-self: start;
  margin-top: auto;
}

.simple-card:has(.button) {
  min-height: 256px;
  padding-bottom: 32px;
}

.pill {
  align-self: start;
  background: #eee5ff;
  color: var(--purple);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  margin-bottom: 16px;
}

.bottlenecks {
  min-height: 561px;
  padding: 80px 0 77px;
}

.bottlenecks h2 {
  max-width: 1150px;
  margin-bottom: 48px;
}

.bottleneck-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 48px;
}

.bottleneck-grid a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 24px;
  border-radius: 18px;
  font-size: 18px;
  font-weight: 700;
  transition: color .25s,transform .25s,box-shadow .25s;
}

.bottleneck-grid a span {
  opacity: 0;
  transition: opacity .25s;
}

.bottleneck-grid a:hover {
  color: var(--purple);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px #7f27ff12;
}

.bottleneck-grid a:hover span {
  opacity: 1;
}

.case-study {
  min-height: 1113px;
  padding: 82px 0 80px;
}

.case-study h2 {
  margin-bottom: 48px;
}

.case-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

.case-images img {
  width: 100%;
  aspect-ratio: 1.79;
  object-fit: cover;
  border-radius: 12px;
}

.quote-line {
  border-left: 5px solid #ff5100;
  padding-left: 20px;
  margin-top: 48px;
  font-size: 18px;
  line-height: 26px;
  color: #cfcdcd;
  max-width: 1110px;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 40px;
  margin-top: 48px;
}

.metrics strong {
  font-size: 44px;
  line-height: 1.2;
  color: #ff5100;
  font-weight: 600;
}

.metrics p {
  font-size: 16px;
  line-height: 24px;
  color: #bba4df;
  margin-top: 10px;
}

.case-facts {
  margin-top: 44px;
}

.case-facts p+p {
  margin-top: 2px;
}

.case-facts strong {
  color: #ff5100;
}

.page-resultate .trust {
  height: 239px;
}

.hero-kontakt .hero-grid {
  display: block;
}

.hero-kontakt h1 {
  max-width: 910px;
  margin-bottom: 26px;
}

.hero-kontakt .hero-copy {
  padding: 0;
  max-width: 665px;
  font-size: 18px;
  line-height: 26px;
}

.hero-kontakt strong {
  display: block;
  color: var(--navy);
  font: 400 16px/24px var(--display);
  font-variation-settings: 'wdth' 200,'wght' 600;
  text-transform: uppercase;
}

.contact-bars {
  position: absolute;
  right: 44px;
  top: 130px;
  width: 420px;
  height: 408px;
  pointer-events: none;
}

.contact-options {
  min-height: 506px;
  padding: 82px 0 76px;
}

.contact-options .simple-cards {
  grid-template-columns: repeat(3,1fr);
}

.contact-options .simple-card {
  border-radius: 10px;
  min-height: 254px;
}

.contact-options .simple-card,.client-support .simple-card {
  transition: box-shadow .22s ease;
}

.contact-options .simple-card:hover,.contact-options .simple-card:focus-within,
.client-support .simple-card:hover,.client-support .simple-card:focus-within {
  box-shadow: 0 12px 32px rgba(50,16,102,.25);
}

.contact-options .simple-card p,.client-support .simple-card p {
  font: 400 15px/22px var(--body);
  color: #4d474d;
}

.contact-options .simple-card h3,.client-support .simple-card h3 {
  margin-bottom: 16px;
}

.conversation {
  min-height: 692px;
  padding: 80px 0;
}

.conversation>div>h2 {
  margin-bottom: 28px;
}

.conversation-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  column-gap: 130px;
  padding-right: 100px;
  grid-template-rows: 1fr auto;
}

.conversation-copy {
  font-size: 18px;
  line-height: 26px;
}

.conversation-copy h3 {
  margin: 40px 0 0;
  font-size: 20px;
}

.conversation-copy ul {
  max-width: 430px;
  margin-top: 4px;
}

.conversation-copy li {
  border-bottom: 1px solid #dedcdc;
  padding: 15px 0;
  font-size: 18px;
  line-height: 24px;
}

.conversation-copy li:last-child {
  border-bottom: 0;
}

.contact-portrait {
  grid-area: 1/2/3/3;
}

.contact-portrait>img {
  width: 300px;
  height: 380px;
  object-fit: cover;
  border-radius: 22px;
}

.contact-portrait figcaption {
  font-size: 16px;
  line-height: 22px;
  margin-top: 18px;
  color: var(--muted);
}

.contact-portrait strong {
  color: var(--ink);
}

.conversation-action {
  margin-top: 24px;
}

.client-support {
  min-height: 587px;
  padding: 80px 0;
  background: #e3d7f7;
}

.client-support h2 {
  color: #ff5100;
  background: none;
  margin-bottom: 22px;
}

.client-support p {
  font-size: 16px;
  line-height: 24px;
  max-width: 800px;
}

.client-support p+p {
  margin-top: 8px;
}

.client-support .simple-card {
  min-height: 230px;
}

.legal-hero {
  background: #fff url('/assets/media/start/hero-shader.webp') center/100% 100%;
  min-height: 618px;
  padding: 184px 0 80px;
}

.legal-hero h1 {
  margin-bottom: 40px;
}

.legal-hero h3,.legal-body h3 {
  color: var(--ink);
  font-size: 18px;
  line-height: 22px;
  margin-bottom: 0;
}

.legal-hero p:not(.eyebrow),.legal-body p {
  font-size: 18px;
  line-height: 22px;
}

.legal-hero p+p,.legal-body p+p {
  margin-top: 0;
}

.legal-body {
  min-height: 887px;
  padding: 80px 0 69px;
}

.legal-body h3:not(:first-child) {
  margin-top: 24px;
}

.draft-hero {
  min-height: 420px;
}

.draft-body {
  min-height: 400px;
}

.draft-body .button {
  margin-top: 32px;
}

.not-found {
  height: 800px;
  padding: 210px 0 100px;
  text-align: center;
  background: url('/assets/media/start/hero-shader.webp') top/100% 618px no-repeat;
}

.not-found .outline-number {
  font-size: 340px;
  left: 50%;
  top: 160px;
  transform: translateX(-50%);
  opacity: .5;
}

.not-found .container {
  position: relative;
}

.not-found h1 {
  margin: 30px auto 48px;
}

.page-404 .back-top {
  display: none;
}

/* Measurements refined against the supplied Ready for Dev frame exports. */

.brand-word {
  filter: brightness(0) saturate(100%) invert(25%) sepia(99%) saturate(6369%) hue-rotate(4deg) brightness(108%) contrast(112%);
}

.hero-copy,.testimonial-intro,.benefit-intro {
  font-weight: 400;
}

.text-link {
  font-family: var(--display);
  font-variation-settings: 'wdth' 200,'wght' 500;
  font-weight: 500;
}

.card-label {
  letter-spacing: .28px;
}

.partners h2 {
  max-width: 1040px;
}

.partners .simple-card {
  padding: 32px;
}

.partners .simple-card p {
  font-size: 16px;
  line-height: 22px;
}

.pill {
  font-size: 12px;
  font-weight: 700;
}

.final-cta h2>span {
  display: block;
}

@media(min-width:900px) {
  .hero:not(.hero-start):not(.hero-kontakt) .hero-grid {
    grid-template-columns: 580px 1fr;
    gap: 0 44px;
  }
  .hero:not(.hero-start):not(.hero-kontakt) .hero-kicker {
    margin-bottom: 18px;
  }
  .hero:not(.hero-start):not(.hero-kontakt) .hero-copy {
    line-height: 26px;
    padding-top: 64px;
  }
  .hero-leistungen {
    padding-bottom: 66px;
  }
  .hero-start .hero-action .button {
    min-width: 318px;
  }
  .advantages .advantage {
    opacity: 1;
  }
  .trust>p {
    width: 727px;
    font-size: 16px;
    line-height: 21px;
    margin-bottom: 58px;
  }
  .logo-track {
    padding-left: 85px;
  }
  .testimonials {
    padding-top: 54px;
  }
  .testimonials h2 {
    max-width: 865px;
    min-height: 95px;
    line-height: 45px;
  }
  .testimonial-intro {
    min-height: 95px;
    max-width: 845px;
    margin-top: 4px;
  }
  .quotes {
    margin-top: 33px;
    height: 452px;
  }
  .quote {
    top: 0;
    width: 348px;
    min-height: 392px;
    border-radius: 20px;
    padding: 32px 24px 40px;
  }
  .quote blockquote {
    line-height: 24px;
  }
  .quote[data-position='-1'],.quote[data-position='1'] {
    width: 293px;
    min-height: 363px;
  }
  .quote[data-position='-1'] {
    transform: translateX(calc(-50% - 272px)) translateY(22px) rotate(-2.01deg);
  }
  .quote[data-position='1'] {
    transform: translateX(calc(-50% + 276px)) translateY(19px) rotate(3.21deg);
  }
  .quote:not([data-position='0']) blockquote {
    font-size: 13px;
    line-height: 20px;
  }
  .quote-person {
    margin-top: 24px;
  }
  .testimonial-action {
    margin-top: 26px;
  }
  .team-teaser {
    padding-top: 193px;
  }
  .team-teaser-grid {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    width: calc(100% - 170px);
    max-width: 1270px;
  }
  .team-teaser h2 {
    max-width: 613px;
    margin-bottom: 48px;
  }
  .team-teaser-grid>p {
    max-width: 594px;
  }
  .team-teaser-action {
    margin-top: 48px;
  }
  .team-teaser-image {
    position: absolute;
    left: 715px;
    top: -28px;
    width: 493px;
  }
  .marquee {
    margin-top: 173px;
  }
  .footer-nav a,.social-links {
    font-size: 18px;
    line-height: 24px;
  }
  .legal-links {
    font-size: 14px;
  }
}

/* Motion enhances real HTML; content stays visible if JavaScript is unavailable. */

[data-reveal] {
  --reveal-delay: 0ms;
}

.motion-ready [data-reveal] {
  transition: opacity .7s ease var(--reveal-delay),translate .7s cubic-bezier(.2,.7,.25,1) var(--reveal-delay);
}

.motion-ready [data-reveal].awaiting-reveal {
  opacity: 0;
  translate: 0 28px;
}

.motion-ready [data-reveal].is-revealed {
  opacity: 1;
  translate: 0 0;
}

/* Mobile is a separate 393 px composition, with fluid widths between phones. */

@media(max-width:899px) {
  h1,h2 {
    font-size: 26px;
    line-height: 34px;
  }
  h3 {
    font-size: 18px;
  }
  .container,.wide-container {
    width: calc(100% - 48px);
    max-width: none;
    margin-inline: 24px;
  }
  .header {
    height: 88px;
    position: relative;
    background: #fff;
  }
  .header-inner {
    width: calc(100% - 48px);
    margin-inline: 24px;
    align-items: center;
    justify-content: space-between;
  }
  .brand {
    width: 132px;
    padding: 0;
  }
  .brand-word {
    width: 132px;
    height: 17px;
    gap: 1px;
  }
  .brand-word img:first-child {
    width: 23px;
    height: 17px;
  }
  .brand-word img:last-child {
    width: 108px;
    height: 17px;
  }
  .brand-claim {
    width: 120px;
    height: 16px;
    margin-top: 7px;
  }
  .menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 8px;
    background: none;
    border: 0;
    z-index: 2;
  }
  .menu-toggle span {
    display: block;
    background: var(--purple);
    height: 1px;
    width: 30px;
    transition: transform .25s,opacity .25s;
  }
  .menu-toggle[aria-expanded=true] span:first-child {
    transform: translateY(6px) rotate(45deg);
  }
  .menu-toggle[aria-expanded=true] span:nth-child(2) {
    opacity: 0;
  }
  .menu-toggle[aria-expanded=true] span:last-child {
    transform: translateY(-6px) rotate(-45deg);
  }
  .main-nav {
    display: none;
    position: absolute;
    top: 88px;
    left: -24px;
    width: calc(100% + 48px);
    margin: 0;
    background: #fff;
    box-shadow: 0 16px 24px #32106618;
    padding: 32px 24px 44px;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
  }
  .main-nav.is-open {
    display: flex;
  }
  .main-nav>a:not(.button) {
    font-size: 18px;
    line-height: 24px;
    text-transform: none;
    letter-spacing: 0;
  }
  .main-nav .nav-contact {
    margin: 8px 0 0;
    width: 100%;
  }
  .eyebrow {
    font-size: 12px;
    line-height: 18px;
    letter-spacing: .6px;
    margin-bottom: 16px;
  }
  .button {
    font-size: 14px;
    line-height: 18px;
    padding: 11px 14px;
    gap: 16px;
    min-height: 44px;
    letter-spacing: 1.4px;
  }
  .hero {
    padding: 32px 0 28px;
    min-height: 0;
    background-size: 100% 100%;
  }
  .hero-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .hero-kicker {
    order: 0;
  }
  .hero h1 {
    order: 1;
    font-size: 26px;
    line-height: 34px;
    max-width: none;
  }
  .hero-copy {
    order: 2;
    padding: 0;
    margin-top: 20px;
    font-size: 16px;
    line-height: 22px;
  }
  .hero-chevron {
    display: none;
  }
  .hero-action {
    order: 3;
    margin-top: 40px;
    width: 100%;
  }
  .hero-action .button {
    width: 100%;
  }
  .hero-start {
    height: 560px;
    background-image: url('/assets/media/start/hero-shader.webp');
    background-size: 100% 100%;
    background-position: center;
  }
  .hero-start .hero-grid {
    width: calc(100% - 48px);
    margin-inline: 24px;
    display: flex;
  }
  .hero-start h1 {
    line-height: 34px;
    max-width: none;
  }
  .hero-start .hero-copy {
    padding: 0;
    min-width: 0;
    font-size: 16px;
    line-height: 22px;
    margin-top: 20px;
  }
  .hero-start .hero-action {
    margin-top: 40px;
  }
  .text-link {
    margin-top: 16px;
  }
  .advantages {
    height: 92px;
  }
  .advantages .wide-container {
    display: block;
    padding: 28px 0;
    position: relative;
  }
  .advantage {
    gap: 18px;
    position: absolute;
    inset: 28px 0;
    opacity: 0;
    animation: advantage-cycle 15s infinite;
    animation-delay: calc(var(--order)*5s);
  }
  .advantage span {
    font-size: 14px;
    line-height: 18px;
    max-width: 270px;
  }
  .advantage img {
    width: 32px;
    height: 32px;
  }
  @keyframes advantage-cycle {
    0%,28% {
      opacity: 1;
    }
    33%,95% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  .editorial {
    height: 574px;
    padding-top: 48px;
  }
  .editorial-heading {
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 32px;
    white-space: nowrap;
  }
  .editorial-slider {
    display: flex;
    gap: 16px;
    overflow: auto;
    margin-inline: -24px;
    padding: 0 24px;
  }
  .editorial-card {
    width: 260px;
    height: 400px;
    flex: none;
    padding: 18px 18px 28px;
  }
  .card-label {
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 12px;
  }
  .editorial-card h3 {
    font-size: 16px;
    line-height: 20px;
  }
  .editorial-card p {
    font-size: 14px;
    line-height: 20px;
    margin-top: 20px;
  }
  .slider-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
  }
  .slider-dots button {
    width: 8px;
    height: 8px;
    border: 0;
    border-radius: 50%;
    background: #aa81db;
    padding: 0;
    position: relative;
  }
  .slider-dots button:before {
    content: '';
    position: absolute;
    inset: -9px;
  }
  .slider-dots button[aria-current=true] {
    background: var(--purple);
  }
  .trust,.page-resultate .trust {
    height: 269px;
    background: #fff;
    color: var(--ink);
    padding: 56px 0 48px;
  }
  .trust>p {
    width: 345px;
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 60px;
  }
  .logo-track {
    gap: 24px;
  }
  .logo-track img {
    width: 145px;
    height: 40px;
  }
  .testimonials {
    height: 848px;
    padding: 52px 0 40px;
    background-size: 350px auto;
    background-position: left 260px;
  }
  .testimonials h2 {
    text-align: left;
    font-size: 26px;
    line-height: 34px;
  }
  .testimonial-intro {
    text-align: left;
    margin-top: 16px;
    font-size: 18px;
    line-height: 24px;
    color: var(--navy);
    max-width: 340px;
    margin-inline: 0;
  }
  .quotes {
    height: 398px;
    width: 100%;
    margin-top: 46px;
  }
  .quote {
    width: 274px;
    height: 398px;
    min-height: 398px;
    padding: 24px 20px;
    border-radius: 22px;
    top: 0;
  }
  .quote[data-position='-1'] {
    opacity: 0;
    pointer-events: none;
    transform: translateX(calc(-50% - 232px)) translateY(20px) rotate(-2deg) scale(.92);
  }
  .quote[data-position='1'] {
    transform: translateX(calc(-50% + 232px)) translateY(20px) rotate(3deg) scale(.92);
  }
  .quote blockquote {
    font-size: 14px;
    line-height: 18px;
    font-variation-settings: 'wdth' 200,'wght' 300;
  }
  .stars {
    margin-bottom: 28px;
  }
  .stars img {
    width: 14px;
    height: 14px;
  }
  .quote-person {
    font-size: 12px;
    line-height: 16px;
    margin: 0;
    position: absolute;
    bottom: 36px;
    left: 20px;
    right: 20px;
    font-variation-settings: 'wdth' 200,'wght' 500;
  }
  .quote-controls {
    opacity: 0;
    bottom: 3px;
    justify-content: center;
    gap: 14px;
  }
  .quote-controls button {
    width: 25px;
    height: 25px;
    line-height: 20px;
    padding: 0;
    border-radius: 50%;
    font-size: 14px;
  }
  .testimonial-action {
    margin-top: 45px;
    text-align: center;
  }
  .testimonial-action .button {
    width: auto;
    border-color: var(--purple);
  }
  .landscape {
    min-height: 1293px;
    padding: 38px 0 72px;
  }
  .landscape .container {
    width: calc(100% - 48px);
    margin-inline: 24px;
  }
  .landscape h2 {
    font-size: 26px;
    line-height: 34px;
    margin-bottom: 24px;
  }
  .landscape-image img {
    height: 229px;
    object-fit: cover;
    object-position: center;
  }
  .benefits {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 23px;
  }
  .benefit-intro {
    font-size: 16px;
    line-height: 24px;
  }
  .benefit-action {
    margin-top: 52px;
  }
  .benefit-action .button {
    width: auto;
  }
  .benefit-list {
    margin-top: 70px;
  }
  .benefit-list li+li {
    margin-top: 28px;
  }
  .benefit-list h3,.benefit-list p {
    font-size: 16px;
    line-height: 22px;
  }
  .benefit-list h3 {
    font-variation-settings: 'wdth' 200,'wght' 500;
  }
  .team-teaser {
    height: 1084px;
    padding-top: 48px;
  }
  .team-teaser-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .team-teaser h2 {
    font-size: 26px;
    line-height: 34px;
    order: 0;
  }
  .team-teaser-image {
    order: 1;
    width: 100%;
    margin-top: 30px;
    border-radius: 14px;
  }
  .team-teaser-image img {
    height: 296px;
    width: 100%;
    object-fit: cover;
  }
  .team-teaser-action {
    order: 2;
    margin-top: 40px;
  }
  .team-teaser-grid>p {
    order: 3;
    margin-top: 48px;
    font-size: 18px;
    line-height: 24px;
    font-variation-settings: 'wdth' 200,'wght' 400;
  }
  .team-teaser:after {
    display: none;
  }
  .marquee {
    margin-top: 64px;
    font-size: 32px;
    line-height: 42px;
  }
  .final-cta {
    height: 968px;
    padding: 94px 24px 48px;
  }
  .cta-inner {
    width: auto;
    margin: 0;
    display: flex;
    flex-direction: column;
  }
  .final-cta h2 {
    color: var(--ink);
    font-size: 26px;
    line-height: 34px;
    margin: 0;
  }
  .cta-kicker {
    font-size: 14px;
    line-height: 18px;
    margin-top: 84px;
    max-width: 290px;
  }
  .cta-copy {
    font-size: 16px;
    line-height: 22px;
    margin-top: 44px!important;
  }
  .final-cta .button-row {
    margin-top: 154px;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .cta-bars {
    width: 345px;
    height: 345px;
    right: 24px;
    top: auto;
    bottom: 40px;
    opacity: .18;
  }
  .back-top {
    height: 125px;
  }
  .footer-inner {
    height: 841px;
    padding: 52px 24px 66px;
    display: flex;
    flex-direction: column;
    gap: 0;
    background-size: 740px auto;
    background-position: right -275px bottom -5px;
  }
  .footer-brand {
    width: 54px;
  }
  .footer-nav {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 0;
    margin-top: 64px;
  }
  .footer-nav a {
    font-size: 16px;
    line-height: 22px;
  }
  .footer-contact {
    padding: 0;
    margin-top: 76px;
  }
  .social-links {
    align-self: stretch;
    margin-top: 72px;
    gap: 28px;
    font-size: 14px;
  }
  .legal-links {
    align-self: stretch;
    margin-top: 78px;
    gap: 20px;
    font-size: 12px;
  }
  .footer-baseline {
    height: 107px;
    display: block;
    padding: 24px;
    text-align: center;
    font-size: 14px;
    line-height: 20px;
  }
  .footer-baseline:before {
    content: '';
    display: block;
  }
  .footer-baseline {
    text-wrap: balance;
  }
  .hero-loesungen {
    min-height: 508px;
  }
  .hero-leistungen {
    min-height: 558px;
  }
  .hero-resultate {
    min-height: 532px;
  }
  .hero-loesungen .hero-action,.hero-leistungen .hero-action,.hero-resultate .hero-action {
    margin-top: 40px;
  }
  .problems {
    min-height: 960px;
    padding: 48px 0 52px;
  }
  .problem-heading {
    text-align: left;
    margin-bottom: 40px;
  }
  .problem-heading>p:first-of-type {
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 20px;
  }
  .problem-heading>p:last-child {
    font-size: 14px;
    line-height: 20px;
    margin-top: 20px;
  }
  .problem-heading .outline-number {
    font-size: 300px;
    top: 5px;
    opacity: .4;
  }
  .problem-list li {
    padding-left: 36px;
    margin-bottom: 28px;
  }
  .problem-list li:before {
    width: 24px;
    height: 24px;
    font-size: 12px;
    line-height: 24px;
  }
  .problem-list h3 {
    font-size: 16px;
    line-height: 22px;
    margin: 0;
  }
  .problem-list p {
    font-size: 14px;
    line-height: 20px;
    display: none;
  }
  .problem-action {
    margin: 36px 0 0;
  }
  .problem-action .button {
    width: 100%;
  }
  .use-cases {
    min-height: 856px;
    padding: 52px 0 48px;
  }
  .use-cases h2 {
    margin-bottom: 24px;
  }
  .use-cases .container>p {
    font-size: 16px;
    line-height: 22px;
  }
  .use-case-window {
    margin: 36px 0 0 24px;
  }
  .use-case-slider {
    gap: 16px;
    padding-right: 24px;
  }
  .use-case {
    width: 260px;
  }
  .use-case>img {
    width: 260px;
    height: 196px;
    margin-bottom: 24px;
  }
  .use-case h3 {
    font-size: 16px;
    line-height: 22px;
  }
  .use-case p {
    font-size: 14px;
    line-height: 20px;
  }
  .case-controls {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: stretch;
    margin-top: 12px;
  }
  .case-controls>.button {
    white-space: normal;
    text-align: center;
  }
  .case-controls .slider-dots {
    margin-top: 12px;
  }
  .slider-arrows {
    display: none;
  }
  .one-stop {
    min-height: 1030px;
    padding: 56px 0 64px;
  }
  .one-stop h2 {
    margin-bottom: 24px;
  }
  .one-stop p:not(.eyebrow) {
    font-size: 16px;
    line-height: 22px;
  }
  .chips {
    margin: 36px 0 40px;
    gap: 12px;
  }
  .chip {
    font-size: 14px;
    line-height: 20px;
    padding: 10px 16px;
  }
  .chip.outlined {
    padding: 8px 16px;
  }
  .one-stop>.container>.button {
    width: 100%;
    font-size: 12px;
    gap: 10px;
  }
  .faq {
    min-height: 1098px;
    padding: 56px 0 72px;
  }
  .faq h2 {
    margin-bottom: 24px;
  }
  .faq summary {
    font-size: 16px;
    line-height: 22px;
    padding: 22px 0;
  }
  .faq-answer {
    font-size: 14px;
    line-height: 20px;
  }
  .faq-answer .button {
    font-size: 11px;
    white-space: normal;
  }
  .services {
    min-height: 1828px;
    padding: 52px 0 64px;
  }
  .services h2 {
    margin-bottom: 36px;
  }
  .service-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .service-card {
    padding: 32px 24px;
    border-radius: 22px;
    min-height: 0;
  }
  .service-card h3 {
    font-size: 22px;
    margin-bottom: 18px;
  }
  .service-card p {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 24px;
  }
  .service-card li {
    font-size: 14px;
    line-height: 22px;
    margin-top: 14px;
  }
  .service-number {
    font-size: 88px;
    line-height: 1.1;
  }
  .partners {
    min-height: 904px;
    padding: 72px 0;
  }
  .partners p:not(.eyebrow) {
    font-size: 16px;
    line-height: 24px;
  }
  .partners h2 {
    margin-bottom: 20px;
  }
  .simple-cards {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 40px;
  }
  .simple-card {
    padding: 28px 24px;
    border-radius: 20px;
  }
  .simple-card h3 {
    font-size: 20px;
    line-height: 26px;
  }
  .simple-card p {
    font-size: 16px!important;
    line-height: 22px!important;
  }
  .simple-card:has(.button) {
    min-height: 224px;
    padding-bottom: 28px;
  }
  .simple-card .button {
    margin-top: 32px;
    max-width: 100%;
  }
  .bottlenecks {
    min-height: 744px;
    padding: 52px 0 64px;
  }
  .bottlenecks h2 {
    margin-bottom: 40px;
  }
  .bottleneck-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .bottleneck-grid a {
    font-size: 16px;
    line-height: 22px;
    padding: 24px;
    border-radius: 18px;
  }
  .case-study {
    min-height: 1441px;
    padding: 52px 0 3px;
  }
  .case-study .eyebrow {
    font-size: 12px;
    line-height: 18px;
  }
  .case-study h2 {
    margin-bottom: 32px;
  }
  .case-images {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .case-images img {
    width: 100%;
    height: 193px;
    aspect-ratio: auto;
    border-radius: 12px;
  }
  .quote-line {
    font-size: 16px;
    line-height: 22px;
    margin-top: 32px;
    padding-left: 16px;
    border-width: 3px;
  }
  .metrics {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 36px;
  }
  .metrics strong {
    font-size: 36px;
    line-height: 44px;
  }
  .metrics p {
    font-size: 14px;
    line-height: 20px;
    margin-top: 2px;
  }
  .case-facts {
    font-size: 14px;
    line-height: 20px;
    margin-top: 36px;
  }
  .hero-kontakt {
    height: 898px;
    padding-top: 32px;
  }
  .hero-kontakt .hero-kicker {
    font-size: 12px;
    line-height: 18px;
    max-width: 290px;
  }
  .hero-kontakt h1 {
    font-size: 26px;
    line-height: 34px;
    margin-bottom: 24px;
  }
  .hero-kontakt .hero-copy {
    font-size: 16px;
    line-height: 22px;
  }
  .hero-kontakt strong {
    font-size: 14px;
    line-height: 20px;
  }
  .contact-bars {
    width: 345px;
    height: 345px;
    right: 24px;
    top: auto;
    bottom: 24px;
    opacity: .2;
  }
  .contact-options {
    min-height: 854px;
    padding: 52px 0 38px;
  }
  .contact-options .simple-cards {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 32px;
  }
  .contact-options .simple-card {
    min-height: 212px;
    padding: 24px;
  }
  .contact-options .simple-card .button {
    margin-top: 28px;
  }
  .conversation {
    min-height: 1243px;
    padding: 52px 0 64px;
  }
  .conversation h2 {
    margin-bottom: 28px!important;
  }
  .conversation-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
  }
  .conversation-copy {
    font-size: 16px;
    line-height: 24px;
  }
  .conversation-copy h3 {
    font-size: 18px;
    line-height: 24px;
    margin-top: 32px;
  }
  .conversation-copy li {
    font-size: 16px;
    line-height: 22px;
    padding: 20px 0;
  }
  .contact-portrait {
    margin-top: 32px;
    width: 100%;
  }
  .contact-portrait>img {
    width: 100%;
    height: 380px;
    object-fit: cover;
  }
  .contact-portrait figcaption {
    font-size: 14px;
    line-height: 20px;
    margin-top: 16px;
  }
  .conversation-action {
    margin-top: 36px;
  }
  .conversation-action .button {
    width: 100%;
  }
  .client-support {
    min-height: 800px;
    padding: 52px 0 32px;
  }
  .client-support h2 {
    margin-bottom: 28px;
  }
  .client-support p {
    font-size: 16px;
    line-height: 24px;
  }
  .client-support .simple-cards {
    margin-top: 40px;
  }
  .client-support .simple-card {
    min-height: 224px;
  }
  .legal-hero {
    min-height: 436px;
    padding: 32px 0 48px;
  }
  .legal-hero .eyebrow {
    font-size: 12px;
    line-height: 18px;
  }
  .legal-hero h1 {
    margin-bottom: 32px;
  }
  .legal-hero h3,.legal-body h3 {
    font-size: 18px;
    line-height: 24px;
  }
  .legal-hero p:not(.eyebrow),.legal-body p {
    font-size: 16px;
    line-height: 24px;
  }
  .legal-body {
    min-height: 1352px;
    padding: 48px 0;
  }
  .legal-body h3:not(:first-child) {
    margin-top: 24px;
  }
  .draft-hero {
    min-height: 300px;
  }
  .draft-body {
    min-height: 500px;
  }
  .not-found {
    height: 522px;
    padding: 120px 0 60px;
    background-size: 100% 100%;
    overflow: hidden;
  }
  .not-found .outline-number {
    font-size: 145px;
    top: 60px;
    opacity: .7;
  }
  .not-found .eyebrow {
    font-size: 12px;
  }
  .not-found h1 {
    font-size: 26px;
    line-height: 34px;
    margin: 36px 0 48px;
  }
  .not-found .button {
    width: 100%;
  }
  .page-404 .back-top {
    display: grid;
  }
}

@media(min-width:900px) and (max-width:1250px) {
  .header-inner {
    width: calc(100% - 80px);
  }
  .brand {
    width: 170px;
  }
  .main-nav {
    margin-left: 50px;
    gap: 24px;
  }
  .main-nav>a:not(.button) {
    font-size: 12px;
  }
  .container {
    width: calc(100% - 160px);
  }
  .hero-start .hero-grid {
    grid-template-columns: 54% 1fr;
    column-gap: 6%;
    width: calc(100% - 100px);
  }
  .hero-start .hero-copy {
    min-width: 0;
  }
  .hero-start h1 {
    font-size: 30px;
    line-height: 42px;
  }
  .hero-start .hero-copy {
    padding-top: 100px;
  }
  .team-teaser-grid {
    grid-template-columns: 1fr 42%;
    column-gap: 60px;
  }
  .footer-inner {
    padding-inline: 40px;
    grid-template-columns: 70px 1fr 170px;
    column-gap: 30px;
  }
  .footer-nav {
    gap: 20px;
  }
  .footer-nav a {
    font-size: 13px;
  }
  .cta-bars {
    width: 400px;
    opacity: .7;
  }
  .cta-inner {
    margin-left: 10%;
  }
  .contact-bars {
    width: 300px;
    opacity: .35;
  }
  .conversation-grid {
    padding-right: 0;
    column-gap: 60px;
  }
  .use-case-window {
    margin-left: 80px;
  }
}

@media(max-width:899px) {
  .main-nav>a:not(.button) {
    font-variant: normal;
  }
  .menu-toggle span {
    height: 1.5px;
  }
  .menu-toggle span:nth-child(2) {
    display: none;
  }
  .menu-toggle {
    gap: 7px;
  }
  .menu-toggle[aria-expanded=true] span:first-child {
    transform: translateY(4px) rotate(45deg);
  }
  .menu-toggle[aria-expanded=true] span:last-child {
    transform: translateY(-4px) rotate(-45deg);
  }
  .header:has(.is-open) {
    background: var(--navy);
  }
  .header:has(.is-open) .brand {
    filter: brightness(0) invert(1);
  }
  .header:has(.is-open) .menu-toggle span {
    background: white;
  }
  .main-nav.is-open {
    position: fixed;
    inset: 88px 0 0;
    width: 100%;
    height: calc(100dvh - 88px);
    background: var(--navy);
    box-shadow: none;
    color: white;
    padding: 72px 24px;
    gap: 42px;
    overflow: auto;
  }
  body:has(.main-nav.is-open) {
    overflow: hidden;
  }
  .hero-action .button {
    justify-content: flex-start;
  }
  .advantage span {
    font-variation-settings: 'wdth' 200,'wght' 400;
  }
  .advantage {
    gap: 18px;
  }
  .advantage img {
    width: 34px;
    height: 34px;
  }
  .editorial-heading {
    font-variation-settings: 'wdth' 200,'wght' 600;
  }
  .editorial-card h3 {
    font-variation-settings: 'wdth' 200,'wght' 400;
    line-height: 21px;
  }
  .editorial-card .card-background {
    object-position: center;
  }
  .editorial .slider-dots button {
    background: #cfcdcd;
  }
  .editorial .slider-dots button[aria-current=true] {
    background: var(--purple);
  }
  .problems {
    overflow: hidden;
    padding: 72px 0 50px;
  }
  .problem-heading {
    margin-bottom: 40px;
    text-align: left;
  }
  .problem-heading>p:first-of-type {
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 18px;
  }
  .problem-heading>p:last-child {
    font-size: 16px;
    line-height: 24px;
    margin-top: 20px;
  }
  .problem-heading .outline-number {
    font-size: 400px;
    top: -40px;
  }
  .problem-list {
    display: flex;
    overflow: auto;
    scroll-padding-inline: 24px;
    gap: 16px;
    margin: 0 -24px;
    padding: 0 24px;
    counter-reset: problem;
  }
  .problem-list li {
    background: white;
    border-radius: 18px;
    width: 296px;
    min-height: 376px;
    flex: none;
    margin: 0;
    padding: 76px 24px 32px;
    scroll-snap-align: start;
  }
  .problem-list li:before {
    top: 24px;
    left: 24px;
    width: 32px;
    height: 32px;
    line-height: 32px;
    font-size: 16px;
  }
  .problem-list h3 {
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 18px;
  }
  .problem-list p {
    display: block;
    font-size: 14px;
    line-height: 20px;
  }
  .problem-list p+p {
    margin-top: 18px;
  }
  .problems .slider-dots {
    margin-top: 40px;
  }
  .problems .slider-dots button {
    background: #cfcdcd;
  }
  .problems .slider-dots button[aria-current=true] {
    background: var(--purple);
  }
  .problem-action {
    margin-top: 40px;
  }
  .problem-action .button {
    width: auto;
  }
  .landscape .benefit-intro {
    min-height: 0;
  }
  .landscape .benefit-list h3 {
    font-variation-settings: 'wdth' 200,'wght' 500;
  }
  .benefit-list li+li {
    margin-top: 24px;
  }
  .team-teaser h2 {
    max-width: 330px;
  }
  .final-cta h2>span {
    display: inline;
  }
  .cta-kicker {
    font-size: 16px;
    line-height: 24px;
    font-variation-settings: 'wdth' 200,'wght' 500;
    max-width: 345px;
  }
  .final-cta .button-row {
    margin-top: 161px;
    gap: 20px;
  }
  .cta-kicker>span {
    display: block;
  }
  .cta-copy {
    font-size: 16px;
    line-height: 22px;
  }
  .partners .simple-cards {
    margin-top: 32px;
    gap: 16px;
  }
  .partners .simple-card {
    padding: 24px;
  }
  .partners .simple-card h3 {
    margin-bottom: 8px;
  }
  .partners .pill {
    margin-bottom: 16px;
  }
  .partners .simple-card p {
    font-size: 14px!important;
    line-height: 22px!important;
  }
  .partners .eyebrow {
    font-variation-settings: 'wdth' 200,'wght' 400;
  }
  .footer-nav a {
    font-size: 16px;
    line-height: 22px;
  }
  .social-links {
    font-size: 14px;
    line-height: 20px;
  }
  .legal-links {
    font-size: 12px;
    line-height: 18px;
  }
  .footer-baseline {
    font-size: 16px;
    line-height: 24px;
    padding: 30px 24px;
    text-wrap: balance;
  }
  .legal-body h3 {
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 0;
  }
  .legal-body p {
    font-size: 16px;
    line-height: 22px;
  }
}

/* Die Startseite blendet Elemente beim Scrollen ein (`.motion-repeat`, homepage.css)
   und setzt sie dabei auf opacity 1. Die Vorteile-Rotation deckt das nur ab, solange
   ihre Animation laeuft; waehrend der Startverzoegerung von 5 und 10 s lagen deshalb
   alle drei Vorteile uebereinander. Auf Mobil gehoert die Sichtbarkeit allein der Rotation. */
@media(max-width:899px) and (prefers-reduced-motion:no-preference) {
  .scroll-integrated .advantages .advantage.motion-repeat {
    opacity: 0;
    transform: none;
  }
}

@media(max-width:899px) and (prefers-reduced-motion:reduce) {
  .advantage {
    opacity: 0;
  }
  .advantage:first-child {
    opacity: 1;
  }
}

@media(max-width:374px) {
  .button {
    font-size: 12px;
    letter-spacing: .2px;
    gap: 10px;
  }
  .hero-start {
    height: auto;
    min-height: 560px;
  }
  .editorial-heading {
    font-size: 12px;
  }
  .hero-kontakt {
    height: auto;
    min-height: 898px;
  }
  .final-cta {
    height: auto;
    min-height: 1000px;
  }
  .testimonial-intro {
    font-size: 16px;
    line-height: 23px;
  }
  .quote {
    width: 260px;
  }
  .footer-nav {
    gap: 26px;
  }
  .cta-kicker {
    margin-top: 60px;
  }
  .cta-copy {
    margin-top: 32px!important;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto;
  }
  *,*:before,*:after {
    animation: none!important;
    transition: none!important;
  }
  .motion-ready [data-reveal].awaiting-reveal {
    opacity: 1;
    translate: none;
  }
}

/* /figma.css */
/* Live Figma measurements, 7 September 2026. Source frames are archived in reference/. */
/* Sticky header: live Figma 1112:40686 / 1112:34706, 8 September. */
html { scroll-padding-top: 112px; }
.header { position: fixed; --compact-height:91px; --word-height:24.862px; --claim-height:24px; --claim-gap:13px; --brand-slide:calc((var(--compact-height) - var(--word-height))/2 - 20px); transition:height .46s cubic-bezier(.22,1,.36,1); }
.header.is-scrolled { height: 91px; }
.header.is-scrolled::before { content: ''; position: absolute; inset: 0; background: rgb(242 240 240 / 50%); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); z-index: -1; }
/* Preserve the link's layout; slide only the artwork to the compact header's center. */
.header .brand-word { transform:translateY(0); transition:transform .46s cubic-bezier(.22,1,.36,1); }
.header.is-scrolled .brand-word { transform:translateY(var(--brand-slide)); }
.header .brand-claim { height:var(--claim-height); margin-top:var(--claim-gap); opacity:1; visibility:visible; transform:translateY(0); transition:opacity .18s ease,transform .3s ease,visibility 0s; }
.header.is-scrolled .brand-claim { opacity:0; visibility:hidden; transform:translateY(-6px); transition-delay:0s,0s,.18s; }
.brand-word { width: 215.974px; height: 24.862px; gap: 1.768px; }
.brand-word img:first-child { width: 36.243px; height: 23.322px; }
.brand-word img:last-child { width: 177.963px; height: 24.862px; }
.social-links a,.menu-social a { display: flex; align-items: center; gap: 12px; }
.landscape-video { display: block; width: 100%; height: 293px; object-fit: cover; }
@media(max-width:899px) {
  body { padding-top: 88px; }
  body.menu-open { overflow: hidden; }
  html { scroll-padding-top: 108px; }
  .header,.header.is-scrolled { height: 88px; position: fixed; }
  .header { --compact-height:88px; --word-height:15.339px; --claim-height:16px; --claim-gap:7px; --brand-slide:calc((var(--claim-height) + var(--claim-gap))/2); }
  .header.is-scrolled { background: transparent; }
  .header .brand-word { width: 133.253px; height: 15.339px; gap: 1.091px; }
  .header .brand-word img:first-child { width: 22.361px; height: 14.389px; }
  .header .brand-word img:last-child { width: 109.801px; height: 15.339px; }
  .header .menu-toggle { gap: 6px; transform: translateY(1px); }
  .header:has(.is-open) { background: var(--navy); }
  .header:has(.is-open)::before { display: none; }
  .landscape-video { height: 229px; }
}
.nav-arrow,.menu-meta,.menu-baseline { display: none; }
.footer-nav a,.social-links,.legal-links { font-variation-settings: 'wdth' 200,'wght' 300; }
.button svg { height: 12.728px; }
.eyebrow { font-variant: normal; text-transform: uppercase; font-weight: 400; font-variation-settings: 'wdth' 200,'wght' 400; }
.editorial-team { overflow: hidden; }
/* Wie jede andere Teaser-Karte (`.card-background`). Bis zum 19.09.2026 stand
   hier ein Ausschnitt in Prozent (208 % Breite, -76 % nach links), der die
   Gruender an den linken Kartenrand schob und rechts eine leere Wand stehen
   liess — ein Mass, das zu EINEM Kartenformat passte. `cover` haelt die Mitte
   des Bildes in der Mitte der Karte, auf jeder Breite. */
.editorial-team img { position: absolute; inset: 0; max-width: none; width: 100%; height: 100%; object-fit: cover; }
.editorial-card:after { background: linear-gradient(#000,transparent 51.923%); }
.footer-inner { background-image: url('/assets/media/figma/footer-fan.svg'); background-size: 719px 506px; background-position: right top; }
.logo-track { animation: figma-logos 18.438443s linear infinite; }
.logo-track img { width: 150px; height: 45px; }
@keyframes figma-logos { 0%,46.094% { translate: 0 0; } 100% { translate: -1474px 0; } }
.marquee>div { animation: figma-marquee 13.379797s linear infinite; }
@keyframes figma-marquee { from { translate: 955.303px 0; } to { translate: -1217px 0; } }
.conversation-copy h3 { display: none; }
.conversation-questions h3 { font: 700 20px/26px var(--body); margin-bottom: 4px; }
.conversation-questions ul { max-width: 430px; }
.conversation-questions li { border-bottom: 1px solid #d9d4d4; padding: 16px 0; font: 400 17px/24px var(--body); }
.conversation-questions li:last-child { border-bottom: 0; }
.client-support { background: #e5d9fa; }
.back-top a { font-size: 18px; }
.case-image-dots { display: none; }
@media(min-width:900px) {
  .hero:not(.hero-start) { padding-top: 181px; }
  .hero .hero-kicker { font-size: 16px; line-height: 21px; letter-spacing: 1.6px; margin-bottom: 16px!important; }
  .hero:not(.hero-start):not(.hero-kontakt) .hero-grid { grid-template-columns: 581px 1fr; }
  .hero:not(.hero-start):not(.hero-kontakt) .hero-copy { width: 587px; padding-top: 69px; }
  .hero:not(.hero-start) .hero-chevron { margin-bottom: 41px; }
  .hero-loesungen h1 { max-width: 502px; }
  .hero-leistungen h1 { max-width: 560px; }
  .hero-resultate .hero-action { margin-top: 90px; }
  .hero-leistungen .hero-action { margin-top: 40px; }
  .hero-loesungen .hero-action { margin-top: 45px; }
  .problem-list li { min-height: 132px; margin-bottom: 36px; }
  .problem-heading { margin-bottom: 147px; }
  .problem-list p { max-width: 1000px; }
  .problem-action { margin-top: 0; }
  .use-cases>div>h2 { max-width: 1000px; }
  .use-case-window { margin-top: 48px; }
  .use-case h3 { margin-top: 32px; }
  .chips { max-width: 1160px; }
  .chip:nth-child(6) { margin-right: 0; }
  .chips { display: grid; grid-template-columns: max-content max-content 1fr; justify-items: start; }
  .chip:nth-child(3) { grid-column: 3; }
  .chip:nth-child(4) { grid-column: 1; }
  .chip:nth-child(5) { grid-column: 2/4; }
  .chip:nth-child(6) { grid-column: 1/4; }
  .chip:nth-child(7) { grid-column: 1; }
  .chip:nth-child(8) { grid-column: 2; }
  .faq-list { margin-top: 0; }
  .partners h2 { max-width: 820px; }
  .partners>div>div>p { max-width: 820px; font-weight: 500; }
  .bottlenecks h2 { max-width: 960px; }
  .case-study h2 { max-width: 960px; }
  .case-images figure { height: 313px; overflow: hidden; border-radius: 14px; }
  .case-images img { height: 313px; }
  .case-images figure:first-child img { height: 988.2975px; transform: translateY(-247.3639px); }
  .team-teaser-image { position: absolute; height: 460px; }
  .team-teaser-image img { position: absolute; max-width: none; left: -9.35%; top: 0; width: 117.7%; height: 125.99%; }
  .quote-line { max-width: 1000px; }
  /* Dieselbe Flucht wie Kopfzeile, Fuss und die Sections der Startseite
     (1270 px, mindestens 85 px Rand). Vorher eingerueckt auf 1052 px. */
  .cta-inner { width: 733px; margin-left: max(85px, calc((100% - 1270px) / 2)); }
  .final-cta { padding-top: 89px; }
  .final-cta h2 { line-height: 45px; margin-bottom: 48px; }
  .cta-kicker { max-width: 572px; font-size: 18px; line-height: 26px; font-variant: normal; text-transform: none; }
  .cta-copy { max-width: 625px; line-height: 22px; margin-top: 32px; }
  .final-cta .button-row { margin-top: 63px; }
  .footer-inner { padding-bottom: 32px; }
  .footer-contact { padding-top: 57px; }
  .social-links { gap: 29px; }
  .footer-baseline { font-size: 16px; line-height: 21px; color: #942dd1; }
  .conversation-grid { grid-template-rows: auto auto auto; }
  .conversation-questions { grid-area: 2/1; margin-top: 40px; }
  .conversation-action { grid-area: 3/1; }
  .contact-portrait { grid-area: 1/2/4/3; }
  .not-found { height: 675px; padding-top: 295px; }
  .legal-hero { padding-top: 181px; }
  .legal-hero .eyebrow { font-size: 16px; line-height: 21px; letter-spacing: 1.6px; margin-bottom: 16px; }
  .legal-hero h1 { line-height: 45px; margin-bottom: 30px; }
  .legal-hero h3 { color: var(--navy); line-height: 22px; margin: 0 0 68px 2px; }
  .legal-hero p:not(.eyebrow) { margin-left: 1px; }
  .legal-hero p:nth-of-type(3),.legal-hero p:nth-of-type(5) { margin-top: 22px; }
  .legal-body>.container { width: min(1177px,calc(100% - 180px)); margin-left: max(141px,calc((100% - 1158px)/2)); }
  .not-found h1 { max-width: 550px; margin: 21px auto 40px; }
  .not-found .outline-number { top: 200px; font-size: 400px; opacity: .7; }
  .page-404 .back-top { display: grid; height: 125px; background: white; }
}
@media(max-width:899px) {
  .menu-toggle { width: 32px; padding: 0; }
  .menu-toggle span { width: 32px; height: 2px; }
  .main-nav.is-open { padding: 40px 24px 0; gap: 0; background: var(--navy) url('/assets/media/figma/footer-fan.svg') left -139px top 230px/719px 505px no-repeat; }
  .main-nav>a:not(.button) { width: 100%; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 20px 0; border: 0; box-shadow: inset 0 -1px #ffffff26; font-size: 28px; line-height: 36px; color: #f2f0f0; font-variation-settings: 'wdth' 200,'wght' 300; }
  .main-nav>a:nth-child(4) { box-shadow: none; }
  .nav-arrow { display: block; width: 20px; height: 12.728px; color: var(--purple); }
  .nav-arrow svg { width: 20px; height: 12.728px; }
  .main-nav .nav-contact { flex: none; margin: 40px 0 0; justify-content: space-between; }
  .menu-meta { display: block; width: 100%; border-top: 1px solid #ffffff26; margin-top: 24px; padding-top: 32px; font: 400 18px/24px var(--display); font-variation-settings: 'wdth' 200,'wght' 300; }
  .menu-social { display: flex; flex-direction: column; gap: 29px; }
  .menu-social span { display: flex; gap: 12px; }
  .menu-social img { width: 18px; height: 18px; }
  .menu-legal { display: flex; gap: 32px; font-size: 14px; line-height: 18px; margin-top: 32px; }
  .menu-baseline { display: block; flex: none; width: calc(100% + 48px); min-height: 107px; margin: 45px -24px 0; padding: 30px 24px; background: var(--ink); color: #942dd1; text-align: center; font: 400 16px/24px var(--display); font-variation-settings: 'wdth' 200,'wght' 300; }
  .hero:not(.hero-start) { padding: 48px 0 56px; }
  .hero:not(.hero-start) .hero-kicker { font-size: 14px; line-height: 20px; letter-spacing: 1.4px; margin-bottom: 24px; }
  .hero:not(.hero-start) .hero-copy { font-size: 16px; line-height: 24px; margin-top: 24px; }
  .hero:not(.hero-start) .hero-action { margin-top: 24px; }
  .hero-action .button { width: auto; max-width: 100%; }
  .hero-loesungen,.hero-resultate { padding-bottom: 54px!important; }
  .hero-start .hero-action .button,.hero-loesungen .hero-action .button { width: 100%; }
  .hero-kontakt { height: auto; min-height: 898px; }
  .hero-kontakt h1 { margin-bottom: 24px; }
  .hero-kontakt .hero-kicker { max-width: none; }
  .hero-kontakt .contact-bars { position: static; order: 2; width: 301px; max-width: 100%; height: auto; aspect-ratio: 301 / 298; opacity: 1; align-self: flex-start; }
  .hero-kontakt .hero-copy { order: 3; }
  .hero-kontakt strong { font: 500 18px/26px var(--display); font-variation-settings: 'wdth' 200,'wght' 500; font-variant: normal; text-transform: none; }
  .hero-kontakt .hero-copy p+p { margin-top: 24px; }
  .services { padding: 72px 0; }
  .services h2 { margin-bottom: 40px; }
  .service-grid { gap: 16px; }
  .service-card { padding: 24px; border-radius: 24px; display: flex; flex-direction: column; gap: 16px; }
  .service-number { position: static; color: var(--purple); font-size: 48px; line-height: 52px; font-variation-settings: 'wdth' 200,'wght' 300; }
  .service-card h3 { line-height: 28px; margin: 0; }
  .service-card p { font-size: 15px; line-height: 22px; margin: 0; }
  .service-card li { font-size: 14px; line-height: 20px; margin: 0; padding-left: 23px; overflow-wrap: anywhere; }
  .service-card li+li { margin-top: 10px; }
  .contact-options,.conversation,.client-support { padding: 72px 0; }
  .contact-options .simple-cards { margin-top: 40px; gap: 16px; }
  .contact-options .simple-card,.client-support .simple-card { min-height: 0; padding: 24px; }
  .contact-options .simple-card h3,.client-support .simple-card h3 { font-size: 20px; line-height: 26px; margin-bottom: 8px; }
  .contact-options .simple-card p,.client-support .simple-card p { font-size: 15px!important; line-height: 22px!important; }
  .contact-options .simple-card .button,.client-support .simple-card .button { margin-top: 24px; }
  .conversation>div>h2 { margin-bottom: 32px!important; }
  .conversation-grid { gap: 32px; }
  .conversation-copy { order: 0; }
  .contact-portrait { order: 1; margin: 0; }
  .contact-portrait>img { width: 272px; height: 345px; border-radius: 20px; }
  .contact-portrait figcaption { font-size: 15px; line-height: 22px; margin-top: 16px; }
  .contact-portrait strong { display: block; font-size: 16px; line-height: 22px; margin-bottom: 4px; }
  .contact-portrait figcaption br { display: none; }
  .conversation-questions li { font-weight: 500; }
  .conversation-questions li:not(:last-child) { padding-bottom: 15px; }
  .conversation-questions { order: 2; }
  .conversation-questions h3 { margin-bottom: 32px; }
  .conversation-action { order: 3; margin: 0; }
  .conversation-action .button { width: auto; }
  .client-support h2 { margin-bottom: 32px; }
  .client-support>div>div>p+p { margin-top: 8px; }
  .client-support .simple-cards { margin-top: 32px; gap: 16px; }
  .use-cases h2 { max-width: 310px; }
  .quote { height: 397px; min-height: 397px; border-radius: 20px; padding: 24px 18.74px; box-shadow: 0 4px 50px #00000059; }
  .quote .stars { gap: 2.1px; margin-bottom: 28.239px; }
  .quote .stars img { width: 12.6px; height: 10.761px; }
  .quote-person { left: 18.74px; top: 335px; bottom: auto; width: calc(100% - 28px); font-variation-settings: 'wdth' 200,'wght' 500; }
  .partners .eyebrow { font-size: 14px; line-height: 20px; letter-spacing: 1.4px; }
  .partners h2 { margin-bottom: 16px; }
  .partners>div>div>p { font-weight: 500; }
  .partners .simple-cards { gap: 16px; margin-top: 32px; }
  .partners .simple-card { padding: 24px; }
  .partners .simple-card p { font-size: 15px!important; }
  .partners .pill { line-height: 15px; }
  .bottlenecks { padding: 72px 0; }
  .bottleneck-grid { gap: 16px; }
  .bottleneck-grid a { height: 72px; font-size: 18px; line-height: 24px; border-radius: 16px; }
  .bottleneck-grid a span { display: none; }
  .case-study { padding: 72px 0; }
  .case-study .eyebrow { font-size: 14px; line-height: 20px; letter-spacing: 1.4px; margin-bottom: 16px; }
  .case-study h2 { margin-bottom: 40px; }
  .case-images { flex-direction: row; gap: 16px; width: calc(100% + 48px); margin: 0 -24px; padding: 0 24px; scroll-padding: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .case-images figure { flex: 0 0 300px; height: 169px; overflow: hidden; border-radius: 14px; }
  .case-images img { width: 300px; height: 169px; border-radius: 14px; }
  .case-images figure:first-child img { height: 533.618px; max-width: none; transform: translateY(-133.56px); }
  .case-image-dots { display: flex; margin: 40px 0 0; }
  .case-study .quote-line { font-size: 16px; font-weight: 500; line-height: 24px; margin-top: 40px; border-width: 6px; color: #d1c9e0; }
  .metrics { gap: 24px; margin-top: 40px; }
  .metrics strong { font-size: 40px; line-height: 48px; font-weight: 700; }
  .metrics p { font-size: 15px; line-height: 22px; margin-top: 8px; color: #ccc4db; }
  .case-facts p+p { margin-top: 0; }
  .case-facts strong { color: inherit; }
  .one-stop { min-height: 1022px; padding: 72px 0; background: #faf9f7; }
  .one-stop .eyebrow { font-size: 14px; line-height: 18px; letter-spacing: 1.4px; }
  .one-stop h2 { margin-bottom: 16px; }
  .one-stop p:not(.eyebrow) { line-height: 24px; font-weight: 500; }
  .chips { align-items: flex-start; gap: 8px; margin: 32px 0; }
  .chip { font-size: 14px; line-height: 20px; padding: 12px 20px; font-weight: 500; }
  .chip.outlined { padding: 8.5px 20px; line-height: 18px; font-weight: 700; }
  .chip.outlined:nth-child(7) { margin-top: 24px; }
  .one-stop>.container>.button { width: auto; font-size: 14px; gap: 16px; }
  .faq { min-height: 1106px; padding: 72px 0; }
  .faq h2 { margin-bottom: 32px; }
  .faq summary { padding: 24px 0; gap: 16px; align-items: flex-start; }
  .faq summary>span { width: 20px; height: 27px; margin-top: 0; }
  .faq summary>span:before,.faq summary>span:after { top: 12px; }
  .faq details { border-bottom: 0; box-shadow: inset 0 -1px #e0dee0; }
  .faq details:last-child { box-shadow: none; }
  .faq details:nth-child(5) summary { letter-spacing: -.3px; }
  .faq-answer { font-size: 15px; line-height: 22px; padding-bottom: 24px; }
  .faq details[open] summary { padding-bottom: 24px; }
  .legal-hero { padding-top: 48px; }
  .legal-hero .eyebrow { font-size: 14px; line-height: 20px; letter-spacing: 1.4px; margin-bottom: 24px; }
  .legal-hero h1 { margin-bottom: 24px; }
  .legal-hero h3 { color: var(--navy); line-height: 26px; margin-bottom: 24px; }
  .legal-hero p+p { margin-top: 0; }
  .legal-hero p:nth-of-type(3),.legal-hero p:nth-of-type(5) { margin-top: 24px; }
  .legal-body { padding: 56px 0; }
  .legal-body p { line-height: 24px; }
  .legal-body h3 { font-size: 16px; line-height: 24px; }
  .legal-body h3:not(:first-child) { margin-top: 24px; }
  .not-found { padding-top: 48px; display: flex; flex-direction: column; align-items: center; }
  .not-found .outline-number { position: static; transform: none; font-size: 150px; line-height: 199px; opacity: .7; }
  .not-found .container { margin-top: 24px; }
  .not-found .eyebrow { font-size: 14px; line-height: 20px; letter-spacing: 1.4px; margin: 0; }
  .not-found h1 { margin: 24px 0; }
  .not-found .button { width: auto; }
  .footer-inner { padding: 48px 25px 0; background-size: 719px 505px; background-position: left -139px top 414px; }
  .footer-nav { margin-top: 79px; gap: 32px; }
  .footer-nav a { font-size: 18px; line-height: 24px; }
  .footer-contact { margin-top: 80px; }
  .social-links { margin-top: 80px; gap: 29px; font-size: 18px; line-height: 24px; }
  .legal-links { margin-top: 80px; gap: 32px; font-size: 14px; line-height: 18px; }
  .footer-baseline { font-size: 16px; line-height: 21px; color: #942dd1; }
}
@media(prefers-reduced-motion:reduce) { .logo-track,.marquee>div { animation: none; translate: none; } }

/* White logo tiles inside the shared trust section. Wie viele es sind, entscheidet
   die Redaktion im CMS — deshalb wickelt die Reihe zentriert um, statt in einem
   festen Vierer-Raster zu stehen. Mit vier Logos sieht es aus wie im Entwurf:
   `flex: 1 1 176px` laesst sie bis `max-width` wachsen, und 4 x 232 + 3 x 24
   ergeben genau die 1000 px des Fensters. Ab fuenf teilen sie sich dieselbe
   Zeile, eine angebrochene letzte Zeile steht mittig statt linksbuendig. */
.trust.customer-logos {
  height: auto;
  min-height: 0;
  padding: 56px 24px;
  background: var(--navy);
  color: #f2f0f0;
}
.trust.customer-logos>p { max-width: 100%; margin: 0 auto 40px; }
.customer-logos .logo-window { max-width: 1000px; margin-inline: auto; }
.customer-logos .logo-track {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 24px;
  width: 100%;
  /* Das Laufband schob die Spur ab 900 px um 85 px ein (site.css). Als stehende
     Reihe nimmt dieser Einzug der letzten Kachel den Platz: mit fuenf Logos
     brauchte die Zeile 976 px und hatte nur 915 px. */
  padding: 0;
  animation: none;
  transform: none;
  translate: none;
}
.customer-logo {
  display: grid;
  place-items: center;
  flex: 1 1 176px;
  min-width: 0;
  max-width: 232px;
  height: 112px;
  padding: 16px;
  background: #fff;
  border-radius: 4px;
}
.customer-logos .logo-track img {
  width: 180px;
  max-width: 100%;
  height: 80px;
  object-fit: contain;
}
@media(max-width:600px) {
  .trust.customer-logos { padding: 40px 24px; }
  .trust.customer-logos>p { margin-bottom: 32px; }
  .customer-logos .logo-window { max-width: 420px; }
  .customer-logos .logo-track { gap: 16px; }
  /* Zwei je Zeile wie im Mobil-Entwurf: der Grundwert 176px passt bei 342px
     Inhaltsbreite nur einmal nebeneinander. Die halbe Luecke geht ab. */
  .customer-logo { flex-basis: calc(50% - 8px); max-width: calc(50% - 8px); height: 96px; padding: 12px; }
  .customer-logos .logo-track img { height: 64px; }
}

/* Keep the two-column hero inside tablet and small laptop viewports. */
@media(min-width:900px) and (max-width:1250px) {
  .hero:not(.hero-start):not(.hero-kontakt) .hero-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .hero:not(.hero-start):not(.hero-kontakt) .hero-copy { width:auto; min-width:0; }
  .hero:not(.hero-start):not(.hero-kontakt) h1 { overflow-wrap:anywhere; hyphens:auto; }
  /* Hier ruecken Hero und Sections der Startseite auf 50 px (homepage.css). */
  .cta-inner { margin-left: 50px; }
}
/* Rechtstext (AGB, Datenschutz): aus Markdown im CMS gerendert */
.legal-text { max-width: 820px; }
.legal-text h2 { font-size: 28px; line-height: 36px; margin: 0 0 16px; }
.legal-body .legal-text h3, .legal-body .legal-text h3:not(:first-child) { font-size: 20px; line-height: 28px; margin: 40px 0 12px; }
.legal-text h4, .legal-text h5 { font-size: 16px; line-height: 24px; margin: 24px 0 8px; }
.legal-text p, .legal-text li { line-height: 24px; }
.legal-text p + p { margin-top: 12px; }
.legal-text :is(ul, ol) { margin: 12px 0; padding-left: 24px; display: grid; gap: 6px; }
.legal-text ul { list-style: disc; }
.legal-text ol { list-style: decimal; }
.legal-text hr { border: 0; border-top: 1px solid currentColor; opacity: .2; margin: 32px 0; }
.legal-text a { text-decoration: underline; }

/* Rechtsseiten (25.09.2026): der Verlauf ist ein Kopfband, kein halber
   Bildschirm. Datenschutz und AGB tragen darin nur ihre Überschrift; eine
   Mindesthöhe liess darunter eine leere Verlaufsfläche von 400 px stehen.
   Das Impressum hat Inhalt im Kopf und wächst mit ihm. */
.legal-hero { min-height: 0; padding: 184px 0 56px; }
.legal-hero h1:last-child { margin-bottom: 0; }
.legal-body { min-height: 0; padding-top: 56px; }
@media (max-width: 899px) {
  .legal-hero { padding: 48px 0 32px; }
  .legal-body { padding-top: 32px; }
}

/* CCM19-Cookie-Liste unter der Datenschutzerklärung: Abstand zum Rechtstext,
   Tabellen in voller Textbreite. */
.ccm-cookie-declaration { margin-top: 48px; }
.ccm-cookie-declaration table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ccm-cookie-declaration :is(th, td) { text-align: left; vertical-align: top; padding: 8px 12px 8px 0; border-bottom: 1px solid rgba(0,0,0,.12); }

/* Sprachwahl im Kopf. Sichtbar ist nur die andere Sprache („EN“ auf deutschen,
   „DE“ auf englischen Seiten): neben Navigation und Kontaktknopf bleiben im
   Entwurf rund 100 px, ein „DE / EN“ drückte den Knopf in zwei Zeilen. Die
   aktive Sprache bleibt als Link im Markup und ist nur ausgeblendet. Mobil
   sitzt die Wahl links vom Menüknopf und bleibt bei offenem Menü erreichbar. */
.sprachwahl { display: flex; flex: none; margin: 34px 0 0 24px; font: 400 14px/21px var(--display); font-variation-settings: 'wdth' 200,'wght' 400; letter-spacing: 1.4px; }
.sprachwahl a { display: block; padding: 0 2px; transition: color .2s; }
.sprachwahl a:hover, .sprachwahl a:focus-visible { color: var(--purple); }
.sprachwahl a[aria-current] { display: none; }
/* Unter 1251 px wird es schon ohne Sprachwahl eng; damit „Kontakt“ im Knopf
   auf einer Zeile bleibt, rücken Logo, Links und Knopf etwas zusammen. */
@media(min-width:1024px) and (max-width:1250px) {
  .main-nav { margin-left: 24px; gap: 16px; }
  .main-nav > a:not(.button) { letter-spacing: .8px; }
  .sprachwahl { margin-left: 16px; font-size: 12px; }
}
@media(min-width:900px) and (max-width:1023px) {
  /* .header-inner davor: typography.css lädt später und setzt hier eigene Werte. */
  .header-inner .main-nav { margin-left: 12px; gap: 10px; }
  .header-inner .main-nav > a:not(.button) { letter-spacing: .4px; }
  .sprachwahl { margin-left: 10px; font-size: 12px; }
}
/* Zwischen 1251 und 1439 px reichte der Platz schon ohne Sprachwahl nicht:
   „Kontakt“ brach im Knopf um. Der Abstand zum Logo wächst jetzt mit der Breite
   bis auf die 123 px des Entwurfs, die Navigation steht etwas kleiner — wie
   darunter ab 1250 px, dort mit 12 px. */
@media(min-width:1251px) and (max-width:1439px) {
  .main-nav { margin-left: max(40px, calc(100vw - 1317px)); gap: 28px; }
  .main-nav > a:not(.button) { font-size: 14px; letter-spacing: 1.4px; }
}
@media(max-width:899px) {
  .sprachwahl { order: 1; margin: 0 16px 0 auto; font-size: 14px; }
  .sprachwahl a { padding: 12px 6px; }
  .menu-toggle { order: 2; }
  .header:has(.is-open) .sprachwahl a { color: #f2f0f0; }
}

/* CCM19-Cookie-Icon unten links ohne Schatten. CCM19 setzt den box-shadow
   über die Einblend-Animation `ccm-icon-show--link` (fill forwards) — gegen
   einen Animationswert hilft nur `!important`. Im Fokus kommt ein drop-shadow
   samt `outline: none` bis (0,5,0) dazu; das Stylesheet lädt nach unserem,
   daher hängt die Überschreibung am eigenen `#top` (body). Der Fokus bekommt
   die Kontur der übrigen Seite zurück, sonst bliebe er ohne Markierung. */
#top .ccm-root .ccm-settings-summoner--link { box-shadow: none !important; filter: none; }
#top .ccm-root .ccm-settings-summoner--link:focus-visible { outline: 2px solid var(--orange); outline-offset: 6px; }

/* Mobil wie Desktop: Ist die orange Leiste (.sticky-bottom) eingeblendet, sitzt
   das Cookie-Icon über ihr statt auf ihrem Text. Die Höhe setzt
   sticky-bottom.js je Umbruch als --sticky-bottom-height. */
#top .ccm-root .ccm-settings-summoner { transition: bottom .3s cubic-bezier(.22,1,.36,1); }
#top:has(.sticky-bottom.is-visible) .ccm-root .ccm-settings-summoner { bottom: calc(var(--sticky-bottom-height, 64px) + 12px); }

/* CCM19-Banner im Entwurf „Cookie-Banner · Consent“ (Figma 1868:16526).
   Das Markup liefert CCM19; hier wird nur umgestaltet. Titel, Einleitung,
   Zwecke und Knopfbeschriftungen stehen in der CCM19-Verwaltung (E-Recht 24),
   nicht hier. Die Reiter des Entwurfs gibt es in CCM19 nicht; „Details“
   erreicht man über „Einstellungen“ im Fuß.
   CCM19 setzt alles unter `.ccm-root *` zurück und lädt nach uns — die Regeln
   hängen deshalb an zwei IDs (#top = body, #ccm-widget).
   Aufbau: .ccm-modal--body wird aufgelöst (display: contents), damit Fuß und
   Knöpfe wie im Entwurf in einer gemeinsamen Zeile stehen. */
#top #ccm-widget.ccm-show::before { content: ''; position: fixed; inset: 0; background: rgb(13 4 6 / .6); }
#top #ccm-widget .ccm-modal-inner {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); align-content: start;
  position: fixed; top: 50%; right: auto; bottom: auto; left: 50%; transform: translate(-50%, -50%);
  width: min(880px, calc(100vw - 80px)); height: auto; max-width: none; max-height: calc(100dvh - 48px);
  overflow-y: auto; overscroll-behavior: contain;
  background: #fff; border: 0; box-shadow: 0 24px 64px rgb(13 4 6 / .24);
  font: 400 14px/1.5 var(--body); color: #0d0406;
}
#top #ccm-widget .ccm-modal-inner > * { width: auto; max-width: none; }
#top #ccm-widget .ccm-modal--header {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 16px;
  min-height: 96px; margin: 0; padding: 20px 32px; background: #fff; border-bottom: 1px solid #e8e6e6;
}
/* Wortmarke in Dunkel aus den beiden Teilen der Kopfzeile (X + CLRTD). */
#top #ccm-widget .ccm-modal--header::before {
  content: ''; flex: none; width: 89.4px; height: 10.3px; margin-left: 15px; background: #0d0406;
  -webkit-mask: url('/assets/media/start/wortmarke-b.svg') 0 50% / 15px 9.65px no-repeat, url('/assets/media/start/wortmarke-a.svg') 100% 50% / 73.7px 10.3px no-repeat;
  mask: url('/assets/media/start/wortmarke-b.svg') 0 50% / 15px 9.65px no-repeat, url('/assets/media/start/wortmarke-a.svg') 100% 50% / 73.7px 10.3px no-repeat;
}
#top #ccm-widget .ccm-modal--header::after {
  content: 'Cookie-Einstellungen'; order: 1; margin-left: auto;
  font: 600 14px/1 var(--display); font-variation-settings: 'wdth' 200,'wght' 600; letter-spacing: .28px; color: #6b6767;
}
#top #ccm-widget[lang^="en"] .ccm-modal--header::after { content: 'Cookie settings'; }
#top #ccm-widget .ccm-widget--logo { display: none; }
/* Keine eigene Sprachwahl: CCM19 folgt der Seitensprache (<html lang>), und die
   Seite hat ihre Sprachwahl im Kopf. Der Entwurf zeigt keine. */
#top #ccm-widget .ccm-widget--language-switch { display: none; }
#top #ccm-widget .ccm-dismiss-button { order: 2; position: static; margin: 0; }

#top #ccm-widget .ccm-modal--body { display: contents; }
#top #ccm-widget .ccm-widget--text { grid-column: 1 / -1; min-height: 0; margin: 0; padding: 28px 32px; }
#top #ccm-widget .ccm-widget--text::after { content: none; }
#top #ccm-widget .ccm-widget--text .ccm-inner-overflow { padding: 0; }
#top #ccm-widget .ccm-widget--title {
  margin: 0 0 12px; font: 500 22px/1.28 var(--display); font-variation-settings: 'wdth' 200,'wght' 500;
  letter-spacing: -.22px; color: #0d0406;
}
#top #ccm-widget .ccm-widget--introduction, #top #ccm-widget .ccm-widget--introduction .ccm--p { margin: 0; font: 400 14px/1.5 var(--body); color: #6b6767; }

/* Zwecke als Kacheln mit Schalter (DS/Schalter 1869:8062): Aus #b3afaf,
   An #7f27ff, Gesperrt #6b6767 — eckig wie im Entwurf. */
#top #ccm-widget .ccm-widget--purposes {
  grid-column: 1 / -1; display: grid; justify-content: stretch; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  margin: 0; padding: 0; border-top: 1px solid #e8e6e6;
}
#top #ccm-widget .ccm-widget--purpose { display: block; position: relative; margin: 0; padding: 20px; font-size: 0; }
#top #ccm-widget .ccm-widget--purpose + .ccm-widget--purpose { border-left: 1px solid #e8e6e6; }
#top #ccm-widget .ccm-widget--purpose .ccm-info-button { display: none; }
#top #ccm-widget .ccm-widget--purpose input + label {
  display: flex; align-items: center; max-width: none; min-height: 26px; margin: 0; padding: 0 56px 0 0;
  font: 500 16px/1.6 var(--body); color: #0d0406;
}
#top #ccm-widget .ccm-widget--purpose input + label::before {
  content: ''; display: block; position: absolute; top: 1px; right: 0; left: auto; bottom: auto;
  width: 44px; height: 24px; background: #b3afaf; border: 0; border-radius: 0; transition: background-color .2s;
}
#top #ccm-widget .ccm-widget--purpose input + label::after {
  content: ''; display: block; position: absolute; top: 4px; right: 23px; left: auto; bottom: auto;
  width: 18px; height: 18px; font-size: 0; background: #fff; border: 0; border-radius: 0; box-shadow: none; transition: right .2s;
}
#top #ccm-widget .ccm-widget--purpose input:checked + label::before { background: #7f27ff; }
#top #ccm-widget .ccm-widget--purpose input:checked + label::after { right: 3px; background: #fff; }
#top #ccm-widget .ccm-widget--purpose input:disabled + label::before { background: #6b6767; }
#top #ccm-widget .ccm-widget--purpose input:focus + label::before,
#top #ccm-widget .ccm-widget--purpose input:focus + label::after { box-shadow: none; }
#top #ccm-widget .ccm-widget--purpose input:focus-visible + label::before,
#top #ccm-widget .ccm-widget--purpose label:focus-visible::before { outline: 2px solid #7f27ff; outline-offset: 2px; }
#top #ccm-widget .ccm-widget--purpose label:focus { outline: 0; }
#top #ccm-widget .ccm-widget--purpose.mandatory::after {
  content: 'Immer aktiv'; display: block; margin-top: 10px; font: 400 12px/1.4 var(--body); color: #b3afaf;
}
#top #ccm-widget[lang^="en"] .ccm-widget--purpose.mandatory::after { content: 'Always active'; }

/* Aktionen: Fuß links, Knöpfe rechts, gemeinsame Fläche (DS/Button 1724:422). */
#top #ccm-widget .ccm-widget--buttons {
  grid-column: 2; grid-row: 4; align-self: stretch; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px;
  margin: 0; padding: 20px 32px 20px 12px; background: #f2f0f0; border-top: 1px solid #e8e6e6;
}
#top #ccm-widget .ccm-widget--buttons button {
  flex: none; min-height: 48px; margin: 0; padding: 13px 14px;
  font: 400 14px/1.3 var(--display); font-variation-settings: 'wdth' 200,'wght' 400; letter-spacing: 1.4px;
  text-transform: none; text-shadow: none; white-space: nowrap;
  color: #7f27ff; background: #fff; border: 2px solid #7f27ff; border-radius: 0; box-shadow: none; outline: 0;
  transition: color .22s, background-color .22s, border-color .22s;
}
#top #ccm-widget .ccm-widget--buttons button:hover { color: #fff; background: #7f27ff; border-color: #7f27ff; }
#top #ccm-widget .ccm-widget--buttons button.ccm--button-primary { color: #fff; background: #7f27ff; }
#top #ccm-widget .ccm-widget--buttons button.ccm--button-primary:hover { background: var(--navy); border-color: var(--navy); }
#top #ccm-widget .ccm-widget--buttons button:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

#top #ccm-widget .ccm-modal--footer {
  grid-column: 1; grid-row: 4; align-self: stretch; display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-start; gap: 4px;
  margin: 0; padding: 20px 0 20px 32px; background: #f2f0f0; border-top: 1px solid #e8e6e6;
  font: 400 12px/1.4 var(--body); color: #6b6767;
}
#top #ccm-widget .ccm-modal--footer > * { margin: 0; }
#top #ccm-widget .ccm-link-container { display: flex; flex-wrap: nowrap; font-size: inherit; white-space: nowrap; }
#top #ccm-widget .ccm-link-container > a { margin: 0; }
#top #ccm-widget .ccm-link-container > a::before { content: none; }
#top #ccm-widget .ccm-link-container a:is(:link, :visited) { font: inherit; color: #6b6767; text-decoration: none; }
#top #ccm-widget .ccm-link-container a:hover { color: #0d0406; text-decoration: underline; }
#top #ccm-widget .ccm-link-container > a + a::before { content: '·'; display: inline; position: static; width: auto; height: auto; margin: 0 6px; background: none; }
#top #ccm-widget .ccm-powered-by, #top #ccm-widget .ccm-powered-by a:is(:link, :visited) { font: 400 11px/1.4 var(--body); color: #b3afaf; text-decoration: none; }

@media (max-width: 899px) {
  /* Tablet 768 (1868:16657): Karte mit 40 px Rand, Zwecke 2 × 2, drei Knöpfe
     in einer Reihe, Fuß darunter. */
  #top #ccm-widget .ccm-modal-inner { grid-template-columns: minmax(0, 1fr); width: calc(100vw - 80px); }
  #top #ccm-widget .ccm-widget--purposes { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #top #ccm-widget .ccm-widget--purpose:nth-child(odd) { border-left: 0; }
  #top #ccm-widget .ccm-widget--purpose:nth-child(n+3) { border-top: 1px solid #e8e6e6; }
  #top #ccm-widget .ccm-widget--buttons {
    grid-column: 1; grid-row: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
    padding: 21px 32px 0;
  }
  #top #ccm-widget .ccm-widget--buttons button { width: 100%; min-width: 0; max-width: none; white-space: normal; }
  #top #ccm-widget .ccm-modal--footer { grid-column: 1; grid-row: auto; padding: 12px 32px 20px; border-top: 0; }
}
@media (max-width: 599px) {
  /* Mobil 390 (1868:16760): Blatt am unteren Rand, darüber bleibt der Kopf der Seite sichtbar. */
  #top #ccm-widget .ccm-modal-inner {
    top: auto; right: 0; bottom: 0; left: 0; transform: none;
    width: 100%; max-height: calc(100dvh - 88px); box-shadow: none;
  }
  #top #ccm-widget .ccm-modal--header { min-height: 77px; gap: 12px; padding: 16px 20px; }
  #top #ccm-widget .ccm-modal--header::before {
    width: 71.5px; height: 8.23px; margin-left: 12px;
    -webkit-mask-size: 12px 7.72px, 58.9px 8.23px; mask-size: 12px 7.72px, 58.9px 8.23px;
  }
  #top #ccm-widget .ccm-widget--text { padding: 20px; }
  #top #ccm-widget .ccm-widget--purposes { grid-template-columns: minmax(0, 1fr); }
  #top #ccm-widget .ccm-widget--purpose { padding: 14px 20px; }
  #top #ccm-widget .ccm-widget--purpose + .ccm-widget--purpose { border-left: 0; border-top: 1px solid #e8e6e6; }
  #top #ccm-widget .ccm-widget--purpose.mandatory::after { content: none; }
  #top #ccm-widget .ccm-widget--buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; padding: 17px 20px 0; }
  #top #ccm-widget .ccm-widget--buttons button { min-height: 38px; padding: 8px; font-size: 13px; }
  #top #ccm-widget .ccm-widget--buttons button.ccm--button-primary { order: -1; grid-column: 1 / -1; min-height: 48px; }
  #top #ccm-widget .ccm-widget--buttons button.ccm--decline-cookies { order: 1; }
  #top #ccm-widget .ccm-modal--footer { align-items: center; padding: 12px 20px 16px; }
}

/* /assets/motion/balken.css */
/* Ported from the SVG/CSP fix (0d39e1f); external CSS controls the inline paths. */
.balken-chevron .bar {
  transform-box: fill-box; transform-origin: 50% 100%;
  animation: balken-reveal 5s cubic-bezier(.22,.85,.34,1) infinite;
}
/* Ausserhalb des Fensters steht der Faecher (ambient.js setzt die Klasse). */
.balken-chevron.is-balken-ruhend .bar { animation-play-state: paused; }
/* Von innen nach aussen: der kleinste Balken (bar-12) startet sofort, jeder
   groessere 0,1 s spaeter. */
.balken-chevron .bar-0  { animation-delay: 1.2s; }
.balken-chevron .bar-1  { animation-delay: 1.1s; }
.balken-chevron .bar-2  { animation-delay: 1s; }
.balken-chevron .bar-3  { animation-delay: .9s; }
.balken-chevron .bar-4  { animation-delay: .8s; }
.balken-chevron .bar-5  { animation-delay: .7s; }
.balken-chevron .bar-6  { animation-delay: .6s; }
.balken-chevron .bar-7  { animation-delay: .5s; }
.balken-chevron .bar-8  { animation-delay: .4s; }
.balken-chevron .bar-9  { animation-delay: .3s; }
.balken-chevron .bar-10 { animation-delay: .2s; }
.balken-chevron .bar-11 { animation-delay: .1s; }
.balken-chevron .bar-12 { animation-delay: 0s; }
@keyframes balken-reveal {
  0%   { transform: scaleY(0)    translateY(6%); }
  10%  { transform: scaleY(1.1)  translateY(-1.8%); }
  16%  { transform: scaleY(0.96) translateY(0.6%); }
  22%  { transform: scaleY(1.02) translateY(-0.2%); }
  27%  { transform: scaleY(1)    translateY(0%); }
  78%  { transform: scaleY(1)    translateY(0%); }
  88%  { transform: scaleY(0.04) translateY(4.5%); }
  100% { transform: scaleY(0)    translateY(6%); }
}
/* Wer Bewegung abbestellt hat, bekommt den Faecher stehend — sichtbar bleibt er. */
@media (min-width: 600px) and (max-width: 1199px) {
  .balken-chevron { display: none; }
  .balken-chevron .bar { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .balken-chevron .bar { animation: none; transform: none; }
}

/* /assets/motion/ambient.css */
/* Move only the shader; the text and dotted grid keep their exact position. */
.hero-start{isolation:isolate;overflow:hidden;background-image:none}
.hero-start::before,.hero-start::after{content:'';position:absolute;pointer-events:none}
.hero-start::before{
 inset:-4%;z-index:-2;
 background:url('/assets/media/start/hero-shader.webp') center/100% 100% no-repeat;
 animation:hero-shader-drift 16s ease-in-out infinite alternate paused;
}
.hero-start::after{
 inset:0;z-index:-1;
 background:url('/assets/media/start/raster-hero.webp') 270px top/auto 624px no-repeat;
}
.hero-start.is-ambient-visible::before{animation-play-state:running}
@keyframes hero-shader-drift{
 from{transform:translate(-.8%,.3%) scale(1)}
 to{transform:translate(.8%,-.3%) scale(1.035)}
}

/* Original artwork follows the mouse; individual lines gently fan apart. */
.footer-inner{background-image:none;isolation:isolate;overflow:hidden}
.footer-inner>:not(.footer-lines){position:relative;z-index:1}
.footer-lines{
 position:absolute;right:0;top:0;width:719px;height:506px;z-index:0;pointer-events:none;
 transform-origin:75% 45%;
 transform:translate(calc(var(--footer-x,0) * 22px),calc(var(--footer-y,0) * 14px)) rotate(calc(var(--footer-x,0) * 1.5deg));
}
.footer-lines path{
 fill:none;stroke:#f2490c;stroke-opacity:.5;stroke-width:1;stroke-miterlimit:10;
 transform-box:view-box;transform-origin:100% 0;
 transform:rotate(calc((var(--line-index,6) - 6) * var(--footer-x,0) * .35deg)) translateY(calc((var(--line-index,6) - 6) * var(--footer-y,0) * .65px));
}
@media(max-width:899px){
 .hero-start::after{display:none}
 .footer-lines{left:-139px;right:auto;top:414px;height:505px}
}
@media(prefers-reduced-motion:reduce){
 .hero-start::before{animation:none;transform:none}
 .footer-lines,.footer-lines path{transform:none}
}

/* /typography.css */
/* Figma 877:1809 and sibling 768px screens. Website only; no calculator styles.
   The established desktop composition starts at 900px, phones end at 599px. */
@media (min-width:600px) and (max-width:899px) {
  body:is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) { padding-top:104px; font-size:18px; line-height:26px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) { --tablet-gutter:48px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) :is(.container,.wide-container,.home-content),
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .hero-start .hero-grid,
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .landscape>.container {
    width:calc(100% - 96px); max-width:none; margin-inline:48px;
  }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) :is(h1,h2),
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .hero :is(h1,h2),
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) :is(.hero-titel,.company-team h2,.company-roots h2,.final-cta h2,
    .services-intro h2,.element-heading h2,.service-stack-intro h2) {
    font-size:34px; line-height:45px; max-width:none;
  }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .eyebrow { font-size:14px; line-height:20px; letter-spacing:1.4px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .button { width:fit-content; min-height:44px; flex:none; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .button-row { flex-direction:row; flex-wrap:wrap; gap:16px; }

  /* Header and the independent tablet menu, Figma 877:1810 / 910:2668. */
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .header,
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .header.is-scrolled { height:104px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .header {
    --compact-height:104px; --word-height:22.1px;
    --claim-height:20px; --claim-gap:10px; --brand-slide:15px;
  }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .header-inner { width:calc(100% - 96px); margin-inline:48px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .brand { width:192px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .header .brand-word { width:192px; height:22.1px; gap:1.57px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .header .brand-word img:first-child { width:32.22px; height:20.74px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .header .brand-word img:last-child { width:158.21px; height:22.1px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .brand-claim { width:150px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .menu-toggle,
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .menu-toggle span { width:40px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .main-nav { top:104px; left:0; width:100%; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .main-nav.is-open {
    padding:56px 48px 56px; min-height:calc(100dvh - 104px);
    max-height:calc(100dvh - 104px); overflow-y:auto;
    background-position:right bottom; background-size:768px 540px;
  }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .main-nav>a:not(.button) { font-size:32px; line-height:42px; padding:24px 0; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .main-nav .nav-contact { width:fit-content; margin-top:48px; gap:16px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .menu-meta { margin-top:0; padding-top:40px; font-size:20px; line-height:26px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .menu-social { gap:27px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .menu-legal { font-size:16px; line-height:20px; margin-top:40px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .menu-baseline { display:none; }

  /* Headings and copy use the tablet column, not a stretched phone layout. */
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .hero { padding:64px 0 80px; min-height:0; height:auto; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .hero-start { padding-top:64px; min-height:594px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .hero .hero-kicker { margin-bottom:32px; font-size:16px; line-height:22px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .hero-copy { margin-top:32px; font-size:18px; line-height:26px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .hero-copy p { font-size:18px; line-height:26px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .hero .text-link { margin-top:24px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .hero .hero-action { margin-top:32px; width:auto; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .hero-action .button { width:fit-content; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .hero-kontakt .hero-copy { order:2; }

  /* Homepage: two cards in view, broader visuals, two-column benefits. */
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .advantages { height:112px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .advantages .wide-container { padding-block:38px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .advantage { inset:38px 0; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .advantage span { font-size:16px; line-height:22px; max-width:none; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .editorial { height:auto; min-height:688px; padding-block:64px 72px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .editorial-heading { font-size:18px; line-height:26px; margin-bottom:38px; white-space:normal; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .editorial-slider {
    gap:24px; margin-inline:-48px; padding-inline:48px; scroll-padding-inline:48px;
  }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .editorial-card { width:300px; min-height:440px; height:auto; padding:24px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .editorial-card :is(.card-label,h3) { font-size:18px; line-height:24px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .editorial-card p { font-size:16px; line-height:22px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .editorial .slider-dots { margin-top:40px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .trust.customer-logos { padding:56px 48px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .trust>p { width:100%; max-width:672px; font-size:16px; line-height:24px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .landscape { min-height:0; padding:80px 0; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .landscape h2 { margin-bottom:48px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) :is(.landscape-video,.landscape-image img) { height:auto; aspect-ratio:672/446; object-fit:cover; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .benefits { margin-top:48px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .benefit-intro { font-size:18px; line-height:26px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .benefit-action { margin-top:32px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .benefit-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; margin-top:40px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .benefit-list li+li { margin-top:0; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .benefit-list :is(h3,p) { font-size:16px; line-height:23px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .team-teaser { height:auto; padding-block:72px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .team-teaser-image { margin-top:40px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .team-teaser-image img { height:auto; aspect-ratio:672/480; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .team-teaser-grid>p { font-size:20px; line-height:28px; margin-top:40px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .services-section,
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .method-section { padding-block:80px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .method-steps { grid-template-columns:1fr; gap:32px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .method-chevron { display:none; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .method-step { padding-block:24px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .method-step>div>p:last-child { font-size:18px; line-height:26px; max-width:none; }

  /* Shared proof carousel keeps its approved interaction and scroll fan. */
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .testimonials { height:auto; min-height:0; padding:64px 0 80px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .testimonial-intro { max-width:none; font-size:18px; line-height:26px; margin-top:32px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .testimonial-action { margin-top:40px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .karussell { margin-top:48px; }

  /* Solutions and services retain their later, approved scroll components. */
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) :is(.use-cases,.one-stop,.faq,.services,.partners,.bottlenecks,.case-study) {
    min-height:0; height:auto; padding-block:80px;
  }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .use-cases h2 { max-width:none; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .use-case-window { margin-top:48px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .use-case-slider { padding-inline:48px; scroll-padding-inline:48px; gap:24px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .use-case { flex-basis:300px; width:300px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .use-case img { width:300px; height:160px; object-fit:cover; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .use-case :is(h3,p) { max-width:none; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .service-grid { display:grid; grid-template-columns:1fr; gap:24px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .services .service-card { width:100%; min-height:348px; padding:32px; gap:24px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .services .service-number { font-size:56px; line-height:64px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .services .service-card h3 { font-size:24px; line-height:31px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .services .service-card :is(p,li) { font-size:18px; line-height:26px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .partners .simple-cards { gap:24px; margin-top:40px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .partners .simple-card { padding:32px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .faq h2 { margin-bottom:40px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .faq :is(summary,.faq-answer) { font-size:18px; line-height:26px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .case-images { margin-inline:-48px; width:calc(100% + 96px); padding-inline:48px; scroll-padding-inline:48px; gap:24px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .case-images figure { flex-basis:344px; width:344px; height:253px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .case-images img { width:344px; height:253px; object-fit:cover; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .case-images figure:first-child img { height:253px; transform:none; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .case-study .quote-line { font-size:18px; line-height:28px; margin-top:48px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .metrics { gap:32px; margin-top:48px; }

  /* Contact: wide portrait and full-width questions, Figma 900:10403. */
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) :is(.contact-options,.conversation,.client-support) { height:auto; min-height:0; padding-block:80px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) :is(.contact-options,.client-support) .simple-cards { gap:24px; margin-top:40px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) :is(.contact-options,.client-support) .simple-card { padding:32px 48px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) :is(.contact-options,.client-support) .simple-card p { font-size:18px!important; line-height:26px!important; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .conversation-grid { gap:48px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .conversation-copy { font-size:18px; line-height:26px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .contact-portrait { width:100%; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .contact-portrait>img { width:100%; height:auto; aspect-ratio:672/460; object-fit:cover; object-position:center 35%; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .conversation-questions ul { max-width:none; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .conversation-questions h3 { font-size:24px; line-height:32px; margin-bottom:32px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .conversation-questions li { font-size:18px; line-height:26px; }

  /* Company: reuse the measured column without changing the canvas timeline. */
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere).page-unternehmen .scrollszene-schritt.schritt-eins { padding:64px 48px 72px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere).page-unternehmen .hero-raster { gap:0; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere).page-unternehmen .hero-absatz { font-size:18px; line-height:26px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere).page-unternehmen .hero-rechts { width:100%; max-width:100%; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere).page-unternehmen .page .sec.scrollszene-ausklang>.wrap { width:calc(100% - 96px); }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .scrollszene-panel { padding:40px 48px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) :is(.company-method,.company-team,.company-roots) { min-height:0; padding-block:80px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .method-grid { margin-block:48px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .method-copy .button { width:fit-content; min-height:44px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) :is(.people-grid,.company-images) { margin-inline:-48px; padding-inline:48px; scroll-padding-inline:48px; gap:24px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .people-grid>figure { flex-basis:280px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .person-image { height:320px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .company-team .company-copy { margin:80px 0 0; font-size:18px; line-height:28px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .company-images figure { flex-basis:324px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .company-images img { width:324px; height:184px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .company-roots .company-copy { margin:48px 0 0; font-size:18px; line-height:26px; }

  /* Compact CTA: no empty space reserved for the deliberately removed bars. */
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .final-cta { height:auto; min-height:0; padding:80px 48px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .cta-inner { width:100%; max-width:none; margin:0; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .cta-kicker { max-width:none; margin-top:40px; font-size:16px; line-height:24px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .cta-copy { margin-top:32px!important; font-size:18px; line-height:26px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .final-cta .button-row { margin-top:40px; flex-direction:row; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .legal-hero { padding-block:80px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .legal-body { padding-block:80px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .legal-body :is(p,h3) { font-size:18px; line-height:28px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .not-found { padding-block:64px 80px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .not-found .outline-number { font-size:173px; line-height:228px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .not-found .container { margin-top:24px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .not-found h1 { margin-block:32px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .back-top { height:140px; }

  /* Footer 884:1896: navigation and contact in parallel columns. */
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .footer-inner {
    height:760px; padding:48px 48px 96px; display:grid;
    grid-template-columns:55.2% 44.8%;
    grid-template-rows:48px 84px 44px 42px auto 1fr 24px;
    gap:0; background-size:768px 550px; background-position:right bottom;
  }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .footer-brand { grid-area:1/1; width:70px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .footer-nav { grid-area:3/1/6/2; margin:0; padding:0; gap:27px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .footer-nav a { font-size:20px; line-height:23px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .footer-contact { grid-area:3/2; margin:0; padding:0; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .social-links { grid-area:5/2; margin:0; gap:23px; align-self:start; font-size:18px; line-height:24px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .legal-links { grid-area:7/1/8/3; margin:0; gap:56px; font-size:16px; line-height:24px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .footer-lines { top:auto; bottom:0; left:0; right:auto; width:100%; height:550px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .footer-baseline { height:120px; padding:24px 48px; display:grid; place-content:center; font-size:20px; line-height:26px; }
  :is(.page-start,.page-loesungen,.page-leistungen,.page-resultate,.page-unternehmen,.page-kontakt,.page-impressum,.page-datenschutz,.page-agb,.page-404,.page-resultate-suprima,.page-resultate-bluesphere) .footer-baseline::before { display:none; }
}

.legal-body .legal-text h3 { font-size:20px; line-height:28px; }

/* Shared Figma roles. Component styles own their typography; do not reset
   every descendant or turn every h3 into a display headline. */
body {
  font-family: var(--body);
  font-weight: 400;
}

.button,
.page-unternehmen .btn {
  font-family: var(--display);
  font-weight: 400;
  font-variation-settings: 'wdth' 200, 'wght' 400;
  font-size: 14px;
  letter-spacing: 1.4px;
  padding-inline: 16px;
  max-width: 100%;
  white-space: normal;
  text-align: center;
  overflow-wrap: anywhere;
}

.button > span,
.page-unternehmen .btn > span {
  font: inherit;
  font-variation-settings: inherit;
  letter-spacing: inherit;
  min-width: 0;
}

.main-nav > a:not(.button),
.footer-nav a,
.social-links,
.legal-links,
.menu-meta {
  font-family: var(--display);
  font-weight: 400;
  font-variation-settings: 'wdth' 200, 'wght' 400;
}

/* Social links use the same horizontal arrow as the website buttons. */
.social-links .social-arrow,
.menu-social .social-arrow,
.person-social .social-arrow {
  width: 20px;
  height: 12.728px;
  flex: none;
  align-self: center;
}

.social-links .social-arrow,
.menu-social .social-arrow {
  filter: brightness(0) invert(1);
}

/* Contact body roles: Inter Regular, Medium and Bold. */
.hero-kontakt .hero-copy,
.conversation-copy {
  font-family: var(--body);
  font-weight: 500;
  color: #4d474d;
}

.hero-kontakt strong {
  font: 500 18px/26px var(--display);
  font-variation-settings: 'wdth' 200, 'wght' 500;
  font-variant: normal;
  text-transform: none;
}

.contact-options .simple-card h3,
.client-support .simple-card h3,
.conversation-questions h3 {
  font: 700 20px/26px var(--body);
}

.contact-portrait strong {
  font: 700 16px/22px var(--body);
}

.conversation-questions li {
  font: 500 17px/24px var(--body);
}

.client-support > .container > div > p {
  font: 500 16px/24px var(--body);
  color: #4d474d;
}

.client-support > .container > div > p > strong {
  font: 700 18px/26px var(--body);
  color: var(--ink);
}

/* Keep real uppercase navigation clear of the logo on small laptops. */
@media (min-width:900px) and (max-width:1023px) {
  .header-inner { width: calc(100% - 48px); }
  .footer-inner { padding-inline: 24px; }
  .brand { width: 216px; }
  .main-nav { margin-left: 20px; gap: 12px; }
  .main-nav > a:not(.button) { letter-spacing: .8px; }
}

@media (max-width:899px) {
  .conversation-copy {
    font-size: 16px;
    line-height: 24px;
  }

  .main-nav .nav-contact {
    border-color: transparent;
  }

  /* Match the measured mobile CTA without reducing the label font. */
  .conversation-action .button {
    width: 248px;
    padding-inline: 12px;
  }
}

@media (max-width:374px) {
  .legal-links,
  .menu-legal {
    gap: 20px;
    flex-wrap: wrap;
  }
}

/* /systemseite.css */
/* Vorlage Systemseite — Figma 1626:7199 (Desktop 1440) und 1626:15039 (Mobil 390).
   Gilt für jede Seite mit `meta.vorlage: "systemseite"` (src/systemseite.mjs). */
.vorlage-systemseite { --sys-ink: #0d0406; --sys-grau-text: #6b6767; --sys-copy: #333030; --sys-linie: #e8e6e6; --sys-grau: #f2f0f0; background: var(--sys-grau); color: var(--sys-ink); }
.vorlage-systemseite .page { padding: 0; }
/* Kopf als eigene Leiste über dem Hero (Figma: 104 px, Haarlinie darunter). */
/* Nur Desktop: mobil bleibt der fixierte Kopf der Website (figma.css). */
@media (min-width: 900px) {
  .vorlage-systemseite .header { height: 104px; position: relative; background: white; border-bottom: 1px solid var(--sys-linie); }
  .vorlage-systemseite .header-inner { width: calc(100% - 128px); max-width: 1312px; }
}
.sys-section { position: relative; padding: 96px 80px; background: white; overflow: hidden; }
/* :where hält die Rücksetzung ohne Gewicht, damit die Abstände unten greifen. */
.sys-section :where(h1, h2, h3, p, ul, ol, dl, dd) { margin: 0; }
.sys-section :where(ul, ol) { list-style: none; padding: 0; }
.sys-inner { position: relative; max-width: 1280px; margin: 0 auto; }
.sys-grau { background: var(--sys-grau); }
.sys-navy { background: var(--navy); }
.sys-lila { background: var(--purple); }
.sys-shader { background: var(--sys-grau) url('/assets/media/start/hero-shader.webp') center / cover no-repeat; }

/* Rollen aus dem Entwurf */
.sys-label { font: 500 13px/1.2 var(--body); letter-spacing: 1.82px; text-transform: uppercase; color: var(--sys-grau-text); }
.sys-kopf { display: flex; flex-direction: column; gap: 24px; max-width: 848px; }
.sys-kopf h2 { font: 400 42px/1.2 var(--display); font-variation-settings: 'wdth' 200, 'wght' 400; background: linear-gradient(90deg, var(--orange), #942dd1); -webkit-background-clip: text; background-clip: text; color: transparent; width: fit-content; }
.sys-text { font: 400 20px/1.55 var(--body); color: var(--sys-grau-text); }
.sys-section h3 { font: 500 22px/1.28 var(--display); font-variation-settings: 'wdth' 200, 'wght' 500; letter-spacing: -.22px; color: var(--sys-ink); }
.sys-section li > p:not(.sys-systeme):not(.sys-dauer) { font: 400 16px/1.6 var(--body); color: var(--sys-copy); }
/* Leichte Überschrift (Ablauf, Ergebnis, Technik, Audit, Fragen) */
:is(.sys-ablauf, .sys-ergebnis, .sys-technik, .sys-audit, .sys-faq) h2 { font: 300 48px/1.08 var(--display); font-variation-settings: 'wdth' 200, 'wght' 300; letter-spacing: -1.68px; background: none; color: var(--sys-ink); }
.sys-raster { display: grid; gap: 40px 16px; }
.sys-raster > li { border-top: 1px solid var(--sys-linie); padding-top: 24px; display: flex; flex-direction: column; gap: 12px; }

.vorlage-systemseite .button { font: 400 14px/normal var(--display); font-variation-settings: 'wdth' 200, 'wght' 400; letter-spacing: 1.4px; padding: 13px 16px; border: 2px solid var(--purple); background: white; color: var(--purple); gap: 16px; min-height: 44px; }
.vorlage-systemseite .button.primary { background: var(--purple); color: white; }
.vorlage-systemseite .button:hover { background: var(--navy); border-color: var(--navy); color: white; }
.vorlage-systemseite .button svg { width: 20px; height: 12.728px; flex: none; }

/* Hero */
.sys-hero { min-height: 760px; display: flex; align-items: center; padding-block: 130px; background: url('/assets/media/start/hero-shader.webp') left top / cover no-repeat; }
.sys-hero .sys-inner { width: 100%; }
.sys-hero-inhalt { max-width: min(811px, 56vw); display: flex; flex-direction: column; align-items: flex-start; }
.sys-hero-label { font: 400 16px/1.2 var(--display); font-variation-settings: 'wdth' 200, 'wght' 400; font-variant-caps: all-small-caps; letter-spacing: 1.6px; color: var(--navy); }
.sys-hero h1 { margin-top: 32px; font: 300 50px/1.06 var(--display); font-variation-settings: 'wdth' 200, 'wght' 300; letter-spacing: -1.75px; color: var(--sys-ink); }
.sys-lead { margin-top: 32px; max-width: 560px; font: 500 18px/26px var(--body); color: #4d474d; }
.sys-aktionen { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 16px; }
.sys-pruefzeile { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.sys-pruefzeile li { font: 500 13px/1.2 var(--body); letter-spacing: 1.82px; text-transform: uppercase; color: var(--orange); }
.sys-pruefzeile li + li { padding-left: 16px; border-left: 1px solid currentColor; }
.sys-hero-bild { position: absolute; top: 0; right: 0; bottom: 0; width: calc(100% - 852px); max-width: 633px; }
.sys-hero-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 37% 50%; }

/* Ausgangslage */
.sys-ausgangslage { padding-block: 80px; }
.sys-kopfzeile { display: grid; grid-template-columns: minmax(0, 848px) minmax(0, 416px); justify-content: space-between; gap: 16px; }
.sys-streuung { position: relative; aspect-ratio: 16 / 9; align-self: start; }
.sys-streuung canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sys-probleme { margin-top: 56px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sys-probleme > li { padding-top: 20px; gap: 8px; }
.sys-icon { width: 20px; height: 22px; color: var(--sys-ink); }
.sys-probleme h3 { font: 500 16px/1.6 var(--body); font-variation-settings: normal; letter-spacing: 0; }
.sys-section .sys-probleme p { font-size: 15px; line-height: 1.53; color: var(--sys-grau-text); }

/* Schnittstellen */
.sys-schnittstellen { padding-block: 80px; }
.sys-karten { margin-top: 56px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 16px; }
.sys-karten h3 { font-weight: 400; font-variation-settings: 'wdth' 200, 'wght' 400; letter-spacing: 0; }
.sys-systeme { font: 500 13px/1.2 var(--body); letter-spacing: 1.82px; text-transform: uppercase; color: var(--sys-grau-text); }

/* Arbeitsweise, Ergebnis, Technik: Kopf links, Inhalt rechts */
.sys-zweispaltig { display: grid; grid-template-columns: minmax(0, 524px) minmax(0, 740px); justify-content: space-between; gap: 16px; }
.sys-regeln { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Ablauf */
.sys-ablauf { padding-bottom: 96px; }
.sys-ablauf .sys-label, .sys-dauer { color: #b3afaf; }
.sys-ablauf h2, .sys-ablauf h3 { color: var(--grey, #f2f0f0); }
/* Liegt im Inhalt hinter dem Kopf; Desktop zieht sie an die Oberkante des Abschnitts. */
.sys-strom { position: absolute; top: -96px; left: 412px; width: 820px; height: 412px; pointer-events: none; }
.sys-schritte { margin-top: 176px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sys-schritte > li { position: relative; border-top-color: #6a3fd1; padding-top: 24px; gap: 8px; isolation: isolate; }
.sys-chevron { position: absolute; width: 197px; height: auto; aspect-ratio: 547 / 624; opacity: .5; pointer-events: none; z-index: -1; }
.sys-schritte .sys-chevron { top: 16px; right: 12px; }
.sys-nummer { font: 500 44px/1.2 var(--display); font-variation-settings: 'wdth' 200, 'wght' 500; color: var(--orange); margin-bottom: 8px; }
.sys-dauer { font: 500 13px/1.2 var(--body); letter-spacing: 1.82px; text-transform: uppercase; margin-bottom: 8px; }
.sys-section .sys-schritte > li > p:not(.sys-dauer) { color: #b3afaf; }

/* Ergebnis */
.sys-ergebnis { padding-block: 86px; }
.sys-ergebnis .sys-zweispaltig { align-items: center; }
.sys-kennzahlen { max-width: 503px; justify-self: center; width: 100%; }
.sys-kennzahlen li { display: flex; flex-direction: column; gap: 8px; padding: 24px 0; border-bottom: 1px solid rgba(13, 4, 6, .1); }
.sys-kennzahlen li:last-child { border-bottom: 0; }
.sys-section .sys-kennzahlen p { font-size: 15px; line-height: 1.53; color: var(--sys-grau-text); }

/* Technik */
.sys-technik .sys-zweispaltig { grid-template-columns: minmax(0, 506px) minmax(0, 632px); justify-content: start; gap: 16px; }
.sys-technik-kopf { position: relative; min-height: 100%; }
.sys-technik-kopf .sys-chevron { left: 0; top: 461px; opacity: 1; z-index: 0; }
.sys-spezifikationen { margin: 0; }
.sys-spezifikationen div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--sys-linie); }
.sys-spezifikationen dt { font: 500 13px/1.2 var(--body); letter-spacing: 1.82px; text-transform: uppercase; color: var(--sys-grau-text); padding-top: 4px; }
.sys-spezifikationen dd { font: 400 16px/1.6 var(--body); color: var(--sys-copy); }

/* System-Audit */
.sys-angebot { display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 524px); justify-content: space-between; gap: 24px; padding: 64px 64px 64px 68px; background: white; border-left: 4px solid var(--orange); }
.sys-angebot-text { display: flex; flex-direction: column; align-items: flex-start; }
.sys-angebot h2 { margin-top: 24px; }
.sys-angebot-copy { margin-top: 24px; font: 400 16px/1.6 var(--body); color: var(--sys-ink); }
.sys-preis { margin: 24px 0; font: 300 48px/1.08 var(--display); font-variation-settings: 'wdth' 200, 'wght' 300; letter-spacing: -1.68px; color: var(--purple); }
.sys-audit-ergebnisse > .sys-label { padding-bottom: 20px; }
.sys-audit-ergebnisse li { display: grid; grid-template-columns: 48px minmax(0, 1fr); padding: 18px 0; border-bottom: 1px solid var(--sys-linie); font: 400 16px/1.6 var(--body); color: var(--sys-ink); }
.sys-audit-ergebnisse li:last-child { border-bottom: 0; }
.sys-audit-ergebnisse li span { font: 500 13px/1.9 var(--body); letter-spacing: 1.82px; color: var(--orange); }

/* Fragen */
.sys-faq-liste { margin-top: 56px; max-width: 848px; }
.sys-faq details { border-bottom: 1px solid var(--sys-linie); }
.sys-faq summary { position: relative; padding: 24px 48px 24px 0; list-style: none; cursor: pointer; font: 400 20px/1.55 var(--body); color: var(--sys-ink); }
.sys-faq summary::-webkit-details-marker { display: none; }
.sys-faq summary::after { content: '+'; position: absolute; right: 0; top: 24px; font: 500 20px/1.55 'JetBrains Mono', ui-monospace, monospace; color: var(--orange); }
.sys-faq details[open] > summary::after { content: '–'; }
/* Beim Schließen bleibt details bis zum Ende der Animation offen (site.js). */
.sys-faq details > summary[aria-expanded="false"]::after { content: '+'; }
.sys-faq details > p { padding: 0 60px 28px 0; font: 400 16px/1.6 var(--body); color: var(--sys-copy); }

.vorlage-systemseite .back-top { background: var(--sys-grau); }
/* Tastaturbedienung wartet nie auf ein Einblenden außerhalb des Bildes. */
.vorlage-systemseite [data-reveal]:focus-within { opacity: 1; translate: none; transition: none; }
html.cms-editing .vorlage-systemseite [data-reveal] { translate: none !important; transition: none !important; }
.sys-raster > li:nth-child(4n+2) { --reveal-delay: 70ms; }
.sys-raster > li:nth-child(4n+3) { --reveal-delay: 140ms; }
.sys-raster > li:nth-child(4n+4) { --reveal-delay: 210ms; }

@media (max-width: 1200px) {
  .sys-section { padding-inline: 48px; }
  .sys-hero-bild { width: 38%; }
  .sys-hero-inhalt { max-width: 58%; }
  .sys-hero h1 { font-size: 42px; }
  .sys-karten, .sys-schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sys-zweispaltig, .sys-technik .sys-zweispaltig { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 48px; }
  .sys-kopfzeile { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .sys-angebot { grid-template-columns: 1fr 1fr; padding: 48px; }
  .sys-strom { left: auto; right: -168px; }
}

/* Mobil: Figma 1626:15039 */
@media (max-width: 899px) {
  .sys-section, .sys-ausgangslage, .sys-schnittstellen, .sys-ergebnis { padding: 72px 24px; }
  .sys-hero { display: block; min-height: 0; padding: 340px 24px 56px; }
  .sys-hero-bild { top: 0; left: 0; right: 0; bottom: auto; width: 100%; max-width: none; height: 300px; }
  .sys-hero-bild img { object-position: 50% 40%; }
  .sys-hero-inhalt { max-width: none; }
  .sys-hero-label { font-size: 13px; }
  .sys-hero h1 { margin-top: 24px; font-size: 32px; letter-spacing: -1.1px; }
  .sys-hero h1 br, .sys-section h2 br { display: none; }
  .sys-lead { margin-top: 24px; font-size: 16px; }
  .sys-aktionen { margin-top: 24px; flex-direction: column; width: 100%; gap: 12px; }
  .sys-aktionen .button { width: 100%; justify-content: center; }
  .sys-pruefzeile { margin-top: 24px; flex-direction: column; align-items: center; width: 100%; gap: 10px; }
  .sys-pruefzeile li + li { padding-left: 0; border-left: 0; }
  .sys-kopf h2 { font-size: 30px; }
  :is(.sys-ablauf, .sys-ergebnis, .sys-technik, .sys-faq) h2 { font-size: 30px; letter-spacing: -1px; }
  .sys-text { font-size: 18px; }
  .sys-kopfzeile, .sys-zweispaltig, .sys-technik .sys-zweispaltig, .sys-angebot { grid-template-columns: 1fr; gap: 32px; }
  .sys-probleme, .sys-karten, .sys-regeln, .sys-schritte { grid-template-columns: 1fr; gap: 24px; }
  .sys-probleme, .sys-karten, .sys-faq-liste { margin-top: 40px; }
  .sys-strom { position: static; display: block; width: 100%; height: auto; margin-top: 32px; }
  .sys-schritte { margin-top: 32px; }
  .sys-technik-kopf .sys-chevron { display: none; }
  .sys-spezifikationen div { grid-template-columns: 1fr; gap: 8px; }
  .sys-angebot { padding: 32px 28px; }
  .sys-angebot h2 { font-size: 28px; letter-spacing: -1px; }
  .sys-preis { font-size: 32px; letter-spacing: -1.1px; }
  .sys-angebot .button { width: 100%; justify-content: center; }
  .sys-faq summary { font-size: 16px; padding-right: 36px; }
  .sys-faq details > p { padding-right: 0; }
}

/* /assets/motion/anchors.css */
/* figma.css reserves the sticky header via html scroll-padding-top. */
main section[id],.section-anchor-alias{scroll-margin-top:0}
.section-anchor-alias{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none}