/*
 * CS Cube – Projekten Redesign
 * Seitenbezogene Styles, bewusst ohne neue externe Abhängigkeiten.
 */

.cscube-modern-page #g-main {
  overflow: hidden;
}

.cscube-modern-page #g-main > .g-container {
  width: 100%;
  max-width: none;
}

.cscube-modern-page #g-main .g-content,
.cscube-modern-page #g-main .platform-content.container,
.cscube-modern-page #g-main .platform-content.container > .row,
.cscube-modern-page #g-main .platform-content.container > .row > .col {
  margin: 0;
  padding: 0;
  max-width: none;
  width: 100%;
}

.cscube-redesign {
  --cs-orange: #ff6a00;
  --cs-orange-dark: #d95a00;
  --cs-orange-soft: #fff3ea;
  --cs-charcoal: #343232;
  --cs-graphite: #4f4c4c;
  --cs-text: #2d2b2b;
  --cs-muted: #666262;
  --cs-warm: #f4f4f4;
  --cs-warm-2: #ebebeb;
  --cs-line: #dad7d5;
  --cs-white: #ffffff;
  --cs-shadow: 0 18px 50px rgba(52, 50, 50, 0.10);
  --cs-radius: 1.1rem;
  color: var(--cs-text);
  background: var(--cs-white);
  font-size: 1rem;
  line-height: 1.68;
}

.cscube-redesign *,
.cscube-redesign *::before,
.cscube-redesign *::after {
  box-sizing: border-box;
}

.cscube-redesign a {
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

.cscube-redesign .cs-shell {
  width: min(76rem, calc(100% - 3rem));
  margin-inline: auto;
}

.cscube-redesign .cs-section {
  padding: clamp(4.25rem, 7vw, 7.25rem) 0;
}

.cscube-redesign .cs-section--warm {
  background: var(--cs-warm);
}

.cscube-redesign .cs-section--tight {
  padding-top: clamp(3rem, 5vw, 4.5rem);
  padding-bottom: clamp(3rem, 5vw, 4.5rem);
}

.cscube-redesign .cs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1rem;
  color: var(--cs-orange-dark);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  line-height: 1.3;
  text-transform: uppercase;
}

.cscube-redesign .cs-eyebrow::before {
  content: "";
  width: 1.8rem;
  height: 0.16rem;
  border-radius: 99px;
  background: currentColor;
}

.cscube-redesign .cs-section-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(18rem, 0.65fr);
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: end;
  margin-bottom: clamp(2.4rem, 5vw, 4.5rem);
}

.cscube-redesign .cs-section-heading h2,
.cscube-redesign .cs-section-heading p {
  margin: 0;
}

.cscube-redesign h1,
.cscube-redesign h2,
.cscube-redesign h3,
.cscube-redesign h4 {
  color: inherit;
  font-family: inherit;
  letter-spacing: -0.025em;
}

.cscube-redesign h1 {
  max-width: 13ch;
  margin: 0;
  color: #fff;
  font-size: clamp(2.75rem, 6.2vw, 5.8rem);
  font-weight: 750;
  line-height: 0.98;
}

.cscube-redesign h2 {
  max-width: 17ch;
  font-size: clamp(2rem, 4vw, 3.6rem);
  font-weight: 720;
  line-height: 1.06;
}

.cscube-redesign h3 {
  font-size: clamp(1.35rem, 2.3vw, 2rem);
  font-weight: 700;
  line-height: 1.18;
}

.cscube-redesign h4 {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  line-height: 1.35;
  text-transform: uppercase;
}

.cscube-redesign .cs-lead {
  max-width: 47rem;
  margin: 1.6rem 0 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(1.08rem, 1.8vw, 1.32rem);
  line-height: 1.62;
}

.cscube-redesign .cs-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(4.5rem, 8vw, 8.5rem) 0 clamp(4rem, 7vw, 7.3rem);
  color: #fff;
  background: linear-gradient(135deg, #4f4c4c 0%, #403e3e 52%, #343232 100%);
}

.cscube-redesign .cs-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 0.10;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.10) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(90deg, transparent 0, #000 42%, #000 100%);
}

.cscube-redesign .cs-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 27rem;
  height: 27rem;
  right: -9rem;
  bottom: -13rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  box-shadow:
    0 0 0 4rem rgba(255, 106, 0, 0.035),
    0 0 0 8rem rgba(255, 255, 255, 0.018);
}

.cscube-redesign .cs-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
  gap: clamp(2.4rem, 7vw, 7rem);
  align-items: start;
}

/* Einheitliche Position fuer die rechte Hero-Karte auf allen modernisierten Seiten.
   Die Karte startet bewusst unterhalb des Seitentitels statt je nach Kartenhoehe zu wandern. */
.cscube-redesign .cs-hero-sidecard {
  align-self: start;
  margin-top: clamp(5.75rem, 7vw, 7rem);
}

.cscube-redesign .cs-hero .cs-eyebrow {
  color: #ff9b54;
}

.cscube-redesign .cs-sector-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 2.2rem 0 0;
  padding: 0;
  list-style: none;
}

.cscube-redesign .cs-sector-list li {
  margin: 0;
  padding: 0.42rem 0.72rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.83);
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.78rem;
  line-height: 1.3;
}

.cscube-redesign .cs-chain {
  position: relative;
  padding: 1.5rem 1.5rem 1.55rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--cs-radius);
  background: rgba(255, 255, 255, 0.065);
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px);
}

.cscube-redesign .cs-chain-title {
  margin: 0 0 1rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.cscube-redesign .cs-chain ol {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cscube-redesign .cs-chain li {
  position: relative;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  min-height: 2.65rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.92rem;
  font-weight: 620;
}

.cscube-redesign .cs-chain li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 0.84rem;
  top: 2rem;
  bottom: -0.55rem;
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
}

.cscube-redesign .cs-chain-index {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  color: #fff;
  background: var(--cs-orange);
  font-size: 0.7rem;
  font-weight: 800;
}

.cscube-redesign .cs-proofbar {
  position: relative;
  z-index: 2;
  margin-top: -1.5rem;
}

.cscube-redesign .cs-proofbar-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  border: 1px solid var(--cs-line);
  border-radius: var(--cs-radius);
  background: #fff;
  box-shadow: var(--cs-shadow);
}

.cscube-redesign .cs-proofitem {
  display: grid;
  grid-template-columns: 2.8rem minmax(0, 1fr);
  gap: 0.9rem;
  align-items: center;
  min-height: 7rem;
  padding: 1.35rem 1.55rem;
}

.cscube-redesign .cs-proofitem + .cs-proofitem {
  border-left: 1px solid var(--cs-line);
}

.cscube-redesign .cs-prooficon,
.cscube-redesign .cs-capability-icon,
.cscube-redesign .cs-callout-icon,
.cscube-redesign .cs-card-icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.8rem;
  color: var(--cs-orange-dark);
  background: var(--cs-orange-soft);
}

