/* ==========================================================================
   /content/ · nur diese Seite (Präfix ct-). Lädt nach css/lpx.css. Mobile first (390 px), ab 641 / 701 / 901 px.
   Idee: die Seite spricht die Sprache der Kamera. Sucher-Ecken, Formatangabe, Zeitcode, Schärfe ziehen, Schnitt-Spur.
   Farben nur Tokens, Grün nur für WhatsApp. Kein Orange in der Oberfläche: die einzige warme Fläche ist das Filmmaterial.
   ========================================================================== */

.lp--content main { overflow-x: clip; }

/* ---------- Sucher-Ecken (CSS, Rückfall vor dem ersten WebGL-Bild und ohne WebGL) ---------- */
.ct-ecken {
  --l: 18px; --b: 2px; --sc: color-mix(in srgb, var(--fg) 85%, transparent);
  position: absolute; inset: -10px; pointer-events: none;
  background:
    linear-gradient(var(--sc) 0 0) top left / var(--l) var(--b), linear-gradient(var(--sc) 0 0) top left / var(--b) var(--l),
    linear-gradient(var(--sc) 0 0) top right / var(--l) var(--b), linear-gradient(var(--sc) 0 0) top right / var(--b) var(--l),
    linear-gradient(var(--sc) 0 0) bottom left / var(--l) var(--b), linear-gradient(var(--sc) 0 0) bottom left / var(--b) var(--l),
    linear-gradient(var(--sc) 0 0) bottom right / var(--l) var(--b), linear-gradient(var(--sc) 0 0) bottom right / var(--b) var(--l);
  background-repeat: no-repeat;
  transition: opacity 0.5s var(--ease), transform 0.7s var(--ease);
}
@media (min-width: 901px) { .ct-ecken { --l: 26px; } }

/* Umriss eines Formats (Formatwahl, Laufband) */
.ct-umriss { display: inline-block; flex: none; height: 1em; border: 1.5px solid currentColor; border-radius: 2px; }
.ct-umriss--16x9 { aspect-ratio: 16 / 9; }
.ct-umriss--9x16 { aspect-ratio: 9 / 16; }
.ct-umriss--4x5 { aspect-ratio: 4 / 5; }
.ct-umriss--3x2 { aspect-ratio: 3 / 2; }

.ct-marke { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; line-height: 1.35; letter-spacing: -0.005em; color: var(--fg-muted); }
/* bis 700 px ausgeblendete Satzteile (nur vorhandene Wörter, am Handy kürzer) */
@media (max-width: 700px) { .ct-nur-gross { display: none; } }
.ct-text-gross { margin: 0; max-width: 34rem; font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; line-height: 1.35; letter-spacing: -0.012em; color: var(--fg); }
@media (min-width: 901px) { .ct-text-gross { font-size: 1.5rem; } }

/* ---------- Hero ---------- */
.ct-absender { align-items: center; gap: 0.6rem; flex-wrap: nowrap; line-height: 1.35; }
.ct-absender__kopf { flex: none; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--line-strong); }
.ct-hero { padding-top: 5.5rem; gap: 0.8rem; }
.ct-hero .hero__title { font-size: clamp(1.8rem, 8vw, 3.4rem); line-height: 1.02; }
.ct-hero .hero__title .line__inner--accent { font-size: 0.58em; font-weight: 800; line-height: 1.14; letter-spacing: -0.02em; padding-top: 0.35em; }
.ct-hero__mikro { margin-top: -0.2rem; }
@media (max-width: 700px) { .ct-hero .lpx-hero__cta .btn { padding-block: 0.9rem; min-height: 56px; } }
.ct-hero .lpx-hero__lead { margin-top: 0.4rem; }

.ct-sucher-wrap { position: relative; margin-top: 0.9rem; }
.ct-sucher__kopf { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 1rem; font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; line-height: 1.3; color: var(--fg-muted); }
.ct-sucher__kopf-r { color: var(--accent-ink); }

/* Bühne: feste 4:5-Fläche, ihre Größe ändert sich nie. Das Format wechselt nur über clip-path (Bildfenster),
   transform (Video, Szene-Ziel) und translate (Beschriftungen im Bild). Kein width/height im Übergang, daher kein Layout-Sprung (CLS 0).
   --ix/--iy = Abstand des Bildfensters zum Rand (cqw = Breite der Bühne), --sx/--sy = Maß des Fensters.
   Das Video steht mit object-fit: contain in der ganzen Fläche (16:9 genau im Streifen) und wird für 4:5 und 9:16 um --z vergrößert. */
