/* ============================================================
   scoreprise.AI — Website (Landing + Use Cases)
   ============================================================ */

html, body { background: var(--surface); }
body { color: var(--ink-900); }

/* ============ TOP NAV ============ */
/* Nav-Hoehe zentral: deckt sich mit der .bg-nav der Homepage (18px Polster +
   38px CTA + 1px Border = 75px). --nav-h steuert den Hero-Ueberlapp unten. */
:root { --nav-h: 62px; }
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.55);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.nav--scrolled {
  background: rgba(255,255,255,0.74);
  border-bottom: 1px solid var(--line);
}
.nav__inner {
  max-width: 1240px; margin: 0 auto;
  padding: 11px 22px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.nav__brand {
  display: inline-flex; align-items: baseline; gap: 8px;
  text-decoration: none; color: var(--ink-1000);
  font-family: var(--font-logo);
  font-size: 23px;
  font-weight: 300;
  letter-spacing: 0;
}
/* Logo-Wortmarke einheitlich: ".AI" (Punkt + AI) immer blau, nicht kursiv. */
.nav__brand .brand__ai { color: var(--sp-blue); font-style: normal; }
.nav__brand small { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--ink-500); text-transform: uppercase; }

/* Layout wie .bg-nav der Homepage: Menue+Suche+Sprache als mittig-rechte
   Gruppe (margin-left:auto), CTA ganz rechts (zweites auto). nav__right wird
   per display:contents aufgeloest, damit Suche/Sprache/CTA echte Flex-Items
   des nav__inner werden. */
.nav__links {
  display: flex; gap: 26px; margin-left: auto;
}
.nav__links a {
  font-family: var(--font-sans);
  font-size: 14.5px;
  color: var(--ink-700);
  text-decoration: none;
  padding: 8px 2px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav__links a:hover { color: var(--ink-1000); }
.nav__links a.active { color: var(--ink-1000); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; }

.nav__right {
  display: contents;
}
.nav .btn-cta { margin-left: auto; }

/* Burger + Mobile-Panel (nur in schmalen Breakpoints sichtbar, s. Media Query) */
.nav__burger { display: none; flex-direction: column; justify-content: center; gap: 4px; width: 42px; height: 38px; padding: 9px 8px; margin-left: auto; background: transparent; border: 0; cursor: pointer; }
.nav__burger span { display: block; width: 100%; height: 2px; background: var(--ink-1000); border-radius: 2px; transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast); }
.nav--open .nav__burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav--open .nav__burger span:nth-child(2) { opacity: 0; }
.nav--open .nav__burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.nav__mobile { display: none; }
.nav__team-peek {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  text-decoration: none;
  background: var(--surface);
  transition: border-color var(--dur-fast);
}
.nav__team-peek:hover { border-color: var(--ink-1000); }
.nav__team-peek .stack { display: flex; }
.nav__team-peek .stack img {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid #fff; object-fit: cover;
  background: var(--surface-mute);
}
.nav__team-peek .stack img + img { margin-left: -8px; }
.nav__team-peek span {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.04em;
  color: var(--ink-700);
}
.btn-cta {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 18px;
  background: var(--ink-1000); color: #fff;
  border-radius: var(--r-md);
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--ink-1000);
  transition: background var(--dur-fast);
}
.btn-cta:hover { background: var(--sp-blue-700); border-color: var(--sp-blue-700); }

/* nav v3: dropdown, lang, search, icons */
.nav__inner--wide { max-width: 1240px; }
.nav__drop { position: relative; }
.nav__drop-btn {
  font-family: var(--font-sans); font-size: 14px; color: var(--ink-700);
  background: none; border: 0; cursor: pointer;
  padding: 8px 14px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; gap: 6px;
}
.nav__drop-btn:hover, .nav__drop-btn.active { color: var(--ink-1000); }
.nav__chev { font-size: 9px; color: var(--ink-500); transition: transform var(--dur-fast); }
.nav__drop.is-open .nav__chev { transform: rotate(180deg); }
.nav__menu {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
  padding: 6px;
  display: none; flex-direction: column;
  z-index: 60;
}
.nav__drop.is-open .nav__menu { display: flex; }
/* Unsichtbare Bruecke ueber die 6px-Luecke zum Button: haelt den Hover-Bereich
   durchgehend, damit das Menue beim Runterfahren der Maus nicht zuklappt. */
.nav__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.nav__menu a {
  font-family: var(--font-sans); font-size: 14px; color: var(--ink-900);
  text-decoration: none; padding: 10px 12px; border-radius: var(--r-sm);
}
.nav__menu a:hover { background: var(--surface-mute); color: var(--sp-blue-700); }
.nav__icon {
  background: none; border: 0; cursor: pointer;
  font-size: 19px; color: var(--ink-700); line-height: 1;
  width: 36px; height: 36px; border-radius: var(--r-sm);
  display: grid; place-items: center;
}
.nav__icon:hover { background: var(--surface-mute); color: var(--ink-1000); }
.lang { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 12px; }
.lang__btn { background: none; border: 0; cursor: pointer; color: var(--ink-500); padding: 4px 4px; letter-spacing: 0.06em; }
.lang__btn.is-active { color: var(--sp-blue); font-weight: 500; }
.lang__btn:hover { color: var(--sp-blue-700); }
.lang__sep { color: var(--ink-300); }

/* search overlay */
.search-ov { position: fixed; inset: 0; z-index: 200; background: rgba(11,13,16,0.55); backdrop-filter: blur(4px); display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; }
.search-ov__panel { width: min(640px, 92vw); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-4); overflow: hidden; }
.search-ov__bar { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.search-ov__icon { font-size: 20px; color: var(--ink-500); }
.search-ov__input { flex: 1; border: 0; outline: 0; font-family: var(--font-sans); font-size: 17px; color: var(--ink-1000); background: none; }
.search-ov__close { background: none; border: 0; cursor: pointer; color: var(--ink-500); font-size: 15px; }
.search-ov__list { list-style: none; margin: 0; padding: 8px; max-height: 50vh; overflow: auto; }
.search-ov__list li a { display: block; padding: 12px 14px; border-radius: var(--r-sm); text-decoration: none; color: var(--ink-900); font-family: var(--font-sans); font-size: 15px; }
.search-ov__list li a:hover { background: var(--surface-mute); color: var(--sp-blue-700); }
.search-ov__empty { padding: 14px; color: var(--ink-500); font-family: var(--font-mono); font-size: 13px; }

/* cookie banner */
.cookie {
  position: fixed; left: 24px; bottom: 24px; z-index: 150;
  width: min(420px, calc(100vw - 48px));
  background: var(--ink-1000); color: #fff;
  border-radius: var(--r-md); box-shadow: var(--sh-4);
  padding: 22px 24px;
}
.cookie__txt { font-family: var(--font-sans); font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,0.82); margin: 0 0 16px; }
.cookie__actions { display: flex; gap: 10px; }
.cookie__btn { font-family: var(--font-sans); font-size: 13px; font-weight: 500; border-radius: var(--r-sm); padding: 9px 16px; cursor: pointer; border: 1px solid transparent; }
.cookie__btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.3); }
.cookie__btn--ghost:hover { border-color: #fff; }
.cookie__btn--solid { background: #fff; color: var(--ink-1000); }
.cookie__btn--solid:hover { background: var(--sp-blue-300); }

@media (max-width: 1100px) {
  /* Inline-Menue + rechte Gruppe ausblenden, Burger einblenden */
  .nav__links, .nav__right { display: none; }
  .nav__burger { display: flex; }
  /* Ausklapp-Panel unter der Leiste */
  .nav--open .nav__mobile {
    display: flex; flex-direction: column;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    box-shadow: var(--sh-3); padding: 8px 22px 18px;
    max-height: calc(100vh - var(--nav-h, 74px)); overflow-y: auto;
  }
  .nav__mobile a { padding: 14px 2px; font-size: 16px; color: var(--ink-900); border-bottom: 1px solid var(--line); }
  .nav__mobile a.active { color: var(--sp-blue-700); }
  .nav__mobile-lang { display: flex; gap: 16px; align-items: center; padding: 14px 2px; border-bottom: 1px solid var(--line); }
  .nav__mobile-lang .lang__btn { color: var(--ink-700); font-size: 15px; }
  .nav__mobile-lang .lang__btn.is-active { color: var(--sp-blue-700); }
  .nav__mobile .btn-cta { margin-top: 16px; height: auto; padding: 14px; justify-content: center; font-size: 15px; }
}

/* ---- Über uns: Team & Gruppenbild ---- */
.team-group-wrap { width: 100%; }
.team-group {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 6;
  filter: grayscale(1) contrast(1.02);
  transition: filter var(--dur-slow) var(--ease-out);
}
.team-group-wrap:hover .team-group { filter: grayscale(0); }
.team-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 24px;
}
.team-card { display: flex; flex-direction: column; gap: 4px; }
.team-card image-slot {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; margin-bottom: 12px;
  filter: grayscale(1) contrast(1.02);
  transition: filter var(--dur-slow) var(--ease-out);
}
.team-card:hover image-slot { filter: grayscale(0); }
/* Köpfe nicht abschneiden: Cover-Crop nach oben ausrichten (überschreibt die Inline-Geometrie der Komponente) */
.team-card image-slot::part(image) {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  left: 0 !important; top: 0 !important; transform: none !important;
  object-fit: cover !important; object-position: 50% 8% !important;
}
.team-group::part(image) {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  left: 0 !important; top: 0 !important; transform: none !important;
  object-fit: cover !important; object-position: 50% 30% !important;
}
.team-card__name { font-family: var(--font-display); font-size: 21px; font-weight: 400; letter-spacing: -0.015em; color: var(--ink-1000); line-height: 1.1; }
.team-card__role { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sp-blue); }
@media (max-width: 900px) { .team-grid { grid-template-columns: repeat(2, 1fr); } .team-group { aspect-ratio: 16 / 9; } }

/* ---- Ressourcen: Blog ---- */
.post-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.post { background: var(--surface); padding: 34px 32px; display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: inherit; transition: background var(--dur-base); min-height: 220px; }
.post[hidden] { display: none !important; }  /* Kategorie-Filter (Blog + Lexikon) */
.post:hover { background: var(--surface-tint); }
.post__meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-500); display: flex; align-items: center; gap: 8px; }
.post__cat { color: var(--sp-blue); }
.post__dot { color: var(--ink-300); }
.post__title { font-family: var(--font-display); font-size: 26px; font-weight: 400; letter-spacing: -0.018em; line-height: 1.12; color: var(--ink-1000); margin: 0; }
.post__excerpt { font-size: 14.5px; line-height: 1.6; color: var(--ink-700); margin: 0; flex: 1;
  /* Einheitliche Kartenhoehe: Teaser auf 4 Zeilen begrenzen (Redaktionsrichtwert ~150-160 Zeichen) */
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.post__more { font-family: var(--font-mono); font-size: 12px; color: var(--sp-blue); letter-spacing: 0.04em; }
/* Lexikon-Karte: reine Textkarte (kein Cover) — Basis-.post-Stile reichen, nur Hover-Akzent. */
.post--lex .post__title { font-size: clamp(19px, 2.1vw, 24px); }
.post--lex:hover .post__title { color: var(--sp-blue-700); }
.resource-note { margin-top: 28px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-500); }

/* Blog-Cover in der Karte: randbündig über das .post-Padding (34px 32px) hinaus */
/* Cover mit Titel-Overlay: dunkler Verlauf unten (Bildsprache der Heroes/Use-Case-Kacheln),
   weiße Serifen-Headline darauf. Full-Bleed gegen das .post-Padding (34px 32px). */
.post__media { position: relative; width: calc(100% + 64px); margin: -34px -32px 4px; overflow: hidden; }
.post__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,13,16,0) 32%, rgba(11,13,16,0.36) 58%, rgba(11,13,16,0.84) 100%); }
/* height:auto ist Pflicht: sonst gewinnt das height-Attribut des img und
   die Karte rendert quadratisch statt 16:9 (aspect-ratio braucht eine Auto-Achse). */
