/* ================================================
   SUBPAGE SHARED STYLES
   Page Hero, Feature Blocks, Case Studies, Legal Pages, 404
   Used by: datenraum.html, docuspine.html,
            erfolgsgeschichten/*.html, datenschutz.html,
            impressum.html, 404.html
   ================================================ */

/* ---- Page Hero (dark) ---- */
.page-hero {
  background: var(--midnight);
  padding: 140px 0 96px;
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,82,211,0.18) 0%, transparent 70%);
  pointer-events: none;
}
.page-hero .container {
  position: relative;
  z-index: 1;
}
.page-hero__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.page-hero__content { max-width: 560px; }

.page-hero__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 4.5vw, 54px);
  line-height: 1.08;
  letter-spacing: -1.5px;
  color: var(--pure-white);
  margin-bottom: 24px;
}
.page-hero__desc {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255,255,255,0.68);
  margin-bottom: 40px;
}
.page-hero__visual { position: relative; }
.page-hero__visual-inner {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 8px;
  backdrop-filter: blur(8px);
  overflow: hidden;
}

/* ---- Breadcrumb ---- */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  margin-bottom: 32px;
}
.breadcrumb a {
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  transition: color 0.2s;
}
.breadcrumb a:hover { color: rgba(255,255,255,0.85); }
.breadcrumb__sep { opacity: 0.35; }

/* ---- Stats Row ---- */
.stats-row {
  display: flex;
  align-items: stretch;
  background: var(--pure-white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 40px rgba(0,0,0,0.10);
  margin: -48px 0 0;
  position: relative;
  z-index: 10;
}
.stat-item {
  flex: 1;
  padding: 36px 28px;
  text-align: center;
  border-right: 1px solid var(--border-light);
}
.stat-item:last-child { border-right: none; }
.stat-item__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 38px;
  letter-spacing: -1px;
  color: var(--midnight);
  line-height: 1;
  display: block;
  margin-bottom: 8px;
}
.stat-item__label {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.45;
}

/* ---- Section Intro ---- */
.section-intro {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 72px;
}
.section-intro h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 3.8vw, 46px);
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--text-dark);
  margin-bottom: 16px;
}
.section-intro p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-muted);
}

/* ---- Approach Section ---- */
.approach-section {
  padding: var(--section-pad) 0 80px;
  background: var(--bg-light);
}

/* ---- Alternating Feature Blocks ---- */
.features-section {
  padding: 80px 0 var(--section-pad);
  background: var(--pure-white);
}
.feature-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 96px;
  align-items: center;
  margin-bottom: 96px;
}
.feature-block:last-child { margin-bottom: 0; }
.feature-block--reverse .feature-block__visual { order: -1; }

.feature-block__eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-blue);
  margin-bottom: 14px;
}
.feature-block__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.8vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--text-dark);
  margin-bottom: 16px;
}
.feature-block__text {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-body);
  margin-bottom: 24px;
}
.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-body);
  line-height: 1.5;
}
.feature-list li::before {
  content: '';
  width: 18px;
  height: 18px;
  min-width: 18px;
  border-radius: 50%;
  background-color: rgba(0,82,211,0.08);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230052D3'%3E%3Cpath d='M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z'/%3E%3C/svg%3E");
  background-size: 10px;
  background-repeat: no-repeat;
  background-position: center;
  margin-top: 1px;
  flex-shrink: 0;
}

/* Feature Visual Placeholder */
.feature-block__visual-inner {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* ---- Mini UI Mockups (Feature Visuals) ---- */
.feat-mock {
  width: 100%;
  height: 100%;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
}
.feat-mock--blue { background: linear-gradient(135deg, #0d2a5e 0%, #0052D3 100%); color: rgba(255,255,255,0.85); }
.feat-mock--dark { background: linear-gradient(135deg, #111144 0%, #1a2a6b 100%); color: rgba(255,255,255,0.85); }
.feat-mock--gray { background: var(--bg-light); color: var(--text-body); }
.feat-mock--navy { background: linear-gradient(135deg, #0a1628 0%, #112244 60%, #0052D3 100%); color: rgba(255,255,255,0.85); }
.feat-mock--teal { background: linear-gradient(135deg, #003344 0%, #005577 50%, #0088aa 100%); color: rgba(255,255,255,0.85); }

.feat-mock__topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  font-size: 11px;
  opacity: 0.7;
}
.feat-mock__topbar--dark { border-bottom-color: rgba(0,0,0,0.1); opacity: 0.6; }
.feat-mock__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.3); }
.feat-mock__dot:nth-child(1) { background: #ff5f57; }
.feat-mock__dot:nth-child(2) { background: #febc2e; }
.feat-mock__dot:nth-child(3) { background: #28c840; }

.feat-mock__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
}
.feat-mock__row--hl { background: rgba(0,82,211,0.25); }
.feat-mock__row--light { background: rgba(255,255,255,0.04); }
.feat-mock__icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.feat-mock__icon svg { width: 14px; height: 14px; stroke: rgba(255,255,255,0.8); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.feat-mock__label { flex: 1; font-size: 11px; }
.feat-mock__badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(0,200,100,0.2);
  color: #4ade80;
  border: 1px solid rgba(0,200,100,0.3);
}
.feat-mock__badge--warn { background: rgba(250,170,0,0.15); color: #fbbf24; border-color: rgba(250,170,0,0.3); }
.feat-mock__badge--blue { background: rgba(0,82,211,0.2); color: #60a5fa; border-color: rgba(0,82,211,0.3); }
.feat-mock__bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.feat-mock__bar-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--brand-blue);
}
.feat-mock__chat-bubble {
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 11px;
  line-height: 1.5;
  max-width: 90%;
}
.feat-mock__chat-bubble--user {
  background: var(--brand-blue);
  color: white;
  align-self: flex-end;
  margin-left: auto;
}
.feat-mock__chat-bubble--ai {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.1);
}
.feat-mock__source {
  font-size: 10px;
  opacity: 0.5;
  margin-top: 4px;
}
.feat-mock__number {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 42px;
  letter-spacing: -2px;
  color: var(--pure-white);
  line-height: 1;
}
.feat-mock__number-label { font-size: 11px; opacity: 0.6; margin-top: 4px; }

/* ---- KI Highlight Section ---- */
.ki-section {
  background: var(--midnight);
  padding: var(--section-pad) 0;
  position: relative;
  overflow: hidden;
}
.ki-section::after {
  content: '';
  position: absolute;
  bottom: -150px;
  left: -150px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,82,211,0.15) 0%, transparent 70%);
  pointer-events: none;
}
.ki-section .container { position: relative; z-index: 1; }
.ki-section__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.ki-section__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 14px;
}
.ki-section__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.15;
  letter-spacing: -1px;
  color: var(--pure-white);
  margin-bottom: 20px;
}
.ki-section__text {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  color: rgba(255,255,255,0.65);
}
.ki-stat-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 20px;
  padding: 48px 40px;
  text-align: center;
}
.ki-stat-card__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 72px;
  letter-spacing: -3px;
  color: var(--pure-white);
  line-height: 1;
  display: block;
  margin-bottom: 12px;
}
.ki-stat-card__label {
  font-family: var(--font-body);
  font-size: 16px;
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
}
.ki-stat-card__sub {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255,255,255,0.35);
  margin-top: 12px;
  display: block;
}

/* ---- Testimonial Section ---- */
.testimonial-section {
  padding: var(--section-pad) 0;
  background: var(--bg-light);
}
.testimonial-card-large {
  background: var(--pure-white);
  border-radius: 24px;
  padding: 64px;
  max-width: 880px;
  margin: 0 auto;
  box-shadow: 0 4px 48px rgba(0,0,0,0.06);
  position: relative;
}
.testimonial-card-large::before {
  content: '\201C';
  position: absolute;
  top: 32px;
  left: 56px;
  font-family: var(--font-display);
  font-size: 120px;
  line-height: 1;
  color: var(--brand-blue);
  opacity: 0.07;
  font-weight: 800;
}
.testimonial-card-large__quote {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.75;
  color: var(--text-dark);
  margin-bottom: 40px;
  position: relative;
  z-index: 1;
}
.testimonial-card-large__author {
  display: flex;
  align-items: center;
  gap: 16px;
}
.testimonial-card-large__divider {
  width: 1px;
  height: 32px;
  background: var(--border);
}
.testimonial-card-large__logo {
  height: 28px;
  width: auto;
  opacity: 0.55;
}
.testimonial-card-large__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--text-dark);
  display: block;
}
.testimonial-card-large__role {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-muted);
  display: block;
  margin-top: 3px;
}

/* ================================================
   CASE STUDY — cs2-Layout (portiert aus docunite-website)
   ================================================ */

/* ── HERO ── */
.cs2-hero {
  padding: 160px 0 64px;
  background: var(--pure-white);
}
.cs2-hero__eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.cs2-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
}
.cs2-hero__back:hover { color: var(--brand-blue); }
.cs2-hero__back svg { transition: transform 0.2s; flex-shrink: 0; }
.cs2-hero__back:hover svg { transform: translateX(-3px); }
.cs2-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-blue);
  margin: 0;
}
.cs2-hero__headline {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 550;
  line-height: 1.05;
  letter-spacing: -2px;
  color: var(--text-dark);
  margin: 0 0 28px;
  max-width: 900px;
}
.cs2-hero__sub {
  font-size: 18px;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 680px;
  margin: 0;
}

/* ── HERO IMAGE / VIDEO ── */
.cs2-hero__image-wrap {
  margin-top: 64px;
  border-radius: 20px;
  overflow: hidden;
  width: 100%;
  height: 560px;
}
.cs2-hero__image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}
.cs2-hero__image-wrap--video {
  height: auto;
  aspect-ratio: 16 / 9;
  background: #000;
}
.cs2-hero__media {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  object-fit: cover;
}

/* ── BODY: zwei Spalten ── */
.cs2-body {
  padding: 80px 0 96px;
  background: var(--pure-white);
}
.cs2-body__inner {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 80px;
  align-items: start;
}
/* Grid-Items duerfen schrumpfen (min-width: auto -> 0) — sonst sprengt
   breiter Inhalt (z.B. ein langer Ergebnis-Wert) die Spalte und damit
   die gesamte Seitenbreite. */
.cs2-body__inner > * { min-width: 0; }

/* ── HAUPTSPALTE ── */
.cs2-block {
  padding-bottom: 56px;
  margin-bottom: 56px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.cs2-block:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.cs2-block__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-blue);
  margin-bottom: 20px;
}
.cs2-block__heading {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 550;
  line-height: 1.1;
  letter-spacing: -1.2px;
  color: var(--text-dark);
  margin: 0 0 24px;
}
.cs2-block__text {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-body);
  margin: 0 0 16px;
}
.cs2-block__text:last-of-type { margin-bottom: 0; }
.cs2-block__quote {
  margin: 28px 0 0;
  padding: 20px 0 20px 32px;
  border-left: 4px solid var(--brand-blue);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-dark);
}
.cs2-block__quote-attr {
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

/* Ergebnisse */
.cs2-results {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 40px;
  border-top: 1px solid rgba(0,0,0,0.08);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.cs2-result {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 32px 24px 32px 0;
  min-width: 0;
}
.cs2-result:nth-child(odd) { padding-left: 0; }
.cs2-result:nth-child(even) { padding-left: 24px; }
.cs2-result:nth-child(3),
.cs2-result:nth-child(4) { border-top: 1px solid rgba(0,0,0,0.08); }
.cs2-result__value {
  font-family: var(--font-mono);
  font-size: 52px;
  font-weight: 500;
  letter-spacing: -2px;
  color: var(--text-dark);
  line-height: 1;
  /* Lange Werte (z.B. ganze Woerter statt Zahlen) duerfen umbrechen,
     statt die Zelle und damit das Layout zu sprengen. */
  overflow-wrap: break-word;
}
.cs2-result__label {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ── SIDEBAR ── */
.cs2-sidebar {
  position: sticky;
  top: 100px;
}
.cs2-sidebar__logo {
  width: 100%;
  height: 180px;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 15px;
  margin-bottom: 32px;
}
.cs2-sidebar__card {
  background: none;
  border: none;
  padding: 0;
}
.cs2-sidebar__title { display: none; }
.cs2-sidebar__rows {
  display: flex;
  flex-direction: column;
}
.cs2-sidebar__row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 0;
}
.cs2-sidebar__row:first-child { padding-top: 0; }
.cs2-sidebar__row:last-child { padding-bottom: 0; }
.cs2-sidebar__row-label {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
}
.cs2-sidebar__row-value {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: #4a4a4a;
  line-height: 1.5;
}

/* ── FULL-WIDTH QUOTE ── */
.cs2-quote {
  padding: 96px 0;
  background: var(--pure-white);
}
.cs2-quote__inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  border-top: 2px solid var(--brand-blue);
  padding-top: 56px;
}
.cs2-quote__text {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 550;
  line-height: 1.4;
  letter-spacing: -0.8px;
  color: var(--text-dark);
  margin: 0 0 40px;
}
.cs2-quote__author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.cs2-quote__logo {
  height: 28px;
  width: auto;
}
.cs2-quote__sep {
  width: 1px;
  height: 28px;
  background: rgba(0,0,0,0.15);
  display: block;
}
.cs2-quote__name {
  display: block;
  font-weight: 550;
  font-size: 14px;
  color: var(--text-dark);
}
.cs2-quote__role {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ── NAECHSTE ERFOLGSGESCHICHTE ── */
.cs2-more {
  padding: 0;
  background: var(--pure-white);
}
.cs2-more__list {
  border-top: 1px solid rgba(0,0,0,0.08);
}
.cs2-more-card {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 80px;
  align-items: center;
  padding: 64px 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  text-decoration: none;
  color: inherit;
}
.cs2-more-card:hover .cs2-more-card__image { transform: scale(1.02); }
.cs2-more-card__left {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.cs2-more-card__next {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cs2-more-card__next svg { flex-shrink: 0; }
.cs2-more-card__headline {
  display: block;
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 550;
  letter-spacing: -1.2px;
  line-height: 1.1;
  color: var(--text-dark);
}
.cs2-more-card__image-wrap {
  overflow: hidden;
  border-radius: 15px;
  aspect-ratio: 3/2;
  justify-self: end;
  width: 100%;
}
.cs2-more-card__image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease;
}

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .cs2-hero__headline { font-size: 52px; }
  .cs2-hero__image-wrap { height: 440px; }
  .cs2-body__inner { grid-template-columns: 1fr 300px; gap: 48px; }
  .cs2-result__value { font-size: 28px; }
}
@media (max-width: 768px) {
  .cs2-hero { padding: 120px 0 48px; }
  .cs2-hero__headline { font-size: 40px; letter-spacing: -1.5px; }
  .cs2-hero__sub { font-size: 16px; }
  .cs2-hero__image-wrap { height: auto; aspect-ratio: 16 / 9; margin-top: 40px; border-radius: 15px; }
  .cs2-body__inner { grid-template-columns: 1fr; gap: 0; }
  .cs2-sidebar {
    position: static;
    order: -1;
    margin-bottom: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
  }
  /* Sidebar-Bild ist nur das Hero-Cover-Fallback → auf Mobile stuende es
     direkt unter dem Hero-Bild (doppeltes Bild). Duplikat hier ausblenden. */
  .cs2-sidebar__logo--hero-dup { display: none; }
  /* Ergebnisse auf Mobile einspaltig — volle Breite je Wert, kein
     Quetschen langer Werte in eine 2-Spalten-Zelle. */
  .cs2-results { grid-template-columns: 1fr; }
  .cs2-result { gap: 8px; padding: 24px 0; }
  .cs2-result:nth-child(even) { padding-left: 0; }
  .cs2-result:not(:first-child) { border-top: 1px solid rgba(0,0,0,0.08); }
  .cs2-result__value { font-size: 32px; }
  .cs2-block__heading { font-size: 26px; }
  .cs2-quote__text { font-size: 20px; }
  .cs2-quote__author { flex-wrap: wrap; }
  .cs2-more-card { grid-template-columns: 1fr; gap: 24px; }
  .cs2-more-card__headline { font-size: 26px; }
}

/* ---- Comparison Section ---- */
.comparison-section {
  padding: 96px 0;
  background: var(--bg-light);
}
.comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 48px;
}
.comparison-col {
  border-radius: 20px;
  padding: 40px;
}
.comparison-col--without {
  background: var(--pure-white);
  border: 1px solid var(--border);
}
.comparison-col--with { background: var(--midnight); }
.comparison-col__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.comparison-col--without .comparison-col__heading { color: var(--text-muted); }
.comparison-col--with .comparison-col__heading { color: var(--pure-white); }
.comparison-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.comparison-list li {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.comparison-col--without .comparison-list li { color: var(--text-muted); }
.comparison-col--with .comparison-list li { color: rgba(255,255,255,0.75); }
.comparison-list__icon { flex-shrink: 0; margin-top: 1px; }
.comparison-list__icon svg { width: 16px; height: 16px; }

/* ---- Legal / Utility Pages ---- */
.legal-page {
  padding: 140px 0 var(--section-pad);
  background: var(--pure-white);
}
.legal-page__content {
  max-width: 760px;
  margin: 0 auto;
}
.legal-page h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1.08;
  letter-spacing: -1.5px;
  color: var(--text-dark);
  margin-bottom: 12px;
}
.legal-page__date {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 56px;
  display: block;
  border-bottom: 1px solid var(--border);
  padding-bottom: 32px;
}
.legal-page h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.3px;
  color: var(--text-dark);
  margin: 48px 0 12px;
}
.legal-page h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--text-dark);
  margin: 32px 0 10px;
}
.legal-page p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.85;
  color: var(--text-body);
  margin-bottom: 16px;
}
.legal-page a {
  color: var(--brand-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-page ul, .legal-page ol {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-body);
  padding-left: 24px;
  margin-bottom: 16px;
}
.legal-page li { margin-bottom: 6px; }

/* ---- 404 Page ---- */
.error-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--midnight);
  position: relative;
  overflow: hidden;
}
.error-page::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 40%, rgba(0,82,211,0.18) 0%, transparent 65%);
  pointer-events: none;
}
.error-page__nav-logo {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}
.error-page__nav-logo img { height: 28px; }
.error-page__inner {
  text-align: center;
  position: relative;
  z-index: 1;
  padding: 40px 24px;
}
.error-page__code {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(120px, 20vw, 200px);
  line-height: 1;
  letter-spacing: -8px;
  color: var(--pure-white);
  opacity: 0.06;
  display: block;
  user-select: none;
}
.error-page__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 40px);
  color: var(--pure-white);
  margin-top: -56px;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}