.ct-sucher { --ix: 0px; --iy: 0px; --z: 2.2223; --sx: 1; --sy: 1; --capy: 0px; position: relative; width: 100%; aspect-ratio: 4 / 5; container-type: inline-size; }
.ct-sucher[data-format="9x16"] { --ix: 21.875cqw; --sx: 0.5625; }
.ct-sucher[data-format="16x9"] { --iy: 34.375cqw; --z: 1; --sy: 0.45; --capy: calc(-10.625cqw - 4.2rem); }
.ct-sucher__orbit { position: absolute; left: 50%; top: 50%; width: 128%; height: auto; transform: translate(-50%, -50%) rotate(-9deg); opacity: 0.55; pointer-events: none; overflow: visible; transition: opacity 0.6s var(--ease); }
html.szene-an .ct-sucher__orbit { opacity: 0; }
html.no-webgl .ct-sucher__orbit { opacity: 0.55; }
.ct-sucher__ecken {
  inset: -10px;
  background-position:
    var(--ix) var(--iy), var(--ix) var(--iy),
    calc(100% - var(--ix)) var(--iy), calc(100% - var(--ix)) var(--iy),
    var(--ix) calc(100% - var(--iy)), var(--ix) calc(100% - var(--iy)),
    calc(100% - var(--ix)) calc(100% - var(--iy)), calc(100% - var(--ix)) calc(100% - var(--iy));
  transition: background-position 0.7s var(--ease), opacity 0.5s var(--ease);
}
html.szene-an .ct-sucher__ecken { opacity: 0.35; }
.lpx-video.ct-sucher__bild {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; aspect-ratio: auto; margin: 0;
  border-radius: 0.9rem; border: 0;
  clip-path: inset(var(--iy) var(--ix) round 0.9rem);
  transition: clip-path 0.7s var(--ease);
}
.ct-sucher__bild video { object-fit: contain; object-position: 50% 50%; transform: scale(var(--z)); transition: transform 0.7s var(--ease); }
/* leere Fläche für die Szene: hat immer das Maß des sichtbaren Fensters (nur transform, Engine misst nach dem Übergang neu) */
.ct-sucher__ziel { position: absolute; inset: 0; z-index: 0; pointer-events: none; transform: scale(var(--sx), var(--sy)); transition: transform 0.7s var(--ease); }
.ct-sucher__info { position: absolute; top: 0.75rem; z-index: 3; display: inline-flex; align-items: center; gap: 0.45rem; font: 500 0.68rem/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 2px rgb(0 0 0 / 0.7); font-variant-numeric: tabular-nums; pointer-events: none; transition: opacity 0.4s var(--ease), translate 0.7s var(--ease); }
.ct-sucher__info--format { left: 0.8rem; translate: var(--ix) var(--iy); }
.ct-sucher__info--zeit { right: 0.8rem; translate: calc(-1 * var(--ix)) var(--iy); }
.ct-sucher__punkt { width: 6px; height: 6px; border-radius: 50%; background: var(--c-accent); opacity: 0.3; transition: opacity 0.4s; }
.ct-sucher.is-spielt .ct-sucher__punkt { opacity: 1; }
.ct-sucher__fokus { position: absolute; left: 50%; top: 26%; z-index: 1; width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 1.5px solid var(--c-accent); pointer-events: none; transition: translate 0.7s var(--ease), opacity 0.4s; }
.ct-sucher[data-format="16x9"] .ct-sucher__fokus { translate: 0 18.75cqw; }
.ct-sucher[data-format="9x16"] .ct-sucher__info { letter-spacing: 0.06em; }
html.ct-an .ct-sucher.is-fokus .ct-sucher__fokus { animation: ct-fokus 0.9s var(--ease) 1 both; }
@keyframes ct-fokus { from { transform: scale(1.6); opacity: 0; } 60% { opacity: 1; } to { transform: scale(1); opacity: 1; } }
.lpx-video.is-cta .ct-sucher__fokus, .lpx-video.is-ende .ct-sucher__info { opacity: 0; }
/* Ton-Knopf unten mittig statt oben links (oben stehen Format und Zeitcode) */
.lpx-video__ton.ct-sucher__ton { left: 50%; top: auto; bottom: 0.8rem; transform: translateX(-50%); translate: 0 calc(-1 * var(--iy)); background: color-mix(in srgb, var(--c-panel) 88%, transparent); color: var(--fg); border: 1px solid var(--line-strong); font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; transition: transform 0.4s var(--ease), translate 0.7s var(--ease), border-color 0.3s; }
.lpx-video__ton.ct-sucher__ton:hover { transform: translateX(-50%) translateY(-2px); border-color: var(--c-accent); background: color-mix(in srgb, var(--c-panel) 88%, transparent); color: var(--fg); }
/* Pille passt in jedes Bildfenster: im schmalen 9:16 und im flachen 16:9 nur Symbol plus „Ton“, im 16:9 rechts unten in der Ecke */
.lpx-video__ton.ct-sucher__ton { max-width: calc(100% - 2 * var(--ix) - 1.2rem); }
.ct-sucher[data-format="9x16"] .ct-ton__lang, .ct-sucher[data-format="16x9"] .ct-ton__lang { display: none; }
.ct-sucher[data-format="9x16"] .lpx-video__ton.ct-sucher__ton, .ct-sucher[data-format="16x9"] .lpx-video__ton.ct-sucher__ton { padding: 0.55rem 0.95rem 0.55rem 0.8rem; }
.ct-sucher[data-format="16x9"] .lpx-video__ton.ct-sucher__ton { left: auto; right: 0.7rem; bottom: 0.7rem; transform: none; }
.ct-sucher[data-format="16x9"] .lpx-video__ton.ct-sucher__ton:hover { transform: translateY(-2px); }
/* Videoende: nur „Nochmal ansehen“ und der grüne Knopf, keine Ton-Pille darüber */
.lpx-video.is-ende .lpx-video__ton.ct-sucher__ton { display: none; }
/* Untertitel schmal wie im Reel (passen in jedes Fenster), im 16:9-Streifen über dem Ton-Knopf */
.ct-sucher .lpx-video__caps { left: 21%; right: 21%; bottom: 19%; translate: 0 var(--capy); transition: bottom 0.5s var(--ease), translate 0.7s var(--ease); }
.ct-sucher .lpx-video__ende { display: none; }
.ct-sucher .lpx-video__nochmal { top: auto; bottom: 0.8rem; right: 50%; transform: translateX(50%); translate: 0 calc(-1 * var(--iy)); transition: translate 0.7s var(--ease); white-space: nowrap; }
.ct-sucher[data-format="16x9"] .lpx-video__nochmal { bottom: 0.5rem; }
.ct-sucher .lpx-video__start span { translate: 0 calc(-1 * var(--iy)); transition: translate 0.7s var(--ease); }
/* Ab Manuels Aufruf im Video: echter grüner Knopf im Bild */
.ct-sucher__ende { position: absolute; left: 0; right: 0; bottom: 4.2rem; z-index: 4; display: grid; justify-items: center; gap: 0.7rem; padding: 0 1rem; text-align: center; opacity: 0; visibility: hidden; transform: translateY(10px); translate: 0 calc(-1 * var(--iy)); transition: opacity 0.4s var(--ease), transform 0.5s var(--ease), translate 0.7s var(--ease), visibility 0s 0.4s; }
.ct-sucher__ende p { margin: 0; max-width: 22ch; font: 800 1.05rem/1.18 var(--font-display); letter-spacing: -0.015em; color: #fff; text-shadow: 0 2px 8px rgb(0 0 0 / 0.75); }
.lpx-video.is-cta .ct-sucher__ende { opacity: 1; visibility: visible; transform: none; transition: opacity 0.4s var(--ease), transform 0.5s var(--ease), translate 0.7s var(--ease); }
.lpx-video.is-ende .ct-sucher__ende { bottom: 50%; transform: translateY(50%); translate: none; }
.ct-sucher[data-format="16x9"] .ct-sucher__ende p { display: none; }
.ct-sucher[data-format="16x9"] .ct-sucher__ende { translate: 0 calc(3.5rem - var(--iy)); }
/* 16:9-Ende: grüner Knopf oben im Streifen, „Nochmal ansehen“ unten, nichts überdeckt sich */
.ct-sucher[data-format="16x9"] .lpx-video.is-ende .ct-sucher__ende { bottom: auto; top: 0.9rem; transform: none; translate: 0 var(--iy); }
.ct-sucher[data-format="16x9"] .lpx-video.is-cta .lpx-video__caps { display: none; }
/* 9:16: Aufruf und Knöpfe passen ins schmale Bildfenster (Rand = --ix), Knopf nur „WhatsApp“ */
.ct-sucher[data-format="9x16"] .ct-sucher__ende { padding-inline: calc(var(--ix) + 0.6rem); }
.ct-sucher[data-format="9x16"] .ct-sucher__ende p { font-size: 0.95rem; }
.ct-sucher[data-format="9x16"] .ct-ende__lang { display: none; }
.ct-sucher[data-format="9x16"] .ct-sucher__ende .btn { max-width: 100%; padding-inline: 1rem; }
.ct-sucher[data-format="9x16"] .lpx-video__nochmal { max-width: calc(100% - 2 * var(--ix) - 1rem); padding-inline: 0.8rem; font-size: 0.85rem; }

/* Formatwahl */
.ct-formatwahl { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 1.1rem; }
.ct-formatwahl__k { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 0.85rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--fg-muted); font: 500 0.76rem/1 var(--font-mono); letter-spacing: 0.08em; cursor: pointer; transition: color 0.3s, border-color 0.3s; }
.ct-formatwahl__k .ct-umriss { height: 15px; }
.ct-formatwahl__k[aria-pressed="true"] { color: var(--fg); border-color: var(--c-accent); }
.ct-formatwahl__k[aria-pressed="true"] .ct-umriss { color: var(--c-accent); }
.ct-formatwahl__k:hover { color: var(--fg); }
.ct-formatwahl__k:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
.ct-formatwahl__hinweis { margin-left: 0.3rem; font: 500 0.85rem/1.3 var(--font-display); color: var(--fg-muted); }
.ct-sucher__cap { margin: 0.7rem 0 0; font-size: 0.9rem; line-height: 1.4; color: var(--fg-muted); }

