/* iterthink Homepage v7 - portiert aus mockups/iterthink/home-v7-de.html (<style>-Block). */
/* ============ Basis ============ */
html { scroll-behavior: smooth; overflow-x: clip; }
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid #4f46e5; outline-offset: 2px; border-radius: 4px; }

/* ============ Reveal-System (ein IO, once, mit Sicherheitsnetz) ============ */
@media (prefers-reduced-motion: no-preference) {
  .js-anim .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--i, 0) * 80ms); }
  .js-anim .reveal.is-visible { opacity: 1; transform: none; }
}

/* ============ Diff-Signatur ============ */
.diff-del { position: relative; color: #e05252; white-space: nowrap; }
.diff-del::after { content: ""; position: absolute; left: 0; top: 52%; height: 0.06em; min-height: 2px; width: 100%; background: #dc2626; transform-origin: left center; }
.diff-ins { background: rgba(245, 185, 66, .26); border-bottom: 2px solid #d97706; padding: 0 .12em; border-radius: 2px; white-space: nowrap; }
.on-dark .diff-ins, .demo-doc .diff-ins { color: #fde68a; }
@media (prefers-reduced-motion: no-preference) {
  .js-anim .diff-draw .diff-del::after { width: 0; }
  .js-anim .diff-draw.is-visible .diff-del::after { width: 100%; transition: width .55s cubic-bezier(.16,1,.3,1) .2s; }
  .js-anim .diff-draw .diff-ins { background-color: transparent; border-bottom-color: transparent; }
  .js-anim .diff-draw.is-visible .diff-ins { background-color: rgba(245,185,66,.26); border-bottom-color: #d97706; transition: background-color .45s ease-out .55s, border-bottom-color .45s ease-out .55s; }
}

/* ============ Seiten-Buehne: driftende Farbfelder + Papierlinien, fixed hinter allem ============ */
.hero-lines { position: absolute; inset: 0; background-image: linear-gradient(to bottom, rgba(26,31,75,.05) 1px, transparent 1px); background-size: 100% 34px; mask-image: radial-gradient(75% 70% at 50% 42%, black, transparent); }
.hero-blob { position: absolute; border-radius: 9999px; filter: blur(90px); }
@media (prefers-reduced-motion: no-preference) {
  .hero-blob-a { animation: blobdrift-a 19s ease-in-out infinite; }
  .hero-blob-b { animation: blobdrift-b 23s ease-in-out infinite; }
  @keyframes blobdrift-a { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(70px,-50px) scale(1.1); } 66% { transform: translate(-50px,40px) scale(.94); } }
  @keyframes blobdrift-b { 0%,100% { transform: translate(0,0) scale(1); } 40% { transform: translate(-60px,50px) scale(1.08); } 75% { transform: translate(50px,-30px) scale(.95); } }
}
.hero-spot { position: absolute; width: 640px; height: 640px; margin: -320px 0 0 -320px; border-radius: 9999px; background: radial-gradient(circle, rgba(79,70,229,.09), transparent 62%); will-change: transform; }
.chip-par, .blob-par { position: absolute; will-change: transform; }

/* ============ v5: dunkler Hero (eigene Buehne, endet mit der Section) ============ */
.hero-lines-dark { background-image: linear-gradient(to bottom, rgba(255,255,255,.055) 1px, transparent 1px); mask-image: radial-gradient(80% 75% at 50% 45%, black, transparent); }
.hero-spot-dark { background: radial-gradient(circle, rgba(129,140,248,.13), transparent 62%); }
/* Bicolor-Glow hinter der Person: Magenta links, Indigo rechts (Streiflicht-Echo) */
.hero-glow { background:
  radial-gradient(42% 48% at 28% 44%, rgba(217,70,239,.20), transparent 70%),
  radial-gradient(48% 52% at 74% 40%, rgba(79,70,229,.26), transparent 70%);
  filter: blur(10px); }

/* ============ Hero-Chips (Requisiten) ============ */
@media (prefers-reduced-motion: no-preference) {
  .js-anim .chip { opacity: 0; transform: translateY(14px) rotate(var(--rot, 0deg)) scale(.94); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.34,1.2,.4,1); transition-delay: calc(var(--i) * 130ms + 500ms); }
  .js-anim .chip.is-visible { opacity: 1; transform: rotate(var(--rot, 0deg)); }
  .chip-float { animation: chipfloat 7s ease-in-out infinite; animation-delay: calc(var(--i) * -1.7s); }
  @keyframes chipfloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -8px; } }
}
.chip { rotate: var(--rot, 0deg); }

/* ============ Akt-Pinning (CSS sticky + Scrub via rAF-Lerp) ============ */
.act { position: relative; }
/* padding-top haelt die Section-Ueberschrift frei von der fixed Pill-Nav (top-4 + h-14) */
.act-sticky { position: sticky; top: 0; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding-top: 6rem; padding-bottom: 1.5rem; }
/* Akt-Hintergrund: Fortsetzung der Hero-Buehne */
.act-lines { mask-image: radial-gradient(85% 80% at 50% 50%, black, transparent); }
[data-doc-wrap], [data-doc2-wrap] { will-change: transform; }
/* Erzaehler-Zeilen: Werte kommen scrub-gesteuert inline aus dem rAF-Loop */
.narr { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .js-anim .narr { opacity: .15; transform: translateY(26px); will-change: transform, opacity; }
}
/* Problem-Loesung-Akt: Karten stehen statisch, alle voll sichtbar (Scroll-Scrub auf Kundenwunsch entfernt) */
.ps-el { opacity: 1; }
/* Fortschritts-Spur der Akte */
.act-track { position: relative; width: 2px; border-radius: 1px; background: rgba(100,116,139,.22); }
.act-track-fill { position: absolute; inset: 0; border-radius: 1px; background: #4f46e5; transform-origin: top; transform: scaleY(var(--p, 1)); }
/* SIGNED-Stempel (Akt 1, Phase 3) */
.doc-stamp { position: absolute; right: 1.4rem; bottom: 1.1rem; rotate: -8deg; border: 2px solid rgba(52,211,153,.75); color: #6ee7b7; padding: .3rem .7rem; border-radius: .375rem; font-family: "JetBrains Mono", monospace; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; opacity: 0; scale: 1.35; transition: opacity .3s ease-out, scale .3s cubic-bezier(.34,1.4,.5,1); }
[data-doc][data-phase="3"] .doc-stamp, html:not(.js-anim) .doc-stamp { opacity: 1; scale: 1; }
/* Fenster-Phasen: Crossfade statt Display-Sprung (beide Varianten sind gleich breit) */
.ph-swap { position: relative; display: inline-block; }
.ph-swap .ph { transition: opacity .5s ease-out; }
.ph-swap .ph-edited { position: absolute; inset: 0; }
[data-doc] .ph-clean { opacity: 0; }
[data-doc] .ph-edited { opacity: 1; }
[data-doc][data-phase="1"] .ph-clean { opacity: 1; }
[data-doc][data-phase="1"] .ph-edited { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .js-anim [data-doc] { transition: transform .45s cubic-bezier(.16,1,.3,1); }
  .js-anim [data-doc].pulse { transform: scale(1.006); }
}
[data-doc] .doc-chip { opacity: 0; transform: translateY(6px) rotate(var(--rot,0deg)); transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1); }
[data-doc].chip-on .doc-chip, html:not(.js-anim) [data-doc] .doc-chip { opacity: 1; transform: rotate(var(--rot,0deg)); }

/* Akt 2: Flags erscheinen phasenweise (Diff -> Impact -> Human Proof) */
[data-doc2] .flag { opacity: 0; transform: translateY(10px); transition: opacity .55s ease-out, transform .55s cubic-bezier(.16,1,.3,1); }
[data-doc2] .flag.on, html:not(.js-anim) [data-doc2] .flag { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .js-anim [data-doc2] .scanline { position: absolute; inset: 0; background: linear-gradient(180deg, transparent, rgba(79,70,229,.16) 46%, rgba(79,70,229,.16) 54%, transparent); transform: translateY(-100%); opacity: 0; pointer-events: none; }
  .js-anim [data-doc2].scan-on .scanline { opacity: 1; animation: scanmove 1s cubic-bezier(.4,0,.2,1) 1 forwards; }
  @keyframes scanmove { to { transform: translateY(100%); opacity: 0; } }
}

/* ============ Text-Reveal: Zeilen sliden aus Maske (patternbreak-Stil) ============ */
/* Maskenfenster oben/unten erweitern (Umlaut-Punkte, Unterlaengen); overflow:hidden clippt an der Border-Box und schneidet Ink-Overflow ab */
.tr-line { display: block; clip-path: inset(-0.25em 0 -0.3em 0); }
.tr-inner { display: block; padding-top: .08em; margin-top: -.08em; padding-bottom: .26em; margin-bottom: -.26em; }
@media (prefers-reduced-motion: no-preference) {
  .js-anim .tr-reveal .tr-inner { transform: translateY(135%); transition: transform .95s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--l, 0) * 95ms); }
  .js-anim .tr-reveal.is-visible .tr-inner { transform: none; }
}