.error-page__text {
  font-family: var(--font-body);
  font-size: 17px;
  color: rgba(255,255,255,0.55);
  margin-bottom: 40px;
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.65;
}
.error-page__links {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---- Subpage Responsive ---- */
@media (max-width: 960px) {
  .page-hero__split {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .page-hero__visual { display: none; }
  .ki-section__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .feature-block {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .feature-block--reverse .feature-block__visual { order: 0; }
  .cs-section__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .comparison-grid { grid-template-columns: 1fr; }
  .cs-results__grid { grid-template-columns: 1fr 1fr; }
  .cs-more__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .page-hero { padding: 120px 0 64px; }
  .cs-hero { padding: 120px 0 64px; }
  .cs-hero__heading { letter-spacing: -1px; }
  .testimonial-card-large { padding: 40px 28px; }
  .testimonial-card-large::before { font-size: 72px; top: 24px; left: 28px; }
  .ki-stat-card__value { font-size: 56px; }
  .cs-results__grid { grid-template-columns: 1fr; }
  .stats-row { flex-direction: column; }
  .stat-item { border-right: none; border-bottom: 1px solid var(--border-light); }
  .stat-item:last-child { border-bottom: none; }
  .legal-page h1 { font-size: 32px; }
  .error-page__heading { margin-top: -40px; }
}

/* ================================================
   DEMO PAGE — Hero (dark, marquee) + Booking-Section
   Hero matches the page-hero pattern used on /produkt/datenraum
   so the page feels consistent with the rest of docunite.com.
   ================================================ */
/* Sticky-Footer-Pattern nur für die Demo-Page — body wird flex-column,
   .demo-main wächst auf min-height: 100vh, .demo-booking nimmt den
   verbleibenden Platz ein, footer sitzt dadurch immer unten. */
body:has(.demo-main) {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.demo-main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
.demo-main > .demo-booking {
  flex: 1 0 auto;
}

.demo-hero {
  position: relative;
  padding: 88px 0 40px;
  /* Gleicher radial-gradient wie der Startseiten-Hero (.hero in homepage.css). */
  background: radial-gradient(ellipse 120% 80% at 50% 100%, #003899 0%, #001f5e 35%, #000a2a 70%, #00081f 100%);
  color: var(--pure-white);
  isolation: isolate;
  overflow: hidden;
  flex-shrink: 0;
}
.demo-hero .container { position: relative; z-index: 1; }

.demo-hero__body {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.demo-hero__eyebrow {
  display: inline-flex;
  justify-content: center;
  margin-bottom: 14px;
}
.demo-hero__heading {
  font-family: var(--font-display);
  font-weight: 550;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.3px;
  margin: 0 0 12px;
  color: var(--pure-white);
}
.demo-hero__heading span { color: rgba(255,255,255,0.7); }
.demo-hero__sub {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255,255,255,0.78);
  margin: 0 auto;
  max-width: 560px;
}

/* ===== BOOKING SECTION — light, 2-col ===== */
.demo-booking {
  background: var(--bg-light);
  padding: 96px 0 120px;
}
.demo-booking__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 64px;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
}
.demo-pitch {
  position: sticky;
  top: 100px;
}
.demo-pitch__person {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 32px;
}
.demo-pitch__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.demo-pitch__person-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--text-dark);
}
.demo-pitch__person-role {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}
.demo-pitch__benefits {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.demo-pitch__benefit {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  color: var(--text-body);
  line-height: 1.5;
}
.demo-pitch__benefit-icon {
  width: 20px;
  height: 20px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.demo-pitch__benefit-icon svg {
  color: var(--brand-blue);
}
.demo-calendar {
  background: var(--pure-white);
  border: 1px solid var(--border);
  overflow: hidden;
}
.demo-calendar__header {
  padding: 28px 32px 20px;
  border-bottom: 1px solid var(--border-light);
}
.demo-calendar__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 4px;
}
.demo-calendar__subtitle {
  font-size: 13px;
  color: var(--text-light);
}
.demo-calendar__embed {
  min-height: 620px;
  position: relative;
}
.demo-calendar__iframe {
  width: 100%;
  height: 620px;
  border: none;
  display: block;
}
.demo-calendar__cta {
  padding: 56px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  min-height: 240px;
  justify-content: center;
}
.demo-calendar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 28px;
  border-radius: 12px;
  background: var(--brand-blue);
  color: var(--pure-white);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 12px -4px rgba(0,82,211,0.4);
}
.demo-calendar__btn:hover {
  background: #003fab;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -6px rgba(0,82,211,0.5);
}
.demo-calendar__btn-icon {
  display: inline-flex;
  align-items: center;
}
.demo-calendar__cta-note {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-light);
  margin: 0;
  max-width: 340px;
}
/* (.demo-trust styles removed — trust bar replaced by hero__logos marquee in demo-hero) */
@media (max-width: 900px) {
  .demo-hero { padding: 80px 0 32px; }
  .demo-hero__heading { font-size: clamp(22px, 6vw, 28px); }
  .demo-hero__sub { font-size: 14px; }
  .demo-booking { padding: 64px 0 80px; }
  .demo-booking__grid { grid-template-columns: 1fr; gap: 40px; }
  .demo-pitch { position: static; }
}
@media (max-width: 600px) {
  .demo-page { padding: 100px 0 60px; }
}

/* ================================================
   KONTAKT — minimale Subpage: heller Hero, ein CTA
   (E-Mail-Adresse als Text-Link). Sticky-Footer-Pattern
   wie bei der Demo-Page (footer sitzt immer unten).
   ================================================ */
body:has(.kontakt-main) {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.kontakt-main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
.kontakt-hero {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  position: relative;
  padding: 140px 0 100px;
  background: var(--pure-white);
  color: var(--text-dark);
}
.kontakt-hero .container { position: relative; z-index: 1; }
.kontakt-hero__body {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}
.kontakt-hero__eyebrow {
  display: inline-flex;
  justify-content: center;
  margin-bottom: 14px;
}
.kontakt-hero__heading {
  font-family: var(--font-display);
  font-weight: 550;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.3px;
  margin: 0 0 14px;
  color: var(--text-dark);
}
.kontakt-hero__heading span { color: var(--text-muted); }
.kontakt-hero__sub {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-body);
  margin: 0 auto 28px;
  max-width: 520px;
}
/* CTA = E-Mail-Adresse als prominenter Text-Link (kein Button). */
.kontakt-hero__email {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--brand-blue);
  text-decoration: none;
  border-bottom: 2px solid rgba(0, 82, 211, 0.25);
  padding-bottom: 2px;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.kontakt-hero__email:hover {
  color: #003fab;
  border-color: var(--brand-blue);
}
.kontakt-hero__note {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-light);
  margin: 18px auto 0;
  max-width: 360px;
}
@media (max-width: 600px) {
  .kontakt-hero { padding: 120px 0 80px; }
  .kontakt-hero__heading { font-size: clamp(24px, 7vw, 30px); }
  .kontakt-hero__sub { font-size: 14px; }
  .kontakt-hero__email { font-size: 20px; }
}

/* ================================================
   ÜBER UNS PAGE STYLES — Figma 6tFBpdlK6EhPnCm5QBhHfb / 52:758
   ================================================ */

/* ---- Hero — eyebrow above + 3-image grid + headline overlay on right photo ---- */
.about-hero {
  background: var(--pure-white);
  padding: 120px 0 96px;
  position: relative;
  overflow: visible;
}
.about-hero::after { display: none; }
.about-hero__container {
  max-width: 1680px;
  margin: 0 auto;
  padding: 0 60px;
}
.about-hero__grid {
  display: grid;
  grid-template-columns: 398fr 1153fr;
  gap: 16px;
  align-items: start;
}
.about-hero__col-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.about-hero__photo--top { aspect-ratio: 398 / 299; }
.about-hero__photo--bottom { aspect-ratio: 398 / 393; }
.about-hero__col-right {
  position: relative;
  aspect-ratio: 1153 / 708;
}
.about-hero__photo,
.about-hero__photo-large {
  border-radius: 40px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, #d8dde6 0%, #c5cdd9 100%);
}
.about-hero__photo img,
.about-hero__photo-large img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.about-hero__photo-large {
  position: absolute;
  inset: 0;
}
.about-hero__photo-large::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.12) 35%, transparent 60%);
  pointer-events: none;
  z-index: 1;
}
.about-hero__heading {
  position: absolute;
  top: 60px;
  left: 60px;
  max-width: 700px;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 3.4vw, 55px);
  line-height: 1.12;
  letter-spacing: -1.2px;
  color: var(--text-dark);
  margin: 0;
}
.about-hero__cta-block {
  position: absolute;
  top: 60px;
  right: 60px;
  width: 280px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.about-hero__desc {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: rgba(13,15,26,0.78);
  margin: 0;
}
.about-hero .cta-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-blue);
  color: var(--pure-white);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.6px;
  padding: 11px 22px;
  border-radius: 15px;
  text-decoration: none;
  transition: background var(--transition);
}
.about-hero .cta-pill:hover { background: var(--btn-hover-blue); }

/* ---- Statement / Manifesto ---- */
.about-statement {
  padding: 120px 0;
  background: var(--pure-white);
  position: relative;
  overflow: hidden;
}
.about-statement__inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.about-statement__headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.05;
  letter-spacing: -1.5px;
  color: var(--text-dark);
  margin-bottom: 32px;
}
.about-statement__text {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.75;
  color: var(--text-dark);
  max-width: 680px;
  margin: 0 auto;
}
.about-statement__text strong {
  color: var(--text-dark);
  font-weight: 500;
}

/* ---- Section Intro (shared) ---- */
.about-team .section-intro,
.about-clients .section-intro {
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
}
.about-team .section-intro h2,
.about-clients .section-intro h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--text-dark);
  margin-bottom: 16px;
}
.about-clients .section-intro p {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(13,15,26,0.55);
}

/* ---- Founder Story — blue gradient + Patrick photo with badge inside ---- */
.about-founder {
  padding: 140px 0;
  background: linear-gradient(150deg, #3989FE 26%, #022D71 87%);
  position: relative;
  overflow: hidden;
}
.about-founder .container { position: relative; z-index: 1; }
.about-founder__grid {
  display: grid;
  grid-template-columns: 620px 1fr;
  gap: 96px;
  align-items: center;
}
.about-founder__visual { position: relative; }
.about-founder__img-wrap {
  aspect-ratio: 518/691;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(160deg, #0d0f1a 0%, #1a2a6b 100%);
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.about-founder__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.about-founder__year-badge {
  position: absolute;
  bottom: 40px;
  left: 39px;
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 15px;
  padding: 16px 20px 14px;
  box-shadow: 0 16px 48px rgba(13,15,26,0.08);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 172px;
}
.about-founder__year-badge-value {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 35px;
  letter-spacing: 0;
  color: var(--pure-white);
  line-height: 1;
}
.about-founder__year-badge-label {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0;
  color: rgba(255,255,255,0.85);
}
.about-founder__content { color: var(--pure-white); }
.about-founder__content .eyebrow--muted .eyebrow__text {
  color: rgba(255,255,255,0.70);
}
.about-founder__heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 2.8vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: var(--pure-white);
  margin: 0 0 28px;
  max-width: 586px;
}
.about-founder__text {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--pure-white);
  margin: 0 0 22px;
}
.about-founder__text strong { font-weight: 700; }
.about-founder__quote {
  position: relative;
  padding: 33px 26px;
  margin: 16px 0 32px;
  border-radius: 25px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
  isolation: isolate;
}
.about-founder__quote::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 30%, rgba(255,255,255,0.10), transparent 55%),
    radial-gradient(circle at 20% 80%, rgba(255,255,255,0.06), transparent 60%);
  mix-blend-mode: hard-light;
  opacity: 0.5;
  pointer-events: none;
  z-index: -1;
}
.about-founder__quote-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.5;
  color: var(--pure-white);
  font-style: normal;
  margin: 0 0 16px;
}
.about-founder__quote-author {
  display: block;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.6px;
  color: var(--pure-white);
  text-align: right;
}

