/* Renditeküche v3 — article overlay · 2026-06
   Loaded AFTER each article's inline styles; restyles the header into a dark
   "Rezeptkopf" card + adds step-numbered H2s, chip stamps, link underline
   draws. Touches presentation only — markup, copy and JSON-LD stay as-is. */

:root {
  --rk-iron:  #131614;
  --rk-bone:  #EDE8DE;
  --rk-ash:   #A8B0A9;
  --rk-amber: #E8A33D;
}

/* --- Rezeptkopf: dark recipe-card header --- */
.article-header {
  background: var(--rk-iron);
  border-radius: 16px;
  padding: 40px 44px 36px;
  position: relative;
  overflow: hidden;
  margin-bottom: 2.5rem;
}
.article-header::after {
  content: "";
  position: absolute; right: -20px; bottom: -14px; width: 240px; height: 130px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 130'%3E%3Cpath d='M 8 122 C 70 118 110 104 150 78 C 182 57 212 30 232 8' fill='none' stroke='%23E8A33D' stroke-width='2' stroke-linecap='round' opacity='0.35'/%3E%3Ccircle cx='232' cy='8' r='4' fill='%23E8A33D' opacity='0.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  pointer-events: none;
}
.article-header .article-label {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rk-amber);
  background: rgba(232, 163, 61, 0.12);
  border: 1px solid rgba(232, 163, 61, 0.3);
  border-radius: 4px;
  padding: 5px 12px;
  margin-bottom: 18px;
}
.article-header .article-title,
.article-header h1 {
  color: var(--rk-bone);
  position: relative;
  z-index: 1;
}
.article-header .article-meta {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 22px;
  color: var(--rk-ash);
}
.article-header .article-meta span {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.85rem;
  color: var(--rk-ash);
  border: 1px solid rgba(237, 232, 222, 0.16);
  border-radius: 999px;
  padding: 6px 14px;
  background: rgba(237, 232, 222, 0.04);
}
.article-header .article-meta svg { width: 15px; height: 15px; }
@media (max-width: 639px) {
  .article-header { padding: 28px 22px 26px; border-radius: 12px; }
  .article-header::after { width: 170px; height: 92px; background-size: 170px 92px; }
}

/* chip stamps: tags press in one-by-one on load */
@keyframes rk-stamp {
  from { opacity: 0; transform: rotate(-6deg) scale(1.16); }
  to   { opacity: 1; transform: rotate(0deg) scale(1); }
}
.article-header .article-meta span {
  opacity: 0;
  animation: rk-stamp 420ms cubic-bezier(0.2, 1.2, 0.4, 1) forwards;
}
.article-header .article-meta span:nth-child(1) { animation-delay: 250ms; }
.article-header .article-meta span:nth-child(2) { animation-delay: 330ms; }
.article-header .article-meta span:nth-child(3) { animation-delay: 410ms; }
.article-header .article-meta span:nth-child(4) { animation-delay: 490ms; }

/* --- step-numbered H2s: recipe steps down the analysis --- */
.article-content { counter-reset: rk-step; }
.article-content > h2 {
  counter-increment: rk-step;
  position: relative;
}
.article-content > h2::before {
  content: counter(rk-step, decimal-leading-zero);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--rk-amber);
  display: block;
  margin-bottom: 6px;
}
.article-content > h2::after {
  content: "";
  display: block;
  width: 44px; height: 3px;
  border-radius: 2px;
  background: var(--rk-amber);
  margin-top: 10px;
  opacity: 0.55;
}

/* --- link underline draws left→right in body copy --- */
.article-content p a, .article-content li a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1.5px;
  background-repeat: no-repeat;
  background-position: left calc(100% - 1px);
  transition: background-size 350ms cubic-bezier(0.22, 1, 0.36, 1);
}
.article-content p a:hover, .article-content li a:hover {
  background-size: 0% 1.5px;
  background-position: right calc(100% - 1px);
}

/* --- reduced motion: final states, no theatrics --- */
@media (prefers-reduced-motion: reduce) {
  .article-header .article-meta span { animation: none; opacity: 1; }
  .article-content p a, .article-content li a { transition: none; }
}