/* Handy: Sucher und Formatwahl nebeneinander, die Formatwahl als senkrechte Leiste wie die Seitenknöpfe einer Kamera-App.
   Beides steht ganz im ersten Bildschirm über dem Dock (390 x 844: Sucher 270 x 338, Leiste unten bündig, rund 48 px über dem Dock). */
@media (max-width: 700px) {
  .ct-sucher-wrap {
    --sw: clamp(200px, min(calc((100svh - 500px) * 0.8), calc(100vw - 2 * var(--pad) - 4.5rem)), 270px);
    display: grid; grid-template-columns: var(--sw) 3.625rem; column-gap: 0.875rem; justify-content: center; align-items: end; margin-top: 0.2rem;
  }
  .ct-sucher__kopf, .ct-formatwahl__hinweis { display: none; }
  .ct-sucher-wrap > .ct-sucher { grid-column: 1; grid-row: 1; width: var(--sw); margin: 0; }
  .ct-sucher-wrap > .ct-formatwahl { grid-column: 2; grid-row: 1; flex-direction: column; flex-wrap: nowrap; justify-content: flex-end; gap: 0.375rem; margin: 0; }
  .ct-formatwahl__k { flex-direction: column; justify-content: center; gap: 0.3rem; width: 3.625rem; min-height: 48px; padding: 0.4rem 0; border-radius: 0.8rem; font-size: 0.68rem; }
  .ct-formatwahl__k .ct-umriss { height: 14px; }
  .ct-formatwahl__k .ct-umriss--16x9 { height: 11px; }
  .ct-sucher-wrap > .ct-sucher__cap { grid-column: 1 / -1; grid-row: 2; margin-top: 1.4rem; text-align: left; }
}

/* Niedrige Handys und In-App-Browser: Hero etwas dichter, damit H1 und grüner Knopf über der Oberkante des Cookie-Banners bleiben */
@media (max-width: 700px) and (max-height: 700px) {
  .lpx .ct-hero { padding-top: 4.75rem; gap: 0.5rem; }
  .ct-absender__kopf { display: none; }
  .ct-hero .hero__title { font-size: min(clamp(1.8rem, 8vw, 3.4rem), 7.4vw); }
}