/* ---- Management Team — cards with photos at top ---- */
.about-team {
  padding: 140px 0;
  background: var(--pure-white);
}
.about-team__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 64px;
}
.team-card {
  background: var(--pure-white);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
  transition: transform 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth);
  display: flex;
  flex-direction: column;
}
.team-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.10);
}
.team-card__photo {
  width: 100%;
  aspect-ratio: 483/354;
  background: rgba(0,0,0,0.05);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-radius: 40px 40px 0 0;
}
.team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.team-card__photo--initials {
  background: linear-gradient(135deg, rgba(0,82,211,0.10) 0%, rgba(0,82,211,0.04) 100%);
  align-items: center;
}
.team-card__photo-initials {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 96px;
  letter-spacing: -2px;
  color: rgba(0,82,211,0.45);
}
.team-card__body {
  padding: 36px 36px 40px;
}
.team-card__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.4;
  color: var(--text-dark);
  margin: 0 0 4px;
}
.team-card__role {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.66px;
  color: var(--brand-blue);
  margin-bottom: 18px;
  text-transform: none;
}
.team-card__bio {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.65;
  color: rgba(13,15,26,0.55);
  margin: 0;
}

/* ---- Clients — logos + 4 stats in white card ---- */
.about-clients {
  padding: 0 0 140px;
  background: var(--pure-white);
}
.about-clients__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 40px 56px;
  margin: 40px 0 56px;
}
.about-clients__logo {
  height: 28px;
  width: auto;
  filter: grayscale(100%);
  opacity: 0.45;
  transition: all var(--transition);
}
.about-clients__logo:hover {
  filter: grayscale(0%);
  opacity: 1;
}
.about-clients__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--pure-white);
  border-radius: 40px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
}
.about-clients__stat {
  padding: 48px 32px;
  text-align: center;
  position: relative;
}
.about-clients__stat-value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 44px;
  letter-spacing: -1.5px;
  color: var(--brand-blue);
  line-height: 1;
  display: block;
  margin-bottom: 24px;
}
.about-clients__stat-label {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--brand-blue);
  line-height: 1.45;
}

/* ---- KI Section — dark with subtle bg image ---- */
.ki-section {
  padding: 128px 0;
  background: #06062A;
  position: relative;
  overflow: hidden;
}
.ki-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 70% 50%, rgba(20,30,80,0.85) 0%, transparent 60%),
    radial-gradient(ellipse at 90% 30%, rgba(0,82,211,0.30) 0%, transparent 50%);
  pointer-events: none;
}
.ki-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.46);
  pointer-events: none;
}
.ki-section .container { position: relative; z-index: 1; }
.ki-section__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.ki-section__heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: var(--pure-white);
  margin: 8px 0 28px;
}
.ki-section__text {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255,255,255,0.6);
  max-width: 593px;
}
.ki-section__cta { margin-top: 36px; }
.ki-section__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-content: start;
}
.ki-stat-card {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 24px;
  padding: 36px 32px;
  text-align: center;
}
.ki-stat-card--wide {
  grid-column: 1 / -1;
}
.ki-stat-card__value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 64px;
  letter-spacing: -2px;
  color: var(--pure-white);
  line-height: 1;
  display: block;
  margin-bottom: 18px;
}
.ki-stat-card__value--sm {
  font-size: 48px;
}
.ki-stat-card__label {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255,255,255,0.6);
  display: block;
}
.ki-stat-card__sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--pure-white);
  display: block;
  margin-top: 12px;
  letter-spacing: 0.3px;
}

/* ---- Responsive ---- */
@media (max-width: 1280px) {
  .about-hero__container { padding: 0 40px; }
  .about-hero__heading {
    top: 40px; left: 40px;
    max-width: 60%;
    font-size: clamp(28px, 3vw, 44px);
  }
  .about-hero__cta-block { top: 40px; right: 40px; width: 240px; }
  .about-founder__grid {
    grid-template-columns: 420px 1fr;
    gap: 64px;
  }
}
@media (max-width: 960px) {
  .about-hero {
    padding: 80px 0 60px;
  }
  .about-hero__container { padding: 0 24px; }
  /* Mobile-Collage: Text-Block oben, darunter asymmetrisches 3-Foto-
     Mosaik (1 großes Foto links über 2 Reihen, 2 kleine rechts gestapelt).
     display:contents flacht die beiden Spalten ein — alle 5 Elemente
     werden direkte Grid-Items von .about-hero__grid und frei platzierbar. */
  .about-hero__grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
  }
  .about-hero__col-left,
  .about-hero__col-right { display: contents; }
  .about-hero__heading {
    position: static;
    grid-column: 1 / -1;
    grid-row: 1;
    max-width: 100%;
    margin: 0;
    font-size: clamp(26px, 6.5vw, 36px);
  }
  .about-hero__cta-block {
    position: static;
    grid-column: 1 / -1;
    grid-row: 2;
    width: auto;
    margin: 4px 0 12px;
  }
  .about-hero__photo-large {
    position: relative;
    inset: auto;
    grid-column: 1 / -1;
    grid-row: 3;
    aspect-ratio: 1153 / 708;
    border-radius: 24px;
  }
  .about-hero__photo-large::after { display: none; }
  .about-hero__photo--top {
    grid-column: 1;
    grid-row: 4;
    aspect-ratio: 4 / 3;
    border-radius: 24px;
  }
  .about-hero__photo--bottom {
    grid-column: 2;
    grid-row: 4;
    aspect-ratio: 4 / 3;
    border-radius: 24px;
  }
  .about-founder { padding: 96px 0; }
  .about-founder__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .about-founder__img-wrap {
    aspect-ratio: 4/3;
    max-width: 480px;
    margin: 0 auto;
  }
  .ki-section__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .about-team { padding: 96px 0; }
  .about-team__grid {
    grid-template-columns: 1fr 1fr;
  }
  .about-clients__stats {
    grid-template-columns: 1fr 1fr;
  }
  .ki-section { padding: 96px 0; }
  .ki-section__cards {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  .about-statement { padding: 80px 0; }
  .about-statement__headline { letter-spacing: -1px; }
  .about-team__grid { grid-template-columns: 1fr; }
  .about-clients { padding-bottom: 96px; }
  .about-clients__logos { gap: 28px 40px; }
  .about-clients__stats { grid-template-columns: 1fr 1fr; }
  .about-clients__stat-value { font-size: 32px; }
  .about-clients__stat { padding: 32px 20px; }
  .team-card__body { padding: 28px 24px 32px; }
  .ki-section__cards { grid-template-columns: 1fr; }
}

/* ================================================
   PAGE-HERO --video — Centered text + browser-frame video + customer logos
   (Figma 639:1331, Datenraum subpage; reuses .hero__logos-* marquee classes
   from homepage.css for the customer banner)
   ================================================ */
.page-hero--video {
  min-height: 100vh;
  min-height: 100svh;
  padding: 132px 0 0;
  background-color: #001f5e;
  background-image: url('/assets/images/backgrounds/bg_datenraum_hero.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  isolation: isolate;
  display: flex;
  flex-direction: column;
}
.page-hero--video::after { display: none; } /* override base orb */

.page-hero__bg { display: none; }
.page-hero--video > .container,
.page-hero--video > .page-hero__customer-logos { position: relative; z-index: 2; }

/* Skyline-Canvas — fliegende Partikel die sich zu Mini-Hochhausern zusammensetzen.
   Liegt zwischen Bg-Image (z-index 0) und Content (z-index 2). pointer-events:none
   damit Hover ueber den Body/CTA nicht abgefangen wird. */
.page-hero__skyline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* Container füllt die verbleibende Höhe nach padding-top (Nav-Reserve);
   Body + Frame werden gemeinsam vertikal zentriert, Logos rutschen als
   .hero-Geschwister an den unteren Rand. */
.page-hero--video > .container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
  min-height: 0;
}

.page-hero--video .page-hero__body {
  text-align: center;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0;
}
.page-hero__eyebrow {
  display: inline-flex;
  justify-content: center;
  margin: 0 auto 32px;
}
/* Datenraum-Hero Eyebrow uebersteuert die globale .eyebrow__text-Groesse —
   bewusst groesser, damit der KI-Layer-Hinweis prominenter wirkt. */
.page-hero__eyebrow .eyebrow__text {
  font-size: 30px;
  letter-spacing: 0;
}
.page-hero__heading--centered {
  margin: 0 auto 32px;
  max-width: 900px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 5vw, 60px);
  line-height: 1.1;
  letter-spacing: -1.5px;
  color: var(--pure-white);
  text-align: center;
}
.page-hero__desc--centered {
  margin: 0 auto 28px;
  max-width: 684px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255,255,255,0.80);
  text-align: center;
}
.page-hero__cta-row {
  display: flex;
  justify-content: center;
  margin-top: 0;
}

/* Browser-frame mockup — wraps the autoplay video.
   max-width skaliert mit Viewport-Höhe, damit die gesamte Hero (Body + Frame
   + Logos) in 100vh passt. Reserve (620px) deckt nav/padding-top + Body
   (Headline+Desc+CTA) + Logos + topbar (52px) + Gaps ab; übrig bleibende
   Höhe wird × 16/9 in eine Frame-Breite umgerechnet. clamp(): min 280px
   für sehr flache Viewports, max 1170px = Original. */
.page-hero__frame {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: clamp(280px, calc((100svh - 620px) * 16 / 9), 1170px);
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.45),
              0 8px 24px -8px rgba(0,0,0,0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.page-hero__frame-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 26px;
  background: rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.page-hero__frame-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.20);
}
.page-hero__frame-screen {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}
.page-hero__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

/* Customer-logos band (re-uses .hero__logos-marquee / .hero__logos-track from homepage.css).
   margin-top: 0, weil das Flex-Layout der Section die Logos automatisch unten
   andockt (Container nimmt flex:1, Logos sind .hero-Geschwister). */
.page-hero__customer-logos {
  position: relative;
  margin-top: 0;
  padding: 24px 0 32px;
}
.page-hero__customer-logos-label {
  display: flex;
  justify-content: center;
  margin: 0 0 24px;
}
.page-hero__customer-logos-label .eyebrow__text {
  color: rgba(255,255,255,0.65);
  /* Bei 2-zeiligem Umbruch (schmale Viewports) sonst linksbündig */
  text-align: center;
}

/* Responsive */
@media (max-width: 960px) {
  .page-hero--video { padding-top: 120px; }
  .page-hero__frame { border-radius: 14px; }
  .page-hero__frame-topbar { height: 44px; padding: 0 20px; }
  .page-hero__frame-dot { width: 11px; height: 11px; }
  .page-hero__customer-logos { padding: 20px 0 32px; }
  /* override base .page-hero responsive that hides visual */
  .page-hero--video .page-hero__visual { display: block; }
}
@media (max-width: 640px) {
  .page-hero--video { padding-top: 104px; }
  .page-hero__heading--centered { font-size: 36px; letter-spacing: -1px; }
  .page-hero__desc--centered { font-size: 15px; }
  .page-hero__frame { border-radius: 12px; }
  .page-hero__customer-logos { padding: 16px 0 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .page-hero__video { display: none; }
  .page-hero__frame-screen::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #001f5e 0%, #000a2a 100%);
  }
}

/* DOCUSPINE PAGE legacy block (.ds-*) removed — replaced by .dsp-* in the
   re-built docuspine product page. Brand-site .ds-* (snippets/docuspine/*)
   has its own assets/css/docuspine.css. */


/* ================================================
   SICHERHEIT (Trust-Center) — Langdock-Style mit unseren Farben.
   Hero: Dark Navy Gradient (wie Homepage/docuspine).
   Sections alternieren weiß/soft. Cards = Icon + Text (kein Border-Card-Look).
   ================================================ */
.sec-page { background: white; }

/* ---- HERO ---- */
.sec-hero {
  position: relative;
  padding: 160px 0 96px;
  background: radial-gradient(ellipse 120% 80% at 50% 30%, #003899 0%, #001f5e 35%, #000a2a 70%, #00081f 100%);
  color: white;
  overflow: hidden;
  isolation: isolate;
}
.sec-hero__mesh {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.sec-hero__mesh::before,
.sec-hero__mesh::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
}
.sec-hero__mesh::before {
  width: 600px; height: 600px;
  top: -200px; right: -100px;
  background: radial-gradient(circle, rgba(0,82,211,0.30), transparent 60%);
}
.sec-hero__mesh::after {
  width: 500px; height: 500px;
  bottom: -150px; left: 0;
  background: radial-gradient(circle, rgba(0,120,255,0.22), transparent 60%);
}
.sec-hero .container { position: relative; z-index: 1; }
.sec-hero__inner { max-width: 820px; }

.sec-hero__badge {
  display: inline-block;
  margin: 0 0 24px;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  background: transparent;
  border: 0;
  border-radius: 0;
}
.sec-hero__heading {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: white;
  font-weight: 600;
  margin: 0 0 24px;
}
.sec-hero__subline {
  font-size: 18px;
  line-height: 1.65;
  color: rgba(255,255,255,0.78);
  max-width: 720px;
  margin: 0;
}

/* ---- TRUST-STAMPS — Compliance-Streifen direkt nach Hero ---- */
.sec-stamps {
  padding: 56px 0;
  background: linear-gradient(180deg, var(--bg-light, #F7F7F7) 0%, white 100%);
}
.sec-stamps__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
.sec-stamp {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  background: white;
  border: 1px solid var(--border-light);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.sec-stamp::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--brand-blue, #0052D3), #2D7BFF);
  opacity: 0;
  transition: opacity .25s ease;
}
.sec-stamp:hover {
  border-color: rgba(0,82,211,0.28);
  box-shadow: 0 14px 30px -16px rgba(0,82,211,0.25);
  transform: translateY(-2px);
}
.sec-stamp:hover::before { opacity: 1; }
.sec-stamp__icon {
  width: 44px; height: 44px;
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(0,82,211,0.14) 0%, rgba(0,82,211,0.04) 100%);
  color: var(--brand-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .25s ease, background .25s ease;
}
.sec-stamp:hover .sec-stamp__icon {
  transform: scale(1.06);
  background: linear-gradient(135deg, rgba(0,82,211,0.22) 0%, rgba(0,82,211,0.08) 100%);
}
.sec-stamp__icon svg { width: 22px; height: 22px; }
.sec-stamp__body { min-width: 0; }
.sec-stamp__label {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.2;
  margin: 0;
}
.sec-stamp__sub {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 4px 0 0;
}

/* ---- SECTIONS — alle weiß, Differenzierung subtil über Eyebrow + Bg-Gradients ---- */
.sec-group {
  padding: 96px 0;
  background: white;
  border: 0;
  position: relative;
  overflow: hidden;
}
.sec-group--common {
  background: linear-gradient(180deg, white 0%, white 75%, rgba(0,82,211,0.025) 100%);
}
.sec-group--common::before {
  content: '';
  position: absolute;
  top: 30%; right: -10%;
  width: 700px; height: 500px;
  background: radial-gradient(ellipse at center, rgba(0,82,211,0.05) 0%, transparent 70%);
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
}
.sec-group > .container { position: relative; z-index: 1; }
.sec-group--docunite { background: white; }
.sec-group--docuspine { background: white; }

/* ---- SPLIT-LAYOUT für docunite + docuspine in EINER Section ---- */
.sec-split {
  padding: 96px 0;
  background: linear-gradient(180deg, rgba(0,82,211,0.025) 0%, white 25%);
  position: relative;
  overflow: hidden;
}
.sec-split::before {
  content: '';
  position: absolute;
  bottom: 15%; left: -10%;
  width: 600px; height: 400px;
  background: radial-gradient(ellipse at center, rgba(0,82,211,0.05) 0%, transparent 70%);
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
}
.sec-split > .container { position: relative; z-index: 1; }
.sec-split__head { margin: 0 0 56px; max-width: 820px; }
.sec-split__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-dark);
  font-weight: 600;
  margin: 0 0 12px;
}
.sec-split__intro {
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0;
}
.sec-split__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
}
@media (min-width: 900px) {
  .sec-split__cols { grid-template-columns: 1fr 1fr; gap: 80px; }
}
.sec-split__col-eyebrow {
  display: inline-block;
  margin: 0 0 24px;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.sec-split__items {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.sec-split__items .sec-card {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 18px;
  align-items: start;
}

.sec-group__head { margin: 0 0 56px; max-width: 820px; }
.sec-group__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-dark);
  font-weight: 600;
  margin: 0 0 12px;
}
.sec-group__intro {
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0;
}

