/*
 * accents.css — „handgeschriebener / lebendiger" Gestaltungslayer.
 *
 * Bewusst ADDITIV und leichtgewichtig: keine zusätzliche Schrift, keine extra
 * HTTP-Anfrage (hand-gezeichnete Striche als inline-SVG-Data-URI). Greift nur
 * dort, wo eine Klasse gesetzt ist — ändert nichts am bestehenden Layout und
 * lässt die erreichten PSI-Werte unberührt. Alles respektiert reduced-motion.
 */

/* ── Hand-gezeichnete Unterstreichung ─────────────────────────────────────── */
.ink-underline { position: relative; white-space: nowrap; }
.ink-underline::after {
  content: "";
  position: absolute;
  left: -0.06em; right: -0.06em; bottom: -0.18em;
  height: 0.36em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 18' preserveAspectRatio='none'%3E%3Cpath d='M4 11 C50 4 90 16 130 9 S210 3 236 10' fill='none' stroke='%232562EA' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  clip-path: inset(0 100% 0 0);
  animation: ink-draw 0.9s cubic-bezier(.65,0,.35,1) forwards;
  animation-delay: 0.55s;
  pointer-events: none;
}
@keyframes ink-draw { to { clip-path: inset(0 0 0 0); } }

/* Doppelter „Korrektur"-Strich (kräftiger, z. B. für Warnungen/Akzente). */
.ink-underline--bold::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 22' preserveAspectRatio='none'%3E%3Cpath d='M4 9 C60 3 120 15 180 8 S232 6 236 9' fill='none' stroke='%232562EA' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M8 16 C70 11 130 20 196 14 S230 13 234 15' fill='none' stroke='%232562EA' stroke-width='3' stroke-linecap='round' opacity='.6'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

/* ── Marker-Highlight (organischer Leuchtstift hinter Text) ────────────────── */
.ink-mark {
  background: linear-gradient(104deg, rgba(37,98,234,0) 0.5%, rgba(37,98,234,0.16) 2%, rgba(37,98,234,0.18) 96%, rgba(37,98,234,0) 99%);
  border-radius: 0.3em 0.55em 0.4em 0.6em;     /* unregelmäßig = handgemalt */
  padding: 0.02em 0.18em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ── Handgeschriebene Notiz / Randbemerkung ───────────────────────────────── */
.ink-note {
  font-style: italic;
  letter-spacing: 0.01em;
  color: var(--fg-3);
  transform: rotate(-1.4deg);
  display: inline-block;
}

/* ── „Lebendige" Mikro-Bewegung für Akzent-Elemente ───────────────────────── */
.ink-wobble { transition: transform 0.25s cubic-bezier(.34,1.56,.64,1); }
.ink-wobble:hover { transform: rotate(-1.6deg) scale(1.03); }

/* Hand-gezeichneter Pfeil (per ::before vor das Element setzen). */
.ink-arrow::before {
  content: "";
  display: inline-block;
  width: 1.5em; height: 1em;
  margin-right: 0.35em;
  vertical-align: -0.1em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 24' fill='none' stroke='%232562EA' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 14 C12 6 22 20 35 9'/%3E%3Cpath d='M28 7 L36 8 L31 15'/%3E%3C/svg%3E") no-repeat center / contain;
}

@media (prefers-reduced-motion: reduce) {
  .ink-underline::after { animation: none; clip-path: inset(0 0 0 0); }
  .ink-wobble:hover { transform: none; }
}