.cscube-redesign .cs-prooficon svg,
.cscube-redesign .cs-capability-icon svg,
.cscube-redesign .cs-callout-icon svg,
.cscube-redesign .cs-card-icon svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.cscube-redesign .cs-card-icon {
  margin-bottom: 1rem;
}

.cscube-redesign .cs-proofitem strong {
  display: block;
  color: var(--cs-charcoal);
  font-size: 0.96rem;
  line-height: 1.3;
}

.cscube-redesign .cs-proofitem span:last-child {
  display: block;
  margin-top: 0.25rem;
  color: var(--cs-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.cscube-redesign .cs-capability-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.cscube-redesign .cs-capability-card {
  position: relative;
  min-height: 17rem;
  padding: 1.65rem;
  border: 1px solid var(--cs-line);
  border-radius: var(--cs-radius);
  background: #fff;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.cscube-redesign .cs-capability-card:hover {
  border-color: rgba(255, 106, 0, 0.45);
  box-shadow: var(--cs-shadow);
  transform: translateY(-3px);
}

.cscube-redesign .cs-capability-card h3 {
  margin: 1.35rem 0 0.8rem;
  font-size: 1.24rem;
}

.cscube-redesign .cs-capability-card p {
  margin: 0;
  color: var(--cs-muted);
  font-size: 0.93rem;
}

.cscube-redesign .cs-capability-number {
  position: absolute;
  right: 1.35rem;
  top: 1.3rem;
  color: #d8d2ce;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.cscube-redesign .cs-project-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.cscube-redesign .cs-project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(1.5rem, 3vw, 2.3rem);
  border: 1px solid var(--cs-line);
  border-radius: var(--cs-radius);
  background: #fff;
  box-shadow: 0 12px 36px rgba(52, 50, 50, 0.045);
}

.cscube-redesign .cs-project-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0.28rem;
  background: var(--cs-orange);
}

.cscube-redesign .cs-project-card--feature {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(17rem, 0.6fr);
  gap: clamp(2rem, 5vw, 5rem);
  color: #fff;
  border: 0;
  background: linear-gradient(135deg, #343232 0%, #4f4c4c 100%);
  box-shadow: 0 24px 65px rgba(35, 31, 29, 0.18);
}

.cscube-redesign .cs-project-card--feature::before {
  width: 0.42rem;
}

.cscube-redesign .cs-project-card--feature h3,
.cscube-redesign .cs-project-card--feature h4 {
  color: #fff;
}

.cscube-redesign .cs-project-card--feature p,
.cscube-redesign .cs-project-card--feature .cs-project-summary {
  color: rgba(255, 255, 255, 0.84);
}

.cscube-redesign .cs-project-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.8rem;
  color: var(--cs-orange-dark);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cscube-redesign .cs-project-card--feature .cs-project-label {
  color: #ff9b54;
}

.cscube-redesign .cs-project-card h3 {
  margin: 0 0 1rem;
}

.cscube-redesign .cs-project-summary {
  margin: 0 0 1.6rem;
  color: var(--cs-muted);
  font-size: 1rem;
}

.cscube-redesign .cs-project-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: auto;
  padding-top: 0.4rem;
}

.cscube-redesign .cs-project-columns h4 {
  margin: 0 0 0.55rem;
  color: var(--cs-charcoal);
}

.cscube-redesign .cs-project-columns p {
  margin: 0;
  color: var(--cs-muted);
  font-size: 0.91rem;
}

.cscube-redesign .cs-project-card--feature .cs-project-columns h4 {
  color: #fff;
}

.cscube-redesign .cs-project-card--feature .cs-project-columns p {
  color: rgba(255, 255, 255, 0.78);
}

.cscube-redesign .cs-feature-path {
  align-self: stretch;
  padding: 1.4rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.07);
}

.cscube-redesign .cs-feature-path h4 {
  margin: 0 0 1.05rem;
  color: rgba(255, 255, 255, 0.65);
}

.cscube-redesign .cs-feature-path ol {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  counter-reset: ref-path;
  list-style: none;
}

.cscube-redesign .cs-feature-path li {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.89rem;
}

.cscube-redesign .cs-feature-path li::before {
  counter-increment: ref-path;
  content: counter(ref-path, decimal-leading-zero);
  flex: 0 0 auto;
  color: #ff9b54;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.cscube-redesign .cs-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 1.55rem 0 0;
  padding: 0;
  list-style: none;
}

.cscube-redesign .cs-tags li {
  margin: 0;
}

.cscube-redesign .cs-tags a,
.cscube-redesign .cs-tags span {
  display: inline-flex;
  padding: 0.35rem 0.58rem;
  border-radius: 999px;
  color: var(--cs-graphite);
  background: var(--cs-warm);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}

.cscube-redesign .cs-tags a:hover,
.cscube-redesign .cs-tags a:focus-visible {
  color: #fff;
  background: var(--cs-orange-dark);
}

.cscube-redesign .cs-project-card--feature .cs-tags a,
.cscube-redesign .cs-project-card--feature .cs-tags span {
  color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.11);
}

.cscube-redesign .cs-project-card--feature .cs-tags a:hover,
.cscube-redesign .cs-project-card--feature .cs-tags a:focus-visible {
  color: #fff;
  background: var(--cs-orange);
}

.cscube-redesign .cs-more-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.cscube-redesign .cs-mini-card {
  min-height: 14rem;
  padding: 1.45rem;
  border: 1px solid var(--cs-line);
  border-radius: 0.95rem;
  background: #fff;
}

.cscube-redesign .cs-mini-card .cs-project-label {
  margin-bottom: 0.55rem;
  font-size: 0.68rem;
}

.cscube-redesign .cs-mini-card h3 {
  margin: 0 0 0.7rem;
  font-size: 1.14rem;
}

.cscube-redesign .cs-mini-card p {
  margin: 0;
  color: var(--cs-muted);
  font-size: 0.9rem;
}

.cscube-redesign .cs-testimonials {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: var(--cs-charcoal);
}

.cscube-redesign .cs-testimonials::before {
  content: "“";
  position: absolute;
  right: 2vw;
  top: -7rem;
  color: rgba(255, 106, 0, 0.11);
  font-family: Georgia, serif;
  font-size: 31rem;
  line-height: 1;
}

.cscube-redesign .cs-testimonials .cs-section-heading {
  position: relative;
  z-index: 1;
}

.cscube-redesign .cs-testimonials .cs-eyebrow {
  color: #ff9b54;
}

.cscube-redesign .cs-testimonials h2,
.cscube-redesign .cs-testimonials .cs-section-heading p {
  color: #fff;
}

.cscube-redesign .cs-testimonials .cs-section-heading p {
  color: rgba(255, 255, 255, 0.68);
}

.cscube-redesign .cs-quote-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.cscube-redesign blockquote.cs-quote {
  margin: 0;
  padding: 1.7rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--cs-radius);
  background: rgba(255, 255, 255, 0.055);
}

