:root {
  --ink: #080808;
  --muted: #6d6d74;
  --line: #dedee4;
  --paper: #f4f3f0;
  /* Secondary Background laut Brand Assets. Aktuell nicht im Einsatz –
     als Marken-Token hinterlegt, damit abgesetzte Flächen später nicht
     neu erfunden werden. Achtung: --muted und --purple fallen darauf unter
     WCAG AA und müssen bei Verwendung nachgezogen werden. */
  --paper-secondary: #d9d9d9;
  --purple: #4f49e5;
  --soft-purple: #ece8ff;
  --pink: #f4bdd3;
  --white: #ffffff;
  --container: 1120px;
  --hero-title-indent: 2.55em;
  /* Ein System für alle Zwischenüberschriften */
  --h2-size: clamp(40px, 4.3vw, 64px);
  --h2-line: 1.02;
  --h2-weight: 600;
  --subline-weight: 500;
  /* Typo-Skala unterhalb der H2 */
  --label-size: 12px;
  --label-spacing: .3em;
  --label-weight: 600;
  --h3-size: 24px;
  --text-s: 13px;
  --text-m: 15px;
  --text-l: 18px;
  --text-lead: 22px;
  --text-ui: 14px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

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

a:focus-visible,
button:focus-visible {
  outline: 3px solid rgba(79, 73, 229, .34);
  outline-offset: 4px;
}

.container {
  width: min(var(--container), calc(100% - 64px));
  margin: 0 auto;
}

.section-pad {
  padding: 88px 0;
}

.site-header {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 10;
  display: flex;
  width: min(var(--container), calc(100% - 64px));
  transform: translateX(-50%);
  align-items: center;
  justify-content: space-between;
  padding-top: 28px;
  font-size: var(--text-ui);
}

.logo-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* Logo: wordmark follows currentColor, bar follows --pd-bar */
.pd-word { fill: currentColor; }
.pd-bar  { fill: var(--pd-bar, #4f49e5); }

.brand {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  transition: color .22s ease;
}

.brand-logo {
  display: block;
  width: 127px;
  height: 34px;
}

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  transition: transform .22s ease, opacity .22s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 54px;
  font-weight: 500;
}

.main-nav a {
  transition: color .22s ease, opacity .22s ease;
}

.nav-cta {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 0 20px;
  border-radius: 999px;
  background: #000;
  color: #fff;
  transition: background .22s ease, box-shadow .22s ease;
}

.language {
  display: inline-flex;
  gap: 6px;
  color: var(--muted);
  font-size: var(--text-s);
  font-weight: 600;
}

.language b {
  color: var(--purple);
}

.language a {
  color: inherit;
  transition: color .2s ease;
}

/* Der Trennstrich gehört zwischen die beiden Sprachen. Er hing vorher am
   hervorgehobenen <b>; auf englischen Seiten steht das an zweiter Stelle,
   dadurch rutschte der Strich hinter EN. Jetzt hängt er immer am ersten
   Element, unabhängig davon, welche Sprache gerade aktiv ist. */
.language > :first-child::after {
  content: " |";
  color: var(--muted);
  font-weight: 600;
}

.copyright a {
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity .2s ease;
}

.hero {
  min-height: 800px;
  padding-top: 175px;
  /* Original-Verlaufsgrafik. Der CSS-Verlauf darunter dient als Fallback,
     falls das Bild noch nicht geladen ist. */
  background-color: var(--paper);
  background-image:
    linear-gradient(180deg, rgba(244, 243, 240, 0) 58%, var(--paper) 97%),
    radial-gradient(115% 62% at 34% -12%, rgba(243, 199, 226, .95), rgba(243, 199, 226, 0) 68%),
    radial-gradient(52% 48% at 101% 8%, rgba(242, 170, 147, .95), rgba(242, 170, 147, 0) 70%),
    linear-gradient(180deg, #f6eef2 0%, var(--paper) 62%);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
}

@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
  .hero {
    /* Die Originalgrafik läuft unten selbst in die Papierfarbe aus. Der frühere
       Überblend-Layer entfällt deshalb.

       background-size: 100% 100% statt cover ist Absicht: Bei cover würde auf
       breiten Bildschirmen der untere, papierfarbene Teil der Grafik
       weggeschnitten und es entstünde wieder eine sichtbare Kante zur nächsten
       Sektion. Ein weicher Verlauf verträgt die Verzerrung ohne sichtbaren
       Nachteil. */
    background-image:
      image-set(url("assets/hero-gradient.webp") type("image/webp"),
                url("assets/hero-gradient.jpg") type("image/jpeg"));
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 100%;
  }
}

.hero h1 {
  max-width: 980px;
  margin: 0 0 54px;
  color: var(--purple);
  font-size: clamp(62px, 8.2vw, 112px);
  font-weight: 500;
  line-height: .98;
}

.hero h1 span {
  display: block;
}

.hero-title-indent {
  /* Eigene Variable, damit das Quadrat unten denselben Einzug nutzt wie
     der Text – auch dort, wo der Einzug mobil gedeckelt wird. */
  --indent-used: var(--hero-title-indent);
  position: relative;
  padding-left: var(--indent-used);
  width: max-content;
  max-width: none;
  white-space: nowrap;
}

/* Pinkes Quadrat in der Einzugslücke.
   Rechte Kante bündig mit dem „r“ von „Your“, Unterkante auf der Grundlinie
   des „P“. Beide Bezugswerte misst script.js an der echten Schrift –
   die Fallbacks greifen nur, solange das Skript noch nicht gelaufen ist. */
.hero-title-indent::before {
  --square: .40em;
  position: absolute;
  top: calc(var(--hero-baseline, .80em) - var(--square));
  left: calc(var(--hero-word-end, 2.2em) - var(--square));
  width: var(--square);
  height: var(--square);
  content: "";
  background: var(--pink);
}

.hero p {
  max-width: 770px;
  margin: 0 0 32px;
  color: var(--purple);
  font-size: var(--text-lead);
  line-height: 1.14;
}

.hero-actions {
  display: flex;
  gap: 14px;
  align-items: center;
}

.button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border: 1px solid var(--purple);
  border-radius: 999px;
  font-size: var(--text-ui);
  font-weight: 600;
  transition: background .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease;
}

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

.button-ghost {
  color: var(--purple);
}

.button-inverse {
  display: flex;
  width: fit-content;
  margin: 54px auto 0;
  border-color: #fff;
  background: #fff;
  color: var(--purple);
}

.hero-tags {
  margin-top: 58px;
  color: var(--muted);
  font-size: var(--text-s);
  font-weight: 500;
}

.eyebrow,
.pain-card span,
.project-card span,
.footer-grid h3 {
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
}

.eyebrow {
  margin: 0 0 18px;
  color: var(--purple);
}

.eyebrow.center,
.center {
  text-align: center;
}

.eyebrow.light {
  color: #d7d3ff;
}

.trusted {
  padding: 64px 0 92px;
  background: var(--paper);
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Kundenlogos
   ---------------------------------------------------------------------------
   Zwei Darstellungen im Markup, umgeschaltet per Breite:

   Desktop  – das laufende Band mit allen 31 Marken. Platz und Ruhe sind da,
              die Bewegung stört das Lesen nicht.
   Mobil    – ein ruhiges Raster mit zwölf ausgewählten Marken. Auf 390px ist
              jedes Logo im Band nur Sekundenbruchteile im Blick, und die
              Bewegung läuft dem Wischen des Nutzers entgegen.

   Kein Lazy Loading auf den Logos: Im Band laufen sie ins Bild hinein,
   verzögertes Nachladen risse Lücken. Alle 31 zusammen wiegen 113 KB.
   --------------------------------------------------------------------------- */

.logo-grid {
  display: none;
}

.logo-marquee {
  display: grid;
  gap: 30px;
  width: 100vw;
  margin: 38px 0 0 calc(50% - 50vw);
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}

.logo-track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 58px;
  padding: 4px 0;
  animation: logo-scroll 42s linear infinite;
  will-change: transform;
}

.logo-track-reverse {
  animation-direction: reverse;
  animation-duration: 48s;
}

.logo-track img {
  flex: 0 0 auto;
  /* Keine gemeinsame Maximalbox mehr. Jedes Logo trägt seine optisch
     ausgeglichene Größe als width/height-Attribut im HTML: alle Marken
     belegen dieselbe bedruckte Fläche, unabhängig vom Seitenverhältnis. */
  object-fit: contain;
  opacity: .86;
  filter: grayscale(1) contrast(1.05);
  transition: opacity .2s ease, filter .2s ease, transform .2s ease;
}

.logo-marquee:hover .logo-track,
.logo-marquee:focus-visible .logo-track,
.logo-marquee:focus-within .logo-track {
  animation-play-state: paused;
}

.logo-marquee:focus-visible {
  outline: 3px solid rgba(79, 73, 229, .34);
  outline-offset: 6px;
}

.logo-track img:hover {
  opacity: 1;
  filter: grayscale(0) contrast(1.12);
  transform: translateY(-1px);
}

@keyframes logo-scroll {
  from {
    transform: translateX(0);
  }

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

.realities {
  padding: 0 0 72px;
  background: var(--paper);
}

.realities h2,
.projects h2,
.testimonials h2,
.services h2,
.why-copy h2,
.cta h2 {
  font-size: var(--h2-size);
  line-height: var(--h2-line);
  overflow-wrap: normal;
}

.realities h2,
.projects h2,
.testimonials h2 {
  margin: 0;
  font-weight: var(--h2-weight);
}

.accent { color: var(--purple); }

.pain-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 82px;
}

.pain-card {
  position: relative;
  display: flex;
  min-height: 465px;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 26px 42px;
  container-type: inline-size;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  color: #fff;
  isolation: isolate;
  transition: filter .28s ease;
}

.pain-card::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  background-image: inherit;
  background-position: inherit;
  background-size: cover;
  transition: transform .78s cubic-bezier(.2, .8, .2, 1);
  will-change: transform;
}