/* ============ Vorhang-Overlap: Folge-Section gleitet ueber den Pin ============ */
.curtain-top { box-shadow: 0 -32px 80px rgba(10, 12, 40, .35); }

/* ============ Manifest (dunkles Kapitel) ============ */
.manifest-line { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .js-anim .manifest-line { opacity: .14; transition: opacity .6s ease-out; }
  .js-anim .manifest-line.is-visible { opacity: 1; }
}

/* ============ Audit-Log ============ */
.log-line { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .js-anim .log-line { opacity: 0; transform: translateY(6px); transition: opacity .4s ease-out, transform .4s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--i) * 320ms); }
  .js-anim .is-visible .log-line { opacity: 1; transform: none; }
  .js-anim .log-seal { opacity: 0; transform: scale(.92); transition: opacity .4s ease-out 1.5s, transform .4s cubic-bezier(.34,1.3,.5,1) 1.5s; }
  .js-anim .is-visible .log-seal { opacity: 1; transform: none; }
}

/* ============ Comparison Scan-Line + Check-Pop ============ */
@media (prefers-reduced-motion: no-preference) {
  .js-anim .check-pop { opacity: 0; transform: scale(.6); transition: opacity .35s ease-out, transform .35s cubic-bezier(.34,1.3,.5,1); transition-delay: calc(var(--i) * 90ms + 200ms); }
  .js-anim .is-visible .check-pop { opacity: 1; transform: none; }
  .js-anim .col-scan { position: relative; }
  .js-anim .col-scan::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent, rgba(79,70,229,.10) 45%, rgba(79,70,229,.10) 55%, transparent); transform: translateY(-100%); opacity: 0; pointer-events: none; }
  .js-anim .col-scan.is-visible::after { opacity: 1; animation: tblscan 1.2s cubic-bezier(.4,0,.2,1) .1s 1 forwards; }
  @keyframes tblscan { to { transform: translateY(100%); opacity: 0; } }
}