.cscube-redesign .cs-quote p {
  margin: 0;
  color: #fff;
  font-size: clamp(1.08rem, 1.8vw, 1.35rem);
  font-weight: 650;
  line-height: 1.45;
}

.cscube-redesign .cs-quote footer {
  margin-top: 1.2rem;
  color: #ff9b54;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.cscube-redesign .cs-reference-callout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1.25rem;
  align-items: center;
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid var(--cs-line);
  border-left: 0.3rem solid var(--cs-orange);
  border-radius: var(--cs-radius);
  background: #f7f7f7;
  box-shadow: 0 12px 34px rgba(52, 50, 50, 0.06);
}

.cscube-redesign .cs-reference-callout h2 {
  max-width: none;
  margin: 0 0 0.25rem;
  font-size: clamp(1.35rem, 2.6vw, 2rem);
}

.cscube-redesign .cs-reference-callout p {
  margin: 0;
  color: var(--cs-muted);
}

.cscube-redesign .cs-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 3rem;
  padding: 0.78rem 1.15rem;
  border: 1px solid transparent;
  border-radius: 0.65rem;
  color: #fff !important;
  background: var(--cs-orange-dark);
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none !important;
  transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.cscube-redesign .cs-button:hover,
.cscube-redesign .cs-button:focus-visible {
  background: var(--cs-charcoal);
  box-shadow: 0 12px 26px rgba(47, 45, 45, 0.16);
  transform: translateY(-2px);
}

.cscube-redesign .cs-button--light {
  color: var(--cs-charcoal) !important;
  background: #fff;
}

.cscube-redesign .cs-button--light:hover,
.cscube-redesign .cs-button--light:focus-visible {
  color: #fff !important;
  background: var(--cs-orange);
}

.cscube-redesign .cs-faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.cscube-redesign .cs-faq-item {
  padding: 1.55rem;
  border: 1px solid var(--cs-line);
  border-top: 3px solid var(--cs-orange);
  border-radius: 0.8rem;
  background: #fff;
}

.cscube-redesign .cs-faq-item h3 {
  margin: 0 0 0.65rem;
  font-size: 1.14rem;
}

.cscube-redesign .cs-faq-item p {
  margin: 0;
  color: var(--cs-muted);
  font-size: 0.93rem;
}

.cscube-redesign .cs-cta {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(125deg, #4f4c4c 0%, #343232 74%);
}

.cscube-redesign .cs-cta::before {
  content: "";
  position: absolute;
  width: 19rem;
  height: 19rem;
  left: -8rem;
  bottom: -11rem;
  border: 3.6rem solid rgba(255, 255, 255, 0.035);
  transform: rotate(28deg);
}

.cscube-redesign .cs-cta-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: center;
}

.cscube-redesign .cs-cta h2 {
  max-width: 19ch;
  margin: 0 0 0.75rem;
  color: #fff;
}

.cscube-redesign .cs-cta p {
  max-width: 48rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 1.04rem;
}

.cscube-redesign .cs-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  justify-content: flex-end;
}

.cscube-redesign .cs-text-link {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: 0.7rem 0.15rem;
  color: #fff !important;
  font-size: 0.87rem;
  font-weight: 750;
  text-decoration: none !important;
}

.cscube-redesign .cs-text-link:hover,
.cscube-redesign .cs-text-link:focus-visible {
  color: #ff9b54 !important;
}

.cscube-redesign .cs-discretion-note {
  margin: 2.2rem 0 0;
  color: var(--cs-muted);
  font-size: 0.78rem;
  text-align: center;
}

@media (max-width: 68rem) {
  .cscube-redesign .cs-capability-grid,
  .cscube-redesign .cs-more-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cscube-redesign .cs-project-card--feature {
    grid-template-columns: 1fr;
  }

  .cscube-redesign .cs-feature-path ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 52rem) {
  .cscube-redesign .cs-shell {
    width: min(100% - 2rem, 76rem);
  }

  .cscube-redesign .cs-hero-grid,
  .cscube-redesign .cs-section-heading,
  .cscube-redesign .cs-cta-inner {
    grid-template-columns: 1fr;
  }

  .cscube-redesign h1 {
    max-width: 12ch;
  }

  .cscube-redesign .cs-proofbar {
    margin-top: -0.8rem;
  }

  .cscube-redesign .cs-proofbar-inner,
  .cscube-redesign .cs-project-grid,
  .cscube-redesign .cs-quote-grid,
  .cscube-redesign .cs-faq-grid {
    grid-template-columns: 1fr;
  }

  .cscube-redesign .cs-proofitem + .cs-proofitem {
    border-top: 1px solid var(--cs-line);
    border-left: 0;
  }

  .cscube-redesign .cs-project-card--feature {
    grid-column: auto;
  }

  .cscube-redesign .cs-reference-callout {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .cscube-redesign .cs-reference-callout .cs-button {
    grid-column: 1 / -1;
  }

  .cscube-redesign .cs-cta-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 38rem) {
  .cscube-redesign .cs-section {
    padding: 3.6rem 0;
  }

  .cscube-redesign .cs-hero {
    padding-top: 3.8rem;
  }

  .cscube-redesign .cs-capability-grid,
  .cscube-redesign .cs-more-grid,
  .cscube-redesign .cs-project-columns,
  .cscube-redesign .cs-feature-path ol {
    grid-template-columns: 1fr;
  }

  .cscube-redesign .cs-capability-card,
  .cscube-redesign .cs-mini-card {
    min-height: 0;
  }

  .cscube-redesign .cs-reference-callout {
    grid-template-columns: 1fr;
  }

  .cscube-redesign .cs-callout-icon {
    margin-bottom: 0.2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cscube-redesign *,
  .cscube-redesign *::before,
  .cscube-redesign *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

/* Let the final main reference close the grid without an empty column. */
.cscube-redesign .cs-project-card--wide {
  grid-column: 1 / -1;
}

@media (max-width: 52rem) {
  .cscube-redesign .cs-project-card--wide {
    grid-column: auto;
  }
}


/* Designrunde 2: neutrales CS-Cube-Farbsystem und dezente Scroll-Bewegung. */
.cscube-redesign .cs-section + .cs-section {
  border-top: 1px solid rgba(79, 76, 76, 0.055);
}

.cscube-redesign .cs-capability-card::after,
.cscube-redesign .cs-mini-card::after {
  content: "";
  position: absolute;
  left: 1.45rem;
  right: 1.45rem;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cs-orange), transparent 76%);
  transform: scaleX(0.28);
  transform-origin: left;
  transition: transform 220ms ease;
}

.cscube-redesign .cs-capability-card,
.cscube-redesign .cs-mini-card {
  position: relative;
}

.cscube-redesign .cs-capability-card:hover::after,
.cscube-redesign .cs-mini-card:hover::after {
  transform: scaleX(1);
}

.cscube-redesign .cs-project-card:not(.cs-project-card--feature) {
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.cscube-redesign .cs-project-card:not(.cs-project-card--feature):hover {
  border-color: rgba(255, 106, 0, 0.30);
  box-shadow: 0 18px 44px rgba(52, 50, 50, 0.085);
  transform: translateY(-3px);
}

.cscube-redesign .cs-testimonials,
.cscube-redesign .cs-cta {
  background-color: var(--cs-charcoal);
}

/* Inhalte bleiben ohne JavaScript vollständig sichtbar. */
.has-cs-motion .cscube-redesign [data-cs-reveal] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity 560ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--cs-reveal-delay, 0ms);
}