.pain-card::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background: linear-gradient(180deg, rgba(0, 0, 0, .04) 36%, rgba(0, 0, 0, .82) 100%);
  transition: background .28s ease;
}

.pain-card span,
.pain-card h3,
.pain-card p {
  position: relative;
  z-index: 2;
  transition: transform .34s ease, opacity .34s ease;
}

.pain-card span {
  margin-bottom: 22px;
}

.project-card h3 {
  margin: 0;
  font-size: var(--h3-size);
  font-weight: var(--h2-weight);
}

/* Skaliert mit der Kartenbreite: volle 24px sobald Platz ist,
   sonst so weit herunter, dass die erste Zeile nicht umbricht. */
.pain-card h3 {
  margin: 0;
  font-size: clamp(17px, 4.9cqi, var(--h3-size));
  font-weight: var(--h2-weight);
  line-height: 1.08;
}

.project-card-main h3,
.reason-list h3 {
  font-size: calc(var(--h3-size) * 1.25);
  font-weight: var(--h2-weight);
}

.pain-card p {
  max-width: 95%;
  margin: 16px 0 0;
  color: rgba(255, 255, 255, .88);
  font-size: var(--text-m);
  font-style: normal;
  font-weight: var(--subline-weight);
  line-height: 1.35;
  opacity: 0;
  transform: translateY(12px);
}

