/* ==========================================================================
   /kundenanfragen/ (P1, Anfragen gehen verloren): nur seitenspezifisch, Präfix ka-. Lädt nach css/lpx.css.
   Motiv: Sprechblasen mit Kundenfragen um das Lichtpunkt-Zeichen (wie die Anzeige), Sog-Bühne „Wichtiges landet bei dir“.
   Stand 26.10.2026 (Inhaltsplan Runde 2): neun Abschnitte, „Und wenn's wichtig ist“ ist Teil von „Die KI antwortet für dich“.
   Mobile first, Grenzen 641 / 701 / 901 / 1001 px. Bewegung nur ohne prefers-reduced-motion, Startzustände setzt seite.js.
   ========================================================================== */

.lp--ka .ka-ico { flex: none; width: 1.15em; height: 1.15em; transition: transform 0.45s var(--ease); }

/* ---------- Sprechblase (Baustein der Seite): .ka-blase > span bzw. span.ka-blase ---------- */
.ka-blase > span, span.ka-blase {
  display: inline-block; max-width: min(17rem, 100%); padding: 0.68rem 1rem 0.74rem;
  background: var(--c-panel); color: var(--fg);
  border: 1px solid color-mix(in srgb, var(--c-light) 24%, transparent);
  border-radius: 1.1rem 1.1rem 1.1rem 0.3rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; line-height: 1.25; letter-spacing: -0.01em;
  box-shadow: 0 14px 40px -18px rgb(0 0 0 / 0.7);
  transition: border-color 0.5s var(--ease), background-color 0.5s var(--ease), color 0.5s var(--ease);
}
.ka-blase--r > span, span.ka-blase--r { border-radius: 1.1rem 1.1rem 0.3rem 1.1rem; }
.ka-blase--klein > span { padding: 0.5rem 0.8rem 0.55rem; font-size: 0.86rem; font-weight: 500; }
.ka-blase--gleich > span, span.ka-blase--gleich, .ka-blase.is-frage > span {
  border-color: var(--c-accent); background: color-mix(in srgb, var(--c-panel) 84%, var(--c-accent)); color: var(--fg);
}
span.ka-blase--gleich::before, .ka-blase.is-frage > span::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 0.5rem; border-radius: 50%; background: var(--c-accent); vertical-align: 0.18em;
}
.ka-blase__weg { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted); }
.ka-blase__weg em { font-style: normal; margin-left: 0.35rem; color: var(--accent-ink); }

/* ---------- Hero ---------- */
/* Handy und Tablet (eine Spalte): Dachzeile, H1, Knopf, Mikrotext, Team-Zeile mit den Gesichtern, dann die Bühne mit den
   Fragen. So stehen Gesichter und Ring im ersten Bildschirm über dem Dock. Die Unterzeile folgt danach. */
@media (max-width: 900px) {
  .ka-hero > .eyebrow { order: 1; }
  .ka-hero > .hero__title { order: 2; }
  .ka-hero > .lpx-hero__cta { order: 3; }
  .ka-hero > .lpx-mikro { order: 4; }
  .ka-hero > .lpx-hero__vertrauen { order: 5; }
  .ka-hero > .lpx-hero__lead { order: 6; }
  .ka-hero > .ka-wolke { order: 7; }
}
@media (max-width: 640px) {
  .lp--ka .ka-hero .eyebrow { letter-spacing: 0.07em; gap: 0.55rem; }
  .lp--ka .lpx-hero { padding-top: 4.7rem; gap: 0.85rem; }
  .lp--ka .lpx-hero .hero__title { font-size: clamp(1.85rem, 8.6vw, 3.4rem); line-height: 1.02; }
  .lp--ka .lpx-hero__cta .btn--big { min-height: 58px; padding-block: 1rem; }
}
@media (max-width: 359px) {
  .lp--ka .lpx-hero .hero__title { font-size: clamp(1.7rem, 8.6vw, 2rem); }
  .ka-blase > span, span.ka-blase { font-size: 1rem; }
  .lp--ka .lpx-hero__cta .btn--big { font-size: 0.9rem; padding-inline: 0.75rem; }
}