.post__cover { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--surface-tint); }
.post__title--overlay { position: absolute; left: 22px; right: 22px; bottom: 16px; z-index: 1; color: #fff; font-size: 23px; line-height: 1.16; margin: 0;
  /* Fester 3-Zeilen-Raum, oben ausgerichtet: alle Titel starten auf derselben
     Oberkante; kuerzere Titel lassen unten frei (ruhigeres Gesamtbild). */
  height: calc(3 * 1.16em);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post:focus-visible, .uc-pill:focus-visible, .qa__q:focus-visible { outline: 2px solid var(--sp-blue); outline-offset: 2px; }

/* Autor inline in der Meta-Zeile: Name + Funktion, gleiche Schriftgröße wie
   Datum/Lesezeit (Blog & Lexikon). nowrap hält die Angabe zusammen. */
.post__author { white-space: nowrap; }
/* Schmale Bildschirme: Meta darf umbrechen, Autor-Chip bleibt als Einheit zusammen. */
@media (max-width: 640px) { .post__meta { flex-wrap: wrap; row-gap: 6px; } }

/* Blog-Einzelbeitrag: Fließtext */
.article { max-width: 720px; margin: 0 auto; }
.article > * + * { margin-top: 1.1em; }
.article h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 3vw, 36px); letter-spacing: -0.02em; line-height: 1.15; color: var(--ink-1000); margin-top: 1.6em; }
.article h3 { font-family: var(--font-display); font-weight: 400; font-size: 22px; letter-spacing: -0.015em; color: var(--ink-1000); margin-top: 1.4em; }
.article p, .article li { font-size: 18px; line-height: 1.7; color: var(--ink-700); }
.article a { color: var(--sp-blue); text-decoration: underline; text-underline-offset: 2px; }
.article ul, .article ol { padding-left: 1.2em; }
.article li + li { margin-top: 0.4em; }
.article blockquote { border-left: 2px solid var(--sp-blue); padding-left: 18px; margin-left: 0; font-style: italic; color: var(--ink-1000); }
.article img { width: 100%; border-radius: var(--r-md); }
.article strong { font-weight: 600; color: var(--ink-900); }

/* ---- Ressourcen: Q&A / Lexikon ---- */
.qa-list { border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); }
.qa__q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 26px 4px; display: flex; justify-content: space-between; align-items: center; gap: 24px; font-family: var(--font-display); font-size: 23px; font-weight: 400; letter-spacing: -0.015em; color: var(--ink-1000); line-height: 1.2; }
.qa__q:hover { color: var(--sp-blue-700); }
.qa__icon { font-family: var(--font-sans); font-size: 24px; color: var(--sp-blue); flex-shrink: 0; width: 28px; text-align: center; }
.qa__a { padding: 0 60px 28px 4px; font-size: 16px; line-height: 1.65; color: var(--ink-700); max-width: 70ch; }

@media (max-width: 980px) {
  .post-list { grid-template-columns: 1fr; }
  .qa__q { font-size: 19px; }
  .qa__a { padding-right: 4px; }
}

/* ============ CONTAINER ============ */
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.wrap--narrow { max-width: 1080px; }

/* ============ HERO ============ */
.hero {
  position: relative;
  padding: 72px 0 96px;
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 64px;
  align-items: end;
}
.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin: 0 0 32px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hero__eyebrow::before {
  content: "";
  width: 24px; height: 1px;
  background: var(--ink-1000);
}
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(54px, 7.6vw, 112px);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.035em;
  color: var(--ink-1000);
  margin: 0 0 32px;
  text-wrap: balance;
}
.hero__title em {
  font-style: italic;
  color: var(--sp-blue);
  font-weight: 400;
}
.hero__lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-700);
  margin: 0 0 36px;
  max-width: 56ch;
  font-family: var(--font-sans);
}
.hero__cta {
  display: flex; gap: 12px; align-items: center;
  flex-wrap: wrap;
}
.hero__cta .secondary {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink-900);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 4px;
  border-bottom: 1px solid var(--ink-1000);
}
.hero__cta .secondary:hover { color: var(--sp-blue-700); border-color: var(--sp-blue-700); }
.btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 24px;
  background: var(--ink-1000); color: #fff;
  border-radius: var(--r-md);
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  text-decoration: none; border: 0;
  transition: transform var(--dur-fast), background var(--dur-fast);
  cursor: pointer;
}
.btn-primary:hover { background: var(--sp-blue-700); transform: translateY(-1px); }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  height: 48px; padding: 0 22px;
  background: transparent; color: var(--ink-900);
  border-radius: var(--r-md);
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--line-strong);
  cursor: pointer;
}
.btn-ghost:hover { border-color: var(--ink-1000); }

/* Hero side card */
.hero__side {
  border-left: 1px solid var(--line);
  padding: 8px 0 8px 28px;
  display: flex; flex-direction: column; gap: 24px;
}
.hero__side-head {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-500);
}
.hero__side-quote {
  font-family: var(--font-display);
  font-size: 21px; font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink-1000);
  margin: 0;
  font-style: italic;
}
.hero__side-quote em { color: var(--sp-blue); }
.hero__side-cite {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.04em;
  color: var(--ink-500);
  display: flex; align-items: center; gap: 10px;
  margin-top: -8px;
}
.hero__side-cite .av {
  width: 28px; height: 28px; border-radius: 50%; overflow: hidden; background: var(--surface-mute);
}
.hero__side-cite .av img { width: 100%; height: 100%; object-fit: cover; }
.hero__side-meta {
  font-family: var(--font-mono);
  font-size: 11px; color: var(--ink-700);
  border-top: 1px dashed var(--line);
  padding-top: 16px;
  display: grid; grid-template-columns: 1fr auto;
  gap: 6px 12px;
}
.hero__side-meta .v { color: var(--ink-1000); font-family: var(--font-display); font-size: 18px; font-style: italic; letter-spacing: -0.01em; }

/* Hero rule with timestamp */
.timestamp {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.08em; color: var(--ink-500); text-transform: uppercase;
  padding: 18px 0;
}
/* Keine dekorativen Linien im Hero: .grow bleibt nur unsichtbarer Flex-Abstandhalter. */
.timestamp .grow { flex: 1; }

/* ============ SECTION SHELL ============ */
.section {
  padding: 96px 0;
  border-top: 1px solid var(--line);
}
.section--mute { background: var(--surface-tint); }
.section--ink { background: var(--ink-1000); color: #fff; border-top-color: var(--ink-1000); }
.section--ink .eyebrow-label { color: rgba(255,255,255,0.5); }
.section--ink .h2 { color: #fff; }
.section--ink .h2 em { color: var(--sp-blue-300); }
.section--ink .lead { color: rgba(255,255,255,0.7); }

.section__head {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 64px;
}
.eyebrow-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin: 0 0 16px;
  display: inline-flex; gap: 12px; align-items: center;
}
.eyebrow-label .num {
  color: var(--sp-blue);
  font-weight: 500;
}
.h2 {
  font-family: var(--font-display);
  font-size: clamp(38px, 4.4vw, 60px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink-1000);
  margin: 0;
  text-wrap: balance;
}
.h2 em { font-style: italic; color: var(--sp-blue); font-weight: 400; }
.lead {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-700);
  margin: 0;
  max-width: 56ch;
}

/* ============ "WHAT IS AN AI EMPLOYEE" SECTION ============ */
.what {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.what__cell {
  background: var(--surface);
  padding: 36px 32px;
  display: flex; flex-direction: column; gap: 14px;
}
.what__cell--ink { background: var(--ink-1000); color: #fff; }
.what__cell--ink .what__title { color: #fff; }
.what__cell--ink .what__body { color: rgba(255,255,255,0.7); }
.what__num {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.14em;
  color: var(--sp-blue);
  text-transform: uppercase;
}
.what__title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.018em;
  line-height: 1.1;
  color: var(--ink-1000);
  margin: 0;
}
.what__body {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-700);
  margin: 0;
  flex: 1;
}
.what__body strong { color: var(--ink-1000); font-weight: 600; }
.what__cell--ink .what__body strong { color: #fff; }

/* Compare grid */
.compare {
  margin-top: 48px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.compare__row {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  border-top: 1px solid var(--line);
}
.compare__row:first-child { border-top: 0; }
.compare__cell {
  padding: 18px 22px;
  font-size: 13.5px;
  color: var(--ink-700);
  line-height: 1.5;
  border-left: 1px solid var(--line);
}
.compare__cell:first-child {
  border-left: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
  background: var(--surface-tint);
  display: flex; align-items: center;
}
.compare__head .compare__cell {
  background: var(--surface-tint);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-500);
  padding: 14px 22px;
}
.compare__cell strong { color: var(--ink-1000); font-weight: 500; font-family: var(--font-sans); font-size: 13.5px; letter-spacing: 0; text-transform: none; }
.compare__cell.good { background: rgba(74,144,226,0.04); }

/* ============ PROCESS (interactive) ============ */
.process {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 48px;
  align-items: stretch;
}
.process__steps {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--line);
}
.process__step {
  border-bottom: 1px solid var(--line);
  padding: 24px 8px 24px 0;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  background: transparent;
  border-left: 0; border-right: 0; border-top: 0;
  width: 100%;
  text-align: left;
  font: inherit; color: inherit;
  transition: background var(--dur-fast);
}
.process__step:hover { background: var(--surface-tint); }
.process__step.is-active {
  background: transparent;
}
.process__step.is-active .process__step-num {
  background: var(--ink-1000);
  color: #fff;
}
.process__step.is-active .process__step-title {
  color: var(--ink-1000);
}
.process__step-num {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 500;
  color: var(--ink-700);
  transition: all var(--dur-base) var(--ease-out);
}
.process__step-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.012em;
  color: var(--ink-700);
  line-height: 1.2;
  transition: color var(--dur-base) var(--ease-out);
}
.process__step-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-500);
  letter-spacing: 0.04em;
}
.process__step.is-active .process__step-meta { color: var(--sp-blue); }

/* Detail card */
.process__detail {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 40px 44px;
  display: flex; flex-direction: column;
  gap: 20px;
  position: relative;
  overflow: hidden;
  min-height: 460px;
}
.process__detail::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--ink-1000);
}
.process__detail-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 32px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 20px;
}
.process__detail-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sp-blue);
}
.process__detail-stage {
  font-family: var(--font-mono);
  font-size: 11px; color: var(--ink-500);
  letter-spacing: 0.04em;
}
.process__detail-title {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.02;
  color: var(--ink-1000);
  margin: 0;
}
.process__detail-title em { font-style: italic; color: var(--sp-blue); }
.process__detail-body {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-700);
  margin: 0;
  max-width: 64ch;
}
.process__detail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: auto;
  padding-top: 28px;
  border-top: 1px dashed var(--line);
}
.process__detail-spec dt {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin: 0 0 8px;
}
.process__detail-spec dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px; font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink-1000);
  line-height: 1.1;
}
.process__detail-spec dd small {
  font-family: var(--font-sans);
  font-size: 12px; color: var(--ink-700);
  display: block;
  margin-top: 4px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.process__detail-bullets {
  margin: 0; padding: 0;
  list-style: none;
  display: flex; flex-direction: column; gap: 10px;
}
.process__detail-bullets li {
  font-size: 14px;
  color: var(--ink-700);
  padding-left: 22px;
  position: relative;
  line-height: 1.55;
}
.process__detail-bullets li::before {
  content: "→";
  position: absolute; left: 0; top: 0;
  color: var(--sp-blue);
  font-family: var(--font-mono);
}

.process__progress {
  margin-top: 32px;
  display: flex; align-items: center; gap: 16px;
  grid-column: 1 / -1;
}
.process__progress-track {
  flex: 1; height: 2px; background: var(--line);
  position: relative; overflow: hidden;
}
.process__progress-bar {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--ink-1000);
  width: 20%;
  transition: width 480ms var(--ease-out);
}
.process__progress-meta {
  font-family: var(--font-mono);
  font-size: 11px; color: var(--ink-500);
  letter-spacing: 0.06em;
}

/* ============ STATS STRIP ============ */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat-cell {
  padding: 36px 28px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 8px;
}
.stat-cell:last-child { border-right: 0; }
.stat-cell__v {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--ink-1000);
}
.stat-cell__v em { color: var(--sp-blue); font-style: italic; }
.stat-cell__l {
  font-size: 13px;
  color: var(--ink-700);
  line-height: 1.5;
}

/* ============ USE CASES TEASER (on landing) ============ */
.uc-teaser {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.uc-teaser__cell {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--r-lg);
  padding: 28px;
  text-decoration: none;
  display: flex; flex-direction: column; gap: 12px;
  color: inherit;
  min-height: 200px;
  transition: border-color var(--dur-base), box-shadow var(--dur-base), transform var(--dur-base);
  position: relative;
}
.uc-teaser__cell > *:not(.uc-teaser__bg) { position: relative; z-index: 2; }
.uc-teaser__cell > .uc-teaser__arrow { position: absolute; top: 28px; right: 24px; z-index: 3; }
.uc-teaser__bg { display: none; }
.uc-teaser__cell::after { content: none; }
.uc-teaser__cell:hover { border-color: rgba(255,255,255,0.32); box-shadow: 0 26px 60px -26px rgba(0,0,0,0.6); transform: translateY(-2px); }
.uc-teaser__num {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.12em;
  color: rgba(255,255,255,0.7);
  text-shadow: 0 1px 10px rgba(0,0,0,0.55);
}
.uc-teaser__h {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: #fff;
  margin: 0;
  text-shadow: 0 1px 16px rgba(0,0,0,0.55);
}
.uc-teaser__h em { color: var(--sp-blue-300); font-style: italic; }
.uc-teaser__b {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255,255,255,0.85);
  margin: 0;
  flex: 1;
  text-shadow: 0 1px 10px rgba(0,0,0,0.55);
}
.uc-teaser__arrow {
  position: absolute;
  top: 28px; right: 24px;
  color: rgba(255,255,255,0.3);
  font-family: var(--font-mono);
  transition: color var(--dur-base), transform var(--dur-base);
}
.uc-teaser__cell:hover .uc-teaser__arrow {
  color: var(--sp-blue-300);
  transform: translateX(4px);
}

