/* ════════════════════════════════════════════════════════════════════
   thesen3 — thesenindividuelle Marker (Variante A · Stapel)
   Ergänzt css/thesen2.css. Löst das generische scribble()-System ab:
   pro These ein eigenes <svg> (Feld THESES[i].marker) + eigene Hover-Geste.
   Ruhezustand = Marker statisch sichtbar; Hover/Focus auf .v6-poster
   triggert die bedeutungstragende Bewegung. Quelle: Dev-Handoff 31.05.2026.
   ════════════════════════════════════════════════════════════════════ */

/* Alte generische Dauer-Wobble (aus thesen2.css) für diese Seite abschalten —
   die Marker animieren jetzt gezielt per Hover über ihre inneren .mk-* Pfade. */
.v6-fx-drift .v6-poster-mark svg{animation:none !important;}

/* ── WebKit/Safari Anti-Glitch ──────────────────────────────────────────
   Safari rendert animierte/zusammengesetzte Layer hier mit schwarzem
   Backing statt transparent. Drei Auslöser entschärfen:
   1) Foto trägt gleichzeitig filter:grayscale + transform-Hover (aus
      thesen2.css). filter+transform auf EINEM Element ist der klassische
      „schwarze Box"-Bug — Hover-Transform am Foto hier abschalten.
   2) Animierte Marker bekommen einen sauberen, eigenen Layer mit
      explizit transparentem Hintergrund.
   3) Das figure selbst als isolierten Stacking-Context promoten. */
.v6-fx-drift .v6-poster:hover .v6-poster-mark img{transform:none;}
.v6-fx-drift .v6-pfig{isolation:isolate;}
.v6-fx-drift .v6-pscribble{
  background:transparent;
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
}

/* Foto + Marker ~30% größer (weniger Graubereich drumrum).
   Foto 60%→78%; Marker-SVG 100%→130%, zentriert. Greift auf allen
   Breakpoints (Selektor schlägt die 60%/inset-Regeln aus thesen2.css). */
.v6-fx-drift .v6-pimg{width:78%;height:78%;}
.v6-fx-drift .v6-pscribble{
  inset:auto; top:-15%; left:-15%;
  width:130%; height:130%;
}

/* Gemeinsame Zeichen-Animation (mehrfach genutzt: 05, 09, 10) */
@keyframes mk-draw{to{stroke-dashoffset:0}}

/* 01 · „KI denkt" — Fragezeichen zeichnet sich, stockt an der Naht, Punkt zuletzt */
.v6-pscribble .mk-q{stroke-dasharray:100;stroke-dashoffset:0}
.v6-poster:hover .mk-q,.v6-poster:focus-within .mk-q{animation:mk-q-draw 1.4s cubic-bezier(.5,.05,.3,1) forwards}
@keyframes mk-q-draw{0%{stroke-dashoffset:100}55%{stroke-dashoffset:42}70%{stroke-dashoffset:42}100%{stroke-dashoffset:0}}
.v6-pscribble .mk-dot{opacity:0;transform-origin:center}
.v6-poster:hover .mk-dot,.v6-poster:focus-within .mk-dot{animation:mk-fade .3s ease 1.3s forwards}
@keyframes mk-fade{to{opacity:1}}

/* 02 · Zehn Stunden mehr — Spirale kreist endlos ohne Ankunft */
.v6-pscribble .mk-spiral{transform-origin:165px 165px}
.v6-poster:hover .mk-spiral,.v6-poster:focus-within .mk-spiral{animation:mk-spin 6s linear infinite}
@keyframes mk-spin{to{transform:rotate(360deg)}}

/* 03 · Führen heißt loslassen — Pfeil löst sich nach oben */
.v6-pscribble .mk-up,.v6-pscribble .mk-uphead{transition:transform 1.6s cubic-bezier(.4,0,.2,1),opacity 1.6s ease}
.v6-poster:hover .mk-up,.v6-poster:hover .mk-uphead,
.v6-poster:focus-within .mk-up,.v6-poster:focus-within .mk-uphead{transform:translateY(-22px);opacity:.35}