.has-cs-motion .cscube-redesign [data-cs-reveal].is-cs-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  .has-cs-motion .cscube-redesign [data-cs-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


html,body{margin:0!important;padding:0!important;}


/* Designrunde 3 */
.cscube-modern-page #g-main,.cscube-modern-page #g-main>.g-container,.cscube-modern-page #g-main>.g-container>.g-grid,.cscube-modern-page #g-main .g-block,.cscube-modern-page #g-main .g-content,.cscube-modern-page #g-main .platform-content.container,.cscube-modern-page #g-main .platform-content.container>.row,.cscube-modern-page #g-main .platform-content.container>.row>.col,.cscube-modern-page #g-main .com-content-article,.cscube-modern-page #g-main .com-content-article__body{margin-top:0!important;margin-bottom:0!important;padding-top:0!important;padding-bottom:0!important}.cscube-modern-page #g-main{background:#4f4c4c}.cscube-redesign{display:flow-root}.cscube-redesign .cs-hero{background:#4f4c4c}.cscube-redesign .cs-project-grid{align-items:stretch}.cscube-redesign .cs-project-card{grid-column:auto;display:flex;flex-direction:column;color:var(--cs-text);border:1px solid var(--cs-line);background:#fff;box-shadow:0 12px 36px rgba(52,50,50,.045);transition:transform 220ms ease,box-shadow 220ms ease,border-color 220ms ease}.cscube-redesign .cs-project-card:hover{border-color:rgba(255,106,0,.30);box-shadow:0 18px 44px rgba(52,50,50,.085);transform:translateY(-3px)}.cscube-redesign .cs-project-card h3,.cscube-redesign .cs-project-card h4{color:inherit}.cscube-redesign .cs-project-card p,.cscube-redesign .cs-project-card .cs-project-summary,.cscube-redesign .cs-project-card .cs-project-columns p{color:var(--cs-muted)}.cscube-redesign .cs-project-card .cs-project-label{color:var(--cs-orange-dark)}.cscube-redesign .cs-project-card .cs-tags a,.cscube-redesign .cs-project-card .cs-tags span{color:var(--cs-graphite);background:var(--cs-warm)}.cscube-redesign .cs-project-card .cs-tags a:hover,.cscube-redesign .cs-project-card .cs-tags a:focus-visible{color:#fff;background:var(--cs-orange-dark)}.cscube-redesign .cs-cta{background:#4f4c4c}.cscube-modern-page #g-footer{border-top:0!important}



/* Designtest: heller Einstieg und heller Abschluss vor dem Footer */
.cscube-modern-page #g-main { background: #ffffff !important; }
.cscube-redesign .cs-hero {
  background: #ffffff !important;
  color: var(--cs-text) !important;
  border-top: 0 !important;
}
.cscube-redesign .cs-hero::before,
.cscube-redesign .cs-hero::after { opacity: .12 !important; }
.cscube-redesign .cs-hero h1,
.cscube-redesign .cs-hero h2,
.cscube-redesign .cs-hero h3 { color: var(--cs-charcoal) !important; }
.cscube-redesign .cs-hero p,
.cscube-redesign .cs-hero .cs-lead,
.cscube-redesign .cs-hero .cs-eyebrow { color: var(--cs-muted) !important; }
.cscube-redesign .cs-hero .cs-eyebrow { background: var(--cs-warm) !important; }
.cscube-redesign .cs-hero .cs-sector-list span {
  color: var(--cs-graphite) !important;
  background: var(--cs-warm) !important;
  border-color: var(--cs-line) !important;
}
.cscube-redesign .cs-cta {
  background: #ffffff !important;
  color: var(--cs-text) !important;
  border-top: 1px solid var(--cs-line) !important;
}
.cscube-redesign .cs-cta::before { opacity: .08 !important; }
.cscube-redesign .cs-cta h2 { color: var(--cs-charcoal) !important; }
.cscube-redesign .cs-cta p { color: var(--cs-muted) !important; }
.cscube-modern-page #g-footer { border-top: 0 !important; }



/* Korrekturen nach visueller Prüfung: Leistungskette im hellen Hero lesbar;
   erster Prozessabschnitt in CS-Cube-Dunkelgrau. */
.cscube-redesign .cs-chain {
  border-color: var(--cs-line) !important;
  background: #ffffff !important;
  box-shadow: var(--cs-shadow) !important;
  backdrop-filter: none !important;
}
.cscube-redesign .cs-chain-title {
  color: var(--cs-orange-dark) !important;
}
.cscube-redesign .cs-chain li {
  color: var(--cs-charcoal) !important;
}
.cscube-redesign .cs-chain li:not(:last-child)::after {
  background: var(--cs-line) !important;
}
.cscube-redesign .cs-chain-index {
  color: #ffffff !important;
}

.cscube-redesign .cs-section--dark.cs-section--after-proofbar {
  color: #ffffff !important;
  background: #4f4c4c !important;
  border-top: 0 !important;
}
.cscube-redesign .cs-section--dark.cs-section--after-proofbar .cs-eyebrow {
  color: #ff9b54 !important;
}
.cscube-redesign .cs-section--dark.cs-section--after-proofbar .cs-section-heading h2 {
  color: #ffffff !important;
}
.cscube-redesign .cs-section--dark.cs-section--after-proofbar .cs-section-heading > p {
  color: rgba(255,255,255,.82) !important;
}
.cscube-redesign .cs-section--dark.cs-section--after-proofbar .cs-card--on-dark {
  color: var(--cs-text) !important;
  background: #ffffff !important;
  border-color: rgba(255,255,255,.22) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.13) !important;
}
.cscube-redesign .cs-section--dark.cs-section--after-proofbar .cs-card--on-dark h3 {
  color: var(--cs-charcoal) !important;
}
.cscube-redesign .cs-section--dark.cs-section--after-proofbar .cs-card--on-dark p {
  color: var(--cs-muted) !important;
}

.cscube-redesign .cs-section--dark.cs-section--after-proofbar .cs-capability-card {
  color: var(--cs-text) !important;
  background: #ffffff !important;
  border-color: rgba(255,255,255,.22) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.13) !important;
}
.cscube-redesign .cs-section--dark.cs-section--after-proofbar .cs-capability-card h3 {
  color: var(--cs-charcoal) !important;
}
.cscube-redesign .cs-section--dark.cs-section--after-proofbar .cs-capability-card p {
  color: var(--cs-muted) !important;
}