/* ============ FOOTER ============ */
.footer {
  padding: 80px 0 40px;
  background: var(--surface-tint);
  border-top: 1px solid var(--line);
}
.footer__top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 64px;
}
.footer__brand {
  font-family: var(--font-logo);
  font-size: 32px; font-weight: 300;
  letter-spacing: 0;
  color: var(--ink-1000);
  margin: 0 0 16px;
}
.footer__brand em { color: var(--sp-blue); font-style: normal; }
.footer__claim {
  font-family: var(--font-sans);
  font-size: 15px; line-height: 1.5; color: var(--ink-900);
  margin: 0 0 4px; max-width: 36ch;
}
.footer__tag {
  font-family: var(--font-sans);
  font-size: 14px; color: var(--ink-500);
  margin: 0;
  max-width: 36ch;
}
.footer__partners { margin-top: 40px; }
.footer__col h5 {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin: 0 0 18px;
}
.footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer__col a {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink-900);
  text-decoration: none;
}
.footer__col a:hover { color: var(--sp-blue-700); }
.footer__loc { font-family: var(--font-sans); font-size: 14px; color: var(--ink-900); }

/* Partner & Netzwerk im Footer: gleiche Schrift/Farbe wie der übrige Footer-Text */
.footer__partners-label {
  display: block; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); margin-bottom: 12px;
}
.footer__partners-row { font-family: var(--font-sans); font-size: 14px; color: var(--ink-900); }

.footer__bottom {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 24px;
  font-family: var(--font-mono);
  font-size: 11px; color: var(--ink-500);
  letter-spacing: 0.04em;
}
.footer__bottom a { color: inherit; text-decoration: none; }
.footer__bottom a:hover { color: var(--ink-900); }

/* ============ USE CASES PAGE ============ */
/* Dunkler Seitenhintergrund: verhindert weißes Aufblitzen zwischen den
   Use-Case-Sektionen, während sie per Reveal einblenden. */
body.uc-page { background: #0b0d10; }
/* Vollbild-Hero mit Bild + dunklem Filter, wie die Startseite */
.uc-hero {
  position: relative;
  min-height: clamp(744px, 100vh, 1010px);
  display: flex; align-items: center;
  color: #fff; overflow: hidden;
  margin-top: calc(-1 * var(--nav-h, 65px));
  background: #0b0d10;
}
/* Vollbild-Landschaftsbild, Text links über dunklem Verlauf (kein Split). */
.uc-hero__photo {
  position: absolute; inset: 0; z-index: 0;
  background-image: url("assets/use-cases-hero.png");
  background-size: cover; background-position: center;
}
.uc-hero__veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(11,13,16,0.88) 0%, rgba(11,13,16,0.60) 48%, rgba(11,13,16,0.22) 100%); }
.uc-hero .photo-tag {
  position: absolute; left: 18px; bottom: 14px; z-index: 3;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,0.35); pointer-events: none;
}
.uc-hero__in { position: relative; z-index: 2; width: 100%; }
.uc-hero__eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(255,255,255,0.65);
  display: inline-flex; align-items: center; gap: 10px; margin: 0;
}
.uc-hero__eyebrow::before { content: "·"; font-size: 20px; line-height: 0; color: var(--sp-blue-300); }
.uc-hero__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(40px, 6.4vw, 80px); line-height: 1.03; letter-spacing: -0.02em;
  margin: 16px 0 0; color: #fff;
}
.uc-hero__title em { font-style: italic; color: var(--sp-blue-300); }
.uc-hero__lede { font-size: clamp(16px, 2vw, 20px); color: rgba(255,255,255,0.85); max-width: 52ch; margin: 22px 0 0; line-height: 1.55; }
.uc-hero__lede strong { color: #fff; font-weight: 600; }

/* Nav liegt transparent über dem Use-Cases-Hero, bis gescrollt wird */
body.darkhero .nav:not(.nav--scrolled) { background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.darkhero .nav:not(.nav--scrolled) .nav__brand { color: #fff; }
body.darkhero .nav:not(.nav--scrolled) .nav__links a { color: rgba(255,255,255,0.82); }
body.darkhero .nav:not(.nav--scrolled) .nav__links a:hover,
body.darkhero .nav:not(.nav--scrolled) .nav__links a.active { color: #fff; background: transparent; }
body.darkhero .nav:not(.nav--scrolled) .nav__drop-btn { color: rgba(255,255,255,0.82); }
body.darkhero .nav:not(.nav--scrolled) .nav__drop-btn:hover { color: #fff; }
body.darkhero .nav:not(.nav--scrolled) .nav__icon { color: rgba(255,255,255,0.82); }
body.darkhero .nav:not(.nav--scrolled) .nav__burger span { background: #fff; }
/* Heller Hero (Ressourcen-Masthead): Nav transparent, damit der Blauverlauf
   dahinter durchscheint. Schrift bleibt dunkel (Default). Beim Scrollen wird die
   Nav wieder fest (.nav--scrolled). */
body.lighthero .nav:not(.nav--scrolled) { background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.darkhero .nav:not(.nav--scrolled) .lang__btn { color: rgba(255,255,255,0.82); }
body.darkhero .nav:not(.nav--scrolled) .lang__btn.is-active { color: var(--sp-blue-300); }
body.darkhero .nav:not(.nav--scrolled) .lang__sep { color: rgba(255,255,255,0.4); }
body.darkhero .nav:not(.nav--scrolled) .btn-cta { background: #fff; color: var(--ink-1000); border-color: #fff; }
/* Ressourcen-Dropdown: Glas-Optik über dunklem Hero; sobald gescrollt wieder das helle Panel. */
body.darkhero .nav:not(.nav--scrolled) .nav__menu {
  background: rgba(11,13,16,0.78);
  border-color: rgba(255,255,255,0.16);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
}
body.darkhero .nav:not(.nav--scrolled) .nav__menu a { color: rgba(255,255,255,0.86); }
body.darkhero .nav:not(.nav--scrolled) .nav__menu a:hover { background: rgba(255,255,255,0.10); color: #fff; }

.uc-hero__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: end;
}
.uc-filter {
  position: static; z-index: 20;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.uc-filter__inner {
  max-width: 1280px; margin: 0 auto;
  padding: 14px 32px;
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center;
}
.uc-filter__inner--areas { padding-top: 0; }
.uc-filter__label {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-right: 8px;
}
/* Such-Feld bei den Kategorien (Blog-/Lexikon-Uebersicht) */
.uc-filter__search { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); transition: border-color var(--dur-fast, .15s); }
.uc-filter__search:focus-within { border-color: var(--sp-blue); }
.uc-filter__search-ic { font-size: 14px; line-height: 1; color: var(--ink-500); }
.uc-filter__search-in { border: 0; outline: none; background: none; font-family: var(--font-sans); font-size: 14px; color: var(--ink-900); width: clamp(120px, 16vw, 200px); }
.uc-filter__search-in::placeholder { color: var(--ink-500); }
/* Treffer-Typ-Chip in der Menue-Suche + "Kein Treffer" auf der Uebersicht */
.search-ov__cat { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); }
.post-empty { margin: 24px 2px 0; font-family: var(--font-mono); font-size: 13px; color: var(--ink-500); }
.uc-pill {
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-700);
  background: transparent;
  border: 1px solid var(--line-strong);
  cursor: pointer;
  transition: all var(--dur-fast);
}
.uc-pill:hover { color: var(--ink-1000); border-color: var(--ink-700); }
.uc-pill.is-active {
  background: var(--ink-1000); color: #fff; border-color: var(--ink-1000);
}
.uc-pill__count {
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-500);
}
.uc-pill.is-active .uc-pill__count { color: rgba(255,255,255,0.6); }

/* Use case feature blocks */
.uc-feature {
  position: relative;
  min-height: 100vh;
  padding: 80px 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-top: 1px solid var(--line);
}
/* Gefilterte Sektionen wirklich ausblenden: .uc-feature hat display:flex, das das
   hidden-Attribut sonst ueberschreibt (gleiche Spezifitaet). */
.uc-feature[hidden] { display: none !important; }
.uc-feature__bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}
.uc-feature__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,13,16,0.78) 0%, rgba(11,13,16,0.62) 50%, rgba(11,13,16,0.85) 100%);
}
.uc-feature__inner {
  position: relative; z-index: 2;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 56px;
  align-items: center;
}
.uc-feature__content { color: #fff; }
/* Rechte Spalte: AI-Karte oben, darunter Einsparung + KPIs */
.uc-feature__side { display: flex; flex-direction: column; gap: 18px; }
.uc-feature__industry {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sp-blue-300);
  margin: 0 0 24px;
  display: inline-flex; align-items: center; gap: 12px;
}
.uc-feature__industry::before {
  content: ""; width: 28px; height: 1px; background: var(--sp-blue-300);
}
.uc-feature__badge {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: #fff; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.28);
  padding: 3px 9px; border-radius: var(--r-pill);
}
.uc-feature__customer {
  font-family: var(--font-sans); font-size: 14px; line-height: 1.5;
  color: rgba(255,255,255,0.7); margin: 0 0 20px; max-width: 52ch;
}
.uc-feature__quote {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(19px, 2vw, 24px); line-height: 1.4; letter-spacing: -0.01em;
  color: #fff; margin: 0 0 24px; max-width: 48ch;
  padding-left: 20px; border-left: 2px solid var(--sp-blue-300);
}
.uc-feature__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.0;
  margin: 0 0 24px;
  color: #fff;
  text-wrap: balance;
}
.uc-feature__title em { color: var(--sp-blue-300); font-style: italic; }
.uc-feature__savings {
  display: flex; flex-direction: column; gap: 2px;
  margin: 0; padding: 16px 20px;
  background: rgba(74,144,226,0.14);
  border: 1px solid rgba(156,193,237,0.34);
  border-radius: var(--r-md);
}
.uc-feature__savings-eyebrow {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sp-blue-300); margin-bottom: 4px;
}
.uc-feature__savings-v {
  font-family: var(--font-display); font-size: clamp(30px, 2.6vw, 40px);
  font-style: italic; letter-spacing: -0.02em; line-height: 1.02; color: #fff; white-space: nowrap;
}
.uc-feature__savings-l { font-family: var(--font-sans); font-size: 13px; line-height: 1.4; color: rgba(255,255,255,0.82); }
.uc-feature__savings--pending {
  background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.16);
}
.uc-feature__savings--pending .uc-feature__savings-eyebrow { color: rgba(255,255,255,0.5); }
.uc-feature__savings--pending .uc-feature__savings-l { color: rgba(255,255,255,0.66); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; }
.uc-feature__lede {
  font-size: 18px;
  line-height: 1.55;
  color: rgba(255,255,255,0.82);
  margin: 0 0 36px;
  max-width: 56ch;
}
.uc-feature__kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255,255,255,0.18);
  border-bottom: 1px solid rgba(255,255,255,0.18);
  margin: 0;
}
.uc-feature__kpi {
  padding: 13px 14px 13px 0;
  border-right: 1px solid rgba(255,255,255,0.18);
}
.uc-feature__kpi:last-child { border-right: 0; padding-left: 14px; padding-right: 0; }
.uc-feature__kpi:nth-child(2) { padding-left: 14px; }
.uc-feature__kpi-v {
  font-family: var(--font-display);
  font-size: 30px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #fff;
  font-weight: 400;
}
.uc-feature__kpi-v em { color: var(--sp-blue-300); font-style: italic; }
.uc-feature__kpi-l {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-top: 6px;
}