/* ---- CARDS → ICON + TEXT ROWS (Langdock-Pattern) ---- */
.sec-cards {
  display: grid;
  gap: 32px 48px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px)  { .sec-cards { grid-template-columns: 1fr 1fr; } }

.sec-card {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 18px;
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
  align-items: start;
}
.sec-card__icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(0,82,211,0.14) 0%, rgba(0,82,211,0.04) 100%);
  color: var(--brand-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  transition: transform .25s ease, background .25s ease;
}
.sec-card__icon svg { width: 18px; height: 18px; }
.sec-card { transition: none; }
.sec-card__title { transition: color .2s ease; }
.sec-card:hover .sec-card__icon {
  transform: scale(1.06);
  background: linear-gradient(135deg, rgba(0,82,211,0.22) 0%, rgba(0,82,211,0.08) 100%);
}
.sec-card:hover .sec-card__title { color: var(--brand-blue, #0052D3); }
.sec-card__body { min-width: 0; }
.sec-card__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-dark);
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.sec-card__text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

/* docunite-Section: Icon-Tile auf weißem Pill (auf grauem Hintergrund), damit die Tile sichtbar bleibt */
.sec-group--docunite .sec-card__icon {
  background: rgba(0,82,211,0.10);
}

/* ---- INLINE EYEBROW-LISTE (unter den Common-Cards) ---- */
.sec-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin: 56px 0 0;
  padding: 28px 0 0;
  border-top: 1px solid var(--border-light);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 1.6;
}
.sec-inline__label {
  color: var(--text-dark);
  margin-right: 14px;
}
.sec-inline__item {
  color: var(--text-muted);
}
.sec-inline__item ~ .sec-inline__item::before {
  content: '·';
  margin: 0 10px;
  color: var(--border-light);
}
.sec-inline__sep { display: none; }

/* ---- Mobile ---- */
@media (max-width: 767px) {
  .sec-hero { padding: 132px 0 64px; }
  .sec-hero__heading { font-size: 36px; }
  .sec-stamps { padding: 32px 0; }
  .sec-stamps__grid { grid-template-columns: 1fr; gap: 10px; }
  .sec-group, .sec-split { padding: 64px 0; }
  .sec-group__head, .sec-split__head { margin-bottom: 40px; }
  .sec-cards { gap: 28px; }
  .sec-split__cols { gap: 48px; }
  .sec-inline { margin-top: 40px; padding-top: 24px; }
}

/* ================================================
   INTEGRATION (Developer-Hub) — dev-orientiert.
   Hero · 2 Endpoint Cards · MCP-Block · 2 Ready-Tiles · 4 Use-Case-Cluster
   ================================================ */
.int-page { background: white; }

/* ---- HERO ---- */
.int-hero {
  position: relative;
  padding: 160px 0 96px;
  background: radial-gradient(ellipse 120% 80% at 50% 30%, #003899 0%, #001f5e 35%, #000a2a 70%, #00081f 100%);
  color: white;
  overflow: hidden;
  isolation: isolate;
}
.int-hero__mesh {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.int-hero__mesh::before,
.int-hero__mesh::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
}
.int-hero__mesh::before {
  width: 600px; height: 600px;
  top: -200px; right: -100px;
  background: radial-gradient(circle, rgba(0,82,211,0.30), transparent 60%);
}
.int-hero__mesh::after {
  width: 500px; height: 500px;
  bottom: -150px; left: 0;
  background: radial-gradient(circle, rgba(0,120,255,0.22), transparent 60%);
}
.int-hero .container { position: relative; z-index: 1; }
.int-hero__inner { max-width: 820px; }
.int-hero__eyebrow {
  display: inline-block;
  margin: 0 0 24px;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  background: transparent;
  border: 0;
  border-radius: 0;
}
.int-hero__heading {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: white;
  font-weight: 600;
  margin: 0 0 24px;
}
.int-hero__subline {
  font-size: 18px;
  line-height: 1.65;
  color: rgba(255,255,255,0.78);
  max-width: 720px;
  margin: 0;
}

/* ---- ENDPOINT CARDS — primärer Visual-Anker ---- */
.int-endpoints {
  padding: 96px 0 32px;
  background: white;
  position: relative;
  overflow: hidden;
}
.int-endpoints::before {
  content: '';
  position: absolute;
  top: 30%; left: -10%;
  width: 700px; height: 500px;
  background: radial-gradient(ellipse at center, rgba(0,82,211,0.05) 0%, transparent 70%);
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
}
.int-endpoints > .container { position: relative; z-index: 1; }
.int-endpoints__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 880px) {
  .int-endpoints__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
.int-endpoint {
  position: relative;
  background: white;
  border: 1px solid var(--border-light);
  border-radius: 16px;
  padding: 32px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.int-endpoint::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-blue, #0052D3), #2D7BFF);
  opacity: 0;
  transition: opacity .25s ease;
}
.int-endpoint:hover {
  border-color: var(--brand-blue, #0052D3);
  box-shadow: 0 16px 40px -16px rgba(0,82,211,0.3);
  transform: translateY(-3px);
}
.int-endpoint:hover::before { opacity: 1; }
.int-endpoint__head {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 16px;
}
.int-endpoint__status {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #10b981;
  flex-shrink: 0;
  position: relative;
}
.int-endpoint__status::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid #10b981;
  opacity: 0.5;
  animation: int-status-pulse 2.2s ease-out infinite;
}
@keyframes int-status-pulse {
  0%   { transform: scale(0.9); opacity: 0.5; }
  100% { transform: scale(1.7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .int-endpoint__status::after { animation: none; }
}
.int-endpoint__url {
  font-family: var(--font-mono);
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-dark);
  background: transparent;
  padding: 0;
}
.int-endpoint__protocols {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0 0 24px;
}
.int-endpoint__pill {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  background: linear-gradient(135deg, rgba(0,82,211,0.12) 0%, rgba(0,82,211,0.04) 100%);
  border: 1px solid rgba(0,82,211,0.15);
  color: #1d4ed8;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  border-radius: 6px;
}
.int-endpoint__brand {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 12px;
}
.int-endpoint__text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 20px;
  flex: 1;
}
.int-endpoint__link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--brand-blue, #0052D3);
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  transition: gap .2s ease;
}
/* Ganze Card ist der Link (<a class="int-endpoint">) — Link-Defaults zuruecksetzen */
a.int-endpoint { text-decoration: none; color: inherit; cursor: pointer; }
/* Pfeil-Nudge wird vom Hover der gesamten Card getriggert */
.int-endpoint:hover .int-endpoint__link { gap: 12px; }

/* ---- MCP BLOCK — zweiter Visual-Anker (dark glass) ---- */
.int-mcp-section {
  padding: 64px 0 96px;
  background: white;
}
.int-mcp {
  position: relative;
  background: linear-gradient(135deg, #0a0e27 0%, #172554 100%);
  border-radius: 20px;
  padding: 48px 40px;
  overflow: hidden;
  isolation: isolate;
  color: white;
}
@media (min-width: 768px) { .int-mcp { padding: 64px 56px; } }
.int-mcp__glow {
  position: absolute;
  top: 0; right: 0;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,82,211,0.45), transparent 65%);
  filter: blur(60px);
  pointer-events: none;
}
.int-mcp__grid {
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.int-mcp__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
@media (min-width: 900px) {
  .int-mcp__inner { grid-template-columns: 1fr 1fr; gap: 64px; }
}
.int-mcp__eyebrow {
  display: inline-block;
  margin: 0 0 24px;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  background: transparent;
  border: 0;
  border-radius: 0;
}
.int-mcp__pulse { display: none; }
.int-mcp__heading {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: white;
  margin: 0 0 20px;
}
.int-mcp__copy {
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255,255,255,0.78);
  margin: 0;
}

/* ---- MCP Visual (rechte Seite) — Wissensgraph PNG ---- */
.int-mcp__visual {
  width: 100%;
  aspect-ratio: 502 / 458;
  border-radius: 24px;
  overflow: hidden;
  background: #0a1428;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.5);
}
.int-mcp__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- READY-TILES — n8n + SharePoint (real existing) ---- */
.int-ready {
  padding: 96px 0;
  background: linear-gradient(180deg, var(--bg-light, #F7F7F7) 0%, white 100%);
  position: relative;
  overflow: hidden;
}
.int-ready::before {
  content: '';
  position: absolute;
  bottom: -10%; right: -5%;
  width: 600px; height: 450px;
  background: radial-gradient(ellipse at center, rgba(0,82,211,0.05) 0%, transparent 70%);
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
}
.int-ready > .container { position: relative; z-index: 1; }
.int-ready__head { margin: 0 0 48px; max-width: 760px; }
.int-ready__eyebrow {
  display: inline-block;
  margin: 0 0 16px;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.int-ready__eyebrow span { display: none; }
.int-ready__heading {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-dark);
  margin: 0;
}
.int-ready__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 880px) {
  .int-ready__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}

.int-tile {
  position: relative;
  background: white;
  border: 1px solid var(--border-light);
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  overflow: hidden;
}
.int-tile::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-blue, #0052D3), #2D7BFF);
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 1;
}
.int-tile:hover {
  border-color: var(--brand-blue, #0052D3);
  box-shadow: 0 16px 40px -16px rgba(0,82,211,0.22);
  transform: translateY(-3px);
}
.int-tile:hover::before { opacity: 1; }

/* Logo-Placeholder (echte Logos werden später ergänzt) */
.int-tile__logo {
  position: relative;
  width: 100%;
  height: 140px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.01em;
  color: white;
  margin: 0 0 24px;
  overflow: hidden;
}
/* Banner-Tiles (n8n, sharepoint): weisser Container, Image contain — die
   Banner haben selbst einen dunklen Hintergrund, daher fügen sie sich auf
   weiß als "embedded image" sauber ein. */
.int-tile__logo--n8n,
.int-tile__logo--sharepoint {
  background: #fff;
  padding: 0;
}
.int-tile__logo--n8n img,
.int-tile__logo--sharepoint img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}
.int-tile__logo--custom {
  background: linear-gradient(135deg, var(--midnight, #111144) 0%, #0A0A50 100%);
  font-size: 18px;
}
.int-tile__placeholder-tag {
  position: absolute;
  bottom: 8px; right: 10px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

.int-tile__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-dark);
  margin: 0 0 12px;
}
.int-tile__text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 20px;
  flex: 1;
}
.int-tile__link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--brand-blue, #0052D3);
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  transition: gap .2s ease;
}
.int-tile__link:hover { gap: 12px; }