/* Feinkorrekturen: Proofbar überlappt den Folgeabschnitt; CTA und Tags konsistent. */
.cscube-redesign .cs-proofbar {
  margin-top: -1.5rem !important;
  margin-bottom: -3.75rem !important;
}
.cscube-redesign .cs-section--dark.cs-section--after-proofbar {
  padding-top: clamp(7.75rem, 10vw, 10.9rem) !important;
}
.cscube-redesign .cs-cta-actions .cs-button {
  color: #ffffff !important;
  background: var(--cs-orange-dark) !important;
}
.cscube-redesign .cs-cta-actions .cs-button:hover,
.cscube-redesign .cs-cta-actions .cs-button:focus-visible {
  color: #ffffff !important;
  background: var(--cs-charcoal) !important;
}
@media (max-width: 52rem) {
  .cscube-redesign .cs-hero-sidecard {
    margin-top: 0;
  }
  .cscube-redesign .cs-proofbar {
    margin-top: -0.8rem !important;
    margin-bottom: -2.5rem !important;
  }
  .cscube-redesign .cs-section--dark.cs-section--after-proofbar {
    padding-top: 6.5rem !important;
  }
}
@media (max-width: 38rem) {
  .cscube-redesign .cs-proofbar {
    margin-bottom: -1.5rem !important;
  }
  .cscube-redesign .cs-section--dark.cs-section--after-proofbar {
    padding-top: 5.25rem !important;
  }
}



/* Inhaltliche Entlinearisierung: Leistungsbausteine statt starrer Projektkette. */
.cscube-redesign .cs-chain--modular {
  padding: 1.65rem 1.65rem 1.7rem !important;
}
.cscube-redesign .cs-chain--modular .cs-chain-title {
  margin-bottom: .7rem !important;
  color: var(--cs-orange-dark) !important;
}
.cscube-redesign .cs-chain-intro {
  margin: 0 0 1.15rem !important;
  color: var(--cs-muted) !important;
  font-size: .91rem !important;
  line-height: 1.58 !important;
}
.cscube-redesign .cs-chain-options {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: .55rem !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.cscube-redesign .cs-chain-options li {
  display: inline-flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: .48rem .72rem !important;
  border: 1px solid var(--cs-line) !important;
  border-radius: 999px !important;
  color: var(--cs-graphite) !important;
  background: var(--cs-warm) !important;
  font-size: .78rem !important;
  font-weight: 680 !important;
  line-height: 1.32 !important;
}
.cscube-redesign .cs-chain-options li::after {
  display: none !important;
  content: none !important;
}


/*
  CS-Cube-Komponentensystem fuer Inhaltsboxen
  -------------------------------------------
  .cs-card--standard    ruhige Informationsbox
  .cs-card--accent      hervorgehobene Informationsbox mit orangem Seitenakzent
  .cs-card--interactive ausschliesslich fuer vollstaendig anklickbare Karten
  .cs-card--dark        Sondervariante fuer einzelne Kernbotschaften

  Zitate, die dreiteilige Vorteilsleiste und Buttons bleiben eigenstaendige
  Komponenten und werden bewusst nicht als normale Karten behandelt.
*/
.cscube-redesign {
  --cs-card-radius: 1rem;
  --cs-card-border: 1px solid var(--cs-line);
  --cs-card-shadow: 0 14px 38px rgba(52, 50, 50, 0.075);
  --cs-card-shadow-strong: 0 20px 48px rgba(52, 50, 50, 0.13);
  --cs-card-padding: clamp(1.45rem, 2.5vw, 2rem);
}

.cscube-redesign .cs-card {
  position: relative;
  border: var(--cs-card-border);
  border-radius: var(--cs-card-radius);
}

.cscube-redesign .cs-card--standard {
  color: var(--cs-text);
  background: var(--cs-white);
  box-shadow: var(--cs-card-shadow);
}

.cscube-redesign .cs-card--accent {
  color: var(--cs-text);
  border-left: 0.3rem solid var(--cs-orange);
  background: var(--cs-white);
  box-shadow: var(--cs-card-shadow-strong);
}

.cscube-redesign .cs-card--dark {
  color: var(--cs-white);
  border-color: rgba(255, 255, 255, 0.14);
  background: var(--cs-graphite);
  box-shadow: var(--cs-card-shadow-strong);
}

/* Nur vollstaendig anklickbare Karten erhalten Hover-Bewegung und Kopflinie. */
.cscube-redesign .cs-card--interactive {
  overflow: hidden;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.cscube-redesign .cs-card--interactive::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 0.18rem;
  background: var(--cs-orange);
  transform: scaleX(0.22);
  transform-origin: left;
  transition: transform 180ms ease;
}

.cscube-redesign .cs-card--interactive:hover,
.cscube-redesign .cs-card--interactive:focus-within {
  border-color: rgba(255, 106, 0, 0.45);
  box-shadow: var(--cs-card-shadow-strong);
  transform: translateY(-3px);
}

.cscube-redesign .cs-card--interactive:hover::after,
.cscube-redesign .cs-card--interactive:focus-within::after {
  transform: scaleX(1);
}

/* Hero: eine einzelne Akzentbox auf hellem Grund. */
.cscube-redesign .cs-chain.cs-card--accent {
  border-top-color: var(--cs-line) !important;
  border-right-color: var(--cs-line) !important;
  border-bottom-color: var(--cs-line) !important;
  border-left-color: var(--cs-orange) !important;
  background: var(--cs-white) !important;
  box-shadow: var(--cs-card-shadow-strong) !important;
}

/* Die vier Leistungsfelder sind statische Standardkarten auf dunklem Abschnitt. */
.cscube-redesign .cs-capability-card.cs-card--standard {
  border-color: rgba(255, 255, 255, 0.24) !important;
  background: var(--cs-white) !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.12) !important;
}

/* Hauptprojekten: einheitliche Akzentkarten, keine scheinbare Klickfunktion. */
.cscube-redesign .cs-project-card.cs-card--accent {
  border-top-color: var(--cs-line) !important;
  border-right-color: var(--cs-line) !important;
  border-bottom-color: var(--cs-line) !important;
  border-left-color: var(--cs-orange) !important;
  background: var(--cs-white) !important;
  box-shadow: var(--cs-card-shadow) !important;
}

.cscube-redesign .cs-project-card::before {
  display: none !important;
  content: none !important;
}

/* Weitere Projekte: ruhige, leicht getoente Standardkarten auf weissem Abschnitt. */
.cscube-redesign .cs-mini-card.cs-card--standard {
  background: var(--cs-warm) !important;
  box-shadow: none !important;
}

/* Projektnachweis: Akzentkarte; FAQ: Standardkarten auf grauem Abschnitt. */
.cscube-redesign .cs-reference-callout.cs-card--accent {
  border-top-color: var(--cs-line) !important;
  border-right-color: var(--cs-line) !important;
  border-bottom-color: var(--cs-line) !important;
  border-left-color: var(--cs-orange) !important;
  background: #f7f7f7 !important;
}