/* Kurz-Anzeige (nur Telefon): die Telefon-Frage ist als erste hervorgehoben */
[data-lp="P1-K-K"] .ka-wolke__liste [data-quelle="0"]:first-child > span { border-color: var(--c-accent); background: color-mix(in srgb, var(--c-panel) 84%, var(--c-accent)); }

/* Fragen-Wolke: leere Szene-Bühne, die Blasen liegen daneben (nie in der Bühne) */
.ka-wolke { position: relative; min-height: 360px; margin-top: 0.2rem; }
@media (max-width: 640px) {
  /* Höhe so, dass die Wolke unter den Gesichtern noch über dem Dock endet (390x844: rund 320 px) */
  .ka-wolke { min-height: 0; height: clamp(270px, calc(100svh - 520px), 340px); }
  .lp--ka .ka-hero > .lpx-hero__vertrauen { margin-top: -0.25rem; }
  .ka-wolke .ka-blase > span { font-size: 1rem; padding: 0.55rem 0.85rem 0.6rem; }
  .ka-wolke .ka-blase--klein > span { font-size: 0.84rem; padding: 0.45rem 0.75rem 0.5rem; }
  .ka-wolke__liste > li { max-width: 74%; }
  /* am Handy nur Blasen, die neben den Ring passen (keine liegt auf dem Ring); Lage für die niedrigere Wolke */
  .ka-wolke__liste > .ka-blase--gross-nur { display: none; }
  .ka-wolke__liste > li:nth-child(2) { top: 15%; }
  .ka-wolke__liste > li:nth-child(3) { top: 58%; }
  .ka-wolke__liste > li:nth-child(4) { top: 75%; }
}
@media (max-width: 359px) {
  .ka-wolke__liste > .ka-blase--ab360 { display: none; }
  .ka-wolke__liste > li { max-width: 84%; }
  .ka-wolke .ka-blase > span { font-size: 0.92rem; }
}
.ka-wolke__buehne { position: absolute; inset: 0; min-height: 0; }
.ka-wolke__zeichen { width: min(56%, 300px); }
.ka-wolke__liste, .ka-sog__blasen { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none; }
.ka-wolke__liste > li, .ka-sog__blasen > li { position: absolute; left: var(--x); top: var(--y); translate: calc(var(--x) * -1) 0; width: max-content; max-width: 62%; }
.ka-wolke .ka-blase--klein > span { opacity: 0.78; }
.ka-wolke .ka-blase.is-frage > span { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .ka-wolke__liste > li > span { animation: ka-auf 0.8s var(--ease) both, ka-schweben 6.5s ease-in-out infinite; animation-delay: calc(0.25s + var(--d, 0s)), calc(1.2s + var(--d, 0s)); }
  .ka-wolke__liste > li:nth-child(even) > span { animation-duration: 0.8s, 7.4s; }
  .ka-sog__blasen > li > span { animation: ka-schweben 6.8s ease-in-out infinite; }
  .ka-sog__blasen > li:nth-child(even) > span { animation-duration: 7.6s; animation-delay: -2s; }
}
@media (prefers-reduced-motion: no-preference) {
  .ka-tippt i { animation: ka-tippen 1.4s ease-in-out infinite; }
  .ka-tippt i:nth-child(2) { animation-delay: 0.18s; }
  .ka-tippt i:nth-child(3) { animation-delay: 0.36s; }
}
@keyframes ka-tippen { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes ka-auf { from { opacity: 0; transform: translateY(12px) scale(0.94); } }
@keyframes ka-schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
/* Tablet (eine Spalte, breite Bühne): eigene Lage, wo eine Blase sonst eine andere berührt */
@media (min-width: 641px) and (max-width: 900px) {
  .ka-wolke__liste > li { left: var(--xt, var(--x)); top: var(--yt, var(--y)); translate: calc(var(--xt, var(--x)) * -1) 0; }
}
/* Computer: Bühne neben der ganzen Textspalte (lpx-hero--seite), großer Ring, sechs Blasen um den Ring, Abstand zum Dock */
@media (min-width: 901px) {
  .lp--ka .ka-hero .hero__title { font-size: clamp(2.5rem, 5vw, 5.6rem); }
  /* Höhe gedeckelt: die untersten Blasen bleiben auch in niedrigen Fenstern über dem Dock */
  .ka-hero.lpx-hero--seite > .ka-wolke { min-height: clamp(420px, 70svh, 680px); max-height: calc(100svh - 12rem); align-self: start; margin: 0 0 clamp(2.5rem, 7svh, 4.5rem); }
  .ka-wolke__liste > li { left: var(--xd); top: var(--yd); translate: calc(var(--xd) * -1) 0; }
  .ka-wolke .ka-blase > span { font-size: 1.15rem; }
  .ka-wolke .ka-blase--klein > span { font-size: 0.92rem; }
}
/* Niedrige Laptop-Fenster: kleinere Blasen */
@media (min-width: 901px) and (max-height: 800px) {
  .ka-wolke .ka-blase > span { font-size: 1rem; }
  .ka-wolke .ka-blase--klein > span { font-size: 0.85rem; }
}

/* ---------- Laufband mit den Fragen aus der Anzeige ---------- */
.ka-band .marquee__track span { color: var(--fg-muted); }
@media (min-width: 701px) { .ka-band .marquee__track span { font-size: 1.4rem; } }

/* ---------- Kennst du das? Posteingang ---------- */
.ka-problem { display: grid; gap: clamp(1.8rem, 5vh, 3rem); min-width: 0; }
.ka-stapel { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; }
.ka-stapel__kopf, .ka-stapel__tippt { display: none; }
.ka-stapel__eintrag { position: relative; display: grid; justify-items: start; gap: 0.35rem; max-width: 88%; }
.ka-stapel__eintrag--r { justify-self: end; justify-items: end; }
@media (min-width: 1001px) {
  .ka-stapel {
    grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem 0;
    background: linear-gradient(var(--line), var(--line)) 33.333% 0 / 1px 100% no-repeat, linear-gradient(var(--line), var(--line)) 66.666% 0 / 1px 100% no-repeat;
  }
  .ka-stapel > li { grid-column: var(--sp); padding: 0 1.1rem; }
  .ka-stapel > li[style*="--sp: 1"] { padding-left: 0; }
  .ka-stapel__kopf { display: flex; align-items: center; gap: 0.5rem; grid-row: 1; padding-bottom: 0.7rem !important; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg); }
  .ka-stapel__eintrag, .ka-stapel__eintrag--r { grid-row: var(--zl); max-width: none; justify-self: stretch; justify-items: start; }
  .ka-stapel__eintrag .ka-blase__weg { display: none; }
  .ka-stapel__eintrag--gleich .ka-blase__weg { display: inline-flex; position: absolute; top: -1.35rem; left: 1.1rem; }
  .ka-stapel__eintrag--gleich .ka-blase__weg .ka-ico { display: none; }
  .ka-stapel__eintrag--gleich .ka-blase__weg { font-size: 0; }
  .ka-stapel__eintrag--gleich .ka-blase__weg em { font-size: 0.72rem; margin: 0; }
  span.ka-blase--r { border-radius: 1.1rem 1.1rem 1.1rem 0.3rem; }
  /* leeres Feld der Spalte Website: schwache Blase „jemand tippt schon“ (nur Bild, aria-hidden) */
  .ka-stapel__tippt { display: block; grid-row: var(--zl); align-self: center; }
  span.ka-tippt { display: inline-flex; align-items: center; gap: 0.32rem; padding: 0.85rem 1.05rem; opacity: 0.6; border-style: dashed; box-shadow: none; }
  .ka-tippt i { width: 6px; height: 6px; border-radius: 50%; background: var(--fg-muted); }
  /* dieselbe Frage auf zwei Wegen: gepunktete Linie hinter den Blasen */
  .ka-stapel__eintrag--gleich::after { content: ""; position: absolute; z-index: -1; left: 1.1rem; width: calc(100% + 0.6rem); top: 50%; border-top: 2px dotted color-mix(in srgb, var(--c-accent) 60%, transparent); }
}
/* liegen gebliebene Blase: wird blass, sobald die dritte Zeile („… wen du zurückrufen wolltest“) erscheint (seite.js) */
[data-ka-liegen] .ka-blase, [data-ka-liegen] .ka-blase__weg { transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), border-color 0.9s var(--ease), background-color 0.9s var(--ease); }
.ka-stapel.is-liegen [data-ka-liegen] .ka-blase { opacity: 0.42; border-style: dashed; border-color: var(--line-strong); background: transparent; box-shadow: none; transform: translateY(6px); }
.ka-stapel.is-liegen [data-ka-liegen] .ka-blase__weg { opacity: 0.55; }
.ka-steigerung { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.ka-steigerung li { padding-left: 1rem; border-left: 1px solid var(--line-strong); font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.012em; color: var(--fg); }
.ka-schlusssatz { margin: 0; max-width: 22ch; font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; line-height: 1.08; letter-spacing: -0.025em; color: var(--accent-ink); text-wrap: balance; }
@media (min-width: 901px) {
  .ka-steigerung li { font-size: clamp(1.3rem, 1.9vw, 1.6rem); }
  .ka-schlusssatz { font-size: clamp(2rem, 3.4vw, 2.6rem); }
}

/* ---------- Drei Wege ---------- */
.ka-wege { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.ka-weg { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0.3rem 1rem; padding: 1.4rem 0; border-bottom: 1px solid var(--line-strong); }
.ka-weg::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--c-accent); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease); }
.ka-weg.is-aktiv::after { transform: scaleX(1); }
.ka-weg__ico { grid-row: span 2; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--accent-ink); transition: border-color 0.5s var(--ease), background-color 0.5s var(--ease); }
.ka-weg__ico .ka-ico { width: 1.4rem; height: 1.4rem; }
.ka-weg.is-aktiv .ka-weg__ico { border-color: var(--c-accent); background: color-mix(in srgb, var(--c-accent) 12%, transparent); }
.ka-weg__text { display: grid; gap: 0.3rem; }
.ka-weg__t { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; line-height: 1.05; letter-spacing: -0.024em; color: var(--fg); }
.ka-weg__text p { margin: 0; color: var(--fg-muted); }
.ka-weg__bei { grid-column: 2; margin: 0.4rem 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.6rem; color: var(--fg); font-size: 1rem; line-height: 1.4; }
.ka-weg__bei span { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); }
html.lpx-anim .ka-ico--z * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.9s cubic-bezier(0.33, 1, 0.68, 1); }
html.lpx-anim .is-spiel .ka-ico--z * { stroke-dashoffset: 0; }
.ka-hinweis { margin: 0; max-width: 34rem; color: var(--fg-muted); font-size: 1.0625rem; line-height: 1.55; }
.ka-wege__buehne { min-height: 180px; }
@media (max-width: 900px) { .ka-wege__buehne { display: none; } }
@media (min-width: 901px) {
  .ka-weg { grid-template-columns: 3.4rem minmax(0, 1.25fr) minmax(0, 1fr); gap: 0 1.4rem; padding: 1.8rem 0; align-items: start; }
  .ka-weg__ico { grid-row: auto; width: 3.4rem; height: 3.4rem; }
  .ka-weg__t { font-size: clamp(1.7rem, 2.4vw, 2.2rem); }
  .ka-weg__bei { grid-column: 3; margin: 0; padding-top: 0.35rem; flex-direction: column; gap: 0.35rem; }
}
@media (hover: hover) and (pointer: fine) { .ka-weg:hover::after { transform: scaleX(1); } .ka-weg:hover .ka-weg__ico { border-color: var(--c-accent); } }