/* ---- POSSIBLE / USE-CASE-CLUSTER ---- */
.int-possible {
  padding: 96px 0;
  background: linear-gradient(180deg, white 0%, white 60%, rgba(0,82,211,0.025) 100%);
  position: relative;
  overflow: hidden;
}
.int-possible::before {
  content: '';
  position: absolute;
  top: 30%; right: -10%;
  width: 600px; height: 450px;
  background: radial-gradient(ellipse at center, rgba(0,82,211,0.04) 0%, transparent 70%);
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
}
.int-possible > .container { position: relative; z-index: 1; }
.int-possible__head { margin: 0 0 56px; max-width: 820px; }
.int-possible__eyebrow {
  display: inline-block;
  margin: 0 0 16px;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.int-possible__eyebrow span { display: none; }
.int-possible__heading {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-dark);
  font-weight: 600;
  margin: 0 0 16px;
}
.int-possible__sub {
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0;
  max-width: 760px;
}
.int-clusters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 720px)  { .int-clusters { grid-template-columns: 1fr 1fr; gap: 40px 32px; } }
@media (min-width: 1100px) { .int-clusters { grid-template-columns: repeat(4, 1fr); } }
.int-cluster { min-width: 0; }
.int-cluster__title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}
.int-cluster__pills {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.int-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  background: white;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  font-size: 13px;
  color: var(--text-dark);
  white-space: nowrap;
  transition: border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.int-pill:hover {
  border-color: var(--brand-blue, #0052D3);
  background: rgba(0,82,211,0.06);
  color: var(--brand-blue, #0052D3);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px rgba(0,82,211,0.2);
}

/* ---- Mobile ---- */
@media (max-width: 767px) {
  .int-hero { padding: 132px 0 64px; }
  .int-hero__heading { font-size: 36px; }
  .int-endpoints, .int-mcp-section, .int-ready, .int-possible { padding: 64px 0; }
  .int-mcp-section { padding-top: 32px; }
  .int-mcp { padding: 32px 24px; }
  .int-endpoint { padding: 24px; }
  .int-tile { padding: 24px; }
  .int-clusters { gap: 32px; }
}

/* ================================================
   DOCUSPINE PAGE — Stufen-Carousel (Section 2)
   Horizontal scroll-snap, hover-to-expand, bullets switch with active card.
   ================================================ */
.dsp-stufen {
  background: #141d39;
  color: white;
  padding: 96px 0 64px;
  overflow: hidden;
  position: relative;
}
/* Carousel-Container etwas weiter als der Rest der Site, damit die aktive
   Card auf 921px aufgehen kann ohne dass das Bild rechts beschnitten wird:
   921 (Active) + 2*144 (Inaktiv) + 2*16 (Gap) = 1241. */
.dsp-stufen > .container {
  max-width: 1280px;
}
.dsp-stufen__head {
  margin: 0 0 56px;
  max-width: 900px;
}
.dsp-stufen__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: white;
  margin: 0 0 16px;
}
.dsp-stufen__heading {
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.5px;
  font-weight: 600;
  color: white;
  margin: 0;
  max-width: 900px;
}

/* Hover-Accordion — active card expanded, ghosts narrow */
.dsp-stufen__carousel {
  display: flex;
  gap: 16px;
  margin-bottom: 32px;
}
.dsp-stufen__card {
  flex: 0 0 144px;
  height: 527px;
  background-color: transparent;
  /* Image bringt eigene transparente Ecken mit (Radius ~31-35px). Card-Radius
     leicht groesser (36) damit der Card-Clip die Image-Ecken nicht
     zusaetzlich clippt. transparent BG → das was vom Image transparent ist,
     zeigt die Section dahinter, keine Doppel-Bg. */
  border-radius: 36px;
  position: relative;
  overflow: hidden;
  color: #0d0f1a;
  cursor: pointer;
  /* Weicher / laengerer Transition — Card "zieht sich auf" statt zu poppen. */
  transition: flex-grow 1.2s cubic-bezier(0.22, 0.61, 0.36, 1),
              flex-shrink 1.2s cubic-bezier(0.22, 0.61, 0.36, 1),
              flex-basis 1.2s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow .6s ease;
  outline: none;
}
.dsp-stufen__card.is-active {
  /* Active-Card waechst, aber gecapped bei 921px = Bild-Naturbreite bei 527 Hoehe.
     So sieht man genau das ganze Bild, ohne dass die Card unnoetig weiter
     waechst und Leerraum rechts erzeugt. */
  flex: 1 1 0%;
  max-width: 921px;
  box-shadow: 0 24px 60px -20px rgba(0,82,211,0.45);
}
.dsp-stufen__card:focus-visible {
  outline: 2px solid var(--brand-blue, #0052D3);
  outline-offset: 4px;
}
/* Bild-Only Cards.
   Ein Bild pro Card, object-fit:cover. object-position wird per inline-style
   aus stufe_crop_x / stufe_crop_y gesetzt — definiert welcher Bildausschnitt
   im zugeklappten Zustand mittig sichtbar ist. Beim Aufgehen wächst die Card
   und gibt symmetrisch um diesen Fokuspunkt mehr vom Bild frei.

   Sobald die Card so breit ist wie das Bild-Ratio es zulässt, ist das ganze
   Bild sichtbar — die Animation entsteht allein durch die wachsende
   Card-Breite, ohne dass das Bild sich verschiebt. */
.dsp-stufen__card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* --crop-pos kommt per inline-style aus dem Template (Desktop). Mobile
     überschreibt mit --crop-pos-mobile, fallback wieder auf --crop-pos. */
  object-position: var(--crop-pos, 50% 50%);
}

/* Stufen-Nummer (z.B. "01") groß unten auf der zugeklappten Card.
   Wird beim Aufgehen ausgeblendet — sonst klebt sie an einer beliebigen
   Stelle der breiten Card. */
.dsp-stufen__card-number {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: clamp(64px, 12vw, 100px);
  line-height: 1;
  color: rgba(255,255,255,0.6);
  pointer-events: none;
  white-space: nowrap;
  transition: opacity .3s ease;
}
.dsp-stufen__card.is-active .dsp-stufen__card-number {
  opacity: 0;
}

/* Inner content — fade-in erfolgt erst NACH dem Card-Aufgehen (.9s).
   Beim Deaktivieren keine Delay → Text verschwindet sofort, damit auf der
   schrumpfenden Card nichts mehr stehen bleibt. */
.dsp-stufen__card-inner {
  position: absolute;
  inset: 0;
  padding: 50px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.dsp-stufen__card.is-active .dsp-stufen__card-inner {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity .3s ease .7s, transform .3s ease .7s;
}

/* Inner-content typography — Werte 1:1 aus Figma (1223:8693 light /
   1220:8542 + 1220:8584 dark). Farben kommen aus dem data-theme-Block weiter unten. */
.dsp-stufen__card-eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  line-height: 19.2px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin: 0 0 24px;
}
.dsp-stufen__card-heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 36px);
  line-height: 39.6px;
  letter-spacing: 0;
  margin: 0 0 24px;
  /* --stufe-text-max kann pro Card im Inline-Style gesetzt werden, sonst
     gilt der Default. Hält Heading + Description aus dem Visual-Bereich
     raus, auch wenn die Bilder später ausgetauscht werden. */
  max-width: var(--stufe-text-max, 600px);
}
.dsp-stufen__card-desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 26.4px;
  margin: 0 0 32px;
  max-width: var(--stufe-text-max, 460px);
}
.dsp-stufen__card-foot {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
/* Bullets als 3-Spalten-Text-Liste im unteren Card-Bereich (Figma 1003:2703).
   Ersetzen die alten Pill-Tags. Reine Texte, keine Icons.
   flex-Basis 540px matched Figma's bullets-row width — bei weniger Platz
   wraps die value-box auf die nächste Zeile (durch card-foot flex-wrap). */
.dsp-stufen__card-bullets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 38px;
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1 1 540px;
  max-width: 540px;
}
.dsp-stufen__card-bullet {
  font-family: var(--font-display);
  font-weight: 550;
  font-size: 16px;
  line-height: 22px;
}
.dsp-stufen__card-value {
  text-align: right;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
/* Value-Block: in beiden Themes weiß — Figma Card 01/02/03 zeigen den
   Value rechts auf einem dunklen Bildbereich, daher konstant white. */
.dsp-stufen__card-value-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  line-height: 19.2px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 2px;
}
.dsp-stufen__card-value-num {
  font-family: var(--font-display);
  font-weight: 750;
  font-size: clamp(28px, 3vw, 36px);
  line-height: 39.6px;
  letter-spacing: 0;
  color: #ffffff;
}

/* ───────── Theme-Farben für Inner-Content ───────── */
/* Dark (Default): helle Schrift auf dunklem Visual — Card 02 + 03 in Figma. */
.dsp-stufen__card[data-theme="dark"] .dsp-stufen__card-eyebrow,
.dsp-stufen__card[data-theme="dark"] .dsp-stufen__card-desc {
  color: rgba(255, 255, 255, 0.6);
}
.dsp-stufen__card[data-theme="dark"] .dsp-stufen__card-heading,
.dsp-stufen__card[data-theme="dark"] .dsp-stufen__card-bullet {
  color: #ffffff;
}
/* Light: dunkle Schrift auf hellem Visual — Card 01 in Figma. */
.dsp-stufen__card[data-theme="light"] .dsp-stufen__card-eyebrow,
.dsp-stufen__card[data-theme="light"] .dsp-stufen__card-heading,
.dsp-stufen__card[data-theme="light"] .dsp-stufen__card-bullet {
  color: #0d0f1a;
}
.dsp-stufen__card[data-theme="light"] .dsp-stufen__card-desc {
  color: rgba(13, 15, 26, 0.6);
}

/* Stepper-Reihe — flex-Layout spiegelt 1:1 die .dsp-stufen__carousel Cards:
   gleicher gap (16px), gleiche flex-Werte (0 0 144px inaktiv, 1 1 auto aktiv).
   So sitzt jeder Stepper exakt unter "seiner" Card und die Trennungen
   fluchten mit den Card-Gaps. Der aktive Stepper enthält einen Fill, der
   von JS in AUTOPLAY_MS linear auf 100% wächst. */
.dsp-stufen__steppers {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 48px;
}
.dsp-stufen__stepper {
  flex: 0 0 144px;
  height: 5px;
  background: #494f70;
  border: none;
  border-radius: 20px;
  padding: 0;
  margin: 0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  /* Identische timing+easing wie .dsp-stufen__card, damit Stepper und Card
     synchron animieren. Alle drei flex-Komponenten transitionen. */
  transition: flex-grow 1.2s cubic-bezier(0.22, 0.61, 0.36, 1),
              flex-shrink 1.2s cubic-bezier(0.22, 0.61, 0.36, 1),
              flex-basis 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
  appearance: none;
  -webkit-appearance: none;
}
.dsp-stufen__stepper.is-active {
  flex: 1 1 0%;
  max-width: 921px;
}
.dsp-stufen__stepper:focus-visible {
  outline: 2px solid var(--brand-blue, #0052D3);
  outline-offset: 4px;
}
.dsp-stufen__stepper-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: #8a8ea6;
  border-radius: 20px;
  will-change: width;
  /* JS steuert transition (none / "width Xs linear") */
}


/* Demo2 banner — Figma 1003:2783: zentriertes Layout, größere Section-Höhe,
   Eyebrow + Heading + Sub + Glass-CTA mittig auf BG-Image. */
.dsp-demo2 {
  background-color: #0052d3;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: white;
  padding: 160px 0;
  min-height: 700px;
  position: relative;
  display: flex;
  align-items: center;
}
.dsp-demo2__inner {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.dsp-demo2__eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  line-height: 19.2px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: white;
  margin: 0 0 24px;
}
.dsp-demo2__heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 4.5vw, 52px);
  line-height: 1.0;
  letter-spacing: 0;
  color: white;
  margin: 0 auto 24px;
  max-width: 760px;
}
.dsp-demo2__sub {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 28.9px;
  color: rgba(255,255,255,0.6);
  max-width: 720px;
  margin: 0 auto 32px;
}

/* Tablet — narrower ghost-strips */
@media (max-width: 1023px) {
  .dsp-stufen__card { flex-basis: 96px; }
}

/* Mobile — stack vertically, all cards expanded */
@media (max-width: 768px) {
  .dsp-stufen { padding: 64px 0 48px; }
  .dsp-stufen__head { margin-bottom: 40px; }
  .dsp-stufen__carousel {
    flex-direction: column;
    gap: 16px;
  }
  .dsp-stufen__card {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    min-height: 480px;
    cursor: default;
  }
  .dsp-stufen__card.is-active { box-shadow: none; }

  /* Mobile-Crop-Override: wenn --crop-pos-mobile gesetzt ist, hat sie hier
     Vorrang — sonst fällt object-position auf den Desktop-Wert zurück. */
  .dsp-stufen__card-image {
    object-position: var(--crop-pos-mobile, var(--crop-pos, 50% 50%));
  }

  /* Scrim über dem BG-Bild — damit Heading/Desc/Bullets immer lesbar
     bleiben, egal wie unruhig der Bildausschnitt auf der schmalen Card ist.
     Pro Theme eigene Richtung/Farbe. Inner-Content liegt drüber. */
  .dsp-stufen__card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
  }
  .dsp-stufen__card[data-theme="dark"]::after {
    background: linear-gradient(180deg,
      rgba(13,15,26,0.30) 0%,
      rgba(13,15,26,0.65) 45%,
      rgba(13,15,26,0.85) 100%);
  }
  .dsp-stufen__card[data-theme="light"]::after {
    background: linear-gradient(180deg,
      rgba(255,255,255,0.55) 0%,
      rgba(255,255,255,0.80) 45%,
      rgba(255,255,255,0.92) 100%);
  }

  /* Number-Overlay auf Mobile komplett ausblenden — die nicht-aktiven Cards
     würden sie sonst inkonsistent zur aktiven anzeigen. */
  .dsp-stufen__card-number { display: none; }

  .dsp-stufen__card-inner {
    position: relative;
    inset: auto;
    opacity: 1;
    transform: none;
    padding: 32px 28px;
    pointer-events: auto;
    z-index: 2;
  }
  .dsp-stufen__card-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  /* Bullets dichter packen — auf Mobile sind sie 1-spaltig untereinander,
     16px gap wirkt zu locker. */
  .dsp-stufen__card-bullets {
    grid-template-columns: 1fr;
    gap: 8px;
    flex: 0 0 auto;
    max-width: 100%;
  }
  .dsp-stufen__card-bullet { font-size: 16px; }
  .dsp-stufen__card-value { text-align: left; align-items: flex-start; }

  /* Value-Block auf Mobile dem Card-Theme folgen — auf Mobile gibt's keinen
     Split-Visual (rechts dunkel), also entweder alles hell oder alles dunkel. */
  .dsp-stufen__card[data-theme="light"] .dsp-stufen__card-value-label,
  .dsp-stufen__card[data-theme="light"] .dsp-stufen__card-value-num {
    color: #0d0f1a;
  }
  .dsp-stufen__card[data-theme="dark"] .dsp-stufen__card-value-label,
  .dsp-stufen__card[data-theme="dark"] .dsp-stufen__card-value-num {
    color: #ffffff;
  }

  .dsp-stufen__steppers { display: none; }
  .dsp-demo2 {
    padding: 80px 0;
    min-height: 0;
  }
}

/* ================================================
   DOCUSPINE PAGE — Plattform (Section 3)
   Dark navy. Header 2-col + 3 image-left/text-right blocks with reveal.
   ================================================ */
.dsp-plattform {
  background: #141d39;
  color: white;
  padding: 96px 0 64px;
}
.dsp-plattform__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: end;
  margin: 0 0 64px;
}
@media (min-width: 900px) {
  .dsp-plattform__head { grid-template-columns: 1fr auto; gap: 48px; }
}
.dsp-plattform__head-left { min-width: 0; }
.dsp-plattform__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: white;
  margin: 0 0 16px;
}
.dsp-plattform__heading {
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1.0;
  letter-spacing: -0.5px;
  font-weight: 600;
  color: white;
  margin: 0;
  max-width: 820px;
}
.dsp-plattform__intro {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: white;
  max-width: 420px;
  margin: 0;
}

.dsp-plattform__blocks {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.dsp-plattform__block {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
  padding: 60px 0;
}
@media (min-width: 900px) {
  .dsp-plattform__block { grid-template-columns: 1fr 1fr; gap: 80px; }
  /* Alternierende Anordnung: gerade Bloecke (#2, #4, …) flippen Visual und
     Text → Text-links, Visual-rechts. Visueller Rhythmus statt monotonem
     Always-Visual-Left. */
  .dsp-plattform__block:nth-child(even) .dsp-plattform__block-visual {
    grid-column: 2;
    grid-row: 1;
  }
  .dsp-plattform__block:nth-child(even) .dsp-plattform__block-text {
    grid-column: 1;
    grid-row: 1;
  }
}
/* Mobil (gestapelt): erst Text, dann Animation — Markup-Reihenfolge
   ist Visual→Text, daher Text per order nach vorn ziehen. */
@media (max-width: 899px) {
  .dsp-plattform__block-text { order: -1; }
}

.dsp-plattform__block-visual {
  width: 100%;
  aspect-ratio: 578 / 350;
  border-radius: 28px;
  background-color: #0f1733;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: luminosity;
}
.dsp-plattform__block-visual--placeholder {
  background: linear-gradient(135deg, #1a2547, #0d1530);
}
/* Anim-Visual: Snippet bringt eigene Bg-Gradient, kein bg-color/blend-mode
   ueberlagern. Snippet-Wrapper fuellt den 578:350-Slot komplett. */
.dsp-plattform__block-visual--anim {
  background-color: transparent;
  background-blend-mode: normal;
  /* Bild-Slot hat border-radius:28 vom Base, aber ohne overflow:hidden clippt
     der Canvas-Inhalt nicht zur runden Form. */
  overflow: hidden;
}
.dsp-plattform__block-visual--anim > .dsp-plattform-anim {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.dsp-plattform__block-text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.dsp-plattform__block-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin: 0;
}
.dsp-plattform__block-heading {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.5px;
  font-weight: 600;
  color: white;
  margin: 0;
  max-width: 520px;
}
.dsp-plattform__block-desc {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255,255,255,0.62);
  margin: 0;
  max-width: 533px;
}

/* 2-Spalten-Cards (QUELLSYSTEME / ANBINDUNG) — optional pro Block. */
.dsp-plattform__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 8px;
}
@media (min-width: 600px) {
  .dsp-plattform__cards { grid-template-columns: 1fr 1fr; gap: 32px; }
}
.dsp-plattform__card { min-width: 0; }
.dsp-plattform__card-label {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: white;
  margin: 0 0 8px;
}
.dsp-plattform__card-text {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255,255,255,0.62);
  margin: 0;
}

/* Mobile */
@media (max-width: 768px) {
  .dsp-plattform { padding: 64px 0 32px; }
  .dsp-plattform__head { margin-bottom: 48px; }
  .dsp-plattform__block { padding: 32px 0; }
}

/* ================================================
   DOCUSPINE PAGE — Layer-Wahrheit (Section 4)
   Bright blue full-width section with text-left + visual-right.
   ================================================ */
