/* ============================================================
   /kundengewinnung, Customer Journey Stresstest (Redesign 21.09.2026).
   Laedt NACH css/webseite.css und nutzt dessen Bausteine (w-): Hero, Faden,
   Knoten, CTA-Karten, Ablauf, FAQ, Abschluss. Hier steht nur, was diese Seite
   zusaetzlich braucht (k-). Der Faden ist hier die Journey selbst.
   Alle Werte aus tokens.css, Bewegung nach denselben Regeln wie /webseite.
   ============================================================ */

.k-zusatz { font-weight: 600; max-width: 56ch; padding-left: var(--raum-2); border-left: var(--akzentkante); }

/* ---------- 2 · Problem: zwei Blicke auf dieselbe Seite ---------- */
.k-problem__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--raum-4); align-items: center; }
.k-problem h2 { font-size: var(--text-3xl); font-weight: 800; }
.k-blicke { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--raum-2); align-items: start; }
.k-blick { display: grid; gap: 0.7rem; padding: var(--raum-2); border-radius: var(--radius); background: var(--farbe-flaeche); color: var(--farbe-text); }
.k-blick--innen { opacity: 0.72; transform: translateY(var(--raum-3)); }
.k-blick--aussen { box-shadow: var(--schatten-karte); }
.k-blick__titel { font-family: var(--schrift-display); font-weight: 700; font-size: var(--text-s); color: var(--farbe-akzent); }
.k-blick__zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; min-height: 2.4rem; font-size: var(--text-s); }
.k-blick__zeile em { flex-basis: 100%; font-style: normal; font-weight: 600; color: var(--farbe-akzent); transition: opacity 500ms ease, transform 500ms var(--kurve-ein); }
.k-blick__fuss { font-size: var(--text-s); color: var(--farbe-text-gedimmt); padding-top: 0.6rem; border-top: var(--linie); }
.k-wort { padding: 0.15em 0.5em; border-radius: var(--radius-klein); background: var(--farbe-flaeche-alt); font-weight: 600; }
.k-feld { flex: 1; padding: 0.4em 0.7em; border: var(--kontur); border-radius: var(--radius-klein); color: var(--farbe-text-gedimmt); }
.k-ok, .k-frage { position: relative; flex: none; width: 1.35rem; height: 1.35rem; border-radius: var(--radius-rund); display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 0.8rem; }
.k-ok { background: var(--farbe-akzent-hauch); color: var(--farbe-akzent); }
.k-ok::before { content: "✓"; }
.k-frage { background: var(--farbe-signatur); color: var(--farbe-text); }
.k-frage::before { content: "?"; }
.k-frage::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-rund); border: 2px solid var(--farbe-signatur); animation: w-puls var(--dauer-puls) ease-out infinite; }
.k-blick__zeile:nth-of-type(3) .k-frage::after { animation-delay: 800ms; }
.k-blick__zeile:nth-of-type(4) .k-frage::after { animation-delay: 1600ms; }
.k-blick__zeile:nth-of-type(2) em { transition-delay: 500ms; } .k-blick__zeile:nth-of-type(3) em { transition-delay: 900ms; } .k-blick__zeile:nth-of-type(4) em { transition-delay: 1300ms; }
html.w-js .k-blicke:not(.ist-da) .k-blick__zeile em { opacity: 0; transform: translateY(-4px); }