.uc-feature__card {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--r-md);
  padding: 32px;
  color: #fff;
}
.uc-feature__card-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin: 0 0 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.14);
  display: flex; justify-content: space-between;
}
.uc-feature__card-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 18px;
}
.uc-feature__card-row {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: start;
  padding-bottom: 18px;
  border-bottom: 1px dashed rgba(255,255,255,0.12);
}
.uc-feature__card-row:last-child { border-bottom: 0; padding-bottom: 0; }
.uc-feature__card-row .av {
  width: 36px; height: 36px;
  border-radius: 50%; overflow: hidden;
  background: rgba(255,255,255,0.1);
}
.uc-feature__card-row .av img { width: 100%; height: 100%; object-fit: cover; }
.uc-feature__card-row .av .av-mono { width: 100%; height: 100%; display: grid; place-items: center; font-family: var(--font-display); font-size: 16px; color: rgba(255,255,255,0.85); }
.uc-feature__card-row .name {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 400;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0;
}
.uc-feature__card-row .role {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin: 2px 0 6px;
}
.uc-feature__card-row .task {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255,255,255,0.78);
  margin: 0;
}
.uc-feature__cta-row {
  display: flex; gap: 14px; flex-wrap: wrap;
}
.uc-feature__cta-row .btn-light {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 20px;
  background: #fff; color: var(--ink-1000);
  border-radius: var(--r-md);
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  text-decoration: none;
  transition: background var(--dur-fast);
}
.uc-feature__cta-row .btn-light:hover { background: var(--sp-blue-300); }
.uc-feature__cta-row .btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 20px;
  background: transparent; color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: var(--r-md);
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  text-decoration: none;
  transition: border-color var(--dur-fast);
}
.uc-feature__cta-row .btn-outline:hover { border-color: #fff; }

/* Photo placeholder marker (on landing imagery) */
.photo-mark {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: flex-end;
  padding: 24px;
  pointer-events: none;
}
.photo-mark__tag {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  background: rgba(11,13,16,0.55);
  padding: 4px 10px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 3px;
  margin-bottom: 8px;
}
.photo-mark__caption {
  font-family: var(--font-sans);
  font-size: 13px;
  color: rgba(255,255,255,0.92);
  background: rgba(11,13,16,0.5);
  padding: 6px 12px;
  border-radius: 3px;
  max-width: 80%;
  line-height: 1.4;
}

/* No-bg variant for use cases */
/* Mobilität: schwarzer Shuttle-Bus, näher herangezogen */
#mobilitaet .uc-feature__bg { background-size: auto 135%; background-position: 35% 72%; }
#mobilitaet .uc-feature__bg::after { background: linear-gradient(100deg, rgba(11,13,16,0.88) 0%, rgba(11,13,16,0.55) 55%, rgba(11,13,16,0.3) 100%); }
.uc-feature--plain .uc-feature__bg { display: none; }
.uc-feature--plain { background: var(--surface); border-top: 1px solid var(--line); }
.uc-feature--plain .uc-feature__bg::after { display: none; }
.uc-feature--plain .uc-feature__content { color: var(--ink-1000); }
.uc-feature--plain .uc-feature__industry { color: var(--sp-blue); }
.uc-feature--plain .uc-feature__industry::before { background: var(--sp-blue); }
.uc-feature--plain .uc-feature__title { color: var(--ink-1000); }
.uc-feature--plain .uc-feature__title em { color: var(--sp-blue); }
.uc-feature--plain .uc-feature__badge { color: var(--ink-700); background: var(--surface-mute); border-color: var(--line-strong); }
.uc-feature--plain .uc-feature__customer { color: var(--ink-500); }
.uc-feature--plain .uc-feature__quote { color: var(--ink-1000); border-left-color: var(--sp-blue); }
.uc-feature--plain .uc-feature__savings { background: rgba(74,144,226,0.07); border-color: #C9DEF6; }
.uc-feature--plain .uc-feature__savings-v { color: var(--sp-blue-700); }
.uc-feature--plain .uc-feature__savings-l { color: var(--ink-700); }
.uc-feature--plain .uc-feature__savings--pending { background: var(--surface-tint); border-color: var(--line); }
.uc-feature--plain .uc-feature__savings--pending .uc-feature__savings-l { color: var(--ink-500); }
.uc-feature--plain .uc-feature__card-row .av .av-mono { color: var(--ink-700); }
.uc-feature--plain .uc-feature__lede { color: var(--ink-700); }
.uc-feature--plain .uc-feature__kpis { border-color: var(--line); }
.uc-feature--plain .uc-feature__kpi { border-color: var(--line); }
.uc-feature--plain .uc-feature__kpi-v { color: var(--ink-1000); }
.uc-feature--plain .uc-feature__kpi-v em { color: var(--sp-blue); }
.uc-feature--plain .uc-feature__kpi-l { color: var(--ink-500); }
.uc-feature--plain .uc-feature__card { background: var(--surface-tint); border-color: var(--line); color: var(--ink-900); backdrop-filter: none; -webkit-backdrop-filter: none; }
.uc-feature--plain .uc-feature__card-eyebrow { color: var(--ink-500); border-color: var(--line); }
.uc-feature--plain .uc-feature__card-row { border-color: var(--line); }
.uc-feature--plain .uc-feature__card-row .name { color: var(--ink-1000); }
.uc-feature--plain .uc-feature__card-row .role { color: var(--ink-500); }
.uc-feature--plain .uc-feature__card-row .task { color: var(--ink-700); }
.uc-feature--plain .uc-feature__cta-row .btn-light { background: var(--ink-1000); color: #fff; }
.uc-feature--plain .uc-feature__cta-row .btn-outline { color: var(--ink-1000); border-color: var(--line-strong); }
.uc-feature--plain .uc-feature__savings-eyebrow { color: var(--sp-blue-700); }
.uc-feature--plain .uc-feature__savings--pending .uc-feature__savings-eyebrow { color: var(--ink-500); }

/* Branchenleiste: blendet beim Scrollen aus (wandert in die linke Glas-Rail) */
.uc-filter { transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.uc-filter.is-hidden { opacity: 0; transform: translateY(-10px); pointer-events: none; }

/* Glas-Rail links: Scroll-Spy durch die Use Cases */
.uc-rail {
  position: fixed; left: 20px; top: 50%;
  transform: translateY(-50%) translateX(-16px);
  z-index: 30; width: 178px; padding: 10px;
  background: rgba(18,22,30,0.55);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.5);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.uc-rail.is-visible { opacity: 1; pointer-events: auto; transform: translateY(-50%) translateX(0); }
.uc-rail__label {
  display: block; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5);
  padding: 2px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,0.14);
}
.uc-rail__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.uc-rail__item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 6px 9px; border: 0; background: transparent; cursor: pointer;
  border-radius: 8px; text-align: left;
  font-family: var(--font-sans); font-size: 12.5px; color: rgba(255,255,255,0.62);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.uc-rail__item:hover { background: rgba(255,255,255,0.08); color: #fff; }
.uc-rail__num { font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.4); width: 16px; flex: none; }
.uc-rail__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uc-rail__item.is-active { background: rgba(255,255,255,0.16); color: #fff; }
.uc-rail__item.is-active .uc-rail__num { color: var(--sp-blue-300); }
/* Rail nur, wenn die Seitengutter breit genug ist; sonst Leiste oben behalten */
@media (max-width: 1280px) {
  .uc-rail { display: none; }
  .uc-filter.is-hidden { opacity: 1; transform: none; pointer-events: auto; }
}

/* --- Use-Cases-Rail: Auto-Ausblenden bei knapper Breite (1281-1599 px) --- */
/* JS schiebt die Rail nach kurzer Ruhe nach links weg (is-tucked) und holt sie    */
/* beim Scrollen zurueck. Ein schmaler Griff (peek) bleibt am Rand zum Wiederholen. */
.uc-rail.is-visible.is-tucked {
  transform: translateY(-50%) translateX(calc(-100% - 24px));
  pointer-events: none;
}
.uc-rail__peek {
  position: fixed; left: 0; top: 50%;
  transform: translateY(-50%) translateX(-100%);
  z-index: 29;
  display: flex; align-items: center; justify-content: center;
  padding: 16px 7px; cursor: pointer;
  background: rgba(18,22,30,0.55);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.14); border-left: 0;
  border-radius: 0 12px 12px 0;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.5);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.uc-rail__peek.is-shown { transform: translateY(-50%) translateX(0); opacity: 1; pointer-events: auto; }
.uc-rail__peek span {
  writing-mode: vertical-rl;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,0.7);
}
.uc-rail__peek:hover span { color: #fff; }

/* --- Zweistufige Rail: Gruppen-Eintrag + Flyout mit Unterpunkten (zweite Spalte) --- */
.uc-rail__caret { margin-left: auto; color: rgba(255,255,255,0.4); font-size: 14px; line-height: 1; }
.uc-rail__item.is-active .uc-rail__caret { color: var(--sp-blue-300); }
.uc-rail__sublist {
  position: absolute; left: calc(100% + 10px); top: 14px;
  list-style: none; margin: 0; padding: 14px; min-width: 190px;
  background: rgba(18,22,30,0.55);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.5);
}
.uc-rail__sublist[hidden] { display: none; }
/* Flyout zusammen mit der weggeschobenen Rail ausblenden (sonst bleibt es ueber dem Text). */
.uc-rail.is-tucked .uc-rail__sublist { display: none; }
.uc-rail__subitem {
  display: block; width: 100%; text-align: left; border: 0; background: transparent;
  padding: 5px 9px; border-radius: 8px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--font-sans); font-size: 12px; color: rgba(255,255,255,0.55);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.uc-rail__subitem:hover { background: rgba(255,255,255,0.08); color: #fff; }
.uc-rail__subitem.is-active { background: rgba(255,255,255,0.16); color: #fff; }

/* Inline verschachtelte Sub-Use-Cases unter der aktiven Branche (kein Flyout) */
.uc-rail__subnest {
  list-style: none; margin: 1px 0 2px; padding: 0 0 0 24px;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.4s var(--ease-out), opacity 0.3s var(--ease-out);
}
.uc-rail__subnest.is-open { max-height: 260px; opacity: 1; }
.uc-rail__item--group .uc-rail__caret { transition: transform var(--dur-base) var(--ease-out); }
.uc-rail__item--group.is-open .uc-rail__caret { transform: rotate(90deg); }

/* Pull quote / signature line */
.signature {
  padding: 96px 0;
  background: var(--surface-tint);
  border-top: 1px solid var(--line);
}
.signature__inner {
  max-width: 980px; margin: 0 auto; padding: 0 32px;
  text-align: center;
}
.signature blockquote {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.6vw, 48px);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--ink-1000);
  margin: 0 0 32px;
  font-style: italic;
  text-wrap: balance;
}
.signature blockquote em { color: var(--sp-blue); }
.signature cite {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 12px; letter-spacing: 0.08em;
  color: var(--ink-500);
  text-transform: uppercase;
}
.signature cite img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }

/* ============ ARTICLE / EDITORIAL TOUCHES ============ */
.section-title-row {
  display: flex; align-items: baseline; justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding-bottom: 24px;
  margin-bottom: 48px;
  gap: 32px;
}
.section-title-row .meta {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.08em;
  color: var(--ink-500);
}

/* Tweaks panel placement override */
[data-cc-id], .tweaks-panel { font-family: var(--font-sans) !important; }

/* ============================================================
   V2 — NEUE SEKTIONEN
   ============================================================ */

/* ---- Customer logo banner (marquee) ---- */
.logobanner {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
}
.logobanner--dark { background: var(--ink-1000); border-bottom-color: rgba(255,255,255,0.1); }
.logobanner__inner {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 32px;
  padding: 0 32px;
}
.logobanner__label {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-500);
  white-space: nowrap;
  padding: 22px 0;
}
.logobanner--dark .logobanner__label { color: rgba(255,255,255,0.5); }
.logobanner__track-wrap {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.logobanner__track {
  display: flex; align-items: center; gap: 56px;
  width: max-content;
  animation: logoscroll 42s linear infinite;
}
.logobanner:hover .logobanner__track { animation-play-state: paused; }
.logobanner__item {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 400; letter-spacing: -0.015em;
  color: var(--ink-700);
  white-space: nowrap;
  opacity: 0.78;
}
.logobanner--dark .logobanner__item { color: rgba(255,255,255,0.78); }
@keyframes logoscroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .logobanner__track { animation: none; flex-wrap: wrap; }
}

/* ---- Mini-Story: vom Signal zum Termin ---- */
.ministory {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
}
.ministory__step {
  padding: 32px 28px 28px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 16px;
  position: relative;
  background: var(--surface);
}
.ministory__step:last-child { border-right: 0; }
.ministory__step:last-child { background: var(--surface); }
.ministory__step:last-child .ministory__line { color: var(--ink-700); }
.ministory__step:last-child .ministory__name { color: var(--ink-1000); }
.ministory__step:last-child .ministory__verb { color: var(--sp-blue); }
.ministory__head { display: flex; align-items: center; gap: 14px; }
.ministory__num {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  color: var(--sp-blue);
}
.ministory__step:last-child .ministory__num { color: var(--sp-blue); }
.ministory__avwrap { display: flex; align-items: center; gap: 12px; }
.ministory__name { font-family: var(--font-display); font-size: 22px; letter-spacing: -0.015em; color: var(--ink-1000); line-height: 1; }
.ministory__verb { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sp-blue); margin-top: 5px; }
.ministory__line { font-size: 15px; line-height: 1.6; color: var(--ink-700); margin: 0; flex: 1; }
.ministory__arrow {
  position: absolute; top: 50%; right: -13px; transform: translateY(-50%);
  z-index: 3;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-500);
}
.ministory__caption {
  text-align: center;
  font-family: var(--font-display); font-style: italic;
  font-size: 26px; letter-spacing: -0.015em; color: var(--ink-1000);
  margin: 40px auto 0; max-width: 40ch; line-height: 1.3;
}
.ministory__caption em { color: var(--sp-blue); }