.cscube-redesign .cs-faq-item.cs-card--standard {
  border-top: 1px solid var(--cs-line) !important;
  background: var(--cs-white) !important;
  box-shadow: var(--cs-card-shadow) !important;
}

/*
  Interaktionsregel:
  Nur tatsaechlich anklickbare Elemente reagieren auf Hover oder Tastaturfokus.
  Reine Informationskarten behalten ihren visuellen Zustand unveraendert.
*/
.cscube-redesign .cs-capability-card,
.cscube-redesign .cs-project-card,
.cscube-redesign .cs-mini-card,
.cscube-redesign .cs-faq-item,
.cscube-redesign .cs-chain,
.cscube-redesign .cs-reference-callout {
  cursor: default;
  transition: none !important;
  transform: none !important;
}

/* Leistungsfelder: statischer Zustand auch beim Ueberfahren. */
.cscube-redesign .cs-capability-card:hover {
  border-color: rgba(255, 255, 255, 0.24) !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.12) !important;
  transform: none !important;
}

/* Hauptprojekten: statischer Zustand mit orangem Seitenakzent. */
.cscube-redesign .cs-project-card:hover {
  border-top-color: var(--cs-line) !important;
  border-right-color: var(--cs-line) !important;
  border-bottom-color: var(--cs-line) !important;
  border-left-color: var(--cs-orange) !important;
  box-shadow: var(--cs-card-shadow) !important;
  transform: none !important;
}

/* Kompakte Projekten: keine Hervorhebung ohne Klickziel. */
.cscube-redesign .cs-mini-card:hover {
  border-color: var(--cs-line) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* FAQ-Karten: statische Informationsboxen. */
.cscube-redesign .cs-faq-item:hover {
  border-color: var(--cs-line) !important;
  box-shadow: var(--cs-card-shadow) !important;
  transform: none !important;
}

/* Die beiden Akzentboxen im Hero und beim Projektnachweis bleiben ebenfalls statisch. */
.cscube-redesign .cs-chain:hover,
.cscube-redesign .cs-reference-callout:hover {
  transform: none !important;
}

/* Alte dekorative Hover-Linien statischer Karten werden entfernt. */
.cscube-redesign .cs-capability-card::after,
.cscube-redesign .cs-mini-card::after {
  display: none !important;
  content: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .cscube-redesign .cs-card--interactive,
  .cscube-redesign .cs-card--interactive::after {
    transition: none !important;
  }
}



/*
  CS Cube Designsystem v6 – Typografie, Linien, Texte, Listen und Basiselemente
  -----------------------------------------------------------------------------
  Ueberschriften:
    .cs-heading--display       H1 / Seitentitel
    .cs-heading--section       H2 / grosse Abschnittsueberschrift
    .cs-heading--callout       H2 / kompakter Hinweis- oder CTA-Baustein
    .cs-heading--card          H3 / grosse Projektkarte
    .cs-heading--card-compact  H3 / Leistungs-, Mini- und FAQ-Karte
    .cs-heading--overline      H4 / kleine Zwischenueberschrift in Karten

  Texte:
    .cs-text--lead             Einleitung im Seitenkopf
    .cs-text--section-intro    Erlaeuterung neben Abschnittsueberschrift
    .cs-text--body             regulaerer hervorgehobener Fliesstext
    .cs-text--summary          Projektzusammenfassung
    .cs-text--small            kompakter Karten- und Detailtext
    .cs-text--note             Hinweis / Disclaimer

  Kleine Ueberschriften und Linien:
    .cs-kicker                 Zeile mit kurzer Linie ueber einer Ueberschrift
    .cs-label                  kleine inhaltliche Kennzeichnung
    .cs-label--accent          orange Kennzeichnung

  Listen:
    .cs-list                   neutraler Listen-Reset
    .cs-list--pills            horizontale, umbrechende Pill-Liste
    .cs-list--bullets          klassische Aufzaehlung mit orangefarbenem Punkt
    .cs-list--check            Aufzaehlung mit orangefarbenem Haken
    .cs-pill--soft             statischer Begriff
    .cs-pill--link             verlinkter Begriff mit Hover-/Fokuszustand

  Die vorhandenen komponentenspezifischen Klassen bleiben fuer Layout und
  Semantik bestehen. Die neuen Klassen steuern die websiteweit einheitliche
  visuelle Hierarchie.
*/

.cscube-redesign {
  --cs-type-display: clamp(2.75rem, 6.2vw, 5.8rem);
  --cs-type-section: clamp(2rem, 4vw, 3.6rem);
  --cs-type-callout: clamp(1.35rem, 2.6vw, 2rem);
  --cs-type-card: clamp(1.35rem, 2.3vw, 2rem);
  --cs-type-card-compact: 1.16rem;
  --cs-type-body: 1rem;
  --cs-type-small: 0.91rem;
  --cs-type-label: 0.75rem;
}

/* Ueberschriften */
.cscube-redesign .cs-heading {
  margin-top: 0;
  color: var(--cs-charcoal);
  font-family: inherit;
  font-weight: 720;
  letter-spacing: -0.025em;
}
.cscube-redesign .cs-heading--display {
  max-width: 13ch;
  margin-bottom: 0;
  font-size: var(--cs-type-display);
  font-weight: 750;
  line-height: 0.98;
}
.cscube-redesign .cs-heading--section {
  max-width: 17ch;
  margin-bottom: 0;
  font-size: var(--cs-type-section);
  line-height: 1.06;
}
.cscube-redesign .cs-heading--callout {
  max-width: none;
  margin-bottom: 0.25rem;
  font-size: var(--cs-type-callout);
  line-height: 1.15;
}
.cscube-redesign .cs-heading--card {
  max-width: none;
  margin-bottom: 1rem;
  font-size: var(--cs-type-card);
  line-height: 1.18;
}
.cscube-redesign .cs-heading--card-compact {
  max-width: none;
  margin-bottom: 0.7rem;
  font-size: var(--cs-type-card-compact);
  line-height: 1.3;
}
.cscube-redesign .cs-capability-card .cs-heading--card-compact {
  margin-top: 1.35rem;
  margin-bottom: 0.8rem;
  font-size: 1.22rem;
}
.cscube-redesign .cs-heading--overline {
  margin-bottom: 0.55rem;
  color: var(--cs-charcoal);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  line-height: 1.35;
  text-transform: uppercase;
}

/* Kurze Zeile mit Linie ueber Abschnittsueberschriften */
.cscube-redesign .cs-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1rem;
  padding: 0;
  color: var(--cs-orange-dark) !important;
  background: transparent !important;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  line-height: 1.3;
  text-transform: uppercase;
}
.cscube-redesign .cs-kicker::before {
  content: "";
  flex: 0 0 auto;
  width: 1.8rem;
  height: 0.16rem;
  border-radius: 99px;
  background: currentColor;
}
.cscube-redesign .cs-section--dark .cs-kicker {
  color: #ff9b54 !important;
}
.cscube-redesign .cs-section--dark .cs-heading--section {
  color: var(--cs-white) !important;
}