/* 04 · Panik und Hype — Winkel pulst in die Mitte (Drehpunkt) */
.v6-pscribble .mk-vmark{transform-origin:160px 150px}
.v6-poster:hover .mk-vmark,.v6-poster:focus-within .mk-vmark{animation:mk-pulse 1.2s ease forwards}
@keyframes mk-pulse{0%{transform:scale(.9);opacity:.7}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}

/* 05 · Der Freund — offener Kreis zeichnet sich, schließt sich nie */
.v6-pscribble .mk-open{stroke-dasharray:100;stroke-dashoffset:100}
.v6-poster:hover .mk-open,.v6-poster:focus-within .mk-open{animation:mk-draw 1.6s cubic-bezier(.4,.1,.2,1) forwards}

/* 06 · Das Risiko ist Passivität — Pfeil stößt träge durch den Türspalt */
.v6-pscribble .mk-arrow,.v6-pscribble .mk-arrowhead{transition:transform 1.3s cubic-bezier(.3,0,.4,1)}
.v6-poster:hover .mk-arrow,.v6-poster:hover .mk-arrowhead,
.v6-poster:focus-within .mk-arrow,.v6-poster:focus-within .mk-arrowhead{transform:translateX(14px)}

/* 07 · Stille wird Luxus — Strahlen ziehen sich zurück, Stille kehrt ein */
.v6-pscribble .mk-ray{stroke-dasharray:40;stroke-dashoffset:0;transition:stroke-dashoffset .6s ease,opacity .6s ease}
.v6-poster:hover .mk-ray,.v6-poster:focus-within .mk-ray{stroke-dashoffset:40;opacity:.12}
.v6-poster:hover .mk-ray:nth-child(2),.v6-poster:focus-within .mk-ray:nth-child(2){transition-delay:.06s}
.v6-poster:hover .mk-ray:nth-child(3),.v6-poster:focus-within .mk-ray:nth-child(3){transition-delay:.12s}
.v6-poster:hover .mk-ray:nth-child(4),.v6-poster:focus-within .mk-ray:nth-child(4){transition-delay:.12s}
.v6-poster:hover .mk-ray:nth-child(5),.v6-poster:focus-within .mk-ray:nth-child(5){transition-delay:.18s}
.v6-poster:hover .mk-ray:nth-child(6),.v6-poster:focus-within .mk-ray:nth-child(6){transition-delay:.18s}

/* 08 · Wer nicht weiß, wer er ist — offener Kreis pulsiert suchend */
.v6-pscribble .mk-openface{transform-origin:157px 165px}
.v6-poster:hover .mk-openface,.v6-poster:focus-within .mk-openface{animation:mk-search 2.4s ease-in-out infinite}
@keyframes mk-search{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.97)}}

/* 09 · Prompten war gestern — Wellen lösen sich auf, Durchstreichung zeichnet sich */
.v6-pscribble .mk-wave{stroke-dasharray:100;stroke-dashoffset:0;transition:stroke-dashoffset .5s ease,opacity .5s ease}
.v6-poster:hover .mk-wave,.v6-poster:focus-within .mk-wave{stroke-dashoffset:100;opacity:.1}
.v6-poster:hover .mk-wave:nth-child(2),.v6-poster:focus-within .mk-wave:nth-child(2){transition-delay:.12s}
.v6-poster:hover .mk-wave:nth-child(3),.v6-poster:focus-within .mk-wave:nth-child(3){transition-delay:.24s}
.v6-pscribble .mk-strike{stroke-dasharray:100;stroke-dashoffset:100}
.v6-poster:hover .mk-strike,.v6-poster:focus-within .mk-strike{animation:mk-draw 0.7s ease .2s forwards}

/* 10 · Produktivität ohne Reflexion — Kreis ums herausgelöste Blatt zeichnet sich */
.v6-pscribble .mk-circle{stroke-dasharray:100;stroke-dashoffset:100}
.v6-poster:hover .mk-circle,.v6-poster:focus-within .mk-circle{animation:mk-draw 1s cubic-bezier(.4,.1,.2,1) forwards}

/* Reduced Motion: Marker statisch, keine Bewegung */
@media (prefers-reduced-motion:reduce){
  .v6-pscribble *{animation:none !important;transition:none !important;}
}