.dsp-layer {
  position: relative;
  background:
    /* heller Blau-Schleier rechts oben für den Bereich um das Visual */
    radial-gradient(ellipse 50% 55% at 78% 22%, rgba(0,99,255,0.42) 0%, transparent 65%),
    /* großer Schein-Glow unten mittig zur Compare-Tabelle hin */
    radial-gradient(ellipse 90% 55% at 50% 92%, rgba(0,99,255,0.45) 0%, transparent 60%),
    /* leichte Aufhellung links oben für die Body-Copy-Seite */
    radial-gradient(ellipse 60% 50% at 10% 30%, rgba(0,82,211,0.22) 0%, transparent 60%),
    /* Basis: dunkles Navy mit subtiler vertikaler Tiefe */
    linear-gradient(180deg, #0d0f1a 0%, #0a0e1f 45%, #0d0f1a 100%);
  color: white;
  padding: 105px 0 97px;
  overflow: hidden;
}
.dsp-layer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
@media (min-width: 900px) {
  .dsp-layer__inner { grid-template-columns: 1fr 1fr; gap: 80px; }
}
.dsp-layer__text { display: flex; flex-direction: column; }
.dsp-layer__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin: 0 0 32px;
}
.dsp-layer__heading {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.5px;
  font-weight: 600;
  color: white;
  margin: 0 0 32px;
  max-width: 520px;
}
.dsp-layer__desc {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255,255,255,0.65);
  margin: 0 0 22px;
  max-width: 580px;
}
.dsp-layer__strong {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: white;
  font-weight: 600;
  margin: 0;
  max-width: 580px;
}
.dsp-layer__visual {
  width: 100%;
  aspect-ratio: 578 / 350;
  border-radius: 28px;
  /* Gradient als Fallback wenn (noch) kein Layer-Image gesetzt ist —
     ein style="background-image:..." vom Template überschreibt das */
  background:
    radial-gradient(ellipse 80% 70% at 30% 20%, rgba(0,99,255,0.35) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(57,137,254,0.25) 0%, transparent 65%),
    linear-gradient(135deg, #0a1a44 0%, #060d24 50%, #0a1530 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow:
    0 24px 60px -20px rgba(0,99,255,0.5),
    inset 0 1px 0 0 rgba(255,255,255,0.06);
}

@media (max-width: 768px) {
  .dsp-layer { padding: 64px 0; }
  .dsp-layer__inner { gap: 32px; }
  .dsp-layer__heading { margin-bottom: 24px; }
}

/* ================================================
   docuspine Wordmark — inline span wrapper für jede "docuspine"-Erwähnung
   im Body/Heading-Text. Helper dspMark() im Template wrapt das Wort in
   <span class="dsp-mark">. Font ist Chillax (gleiche Marke wie Hero-Mark),
   skaliert mit Parent-Font-Size, erbt Farbe — passt damit in Headings,
   Body-Copy, Table-Cells, etc.
   ================================================ */
.dsp-mark,
.dnu-mark,
.dr-mark {
  font-family: 'Chillax', var(--font-display);
  font-weight: 500;
  letter-spacing: -0.04em;
  /* Brand-Wordmarks (docuspine, docunite, dataroom) müssen immer lowercase
     bleiben — die Chillax-Wordmark wirkt nur so. Überschreibt geerbtes
     text-transform: uppercase aus Eyebrow- und Table-Header-Kontexten. */
  text-transform: none;
  /* Chillax wirkt optisch kleiner als die umgebenden Schriften (Aspekta,
     Switzer). Mit 1.1em skalieren wir das Brand-Wordmark dynamisch 10%
     über die Parent-Font-Größe — proportional in Headings UND Body. */
  font-size: 1.1em;
  line-height: 1;
  /* Chillax + negativer letter-spacing frisst optisch den Raum zum
     angrenzenden Whitespace (z.B. "docuspine entdecken"). Padding auf
     beiden Seiten gleicht das aus. */
  padding-inline: 0.08em;
  /* color: inherit vom Parent */
}
/* Registered-/Trademark-Zeichen (vom brand-marks-Plugin gewrappt) —
   seitenweit einheitlich etwas kleiner als der umgebende Text. */
.brand-reg {
  font-size: 0.72em;
  letter-spacing: normal;
}

/* ================================================
   DOCUSPINE PAGE — Vergleichs-Tabelle (Nested in .dsp-layer)
   Vorher eigene .dsp-compare Section, jetzt Sub-Wrapper innerhalb der
   .dsp-layer Section (gemeinsamer dark-navy Hintergrund). Tabelle mit
   3 Spalten: Kriterium / Toolteppich heute / docuspine®. Die docuspine-
   Spalte ist als helle Card ausgekleidet, oben und unten überstehend
   (raised) und mit blauem Schein-Schatten — exponiert die Lösung.
   ================================================ */
.dsp-compare {
  margin-top: 88px;
}
.dsp-compare__head {
  margin: 0 0 48px;
  text-align: center;
}
.dsp-compare__heading {
  font-family: var(--font-display);
  /* Gleiche Größe wie .dsp-layer__heading der Section davor — visuelle
     Hierarchie-Parität, weil compare in dieselbe Layer-Section gehört. */
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.5px;
  font-weight: 600;
  color: white;
  margin: 0;
}

.dsp-compare__table {
  position: relative;
  background: rgba(16,19,36,0.5);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  /* overflow visible damit die exponierte docuspine-Spalte oben/unten
     überstehen kann; die Spalte trägt selbst rundete Ecken */
  overflow: visible;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.dsp-compare__row {
  display: grid;
  grid-template-columns: 220px 1fr 1fr;
  border-top: 1px solid rgba(255,255,255,0.06);
  align-items: stretch;
}
.dsp-compare__row:first-child { border-top: 0; }
.dsp-compare__row--head {
  background: rgba(10,14,27,0.5);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.dsp-compare__row--head:first-child {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}
.dsp-compare__cell {
  padding: 18px 26px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255,255,255,0.78);
  display: flex;
  align-items: center;
  gap: 14px;
}
/* Kriterium-Spalte (links): IMMER weiß, sowohl Header als auch Datenzeilen. */
.dsp-compare__cell--label {
  color: #ffffff;
  font-weight: 500;
  display: block;
}
/* Toolteppich-Spalte: gedimmter Text mit rötlich-grauem X-Icon */
.dsp-compare__cell--today {
  color: rgba(255,255,255,0.5);
}
/* docuspine-Spalte EXPONIERT: einheitlich dunkelblauer bg mit weißem
   Text — als zusammenhängende Säule, kein per-Zelle-Gradient (der sich
   sonst in jeder Zeile wiederholt). Glow nur einmal oben & unten. */
.dsp-compare__cell--with {
  position: relative;
  background: #0a1f4d;
  color: #ffffff;
  font-weight: 500;
  z-index: 1;
}
.dsp-compare__row:first-child .dsp-compare__cell--with {
  margin-top: -20px;
  padding-top: 28px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  box-shadow:
    0 -12px 32px -6px rgba(0,99,255,0.45),
    inset 0 1px 0 0 rgba(255,255,255,0.18);
}
.dsp-compare__row:last-child .dsp-compare__cell--with {
  margin-bottom: -20px;
  padding-bottom: 28px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  box-shadow: 0 16px 36px -6px rgba(0,99,255,0.45);
}
/* 1-Reihen-Sonderfall (theoretisch) */
.dsp-compare__row:first-child:last-child .dsp-compare__cell--with {
  box-shadow:
    0 -12px 32px -6px rgba(0,99,255,0.55),
    0 16px 36px -6px rgba(0,99,255,0.55);
}
/* Header Zeile */
.dsp-compare__row--head .dsp-compare__cell {
  padding-top: 22px;
  padding-bottom: 22px;
}
.dsp-compare__row--head .dsp-compare__cell--label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #ffffff;
}
.dsp-compare__col-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.6);
  margin-bottom: 2px;
}
.dsp-compare__col-name {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}
/* Toolteppich-Header: Name gedimmt / strikethrough-feel */
.dsp-compare__cell--today .dsp-compare__col-name {
  color: rgba(255,255,255,0.45);
}
/* docuspine-Header: Name weiß, plus Wordmark-Logo rechts */
.dsp-compare__cell--with .dsp-compare__col-name {
  color: #ffffff;
}
.dsp-compare__head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}
.dsp-compare__col-wordmark {
  font-family: 'Chillax', var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
/* Check / X icons */
.dsp-compare__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}
.dsp-compare__icon--check {
  color: #ffffff;
}
.dsp-compare__icon--x {
  color: rgba(255,255,255,0.4);
}
.dsp-compare__cell-text {
  flex: 1;
}
.dsp-compare__chip {
  display: inline-block;
  padding: 2px 7px;
  background: rgba(0,82,211,0.5);
  border: 1px solid rgba(147,197,253,0.3);
  border-radius: 4px;
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: #93c5fd;
  vertical-align: middle;
}

@media (max-width: 768px) {
  .dsp-compare { margin-top: 56px; }
  .dsp-compare__head { margin-bottom: 32px; }
  .dsp-compare__table { overflow: hidden; }
  .dsp-compare__row {
    grid-template-columns: 1fr;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  .dsp-compare__row--head { display: none; }
  .dsp-compare__cell {
    padding: 14px 20px;
    border-top: 1px solid rgba(255,255,255,0.04);
  }
  .dsp-compare__cell--label {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.5);
    border-top: 0;
    padding-bottom: 4px;
  }
  /* Mobile: docuspine-Spalte nicht raised (overflow:hidden auf Tabelle),
     stattdessen einfach als highlighted block mit weißem bg */
  .dsp-compare__cell--with {
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 14px 20px;
  }
  .dsp-compare__row:first-child .dsp-compare__cell--with,
  .dsp-compare__row:last-child .dsp-compare__cell--with {
    margin: 0;
    padding: 14px 20px;
    border-radius: 0;
    box-shadow: none;
  }
  .dsp-compare__cell::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    margin-bottom: 4px;
  }
  .dsp-compare__cell--label::before { display: none; }
}

/* ================================================
   DOCUSPINE PAGE — Voices/Testimonial-Carousel (Section 6)
   Soft bg + glass card, 3 testimonials, auto-rotate + dots + pause.
   ================================================ */
.dsp-voices {
  /* 3-Layer-BG matching Figma 859:16829:
     1) white base
     2) blurred office photo at 50% opacity (::before)
     3) blue multiply overlay rgba(0,82,211,0.1) (::after)
     Container content sits auf z-index: 1 damit es nicht im BG verschwindet. */
  background: #fff;
  padding: 96px 0;
  min-height: 900px;
  color: #0d0f1a;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.dsp-voices::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/assets/images/backgrounds/bg_voices.jpg') center/cover no-repeat;
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
}
.dsp-voices::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,82,211,0.10);
  mix-blend-mode: multiply;
  z-index: 0;
  pointer-events: none;
}
.dsp-voices > .container {
  position: relative;
  z-index: 1;
}
.dsp-voices__head {
  text-align: center;
  margin: 0 0 48px;
}
.dsp-voices__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #6b7280;
  margin: 0 0 24px;
}
.dsp-voices__heading {
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.5px;
  font-weight: 500;
  color: #0d0f1a;
  margin: 0;
}

/* Carousel viewport */
.dsp-voices__viewport {
  max-width: 1024px;
  margin: 0 auto;
}
.dsp-voices__track {
  position: relative;
  display: grid;
}
.dsp-voices__card {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: 248px 1fr;
  gap: 40px;
  align-items: stretch;
  /* Glas-Look: stärker transparent damit die BG-Orbs durchschimmern */
  background: rgba(255,255,255,0.30);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 28px;
  padding: 32px;
  box-shadow:
    0 8px 40px -8px rgba(0,30,80,0.18),
    inset 0 1px 0 0 rgba(255,255,255,0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s ease;
}
.dsp-voices__card.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* Left: Portrait (full card height, rounded) */
.dsp-voices__portrait {
  width: 248px;
  height: 100%;
  min-height: 240px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(135deg, #c2d1f0, #8aa6d6);
}
.dsp-voices__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dsp-voices__portrait--placeholder {
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.4), transparent 60%),
    linear-gradient(135deg, #6b7da3, #354768);
}

/* Right: Quote top, Footer (author + logo) at the bottom of the column */
.dsp-voices__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 8px 0;
}
.dsp-voices__quote {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  color: rgba(13,15,26,0.82);
  margin: 0;
  flex: 1;
}
.dsp-voices__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-top: 32px;
}
.dsp-voices__author {
  /* Bottom-left, neben dem Logo */
}
.dsp-voices__author-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: #0d0f1a;
  margin: 0;
  line-height: 1.4;
}
.dsp-voices__author-role {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.4px;
  color: rgba(13,15,26,0.55);
  margin: 4px 0 0;
  line-height: 1.4;
}
.dsp-voices__logo {
  height: 44px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  flex-shrink: 0;
  margin: 0;
}

/* Controls — dots + pause */
.dsp-voices__controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
}
.dsp-voices__dots {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: white;
  border-radius: 999px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.dsp-voices__dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(13,15,26,0.18);
  border: 0;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  transition: width 0.35s ease, border-radius 0.35s ease;
}
.dsp-voices__dot.is-active {
  /* aktiver Dot wird zur Pille; der dunkle Fill innen wächst über
     die Autoplay-Dauer linear von 0 auf 100% */
  width: 56px;
  border-radius: 4px;
}
/* Progress-Fill — animates via transform: scaleX (GPU-composited, smooth).
   JS sets transition + transform value. Auf inaktiven Dots bleibt scaleX(0). */
.dsp-voices__dot-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: #0d0f1a;
  border-radius: inherit;
  pointer-events: none;
  will-change: transform;
}

@media (max-width: 768px) {
  .dsp-voices { padding: 64px 0; }
  .dsp-voices__head { margin-bottom: 32px; }
  .dsp-voices__card {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px;
  }
  .dsp-voices__portrait {
    width: 100%;
    height: 220px;
  }
  .dsp-voices__quote { font-size: 16px; }
  .dsp-voices__logo { height: 36px; }

  /* Referenzen mobil: natives Touch-Swipe statt JS-Crossfade.
     Karten in eine scrollbare Flex-Reihe; der JS-Autoplay-Crossfade
     (opacity) wird durch opacity:1 !important neutralisiert, Dots
     entfallen — gewischt wird nativ. */
  .dsp-voices__viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 8px 0 24px;
    margin: -8px 0 -24px;
  }
  .dsp-voices__viewport::-webkit-scrollbar { display: none; }
  .dsp-voices__track {
    display: flex;
    gap: 16px;
  }
  .dsp-voices__card {
    flex: 0 0 86%;
    scroll-snap-align: start;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .dsp-voices__controls { display: none; }
}

/* ================================================
   DOCUSPINE PAGE — Integrationen + MCP (Section 7)
   Light. Header (eyebrow+heading left, intro+CTA right) +
   large soft-grey card with dark Wissensgraph visual and MCP description.
   ================================================ */
.dsp-integ {
  background: #ffffff;
  color: #0d0f1a;
  padding: 80px 0 100px;
}
.dsp-integ__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
  margin-bottom: 56px;
}
@media (min-width: 900px) {
  .dsp-integ__head {
    grid-template-columns: 1fr 467px;
    gap: 32px;
  }
}
.dsp-integ__head-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.dsp-integ__head-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding-left: 0;
}
@media (min-width: 900px) {
  .dsp-integ__head-right { padding-left: 57px; }
}
.dsp-integ__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
  line-height: 1.6;
  text-transform: uppercase;
  color: #0d0f1a;
  margin: 0;
}
.dsp-integ__heading {
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.5px;
  font-weight: 500;
  color: #0d0f1a;
  margin: 0;
  max-width: 600px;
}
.dsp-integ__intro {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: #0d0f1a;
  margin: 0;
  max-width: 420px;
}
.dsp-integ__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 24px;
  background: #0052d3;
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  text-decoration: none;
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 8px 24px -10px rgba(0, 82, 211, 0.4);
}
.dsp-integ__cta:hover {
  background: #0040a8;
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -10px rgba(0, 82, 211, 0.55);
}

