/* ==========================================================================
   GROWIT — Charakter-Layer
   --------------------------------------------------------------------------
   Problem: die fünf Leistungsseiten waren baugleich. Gleicher Kopf, gleiche
   Vergleichsspalten, gleiche Kachelraster — nur andere Wörter. Wer zwei
   davon gesehen hat, hat alle gesehen.

   Idee: jede Leistung bekommt die Form ihres eigenen Gegenstands.
   Strategie liest sich wie eine Bauzeichnung, die Website wie ein Gerät,
   SEO wie eine Ergebnisliste, Social wie ein laufender Feed, das 3D-Modell
   wie eine Kinoleinwand. Die Palette bleibt in den Growit-Blautönen, aber
   jede Seite verschiebt sie ein Stück in ihre eigene Richtung.

   Alles hier hängt an body[data-charakter]. Seiten ohne dieses Attribut
   bleiben unverändert.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0 · Paletten — fünf Verschiebungen innerhalb derselben Familie
   -------------------------------------------------------------------------- */
body[data-charakter] {
  --ch-linie: rgba(40, 15, 145, .12);
  --ch-linie-stark: rgba(40, 15, 145, .2);
  --ch-glas: rgba(255, 255, 255, .74);
}

/* Strategie — Blaupause: kühl, technisch, wenig Sättigung */
body[data-charakter="riss"] {
  --ch-ton: #1B0A66;
  --ch-akzent: #4A63E8;
  --ch-hell: #8FA6FF;
  --ch-grund: #E9EEFF;
  background: linear-gradient(180deg, #EDF1FF 0%, #E4EBFF 42%, #E9F0FF 100%);
}

/* Website — Royal: das satteste Blau, wie ein aktiver Bildschirm */
body[data-charakter="geraet"] {
  --ch-ton: #280F91;
  --ch-akzent: #5271FF;
  --ch-hell: #9DB2FF;
  --ch-grund: #E7F0FF;
  background: linear-gradient(180deg, #EAF3FF 0%, #DFEBFF 46%, #EAF4FF 100%);
}

/* SEO — Eis: kälter, klarer, näher am Cyan */
body[data-charakter="leiter"] {
  --ch-ton: #103A6E;
  --ch-akzent: #0FB9CE;
  --ch-hell: #7FE0EE;
  --ch-grund: #E2F5FA;
  background: linear-gradient(180deg, #E7F7FB 0%, #DCF0F8 44%, #E9F8FC 100%);
}

/* Social — Violett-Blau: wärmer, lauter, nah am Feed */
body[data-charakter="feed"] {
  --ch-ton: #2A1180;
  --ch-akzent: #6A4BFF;
  --ch-hell: #B4A2FF;
  --ch-grund: #EDE9FF;
  background: linear-gradient(180deg, #EFEBFF 0%, #E7E2FF 44%, #EFECFF 100%);
}

/* 3D — Leinwand: hell, damit der dunkle Kinoabschnitt umso härter trifft */
body[data-charakter="kino"] {
  --ch-ton: #14235C;
  --ch-akzent: #3E8FE0;
  --ch-hell: #9CCBF5;
  --ch-grund: #E6F2FD;
  background: linear-gradient(180deg, #EAF4FE 0%, #DFEDFC 44%, #ECF5FE 100%);
}

/* Der gemeinsame Farbverlaufs-Hintergrund der alten Ebene würde die neuen
   Paletten überdecken. */
body[data-charakter] .lbg { display: none; }

/* Eyebrow und Akzentlinien folgen dem Charakter, nicht mehr dem Einheitston */
body[data-charakter] .eyebrow { color: var(--ch-akzent); }
body[data-charakter] .text-grad {
  background: linear-gradient(104deg, var(--ch-akzent), var(--ch-hell));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* --------------------------------------------------------------------------
   1 · Der zentrierte Kopf
   Auf der Strategieseite stand die Überschrift linksbündig unter einer
   einzelnen Zeile — das wirkte, als wäre rechts etwas abgefallen. Ein
   mittiger Satz braucht keine zweite Spalte, um im Gleichgewicht zu sein.
   -------------------------------------------------------------------------- */
.ch-mitte { text-align: center; }
.ch-mitte .crumbs { justify-content: center; }
.ch-mitte h1,
.ch-mitte .lead { margin-inline: auto; }
.ch-mitte .lead { max-width: 62ch; }
.ch-mitte .ldx-hero__cta,
.ch-mitte .lx-badges { justify-content: center; }
.ch-mitte .eyebrow { justify-content: center; }

/* Die Maßlinie unter der Überschrift: zwei Endmarken und eine Strecke
   dazwischen, wie eine Bemaßung in der Zeichnung. Sie zieht sich beim
   Erscheinen auf ihre volle Länge. */
.ch-mass {
  position: relative;
  width: min(360px, 62%);
  height: 22px;
  margin: clamp(20px, 2.6vw, 30px) auto clamp(24px, 3vw, 34px);
}
.ch-mass::before,
.ch-mass::after {
  content: "";
  position: absolute;
  top: 3px; bottom: 3px;
  width: 1.5px;
  background: var(--ch-akzent);
  opacity: .55;
}
.ch-mass::before { left: 0; }
.ch-mass::after { right: 0; }
.ch-mass i {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1.5px;
  background: linear-gradient(90deg,
    var(--ch-akzent), var(--ch-hell), var(--ch-akzent));
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform 1.1s var(--ease, cubic-bezier(.22,1,.36,1)) .2s;
}
.ch-mass.in i { transform: scaleX(1); }
.ch-mass b {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  padding: 0 12px;
  background: var(--ch-grund);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ch-akzent);
}

/* --------------------------------------------------------------------------
   2 · STRATEGIE — die Positionierungs-Matrix, die sich selbst zeichnet
   Die alte Seite behauptete „wir finden Ihre Lücke" und zeigte vier Punkte
   in einem Kasten. Hier entsteht die Zeichnung tatsächlich: erst die Achsen,
   dann der Wettbewerb, zuletzt die freie Stelle.
   -------------------------------------------------------------------------- */
.ch-riss {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4.4vw, 68px);
  align-items: center;
}
.ch-riss__text h3 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.16;
  color: var(--ch-ton);
  margin: 0 0 14px;
}
.ch-riss__text p { color: var(--muted); line-height: 1.72; margin: 0 0 18px; }

.ch-riss__legende { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ch-riss__legende li {
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 13px;
  align-items: start;
  font-size: .95rem;
  color: var(--ink);
}
.ch-riss__legende i {
  width: 11px; height: 11px;
  border-radius: 50%;
  margin-top: 6px;
  background: var(--ch-linie-stark);
}
.ch-riss__legende li:last-child i {
  background: var(--ch-akzent);
  box-shadow: 0 0 0 5px rgba(74, 99, 232, .16);
}

.ch-plan {
  position: relative;
  aspect-ratio: 1 / .92;
  border-radius: var(--r-lg);
  background:
    linear-gradient(rgba(40, 15, 145, .05) 1px, transparent 1px) 0 0 / 100% 11.11%,
    linear-gradient(90deg, rgba(40, 15, 145, .05) 1px, transparent 1px) 0 0 / 11.11% 100%,
    linear-gradient(160deg, #FFFFFF, #F4F7FF);
  box-shadow: 0 0 0 1px var(--ch-linie), 0 40px 80px -60px rgba(27, 10, 102, .6);
  overflow: hidden;
}
.ch-plan svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Achsen: zeichnen sich von der Mitte nach außen */
.ch-plan__achse {
  fill: none;
  stroke: var(--ch-ton);
  stroke-width: 1.4;
  stroke-opacity: .38;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  transition: stroke-dashoffset 1s var(--ease, cubic-bezier(.22,1,.36,1));
}
.ch-plan.in .ch-plan__achse { stroke-dashoffset: 0; }
.ch-plan.in .ch-plan__achse:nth-of-type(2) { transition-delay: .16s; }

.ch-plan__pfeil { fill: var(--ch-ton); fill-opacity: .38; }

.ch-plan__beschriftung {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  fill: var(--ch-ton);
  fill-opacity: .5;
  opacity: 0;
  transition: opacity .5s ease .5s;
}
.ch-plan.in .ch-plan__beschriftung { opacity: 1; }

/* Wettbewerber: erscheinen einer nach dem anderen, grau und rund */
.ch-plan__punkt {
  fill: #FFFFFF;
  stroke: var(--ch-linie-stark);
  stroke-width: 1.6;
  opacity: 0;
  transform: scale(.4);
  transform-origin: center;
  transform-box: fill-box;
  transition: opacity .4s ease, transform .5s var(--ease, cubic-bezier(.22,1,.36,1));
}
.ch-plan.in .ch-plan__punkt { opacity: 1; transform: scale(1); }
.ch-plan.in .ch-plan__punkt:nth-of-type(1) { transition-delay: .62s; }
.ch-plan.in .ch-plan__punkt:nth-of-type(2) { transition-delay: .74s; }
.ch-plan.in .ch-plan__punkt:nth-of-type(3) { transition-delay: .86s; }
.ch-plan.in .ch-plan__punkt:nth-of-type(4) { transition-delay: .98s; }
.ch-plan.in .ch-plan__punkt:nth-of-type(5) { transition-delay: 1.1s; }

.ch-plan__name {
  font-size: 10.5px;
  font-weight: 600;
  fill: var(--muted, #59627F);
  opacity: 0;
  transition: opacity .4s ease 1.2s;
}
.ch-plan.in .ch-plan__name { opacity: 1; }

/* Die Lücke: ein gestrichelter Kreis, der sich einmal zusammenzieht */
.ch-plan__luecke {
  fill: rgba(74, 99, 232, .09);
  stroke: var(--ch-akzent);
  stroke-width: 1.6;
  stroke-dasharray: 5 5;
  opacity: 0;
  transform: scale(1.9);
  transform-origin: center;
  transform-box: fill-box;
  transition: opacity .5s ease 1.35s,
              transform .8s var(--ease, cubic-bezier(.22,1,.36,1)) 1.35s;
}
.ch-plan.in .ch-plan__luecke { opacity: 1; transform: scale(1); }

.ch-plan__sie {
  fill: var(--ch-akzent);
  opacity: 0;
  transform: scale(.2);
  transform-origin: center;
  transform-box: fill-box;
  transition: opacity .4s ease 1.85s,
              transform .6s var(--ease, cubic-bezier(.22,1,.36,1)) 1.85s;
}
.ch-plan.in .ch-plan__sie { opacity: 1; transform: scale(1); }

.ch-plan__sieText {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .02em;
  fill: var(--ch-ton);
  opacity: 0;
  transition: opacity .4s ease 2.05s;
}
.ch-plan.in .ch-plan__sieText { opacity: 1; }

@media (max-width: 900px) {
  .ch-riss { grid-template-columns: 1fr; }
  .ch-plan { max-width: 460px; margin-inline: auto; }
}

/* --------------------------------------------------------------------------
   3 · WEBSITE — das Gerät bleibt, der Text wandert
   Genau die Bewegung, die auf einer Projekt-Website zählt: derselbe Auftritt
   auf jeder Größe. Der Rahmen klebt am Bildschirm und schrumpft, während
   links die Kapitel durchlaufen.
   -------------------------------------------------------------------------- */
.ch-halt {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(30px, 5vw, 80px);
  align-items: start;
}
.ch-halt__spalte { display: grid; gap: clamp(64px, 22vh, 190px); padding: 12vh 0; }

.ch-halt__kapitel {
  opacity: .22;
  transform: translateY(20px);
  transition: opacity .55s var(--ease, cubic-bezier(.22,1,.36,1)),
              transform .55s var(--ease, cubic-bezier(.22,1,.36,1));
}
.ch-halt__kapitel.is-nah { opacity: 1; transform: none; }
.ch-halt__kapitel span {
  display: inline-block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ch-akzent);
  margin-bottom: 12px;
}
.ch-halt__kapitel h3 {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.18;
  color: var(--ch-ton);
  margin: 0 0 12px;
}
.ch-halt__kapitel p { color: var(--muted); line-height: 1.75; margin: 0; }

.ch-halt__buehne {
  position: sticky;
  top: 16vh;
  height: 68vh;
  display: grid;
  place-items: center;
  /* Die Groessenaenderung des Geraets bleibt in der Buehne, statt bei
     jedem Schritt die ganze Seite neu rechnen zu lassen. */
  contain: layout;
}

/* Der Rahmen. Breite und Radius kommen aus --g (0 = Desktop, 1 = Handy). */
.ch-geraet {
  --g: 0;
  position: relative;
  width: calc(100% - (100% - 190px) * var(--g));
  aspect-ratio: calc(16 - 8.2 * var(--g)) / calc(10 + .5 * var(--g));
  border-radius: calc(14px + 22px * var(--g));
  padding: calc(9px + 5px * var(--g));
  background: linear-gradient(150deg, #F7F9FF, #DCE5FA);
  box-shadow:
    0 0 0 1px rgba(40, 15, 145, .1),
    0 46px 90px -56px rgba(40, 15, 145, .62);
  transition: width .7s var(--ease, cubic-bezier(.22,1,.36,1)),
              aspect-ratio .7s var(--ease, cubic-bezier(.22,1,.36,1)),
              border-radius .7s var(--ease, cubic-bezier(.22,1,.36,1)),
              padding .7s var(--ease, cubic-bezier(.22,1,.36,1));
}
.ch-geraet__glas {
  position: relative;
  height: 100%;
  border-radius: calc(7px + 17px * var(--g));
  overflow: hidden;
  background: #0B1030;
  transition: border-radius .7s var(--ease, cubic-bezier(.22,1,.36,1));
}
.ch-geraet__glas img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% calc(0% + 26% * var(--g));
  transition: object-position .7s var(--ease, cubic-bezier(.22,1,.36,1));
}
/* Der Lichtstreifen, der über das Glas läuft — ein Bildschirm, der an ist */
.ch-geraet__glanz {
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(112deg,
    rgba(255, 255, 255, 0) 34%,
    rgba(255, 255, 255, .16) 48%,
    rgba(255, 255, 255, 0) 62%);
  transform: translateX(-40%);
}
@media (prefers-reduced-motion: no-preference) {
  .ch-geraet__glanz { animation: ch-glanz 7s var(--ease, ease-in-out) infinite; }
}
@keyframes ch-glanz {
  0%, 62% { transform: translateX(-60%); }
  100%    { transform: translateX(60%); }
}

/* Fluessiger Lauf (charakter.js setzt die Klasse): dort folgt --g dem
   Scroll unmittelbar — die .7s-Uebergaenge wuerden nur hinterherziehen. */
.ch-geraet--fluss,
.ch-geraet--fluss .ch-geraet__glas,
.ch-geraet--fluss .ch-geraet__glas img { transition: none; }

/* Die Größenmarke unter dem Gerät */
.ch-geraet__marke {
  position: absolute;
  left: 50%; bottom: calc(-38px - 6px * var(--g));
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 15px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1px var(--ch-linie);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ch-ton);
  white-space: nowrap;
}
.ch-geraet__marke i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ch-akzent);
}

@media (max-width: 900px) {
  .ch-halt { grid-template-columns: 1fr; }
  .ch-halt__buehne { position: static; height: auto; order: -1; margin-bottom: 34px; }
  .ch-halt__spalte { gap: 44px; padding: 0; }
  .ch-halt__kapitel { opacity: 1; transform: none; }
  .ch-geraet { --g: 0 !important; }
  .ch-geraet__marke { display: none; }
}

/* --------------------------------------------------------------------------
   4 · SEO — die Ergebnisliste, in der Ihr Eintrag nach oben klettert
   Kein Diagramm über Sichtbarkeit, sondern das Ding selbst: zehn Zeilen,
   und eine davon bewegt sich.
   -------------------------------------------------------------------------- */
.ch-serp {
  --sprung: 0;
  position: relative;
  max-width: 760px;
  margin-inline: auto;
  padding: clamp(16px, 2vw, 24px);
  border-radius: var(--r);
  background: rgba(255, 255, 255, .8);
  backdrop-filter: blur(12px);
  box-shadow: 0 0 0 1px var(--ch-linie), 0 44px 90px -64px rgba(16, 58, 110, .55);
}
.ch-serp__leiste {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 16px;
  margin-bottom: 16px;
  border-radius: 999px;
  background: rgba(15, 185, 206, .08);
  box-shadow: 0 0 0 1px rgba(15, 185, 206, .18);
  font-size: .92rem;
  color: var(--ch-ton);
}
.ch-serp__leiste svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--ch-akzent); }
.ch-serp__leiste b { font-weight: 600; }