/* ---------- 3 · Journey: Stationen am Faden (kompakter als /webseite) ---------- */
.k-welt__kopf { padding-bottom: var(--raum-3); max-width: calc(46rem + 2 * var(--raum-2)); margin-left: max(0px, calc((100% - var(--container-max)) / 2)); }
.k-welt__kopf h2 { font-size: var(--text-3xl); font-weight: 800; }
.k-station { padding-block: var(--raum-3); }
.k-station .w-detail__grid { align-items: center; }
.k-station .w-knoten { align-self: start; }
.k-station h3 { font-size: var(--text-2xl); font-weight: 800; max-width: 22ch; }
.k-chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.k-chips li { padding: 0.35em 0.9em; border-radius: var(--radius-pille); border: var(--kontur); background: var(--farbe-flaeche); font-size: var(--text-s); font-weight: 600; }
.k-station .w-visual { position: relative; top: auto; align-self: center; min-height: 0; gap: var(--raum-1); padding: var(--raum-3); border-left: var(--akzentkante); }
.k-frage-box__satz { font-family: var(--schrift-display); font-weight: 700; font-size: var(--text-xl); line-height: 1.2; }
.k-frage-box::after { content: "?"; position: absolute; right: var(--raum-2); top: 50%; transform: translateY(-50%); font-family: var(--schrift-display); font-weight: 800; font-size: 9rem; line-height: 1; color: var(--farbe-akzent); opacity: 0.08; pointer-events: none; }
.k-frage-box > * { position: relative; z-index: 1; }
.k-cta-frei { padding-block: 0 var(--raum-sektion); }

/* ---------- 5 · Pruefpunkte: Protokoll-Bloecke ---------- */
.k-protokoll { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--raum-3) var(--raum-4); }
.k-pruef { padding-top: var(--raum-2); border-top: 3px solid var(--farbe-buehne); display: grid; gap: var(--raum-2); align-content: start; }
.k-pruef h3 { font-size: var(--text-xl); }
.k-pruef ul { list-style: none; padding: 0; display: grid; gap: 0.6rem; }
.k-pruef li { display: grid; grid-template-columns: 1.15rem minmax(0, 1fr); gap: 0.65rem; align-items: start; }
.k-pruef li::before { content: "✓"; width: 1.15rem; height: 1.15rem; margin-top: 0.2em; display: grid; place-items: center; border-radius: var(--radius-klein); background: var(--farbe-akzent); border: 2px solid var(--farbe-akzent); color: var(--farbe-auf-akzent); font-size: 0.7rem; font-weight: 800; line-height: 1; transition: background-color 350ms ease, color 350ms ease; }
.k-pruef li:nth-child(1)::before { transition-delay: 400ms; } .k-pruef li:nth-child(2)::before { transition-delay: 650ms; } .k-pruef li:nth-child(3)::before { transition-delay: 900ms; } .k-pruef li:nth-child(4)::before { transition-delay: 1150ms; } .k-pruef li:nth-child(5)::before { transition-delay: 1400ms; }
html.w-js .k-pruef:not(.ist-da) li::before { background: var(--farbe-flaeche); color: transparent; }

/* ---------- 6 · Beispiel-Funde ---------- */
.k-fundliste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--raum-3); align-items: start; }
.k-fund { display: grid; gap: var(--raum-2); padding: var(--raum-3); border-radius: var(--radius); background: var(--farbe-flaeche); color: var(--farbe-text); }
.k-fund:nth-child(2) { margin-top: var(--raum-3); }
.k-fund:nth-child(3) { margin-top: calc(var(--raum-3) * 2); }
.k-fund__kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem; font-size: var(--text-s); color: var(--farbe-text-gedimmt); font-weight: 600; }
.k-fund h3 { font-size: var(--text-xl); color: var(--farbe-text); }
.k-fund dl { display: grid; gap: var(--raum-2); }
.k-fund dt { font-family: var(--schrift-display); font-weight: 700; font-size: var(--text-s); color: var(--farbe-akzent); }
.k-fund dd { margin: 0; }
.k-fund__rat { padding: var(--raum-2); border-radius: var(--radius-klein); background: var(--farbe-flaeche-alt); border-left: var(--akzentkante); }
.k-prio { display: inline-block; padding: 0.2em 0.7em; border-radius: var(--radius-pille); font-style: normal; font-family: var(--schrift-display); font-weight: 700; font-size: 0.8rem; white-space: nowrap; }
.k-prio--sofort { background: var(--farbe-buehne); color: var(--farbe-auf-buehne); }
.k-prio--besser { background: var(--farbe-akzent); color: var(--farbe-auf-akzent); }
.k-prio--test { background: var(--farbe-flaeche-alt); color: var(--farbe-text); border: var(--kontur); }