@media (min-width: 901px) {
  .ct-hero { padding-top: clamp(6.5rem, 13vh, 8.5rem); row-gap: 1.2rem; }
  .ct-hero .hero__title { font-size: min(clamp(2.5rem, 5.2vw, 5.6rem), 5rem); line-height: 0.98; }
  .ct-hero .hero__title .line__inner--accent { font-size: 0.46em; padding-top: 0.5em; }
  /* Desktop: Unterzeile direkt unter der H1, danach Knöpfe, Mikrozeile, Vertrauenszeile; rechts der Sucher */
  .ct-hero > .eyebrow { order: 1; } .ct-hero > .hero__title { order: 2; } .ct-hero > .lpx-hero__lead { order: 3; }
  .ct-hero > .lpx-hero__cta { order: 4; } .ct-hero > .ct-hero__mikro { order: 5; } .ct-hero > .lpx-hero__vertrauen { order: 6; }
  .ct-hero > .ct-sucher-wrap { order: 0; grid-column: 2; grid-row: 1 / span 9; align-self: start; margin-top: 0; }
  /* Sucherhöhe auch aus der Fensterhöhe, damit die Bildunterschrift bei niedrigen Fenstern nicht unter das Dock rutscht */
  .ct-sucher-wrap { --sh: min(60svh, 38rem, calc(100svh - 24rem)); }
  .ct-sucher { width: min(100%, calc(var(--sh) * 0.8)); margin-inline: auto; }
  .ct-sucher-wrap .ct-sucher__kopf, .ct-sucher-wrap .ct-formatwahl, .ct-sucher-wrap .ct-sucher__cap { width: min(100%, calc(var(--sh) * 0.8)); margin-inline: auto; }
  .ct-sucher__info { font-size: 0.72rem; }
  .ct-sucher__fokus { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
  .ct-sucher__ende p { font-size: 1.25rem; }
}
/* sehr niedrige Handys (320 x 568): Formatwahl oben neben dem Sucher, damit sie nicht hinter dem Dock liegt */
@media (max-width: 700px) and (max-height: 620px) { .ct-sucher-wrap > .ct-formatwahl { align-self: start; } }

/* ---------- Laufband der Formate ---------- */
.ct-band .marquee__track span { gap: 0.7rem; }
.ct-band .marquee__track span::after { content: none; }
.ct-band .marquee__track { gap: 2.6rem; }
.ct-band .ct-umriss { height: 0.85em; color: var(--c-accent); }
.ct-band__punkt { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* ---------- 01 Kennst du das? ---------- */
.ct-problem__inhalt { display: grid; gap: 1.6rem; }
.ct-schmerz { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ct-schmerz li { padding: 0.8rem 0; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; line-height: 1.3; letter-spacing: -0.012em; color: var(--fg); }
.ct-problem__satz { margin: 0.4rem 0 0; max-width: 24ch; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; line-height: 1.2; letter-spacing: -0.02em; color: var(--fg); text-wrap: balance; }
.ct-problem__satz span { color: var(--accent-ink); }
@media (min-width: 901px) {
  .ct-problem__inhalt { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.4rem var(--lpx-gap); align-items: start; }
  .ct-schmerz { grid-column: 1 / span 7; grid-row: 1; }
  .ct-schmerz li { font-size: 1.6rem; padding: 1.2rem 0; }
  .ct-problem__satz { grid-column: 9 / -1; grid-row: 1; align-self: end; margin: 0 0 1.2rem; font-size: clamp(1.5rem, 2vw, 2rem); }
}

/* ---------- 02 Was dahinter steckt: Schärfe ziehen ---------- */
.ct-mehr__buehne { min-height: 210px; }
.ct-woerter { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; }
.ct-wort__t { position: relative; display: inline-block; font-family: var(--font-display); font-weight: 900; font-size: clamp(2.1rem, 10vw, 2.6rem); line-height: 0.95; letter-spacing: -0.04em; color: var(--fg); transition: filter 0.9s var(--ease), opacity 0.9s var(--ease); }
.ct-wort p { margin: 0.55rem 0 0; max-width: 28rem; color: var(--fg-muted); transition: opacity 0.9s var(--ease); }
.ct-wort__ecken { inset: -12px -14px; --l: 16px; opacity: 0; transform: scale(1.08); }
html.ct-an .ct-wort:not(.is-scharf) .ct-wort__t { filter: blur(7px); opacity: 0.45; }
html.ct-an .ct-wort:not(.is-scharf) p { opacity: 0; }
.ct-wort.is-fokus .ct-wort__ecken { opacity: 1; transform: none; }
html:not(.ct-an) .ct-wort__ecken { display: none; }
.ct-mehr__fuss { display: grid; gap: 1.2rem; margin-top: clamp(2.4rem, 6vh, 4rem); padding-top: 1.4rem; border-top: 1px solid var(--line); }
.ct-mehr__satz { margin: 0; max-width: 36rem; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.015em; color: var(--fg); }
.ct-zitat { margin: 0; max-width: 34rem; font-family: var(--font-display); font-weight: 500; font-style: italic; font-size: 1.05rem; line-height: 1.45; color: var(--fg); }
.ct-zitat span { display: block; margin-top: 0.35rem; font-style: normal; font-size: 0.85rem; color: var(--fg-muted); }
.ct-mehr__ende { display: grid; gap: 1rem; margin-top: 1.8rem; }
.ct-mehr__einwand { margin: 0; max-width: 34rem; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; line-height: 1.25; letter-spacing: -0.018em; color: var(--fg); text-wrap: balance; }
.ct-mehr__einwand span { color: var(--accent-ink); }
.ct-fuerwen { margin: 0; max-width: 34rem; font-size: 0.95rem; line-height: 1.45; color: var(--fg-muted); }
@media (min-width: 901px) {
  .ct-woerter { gap: 0; padding: 2vh 0 6vh; }
  .ct-wort { min-height: 34vh; display: flex; flex-direction: column; justify-content: center; }
  .ct-wort__t { font-size: clamp(4rem, 7.6vw, 8rem); line-height: 0.92; }
  .ct-wort__ecken { --l: 26px; inset: -16px -20px; }
  .ct-wort p { font-size: 1.15rem; }
  html.ct-an .ct-wort.is-scharf:not(.is-fokus) .ct-wort__t { opacity: 0.38; }
  .ct-mehr__fuss { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: var(--lpx-gap); }
  .ct-mehr__satz { font-size: 1.75rem; }
  .ct-mehr__ende { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: var(--lpx-gap); margin-top: 2.6rem; }
  .ct-mehr__einwand { font-size: 1.75rem; }
}

/* ---------- 03 Aus einem Drehtag: Formate-Lineal ---------- */
.ct-lineal { list-style: none; margin: 0; padding: 0.8rem 0 0; display: flex; align-items: flex-end; gap: 12px; }
.ct-format { flex: none; display: grid; gap: 0.7rem; }
.ct-format__rahmen { position: relative; height: 168px; border-radius: 0.5rem; background: var(--c-panel); border: 1px solid var(--line-strong); }
.ct-format__rahmen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; border-radius: inherit; opacity: 0.72; }
.ct-format__rahmen[data-szene-format="reel"] { aspect-ratio: 9 / 16; height: 168px; }
.ct-format__rahmen[data-szene-format="foto"] { aspect-ratio: 4 / 5; height: 130px; }
.ct-format__rahmen[data-szene-format="clip"] { aspect-ratio: 16 / 9; height: 68px; }
.ct-format__rahmen[data-szene-format="clip"] img { object-position: 50% 50%; }
.ct-format__rahmen .ct-ecken { --l: 12px; inset: -7px; }
.ct-format__rahmen .ct-ecken { --sc: var(--c-accent); }
html.szene-an .ct-format__rahmen .ct-ecken { opacity: 0; }
html.no-webgl .ct-format__rahmen .ct-ecken { opacity: 1; }
.ct-format__mass { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; color: var(--fg-muted); line-height: 1.35; }
.ct-format__mass b { display: block; font: 500 0.68rem/1.4 var(--font-mono); letter-spacing: 0.1em; color: var(--accent-ink); }
/* Abspiel-Zeile (Reel, Clip) und Belichtung (Foto) liegen über dem Bild, für alle Stufen gleich; läuft, wenn die Reihe ins Bild kommt (data-spiel), danach Ruhe */
.ct-format__rahmen { overflow: hidden; }
.ct-format__rahmen::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: linear-gradient(var(--c-accent) 0 0) top / 100% 2px no-repeat; }
.ct-format__rahmen[data-szene-format="foto"]::after { background: radial-gradient(closest-side, color-mix(in srgb, var(--c-light) 55%, transparent), transparent); transform: scale(0.2); }
@media (prefers-reduced-motion: no-preference) {
  .ct-lineal.is-spiel [data-szene-format="reel"]::after, .ct-lineal.is-spiel [data-szene-format="clip"]::after { opacity: 0.7; animation: ct-zeile 3.2s linear 2 both; }
  .ct-lineal.is-spiel [data-szene-format="clip"]::after { animation-delay: 0.3s; }
  .ct-lineal.is-spiel [data-szene-format="foto"]::after { animation: ct-belicht 1.4s var(--ease) 0.15s 1 both; }
}
@keyframes ct-zeile { from { opacity: 0.7; transform: translateY(0); } 92% { opacity: 0.7; } to { opacity: 0; transform: translateY(calc(100% - 2px)); } }
@keyframes ct-belicht { 0% { opacity: 0; transform: scale(0.2); } 35% { opacity: 0.55; } 100% { opacity: 0; transform: scale(1.6); } }
.ct-lineal__hinweis { margin-top: 1rem; }
/* fünf Leistungen kompakt: Handy zwei Spalten (Fotos über beide), Desktop fünf in einer Zeile */
.ct-liefer { list-style: none; margin: 1.8rem 0 0; padding: 1.1rem 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.2rem; }
.ct-liefer li:last-child { grid-column: 1 / -1; }
.ct-liefer b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.012em; color: var(--fg); }
.ct-liefer p { margin: 0.25rem 0 0; font-size: 0.9rem; line-height: 1.4; color: var(--fg-muted); }
.ct-drehtag .ct-text-gross { margin-top: 1.6rem; }
@media (min-width: 701px) {
  .ct-lineal { gap: 2rem; }
  .ct-format__rahmen[data-szene-format] { height: clamp(11rem, 30vh, 17rem); }
  .ct-format__mass b { font-size: 0.75rem; }
}
@media (min-width: 901px) {
  .ct-liefer { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--lpx-gap); margin-top: clamp(2rem, 5vh, 3rem); }
  .ct-liefer li:last-child { grid-column: auto; }
  .ct-liefer b { font-size: 1.25rem; }
  .ct-liefer p { font-size: 1rem; }
}
@media (hover: hover) and (pointer: fine) {
  .ct-format__rahmen img { transition: opacity 0.4s var(--ease), transform 0.6s var(--ease); }
  .ct-format:hover .ct-format__rahmen img { opacity: 0.95; }
}