.ch-serp__liste { display: grid; gap: 8px; }

.ch-treffer {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .5);
  transition: transform .8s var(--ease, cubic-bezier(.22,1,.36,1)),
              box-shadow .5s ease, background .5s ease;
}
.ch-treffer__rang {
  font-size: .95rem;
  font-weight: 800;
  color: var(--light, #8A93AE);
  text-align: center;
}
.ch-treffer__zeile b {
  display: block;
  font-size: .97rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 4px;
}
.ch-treffer__zeile span {
  display: block;
  height: 7px;
  border-radius: 4px;
  background: rgba(40, 15, 145, .07);
}
.ch-treffer__zeile span + span { margin-top: 5px; width: 72%; }

/* Der eigene Eintrag. Er startet unten und schiebt sich nach oben — die
   Zeilen darüber weichen aus, statt zu verschwinden. */
.ch-treffer--sie {
  position: relative;
  z-index: 2;
  background: #FFFFFF;
  box-shadow: 0 0 0 1.5px rgba(15, 185, 206, .5), 0 22px 44px -26px rgba(16, 58, 110, .5);
  transform: translateY(calc(var(--sprung) * -1px));
}
.ch-treffer--sie .ch-treffer__rang {
  color: #FFFFFF;
  background: linear-gradient(140deg, var(--ch-akzent), #0A7FA8);
  border-radius: 12px;
  padding: 5px 0;
}
.ch-treffer--sie .ch-treffer__zeile b { color: var(--ch-ton); font-weight: 700; }
.ch-treffer--sie .ch-treffer__zeile em {
  display: block;
  font-style: normal;
  font-size: .85rem;
  color: var(--muted);
  line-height: 1.5;
}

.ch-serp__stand {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--ch-linie);
  font-size: .86rem;
  color: var(--muted);
}
/* Die Kennzeile links ist eine Aussage, kein Fließtext — sie darf nicht
   umbrechen. Ohne `flex: none` schrumpft sie als Flex-Element mit und das
   letzte Wort rutscht allein in die zweite Zeile. Die Erklärung rechts
   nimmt stattdessen den Rest der Breite. */
.ch-serp__stand > :first-child { flex: 0 0 auto; white-space: nowrap; }
.ch-serp__stand > :last-child  { flex: 1 1 auto; max-width: 46ch; text-align: right; }
.ch-serp__stand b {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--ch-akzent);
}
/* Auf schmalen Karten passen beide Teile nicht nebeneinander. Dann
   untereinander, beide linksbündig. */