/* Steht als einziges Element der Sektion außerhalb des Containers und lief
   deshalb bis an die Bildschirmkante. */
.section-note {
  width: min(var(--container), calc(100% - 64px));
  margin: 78px auto 0;
  line-height: 1.7;
}

.services {
  padding: 76px 0 54px;
  background: var(--purple);
  color: #fff;
}

.services h2 {
  max-width: 900px;
  margin: 0 0 46px;
  font-weight: var(--h2-weight);
}

.services-intro {
  max-width: 480px;
  margin: 0 0 48px;
  color: #fff;
  font-size: var(--text-l);
  font-weight: var(--subline-weight);
  line-height: 1.5;
}

.service-list {
  border-top: 2px solid rgba(255, 255, 255, .76);
}

.service-item {
  border-bottom: 2px solid rgba(255, 255, 255, .76);
  transition: background .22s ease;
}

.service-heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.service-row {
  display: flex;
  width: 100%;
  min-height: 112px;
  align-items: center;
  justify-content: space-between;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: clamp(36px, 4.4vw, 56px);
  font-weight: 400;
  letter-spacing: 0;
  text-align: left;
  transition: color .22s ease;
}

.service-row span {
  display: inline-flex;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  /* currentColor: Ring und Pfeil übernehmen die Farbe des Buttons.
     Damit genügt ein Farbwechsel am Button, um beides mitzunehmen. */
  border: 3px solid currentColor;
  border-radius: 50%;
  font-size: 24px;
  transition: transform .24s ease, background .24s ease;
}

/* Aufgeklappt: Text, Ring und Pfeil in Pink – gilt auch auf Touch-Geräten,
   deshalb außerhalb des Hover-Blocks. */
.service-row[aria-expanded="true"] {
  color: #f4bdd3;
}

.service-row:focus-visible {
  color: #f4bdd3;
}

.service-row[aria-expanded="true"] span {
  transform: rotate(180deg);
  background: rgba(244, 189, 211, .14);
}

.service-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .32s ease, padding .32s ease;
}

.service-panel p {
  max-width: 760px;
  margin: 0;
  color: rgba(255, 255, 255, .78);
  font-size: var(--text-l);
  font-weight: var(--subline-weight);
  line-height: 1.55;
}

.service-panel strong {
  display: block;
  margin-top: 12px;
  color: #fff;
  font-size: var(--text-l);
  line-height: 1.35;
}

.service-item.is-open .service-panel {
  max-height: 260px;
  padding: 0 78px 38px 0;
}

.service-item.is-open .service-panel p {
  padding: 0;
}

.text-link {
  display: block;
  margin: 54px auto 0;
  color: var(--purple);
  font-size: var(--text-ui);
  font-weight: var(--label-weight);
  text-align: center;
  transition: opacity .22s ease;
}

.light-link {
  color: #fff;
}

.why {
  padding-top: 72px;
  background: var(--paper);
}

.why-grid {
  display: grid;
  grid-template-columns: 390px 1fr;
  gap: 88px;
  align-items: start;
  padding-bottom: 96px;
}

.why-photo {
  position: sticky;
  top: 96px;
  overflow: hidden;
  width: 390px;
  height: 520px;
  border-radius: 16px;
  background: #0c1522;
  box-shadow: 0 18px 40px rgba(8, 8, 8, 0);
  transition: box-shadow .28s ease;
}

.why-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.why-copy h2 {
  margin: 0 0 48px;
  font-weight: var(--h2-weight);
}

.reason-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.reason-list li {
  padding: 52px 0 56px;
  border-top: 1px solid var(--line);
  transition: opacity .24s ease;
}

.reason-list li:not(.is-active) {
  opacity: .58;
}

.reason-list li.is-active {
  opacity: 1;
}

.reason-list li:last-child {
  border-bottom: 1px solid var(--line);
}

.reason-list span {
  display: block;
  margin-bottom: 18px;
  color: var(--purple);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .24em;
}

.reason-list h3 {
  margin: 0 0 10px;
  line-height: 1.05;
  transition: color .22s ease;
}

.reason-list p {
  max-width: 670px;
  margin: 0;
  color: var(--muted);
  font-size: var(--text-m);
  font-weight: var(--subline-weight);
  line-height: 1.45;
}

.projects {
  padding: 24px 0 56px;
  background: var(--paper);
}

.project-grid {
  display: grid;
  grid-template-columns: 1.38fr 1fr;
  grid-template-rows: 248px 248px;
  gap: 24px;
  margin-top: 54px;
}