/* ---------- So läuft's: Schritt 02 ist die Start-Karte (Content-Gespräch) ---------- */
.ct-start { position: relative; margin-top: 0.8rem; padding: 1.1rem 1.2rem 1.2rem; background: var(--c-panel); border: 1px solid var(--line-strong); border-radius: 1rem; }
.ct-start__ecken { --sc: var(--c-accent); --l: 18px; inset: -7px; }
.ct-start .ct-start__text { max-width: none; margin: 0 0 1rem; font-size: 1.05rem; line-height: 1.45; color: var(--fg); }
.ct-start__haken { gap: 0.6rem; }
.ct-start .ct-start__danach { max-width: none; margin: 1rem 0 0; font-size: 0.95rem; color: var(--fg-muted); }
.ct-schritt--start .lpx-schritt__t { display: block; }

/* ---------- 05 So läuft's: Schnitt-Spur ---------- */
.ct-ablauf__knopf { margin-top: 1rem; width: 100%; min-height: 52px; }
.ct-ablauf__social { margin: 2rem 0 0; color: var(--fg-muted); }
.ct-ablauf__social a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--c-accent); text-underline-offset: 0.25em; display: inline-flex; min-height: 44px; align-items: center; }
.ct-spur { display: none; }
@media (min-width: 701px) { .ct-ablauf__knopf { width: auto; } }
@media (min-width: 901px) {
  .ct-spur { --k: 0; position: relative; display: block; margin: 0 0 2.6rem; padding-top: 1.1rem; }
  .ct-spur__zeit { position: absolute; left: 0; right: 0; top: 0; height: 0.55rem; background: repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px 2rem); opacity: 0.8; }
  .ct-spur__bahn { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .ct-spur__clip { position: relative; height: 3rem; border-radius: 0.4rem; border: 1px solid var(--line); background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--c-light) 9%, transparent) 0 1px, transparent 1px 6px) bottom / 100% 45% no-repeat, var(--c-panel); transition: border-color 0.4s var(--ease); }
  .ct-spur__clip b { position: absolute; left: 0.6rem; top: 0.5rem; font: 500 0.7rem/1 var(--font-mono); letter-spacing: 0.1em; color: var(--fg-muted); transition: color 0.4s; }
  .ct-spur__clip.is-aktiv { border-color: var(--c-accent); }
  .ct-spur__clip.is-aktiv b { color: var(--fg); }
  .ct-spur__kopf { position: absolute; left: 0; top: 0.5rem; bottom: -0.6rem; width: 2px; margin-left: -1px; background: var(--c-accent); transform: translateX(calc(var(--k) * var(--spur-b, 0px))); will-change: transform; }
  .ct-spur__kopf::before { content: ""; position: absolute; left: -4px; top: -6px; border: 5px solid transparent; border-top: 7px solid var(--c-accent); }
}