@media (max-width: 720px) {
  .ch-serp__stand { flex-direction: column; align-items: flex-start; gap: 8px; }
  .ch-serp__stand > :last-child { text-align: left; max-width: none; }
}

/* Die Fußnote unter einer Darstellung, die ein Beispiel ist und kein Beleg.
   Sie steht bewusst klein und mittig — sie soll gefunden werden, wenn jemand
   sie sucht, und sonst nicht stören. */
.ch-quelle {
  max-width: 760px;
  margin: clamp(18px, 2.2vw, 26px) auto 0;
  text-align: center;
  font-size: .82rem;
  line-height: 1.62;
  color: var(--light, #8A93AE);
}

/* --------------------------------------------------------------------------
   5 · SOCIAL — der Feed, der nicht stehen bleibt
   Zwei Reihen laufen gegeneinander. Die Seite bewegt sich, auch wenn der
   Leser es nicht tut — das ist die Eigenschaft des Kanals.
   -------------------------------------------------------------------------- */
.ch-feed {
  position: relative;
  margin-inline: calc(50% - 50vw);
  width: 100vw;
  overflow: hidden;
  padding: clamp(8px, 1.4vw, 16px) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.ch-feed__reihe { display: flex; gap: clamp(10px, 1.2vw, 18px); width: max-content; }
.ch-feed__reihe + .ch-feed__reihe { margin-top: clamp(10px, 1.2vw, 18px); }

@media (prefers-reduced-motion: no-preference) {
  .ch-feed__reihe { animation: ch-lauf 54s linear infinite; }
  .ch-feed__reihe--zurueck { animation-duration: 68s; animation-direction: reverse; }
  .ch-feed:hover .ch-feed__reihe { animation-play-state: paused; }
}
@keyframes ch-lauf {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.ch-kachel {
  position: relative;
  flex: 0 0 auto;
  width: clamp(150px, 17vw, 240px);
  aspect-ratio: 9 / 14;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: #0B1030;
  box-shadow: 0 20px 44px -32px rgba(42, 17, 128, .7);
}
.ch-kachel img { width: 100%; height: 100%; object-fit: cover; }
.ch-kachel::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11, 16, 48, 0) 52%, rgba(11, 16, 48, .62) 100%);
}
.ch-kachel b {
  position: absolute;
  left: 13px; right: 13px; bottom: 12px;
  z-index: 2;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.4;
  color: #FFFFFF;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .4);
}