/* ---------- Und wenn's wichtig ist (Teil von „Die KI antwortet für dich“): großer Satz, Sog-Bühne ---------- */
.ka-beidir { margin-top: clamp(2.6rem, 7vh, 4.5rem); }
.ka-beidir__satz { max-width: 24ch; }
.ka-sog-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem; margin-top: clamp(1.4rem, 3vh, 2.2rem); }
.ka-sog { position: relative; }
.ka-sog__buehne { height: 260px; min-height: 0; }
.ka-sog__ebene { position: relative; margin-top: -260px; padding-top: 260px; }
.ka-sog__blasen { bottom: auto; height: 260px; }
/* Läuft der Sog nicht (reduzierte Bewegung, ohne GSAP, ohne JavaScript), gilt sofort Zustand 3: Ring, Strom, Karte, keine Blasen */
.ka-sog-raster:not(.ka-sog--an) .ka-sog__blasen { display: none; }
@media (prefers-reduced-motion: reduce) { .ka-sog__blasen { display: none; } }
.ka-sog__strom { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ka-sog__linie { fill: none; stroke: var(--c-accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0.01 9; }
.ka-sog__maske { fill: none; stroke: #fff; stroke-width: 14; stroke-linecap: round; stroke-dasharray: 1 1; }
.ka-notiz { position: relative; z-index: 1; width: 100%; max-width: 21rem; margin: 1.6rem auto 0; padding: 1rem 1.15rem 1.15rem; background: var(--c-panel); border: 1px solid var(--line-strong); border-top: 2px solid var(--c-accent); border-radius: 1.2rem; box-shadow: 0 30px 70px -36px rgb(0 0 0 / 0.85); }
.ka-notiz__kopf { display: flex; justify-content: space-between; gap: 1rem; margin: 0; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-ink); }
.ka-notiz__kopf span + span { color: var(--fg-muted); }
.ka-notiz ul { list-style: none; margin: 0.8rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.ka-notiz li { display: flex; gap: 0.65rem; align-items: baseline; font-size: 0.98rem; line-height: 1.35; color: var(--fg-muted); }
.ka-notiz li b { color: var(--fg); font-weight: 600; }
.ka-notiz li::before { content: ""; flex: none; width: 0.95rem; height: 0.95rem; transform: translateY(0.16em); background: radial-gradient(ellipse 50% 21% at 50% 50%, transparent 76%, var(--fg) 79% 98%, transparent 100%), radial-gradient(ellipse 21% 50% at 50% 50%, transparent 76%, var(--accent-ink) 79% 98%, transparent 100%); }
.ka-notiz li.ka-notiz__ok::before { background: none; width: 0.6rem; height: 0.32rem; margin: 0 0.18rem 0 0.17rem; border-left: 2px solid var(--c-accent); border-bottom: 2px solid var(--c-accent); transform: translateY(-0.12em) rotate(-45deg); }
.ka-sog__text { display: grid; gap: 1rem; align-content: start; }
.ka-sog__text .lpx-cta { margin-top: 0.4rem; }
.ka-sog__lead { margin: 0; max-width: 34rem; color: var(--fg); font-size: 1.125rem; line-height: 1.5; }
/* erste Zeile: die Frage, die oben liegen geblieben ist, kommt hier hervorgehoben an */
.ka-notiz li.ka-notiz__neu { margin: 0 -0.55rem; padding: 0.45rem 0.55rem; border-radius: 0.6rem; background: color-mix(in srgb, var(--c-panel) 86%, var(--c-accent)); box-shadow: inset 2px 0 0 var(--c-accent); color: var(--fg); }
@media (min-width: 901px) {
  .ka-sog-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2rem, 4vw, 4rem); align-items: stretch; }
  .ka-sog { min-height: 135vh; }
  .ka-sog__buehne { position: sticky; top: 12vh; width: 62%; height: 76vh; }
  .ka-sog__ebene { position: sticky; top: 12vh; height: 76vh; margin-top: -76vh; padding: 0; }
  .ka-sog__blasen { right: 38%; height: 100%; }
  .ka-sog__blasen > li { left: var(--xd); top: var(--yd); translate: calc(var(--xd) * -1) 0; }
  .ka-sog__blasen > li > span { font-size: 0.95rem; }
  .ka-notiz { position: absolute; right: 0; bottom: 6%; margin: 0; width: min(23rem, 48%); }
  .ka-sog__text { position: sticky; top: 30vh; align-self: start; gap: 1.2rem; }
  .ka-sog__lead { font-size: clamp(1.15rem, 1.4vw, 1.3rem); }
}

/* ---------- So läuft's ---------- */
.ka-ablauf__cta { margin-top: 1rem; }
.ka-ablauf__cta .btn { min-height: 52px; }
@media (max-width: 700px) { .ka-ablauf__cta .btn { width: 100%; padding-inline: 1rem; } }
.ka-ablauf .lpx-schritt p { max-width: 32rem; }
/* Bühne niedriger als die Schrittliste, sonst klebt sie nicht und der Ring rutscht hinter das Dock */
@media (min-width: 901px) { #ablauf .lpx-buehne--sticky { top: 20vh; height: min(50vh, 440px); min-height: 320px; } }

/* ---------- So ist es eingestellt ---------- */
.ka-haken { gap: 0; }
.ka-haken li { padding: 1.15rem 0 1.15rem 2.4rem; border-top: 1px solid var(--line); }
.ka-haken li::before { top: 1.62rem; }
.ka-haken li b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.015em; color: var(--fg); }
.ka-haken li small { font-size: 1.0625rem; line-height: 1.45; margin-top: 0.3rem; }
.ka-recht { margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--line); gap: 0.4rem 1.5rem; }
/* reiner Text, kein Rahmen wie bei den Ghost-Knöpfen: sieht sonst wie drei klickbare Knöpfe aus */
.ka-recht li { position: relative; min-height: auto; padding: 0 0 0 1rem; border: none; border-radius: 0; background: none; font-family: var(--font-display); font-weight: 500; font-size: 0.9375rem; letter-spacing: 0; text-transform: none; color: var(--fg-muted); }
.ka-recht li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--c-accent); }
@media (min-width: 901px) {
  .ka-haken { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 5rem); }
  .ka-haken li { padding-block: 1.5rem; }
  .ka-haken li::before { top: 1.98rem; }
  .ka-haken li b { font-size: clamp(1.3rem, 1.8vw, 1.5rem); }
}