/* ---------- 06 Schau selbst: Kontaktbogen ---------- */
.ct-bogen__kopf { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.ct-bogen__nav { display: flex; gap: 0.5rem; }
.ct-bogen__pfeil { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; color: var(--fg); cursor: pointer; transition: border-color 0.3s; }
.ct-bogen__pfeil:hover { border-color: var(--c-accent); }
.ct-bogen__pfeil svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ct-bogen__streifen { list-style: none; display: flex; gap: 0.8rem; margin: 0 calc(-1 * var(--pad)); padding: 0.2rem var(--pad) 0.6rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); overscroll-behavior-x: contain; scrollbar-width: none; }
.ct-bogen__streifen::-webkit-scrollbar { display: none; }
.ct-clip { position: relative; flex: none; scroll-snap-align: start; display: grid; gap: 0.6rem; align-content: start; }
.ct-clip__spieler { position: absolute; left: 0; top: 0; z-index: 2; border-radius: 0.8rem; overflow: hidden; background: #000; border: 1px solid var(--line-strong); }
.ct-clip__spieler video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ct-clip--manuel .ct-clip__spieler video { object-fit: contain; }
.ct-clip__k { position: relative; display: block; height: 280px; padding: 0; border: 1px solid var(--line); border-radius: 0.8rem; overflow: hidden; background: #000; cursor: pointer; }
.ct-clip--manuel .ct-clip__k { aspect-ratio: 4 / 5; }
.ct-clip--loop .ct-clip__k { aspect-ratio: 1; }
.ct-clip__k img, .ct-clip__k video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ct-clip--manuel .ct-clip__k img, .ct-clip--manuel .ct-clip__k video { object-position: 50% 26%; }
.ct-clip__play { position: absolute; left: 0.8rem; bottom: 0.8rem; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgb(255 255 255 / 0.75); background: rgb(11 15 23 / 0.45); transition: transform 0.4s var(--ease), border-color 0.3s; }
.ct-clip__play::after { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 15px; transform: translate(-38%, -50%); background: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%); }
html:not(.js) .ct-clip__play { display: none; }
.ct-clip__laenge { position: absolute; right: 0.6rem; top: 0.6rem; padding: 0.3rem 0.55rem; border-radius: 999px; background: rgb(11 15 23 / 0.6); font: 500 0.68rem/1 var(--font-mono); letter-spacing: 0.08em; color: #fff; }
.ct-clip.is-spielt .ct-clip__play, .ct-clip.is-spielt .ct-clip__laenge { display: none; }
.ct-clip__k:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
.ct-clip__info { margin: 0; display: grid; gap: 0.2rem; }
.ct-clip__info b { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--fg); }
.ct-clip__info span { font-family: var(--font-display); font-weight: 500; font-size: 0.85rem; color: var(--fg-muted); }
.ct-bogen__unter { margin: 1rem 0 0; max-width: 44rem; color: var(--fg-muted); }
@media (hover: hover) and (pointer: fine) {
  .ct-clip__k:hover .ct-clip__play { transform: scale(1.08); border-color: var(--c-accent); }
  .ct-clip__k img { transition: transform 0.8s var(--ease); }
  .ct-clip__k:hover img { transform: scale(1.04); }
}
@media (min-width: 901px) { .ct-clip__k { height: 22rem; } .ct-clip__info b { font-size: 1.1rem; } }
@media (max-width: 359px) { .ct-clip__k { height: 260px; } }
.ct-refs { margin-top: clamp(2.2rem, 6vh, 4rem); }
.ct-refs .lpx-ref__marke { font-size: 1.5rem; line-height: 1.05; }
.ct-refs .lpx-ref__art { font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; letter-spacing: 0; text-transform: none; }
.ct-refs .lpx-ref__beleg { font-family: var(--font-display); font-size: 0.85rem; letter-spacing: 0; text-transform: none; }
/* dpw-digital.at als eine Zeile unter den Karten */
.ct-ref-eigen { display: flex; align-items: flex-start; gap: 0.6rem; margin: 1.4rem 0 0; max-width: 40rem; font-size: 0.95rem; line-height: 1.45; color: var(--fg-muted); }
.ct-ref-eigen .sigmark { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.15em; }
.ct-ref-eigen a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -0.7rem; color: var(--fg); font-weight: 600; text-decoration: underline; text-decoration-color: var(--c-accent); text-underline-offset: 0.25em; }
/* Referenzen mit Bildschirmfoto der Live-Seite. Handy: Name und kleines Bild nebeneinander, Text darunter.
   Desktop: drei feste Spalten (Name, Text mit Link, Bild), damit alle Zeilen auf denselben Linien stehen. */