/* Der Zähler daneben: was ein Kanal in einem Jahr wirklich abwirft */
.ch-takt {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  margin-top: clamp(30px, 4vw, 52px);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--ch-linie);
  box-shadow: 0 0 0 1px var(--ch-linie);
}
.ch-takt > div {
  padding: clamp(20px, 2.4vw, 28px);
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(10px);
}
.ch-takt b {
  display: block;
  font-size: clamp(1.7rem, 2.8vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--ch-akzent);
  margin-bottom: 10px;
}
.ch-takt span { display: block; font-size: .9rem; line-height: 1.6; color: var(--muted); }

/* --------------------------------------------------------------------------
   6 · 3D — die Leinwand
   Das Bild steht still, der Text läuft darüber. Genau der Effekt, den ein
   Rundgang durch ein noch nicht gebautes Haus haben soll: man bewegt sich,
   das Gebäude nicht.
   -------------------------------------------------------------------------- */
.ch-kino {
  position: relative;
  margin-inline: calc(50% - 50vw);
  width: 100vw;
  isolation: isolate;
}
.ch-kino__bild {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  z-index: 0;
}
.ch-kino__bild img { width: 100%; height: 100%; object-fit: cover; }
.ch-kino__bild::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(72% 54% at 50% 50%, rgba(9, 14, 40, .5) 0%, rgba(9, 14, 40, 0) 100%),
    linear-gradient(180deg, rgba(9, 14, 40, .76) 0%, rgba(9, 14, 40, .56) 38%,
                            rgba(9, 14, 40, .62) 72%, rgba(9, 14, 40, .88) 100%);
}
.ch-kino__lauf {
  position: relative;
  z-index: 1;
  margin-top: -100vh;
}
.ch-kino__tafel {
  min-height: 92vh;
  display: grid;
  align-content: center;
  max-width: 640px;
  padding: 0 var(--gutter, 22px);
  margin-inline: auto;
  text-align: center;
  color: #FFFFFF;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .8s var(--ease, cubic-bezier(.22,1,.36,1)),
              transform .8s var(--ease, cubic-bezier(.22,1,.36,1));
}
.ch-kino__tafel.in { opacity: 1; transform: none; }
.ch-kino__tafel span {
  display: block;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ch-hell);
  margin-bottom: 16px;
}
.ch-kino__tafel h3 {
  font-size: clamp(1.7rem, 4vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.12;
  margin: 0 0 16px;
  text-wrap: balance;
}
.ch-kino__tafel p {
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  line-height: 1.75;
  color: rgba(255, 255, 255, .82);
  margin: 0;
  text-wrap: pretty;
}
.ch-kino__zahl {
  margin-top: 26px;
  display: flex;
  justify-content: center;
  gap: clamp(20px, 4vw, 52px);
  flex-wrap: wrap;
}
.ch-kino__zahl div { min-width: 120px; }
.ch-kino__zahl b {
  display: block;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -.04em;
  color: #FFFFFF;
}
.ch-kino__zahl em {
  display: block;
  font-style: normal;
  margin-top: 6px;
  font-size: .84rem;
  color: rgba(255, 255, 255, .68);
}

/* Ohne sticky-Unterstützung oder bei reduzierter Bewegung wird daraus eine
   ruhige Bildstrecke — lesbar, nur ohne den Effekt. */
@media (prefers-reduced-motion: reduce) {
  .ch-kino__bild { position: relative; height: 62vh; }
  .ch-kino__lauf { margin-top: 0; }
  .ch-kino__tafel { opacity: 1; transform: none; min-height: 0; padding-block: 12vh; color: var(--ink); }
  .ch-kino__tafel h3 { color: var(--ch-ton); }
  .ch-kino__tafel p { color: var(--muted); }
  .ch-kino__tafel span { color: var(--ch-akzent); }
  .ch-kino__zahl b { color: var(--ch-ton); }
  .ch-kino__zahl em { color: var(--muted); }
}

@media (max-width: 640px) {
  .ch-kino__tafel { min-height: 86vh; }
}

/* --------------------------------------------------------------------------
   7 · Die Galerie, die sich auffächert
   Für Seiten, die Arbeit zeigen statt sie zu beschreiben. Die Bilder liegen
   versetzt, wie auf einem Tisch ausgebreitet.
   -------------------------------------------------------------------------- */
.ch-faecher {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(12px, 1.6vw, 22px);
}
.ch-faecher figure {
  position: relative;
  margin: 0;
  border-radius: var(--r);
  overflow: hidden;
  background: #0B1030;
  box-shadow: 0 30px 62px -46px rgba(40, 15, 145, .8);
}
.ch-faecher img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ch-faecher figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 34px 18px 16px;
  background: linear-gradient(180deg, rgba(11, 16, 48, 0), rgba(11, 16, 48, .78));
  color: #FFFFFF;
}
.ch-faecher figcaption b { display: block; font-size: .98rem; font-weight: 700; }
.ch-faecher figcaption span {
  display: block;
  margin-top: 3px;
  font-size: .84rem;
  color: rgba(255, 255, 255, .74);
}
/* Versatz: groß, hoch, zwei kleine — kein gleichmäßiges Raster */
.ch-faecher > :nth-child(1) { grid-column: span 7; aspect-ratio: 16 / 11; }
.ch-faecher > :nth-child(2) { grid-column: span 5; aspect-ratio: 4 / 5; align-self: start; }
.ch-faecher > :nth-child(3) { grid-column: span 4; aspect-ratio: 1; }
.ch-faecher > :nth-child(4) { grid-column: span 8; aspect-ratio: 16 / 8; }