/* ---------- Referenzen: echte Seiten mit Bildschirmfoto ---------- */
.ka-refs { display: grid; gap: clamp(2.6rem, 7vh, 5rem); }
.ka-refs__intro { margin: 0 0 calc(clamp(1rem, 3vh, 2rem) - clamp(2.6rem, 7vh, 5rem)); max-width: 38rem; color: var(--fg-muted); font-size: 1.125rem; line-height: 1.55; }
.ka-refs > .lpx-cta .lpx-textcta { justify-self: start; }
.ka-ref { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
.ka-ref__bild { position: relative; display: block; padding: 0 11% 12% 0; border-radius: 1rem; }
.ka-ref__bild:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 4px; }
.ka-ref__bild .lpx-ref__screen { box-shadow: 0 30px 80px -40px rgb(0 0 0 / 0.8); }
.ka-ref__handy { position: absolute; right: 0; bottom: 0; width: 27%; height: auto; aspect-ratio: 390 / 844; object-fit: cover; object-position: top; border-radius: 1.1rem; border: 1px solid color-mix(in srgb, var(--c-light) 30%, transparent); background: var(--card); box-shadow: 0 24px 50px -20px rgb(0 0 0 / 0.9); transition: transform 0.6s var(--ease); }
.ka-ref__text { display: grid; gap: 0.7rem; align-content: start; justify-items: start; }
.ka-ref__text .lpx-ref__art { margin: 0; }
.ka-ref__text .lpx-ref__text { color: var(--fg-muted); }
.ka-refs__klein { margin-top: 0; }
.ka-refs__klein .lpx-ref--eigen .lpx-ref__link::after { content: none; }
@media (min-width: 901px) {
  .ka-refs__klein .lpx-ref { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) minmax(0, 3fr); }
  .ka-refs__klein .lpx-ref > div:last-child { justify-self: end; text-align: right; }
}
.ka-ehrlich { margin: 0; max-width: 46rem; color: var(--fg-muted); font-size: 1rem; line-height: 1.55; }
.ka-refs > .lpx-cta { margin-top: 0; }
@media (hover: hover) and (pointer: fine) { .ka-ref__bild:hover .ka-ref__handy { transform: translateY(-8px); } }
@media (min-width: 901px) {
  .ka-ref { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; column-gap: clamp(2.5rem, 5vw, 5rem); }
  .ka-ref--gespiegelt { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .ka-ref--gespiegelt .ka-ref__bild { order: 2; }
  .ka-ref .lpx-ref__marke { font-size: clamp(2.2rem, 3.4vw, 3.2rem); }
}

/* ---------- Team und Firma ---------- */
.ka-team { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
/* Sehr schmale Handys: lange Rollen („Erster Ansprechpartner“) dürfen umbrechen, sonst wird die Seite breiter als der Bildschirm */
@media (max-width: 359px) { .lp--ka .lpx-person .person__role { letter-spacing: 0.08em; } .lp--ka .lpx-person .person__role li { white-space: normal; } }
.ka-firma { margin: 0; border-top: 1px solid var(--line); }
.ka-firma > div { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); gap: 0.4rem 1rem; align-items: baseline; padding: 0.8rem 0; border-bottom: 1px solid var(--line); }
.ka-firma dt { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); }
.ka-firma dd { margin: 0; color: var(--fg); font-size: 1rem; line-height: 1.45; }
.ka-firma a { display: inline-flex; align-items: center; min-height: 44px; margin: -0.6rem 0; color: var(--fg); text-decoration: underline; text-decoration-color: var(--c-accent); text-underline-offset: 0.25em; }
@media (max-width: 380px) { .ka-firma > div { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1101px) {
  .ka-team { grid-template-columns: minmax(0, 4fr) minmax(0, 3fr); column-gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
}

/* ---------- Zusammenarbeit ---------- */
.ka-zusammen { display: grid; gap: 1rem; max-width: 40rem; }
.ka-zusammen p { margin: 0; color: var(--fg-muted); font-size: 1.125rem; line-height: 1.55; }
@media (min-width: 901px) { .ka-zusammen { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 70rem; column-gap: clamp(2rem, 5vw, 5rem); } }

/* ---------- Fragen mit Kontakt-Notiz ---------- */
.ka-fragen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.ka-fragen__seite { display: grid; gap: 0.8rem; justify-items: start; }
.ka-fragen__frage { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; line-height: 1.15; letter-spacing: -0.02em; color: var(--fg); }
.ka-fragen__seite .lpx-cta { margin-top: 0.2rem; width: 100%; }
@media (min-width: 901px) {
  .ka-fragen { grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); column-gap: clamp(2rem, 5vw, 5rem); align-items: start; }
  .ka-fragen__seite { position: sticky; top: 18vh; padding-top: 1.2rem; }
  .ka-fragen__seite .lpx-cta .btn { width: 100%; }
}

/* ---------- Schluss ---------- */
.ka-schluss__mikro { margin-top: 0.4rem; color: var(--fg); }
/* Handy: Schluss-Bühne etwas niedriger, damit der grüne Knopf höher sitzt */
@media (max-width: 700px) { .lp--ka .lpx-schluss__buehne { height: clamp(150px, 21svh, 220px); } }
.lp--ka .lpx-schluss .contact__hint { margin-top: 0.3rem; }

/* ---------- Handy: kürzere Abstände (Kopfzeile, Dock und Cookie-Banner regelt css/lpx.css) ---------- */
@media (max-width: 700px) {
  .lp--ka .chapter { padding-top: clamp(2rem, 4.5vh, 2.5rem); padding-bottom: 1rem; }
  .lp--ka .chapter__head { padding-top: 1.3rem; }
  .lp--ka .lpx-inhalt { margin-top: 1.4rem; }
  .lp--ka .lpx-cta { margin-top: 1.4rem; }
  .ka-refs { gap: 2.4rem; }
  .ka-recht { margin-top: 1rem; padding-top: 1rem; }
  .ka-beidir { margin-top: 2.4rem; }
}

/* Sehr kleine Handys (zum Beispiel 320x568): Hero etwas höher, damit der grüne Knopf über dem Cookie-Banner bleibt */
@media (max-width: 700px) and (max-height: 600px) { .lp--ka .lpx-hero { padding-top: 4.3rem; } }

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  .ka-weg::after, .ka-ref__handy, .lp--ka .ka-ico, [data-ka-liegen] .ka-blase, [data-ka-liegen] .ka-blase__weg { transition: none; }
}