/* ---- Mannschaft nach Bereich (Teaser) ---- */
.areas {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
}
.area-card {
  background: var(--surface); padding: 32px 30px;
  display: flex; flex-direction: column; gap: 18px;
  text-decoration: none; color: inherit;
  transition: background var(--dur-base) var(--ease-out);
  position: relative; min-height: 220px;
}
.area-card:hover { background: var(--surface-tint); }
.area-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.area-card__name { font-family: var(--font-display); font-size: 27px; font-weight: 400; letter-spacing: -0.018em; color: var(--ink-1000); margin: 0; line-height: 1.05; }
.area-card__count { font-family: var(--font-mono); font-size: 11px; color: var(--ink-500); letter-spacing: 0.06em; white-space: nowrap; padding-top: 6px; }
.area-card__desc { font-size: 14.5px; line-height: 1.6; color: var(--ink-700); margin: 0; flex: 1; }
.area-card__faces { display: flex; align-items: center; }
.area-card__faces .av-img, .area-card__faces .av-mono { border: 2px solid var(--surface); }
.area-card__faces > * + * { margin-left: -12px; }
.area-card:hover .area-card__faces .av-img, .area-card:hover .area-card__faces .av-mono { border-color: var(--surface-tint); }
.area-card__link { font-family: var(--font-mono); font-size: 12px; color: var(--sp-blue); letter-spacing: 0.04em; display: inline-flex; align-items: center; gap: 6px; }

/* ---- Teaser-Reihe (Trust / About / Use cases) generic split ---- */
.split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden;
}
.split__cell {
  background: var(--surface); padding: 44px 40px;
  display: flex; flex-direction: column; gap: 18px;
}
.split__cell--ink { background: var(--ink-1000); color: #fff; }
.split__eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-500); }
.split__cell--ink .split__eyebrow { color: rgba(255,255,255,0.5); }
.split__h { font-family: var(--font-display); font-size: 32px; font-weight: 400; letter-spacing: -0.02em; line-height: 1.08; color: var(--ink-1000); margin: 0; }
.split__cell--ink .split__h { color: #fff; }
.split__h em { font-style: italic; color: var(--sp-blue); }
.split__cell--ink .split__h em { color: var(--sp-blue-300); }
.split__p { font-size: 15px; line-height: 1.6; color: var(--ink-700); margin: 0; flex: 1; }
.split__cell--ink .split__p { color: rgba(255,255,255,0.72); }
.split__link { font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--ink-1000); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--ink-1000); align-self: flex-start; padding-bottom: 2px; }
.split__cell--ink .split__link { color: #fff; border-color: rgba(255,255,255,0.5); }
.split__link:hover { color: var(--sp-blue-700); border-color: var(--sp-blue-700); }
.split__cell--ink .split__link:hover { color: var(--sp-blue-300); border-color: var(--sp-blue-300); }

/* mini chip list inside split */
.chiplist { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em;
  color: var(--ink-700); background: var(--surface-tint);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 6px 13px;
}
.split__cell--ink .chip { color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); }

/* ---- Case studies strip ---- */
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.case-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 30px 28px 26px; display: flex; flex-direction: column; gap: 14px;
  text-decoration: none; color: inherit; min-height: 320px;
  transition: border-color var(--dur-base), box-shadow var(--dur-base), transform var(--dur-base);
}
.case-card:hover { border-color: var(--line-strong); box-shadow: var(--sh-3); transform: translateY(-2px); }
.case-card__top { display: flex; justify-content: space-between; align-items: center; }
.case-card__cust { font-family: var(--font-display); font-size: 23px; letter-spacing: -0.015em; line-height: 1.12; color: var(--ink-1000); margin: 0; }
.case-card__ind { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sp-blue); display: inline-flex; align-items: center; gap: 10px; }
.case-card__ind::before { content: ""; width: 20px; height: 1px; background: var(--sp-blue); }
.case-card__no { font-family: var(--font-mono); font-size: 11px; color: var(--ink-300); }
.case-card__line { font-size: 14px; line-height: 1.55; color: var(--ink-700); margin: 0; flex: 1; }
.case-card__metric { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line); padding-top: 18px; }
.case-card__metric-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); }
.case-card__metric-row { display: flex; flex-direction: column; gap: 5px; }
.case-card__metric .m { font-family: var(--font-display); font-size: 38px; font-style: italic; color: var(--sp-blue-700); letter-spacing: -0.02em; line-height: 1; white-space: nowrap; flex: none; }
.case-card__metric .ml { font-size: 12.5px; color: var(--ink-500); line-height: 1.4; white-space: nowrap; }
.case-card__cta { margin-top: 18px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-700); display: inline-flex; align-items: center; gap: 8px; }
.case-card__cta-arrow { transition: transform var(--dur-fast); }
.case-card:hover .case-card__cta { color: var(--sp-blue); }
.case-card:hover .case-card__cta-arrow { transform: translateX(4px); }
.cases-foot { text-align: center; margin-top: 36px; }

/* ============ AI-MITARBEITER ÜBERSICHT ============ */
.roster-area { margin-bottom: 8px; }
.roster-area__head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); padding: 56px 0 20px; margin-bottom: 32px; }
.roster-area__title { font-family: var(--font-display); font-size: 34px; font-weight: 400; letter-spacing: -0.02em; color: var(--ink-1000); margin: 0; }
.roster-area__title em { font-style: italic; color: var(--sp-blue); }
.roster-area__desc { font-size: 15px; color: var(--ink-700); line-height: 1.55; max-width: 46ch; margin: 0; }
/* Roster-Karten (editorial) */
.roster-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; background: transparent; border: 0; border-radius: 0; overflow: visible; }
.persona {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 28px 28px 22px;
  display: flex; flex-direction: column; gap: 14px;
  text-decoration: none; color: inherit; min-height: 250px;
  transition: border-color var(--dur-base), box-shadow var(--dur-base), transform var(--dur-base);
  position: relative;
}
.persona:hover { background: var(--surface); border-color: var(--line-strong); box-shadow: var(--sh-3); transform: translateY(-2px); }
.persona__head { display: flex; align-items: center; gap: 14px; }
.persona__name { font-family: var(--font-display); font-size: 24px; font-weight: 400; letter-spacing: -0.015em; color: var(--ink-1000); margin: 0; line-height: 1; }
.persona__title { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sp-blue); margin-top: 6px; }
.persona__blurb { font-size: 14px; line-height: 1.55; color: var(--ink-700); margin: 0; flex: 1; }
.persona__foot { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; border-top: 1px solid var(--line); }
.persona__arrow { font-family: var(--font-mono); font-size: 12px; color: var(--ink-300); transition: transform var(--dur-base), color var(--dur-base); }
.persona:hover .persona__arrow { color: var(--sp-blue); transform: translateX(4px); }
.persona__status { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--ink-500); display: inline-flex; align-items: center; gap: 6px; }
.persona__status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.persona__status.soon .dot { background: var(--ink-300); }
.persona__cases { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sp-blue-700); display: inline-flex; align-items: center; gap: 7px; }
.persona__cases::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--sp-blue); }

/* Ensemble-Anker (dunkel) */
.ensemble__faces { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; }
.ensemble__face { margin-left: -10px; }
.ensemble__face:first-child { margin-left: 0; }
.ensemble__face .av, .ensemble__face img { border: 2px solid var(--ink-1000); border-radius: 50%; box-shadow: 0 0 0 1px rgba(255,255,255,0.14); }

/* "So wird aus einem Profil Ihr AI-Mitarbeiter" */
.becoming { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.becoming__step { padding: 30px 26px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; position: relative; }
.becoming__step:last-child { border-right: 0; }
.becoming__num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--sp-blue); }
.becoming__k { font-family: var(--font-display); font-size: 21px; letter-spacing: -0.015em; color: var(--ink-1000); margin: 0; line-height: 1.1; }
.becoming__v { font-size: 13.5px; line-height: 1.55; color: var(--ink-700); margin: 0; }

/* ============ AI DETAIL PAGE ============ */
.detail-hero { padding: 48px 0 64px; border-bottom: 1px solid var(--line); }
.detail-hero__row { display: grid; grid-template-columns: 200px 1fr; gap: 48px; align-items: start; }
.detail-hero__portrait { width: 200px; height: 200px; border-radius: var(--r-md); overflow: hidden; background: var(--surface-mute); }
.detail-hero__portrait img { width: 100%; height: 100%; object-fit: cover; }
.detail-hero__mono { width: 100%; height: 100%; display: grid; place-items: center; font-family: var(--font-display); font-size: 80px; color: var(--ink-300); background: var(--surface-tint); }
.detail-hero__eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sp-blue); margin: 0 0 16px; }
.detail-hero__name { font-family: var(--font-display); font-size: clamp(48px, 6vw, 84px); font-weight: 400; letter-spacing: -0.03em; line-height: 0.95; color: var(--ink-1000); margin: 0 0 12px; }
.detail-hero__title { font-family: var(--font-display); font-size: 24px; font-style: italic; color: var(--sp-blue); letter-spacing: -0.01em; margin: 0 0 24px; }
.detail-hero__story { font-size: 19px; line-height: 1.55; color: var(--ink-700); margin: 0 0 28px; max-width: 56ch; }
.detail-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }

/* Verknüpfte Use Cases auf der Profilseite */
.related-cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.related-case { display: flex; flex-direction: column; gap: 10px; padding: 26px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); text-decoration: none; color: inherit; min-height: 150px; transition: border-color var(--dur-base), box-shadow var(--dur-base), transform var(--dur-base); }
.related-case:hover { border-color: var(--line-strong); box-shadow: var(--sh-3); transform: translateY(-2px); }
.related-case__ind { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sp-blue); display: inline-flex; align-items: center; gap: 10px; }
.related-case__ind::before { content: ""; width: 18px; height: 1px; background: var(--sp-blue); }
.related-case__cust { font-family: var(--font-display); font-size: 18px; letter-spacing: -0.01em; line-height: 1.25; color: var(--ink-1000); flex: 1; }
.related-case__arrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); }
.related-case:hover .related-case__arrow { color: var(--sp-blue); }

/* Profil-KPIs (gestapelt, da Werte unterschiedlich breit) */
.profil-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; margin-top: 14px; }
.profil-kpi { display: flex; flex-direction: column; gap: 6px; }
.profil-kpi__v { font-family: var(--font-display); font-style: italic; font-size: 34px; letter-spacing: -0.02em; line-height: 1; color: var(--sp-blue-300); }
.profil-kpi__l { font-size: 13px; line-height: 1.4; color: rgba(255,255,255,0.72); }

.ipo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.ipo__cell { background: var(--surface); padding: 34px 30px; display: flex; flex-direction: column; gap: 16px; }
.ipo__cell--mid { background: var(--ink-1000); color: #fff; }
.ipo__q { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sp-blue); }
.ipo__cell--mid .ipo__q { color: var(--sp-blue-300); }
.ipo__h { font-family: var(--font-display); font-size: 23px; letter-spacing: -0.015em; color: var(--ink-1000); margin: 0; line-height: 1.1; }
.ipo__cell--mid .ipo__h { color: #fff; }
.ipo__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.ipo__list li { font-size: 14px; line-height: 1.5; color: var(--ink-700); padding-left: 20px; position: relative; }
.ipo__cell--mid .ipo__list li { color: rgba(255,255,255,0.78); }
.ipo__list li::before { content: "•"; position: absolute; left: 0; color: var(--sp-blue); }
.ipo__cell--mid .ipo__list li::before { color: var(--sp-blue-300); }

.collab { display: flex; flex-wrap: wrap; gap: 14px; }
.collab__card { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 18px 12px 12px; text-decoration: none; color: inherit; background: var(--surface); transition: border-color var(--dur-fast); }
.collab__card:hover { border-color: var(--ink-1000); }
.collab__name { font-family: var(--font-display); font-size: 18px; letter-spacing: -0.01em; color: var(--ink-1000); }
.collab__role { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-500); margin-top: 2px; }

/* ============ SECURITY PAGE ============ */
/* Zusagen — ein Bauteil, nummeriert, keine Glyph-Icons */
.sec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; background: transparent; border: 0; border-radius: 0; overflow: visible; }
.sec-cell { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px 28px; display: flex; flex-direction: column; gap: 10px; min-height: 210px; transition: border-color var(--dur-base), box-shadow var(--dur-base), transform var(--dur-base); }
.sec-cell:hover { border-color: var(--line-strong); box-shadow: var(--sh-3); transform: translateY(-2px); }
.sec-cell__no { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--sp-blue); }
.sec-cell__k { font-family: var(--font-display); font-size: 23px; letter-spacing: -0.015em; color: var(--ink-1000); margin: 4px 0 0; }
.sec-cell__v { font-size: 14.5px; line-height: 1.6; color: var(--ink-700); margin: 0; }

