/* Scroll-Animationen Startseite: Zitat Wort für Wort, mitwachsende Linie, KI-Check-Radar.
   Nur Startseite (wird über extraCss eingebunden). CI: --anth, --off, --grey, --orange, --white aus global.css/home.css. */

/* ---------- 1) Zitat Wort für Wort ---------- */
.qz-wrap{padding-top:88px}
.qz{margin:0;max-width:1040px;margin-inline:auto;text-align:left}
.qz-mark{display:block;width:44px;height:44px;margin-bottom:22px}
.qz-text{font-family:var(--head);font-weight:400;font-size:clamp(2.2rem,6vw,4.75rem);line-height:1.14;letter-spacing:.005em;color:var(--anth);margin:0;text-wrap:balance}
.qz .qz-name{display:flex;align-items:center;gap:12px;margin-top:28px;font-size:16px;font-weight:600;color:var(--anth)}
.qz .qz-name::before{content:"";width:28px;height:2px;background:var(--orange)}
.qw{display:inline;transition:color .25s ease}
.qw-blk{display:inline-block;position:relative;white-space:nowrap}
.qz-js .qw{color:var(--grey)}
.qz-js .qw.on{color:var(--anth)}
.qz-js .qz-name{opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease}
.qz-js .qz-name.on{opacity:1;transform:none}
.qz-line{position:absolute;left:0;bottom:-.1em;pointer-events:none;overflow:visible}
.qz-line path{fill:none;stroke:var(--orange);stroke-width:7;stroke-linecap:round;transition:stroke-dashoffset .7s cubic-bezier(.5,0,.2,1)}

/* ---------- 2) Mitwachsende Linie bei "Zusammenarbeit" ---------- */
/* senkrechter Ablauf auf allen Breiten (auf dem Handy war er das schon) */
.road.rd{--rd-d:64px;grid-template-columns:1fr;gap:56px;max-width:880px}
.road.rd::before{display:none}
.road.rd .rstep{padding-left:calc(var(--rd-d) + 28px);height:auto}
.road.rd .rdot{position:absolute;left:0;top:0;width:var(--rd-d);height:var(--rd-d)}
.road.rd .rdot svg{width:calc(var(--rd-d)*.44);height:calc(var(--rd-d)*.44)}
.road.rd .rwhen{margin-top:0}
.rd-line{position:absolute;width:3px;background:var(--off);border-radius:2px;z-index:0;pointer-events:none}
.rd-fill{position:absolute;inset:0;background:var(--orange);border-radius:2px;transform:scaleY(0);transform-origin:top center;will-change:transform}
.rd-js .rdot{transition:background-color .3s ease,border-color .3s ease}
.rd-js .rstep>*:not(.rdot){opacity:.35;transform:translateX(26px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
.rd-js .rstep.on>*:not(.rdot){opacity:1;transform:none}
.rd-js .rstep.on .rdot{background:var(--orange);border-color:var(--orange);animation:rdPop .5s cubic-bezier(.3,1.4,.5,1)}
.rd-js .rstep.on .rdot svg circle{fill:#000;stroke:#000}
@keyframes rdPop{0%{transform:scale(1)}45%{transform:scale(1.08)}100%{transform:scale(1)}}
@media (max-width:640px){
  .road.rd{--rd-d:48px;gap:44px}
  .road.rd .rstep{padding-left:calc(var(--rd-d) + 20px)}
  .rd-js .rstep>*:not(.rdot){transform:translateX(16px)}
  .rd-js .rstep.on>*:not(.rdot){transform:none}
}

/* ---------- 3) KI-Check-Radar (Beispielprofil) ---------- */
/* Standard = heller Untergrund, im dunklen Abschnitt (.bg-dark) umgeschaltet */
.rc{--rc-bg:var(--white);--rc-bd:var(--grey);--rc-tx:var(--anth);--rc-mut:var(--anth);--rc-grid:var(--grey);--rc-grid-op:.9;--rc-tag-bg:var(--orange);--rc-tag-tx:#000;
  margin-top:36px;max-width:440px;padding:22px 22px 18px;background:var(--rc-bg);border:1px solid var(--rc-bd);border-radius:20px;color:var(--rc-tx)}
.bg-dark .rc{--rc-bg:rgba(255,255,255,.07);--rc-bd:rgba(199,199,197,.45);--rc-tx:var(--white);--rc-mut:var(--grey);--rc-grid-op:.45}
.rc-head{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px}
.rc-tag{display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:12px;background:var(--rc-tag-bg);color:var(--rc-tag-tx);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.rc .rc-sub{font-size:14.5px;font-weight:600;color:var(--rc-tx)}
.rc-svg{display:block;width:100%;height:auto;margin-top:6px;overflow:visible}
.rc-ring,.rc-axis{fill:none;stroke:var(--rc-grid);stroke-opacity:var(--rc-grid-op);stroke-width:1}
.rc-area{fill:rgba(255,145,77,.22);stroke:var(--orange);stroke-width:2.5;stroke-linejoin:round}
.rc-dot{fill:var(--orange)}
.rc-name{font-family:var(--body);font-size:13px;font-weight:600;fill:var(--rc-tx)}
.rc-val{font-family:var(--body);font-size:15px;font-weight:700;fill:var(--rc-tx);font-variant-numeric:tabular-nums}
.rc-total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:6px;padding-top:14px;border-top:1px solid var(--rc-bd)}
.rc .rc-total-k{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--rc-mut)}
.rc .rc-total-v{font-size:15px;font-weight:600;color:var(--rc-tx)}
.rc-total-v b{font-family:var(--head);font-weight:400;font-size:40px;line-height:1;margin-right:4px;font-variant-numeric:tabular-nums}
.rc .rc-note{display:block;margin-top:10px;font-size:12.5px;line-height:1.45;color:var(--rc-mut)}

/* Auf Tablet und Handy steht die Karte nach dem Check selbst, damit er nicht nach unten rutscht */
@media (max-width:1040px){
  .check-wrap{row-gap:0!important}
  .check-intro{display:contents}
  .check-intro>*{order:1}
  .check-wrap>.app{order:2;margin-top:40px}
  .check-intro>.rc{order:3;margin-top:40px;max-width:520px}
}

@media (prefers-reduced-motion:reduce){
  .qw,.qz-js .qz-name,.qz-line path,.rd-js .rdot,.rd-js .rstep>*:not(.rdot){transition:none!important}
  .rd-js .rstep.on .rdot{animation:none!important}
}