/* ============ Familie-Kette ============ */
@media (prefers-reduced-motion: no-preference) {
  .js-anim .chain-node { opacity: 0; transform: translateY(10px); transition: opacity .55s ease-out, transform .55s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--i) * 160ms); }
  .js-anim .is-visible .chain-node { opacity: 1; transform: none; }
}

/* ============ Marquee ============ */
@media (prefers-reduced-motion: no-preference) {
  .marquee-track { animation: marquee 45s linear infinite; }
  @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
}

/* ============ Guess-Game ============ */
/* Dunkle Section: Hover hellt auf statt dunklem Schatten (blitzte auf Navy auf); will-change verhindert Layer-Flackern */
.guess-card { transition: transform .25s cubic-bezier(.16,1,.3,1), background-color .25s ease-out; will-change: transform; }
.guess-card:hover { transform: translateY(-2px); background-color: rgba(255,255,255,.09); }
.guess-reveal { display: none; }
.guess-done .guess-reveal { display: block; }
.guess-done .guess-hint { display: none; }
.guess-done .guess-card { pointer-events: none; }
/* Helle Variante des Guess-Games (auf hellem Hintergrund) */
.guess-light .guess-card:hover { background-color: rgba(46,44,110,.045); }

/* ============ Buttons / Sticky ============ */
.btn-lift { transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s cubic-bezier(.16,1,.3,1), background-color .2s ease-out, border-color .2s ease-out, color .2s ease-out; will-change: transform; }
.btn-lift:hover { transform: translateY(-1px); }
.btn-lift:active { transform: translateY(0) scale(.98); }
#sticky-cta { transform: translateY(140%); opacity: 0; pointer-events: none; transition: transform .5s cubic-bezier(.16,1,.3,1), opacity .4s ease-out; }
#sticky-cta.is-on { transform: none; opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { #sticky-cta { transition: none; } }