.project-card {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background-position: center;
  background-size: cover;
  color: #fff;
  isolation: isolate;
  transition: box-shadow .28s ease, filter .28s ease;
}

.project-card::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  background-image: inherit;
  background-position: inherit;
  background-size: cover;
  transition: transform .78s cubic-bezier(.2, .8, .2, 1);
  will-change: transform;
}

.project-card::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background: linear-gradient(180deg,
    rgba(0, 0, 0, .12) 0%,
    rgba(0, 0, 0, .34) 38%,
    rgba(0, 0, 0, .80) 72%,
    rgba(0, 0, 0, .94) 100%);
  transition: background .28s ease;
}

.project-card-main {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  grid-row: span 2;
  padding: 0 0 34px 34px;
}

.project-card-small {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 0 26px 26px;
}

.project-card span,
.project-card h3,
.project-card p {
  position: relative;
  z-index: 2;
}

.project-card span {
  margin-bottom: 12px;
}



.project-card p {
  max-width: 420px;
  margin: 10px 0 0;
  color: rgba(255, 255, 255, .85);
  font-size: var(--text-m);
  font-style: normal;
  font-weight: var(--subline-weight);
}



.testimonials {
  padding: 62px 0 66px;
  /* Höhe bleibt unverändert – das Bild wird per cover mittig beschnitten,
     nie verzerrt. WebP mit JPG-Fallback für ältere Browser. */
  background-color: #d9d9d9;
  background-image: url("assets/testimonials-bg.jpg");
  background-image: image-set(url("assets/testimonials-bg.webp") type("image/webp"),
                              url("assets/testimonials-bg.jpg") type("image/jpeg"));
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.testimonials h2 {
  text-align: center;
}

.quote-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Alle Reihen gleich hoch – die längste Karte gibt das Maß vor */
  grid-auto-rows: 1fr;
  gap: 18px;
  margin-top: 42px;
}

@media (max-width: 1020px) and (min-width: 901px) {
  .quote-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

blockquote {
  display: flex;
  min-height: 174px;
  margin: 0;
  padding: 28px 30px 24px;
  flex-direction: column;
  border-radius: 8px;
  background: #fff;
  transition: box-shadow .24s ease;
}

blockquote span {
  display: block;
  height: 28px;
  color: var(--purple);
  font-size: 66px;
  font-weight: 600;
  line-height: .75;
}

blockquote p {
  margin: 4px 0 22px;
  font-size: var(--text-m);
  font-weight: var(--subline-weight);
  line-height: 1.45;
}

/* Fußzeile mit Foto bleibt unten, egal wie lang das Zitat ist */
blockquote footer {
  display: flex;
  margin-top: auto;
  gap: 14px;
  align-items: center;
}

blockquote footer picture {
  display: block;
  flex: 0 0 auto;
}

blockquote footer img {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: 999px;
  object-fit: cover;
  background: var(--soft-purple);
}

blockquote cite {
  font-size: var(--text-s);
  font-style: normal;
  font-weight: var(--subline-weight);
  line-height: 1.3;
  color: var(--muted);
}

blockquote cite b {
  display: block;
  color: var(--ink);
  font-weight: var(--label-weight);
}


/* ---------------------------------------------------------------------------
   Preis-Anker mit Ansprechpartner
   ---------------------------------------------------------------------------
   Schließt die Warum-wir-Sektion ab. Der Preisrahmen nimmt die häufigste
   unausgesprochene Frage vorweg, das Gesicht daneben macht aus einer Aussage
   ein Versprechen einer Person.

   Übergangslösung: Sobald es eine Über-uns-Seite gibt, kann der Preisrahmen
   dorthin wandern.
   --------------------------------------------------------------------------- */

/* Keine eigene Trennlinie: Der letzte Listenpunkt darüber schließt bereits mit
   einer Haarlinie ab. Eine zweite ergäbe einen Doppelstrich. */
.founder-note {
  display: grid;
  margin-top: 40px;
  grid-template-columns: 96px 1fr auto;
  gap: 24px;
  align-items: center;
}

.founder-note picture {
  display: block;
}

.founder-note img {
  width: 96px;
  height: 96px;
  border-radius: 999px;
  /* Der Ausschnitt sitzt bereits in der Bilddatei, hier reicht mittig. */
  object-fit: cover;
  background: var(--soft-purple);
}

.founder-note b {
  display: block;
  font-size: 16px;
  font-weight: var(--label-weight);
}

.founder-role {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 16px;
}

.founder-note p {
  max-width: 46em;
  margin: 0;
  color: var(--muted);
  font-size: var(--text-m);
  line-height: 1.45;
}

.founder-note .button {
  white-space: nowrap;
}

/* Ab hier wird der Rest der Seite ebenfalls einspaltig – drei Spalten mit
   Foto, Fließtext und Button werden darunter zu eng. */
@media (max-width: 900px) {
  .founder-note {
    grid-template-columns: 1fr;
    gap: 18px;
    justify-items: center;
    text-align: center;
  }

  .founder-note p {
    max-width: 42ch;
  }

  .founder-note .button {
    width: 100%;
  }
}

/* ---------------------------------------------------------------------------
   Prozessstreifen
   ---------------------------------------------------------------------------
   Vier Schritte zwischen Begründung und Beweis. Beantwortet die Frage, die
   nach dem Warum kommt: Wie läuft das ab, worauf lasse ich mich ein.
   --------------------------------------------------------------------------- */

.process {
  /* Gleich viel Luft nach oben wie nach unten. Die Sektion darüber schließt
     mit 88px ab, die Referenzen darunter beginnen nur mit 24px – der
     Unterschied wird hier ausgeglichen, damit der Block optisch mittig
     zwischen beiden sitzt (beidseitig 176px). */
  padding: 88px 0 152px;
  background: var(--paper);
}

.process-head {
  margin-bottom: 44px;
}

.process-head .eyebrow {
  margin: 0 0 18px;
  color: var(--purple);
}

.process-head h2 {
  margin: 0;
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  line-height: var(--h2-line);
  overflow-wrap: normal;
}

.process-grid {
  display: grid;
  /* Als <ol> ausgezeichnet, damit die Reihenfolge auch ohne Bild und für
     Screenreader verbindlich ist. Die Zählung des Browsers wird abgeschaltet,
     weil die Schritte ihre Nummer sichtbar selbst tragen – sonst stünde sie
     doppelt. */
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  list-style: none;
}

.process-step {
  padding: 28px 26px 30px;
  border-radius: 12px;
  background: var(--white);
  /* Gleiche Übergangszeit wie bei den Kundenstimmen-Karten */
  transition: box-shadow .24s ease;
}

.process-step span {
  display: block;
  margin-bottom: 14px;
  color: var(--purple);
  font-size: 14px;
  font-weight: var(--label-weight);
  letter-spacing: .2em;
}

.process-step h3 {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: var(--h2-weight);
  line-height: 1.2;
}

.process-step p {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-ui);
  line-height: 1.4;
}