@media (max-width: 780px) {
  .ch-faecher > * { grid-column: span 12 !important; aspect-ratio: 16 / 10 !important; }
}

/* --------------------------------------------------------------------------
   8 · Der Schnitt — eine Trennung, die keine Kante ist
   Auf allen fünf Seiten dieselbe Rolle: Luft zwischen zwei Charakterstücken,
   ohne dass eine harte Linie entsteht.
   -------------------------------------------------------------------------- */
.ch-schnitt {
  height: clamp(60px, 8vw, 120px);
  background: radial-gradient(60% 100% at 50% 0%,
    rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, 0) 70%);
}

/* --------------------------------------------------------------------------
   9 · Kleine Bildschirme
   -------------------------------------------------------------------------- */
@media (max-width: 520px) {
  .ch-mass { width: min(280px, 78%); }
  .ch-serp { padding: 14px; }
  .ch-treffer { grid-template-columns: 26px 1fr; gap: 10px; padding: 10px; }
}

/* ==========================================================================
   10 · Der Unterschied — vier Seiten, vier Formen
   --------------------------------------------------------------------------
   Bis hierher stand auf vier Leistungsseiten dieselbe Gegenüberstellung: zwei
   Karten, links Kreuze, rechts Haken. Inhaltlich richtig, aber vier Mal die
   gleiche Geste. Jede Seite bekommt jetzt die Form, die zu ihrem Gegenstand
   passt — die Aussage bleibt, das Bild wechselt.
   ========================================================================== */