.ct-refs .lpx-ref.ct-ref { grid-template-columns: minmax(0, 1fr) minmax(0, 9.5rem); grid-template-areas: "kopf screen" "mitte mitte"; align-items: start; column-gap: 1rem; }
.ct-ref__kopf { grid-area: kopf; }
.ct-ref__screen { grid-area: screen; border-radius: 0.6rem; }
.ct-ref__screen::before { height: 0.9rem; background-size: auto; }
.ct-ref__screen img { top: 0.9rem; height: calc(100% - 0.9rem); }
.ct-ref__mitte { grid-area: mitte; display: grid; gap: 0.3rem; justify-items: start; }
@media (min-width: 901px) {
  .ct-refs .lpx-ref.ct-ref { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); grid-template-areas: "kopf mitte screen"; align-items: start; column-gap: var(--lpx-gap); }
  .ct-ref__screen { border-radius: 0.8rem; }
  .ct-ref__screen::before { height: 1.2rem; }
  .ct-ref__screen img { top: 1.2rem; height: calc(100% - 1.2rem); }
  .ct-ref__mitte .lpx-ref__text { font-size: 1.1rem; }
  .ct-refs .lpx-ref__marke { font-size: 2rem; }
}
.ct-ehrlich { margin: 1.2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); max-width: 40rem; font-size: 0.9rem; color: var(--fg-muted); }

/* ---------- 07 Team ---------- */
.ct-ausdemvideo { grid-column: 2; display: inline-flex; align-items: center; gap: 0.5rem; margin: 0.2rem 0 0 !important; font-family: var(--font-display); font-weight: 600; font-size: 0.85rem !important; color: var(--accent-ink) !important; }
.ct-ausdemvideo img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--line-strong); }
.ct-team .lpx-person { grid-template-columns: 4.5rem minmax(0, 1fr); }
.ct-team .lpx-person__foto { width: 4.5rem; height: 4.5rem; }
.ct-team .lpx-person h3 { font-weight: 800; font-size: 1.35rem; }
@media (min-width: 641px) { .ct-team .lpx-person { grid-template-columns: 7.5rem minmax(0, 1fr); } .ct-team .lpx-person__foto { width: 7.5rem; height: 7.5rem; } .ct-team .lpx-person h3 { font-size: clamp(1.6rem, 2.4vw, 2.2rem); } }
.ct-team__fuss { display: grid; gap: 1.6rem; margin-top: 2rem; }
.ct-team__satz { font-size: 1.125rem; max-width: 32rem; }
/* Visitenkarte (verbindlicher DPW-Look): Marke, Betreiber, Ort mit Namen, Wege */
.ct-karte { max-width: 34rem; padding: 1.3rem 1.4rem; background: var(--c-panel); border: 1px solid var(--line-strong); border-radius: 1.1rem; }
.ct-karte p { margin: 0; }
.ct-karte__marke { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-weight: 900; font-size: 1.25rem; letter-spacing: -0.027em; color: var(--fg); }
.ct-karte__marke .sigmark { width: 1.4rem; height: 1.4rem; }
.ct-karte__name { margin-top: 0.7rem !important; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.3; color: var(--fg); }
.ct-karte__ort { margin-top: 0.25rem !important; font-size: 0.95rem; color: var(--fg-muted); }
.ct-karte__wege { list-style: none; margin: 0.8rem 0 0; padding: 0; display: grid; font-size: 0.95rem; }
.ct-karte__wege a:not(.lpx-textcta) { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 0.25em; }
.ct-karte__wege a:not(.lpx-textcta):hover { text-decoration-color: var(--c-accent); }
@media (min-width: 701px) {
  .ct-karte__wege { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.8rem; }
  .ct-karte__wege li + li::before { content: "·"; margin-right: 0.8rem; color: var(--fg-muted); }
}
@media (min-width: 901px) {
  .ct-team__fuss { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--lpx-gap); align-items: center; margin-top: 2.6rem; }
  .ct-team__satz { grid-column: 1 / span 6; font-size: 1.35rem; }
  .ct-karte { grid-column: 7 / -1; justify-self: end; width: 100%; }
}