@media (max-width: 900px) {
  /* Die Sektion trägt oben und unten bewusst unterschiedliche Werte, damit sie
     mittig zwischen den Nachbarn sitzt. Das Verhältnis bleibt mobil erhalten,
     nur der Betrag sinkt. */
  .process {
    padding: 64px 0 104px;
  }

  .process-head {
    margin-bottom: 32px;
  }

  .process-head h2 {
    font-size: clamp(36px, 9.4vw, 56px);
  }

  .process-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Unter 620px blieben je Kachel keine 250px – zu wenig für Überschrift plus
   zwei Zeilen Text. */
@media (max-width: 620px) {
  .process-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .process {
    padding: 48px 0 72px;
  }

  .process-head h2 {
    font-size: 36px;
  }
}

.cta {
  position: relative;
  display: grid;
  overflow: hidden;
  min-height: 460px;
  place-items: center;
  background: #0c1522;
  color: #fff;
  text-align: center;
  isolation: isolate;
}

.cta::before,
.cta::after {
  position: absolute;
  inset: 0;
  content: "";
}

.cta::before {
  z-index: 0;
  background: url("assets/cta-bg.jpg") center / cover no-repeat;
  transition: transform .78s cubic-bezier(.2, .8, .2, 1);
  will-change: transform;
}

.cta::after {
  z-index: 1;
  background: rgba(0, 0, 0, .24);
}

/* Ohne Breitenbegrenzung lief der Inhalt bis an die Kanten und wurde vom
   overflow: hidden der Sektion abgeschnitten – auf schmalen Geräten fiel das
   letzte Zeichen der Headline weg. */
.cta-inner {
  position: relative;
  z-index: 2;
  width: min(100%, 760px);
  padding: 0 24px;
  opacity: 1;
}

.cta h2 {
  margin: 0 0 24px;
  font-weight: var(--h2-weight);
}

.cta p {
  max-width: 600px;
  margin: 0 auto 28px;
  /* Der globale Wert „anywhere“ würde hier mitten im Wort umbrechen. */
  overflow-wrap: break-word;
  font-size: var(--text-l);
  font-weight: var(--subline-weight);
  line-height: 1.45;
}

.site-footer {
  padding: 44px 0 28px;
  background: var(--purple);
  color: #fff;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.35fr;
  gap: 72px;
}

.footer-grid p {
  max-width: 380px;
  margin: 0 0 28px;
  color: #dfddff;
  font-size: var(--text-m);
  font-weight: var(--subline-weight);
  line-height: 1.45;
}

.footer-logo {
  display: block;
  width: 262px;
  height: 70px;
  color: #fff;
  --pd-bar: #fff;
}

.footer-grid h3 {
  margin: 0 0 20px;
  color: #dfddff;
}

.footer-grid a {
  display: block;
  margin-bottom: 12px;
  color: #fff;
  font-size: var(--text-m);
  font-weight: var(--subline-weight);
  transition: opacity .2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .brand:hover {
    color: var(--purple);
  }

  .main-nav a:not(.nav-cta):hover,
  .main-nav a:not(.nav-cta):focus-visible,
  .language a:hover,
  .language a:focus-visible {
    color: var(--purple);
  }

  .copyright a:hover,
  .copyright a:focus-visible {
    opacity: .72;
  }

  .nav-cta:hover,
  .nav-cta:focus-visible {
    background: var(--purple);
    box-shadow: 0 10px 22px rgba(79, 73, 229, .26);
  }

  .button:hover,
  .button:focus-visible {
    box-shadow: 0 12px 24px rgba(79, 73, 229, .22);
  }

  .button-primary:hover,
  .button-primary:focus-visible {
    border-color: #362bd8;
    background: #362bd8;
  }

  .button-ghost:hover,
  .button-ghost:focus-visible {
    background: var(--purple);
    color: #fff;
  }

  .pain-card:hover {
    z-index: 1;
    filter: saturate(1.05);
  }

  .pain-card:hover::before {
    transform: scale(1.065);
  }

  .pain-card:hover::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, .02) 28%, rgba(0, 0, 0, .9) 100%);
  }

  .pain-card:hover span,
  .pain-card:hover h3,
  .pain-card:focus-within span,
  .pain-card:focus-within h3 {
    transform: translateY(-18px);
  }

  /* Beschreibungstext erscheint bei Hover und bei Tastaturfokus */
  .pain-card:hover p,
  .pain-card:focus-within p {
    opacity: 1;
    transform: translateY(-18px);
  }

  .service-item:hover .service-row {
    color: #f4bdd3;
  }

  .service-row[aria-expanded="true"]:hover span {
    transform: rotate(180deg);
  }

  .text-link:hover,
  .text-link:focus-visible {
    opacity: .7;
  }

  .button-inverse:hover,
  .button-inverse:focus-visible {
    background: var(--soft-purple);
    border-color: var(--soft-purple);
    box-shadow: 0 12px 24px rgba(8, 8, 8, .18);
  }

  .why-photo:hover {
    box-shadow: 0 18px 40px rgba(8, 8, 8, .16);
  }

  .reason-list li:hover {
    opacity: 1;
  }

  .reason-list li:hover h3 {
    color: var(--purple);
  }

  .project-card:hover {
    box-shadow: 0 18px 40px rgba(8, 8, 8, .18);
    filter: saturate(1.07);
  }

  .project-card:hover::before {
    transform: scale(1.065);
  }

  .project-card:hover::after {
    background: linear-gradient(180deg,
      rgba(0, 0, 0, .18) 0%,
      rgba(0, 0, 0, .42) 34%,
      rgba(0, 0, 0, .86) 70%,
      rgba(0, 0, 0, .97) 100%);
  }

  .cta:hover {
    background-size: auto, cover;
  }

  .cta:hover::before {
    transform: scale(1.065);
  }

  blockquote:hover,
  .process-step:hover {
    box-shadow: 0 16px 32px rgba(8, 8, 8, .12);
  }

  .footer-grid a:hover,
  .footer-grid a:focus-visible {
    opacity: .72;
  }
}

