/* „So liest eine KI Ihre Seite“ (Startseite und /ki-check/).
   Animation: nur transform und opacity, eine Schleife von 12 s, pausiert außerhalb des Bildschirms und per Knopf,
   „weniger Bewegung“ zeigt den Endzustand. Kein Inline-Style, kein Verlauf, kein Glow. */

.kcz { margin: 0; display: grid; gap: var(--s-4); min-width: 0; }
.kcz-buehne { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, .8fr); gap: var(--s-3); align-items: center;
  padding: var(--s-5); background: var(--petrol); color: var(--on-petrol, #fff); min-width: 0; }
.kcz-seite, .kcz-antwort { display: grid; gap: 8px; min-width: 0; padding: var(--s-3); background: var(--petrol-ink, #0C3A46);
  border: 1px solid rgba(255, 255, 255, .28); position: relative; overflow: hidden; }
.kcz-kopf { font: 600 var(--t-12)/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.kcz-zeile { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: var(--s-2); align-items: center; position: relative; }
.kcz-name { font-size: var(--t-13); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kcz-bar { display: block; height: 8px; position: relative; background: rgba(255, 255, 255, .18); overflow: hidden; }
.kcz-bar::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left center; transform: scaleX(1); }
.kcz-zeile::after { content: ""; position: absolute; right: -2px; top: 50%; width: 8px; height: 8px; margin-top: -4px;
  background: var(--ok-bright, #7FCB9C); transform: scale(1); }
.kcz-pfeil { width: 40px; height: 14px; color: #fff; opacity: .9; }
.kcz-antwort .kcz-zeile-a { display: block; height: 8px; background: rgba(255, 255, 255, .55); }
.kcz-a1 { width: 92%; } .kcz-a2 { width: 78%; } .kcz-a3 { width: 56%; }
.kcz-quelle { font: 500 var(--t-12)/1.3 var(--f-mono); opacity: .85; border-top: 1px solid rgba(255, 255, 255, .28); padding-top: 6px; }
.kcz-halt { justify-self: start; font: 600 var(--t-13)/1 var(--f-text); padding: 10px 14px; min-height: 44px; background: transparent;
  color: var(--text); border: 1px solid var(--line-2); cursor: pointer; }
.kcz-halt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kcz-liste { list-style: none; margin: 0; padding: 0; counter-reset: kcz; display: grid; gap: 0; border-top: 1px solid var(--petrol); }
.kcz-liste li { counter-increment: kcz; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--s-3); padding: 10px 0; border-bottom: 1px solid var(--line); }
.kcz-liste li::before { content: counter(kcz); font: 600 var(--t-14) var(--f-mono); color: var(--petrol); grid-row: span 2; }
.kcz-liste strong { font-family: var(--f-display); font-size: var(--t-16); }
.kcz-liste span { color: var(--text-2); font-size: var(--t-14); max-width: 60ch; }

@media (max-width: 640px) {
  .kcz-buehne { grid-template-columns: minmax(0, 1fr); padding: var(--s-4); }
  .kcz-pfeil { transform: rotate(90deg); justify-self: center; }
  .kcz-zeile { grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); }
}

@media (prefers-reduced-motion: no-preference) {
  .kcz-bar::after { animation: kcz-lesen 12s cubic-bezier(.4, 0, .2, 1) infinite both; animation-delay: calc(var(--i, 0) * .9s); will-change: transform; }
  .kcz-zeile::after { animation: kcz-haken 12s ease-out infinite both; animation-delay: calc(var(--i, 0) * .9s + .8s); will-change: transform; }
  .kcz-seite::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 36px; background: rgba(255, 255, 255, .12);
    pointer-events: none; animation: kcz-strahl 12s linear infinite both; will-change: transform; }
  .kcz-antwort { animation: kcz-karte 12s ease-out infinite both; animation-delay: 6.2s; will-change: transform, opacity; }
  .kcz--aus *, .kcz--aus *::before, .kcz--aus *::after, .kcz--halt *, .kcz--halt *::before, .kcz--halt *::after { animation-play-state: paused !important; }
}
.kcz-zeile:nth-of-type(1) { --i: 0; } .kcz-zeile:nth-of-type(2) { --i: 1; } .kcz-zeile:nth-of-type(3) { --i: 2; }
.kcz-zeile:nth-of-type(4) { --i: 3; } .kcz-zeile:nth-of-type(5) { --i: 4; } .kcz-zeile:nth-of-type(6) { --i: 5; }
@keyframes kcz-lesen { 0% { transform: scaleX(0); } 14% { transform: scaleX(1); } 82% { transform: scaleX(1); } 92%, 100% { transform: scaleX(0); } }
@keyframes kcz-haken { 0%, 4% { transform: scale(0); } 10%, 82% { transform: scale(1); } 92%, 100% { transform: scale(0); } }
@keyframes kcz-strahl { 0% { transform: translateY(-40px); opacity: 0; } 4% { opacity: 1; } 52% { transform: translateY(210px); opacity: 1; } 56%, 100% { transform: translateY(220px); opacity: 0; } }
@keyframes kcz-karte { 0% { opacity: 0; transform: translateX(-10px); } 8%, 78% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: translateX(-10px); } }

/* Teaser auf der Startseite */
.kct { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 960px) { .kct { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s-8, 56px); } }
.kct-text { display: grid; gap: var(--s-3); align-content: start; }
.kct-text h2 { text-wrap: balance; }
.kct-text p { margin: 0; max-width: 58ch; }
@media print { .kcz-halt { display: none; } }
.kct-text .check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.kct-text .check-list li { padding-left: var(--s-4); position: relative; color: var(--text-2); }
.kct-text .check-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; background: var(--petrol); }