/* Kleine Kennzeichnungen */
.cscube-redesign .cs-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0;
  font-size: var(--cs-type-label);
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--cs-orange-dark) !important;
}
.cscube-redesign .cs-label--accent { color: var(--cs-orange-dark) !important; }

/* Textstufen */
.cscube-redesign .cs-text { color: var(--cs-muted); }
.cscube-redesign .cs-text--lead {
  max-width: 47rem;
  margin: 1.6rem 0 0;
  color: var(--cs-muted) !important;
  font-size: clamp(1.08rem, 1.8vw, 1.32rem);
  line-height: 1.62;
}
.cscube-redesign .cs-text--section-intro {
  max-width: 46rem;
  margin: 0;
  color: var(--cs-muted) !important;
  font-size: var(--cs-type-body);
  line-height: 1.68;
}
.cscube-redesign .cs-text--body {
  margin-top: 0;
  color: var(--cs-muted) !important;
  font-size: var(--cs-type-body);
  line-height: 1.68;
}
.cscube-redesign .cs-text--summary {
  margin: 0 0 1.6rem;
  color: var(--cs-muted) !important;
  font-size: var(--cs-type-body);
  line-height: 1.68;
}
.cscube-redesign .cs-text--small {
  color: var(--cs-muted) !important;
  font-size: var(--cs-type-small);
  line-height: 1.62;
}
.cscube-redesign .cs-text--note {
  color: var(--cs-muted) !important;
  font-size: 0.78rem;
  line-height: 1.55;
  text-align: center;
}
.cscube-redesign .cs-section--dark .cs-text--section-intro {
  color: rgba(255,255,255,.82) !important;
}

/* Proofbar */
.cscube-redesign .cs-proof-copy { display: block; }
.cscube-redesign .cs-proof-title {
  display: block;
  color: var(--cs-charcoal);
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.3;
}
.cscube-redesign .cs-proof-text {
  display: block;
  margin-top: 0.25rem;
  color: var(--cs-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

/* Listen und Pills */
.cscube-redesign .cs-list {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}
.cscube-redesign .cs-list--pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.cscube-redesign .cs-list--sectors { margin-top: 2.2rem; }
.cscube-redesign .cs-list--options { margin-top: 0; }
.cscube-redesign .cs-list--tags { margin-top: 1.55rem; }
.cscube-redesign .cs-list-item { margin: 0; }
.cscube-redesign .cs-pill {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.38rem 0.64rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none !important;
}
.cscube-redesign .cs-pill--soft {
  border: 1px solid var(--cs-line);
  color: var(--cs-graphite) !important;
  background: var(--cs-warm) !important;
}
.cscube-redesign .cs-pill--link {
  border: 1px solid transparent;
  color: var(--cs-graphite) !important;
  background: var(--cs-warm) !important;
  transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
}
.cscube-redesign .cs-pill--link:hover,
.cscube-redesign .cs-pill--link:focus-visible {
  border-color: var(--cs-orange-dark);
  color: var(--cs-white) !important;
  background: var(--cs-orange-dark) !important;
}
.cscube-redesign .cs-list--bullets,
.cscube-redesign .cs-list--check {
  display: grid;
  gap: 0.65rem;
  padding-left: 0;
  list-style: none;
}
.cscube-redesign .cs-list--bullets > li,
.cscube-redesign .cs-list--check > li {
  position: relative;
  padding-left: 1.35rem;
}
.cscube-redesign .cs-list--bullets > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--cs-orange);
}
.cscube-redesign .cs-list--check > li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--cs-orange-dark);
  font-weight: 800;
}

/* Zitate */
.cscube-redesign .cs-quote-text {
  margin: 0;
  color: var(--cs-white);
  font-size: clamp(1.08rem, 1.8vw, 1.35rem);
  font-weight: 650;
  line-height: 1.45;
}
.cscube-redesign .cs-quote-source {
  margin-top: 1.2rem;
  color: #ff9b54;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* Korrektur: Hero-Branchenpills wurden zuvor versehentlich ueber span statt li adressiert. */
.cscube-redesign .cs-hero .cs-list--sectors .cs-pill {
  border-color: var(--cs-line) !important;
  color: var(--cs-graphite) !important;
  background: var(--cs-warm) !important;
}

/* CTA bleibt hell; Klassen regeln Farbe explizit statt ueber rohe Elemente. */
.cscube-redesign .cs-cta .cs-heading--section { color: var(--cs-charcoal) !important; }
.cscube-redesign .cs-cta .cs-text--body { color: var(--cs-muted) !important; }

@media (max-width: 52rem) {
  .cscube-redesign .cs-heading--display { max-width: 12ch; }
}


/* Direkter Sprung von der Branchenübersicht zu den Hauptprojekten */
.cscube-redesign .cs-project-jump {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1rem;
  color: var(--cs-orange-dark) !important;
  font-size: 0.82rem;
  font-weight: 750;
  line-height: 1.4;
  text-decoration: none !important;
  text-underline-offset: 0.2em;
}
.cscube-redesign .cs-project-jump::after {
  content: "↓";
  display: inline-block;
  font-size: 1rem;
  line-height: 1;
  transition: transform 150ms ease;
}
.cscube-redesign .cs-project-jump:hover,
.cscube-redesign .cs-project-jump:focus-visible {
  color: var(--cs-charcoal) !important;
  text-decoration: underline !important;
}
.cscube-redesign .cs-project-jump:hover::after,
.cscube-redesign .cs-project-jump:focus-visible::after {
  transform: translateY(0.18rem);
}
.cscube-redesign .cs-anchor-target {
  scroll-margin-top: 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .cscube-redesign .cs-pill--link,
  .cscube-redesign .cs-project-jump::after { transition: none; }
}



/*
  CS Cube Designsystem v7 – Bereinigung ungewollter Kaskadenabweichungen
  ----------------------------------------------------------------------
  Ziel: Eine Designklasse erzeugt dieselbe Typografie. Gewollte Unterschiede
  werden nur noch über explizite Modifier oder den Hell-/Dunkelkontext gesteuert.
*/
.cscube-redesign {
  --cs-type-kicker: 0.78rem;
  --cs-type-label-compact: 0.68rem;
  --cs-type-pill: 0.74rem;
  --cs-type-pill-compact: 0.72rem;
}

/* Kicker: überall identische Typografie, Linie und Abstand. Nur die Farbe
   unterscheidet sich bewusst zwischen hellen und dunklen Abschnitten. */
.cscube-redesign .cs-kicker,
.cscube-redesign .cs-section-heading .cs-kicker,
.cscube-redesign .cs-cta .cs-kicker,
.cscube-redesign .cs-hero .cs-kicker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  margin: 0 0 1rem !important;
  padding: 0 !important;
  background: transparent !important;
  font-size: var(--cs-type-kicker) !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
}
.cscube-redesign .cs-kicker,
.cscube-redesign .cs-hero .cs-kicker,
.cscube-redesign .cs-cta .cs-kicker { color: var(--cs-orange-dark) !important; }
.cscube-redesign .cs-section--dark .cs-kicker { color: #ff9b54 !important; }
.cscube-redesign .cs-kicker::before {
  width: 1.8rem !important;
  height: 0.16rem !important;
  background: currentColor !important;
}

/* Kompakte Kartenüberschrift: gleiche Typografie in Leistungs-, Mini- und FAQ-Karten. */
.cscube-redesign .cs-heading--card-compact,
.cscube-redesign .cs-capability-card .cs-heading--card-compact,
.cscube-redesign .cs-mini-card .cs-heading--card-compact,
.cscube-redesign .cs-faq-item .cs-heading--card-compact {
  margin-top: 0 !important;
  margin-bottom: 0.7rem !important;
  font-size: var(--cs-type-card-compact) !important;
  font-weight: 720 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.025em !important;
}
/* Nur der Abstand nach dem Icon ist in den Leistungskarten layoutbedingt anders. */
.cscube-redesign .cs-capability-card .cs-capability-title { margin-top: 1.35rem !important; }

/* Abschnittsüberschrift mit nachfolgendem CTA-Text: gewollter Abstand als Modifier. */
.cscube-redesign .cs-heading--with-copy { margin-bottom: 0.75rem !important; }

/* Textklassen setzen Schriftgrad und Zeilenhöhe verbindlich; ältere rohe p-Regeln
   dürfen diese Stufen nicht mehr unbemerkt verändern. */
.cscube-redesign .cs-text--body {
  font-size: var(--cs-type-body) !important;
  line-height: 1.68 !important;
}
.cscube-redesign .cs-text--small {
  font-size: var(--cs-type-small) !important;
  line-height: 1.62 !important;
}
.cscube-redesign .cs-text--with-gap { margin-bottom: 1.15rem !important; }

/* Labels: orange Akzentkennzeichnung als einziger Standard; kleinere Branchenlabels nur mit Modifier. */
.cscube-redesign .cs-label {
  font-size: var(--cs-type-label) !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--cs-orange-dark) !important;
}
.cscube-redesign .cs-label--accent { color: var(--cs-orange-dark) !important; }
.cscube-redesign .cs-label--compact {
  font-size: var(--cs-type-label-compact) !important;
  line-height: 1.35 !important;
}