.copyright {
  margin-top: 42px;
  color: #e6e3ff;
  font-size: var(--text-s);
  font-weight: var(--subline-weight);
}

@media (max-width: 900px) {
  .container,
  .section-note {
    width: min(100% - 32px, var(--container));
  }

  .section-note {
    margin-top: 48px;
  }

  /* Die Kopfzeile liegt durchsichtig über der Verlaufsgrafik – kein eigener
     Balken, der die Grafik oben abschneidet. Erst beim Scrollen legt sie sich
     in Papierfarbe hinterlegt über den Inhalt. Den Zustandswechsel setzt
     script.js über die Klasse header-stuck.

     Nur auf der Startseite: Die Unterseiten geben dem Header über
     .page-referenz einen eigenen Platz im Fluss. */
  body:not(.page-referenz) .site-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    max-width: none;
    padding: 12px 16px;
    transform: none;
    background: transparent;
    transition: background .2s ease, box-shadow .2s ease;
  }

  /* Auch bei aufgeklapptem Menü, sonst hinge das Menü unter einem
     durchsichtigen Balken.

     Die Selektoren müssen dieselbe Verschachtelung tragen wie die Regel oben,
     sonst gewinnt dort „transparent“ über die höhere Spezifität. */
  body.header-stuck:not(.page-referenz) .site-header,
  body.nav-is-open:not(.page-referenz) .site-header {
    background: var(--paper);
    box-shadow: 0 6px 20px rgba(8, 8, 8, .09);
  }

  /* Kleiner als auf dem Desktop – in voller Größe dominiert die Wortmarke
     die schmale Zeile. */
  .brand-logo {
    width: 98px;
    height: 26px;
  }

  .main-nav {
    gap: 18px;
    font-size: 12px;
  }

  .nav-toggle {
    display: flex;
    /* 44px ist die kleinste Fläche, die sich mit dem Daumen zuverlässig
       treffen lässt. */
    width: 44px;
    height: 44px;
    order: 3;
  }

  .main-nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: none;
    padding: 12px 24px 16px;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
    border-radius: 14px;
    background: var(--paper);
    box-shadow: 0 18px 44px rgba(8, 8, 8, .14);
    font-size: var(--text-ui);
  }

  /* Im aufgeklappten Menü zählt die ganze Zeile als Trefferfläche, nicht nur
     die Höhe der Schrift. Der Text selbst misst nur rund 20px. */
  .main-nav > a {
    display: flex;
    min-height: 48px;
    align-items: center;
  }

  .main-nav > .nav-cta {
    justify-content: center;
    margin: 10px 0 6px;
    min-height: 46px;
  }

  .main-nav .language {
    min-height: 44px;
    align-items: center;
    font-size: var(--text-ui);
  }

  .main-nav .language a,
  .main-nav .language b {
    display: flex;
    min-width: 32px;
    min-height: 44px;
    align-items: center;
  }

  .nav-toggle[aria-expanded="true"] + .main-nav {
    display: flex;
  }

  /* Platz für die fixierte Kopfzeile plus Luft zur Headline. */
  .hero {
    min-height: auto;
    padding-top: 118px;
  }

  /* Subline dichter an die Headline – die beiden gehören zusammen. */
  .hero h1 {
    margin-bottom: 26px;
  }

  .trusted {
    padding: 30px 0 60px;
  }

  /* Etwas kleiner als zuvor, dafür ohne gedeckelten Einzug: „Presentation“
     steht damit bündig unter „External“, genau wie auf dem Desktop. Der Wert
     ist so gewählt, dass die längste Zeile selbst bei 320px Breite noch in
     den Container passt. */
  .hero h1 {
    font-size: clamp(34px, 10vw, 78px);
  }

  .hero p {
    font-size: 18px;
  }

  .pain-grid,
  .quote-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  /* Untereinander gelesen gibt es keinen Grund mehr, alle Karten auf die Höhe
     der längsten zu zwingen. Nebeneinander sorgt das für eine ruhige Kante,
     einspaltig nur für Leerraum unter den kurzen Zitaten. */
  .quote-grid {
    grid-auto-rows: auto;
    gap: 12px;
  }

  blockquote {
    min-height: 0;
    padding: 22px 24px 20px;
  }


  /* Statt des Laufbands das ruhige Raster. */
  .logo-marquee {
    display: none;
  }

  .logo-grid {
    display: grid;
    margin: 30px 0 0;
    padding: 0;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    list-style: none;
  }

  /* Zwölf Marken mit völlig unterschiedlichem Charakter – Groteske,
     Schreibschrift, gerahmte Bildzeichen – flimmern nebeneinander. Jede in
     eine eigene Fläche zu setzen, fängt das ab: Das Auge folgt der ruhigen
     Kante des Rasters statt den Konturen der Logos. Gleiches Muster wie bei
     den Prozessschritten. */
  .logo-grid li {
    display: flex;
    min-height: 82px;
    padding: 14px 12px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--white);
  }

  /* Die Maße stehen als width/height-Attribut im HTML und sind über die
     bedruckte Fläche ausgeglichen – jede Marke belegt optisch gleich viel
     Raum, unabhängig vom Seitenverhältnis.

     Kein width im CSS: „width: auto“ würde die Attribute übersteuern und auf
     die tatsächliche Pixelbreite der Datei zurückfallen. WMF käme dann mit
     219px statt 22px und würde die Spalte sprengen. height: auto bleibt als
     Sicherung, damit das Verhältnis stimmt, falls max-width doch einmal
     greift. */
  /* Auf Weiß statt auf Papier – die Logos vertragen etwas mehr Deckkraft,
     ohne aufdringlich zu werden. */
  .logo-grid img {
    max-width: 100%;
    height: auto;
    filter: grayscale(1);
    opacity: .86;
  }

  .pain-card {
    min-height: 380px;
  }

  .pain-card span,
  .project-card span {
    letter-spacing: .34em;
  }

  .pain-card p {
    opacity: 1;
    transform: none;
  }

  .services h2,
  .why-copy h2 {
    font-size: clamp(36px, 9.4vw, 56px);
  }

  /* Kleiner gesetzt, damit zwischen Text und Pfeilkreis Luft bleibt. */
  .service-row {
    min-height: 78px;
    gap: 18px;
    font-size: clamp(19px, 5.4vw, 30px);
  }

  .service-row span {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-width: 2px;
    font-size: 16px;
  }

  /* Auf dem Desktop trennen die großzügigen Abstände vier Punkte, die
     nebeneinander wirken. Untereinander gelesen wird daraus Leerlauf. */
  .reason-list li {
    padding: 26px 0 28px;
  }

  .why-grid,
  .project-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* Auf den drei Kacheln bleiben Kategorie und Titel. Der Fließtext darunter
     wiederholt, was die Detailseite ohnehin ausführlich erzählt, und drückt
     die Kacheln unnötig in die Höhe. */
  .project-card p {
    display: none;
  }

  /* Der großzügige Innenabstand der Desktop-Fassung frisst auf schmalen
     Geräten zu viel von der Textbreite. */
  .project-card-main {
    padding: 0 0 26px 22px;
  }

  .project-card-small {
    padding: 0 0 22px 22px;
  }

  .why-grid {
    padding-bottom: 0;
  }

  .why-photo {
    position: relative;
    top: auto;
    width: 100%;
    height: 440px;
  }

  .project-grid {
    grid-template-rows: 360px 260px 260px;
  }

  .project-card-main {
    grid-row: auto;
  }

  .footer-grid {
    gap: 28px;
  }

  .footer-logo {
    width: 206px;
    height: 55px;
  }
}