/* Big soft-grey card holding visual + MCP description */
.dsp-integ__card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 20px;
  padding: 40px;
}
@media (min-width: 900px) {
  .dsp-integ__card {
    grid-template-columns: 502px 1fr;
    gap: 44px;
    padding: 50px;
  }
}

.dsp-integ__visual {
  width: 100%;
  aspect-ratio: 502 / 458;
  border-radius: 35px;
  overflow: hidden;
  background: #0a1428;
}
.dsp-integ__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dsp-integ__mcp {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
  padding: 6px 0;
}
@media (min-width: 900px) {
  .dsp-integ__mcp { padding: 6px 50px 6px 0; }
}
.dsp-integ__mcp-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
  line-height: 1.6;
  text-transform: uppercase;
  color: #0d0f1a;
  margin: 0;
}
.dsp-integ__mcp-heading {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.6vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.5px;
  font-weight: 550;
  color: #0d0f1a;
  margin: 0;
  max-width: 480px;
}
.dsp-integ__mcp-text {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: rgba(13, 15, 26, 0.6);
  margin: 0;
  max-width: 500px;
}
.dsp-integ__tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0;
}
.dsp-integ__tag {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  background: rgba(13, 15, 26, 0.06);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 17.6px;
  color: #0d0f1a;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .dsp-integ { padding: 64px 0 72px; }
  .dsp-integ__head { margin-bottom: 40px; }
  .dsp-integ__visual { aspect-ratio: 4 / 3; border-radius: 24px; }
  .dsp-integ__card { padding: 28px; border-radius: 16px; }
}

/* ================================================
   DOCUSPINE PAGE — Sicherheit (Section 8)
   Dark navy. Header (heading left, intro+CTA right) + 4 glass cards + inline-list.
   ================================================ */
.dsp-sich {
  background: #141d39;
  color: white;
  padding: 80px 0 96px;
}
.dsp-sich__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
  margin: 0 0 48px;
}
@media (min-width: 900px) {
  .dsp-sich__head { grid-template-columns: 1fr 467px; }
}
.dsp-sich__head-left { min-width: 0; }
.dsp-sich__head-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.dsp-sich__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: white;
  margin: 0 0 16px;
}
.dsp-sich__heading {
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.5px;
  font-weight: 500;
  color: white;
  margin: 0;
  max-width: 700px;
}
.dsp-sich__intro {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: white;
  margin: 0;
  max-width: 540px;
}

.dsp-sich__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
@media (min-width: 600px)  { .dsp-sich__cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .dsp-sich__cards { grid-template-columns: repeat(4, 1fr); } }

.dsp-sich__card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 23px;
  min-height: 257px;
  display: flex;
  flex-direction: column;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.dsp-sich__card:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.16);
  transform: translateY(-3px);
}
.dsp-sich__card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin-bottom: 24px;
  flex-shrink: 0;
}
.dsp-sich__card-icon svg { width: 20px; height: 20px; }
.dsp-sich__card-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: white;
  margin: 0 0 16px;
  line-height: 1.3;
}
.dsp-sich__card-text {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,0.55);
  margin: 0;
}

/* Inline list "Außerdem: ..." */
.dsp-sich__inline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.dsp-sich__inline-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-right: 12px;
}
.dsp-sich__inline-item {
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(255,255,255,0.78);
}
.dsp-sich__inline-sep {
  color: rgba(255,255,255,0.25);
  margin: 0 6px;
}

@media (max-width: 768px) {
  .dsp-sich { padding: 64px 0; }
  .dsp-sich__card { min-height: 0; padding: 20px; }
  .dsp-sich__card-icon { margin-bottom: 18px; }
}

/* ================================================
   DOCUSPINE PAGE — FAQ (Section 9)
   White, big heading left + accordion right (reuses .faq__* JS).
   ================================================ */
.dsp-faq {
  background: white;
  padding: 128px 0;
  color: #0d0f1a;
}
.dsp-faq__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}
@media (min-width: 900px) {
  .dsp-faq__grid { grid-template-columns: 380px 1fr; gap: 64px; }
}
.dsp-faq__heading {
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, 72px);
  line-height: 1;
  letter-spacing: -2px;
  font-weight: 500;
  color: #0d0f1a;
  margin: 0;
  align-self: start;
}
/* Optionale Utility-Klassen — User kann sie im Heading-Feld nutzen, z.B.
   "Häufige <span class="dsp-faq__heading-faded">Fragen</span>". */
.dsp-faq__heading-strong { color: #0d0f1a; }
.dsp-faq__heading-faded { color: rgba(13,15,26,0.22); }

.dsp-faq__items { width: 100%; min-width: 0; }
.dsp-faq__item { border-bottom: 1px solid rgba(13,15,26,0.08); }
.dsp-faq__item:first-child { border-top: 1px solid rgba(13,15,26,0.08); }

.dsp-faq__question {
  width: 100%;
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: transparent;
  border: 0;
  padding: 16px 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: #0d0f1a;
  transition: color .15s ease;
}
.dsp-faq__question:hover { color: var(--brand-blue, #0052D3); }
.dsp-faq__question .faq__question-text { flex: 1; }
.dsp-faq__question .faq__question-icon {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: 32px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s ease;
  color: #0d0f1a;
  flex-shrink: 0;
  line-height: 1;
}
.faq__item.active .dsp-faq__question .faq__question-icon {
  transform: rotate(45deg);
}
/* Die docuspine-FAQ nutzt das Text-"+" als Icon. homepage.css zeichnet
   zusätzlich ein + via ::before/::after → doppeltes Plus. Pseudo-+ aus. */
.dsp-faq__question .faq__question-icon::before,
.dsp-faq__question .faq__question-icon::after {
  display: none;
}

/* Answer styling */
.dsp-faq__item .faq__answer-inner {
  padding: 0 0 24px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: rgba(13,15,26,0.68);
  max-width: 760px;
}

@media (max-width: 768px) {
  .dsp-faq { padding: 80px 0; }
}

/* ================================================
   DOCUSPINE PAGE — Bottom CTA (Section 10)
   Brand-blue with subtle bg pattern. Photo card left, heading+CTA right.
   ================================================ */
.dsp-cta {
  background-color: #0052d3;
  /* Bild ist 9000 px breit (WebP) — viel breiter als jeder Viewport, sodass
     cover bei jeder Section-Breite den Mittel-Crop zeigt ohne Streckung.
     Daher kein Side-Fade-Hack mehr noetig. */
  background-image: url('/assets/images/backgrounds/bg_cta_demo.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: white;
  height: 600px;
  display: flex;
  align-items: center;
  padding: 60px 0;
  position: relative;
  overflow: hidden;
}
@media (max-width: 900px) {
  .dsp-cta {
    height: auto;
    padding: 80px 0;
    display: block;
  }
}
.dsp-cta__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
@media (min-width: 900px) {
  .dsp-cta__inner { grid-template-columns: 254px 1fr; gap: 64px; }
}

/* Person card */
.dsp-cta__person {
  position: relative;
  width: 254px;
  height: 271px;
  flex-shrink: 0;
}
.dsp-cta__person-photo {
  position: absolute;
  inset: 0;
  border-radius: 40px 40px 15px 15px;
  border: 2.4px solid #1769ea;
  /* Transparent overlay so freigestellte Portraits zeigen die CTA-BG durch */
  background-color: rgba(255,255,255,0.18);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
.dsp-cta__person-photo--placeholder {
  background: linear-gradient(135deg, #2d7bff 0%, #1769ea 100%);
}
.dsp-cta__person-namebox {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 8px 8px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 15px;
  padding: 10px 19px;
  z-index: 1;
}
.dsp-cta__person-name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  color: #0d0f1a;
  margin: 0;
}
.dsp-cta__person-role {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(13,15,26,0.7);
  margin: 2px 0 0;
  line-height: 1.4;
}

/* Body */
.dsp-cta__body { min-width: 0; }
.dsp-cta__heading {
  font-family: var(--font-display);
  font-size: clamp(44px, 5.5vw, 64px);
  line-height: 1.1;
  letter-spacing: -2px;
  font-weight: 600;
  color: white;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
}
.dsp-cta__text {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.45;
  color: white;
  margin: 0 0 32px;
  max-width: 720px;
}
.dsp-cta__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.dsp-cta__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 24px;
  background: white;
  color: #0d0f1a;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  border-radius: 12px;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.dsp-cta__button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -4px rgba(0,0,0,0.2);
}
.dsp-cta__note {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 11px;
  color: white;
  line-height: 1.3;
  margin: 0;
  max-width: 220px;
}

@media (max-width: 768px) {
  .dsp-cta { padding: 64px 0; }
  .dsp-cta__inner { gap: 32px; }
  .dsp-cta__person { margin: 0 auto; }
}

/* Hero spacing is now reduced globally in homepage.css — modifier removed. */

/* ================================================
   APPROACH PARALLAX SECTION
   Vollflächiges Architektur-Foto mit blauem Gradient
   Background scrollt langsamer als Vordergrund (parallax)
   ================================================ */
.approach-parallax {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 160px 0 120px;
  color: #fff;
  /* solid fallback if image fails */
  background: linear-gradient(168deg, #3989FE 27%, #0052D3 80%);
}
.approach-parallax__bg {
  position: absolute;
  inset: -15% 0 -15% 0; /* extra height so parallax-translate doesn't reveal edges */
  background-size: cover;
  background-position: center 65%;
  background-repeat: no-repeat;
  filter: saturate(0.85);
  will-change: transform;
  z-index: 0;
}
.approach-parallax__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(168deg, rgba(57,137,254,0.55) 27%, rgba(0,82,211,0.55) 80%),
    linear-gradient(180deg, rgba(0,16,51,0.35) 0%, rgba(0,16,51,0) 25%, rgba(0,16,51,0) 75%, rgba(0,16,51,0.35) 100%);
  mix-blend-mode: normal;
}
.approach-parallax__inner {
  position: relative;
  z-index: 2;
}
.approach-parallax__intro {
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
}
.approach-parallax__eyebrow {
  display: inline-flex;
  justify-content: center;
  margin-bottom: 20px;
}
.approach-parallax__heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 4.2vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: #fff;
  margin: 0;
}
.approach-parallax__description {
  margin: 64px auto 0;
  max-width: 720px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255,255,255,0.85);
}
.approach-parallax__bullets {
  list-style: none;
  padding: 0;
  margin: 96px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 1100px;
}
.approach-parallax__bullet {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 12px;
}
.approach-parallax__bullet-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: 20px;
  color: #fff;
  opacity: 0.92;
}
.approach-parallax__bullet-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.approach-parallax__bullet-title {
  font-family: var(--font-display);
  font-weight: 550;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.25px;
  color: #fff;
  margin: 0 0 14px;
}
.approach-parallax__bullet-text {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,0.65);
  margin: 0;
  max-width: 320px;
}

@media (max-width: 960px) {
  .approach-parallax { padding: 120px 0 96px; }
  .approach-parallax__bullets {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-top: 64px;
  }
  .approach-parallax__bullet-text { max-width: 480px; }
}

@media (max-width: 600px) {
  .approach-parallax { padding: 96px 0 72px; }
  .approach-parallax__heading { font-size: 30px; }
}

/* Disable parallax effect for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .approach-parallax__bg {
    transform: none !important;
    inset: 0;
  }
}

/* ================================================
   TRUST SHOWCASE — Figma 1:1
   Heading oben, darunter 3 Cards vertikal gestapelt
   in Normal-Flow. Keine Card-BGs (entfernt), nur
   subtile Trennlinien zwischen den Cards für Rhythmus.
   ================================================ */
.trust-showcase {
  background: #fff;
  padding: 120px 0;
}
.trust-showcase__header {
  margin-bottom: 56px;
}
.trust-showcase__heading {
  font-family: var(--font-display);
  font-weight: 550;
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--text-dark);
  margin: 0;
  max-width: 1100px;
}
.trust-showcase__cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.trust-showcase__card {
  padding: 72px 0;
  /* Anker-Target: bei #anker-Sprung sauber unter Nav landen */
  scroll-margin-top: 120px;
}
.trust-showcase__card-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 80px;
  align-items: center;
  min-height: 400px;
}
/* Alternierendes Layout: zweite Card spiegelt Content/Visual horizontal. */
.trust-showcase__card:nth-child(even) .trust-showcase__card-inner {
  direction: rtl;
}
.trust-showcase__card:nth-child(even) .trust-showcase__card-inner > * {
  direction: ltr;
}
.trust-showcase__card-content {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 520px;
}
.trust-showcase__card-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #6b7280;
  margin: 0;
}
.trust-showcase__card-heading {
  font-family: var(--font-display);
  font-weight: 550;
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--text-dark);
  margin: 0;
}
.trust-showcase__card-text {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: rgba(0,0,0,0.6);
  margin: 0;
  max-width: 480px;
}
.trust-showcase__card-visual {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #0a1628;
}
.trust-showcase__card-visual > * {
  width: 100%;
  height: 100%;
}
.trust-showcase__card-visual .feat-mock {
  aspect-ratio: unset !important;
  height: 100% !important;
  border-radius: 24px !important;
}
.trust-showcase__card-visual img {
  display: block;
  object-fit: cover;
}

@media (max-width: 960px) {
  .trust-showcase { padding: 96px 0 0; }
  .trust-showcase__header {
    position: static;
    padding: 0 0 32px;
  }
  .trust-showcase__cards { padding-bottom: 0; }
  .trust-showcase__card {
    position: static;
    margin-bottom: 0 !important;
    padding: 56px 0;
  }
  .trust-showcase__card-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    min-height: 0;
  }
  /* Mobile: keine direction:rtl — Cards sind 1-spaltig untereinander */
  .trust-showcase__card:nth-child(even) .trust-showcase__card-inner {
    direction: ltr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .trust-showcase__card,
  .trust-showcase__header { position: static; }
  .trust-showcase__cards { padding-bottom: 0; }
  .trust-showcase__card { margin-bottom: 0 !important; }
}

/* ================================================
   FEATURE ROWS — alternierende Text/Visual-Bloecke
   (vormals Bento-Grid). Heller Look wie Trust-Showcase,
   Struktur wie docuspine-Plattform (animationsfaehig).
   ================================================ */
.feature-rows {
  background: #fff;
  padding: 120px 0;
}
.feature-rows__title {
  font-family: var(--font-display);
  font-weight: 550;
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--text-dark);
  margin: 0 0 56px;
  max-width: 1100px;
}
.feature-rows__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.feature-rows__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
  padding: 48px 0;
  /* Anker-Target: bei #anker-Sprung unter sticky nav landen */
  scroll-margin-top: 120px;
}
@media (min-width: 900px) {
  .feature-rows__row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 80px;
  }
  /* Alternierend: gerade Reihen spiegeln das Visual nach rechts. */
  .feature-rows__row:nth-child(even) .feature-rows__visual {
    grid-column: 2;
    grid-row: 1;
  }
  .feature-rows__row:nth-child(even) .feature-rows__text {
    grid-column: 1;
    grid-row: 1;
  }
  .feature-rows__row--no-visual { grid-template-columns: 1fr; }
}