/* --- 10.1 Strategie · Die Gabelung ---------------------------------------
   Eine Entscheidung, zwei Wege. Der eine Weg ist gestrichelt und verliert
   sich, der andere trägt. Passt zum Riss-Charakter der Seite.
   ------------------------------------------------------------------------ */
.ch-gabel { margin-top: clamp(28px, 4vw, 48px); }

.ch-gabel__start {
  display: flex; flex-direction: column; align-items: center; gap: 0;
}
.ch-gabel__start b {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
  font-size: .92rem; font-weight: 600; color: var(--ch-ton);
}
.ch-gabel__fork { display: block; width: min(560px, 92%); height: auto; margin-top: -1px; }
.ch-gabel__fork path { fill: none; stroke-width: 2; stroke-linecap: round; }
.ch-gabel__fork .f-ohne { stroke: var(--light); stroke-dasharray: 5 7; }
.ch-gabel__fork .f-mit  { stroke: var(--ch-akzent); }

.ch-gabel__wege {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 3.2vw, 44px);
  margin-top: 4px;
}

.ch-weg { padding-left: 26px; position: relative; }
.ch-weg::before {
  content: ""; position: absolute; left: 5px; top: 4px; bottom: 26px;
  width: 2px; border-radius: 2px;
}
.ch-weg--ohne::before {
  background: repeating-linear-gradient(180deg,
    var(--light) 0 5px, transparent 5px 12px);
  opacity: .7;
}
.ch-weg--mit::before {
  background: linear-gradient(180deg, var(--ch-akzent), var(--ch-hell));
}