@media (max-width: 520px) {
  .section-pad {
    padding: 56px 0;
  }

  /* Der Hero trägt ebenfalls .section-pad. Ohne diese Wiederholung würde die
     Regel darüber den Platz für die fixierte Kopfzeile wieder einkassieren –
     die Kurzform padding setzt auch padding-top. */
  .hero {
    padding-top: 110px;
    padding-bottom: 56px;
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .realities h2,
  .projects h2,
  .testimonials h2,
  .services h2,
  .why-copy h2,
  .cta h2 {
    font-size: 36px;
  }

  .pain-grid {
    margin-top: 44px;
  }

  .reason-list h3 {
    font-size: var(--h3-size);
  }

  /* Der Preis-Anker ist der einzige Ort mit einem vollbreiten Button mitten
     im Fließtext – auf kleinen Geräten braucht er etwas mehr Abstand. */
  .founder-note {
    margin-top: 28px;
  }
}

/* Nutzer, die im Betriebssystem reduzierte Bewegung eingestellt haben,
   bekommen keine Endlos-Animation und keine Übergänge. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .logo-track {
    animation: none;
    transform: none;
  }

  .logo-marquee {
    overflow-x: auto;
    mask-image: none;
    -webkit-mask-image: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ---------------------------------------------------------------- Cookie-Consent */

.consent {
  position: fixed;
  z-index: 200;
  inset: 0;
  display: flex;
  padding: 24px;
  align-items: flex-end;
  justify-content: center;
  background: rgba(8, 8, 8, .38);
}

.consent[hidden] {
  display: none;
}

.consent-box {
  width: min(660px, 100%);
  max-height: calc(100vh - 48px);
  padding: 30px 32px 26px;
  overflow-y: auto;
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 26px 60px rgba(8, 8, 8, .28);
}

.consent-title {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: var(--h2-weight);
  line-height: 1.2;
}

.consent-text {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: var(--text-m);
  font-weight: var(--subline-weight);
  line-height: 1.5;
}

/* Ablehnen muss genauso prominent sein wie Akzeptieren – gleiche Größe,
   gleiche Ebene, kein abgeschwächter Kontrast. */
.consent-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

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

.consent-details {
  margin-top: 20px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.consent-details summary {
  color: var(--purple);
  cursor: pointer;
  font-size: var(--text-s);
  font-weight: var(--label-weight);
}

.consent-list {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.consent-list li + li {
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.consent-row {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  justify-content: space-between;
  color: var(--muted);
  font-size: var(--text-s);
  line-height: 1.45;
}

.consent-row b {
  display: block;
  color: var(--ink);
}

.consent-row input {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  accent-color: var(--purple);
  cursor: pointer;
}

.consent-row input:disabled {
  cursor: default;
  opacity: .55;
}

.consent-save {
  width: 100%;
  margin-top: 20px;
}

.consent-legal {
  margin: 20px 0 0;
  color: var(--muted);
  font-size: var(--text-s);
}

.consent-legal a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 520px) {
  .consent {
    padding: 0;
    align-items: flex-end;
  }

  .consent-box {
    max-height: 88vh;
    border-radius: 16px 16px 0 0;
  }

  .consent-actions {
    grid-template-columns: 1fr;
  }
}

@media (hover: hover) and (pointer: fine) {
  .button-outline:hover,
  .button-outline:focus-visible {
    background: var(--soft-purple);
  }
}

/* --------------------------------------------- Referenz-Kacheln: echte Projektbilder
   Als CSS-Klassen statt Inline-Styles, damit ein WebP mit JPG-Fallback möglich ist. */

.ref-card-haufe   { background-image: url("assets/ref-haufe-master.jpg"); }
.ref-card-eurorad { background-image: url("assets/ref-eurorad-sales-deck.jpg"); }
.ref-card-bil     { background-image: url("assets/ref-blue-ice-labs.jpg"); }

@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
  .ref-card-haufe {
    background-image: image-set(url("assets/ref-haufe-master.webp") type("image/webp"),
                                url("assets/ref-haufe-master.jpg") type("image/jpeg"));
  }

  .ref-card-eurorad {
    background-image: image-set(url("assets/ref-eurorad-sales-deck.webp") type("image/webp"),
                                url("assets/ref-eurorad-sales-deck.jpg") type("image/jpeg"));
  }

  .ref-card-bil {
    background-image: image-set(url("assets/ref-blue-ice-labs.webp") type("image/webp"),
                                url("assets/ref-blue-ice-labs.jpg") type("image/jpeg"));
  }
}

/* --------------------------------------------- Pain-Kacheln: Hintergrundmotive
   Ebenfalls als CSS-Klassen. Inline-Styles im HTML brachen auf der englischen
   Seite, weil ein relativer Pfad dort zu /en/assets/... aufgelöst wird. */

.card-pain-storyline { background-image: url("assets/pain-storyline.jpg"); }
.card-pain-design { background-image: url("assets/pain-design.jpg"); }
.card-pain-templates { background-image: url("assets/pain-templates.jpg"); }
.card-pain-training { background-image: url("assets/pain-training.jpg"); }

@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
  .card-pain-storyline {
    background-image: image-set(url("assets/pain-storyline.webp") type("image/webp"),
                                url("assets/pain-storyline.jpg") type("image/jpeg"));
  }

  .card-pain-design {
    background-image: image-set(url("assets/pain-design.webp") type("image/webp"),
                                url("assets/pain-design.jpg") type("image/jpeg"));
  }

  .card-pain-templates {
    background-image: image-set(url("assets/pain-templates.webp") type("image/webp"),
                                url("assets/pain-templates.jpg") type("image/jpeg"));
  }

  .card-pain-training {
    background-image: image-set(url("assets/pain-training.webp") type("image/webp"),
                                url("assets/pain-training.jpg") type("image/jpeg"));
  }

}