/* ---------- 08 Zusammenarbeit: ein Dreh, drei Orte ---------- */
.ct-zusammen__text { margin-top: 1.2rem; display: grid; gap: 0.9rem; max-width: 34rem; }
.ct-zusammen__text p { margin: 0; }
.ct-zusammen__text .ct-zusammen__klein { font-size: 0.95rem; color: var(--fg-muted); }
.ct-verteil { display: grid; grid-template-columns: 6rem minmax(0, 1fr); align-items: center; gap: 0; max-width: 24rem; margin-top: 0.4rem; }
.ct-verteil__rahmen { position: relative; aspect-ratio: 4 / 5; border-radius: 0.5rem; background: var(--c-panel); }
.ct-verteil__rahmen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; border-radius: inherit; }
.ct-verteil__rahmen .ct-ecken { --l: 12px; inset: -8px; }
.ct-verteil__ziele { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; }
.ct-verteil__ziele li { position: relative; display: flex; align-items: center; gap: 0.8rem; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--fg); }
.ct-verteil__ziele li::before { content: ""; flex: 0 0 2.6rem; height: 3px; margin-left: 0.6rem; background: radial-gradient(circle, var(--c-accent) 1.3px, transparent 1.6px) 0 50% / 7px 3px repeat-x; transform-origin: left; }
html.lpx-anim .ct-verteil[data-spiel] .ct-verteil__ziele li::before { transform: scaleX(0); }
html.lpx-anim .ct-verteil[data-spiel] .ct-verteil__ziele li { opacity: 0.3; transition: opacity 0.6s var(--ease); }
.ct-verteil.is-spiel .ct-verteil__ziele li { opacity: 1 !important; }
.ct-verteil.is-spiel .ct-verteil__ziele li::before { transform: scaleX(1) !important; transition: transform 0.8s var(--ease); }
.ct-verteil.is-spiel .ct-verteil__ziele li:nth-child(2), .ct-verteil.is-spiel .ct-verteil__ziele li:nth-child(2)::before { transition-delay: 0.15s; }
.ct-verteil.is-spiel .ct-verteil__ziele li:nth-child(3), .ct-verteil.is-spiel .ct-verteil__ziele li:nth-child(3)::before { transition-delay: 0.3s; }
@media (min-width: 901px) {
  .ct-verteil { grid-template-columns: 9rem minmax(0, 1fr); align-self: center; justify-self: end; max-width: 30rem; }
  .ct-verteil__ziele li { white-space: nowrap; }
  .ct-verteil__ziele li { font-size: 1.8rem; }
  .ct-verteil__ziele li::before { flex-basis: 4.5rem; margin-left: 1rem; }
}

/* ---------- Schluss: der Titel im Sucher ---------- */
.ct-schluss__rahmen { position: relative; display: block; width: fit-content; max-width: 100%; margin: 1.6rem auto 0; padding: 1.6rem 1.2rem 1.2rem; }
.ct-schluss__rahmen .contact__title { margin-top: 0; }
.ct-schluss__ecken { inset: 0; --l: 34px; }
.ct-schluss__info { position: absolute; top: 0.6rem; font: 500 0.66rem/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted); }
.ct-schluss__info--l { left: 1rem; } .ct-schluss__info--r { right: 1rem; }
.ct-schluss .lpx-mikro + .lpx-mikro { margin-top: 0; }
.ct-schluss .contact__hint { font-family: var(--font-display); font-size: 0.95rem; letter-spacing: 0; text-transform: none; }
.ct-schluss .ct-schluss__meta { font-size: 0.8rem; }
@media (max-width: 640px) { .ct-schluss__rahmen { padding: 1.7rem 0.9rem 1rem; } .ct-schluss__rahmen .contact__title { font-size: 2.35rem; max-width: none; } }
@media (min-width: 901px) { .ct-schluss__ecken { --l: 56px; } .ct-schluss__rahmen { padding: 2.6rem 3rem 2rem; } }

/* ---------- Handy: kürzere Leerflächen (Problem zu „Was dahinter steckt“, Fragen zum Schluss) ---------- */
@media (max-width: 700px) {
  .ct-problem { padding-bottom: 1.2rem; }
  .ct-mehr { padding-top: 2.4rem; }
  .ct-mehr__buehne { min-height: 170px; }
  .ct-fragen { padding-bottom: 1.4rem; }
  .ct-schluss { padding-top: 1.4rem; }
  .ct-schluss .lpx-schluss__buehne { height: clamp(140px, 19svh, 180px); }
}

/* ---------- 08 Fragen ---------- */
.ct-fragen .lpx-faq__num { color: var(--fg-muted); }
.ct-fragen .ct-faq--erste .lpx-faq__num { color: var(--accent-ink); }
@media (min-width: 901px) and (max-width: 1100px) { .ct-fragen .lpx-faq { max-width: 52rem; } }

/* ---------- Panel: sechs Themen 2 x 3 ---------- */
.ct-chips .chip span { white-space: normal; text-align: center; line-height: 1.15; }

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  .ct-sucher, .ct-sucher *, .ct-ecken, .ct-wort__t { transition: none !important; }
  .ct-format__rahmen::after { animation: none !important; opacity: 0 !important; }
  .ct-sucher__fokus { animation: none !important; }
}