.integrations { display: flex; flex-wrap: wrap; gap: 10px; }
.integrations .chip { font-size: 13px; padding: 9px 16px; background: var(--surface); }

/* trust seals (Sicherheit-Hero) */
.trust-seals { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
.seal {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 16px 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.02em;
  color: var(--ink-900);
  background: var(--surface);
}
.seal__check {
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--sp-blue); color: #fff;
  display: grid; place-items: center;
  font-size: 10px; font-family: var(--font-sans);
}

/* dark data-location block */
.host-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-md); overflow: hidden;
}
.host-card {
  background: var(--ink-1000);
  padding: 28px 26px;
  display: flex; flex-direction: column; gap: 6px;
  position: relative;
  min-height: 168px;
}
.host-card__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 4px rgba(47,158,110,0.18);
  margin-bottom: 14px;
}
.host-card__name { font-family: var(--font-display); font-size: 27px; font-weight: 400; letter-spacing: -0.015em; color: #fff; margin: 0; line-height: 1; }
.host-card__loc { font-family: var(--font-sans); font-size: 14px; color: rgba(255,255,255,0.82); margin: 4px 0 0; }
.host-card__note { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin: auto 0 0; }
.host-card--sla { background: #15191F; justify-content: center; }
.host-card__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin: 0 0 18px; }
.sla-row { display: flex; flex-direction: column; gap: 14px; }
.sla-row > div { display: flex; align-items: baseline; gap: 12px; }
.sla-v { font-family: var(--font-display); font-size: 30px; font-style: italic; color: var(--sp-blue-300); letter-spacing: -0.02em; line-height: 1; white-space: nowrap; min-width: 3.2em; }
.sla-l { font-size: 12px; color: rgba(255,255,255,0.62); line-height: 1.3; }

/* data-center backdrop for the dark block */
.dataloc { position: relative; overflow: hidden; }
.dataloc__bg {
  position: absolute; inset: 0; z-index: 0;
  background-image: url("assets/datacenter.png");
  background-size: cover;
  background-position: center;
  filter: saturate(0.6) brightness(0.92);
}
.dataloc__veil {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(11,13,16,0.72) 0%, rgba(11,13,16,0.66) 48%, rgba(11,13,16,0.88) 100%);
}
.dataloc > .wrap { position: relative; z-index: 1; }
.dataloc .h2, .dataloc .lead, .dataloc .eyebrow-label, .dataloc .meta { text-shadow: 0 2px 18px rgba(0,0,0,0.6); }
.dataloc .host-grid { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.14); }
.dataloc .host-card { background: rgba(12,15,19,0.55); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); }
.dataloc .host-card--sla { background: rgba(18,22,28,0.62); }

/* tighter sub-hero start + reduced display weight */
.subhero.subhero--tight { padding-top: 44px; padding-bottom: 96px; }
.subhero__lift { margin-top: 60px; }
.h2--sm { font-size: clamp(30px, 3.4vw, 46px); }

/* (Glance-Panel entfernt — redundant) */
.factline { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin-top: 34px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.factline__item { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-700); padding: 15px 22px; border-right: 1px solid var(--line); }
.factline__item:first-child { padding-left: 0; }
.factline__item:last-child { border-right: 0; }

/* Zertifizierte Infrastruktur — ruhige Datentabelle */
.certtable { border-top: 1px solid var(--line); }
.certrow { display: grid; grid-template-columns: 56px 280px 1fr; align-items: baseline; gap: 24px; padding: 20px 4px; border-bottom: 1px solid var(--line); }
.certrow__no { font-family: var(--font-mono); font-size: 11px; color: var(--ink-300); }
.certrow__code { font-family: var(--font-display); font-size: 22px; letter-spacing: -0.01em; color: var(--ink-1000); line-height: 1.1; }
.certrow__note { font-size: 14px; line-height: 1.5; color: var(--ink-500); }
.certnote { display: flex; gap: 14px; align-items: flex-start; margin: 26px 0 0; padding: 16px 20px; background: var(--surface-tint); border: 1px solid var(--line); border-radius: var(--r-md); font-size: 13px; line-height: 1.6; color: var(--ink-700); max-width: 92ch; }
.certnote__mark { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--ink-1000); color: #fff; font-family: var(--font-mono); font-size: 13px; display: grid; place-items: center; margin-top: 1px; }

/* Dunkler Kern — zentrales Statement (keine Modelle) */
.darkcore__lead { max-width: 1000px; margin: 8px 0 56px; }
.darkcore__eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sp-blue-300); margin: 0 0 18px; display: inline-flex; align-items: center; gap: 10px; }
.darkcore__eyebrow::before { content: "·"; color: var(--sp-blue-300); font-size: 18px; line-height: 0; }
.darkcore__h { font-family: var(--font-display); font-size: clamp(34px, 4.6vw, 62px); font-weight: 400; line-height: 1.0; letter-spacing: -0.025em; color: #fff; margin: 0 0 22px; text-shadow: 0 2px 18px rgba(0,0,0,0.6); }
.darkcore__h em { font-style: italic; color: var(--sp-blue-300); }
.darkcore__body { font-size: 17px; line-height: 1.65; color: rgba(255,255,255,0.78); max-width: 62ch; margin: 0; text-shadow: 0 2px 18px rgba(0,0,0,0.5); }

/* Der Weg Ihrer Daten — minimal, nummeriert (im dunklen Block) */
.dflow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--r-md); overflow: hidden; }
.dflow__node { background: rgba(12,15,19,0.55); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); padding: 26px 24px; display: flex; flex-direction: column; gap: 9px; min-height: 180px; }
.dflow__no { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--sp-blue-300); }
.dflow__k { font-family: var(--font-display); font-size: 22px; letter-spacing: -0.015em; color: #fff; margin: 2px 0 0; }
.dflow__v { font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,0.72); margin: 0; }

/* Betrieb, konkret — ruhige Datenzeile (im dunklen Block) */
.opsbar { margin-top: 16px; border: 1px solid rgba(255,255,255,0.14); border-radius: var(--r-md); background: rgba(255,255,255,0.04); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); padding: 22px 26px; }
.opsbar__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin: 0 0 16px; }
.opsbar__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; overflow: hidden; }
.opscell { background: rgba(12,15,19,0.5); padding: 16px 18px; display: flex; flex-direction: column; gap: 7px; }
.opscell__v { font-family: var(--font-display); font-size: 21px; font-style: italic; letter-spacing: -0.02em; color: var(--sp-blue-300); line-height: 1; }
.opscell__k { font-size: 12.5px; line-height: 1.45; color: rgba(255,255,255,0.72); }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q { width: 100%; display: flex; align-items: center; gap: 18px; padding: 24px 4px; background: transparent; border: 0; cursor: pointer; text-align: left; }
.faq__no { font-family: var(--font-mono); font-size: 11px; color: var(--ink-300); flex: none; }
.faq__qt { flex: 1; font-family: var(--font-display); font-size: clamp(19px, 2vw, 24px); letter-spacing: -0.015em; color: var(--ink-1000); line-height: 1.2; }
.faq__icon { flex: none; width: 22px; height: 22px; position: relative; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; background: var(--ink-700); transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base); }
.faq__icon::before { top: 10px; left: 3px; right: 3px; height: 1.5px; }
.faq__icon::after { left: 10px; top: 3px; bottom: 3px; width: 1.5px; }
.faq__item.is-open .faq__icon::after { transform: scaleY(0); opacity: 0; }
.faq__item.is-open .faq__icon::before { background: var(--sp-blue); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height var(--dur-slow) var(--ease-out); }
.faq__item.is-open .faq__a { max-height: 320px; }
.faq__a p { margin: 0; padding: 0 40px 26px 47px; font-size: 15.5px; line-height: 1.7; color: var(--ink-700); max-width: 80ch; }
.faq__contact { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; margin-top: 32px; padding: 20px 24px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-tint); }
.faq__contact-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); }
.faq__contact-mail { font-family: var(--font-display); font-size: 20px; letter-spacing: -0.01em; color: var(--ink-1000); text-decoration: none; border-bottom: 1px solid var(--sp-blue); }
.faq__contact-mail:hover { color: var(--sp-blue); }
.faq__contact-note { font-size: 13px; color: var(--ink-500); }

/* Schluss-Zitat: zarte Textur, damit es nach dem dunklen Block nicht rein weiß ausläuft */
.signature--texture { position: relative; overflow: hidden; }
.signature--texture::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle at center, rgba(11,13,16,0.05) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 0%, transparent 72%);
}
.signature--texture::after {
  content: "‟"; position: absolute; z-index: 0; pointer-events: none;
  top: -0.18em; left: 50%; transform: translateX(-50%);
  font-family: var(--font-display); font-size: 320px; line-height: 1; color: var(--sp-blue);
  opacity: 0.05;
}
.signature--texture .signature__inner { position: relative; z-index: 1; }

/* ============ ABOUT PAGE ============ */
.about-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.about-fact { padding: 32px 24px; border-right: 1px solid var(--line); }
.about-fact:last-child { border-right: 0; }
.about-fact__v { font-family: var(--font-display); font-size: 40px; font-weight: 400; letter-spacing: -0.02em; color: var(--ink-1000); line-height: 1; }
.about-fact__k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); margin-top: 10px; }
.about-belief { font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 44px); font-weight: 400; font-style: italic; letter-spacing: -0.02em; line-height: 1.25; color: var(--ink-1000); margin: 0; max-width: 22ch; }
.about-belief em { color: var(--sp-blue); }
.partner-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.partner-cell { background: var(--surface); padding: 30px 28px; font-family: var(--font-display); font-size: 24px; letter-spacing: -0.015em; color: var(--ink-1000); display: flex; align-items: center; min-height: 96px; }

/* --- About: Gründungsgeschichte --- */
.story { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: start; }
.story__h { font-family: var(--font-display); font-size: clamp(30px, 3.6vw, 50px); font-weight: 400; line-height: 1.06; letter-spacing: -0.025em; color: var(--ink-1000); margin: 0; }
.story__h em { font-style: italic; color: var(--sp-blue); }
.story__body { display: flex; flex-direction: column; gap: 22px; }
.story__p { font-size: 17px; line-height: 1.7; color: var(--ink-700); margin: 0; }

/* --- About: Gründer-Statement --- */
.founderline { text-align: center; }
.founderline__quote { font-family: var(--font-display); font-size: clamp(30px, 4vw, 54px); font-style: italic; font-weight: 400; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink-1000); margin: 0 auto; max-width: 20ch; }
.founderline__sig { margin-top: 28px; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.founderline__names { font-family: var(--font-display); font-size: 20px; letter-spacing: -0.01em; color: var(--ink-1000); }
.founderline__role { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500); }

/* --- About: Gruppenbild-Anker --- */
.groupsec .team-group { filter: grayscale(1) contrast(1.02); }
.groupsec .team-group-wrap:hover .team-group { filter: grayscale(0); }
.team-group__cap { margin-top: 16px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: rgba(255,255,255,0.5); text-align: center; }

/* --- About: Meilensteine-Timeline --- */
.timeline { list-style: none; margin: 0; padding: 0; }
.tl { display: grid; grid-template-columns: 130px 24px 1fr; gap: 0 24px; align-items: start; padding-bottom: 44px; position: relative; }
.tl:last-child { padding-bottom: 0; }
.tl__year { font-family: var(--font-display); font-size: 30px; font-style: italic; letter-spacing: -0.02em; color: var(--sp-blue); line-height: 1; padding-top: 2px; }
.tl__dot { position: relative; justify-self: center; width: 13px; height: 13px; border-radius: 50%; background: var(--ink-1000); margin-top: 6px; z-index: 1; }
.tl:not(:last-child) .tl__dot::after { content: ""; position: absolute; top: 13px; left: 50%; transform: translateX(-50%); width: 1px; height: calc(100% + 44px - 13px); background: var(--line-strong); }
.tl__k { font-family: var(--font-display); font-size: 23px; letter-spacing: -0.015em; color: var(--ink-1000); margin: 0 0 6px; }
.tl__v { font-size: 15px; line-height: 1.62; color: var(--ink-700); margin: 0; max-width: 60ch; }