.feature-rows__visual {
  width: 100%;
  border-radius: 24px;
  overflow: hidden;
  background: #f4f4f5;
}
/* Bild → festes 578:350-Format. */
.feature-rows__visual--media { aspect-ratio: 578 / 350; }
/* Embed/Animation → keine feste Höhe: der iframe wird per JS exakt auf die
   Inhaltshöhe der Animation gesetzt (kein Inner-Scroll). min-height ist nur
   ein Platzhalter, bis die Animation ihre Höhe gemeldet hat. */
.feature-rows__visual--embed {
  background: transparent;
  /* Nur Platzhalter, bis die Animation ihre Höhe gemeldet hat — danach
     ist der Container exakt so hoch wie die Animation. */
  min-height: 200px;
}
.feature-rows__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.feature-rows__visual iframe {
  width: 100%;
  border: 0;
  display: block;
}
.feature-rows__visual--embed iframe {
  height: auto;
}

.feature-rows__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 520px;
}
.feature-rows__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #6b7280;
  margin: 0;
}
.feature-rows__heading {
  font-family: var(--font-display);
  font-weight: 550;
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--text-dark);
  margin: 0;
}
.feature-rows__desc {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: rgba(0,0,0,0.6);
  margin: 0;
}

@media (max-width: 900px) {
  .feature-rows { padding: 96px 0; }
  .feature-rows__title { margin-bottom: 40px; }
  .feature-rows__row { padding: 32px 0; }
  /* Mobile: immer erst der Text, dann das Visual (im DOM steht das Visual zuerst). */
  .feature-rows__text { order: 0; }
  .feature-rows__visual { order: 1; }
}

/* ================================================
   TRUST-SPLIT — Sicherheit + Integration Sections
   Dunkle/blaue Sections mit Heading links, Content+Button rechts
   ================================================ */
.trust-split {
  position: relative;
  overflow: hidden;
  scroll-margin-top: 100px;
  padding: 96px 0;
  color: #fff;
}
/* .trust-split--dark wird nicht mehr als eigene <section> verwendet —
   die Sicherheit-Inhalte leben jetzt in .security-zone__intro INNERHALB
   der .security-zone. Klassen .trust-split__* werden für Layout der
   Inhalte (Grid, Heading, Button) weiter genutzt. */
.trust-split--brand { background: #0063ff; }

.trust-split__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.trust-split__left {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.trust-split__right {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-end;
}
.trust-split--dark .trust-split__right { align-items: flex-start; }
.trust-split--brand .trust-split__left { gap: 28px; }

.trust-split__eyebrow {
  display: inline-flex;
  margin: 0;
}
.trust-split__heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 4.0vw, 46px);
  line-height: 1.1;
  color: #fff;
  margin: 0;
  max-width: 720px;
  letter-spacing: -0.25px;
}
.trust-split__description {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: #fff;
  margin: 0;
  max-width: 520px;
}
.trust-split__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 12px;
  background: rgba(255,255,255,0.2);
  color: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
  align-self: flex-start;
}
.trust-split__btn:hover { background: rgba(255,255,255,0.3); transform: translateY(-1px); }
.trust-split__btn svg { width: 16px; height: 16px; }

/* Integration logo cloud — 6 tiles in a wave/pyramid arrangement */
.trust-split__logos {
  display: grid;
  grid-template-columns: repeat(4, 88px);
  gap: 16px;
  justify-content: end;
  margin-top: 16px;
}
.trust-split__logo-tile {
  width: 88px;
  height: 81px;
  background: #fff;
  border: 2px solid #e2e5eb;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.trust-split__logo-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -8px rgba(0,0,0,0.15);
}
.trust-split__logo-tile img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* Stagger middle column down to suggest wave layout */
.trust-split__logo-tile:nth-child(4n+2),
.trust-split__logo-tile:nth-child(4n+3) {
  transform: translateY(20px);
}
.trust-split__logo-tile:nth-child(4n+2):hover,
.trust-split__logo-tile:nth-child(4n+3):hover {
  transform: translateY(18px);
}

@media (max-width: 960px) {
  .trust-split { padding: 72px 0; }
  .trust-split__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .trust-split__right { align-items: flex-start; }
  .trust-split__logos {
    grid-template-columns: repeat(3, 1fr);
    justify-content: stretch;
  }
  .trust-split__logo-tile { width: 100%; }
  .trust-split__logo-tile:nth-child(4n+2),
  .trust-split__logo-tile:nth-child(4n+3) { transform: none; }
}

/* ================================================
   docuspine-Page Hero — full-viewport layout + particles.js layer
   - Section füllt 100% Viewport-Höhe (100svh gegen Address-Bar-Sprung
     auf Mobile, 100vh als Fallback). Kein flex/grid auf der Section
     selbst — sonst greift die .container max-width nicht mehr.
   - Container wird zum Grid: Body-Row (1fr) zentriert vertikal,
     Logo-Row (auto) bleibt an der Unterkante.
   - Particles liegen zwischen Glow-Orbs (.hero__bg) und Content.
     .hero > * setzt z-index:1 als Default; wir überschreiben gezielt
     mit z-index:0, damit Content (z-index:1) immer oben bleibt.
   - Body & Logos sind pointer-transparent, damit der Particles-Hover
     auch unter den Texten greift. Klickbare Elemente (CTA, Logos)
     bekommen pointer-events:auto zurück.
   ================================================ */
.hero--particles {
  min-height: 100vh;
  min-height: 100svh;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
}
.hero--particles > .container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  pointer-events: none;
}
.hero--particles .hero__body {
  padding-top: 0;
  margin-block: 0;
  /* docuspine-Hero hat mehr Platz, Container ist breit — Heading + Sub
     dürfen breiter laufen damit nicht unnötig viele Zeilen entstehen. */
  max-width: 1300px;
}
.hero--particles .hero__heading { max-width: 1100px; }
.hero--particles .hero__sub { max-width: 720px; }
.hero--particles > .hero__logos {
  /* margin: 0 (alle 4 Seiten) — wichtig: keine auto-Margins links/rechts,
     sonst absorbieren sie in flex-column-Parents den horizontalen Platz
     und der Logo-Block schrumpft auf Content-Breite statt full-width. */
  margin: 0;
  padding-bottom: 40px;
  pointer-events: none;
  width: 100%;
  align-self: stretch;
  text-align: center;
}
.hero--particles .hero__logos-label {
  display: block;
  text-align: center;
}
/* Seamless marquee: gap (nur zwischen Items) durch uniformes margin-right
   ersetzen, sonst sind 50% Track-Translation off-by-half-gap und der Loop
   springt sichtbar zurück. */
.hero--particles .hero__logos-track {
  gap: 0;
}
.hero--particles .hero__logos-track img {
  margin-right: 64px;
}
.hero--particles a,
.hero--particles button,
.hero--particles .hero__logos-marquee {
  pointer-events: auto;
}
/* Produkt-Wordmark + Eyebrow in einer Zeile über der Headline (Figma 1086:1628).
   Inline-Flex damit beide Elemente nebeneinander stehen; parent (.hero__body)
   ist text-align:center, was den inline-flex-Block zentriert. */
.hero--particles .hero__product-row {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 24px;
}
.hero--particles .hero__product-mark {
  font-family: 'Chillax', var(--font-display);
  font-weight: 500;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -1.8px;
  color: var(--pure-white);
}
.hero--particles .hero__product-row .hero__eyebrow {
  margin: 0;
}
/* Mobil bricht das Eyebrow 2-zeilig um — dann vertikal mittig zur
   "docuspine"-Wortmarke statt baseline (sonst sitzt es nach unten versetzt). */
@media (max-width: 640px) {
  .hero--particles .hero__product-row { align-items: center; }
}
.hero--particles .hero__particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: auto;
}
.hero--particles .hero__particles canvas {
  display: block;
}
.hero--particles .hero__bg-orb {
  opacity: 0.6;
}

/* ================================================
   KONTROLLE — "Kontrolle, die Sicherheit schafft"
   Setzt nahtlos auf die Sicherheits-Section auf
   (gleiche dunkle BG-Farbe). Heading + 2 Cards.
   ================================================ */
/* ================================================
   SECURITY ZONE — gemeinsame dunkle Section für
   Sicherheit (Intro: Heading + Description+Button)
   UND Kontrolle (Cards). Single BG-Image über die
   ganze Section, nur angedeutet (low opacity).
   ================================================ */
.security-zone {
  position: relative;
  background: #04081e;
  color: #fff;
  padding: 96px 0 120px;
  overflow: hidden;
  isolation: isolate;
  scroll-margin-top: 100px;
}
.security-zone::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    url('/assets/images/backgrounds/bg_sicherheit_cube.webp')
    no-repeat
    center center;
  background-size: cover;
  /* Volle Sichtbarkeit — kein Fade, kein Overlay (per User-Wunsch). */
  opacity: 1;
  z-index: 0;
  pointer-events: none;
}
.security-zone > * {
  position: relative;
  z-index: 1;
}
.security-zone__intro {
  padding-bottom: 80px;
}
/* Kontrolle-Card-Styles bleiben weiter unten (siehe `.kontrolle__cards`,
   `.kontrolle__card` etc.) — die werden weiter genutzt, nur ohne eigene Section-BG. */
.kontrolle__heading {
  position: relative;
  font-family: var(--font-display);
  font-weight: 550;
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.1;
  letter-spacing: -1px;
  color: #fff;
  margin: 0 0 56px;
  max-width: 720px;
}
.kontrolle__cards {
  position: relative;
  display: grid;
  grid-template-columns: 1.18fr 1fr;
  gap: 24px;
}
.kontrolle__card {
  background: #f6f7f9;
  color: var(--text-dark);
  border-radius: 24px;
  padding: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  /* stretch (default): Cells nehmen volle Card-Höhe. Damit beginnen die
     Card-Texte aller Cards auf gleicher Höhe (alle am Card-padding-top
     statt vertikal zentriert mit Inhalts-abhängigem Versatz). Visual-
     Inhalt zentriert sich intern via flex justify-content (siehe unten). */
  align-items: stretch;
  min-height: 372px;
  /* Anker-Target */
  scroll-margin-top: 120px;
}
.kontrolle__card--wide  { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.kontrolle__card--narrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.kontrolle__card-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 380px;
}
.kontrolle__card-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #6b7280;
  margin: 0;
}
.kontrolle__card-heading {
  font-family: var(--font-display);
  font-weight: 550;
  font-size: 22px;
  line-height: 1.18;
  color: var(--text-dark);
  margin: 0;
}
.kontrolle__card-text {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  color: rgba(13,15,26,0.6);
  margin: 0;
}
.kontrolle__card-visual {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  min-height: 220px;
  background: linear-gradient(135deg, rgba(0,82,211,0.06) 0%, rgba(0,82,211,0.1) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
}
.kontrolle__card-visual--placeholder { color: rgba(0,82,211,0.35); }
.kontrolle__card-visual--placeholder svg { width: 60%; height: auto; }
.kontrolle__card-visual img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 960px) {
  .kontrolle { padding: 64px 0 80px; }
  .kontrolle__cards { grid-template-columns: 1fr; }
  .kontrolle__card,
  .kontrolle__card--wide,
  .kontrolle__card--narrow {
    grid-template-columns: 1fr;
    min-height: 0;
  }
}

/* ================================================
   INTEGRATION — Blau mit docunite-Sign Background
   ================================================ */
.integration {
  position: relative;
  background-color: #0063ff;
  /* Pre-baked Visual: solid blau + docunite-sign Peak rechts-unten.
     `100% auto` statt `cover` → kein Horizontal-Overflow, Peak-X-Position
     bleibt bei JEDER Viewport-Breite konstant (immer bei 57% der Section). */
  background-image: url('/assets/images/backgrounds/bg_integration.png');
  background-size: 100% auto;
  background-position: center bottom;
  background-repeat: no-repeat;
  color: #fff;
  padding: 96px 0 140px;
  min-height: 550px;
  overflow: hidden;
}
.integration .container { position: relative; }

.integration__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
  margin-bottom: 64px;
  /* Grid über den Logo-Grid heben (logos haben margin-top: -130px und
     position: relative, würden sonst klick-events des CTA-Buttons stehlen). */
  position: relative;
  z-index: 2;
}
.integration__copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 560px;
  /* Copy-Spalte über den Logo-Grid heben — sonst klauen die Logo-Tiles
     (margin-top: -130px) die Pointer-Events vom CTA-Button. */
  position: relative;
  z-index: 2;
}
.integration__eyebrow { display: inline-flex; margin: 0; }
.integration__heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 4.0vw, 46px);
  line-height: 1.1;
  color: #fff;
  margin: 0;
  max-width: 600px;
  letter-spacing: -0.25px;
}
.integration__description {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: #fff;
  margin: 0;
  max-width: 480px;
}
.integration__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 12px;
  background: rgba(255,255,255,0.2);
  color: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
  align-self: flex-start;
  margin-top: 8px;
}
.integration__btn:hover { background: rgba(255,255,255,0.3); transform: translateY(-1px); }
.integration__btn svg { width: 16px; height: 16px; }

/* Logos im Chevron/Pyramid-Layout — folgen der Peak-Linie im BG-Image. */
.integration__logos {
  position: relative;
  display: grid;
  /* Tiles sind leicht rechteckig (breiter als hoch) damit non-square Logos
     wie langdock, claude, n8n, sap, elo deutlich mehr Platz bekommen. */
  grid-template-columns: repeat(7, 110px);
  gap: 22px;
  justify-content: center;
  align-content: center;
  /* nach RECHTS verschoben damit Center-Tile (SharePoint) auf Peak landet */
  padding-left: 18%;
  /* nach OBEN gezogen damit die Chevron-Spitze näher am Peak sitzt */
  margin-top: -130px;
}
.integration__logo-tile {
  width: 110px;
  height: 88px;
  background: #fff;
  border: 2px solid rgba(255,255,255,0.4);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  color: #0d0f1a;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  text-align: center;
  line-height: 1.15;
}
.integration__logo-tile img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.integration__logo-tile:hover {
  box-shadow: 0 14px 28px -10px rgba(0,0,0,0.30);
}
/* Chevron: Tiles steigen zum Center (4. Position) auf.
   Stagger entspricht ~23° Slope (passt zum docunite-Sign Peak im BG-Image):
   ΔY zwischen aufeinanderfolgenden Tiles ≈ tile-width * tan(23°) ≈ 43px */
.integration__logos > :nth-child(1),
.integration__logos > :nth-child(7) { --y: 130px; }
.integration__logos > :nth-child(2),
.integration__logos > :nth-child(6) { --y: 86px; }
.integration__logos > :nth-child(3),
.integration__logos > :nth-child(5) { --y: 43px; }
.integration__logos > :nth-child(4) { --y: 0px; }
.integration__logos > .integration__logo-tile {
  transform: translateY(var(--y, 0));
}
.integration__logos > .integration__logo-tile:hover {
  transform: translateY(calc(var(--y, 0px) - 4px));
}

@media (max-width: 960px) {
  .integration { padding: 72px 0; }
  .integration__grid { grid-template-columns: 1fr; gap: 40px; }
  .integration__sign { display: none; }
  /* Logo-Chevron ist ein Desktop-Showpiece (margin-top:-130px für den
     Peak-Effekt) — gestapelt überlappt er den Text. Mobil/Tablet raus. */
  .integration__logos { display: none; }
}