/* ---------- 7 · Lieferumfang + Ergebnisdokument ---------- */
.k-liefer__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--raum-4); align-items: start; }
.k-liefer h2 { font-size: var(--text-3xl); font-weight: 800; max-width: 18ch; }
.k-umfang { list-style: none; padding: 0; margin-top: var(--raum-3); counter-reset: umfang; border-bottom: var(--linie); }
.k-umfang li { counter-increment: umfang; position: relative; padding: var(--raum-2) 0 var(--raum-2) 3.2rem; border-top: var(--linie); display: grid; gap: 0.3rem; }
.k-umfang li::before { content: counter(umfang); position: absolute; left: 0; top: var(--raum-2); width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border-radius: var(--radius-klein); background: var(--farbe-akzent-hauch); color: var(--farbe-akzent); font-family: var(--schrift-display); font-weight: 800; }
.k-umfang h3 { font-size: var(--text-l); }
.k-doku { position: sticky; top: 7.5rem; display: grid; gap: var(--raum-3); }
.k-doku__blatt { display: grid; gap: var(--raum-2); padding: var(--raum-3); border-radius: var(--radius); background: var(--farbe-flaeche); border: var(--kontur); box-shadow: var(--schatten-karte); transform: rotate(1.2deg); }
.k-doku__titel { display: flex; justify-content: space-between; gap: var(--raum-2); padding-bottom: var(--raum-2); border-bottom: 3px solid var(--farbe-buehne); font-family: var(--schrift-display); font-weight: 800; }
.k-doku__titel span { color: var(--farbe-text-gedimmt); font-weight: 600; }
.k-doku__gruppe { display: grid; gap: 0.5rem; }
.k-doku__zeile { position: relative; display: block; padding: 0.55rem 0.8rem 0.55rem 2.2rem; border-radius: var(--radius-klein); background: var(--farbe-flaeche-alt); font-size: var(--text-s); font-weight: 600; transition: opacity 500ms ease, transform 500ms var(--kurve-ein); }
.k-doku__zeile::before { content: ""; position: absolute; left: 0.8rem; top: 0.85rem; width: 0.8rem; height: 0.8rem; border: 2px solid var(--farbe-akzent); border-radius: var(--radius-klein); }
.k-doku__zeile--leer .v-balken { width: 70%; margin-block: 0.35rem; }
.k-doku__gruppe:nth-child(2) .k-doku__zeile:nth-of-type(1) { transition-delay: 400ms; } .k-doku__gruppe:nth-child(2) .k-doku__zeile:nth-of-type(2) { transition-delay: 600ms; }
.k-doku__gruppe:nth-child(3) .k-doku__zeile { transition-delay: 850ms; } .k-doku__gruppe:nth-child(4) .k-doku__zeile { transition-delay: 1100ms; }
html.w-js .k-doku:not(.ist-da) .k-doku__zeile { opacity: 0; transform: translateX(-10px); }
.k-format { list-style: none; padding: 0; display: grid; gap: 0.6rem; font-size: var(--text-s); }
.k-format li { padding-left: var(--raum-2); border-left: var(--akzentkante); }

/* ---------- 8 · Daten: zwei Ebenen ---------- */
.k-daten__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--raum-4); align-items: center; }
.k-daten h2 { font-size: var(--text-2xl); font-weight: 800; }
.k-ebenen { position: relative; display: grid; padding: 0 var(--raum-3) var(--raum-4) 0; }
.k-ebene { grid-area: 1 / 1; display: grid; gap: 0.3rem; align-content: start; min-height: 11rem; padding: var(--raum-3); border-radius: var(--radius); transition: transform 900ms var(--kurve-ein) 300ms; }
.k-ebene__name { font-family: var(--schrift-display); font-weight: 800; font-size: var(--text-xl); }
.k-ebene--daten { background: var(--farbe-flaeche-alt); border: 2px dashed var(--farbe-akzent); transform: translate(var(--raum-3), 7.5rem); padding-top: 4.5rem; min-height: 0; align-self: start; }
.k-ebene--aussen { z-index: 1; background: var(--farbe-buehne); color: var(--farbe-auf-buehne); box-shadow: var(--schatten-karte); margin-bottom: 7.5rem; }
.k-ebene--aussen .meta { color: var(--farbe-auf-buehne-gedimmt); }
html.w-js .k-ebenen:not(.ist-da) .k-ebene--daten { transform: translate(0, 1rem); }