/* --- About: Standort / Karte --- */
.location { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: stretch; }
.location__info { display: flex; flex-direction: column; justify-content: center; }
.location__addr { font-style: normal; display: flex; flex-direction: column; gap: 4px; font-size: 17px; line-height: 1.5; color: var(--ink-900); }
.location__org { font-family: var(--font-display); font-size: 22px; letter-spacing: -0.01em; color: var(--ink-1000); margin-bottom: 6px; }
.location__note { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); margin-top: 8px; }
.location__map { position: relative; margin: 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; min-height: 340px; background: var(--surface-tint); }
.location__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.04); }
.location__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.location__frame { position: absolute; inset: 0; z-index: 2; background: transparent; }
.location__pin--fallback { z-index: 1; }
.location__pin { position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; transform: translate(-50%, -100%); background: var(--sp-blue); border: 3px solid #fff; border-radius: 50% 50% 50% 0; rotate: 45deg; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }

/* --- About: Partner-Logos --- */
.logo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.logo-cell { display: grid; place-items: center; min-height: 120px; padding: 28px 32px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); transition: border-color var(--dur-base), box-shadow var(--dur-base); }
.logo-cell:hover { border-color: var(--line-strong); box-shadow: var(--sh-3); }
.logo-cell img { width: auto; max-width: 86%; object-fit: contain; filter: grayscale(1); opacity: 0.62; transition: filter var(--dur-base), opacity var(--dur-base); }
.logo-cell:hover img { filter: grayscale(0); opacity: 1; }

/* ============ FOUNDER QUOTE (Foto fließt in Text) ============ */
.founder {
  background: var(--surface-tint);
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.founder__grid {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  align-items: center;
  min-height: 620px;
  max-width: 1320px;
  margin: 0 auto;
}
.founder__photo { position: relative; align-self: stretch; min-height: 620px; }
.founder__photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 80% 14%;
  -webkit-mask-image:
    linear-gradient(96deg, #000 30%, rgba(0,0,0,0.55) 62%, rgba(0,0,0,0) 92%),
    linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 10%, #000 90%, rgba(0,0,0,0) 100%),
    linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 20%);
  -webkit-mask-composite: source-in, source-in;
  mask-image:
    linear-gradient(96deg, #000 30%, rgba(0,0,0,0.55) 62%, rgba(0,0,0,0) 92%),
    linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 10%, #000 90%, rgba(0,0,0,0) 100%),
    linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 20%);
  mask-composite: intersect;
}
.founder__quote {
  padding: 88px clamp(32px, 6vw, 112px) 88px 8px;
  position: relative;
}
.founder__mark {
  font-family: var(--font-display);
  font-size: 120px;
  line-height: 0.5;
  color: var(--sp-blue);
  opacity: 0.22;
  display: block;
  height: 52px;
  margin-bottom: 4px;
}
.founder__text {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.3vw, 46px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.24;
  letter-spacing: -0.02em;
  color: var(--ink-1000);
  margin: 0 0 32px;
  text-wrap: balance;
  max-width: 22ch;
}
.founder__text em { color: var(--sp-blue); font-style: italic; }
.founder__cite {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin: 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: inline-block;
}

/* sub page hero */
.subhero { padding: 56px 0 8px; }
.subhero__eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-500); margin: 0 0 24px; display:inline-flex; align-items:center; gap:10px; }
.subhero__eyebrow::before { content:""; width:24px; height:1px; background: var(--ink-1000); }
.subhero__eyebrow--dot::before { width:auto; height:auto; background:none; content:"·"; font-size:20px; line-height:0; color: var(--ink-1000); margin-right:2px; }
.subhero__title { font-family: var(--font-display); font-size: clamp(44px, 6vw, 88px); font-weight: 400; line-height: 0.96; letter-spacing: -0.03em; color: var(--ink-1000); margin: 0 0 24px; text-wrap: balance; }
.subhero__title em { font-style: italic; color: var(--sp-blue); }
.subhero__lede { font-size: 19px; line-height: 1.55; color: var(--ink-700); margin: 0; max-width: 60ch; }
/* Ressourcen-Masthead (Blog + Lexikon identisch): blaue Akzentlinie vor der
   Eyebrow, sehr dezenter Blauverlauf oben links, Haarlinie als unterer Abschluss. */
.subhero--masthead { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); margin-top: calc(-1 * var(--nav-h, 74px)); padding: calc(56px + var(--nav-h, 74px)) 0 56px; }
.subhero--masthead::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(90% 120% at 12% 0%, rgba(74,144,226,0.08), transparent 58%); } /* rgba = --sp-blue #4A90E2 */
.subhero--masthead .wrap { position: relative; z-index: 1; }
.subhero--masthead .subhero__eyebrow { gap: 14px; }
.subhero--masthead .subhero__eyebrow::before { width: 40px; height: 2px; background: var(--sp-blue); }

/* Cineastischer Unterseiten-Hero (gefiltertes Bild, dunkel) */
.pagehero { position: relative; min-height: clamp(744px, 100vh, 1010px); display: flex; align-items: center; color: #fff; overflow: hidden; margin-top: calc(-1 * var(--nav-h, 65px)); }
.pagehero__bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
.pagehero__veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(11,13,16,0.86) 0%, rgba(11,13,16,0.62) 45%, rgba(11,13,16,0.32) 100%); }
.pagehero__tag { position: absolute; left: 18px; bottom: 14px; z-index: 3; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.35); pointer-events: none; }
.pagehero__in { position: relative; z-index: 2; width: 100%; display: flex; flex-direction: column; padding-top: 88px; padding-bottom: 72px; min-height: inherit; }
.pagehero__top { width: 100%; }
.pagehero__body { margin-top: auto; margin-bottom: auto; padding-top: 40px; }
.pagehero .timestamp { color: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.2); }
.pagehero .timestamp::before, .pagehero .timestamp::after { background: rgba(255,255,255,0.2); }
.pagehero__eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.66); display: inline-flex; align-items: center; gap: 10px; margin: 0; }
.pagehero__eyebrow::before { content: "·"; font-size: 20px; line-height: 0; color: var(--sp-blue-300); }
.pagehero__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 6vw, 78px); line-height: 1.02; letter-spacing: -0.025em; color: #fff; margin: 16px 0 0; text-wrap: balance; }
.pagehero__title em { font-style: italic; color: var(--sp-blue-300); }
.pagehero__lede { font-size: clamp(16px, 2vw, 20px); line-height: 1.55; color: rgba(255,255,255,0.85); max-width: 54ch; margin: 22px 0 0; }

/* Kompakter Hero für Content-Ebenen (Blog): bewusste Ausnahme vom
   Vollbild-Rhythmus, damit Karten/Artikeltext above the fold sichtbar sind. */
.pagehero--compact { min-height: clamp(340px, 44vh, 480px); }
.pagehero--compact .pagehero__in { padding-top: 96px; padding-bottom: 40px; }
.pagehero--compact .pagehero__title { font-size: clamp(32px, 4.2vw, 56px); }
.pagehero--compact .pagehero__lede { font-size: clamp(15px, 1.6vw, 18px); margin-top: 12px; }
/* Artikel minimal höher, damit das Cover-Motiv trägt */
.pagehero--article { min-height: clamp(380px, 52vh, 560px); }

/* Gleich hohe Sektionen (Unterseiten-Rhythmus) */
.sec-eq { min-height: clamp(640px, 88vh, 940px); display: flex; flex-direction: column; justify-content: center; }