.ch-weg__tag {
  display: inline-block; margin-bottom: 8px;
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.ch-weg--ohne .ch-weg__tag { color: var(--light); }
.ch-weg--mit  .ch-weg__tag { color: var(--ch-akzent); }

.ch-weg h3 {
  margin: 0 0 16px; font-size: clamp(1.1rem, 2vw, 1.4rem); line-height: 1.25;
  color: var(--ch-ton);
}
.ch-weg--ohne h3 { color: var(--muted); }

.ch-weg ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.ch-weg li {
  position: relative; font-size: .95rem; line-height: 1.5; color: var(--muted);
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.ch-weg li::before {
  content: ""; position: absolute; left: -25px; top: .5em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--light); box-shadow: 0 0 0 4px var(--ch-grund);
}
.ch-weg--mit li { color: var(--ink); }
.ch-weg--mit li::before { background: var(--ch-akzent); }

.ch-gabel.in .ch-weg li { opacity: 1; transform: none; }
.ch-gabel.in .ch-weg li:nth-child(1) { transition-delay: .05s }
.ch-gabel.in .ch-weg li:nth-child(2) { transition-delay: .13s }
.ch-gabel.in .ch-weg li:nth-child(3) { transition-delay: .21s }
.ch-gabel.in .ch-weg li:nth-child(4) { transition-delay: .29s }
.ch-gabel.in .ch-weg li:nth-child(5) { transition-delay: .37s }

.ch-weg__ende {
  margin: 18px 0 0; padding: 12px 16px;
  border-radius: var(--r-sm);
  font-size: .88rem; font-weight: 600; line-height: 1.4;
}
.ch-weg--ohne .ch-weg__ende {
  color: var(--light); border: 1px dashed rgba(138, 147, 174, .5);
}
.ch-weg--mit .ch-weg__ende {
  color: #fff; background: linear-gradient(120deg, var(--ch-ton), var(--ch-akzent));
  box-shadow: var(--sh-sm);
}

@media (max-width: 720px) {
  .ch-gabel__wege { grid-template-columns: 1fr; gap: 28px; }
  .ch-gabel__fork { display: none; }
  .ch-gabel__start { margin-bottom: 22px; }
}

/* --- 10.2 Website · Die Spuren -------------------------------------------
   Kein Karten-Duell, sondern eine Messreihe: fünf Zeilen, links das, was eine
   Vorlage liefert, rechts das, was ein Projektportal liefert. Die Balken
   zeigen den Abstand, bevor man den Text gelesen hat.
   ------------------------------------------------------------------------ */
.ch-tempo { margin-top: clamp(24px, 3.5vw, 40px); }

.ch-tempo__kopf {
  display: grid; grid-template-columns: minmax(120px, 168px) 1fr 1fr;
  gap: clamp(14px, 2.4vw, 32px);
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.ch-tempo__kopf span {
  font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.ch-tempo__kopf span:nth-child(1) { color: transparent }
.ch-tempo__kopf span:nth-child(2) { color: var(--light) }
.ch-tempo__kopf span:nth-child(3) { color: var(--ch-akzent) }

.ch-zeile {
  display: grid; grid-template-columns: minmax(120px, 168px) 1fr 1fr;
  gap: clamp(14px, 2.4vw, 32px);
  align-items: start;
  padding: 18px 0; border-bottom: 1px solid var(--line);
}
.ch-zeile__frage {
  font-size: .9rem; font-weight: 700; color: var(--ch-ton); line-height: 1.35;
}
.ch-zeile__seite p { margin: 10px 0 0; font-size: .92rem; line-height: 1.5; }
.ch-zeile__seite--ohne p { color: var(--muted) }
.ch-zeile__seite--mit  p { color: var(--ink) }

.ch-zeile__balken {
  display: block; height: 6px; border-radius: 6px;
  transform-origin: left center; transform: scaleX(.04);
  transition: transform .9s var(--ease);
}
.ch-zeile__seite--ohne .ch-zeile__balken {
  background: linear-gradient(90deg, rgba(138,147,174,.55), rgba(138,147,174,.18));
}
.ch-zeile__seite--mit .ch-zeile__balken {
  background: linear-gradient(90deg, var(--ch-ton), var(--ch-akzent));
}
.ch-tempo.in .ch-zeile__balken { transform: scaleX(var(--f, 1)); }
.ch-tempo.in .ch-zeile:nth-child(2) .ch-zeile__balken { transition-delay: .06s }
.ch-tempo.in .ch-zeile:nth-child(3) .ch-zeile__balken { transition-delay: .14s }
.ch-tempo.in .ch-zeile:nth-child(4) .ch-zeile__balken { transition-delay: .22s }
.ch-tempo.in .ch-zeile:nth-child(5) .ch-zeile__balken { transition-delay: .30s }
.ch-tempo.in .ch-zeile:nth-child(6) .ch-zeile__balken { transition-delay: .38s }

@media (max-width: 760px) {
  .ch-tempo__kopf { display: none }
  .ch-zeile { grid-template-columns: 1fr; gap: 12px; padding: 20px 0; }
  .ch-zeile__seite { position: relative; padding-left: 0 }
  .ch-zeile__seite::before {
    content: attr(data-tag); display: block; margin-bottom: 8px;
    font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  }
  .ch-zeile__seite--ohne::before { color: var(--light) }
  .ch-zeile__seite--mit::before  { color: var(--ch-akzent) }
}

/* --- 10.3 Social · Die Kurve ---------------------------------------------
   Sichtbarkeit ist kein Zustand, sondern ein Verlauf. Zwei Linien zeichnen
   sich beim Scrollen: eine, die nach jedem Post wieder abfällt, und eine,
   die Stufe für Stufe steigt.
   ------------------------------------------------------------------------ */
.ch-kurve {
  margin-top: clamp(24px, 3.5vw, 40px);
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(18px, 3vw, 34px);
  box-shadow: var(--sh-sm);
}
.ch-kurve svg { display: block; width: 100%; height: auto; overflow: visible; }
.ch-kurve__raster line { stroke: var(--line); stroke-width: 1; }
.ch-kurve__achse { fill: var(--light); font-size: 13px; font-weight: 600; letter-spacing: .06em; }

.ch-kurve__linie {
  fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1400; stroke-dashoffset: 1400;
  transition: stroke-dashoffset 2.2s var(--ease);
}
.ch-kurve__linie--ohne { stroke: var(--light); stroke-width: 2.5; stroke-dasharray: 1400 }
.ch-kurve__linie--mit  { stroke: var(--ch-akzent); transition-delay: .35s }
.ch-kurve.in .ch-kurve__linie { stroke-dashoffset: 0 }

.ch-kurve__flaeche {
  fill: var(--ch-akzent); opacity: 0;
  transition: opacity 1.2s var(--ease) 1.4s;
}
.ch-kurve.in .ch-kurve__flaeche { opacity: .09 }

.ch-kurve__legende {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
}
.ch-kurve__legende span {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .86rem; font-weight: 600; color: var(--muted);
}
.ch-kurve__legende i {
  width: 22px; height: 3px; border-radius: 3px; background: var(--light);
}
.ch-kurve__legende span.is-mit { color: var(--ch-ton) }
.ch-kurve__legende span.is-mit i { background: var(--ch-akzent) }

.ch-gegen {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 3vw, 42px);
  margin-top: clamp(22px, 3vw, 36px);
}
.ch-gegen h3 {
  margin: 0 0 14px; font-size: 1.05rem; color: var(--ch-ton);
  padding-bottom: 10px; border-bottom: 2px solid var(--line);
}
.ch-gegen ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.ch-gegen li {
  position: relative; padding-left: 20px;
  font-size: .93rem; line-height: 1.5; color: var(--muted);
}
.ch-gegen li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 7px; height: 2px; border-radius: 2px; background: var(--light);
}
.ch-gegen > div:last-child h3 { border-bottom-color: var(--ch-akzent) }
.ch-gegen > div:last-child li { color: var(--ink) }
.ch-gegen > div:last-child li::before { background: var(--ch-akzent); height: 7px; border-radius: 50% }

@media (max-width: 720px) {
  .ch-gegen { grid-template-columns: 1fr; gap: 26px; }
}

/* --- 10.4 3D · Die Fragen -------------------------------------------------
   Auf der 3D-Seite geht es nicht um Funktionen, sondern um Fragen, die im
   Kopf entstehen. Jede Zeile stellt eine — und zeigt, was der Plan darauf
   antwortet und was das Modell antwortet.
   ------------------------------------------------------------------------ */
.ch-fragen {
  margin-top: clamp(24px, 3.5vw, 40px);
  border-top: 1px solid var(--line);
}
.ch-frage {
  display: grid; grid-template-columns: 1.05fr 1fr 1fr;
  gap: clamp(12px, 2.4vw, 34px);
  align-items: baseline;
  padding: clamp(18px, 2.6vw, 28px) 0;
  border-bottom: 1px solid var(--line);
}
.ch-frage__q {
  margin: 0; font-size: clamp(1.02rem, 1.8vw, 1.3rem); line-height: 1.3;
  font-weight: 600; color: var(--ch-ton);
}
.ch-frage__a { margin: 0; font-size: .93rem; line-height: 1.55; }
.ch-frage__a b {
  display: block; margin-bottom: 5px;
  font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.ch-frage__a--plan { color: var(--muted) }
.ch-frage__a--plan b { color: var(--light) }
.ch-frage__a--modell { color: var(--ink) }
.ch-frage__a--modell b { color: var(--ch-akzent) }

/* Auf dem Tablet werden drei Spalten zu eng. Die Frage rückt dann über die
   beiden Antworten — die Gegenüberstellung bleibt, der Satz bekommt Luft. */
@media (max-width: 900px) {
  .ch-frage { grid-template-columns: 1fr 1fr; gap: 12px clamp(16px, 3vw, 34px); }
  .ch-frage__q { grid-column: 1 / -1; margin-bottom: 4px; }
}

@media (max-width: 620px) {
  .ch-frage { grid-template-columns: 1fr; gap: 14px; }
  .ch-frage__q { margin-bottom: 2px }
}

/* Kopf mittig — überall dort, wo die Grafik darunter symmetrisch steht. */
.ldx-head.ch-kopf-mitte { text-align: center; max-width: 760px; margin-inline: auto; }
.ldx-head.ch-kopf-mitte .eyebrow { justify-content: center; }

/* --------------------------------------------------------------------------
   11 · Die Bilderstrecke — dreimal dieselbe Auszeichnung, dreimal andere Form
   Website, SEO und 3D nutzen weiterhin `.lx-trio`. Nur das Raster wechselt,
   damit die Bilder nicht auf drei Seiten identisch stehen.
   -------------------------------------------------------------------------- */

/* Website · drei Flächen nebeneinander, wie drei Bildschirme */
.ch-trio--reihe { grid-template-columns: 1fr 1fr 1fr !important; grid-template-rows: auto !important; gap: 16px !important; }
.ch-trio--reihe > .lx-shot { grid-row: auto !important; aspect-ratio: 3 / 4; }
.ch-trio--reihe > .lx-shot:nth-child(2) { aspect-ratio: 3 / 4; }

/* SEO · eine Treppe — jedes Bild steht eine Stufe höher */
.ch-trio--treppe { grid-template-columns: 1fr 1fr 1fr !important; grid-template-rows: auto !important; gap: 18px !important; align-items: end !important; }
.ch-trio--treppe > .lx-shot { grid-row: auto !important; }
.ch-trio--treppe > .lx-shot:nth-child(1) { aspect-ratio: 4 / 3; margin-top: 56px; }
.ch-trio--treppe > .lx-shot:nth-child(2) { aspect-ratio: 4 / 3.5; margin-top: 28px; }
.ch-trio--treppe > .lx-shot:nth-child(3) { aspect-ratio: 4 / 4; margin-top: 0; }

/* 3D · ein breites Bild oben, zwei darunter — Format wie eine Leinwand */
.ch-trio--breit { grid-template-columns: 1fr 1fr !important; grid-template-rows: auto auto !important; gap: 16px !important; }
.ch-trio--breit > .lx-shot:nth-child(1) { grid-row: 1 !important; grid-column: 1 / span 2; aspect-ratio: 21 / 8; }
.ch-trio--breit > .lx-shot:nth-child(2),
.ch-trio--breit > .lx-shot:nth-child(3) { aspect-ratio: 4 / 3; }

@media (max-width: 820px) {
  .ch-trio--reihe, .ch-trio--treppe { grid-template-columns: 1fr 1fr !important; }
  .ch-trio--reihe > .lx-shot:nth-child(1),
  .ch-trio--treppe > .lx-shot:nth-child(1) { grid-column: 1 / span 2; aspect-ratio: 16 / 9 !important; margin-top: 0 !important; }
  .ch-trio--treppe > .lx-shot { margin-top: 0 !important; }
}
@media (max-width: 560px) {
  .ch-trio--reihe, .ch-trio--treppe, .ch-trio--breit { grid-template-columns: 1fr !important; }
  .ch-trio--reihe > .lx-shot, .ch-trio--treppe > .lx-shot, .ch-trio--breit > .lx-shot {
    grid-column: auto !important; aspect-ratio: 16 / 10 !important;
  }
}