/* Pills: dieselbe Grundform; die kleinere Tag-Variante ist explizit benannt. */
.cscube-redesign .cs-pill,
.cscube-redesign .cs-chain-options .cs-pill {
  min-height: 2rem !important;
  padding: 0.38rem 0.64rem !important;
  font-size: var(--cs-type-pill) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}
.cscube-redesign .cs-tags .cs-pill.cs-pill--compact {
  min-height: 0 !important;
  padding: 0.35rem 0.58rem !important;
  font-size: var(--cs-type-pill-compact) !important;
  line-height: 1.3 !important;
}


/* ==========================================================================\n   CS Cube – neutrale Erweiterungen des gemeinsamen Designsystems\n   ========================================================================== */


/* Graphitfarbener Standardabschnitt. cs-section--dark steuert nur die dunkle Typografie. */
.cscube-redesign .cs-section--graphite {
  color: var(--cs-white);
  background: #4f4c4c;
  border-top: 0;
}

/* Neutraler Abstand für den ersten Abschnitt nach einer überlappenden Proofbar. */
.cscube-redesign .cs-section--after-proofbar {
  padding-top: 5.25rem !important;
}

/* Handlungsgruppe im Hero oder in anderen Komponenten. */
.cscube-redesign .cs-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  align-items: center;
  margin-top: 2rem;
}
.cscube-redesign .cs-actions .cs-project-jump {
  flex-basis: 100%;
  margin-top: .15rem;
}

/* Akzent-Callout: gleiche Kartenbasis, nur der Innenabstand ist eine eigene Rolle. */
.cscube-redesign .cs-callout-card {
  padding: clamp(1.5rem, 3vw, 2.1rem);
}
.cscube-redesign .cs-callout-card .cs-heading {
  margin-bottom: 1rem;
}

/* Universelle Inhaltsraster. */
.cscube-redesign .cs-grid {
  display: grid;
  gap: 1.25rem;
}
.cscube-redesign .cs-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cscube-redesign .cs-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cscube-redesign .cs-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Generische gepolsterte Inhaltskarte. */
.cscube-redesign .cs-card--padded {
  height: 100%;
  padding: clamp(1.35rem, 2.4vw, 1.8rem);
}
.cscube-redesign .cs-card--padded .cs-heading { margin-bottom: .75rem; }
.cscube-redesign .cs-card--padded > p:not(.cs-label) {
  color: var(--cs-muted);
}
.cscube-redesign .cs-card--stack {
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.cscube-redesign .cs-card-link {
  margin-top: auto !important;
  padding-top: .25rem;
}
.cscube-redesign .cs-card-link a,
.cscube-redesign .cs-inline-link {
  color: var(--cs-orange-dark) !important;
  font-weight: 700;
}

/* Prozesskarten – nummerierte Reihenfolge ohne eigene Seitensemantik. */
.cscube-redesign .cs-process { counter-reset: cs-step; }
.cscube-redesign .cs-process-card {
  position: relative;
  padding-top: 4.2rem !important;
}
.cscube-redesign .cs-process-card::before {
  counter-increment: cs-step;
  content: counter(cs-step, decimal-leading-zero);
  position: absolute;
  top: 1.35rem;
  left: 1.45rem;
  color: var(--cs-orange);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: .04em;
}

/* Zweispaltiger Ergebnis-/Inhaltsbereich. */
.cscube-redesign .cs-split {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(20rem, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

/* Akzentierte Ergebnisliste. */
.cscube-redesign .cs-list--accent-panels {
  display: grid;
  gap: .85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cscube-redesign .cs-list--accent-panels > li {
  margin: 0;
  padding: 1rem 1.1rem;
  border-left: .25rem solid var(--cs-orange);
  border-radius: .55rem;
  color: var(--cs-text);
  background: #fff;
}

/* Standardkarte auf dunklem Hintergrund. */
.cscube-redesign .cs-card--on-dark {
  border-color: rgba(255,255,255,.22) !important;
  background: #fff !important;
  box-shadow: 0 16px 38px rgba(0,0,0,.13) !important;
}
.cscube-redesign .cs-card--on-dark p { color: var(--cs-muted); }

.cscube-redesign .cs-section-link { margin: 2rem 0 0; }

@media (max-width: 68rem) {
  .cscube-redesign .cs-grid--4,
  .cscube-redesign .cs-grid--3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 56rem) {
  .cscube-redesign .cs-split { grid-template-columns: 1fr; }
}
@media (max-width: 40rem) {
  .cscube-redesign .cs-grid--4,
  .cscube-redesign .cs-grid--3,
  .cscube-redesign .cs-grid--2 { grid-template-columns: 1fr; }
  .cscube-redesign .cs-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .cscube-redesign .cs-actions .cs-button { width: 100%; }
}