/* Disziplin-Kacheln: Funktion sichtbar, Person beim Hover */
.disc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.disc {
  position: relative; display: flex; flex-direction: column; gap: 16px;
  min-height: 196px; padding: 24px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); text-decoration: none; color: inherit; overflow: hidden;
  transition: border-color var(--dur-base), box-shadow var(--dur-base), transform var(--dur-base);
}
.disc:hover, .disc:focus-within { border-color: var(--line-strong); box-shadow: var(--sh-3); transform: translateY(-2px); }
.disc__area { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sp-blue-700); }
.disc__label { font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 28px); line-height: 1.1; letter-spacing: -0.015em; color: var(--ink-1000); margin-top: auto; }
.disc__person { display: flex; align-items: center; gap: 12px; opacity: 0; transform: translateY(8px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.disc:hover .disc__person, .disc:focus-within .disc__person { opacity: 1; transform: none; }
.disc__name { display: block; font-family: var(--font-sans); font-weight: 600; font-size: 14px; color: var(--ink-1000); }
.disc__line { display: block; font-size: 13px; line-height: 1.4; color: var(--ink-700); }
@media (hover: none) { .disc__person { opacity: 1; transform: none; } }
@media (min-width: 680px) { .disc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .disc-grid { grid-template-columns: repeat(4, 1fr); } }

/* Bereichs-Bänder (Option A): Funktion + Nutzen je Bereich, Dunkel/Hell-Wechsel */
.aband { position: relative; overflow: hidden; }
.aband__bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
.aband__veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(11,13,16,0.86) 0%, rgba(11,13,16,0.9) 100%); }
.aband__in { position: relative; z-index: 2; width: 100%; }
.aband__grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
.aband__no { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sp-blue-700); }
.aband__name { font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 4vw, 50px); line-height: 1.04; letter-spacing: -0.02em; color: var(--ink-1000); margin: 14px 0 0; }
.aband__promise { font-size: 17px; line-height: 1.6; color: var(--ink-700); margin: 18px 0 0; max-width: 42ch; }
.aband__count { display: inline-block; margin-top: 20px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500); }
.aband__list { display: flex; flex-direction: column; }
.arow { display: flex; align-items: center; gap: 18px; padding: 18px 4px; border-top: 1px solid var(--line); text-decoration: none; color: inherit; transition: padding var(--dur-base) var(--ease-out); }
.arow:last-child { border-bottom: 1px solid var(--line); }
.arow:hover { padding-left: 10px; }
.arow__txt { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.arow__label { font-family: var(--font-display); font-size: clamp(19px, 2vw, 23px); letter-spacing: -0.01em; color: var(--ink-1000); line-height: 1.15; transition: color var(--dur-base); }
.arow__line { font-size: 14px; line-height: 1.4; color: var(--ink-700); }
.arow__arrow { font-family: var(--font-mono); font-size: 14px; color: var(--ink-300); flex: none; transition: transform var(--dur-base), color var(--dur-base); }
.arow:hover .arow__label { color: var(--sp-blue-700); }
.arow:hover .arow__arrow { transform: translateX(4px); color: var(--sp-blue); }
/* dunkle Variante */
.aband--dark .aband__name { color: #fff; }
.aband--dark .aband__promise { color: rgba(255,255,255,0.78); }
.aband--dark .aband__no { color: var(--sp-blue-300); }
.aband--dark .aband__count { color: rgba(255,255,255,0.6); }
.aband--dark .arow { border-color: rgba(255,255,255,0.16); }
.aband--dark .arow__label { color: #fff; }
.aband--dark .arow__line { color: rgba(255,255,255,0.7); }
.aband--dark .arow__arrow { color: rgba(255,255,255,0.4); }
.aband--dark .arow:hover .arow__label { color: var(--sp-blue-300); }
.aband--dark .arow:hover .arow__arrow { color: var(--sp-blue-300); }
/* Expliziter "Zu den Use Cases"-Button unter dem Mitarbeiterblock (bewusste Dopplung zu den klickbaren Zeilen). */
.aband__cta {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  margin-top: 40px;
  font-family: var(--font-sans); font-size: 15px; font-weight: 600;
  text-decoration: none; color: var(--sp-blue);
  transition: gap var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.aband__cta:hover { gap: 13px; color: var(--sp-blue-700); }
.aband--dark .aband__cta { color: var(--sp-blue-300); }
.aband--dark .aband__cta:hover { color: #fff; }
@media (min-width: 880px) {
  .aband__grid { grid-template-columns: 0.82fr 1.18fr; gap: 64px; align-items: center; }
}

/* Ensemble: dunkler Anker mit dezentem Bild */
.ensemble { position: relative; overflow: hidden; }
.ensemble__bg { position: absolute; inset: 0; z-index: 0; background-image: url("https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=2400&q=80"); background-size: cover; background-position: center; opacity: 0.22; }
.ensemble__veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(11,13,16,0.82) 0%, rgba(11,13,16,0.92) 100%); }

/* ============ RESPONSIVE ============ */
@media (max-width: 980px) {
  .hero__grid, .what, .process, .uc-feature__inner, .uc-hero__row, .footer__top, .section__head,
  .ministory, .areas, .split, .cases, .roster-grid, .becoming, .ipo, .sec-grid, .detail-hero__row { grid-template-columns: 1fr; gap: 24px; }
  .ministory, .areas, .split, .cases, .roster-grid, .becoming, .ipo, .sec-grid { gap: 1px; }
  .cases { gap: 16px; }
  .stats, .about-facts { grid-template-columns: repeat(2, 1fr); }
  .partner-grid { grid-template-columns: repeat(2, 1fr); }
  .story { grid-template-columns: 1fr; gap: 28px; }
  .location { grid-template-columns: 1fr; gap: 28px; }
  .location__map { min-height: 280px; }
  .logo-grid { grid-template-columns: repeat(2, 1fr); }
  .tl { grid-template-columns: 84px 20px 1fr; gap: 0 16px; }
  .tl__year { font-size: 24px; }
  .host-grid { grid-template-columns: 1fr 1fr; }
  .certrow { grid-template-columns: 40px 1fr; gap: 6px 16px; }
  .certrow__note { grid-column: 2; }
  .sec-grid { grid-template-columns: 1fr; }
  .subhero__lift { margin-top: 36px; }
  .dflow { grid-template-columns: 1fr 1fr; }
  .factline__item { padding: 12px 16px; }
  .factline__item:first-child { padding-left: 0; }
  .opsbar__row { grid-template-columns: 1fr 1fr; }
  .stat-cell:nth-child(2) { border-right: 0; }
  .stat-cell:nth-child(1), .stat-cell:nth-child(2) { border-bottom: 1px solid var(--line); }
  .uc-teaser { grid-template-columns: 1fr; }
  .uc-rail { display: none; }
  .uc-filter.is-hidden { opacity: 1; transform: none; pointer-events: auto; }
  .uc-feature__side { gap: 16px; }
  .nav__links { display: none; }
  .process__detail-grid { grid-template-columns: 1fr; gap: 16px; }
  .ministory__arrow { display: none; }
  .logobanner__inner { grid-template-columns: 1fr; gap: 0; }
  .logobanner__label { padding: 16px 0 0; }
  .detail-hero__row { grid-template-columns: 1fr; }
  .founder__grid { grid-template-columns: 1fr; min-height: 0; }
  .founder__photo { min-height: 360px; }
  .founder__photo img {
    object-position: 62% 16%;
    -webkit-mask-image: linear-gradient(180deg, #000 62%, rgba(0,0,0,0) 100%), linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 16%);
    mask-image: linear-gradient(180deg, #000 62%, rgba(0,0,0,0) 100%), linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 16%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
  .founder__quote { padding: 8px 32px 56px; }
  .founder__text { max-width: none; }
}

/* Heller Trenn-Abschnitt zwischen den beiden dunklen Foto-Blöcken (IV / V) */
.bridge { background: var(--surface); text-align: center; padding: 84px 0; }
.bridge__line { font-family: var(--font-display); font-size: clamp(26px, 3vw, 40px); line-height: 1.2; letter-spacing: -0.015em; color: var(--ink-1000); max-width: 24ch; margin: 0 auto; }
.bridge__line em { font-style: italic; color: var(--sp-blue); }

/* ============ TRUST BAR (Homepage, unter Hero) ============ */
.trustbar { background: var(--surface-tint); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trustbar__row {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 36px; align-items: center; padding: 20px 0;
}
.trustbar__ey { display: flex; flex-direction: column; gap: 3px; padding-right: 32px; border-right: 1px solid var(--line); }
.trustbar__ey-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); }
.trustbar__ey-name { font-family: var(--font-display); font-size: 22px; line-height: 1; letter-spacing: -0.01em; color: var(--ink-1000); }
.trustbar__items { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.trustbar__items li { font-family: var(--font-sans); font-size: 13.5px; color: var(--ink-700); display: flex; align-items: center; gap: 8px; }
.trustbar__items li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--sp-blue); flex: none; }
.trustbar__proof { display: flex; flex-direction: column; gap: 3px; text-decoration: none; padding-left: 32px; border-left: 1px solid var(--line); white-space: nowrap; }
.trustbar__proof-v { font-family: var(--font-display); font-style: italic; font-size: 24px; line-height: 1; letter-spacing: -0.02em; color: var(--sp-blue-700); }
.trustbar__proof-l { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); transition: color var(--dur-fast); }
.trustbar__proof:hover .trustbar__proof-v,
.trustbar__proof:hover .trustbar__proof-l { color: var(--sp-blue); }

/* Leitsatz (MiniStory) */
.leitsatz {
  font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.2; letter-spacing: -0.01em; color: var(--ink-1000);
  margin: 4px 0 36px; max-width: 60ch;
}
.leitsatz em { font-style: italic; color: var(--sp-blue); }

@media (max-width: 980px) {
  .trustbar__row { grid-template-columns: 1fr; gap: 18px; }
  .trustbar__ey { padding-right: 0; border-right: 0; flex-direction: row; align-items: baseline; gap: 10px; }
  .trustbar__proof { padding-left: 0; border-left: 0; white-space: normal; }
}

/* ============ H: cineastische Sektionen, Glas-KPI, Akt-Dramaturgie ============ */
/* Full-Bleed-Fotohintergrund mit dunklem Overlay (wie Use-Cases-Seite) */
.section--cinematic { position: relative; overflow: hidden; }
.section--cinematic > .wrap { position: relative; z-index: 2; }
.section__bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.section__bg::after {
  content: ""; position: absolute; inset: 0;
  background: none;
}
.section__bg--soft::after {
  background: none;
}
.section__bg-veil { position: absolute; inset: 0; z-index: 1; background: rgba(11,13,16,0.84); }
.section__bg--soft .section__bg-veil { background: rgba(11,13,16,0.9); }
.section--cinematic .photo-mark { z-index: 2; }

/* Ergebnis-Karten als Glas-Card auf Dunkel (Akt 2) */
.section--ink .case-card {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}
.section--ink .case-card:hover { border-color: rgba(255,255,255,0.32); box-shadow: 0 26px 60px -26px rgba(0,0,0,0.6); }
.section--ink .case-card__cust { color: #fff; }
.section--ink .case-card__ind { color: var(--sp-blue-300); }
.section--ink .case-card__ind::before { background: var(--sp-blue-300); }
.section--ink .case-card__no { color: rgba(255,255,255,0.4); }
.section--ink .case-card__line { color: rgba(255,255,255,0.78); }
.section--ink .case-card__metric { border-top-color: rgba(255,255,255,0.16); }
.section--ink .case-card__metric-eyebrow { color: rgba(255,255,255,0.55); }
.section--ink .case-card__metric .m { color: var(--sp-blue-300); }
.section--ink .case-card__metric .ml { color: rgba(255,255,255,0.6); }
.section--ink .case-card__cta { color: rgba(255,255,255,0.7); }
.section--ink .case-card:hover .case-card__cta { color: var(--sp-blue-300); }

/* Hero-Stat-Leiste als KPI-Muster (große Serifen-Zahl + Mono-Label) */
.hero__kpis {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.hero__kpi { padding: 14px 12px 14px 0; border-right: 1px solid var(--line); }
.hero__kpi:nth-child(2) { padding-left: 14px; }
.hero__kpi:last-child { border-right: 0; padding-right: 0; padding-left: 14px; }
.hero__kpi-v { display: block; font-family: var(--font-display); font-style: italic; font-size: 30px; letter-spacing: -0.02em; line-height: 1; color: var(--ink-1000); }
.hero__kpi-v--text { font-size: 21px; }
.hero__kpi-l { display: block; margin-top: 7px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500); }

/* Footer-Partner: Trennzeichen statt aneinanderklebender Namen */
.footer__partners-row { display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; }
.footer__partners-row span:not(:last-child)::after { content: "\00b7"; margin: 0 9px; opacity: 0.4; color: var(--ink-500); }

/* Avatare: dezenter, einheitlicher Ring */
.av-img { box-shadow: 0 0 0 1px rgba(11,13,16,0.08); }
.section--ink .av-img, .uc-feature__card-row .av img { box-shadow: none; }
.section--ink .av-img { box-shadow: 0 0 0 1px rgba(255,255,255,0.22); }

/* ---------- Referenzen / Kundenstimmen (/referenzen/) ---------- */
.ref-voices { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; grid-auto-rows: 1fr; align-items: stretch; }
.ref-voice { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 30px 30px 18px; text-decoration: none; color: inherit; cursor: pointer; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.ref-voice:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: 0 18px 40px -24px rgba(11,13,16,0.35); }
.ref-quote { font-family: var(--font-display); font-style: italic; font-size: clamp(19px, 2.1vw, 23px); line-height: 1.4; letter-spacing: -0.01em; color: var(--ink-1000); margin: 0 0 24px; }
.ref-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sp-blue); }
.ref-summary { font-size: 16.5px; line-height: 1.55; color: var(--ink-900); margin: 12px 0 24px; }
/* Unterer Block (Strich + Foto + Person + Case-Link) immer unten bündig:
   margin-top:auto schiebt ihn an die Karten-Unterkante -> Strich auf gleicher Höhe. */
.ref-by { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ref-person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ref-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; filter: grayscale(1); background: var(--surface-mute); }
.ref-who { min-width: 0; }
.ref-who b { display: block; font-weight: 600; font-size: 15px; color: var(--ink-1000); }
.ref-who span { font-size: 13.5px; color: var(--ink-500); }
.ref-by__logo { height: 26px; width: auto; max-width: 130px; object-fit: contain; flex: none; filter: brightness(0); opacity: 0.55; transition: opacity var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out); }
.ref-voice:hover .ref-by__logo { filter: none; opacity: 1; }
.ref-case { display: inline-flex; align-items: center; align-self: flex-end; margin-top: 8px; background: var(--ink-1000); color: #fff; padding: 8px 14px; border-radius: 10px; font-family: var(--font-sans); font-size: 13.5px; font-weight: 500; transition: background var(--dur-base) var(--ease-out); }
.ref-voice:hover .ref-case { background: var(--sp-blue); }
@media (prefers-reduced-motion: reduce) { .ref-voice { transition: none; } .ref-voice:hover { transform: none; } }

/* Logo-Wand: zusammenhängende Kacheln (1px-Raster über die Hintergrundlinie). */
.ref-wall-sec { background: var(--surface-tint); border-top: 1px solid var(--line); }
.ref-wall__cap { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-500); text-align: center; margin: 0; }
.ref-logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 28px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.ref-logos__cell { display: flex; align-items: center; justify-content: center; min-height: 108px; padding: 18px; background: var(--surface); }
.ref-logos__cell img { height: 30px; width: auto; max-width: 130px; object-fit: contain; filter: brightness(0); opacity: 0.5; transition: opacity var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out); }
.ref-logos__cell:hover img { filter: none; opacity: 1; }

@media (max-width: 820px) {
  .ref-voices { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .ref-logos { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 520px) {
  .ref-logos { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Case-Study-Detailseite (/referenzen/<slug>/) ---------- */
.cs-layout { display: grid; grid-template-columns: minmax(260px, 300px) 1fr; gap: 48px; align-items: start; }
.cs-side { display: flex; flex-direction: column; gap: 18px; }
.cs-card { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 22px; }
.cs-portrait { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; filter: grayscale(1); display: block; }
.cs-person__txt { margin-top: 12px; }
.cs-person__txt b { display: block; font-weight: 600; font-size: 15.5px; color: var(--ink-1000); }
.cs-person__txt span { font-size: 13px; color: var(--ink-500); }
.cs-bio { margin: 12px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-700); }
.cs-company__logo { height: 30px; width: auto; max-width: 170px; object-fit: contain; display: block; }
.cs-company__name { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 19px; line-height: 30px; color: var(--ink-1000); }
.cs-company__info { margin: 16px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-700); }
.cs-ai { display: grid; grid-template-columns: 56px 1fr; gap: 4px 14px; align-items: center; }
.cs-ai__avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.cs-ai__head b { display: block; font-weight: 600; font-size: 15px; color: var(--ink-1000); }
.cs-ai__head span { font-size: 12.5px; color: var(--sp-blue); }
.cs-ai__desc { grid-column: 1 / -1; margin: 6px 0 0; font-size: 13px; line-height: 1.55; color: var(--ink-700); }
.cs-note { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--ink-500); margin: 2px 4px; }

.cs-fig { margin: 22px 0 4px; }
.cs-fig img { width: 100%; height: auto; display: block; border-radius: 12px; border: 1px solid var(--line); }
.cs-fig figcaption { margin-top: 9px; font-size: 12.5px; line-height: 1.5; color: var(--ink-500); }
.cs-main h2 { font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sp-blue); margin: 34px 0 10px; }
.cs-main h2:first-child { margin-top: 0; }
.cs-back { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 13px; }
.cs-back a { color: var(--sp-blue); text-decoration: none; }
.cs-back a:hover { text-decoration: underline; text-underline-offset: 3px; }

.cs-cta { text-align: center; }
.cs-cta__h { font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.01em; color: var(--ink-1000); margin: 0; }
.cs-cta__p { max-width: 52ch; margin: 12px auto 0; font-size: 16px; line-height: 1.6; color: var(--ink-700); }
.cs-cta__btn { display: inline-flex; align-items: center; margin-top: 22px; background: var(--ink-1000); color: #fff; border-radius: 3px; padding: 14px 28px; font-size: 15.5px; font-weight: 500; text-decoration: none; transition: background var(--dur-base) var(--ease-out); }
.cs-cta__btn:hover { background: var(--sp-blue-700); }

@media (max-width: 900px) {
  .cs-layout { grid-template-columns: 1fr; gap: 28px; }
}