/* ---------- 9 · Erfahrung ---------- */
.k-erfahrung__grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--raum-4); align-items: center; }
.k-erfahrung h2 { font-size: var(--text-3xl); font-weight: 800; max-width: 18ch; }
.k-felder { list-style: none; padding: 0; margin-top: var(--raum-3); display: flex; flex-wrap: wrap; gap: 0.5rem 0; }
.k-felder li { display: flex; align-items: center; font-family: var(--schrift-display); font-weight: 700; font-size: var(--text-s); padding: 0.4em 0.9em; border-radius: var(--radius-pille); background: var(--farbe-akzent-hauch); color: var(--farbe-buehne); }
.k-felder li { position: relative; margin-right: 1.4rem; }
.k-felder li:not(:last-child)::after { content: ""; position: absolute; right: -1.4rem; top: 50%; width: 1.4rem; height: 2px; background: var(--farbe-akzent); opacity: 0.4; }
.k-stimme { margin: 0; display: grid; gap: var(--raum-2); padding: var(--raum-3); border-radius: var(--radius); border: var(--kontur); border-left: var(--akzentkante); background: var(--farbe-flaeche); }
.k-stimme blockquote { font-size: var(--text-l); line-height: 1.4; }
.k-stimme figcaption { font-weight: 600; }

/* ---------- 10 · Ueber Paul ---------- */
.k-paul__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--raum-4); align-items: center; }
.k-paul h2 { font-size: var(--text-3xl); font-weight: 800; }
.k-seite .k-zitat { font-family: var(--schrift-display); font-weight: 700; font-size: var(--text-2xl); line-height: 1.2; padding-left: var(--raum-3); border-left: 4px solid var(--farbe-signatur); }

/* ---------- 13 · Preis ---------- */
.k-preis__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--raum-4); align-items: start; }
.k-preis h2 { font-size: var(--text-3xl); font-weight: 800; }
.k-preis .knopf { margin-top: var(--raum-1); }
.k-punkte-eins { grid-template-columns: minmax(0, 1fr); margin-top: var(--raum-2); font-weight: 400; }

@media (max-width: 960px) {
  .k-problem__grid, .k-liefer__grid, .k-daten__grid, .k-erfahrung__grid, .k-paul__grid, .k-preis__grid { grid-template-columns: minmax(0, 1fr); gap: var(--raum-3); }
  .k-protokoll { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--raum-3); }
  .k-fundliste { grid-template-columns: minmax(0, 1fr); }
  .k-fund:nth-child(2), .k-fund:nth-child(3) { margin-top: 0; }
  .k-doku { position: static; }
  .k-welt__kopf { margin-left: 0; }
  .k-station { padding-block: var(--raum-2); }
  .k-station h3 { font-size: var(--text-xl); }
  .k-station .w-visual { margin-top: var(--raum-2); padding: var(--raum-2); }
  .k-frage-box__satz { font-size: var(--text-l); }
  .k-frage-box::after { font-size: 6rem; }
  .k-cta-frei { padding-block: 0 var(--raum-4); }
  .k-seite .k-zitat { font-size: var(--text-xl); }
}
@media (max-width: 600px) {
  .k-protokoll { grid-template-columns: minmax(0, 1fr); }
  .k-blicke { grid-template-columns: minmax(0, 1fr); }
  .k-blick--innen { transform: none; }
  .k-doku__blatt { transform: none; }
  .k-felder li { margin-right: 0.9rem; }
  .k-felder li:not(:last-child)::after { right: -0.9rem; width: 0.9rem; }
  .k-ebene--daten { transform: translate(var(--raum-2), 7.5rem); }
  .k-ebenen { padding-right: var(--raum-2); }
}