/* ================================================================== *
 * process-cycle.css – Animierte, anbieterneutrale Ablaufgrafik
 * (partials/components/process-cycle.php).
 *
 * Zwei Darstellungen aus derselben Auszeichnung: schmale Spalten zeigen die
 * Schritte als Liste, ab 38rem Spaltenbreite ordnen sie sich zum Kreis.
 * Umgeschaltet wird über die Breite der Komponente selbst (Container-Query),
 * damit die Grafik im schmalen Artikel genauso funktioniert wie in einer
 * vollbreiten Sektion.
 * ================================================================== */

.pcycle {
  container-type: inline-size;
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
/* Eingebettet unter einer bereits vorhandenen Sektions-Überschrift */
.pcycle:not(:first-child) {
  margin-top: clamp(2rem, 1.4rem + 1.6vw, 3rem);
}
.pcycle__intro {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}
.pcycle__intro h2 {
  margin-bottom: 0.5rem;
}
.pcycle__intro .lead {
  margin-bottom: 0;
}

/* Im Fließtext einer Artikelseite: linksbündig wie die übrigen Absätze */
.pcycle--flow {
  margin-block: clamp(2rem, 1.4rem + 1.6vw, 3rem);
}
.pcycle--flow .pcycle__intro,
.pcycle--flow .pcycle__note {
  margin-inline: 0;
  text-align: left;
}
.pcycle--flow .pcycle__cta {
  text-align: left;
}

/* ---- Phasen-Kopfzeile -------------------------------------------- */
.pcycle__phase-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1rem;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-neutral-900);
}
.pcycle__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: var(--color-neutral-200);
  color: var(--color-neutral-700);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pcycle__tag--loop {
  background: color-mix(in oklch, var(--color-accent-500) 20%, #fff);
  color: var(--color-accent-700);
}
.pcycle__tag svg {
  width: 0.9em;
  height: 0.9em;
}

/* ---- Bausteine: Icon-Scheibe, Titel, Text ------------------------ */
.pcycle__ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 999px;
  background: var(--color-primary-50);
  color: var(--color-primary-700);
  transition: background-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
}
.pcycle__ic svg {
  width: 1.4rem;
  height: 1.4rem;
}
.pcycle__ic--flip svg {
  transform: scaleX(-1);
}
.pcycle__no {
  display: block;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary-600);
}
.pcycle__step-title {
  margin: 0.15rem 0 0.3rem;
  font-size: var(--step-0);
  line-height: 1.25;
  /* Kurze Titel in schmalen Karten nicht automatisch trennen */
  hyphens: manual;
}
.pcycle__step-text {
  margin: 0;
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--color-neutral-600);
  text-wrap: balance;
}

/* ---- Phase 1: einmalige Schritte --------------------------------- */
.pcycle__start {
  display: grid;
  gap: 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pcycle__start-item {
  position: relative;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  background: #fff;
}
.pcycle__start-item .pcycle__ic {
  margin-bottom: 0.7rem;
}

/* ---- Übergang in den Kreislauf ----------------------------------- */
.pcycle__bridge {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
  padding: 1.1rem 1.3rem;
  border: 1px dashed var(--color-primary-300);
  border-radius: var(--radius-lg);
  background: var(--color-primary-50);
}
.pcycle__bridge-ic {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 999px;
  background: var(--color-primary-600);
  color: #fff;
}
.pcycle__bridge-ic svg {
  width: 1.4rem;
  height: 1.4rem;
}
.pcycle__bridge-body {
  flex: 1 1 auto;
}
/* Zeigt aus der Karte heraus nach unten in den Kreislauf */
.pcycle__bridge-arrow {
  position: absolute;
  bottom: -1.05rem;
  left: 50%;
  translate: -50% 0;
  display: inline-flex;
  padding: 0.2rem;
  border: 1px solid var(--color-primary-200);
  border-radius: 999px;
  background: #fff;
  color: var(--color-primary-600);
}
.pcycle__bridge-arrow svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* ---- Phase 2: Kreislauf (Listendarstellung, schmale Spalte) ------ */
.pcycle__ring {
  display: grid;
  gap: 0.9rem;
}
.pcycle__ring-svg {
  display: none;
}
.pcycle__loop {
  display: grid;
  gap: 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: pcycle;
}
.pcycle__node {
  position: relative;
  padding: 1rem 1.2rem 1rem 4.4rem;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  background: #fff;
  counter-increment: pcycle;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.pcycle__node .pcycle__ic {
  position: absolute;
  top: 1rem;
  left: 1.1rem;
}
.pcycle__node .pcycle__step-title::before {
  content: counter(pcycle) ". ";
  color: var(--color-primary-600);
}
.pcycle__center {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.7rem;
  order: -1;
  margin: 0;
  padding: 0.9rem 1.2rem;
  border-radius: var(--radius-lg);
  background: var(--color-primary-900);
  color: #fff;
  text-align: left;
}
.pcycle__center-ic {
  display: inline-flex;
  color: var(--color-accent-400);
}
.pcycle__center-ic svg {
  width: 1.5rem;
  height: 1.5rem;
}
.pcycle__center-label {
  font-family: var(--font-heading);
  font-weight: 700;
}
.pcycle__center-sub {
  font-size: var(--step--1);
  color: color-mix(in oklch, #fff 78%, var(--color-primary-900));
}
.pcycle__loop-back {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--color-accent-700);
}
.pcycle__loop-back svg {
  width: 1.1rem;
  height: 1.1rem;
}

/* ---- Fußnote und Handlungsaufruf --------------------------------- */
.pcycle__note {
  max-width: 46rem;
  margin: 0 auto;
  font-size: var(--step--1);
  color: var(--color-neutral-600);
  text-align: center;
}
.pcycle__cta {
  margin: 0;
  text-align: center;
}

/* ================================================================== *
 * Breite Darstellung: Schritte in einer Reihe, Kreislauf als Kreis
 * ================================================================== */
/* Erst ab dieser Breite stehen die einmaligen Schritte nebeneinander –
   schmaler würden die Karten den Text zerreißen. */
@container (min-width: 46rem) {
  .pcycle__start {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.6rem;
  }
  /* Verbindungspfeil zwischen den Karten */
  .pcycle__start-item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    width: 2.6rem;
    height: 0.75rem;
    margin-top: -0.375rem;
    background: var(--color-primary-400);
    clip-path: polygon(0 40%, 62% 40%, 62% 0, 100% 50%, 62% 100%, 62% 60%, 0 60%);
  }
}

@container (min-width: 38rem) {
  .pcycle__bridge {
    justify-content: center;
    max-width: 44rem;
    margin-inline: auto;
    text-align: left;
  }
  .pcycle__bridge-arrow svg {
    width: 1.9rem;
    height: 1.9rem;
  }

  .pcycle__ring {
    /* Feste Geometrie in rem: Radius der Stationen, Radius der Kreisbahn und
       Kartenbreite stehen in einem geprüften Verhältnis zueinander – so
       berühren die Karten weder die Mitte noch die Bahn. Der Kreis erscheint
       erst, wenn die Spalte breit genug dafür ist. */
    --ring-r: 10.5rem;
    --ring-outer: 17.1rem;
    --node-w: 8.5rem;
    position: relative;
    display: block;
    width: calc(var(--ring-outer) * 2 + 1.5rem);
    max-width: 100%;
    aspect-ratio: 1;
    margin-inline: auto;
  }
  /* Weicher Farbverlauf als Scheibe hinter dem Kreis */
  .pcycle__ring::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--ring-outer) * 2);
    height: calc(var(--ring-outer) * 2);
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: radial-gradient(
      circle,
      color-mix(in oklch, var(--color-primary-100) 55%, transparent) 0%,
      color-mix(in oklch, var(--color-primary-50) 60%, transparent) 62%,
      transparent 72%
    );
  }
  .pcycle__ring-svg {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--ring-outer) * 2.5);
    height: calc(var(--ring-outer) * 2.5);
    transform: translate(-50%, -50%);
    overflow: visible;
  }
  .pcycle__loop {
    position: absolute;
    inset: 0;
    display: block;
  }
  .pcycle__node {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--node-w);
    padding: 0.85rem 0.7rem 0.9rem;
    text-align: center;
    transform: translate(-50%, -50%)
      translate(calc(var(--x) * var(--ring-r)), calc(var(--y) * var(--ring-r)));
    box-shadow: var(--shadow-soft);
  }
  .pcycle__node .pcycle__ic {
    position: static;
    margin: 0 auto 0.5rem;
    width: 2.5rem;
    height: 2.5rem;
  }
  .pcycle__node .pcycle__ic svg {
    width: 1.25rem;
    height: 1.25rem;
  }
  .pcycle__node .pcycle__step-title {
    font-size: var(--step--1);
  }
  .pcycle__node .pcycle__step-text {
    font-size: 0.78rem;
    line-height: 1.4;
  }
  /* Fünf Stationen im Uhrzeigersinn ab zwölf Uhr:
     x = sin(Winkel), y = -cos(Winkel) bei 0°, 72°, 144°, 216°, 288°. */
  .pcycle__node:nth-child(1) { --x: 0; --y: -1; }
  .pcycle__node:nth-child(2) { --x: 0.9511; --y: -0.309; }
  .pcycle__node:nth-child(3) { --x: 0.5878; --y: 0.809; }
  .pcycle__node:nth-child(4) { --x: -0.5878; --y: 0.809; }
  .pcycle__node:nth-child(5) { --x: -0.9511; --y: -0.309; }

  .pcycle__center {
    position: absolute;
    top: 50%;
    left: 50%;
    flex-direction: column;
    justify-content: center;
    gap: 0.2rem;
    width: 7.75rem;
    aspect-ratio: 1;
    padding: 0.7rem;
    border-radius: 999px;
    transform: translate(-50%, -50%);
    text-align: center;
    box-shadow: var(--shadow-lift);
  }
  .pcycle__center-label {
    font-size: 0.75rem;
    line-height: 1.25;
  }
  .pcycle__center-sub {
    font-size: 0.72rem;
    line-height: 1.3;
  }
  .pcycle__loop-back {
    display: none;
  }
}

/* ---- Kreisbahn --------------------------------------------------- */
.pcycle__track {
  fill: none;
  stroke: var(--color-primary-200);
  stroke-width: 2;
}
.pcycle__flow {
  fill: none;
  stroke: var(--color-accent-500);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 16 84;
  stroke-dashoffset: 16;
}
.pcycle__arrow {
  fill: none;
  stroke: var(--color-primary-400);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pcycle__orbit-dot {
  fill: var(--color-accent-600);
}
.pcycle__orbit-halo {
  fill: color-mix(in oklch, var(--color-accent-500) 28%, transparent);
}
.pcycle__orbit {
  transform-box: view-box;
  transform-origin: 200px 200px;
}

/* ================================================================== *
 * Animation – nur bei sichtbarer Grafik und nur ohne Bewegungsvorbehalt
 * ================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .pcycle:not(.is-paused) .pcycle__flow {
    animation: pcycle-flow 15s linear infinite;
  }
  .pcycle:not(.is-paused) .pcycle__orbit {
    animation: pcycle-orbit 15s linear infinite;
  }
  .pcycle:not(.is-paused) .pcycle__node {
    animation: pcycle-node 15s ease-in-out infinite;
  }
  .pcycle:not(.is-paused) .pcycle__node .pcycle__ic {
    animation: pcycle-node-ic 15s ease-in-out infinite;
  }
  .pcycle__node:nth-child(1),
  .pcycle__node:nth-child(1) .pcycle__ic { animation-delay: 0s; }
  .pcycle__node:nth-child(2),
  .pcycle__node:nth-child(2) .pcycle__ic { animation-delay: 3s; }
  .pcycle__node:nth-child(3),
  .pcycle__node:nth-child(3) .pcycle__ic { animation-delay: 6s; }
  .pcycle__node:nth-child(4),
  .pcycle__node:nth-child(4) .pcycle__ic { animation-delay: 9s; }
  .pcycle__node:nth-child(5),
  .pcycle__node:nth-child(5) .pcycle__ic { animation-delay: 12s; }

  .pcycle:not(.is-paused) .pcycle__start-item .pcycle__ic {
    animation: pcycle-node-ic 6s ease-in-out infinite;
  }
  .pcycle__start-item:nth-child(1) .pcycle__ic { animation-delay: 0s; }
  .pcycle__start-item:nth-child(2) .pcycle__ic { animation-delay: 2s; }
  .pcycle__start-item:nth-child(3) .pcycle__ic { animation-delay: 4s; }

  .pcycle:not(.is-paused) .pcycle__start-item:not(:last-child)::after {
    animation: pcycle-arrow 6s ease-in-out infinite;
  }
  .pcycle__start-item:nth-child(1)::after { animation-delay: 0.6s; }
  .pcycle__start-item:nth-child(2)::after { animation-delay: 2.6s; }

  .pcycle:not(.is-paused) .pcycle__bridge-arrow {
    animation: pcycle-nudge 2.8s ease-in-out infinite;
  }
}

@keyframes pcycle-flow {
  from {
    stroke-dashoffset: 16;
  }
  to {
    stroke-dashoffset: -84;
  }
}
@keyframes pcycle-orbit {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes pcycle-node {
  0%,
  13% {
    border-color: var(--color-primary-500);
    scale: 1.035;
  }
  26%,
  100% {
    border-color: var(--color-neutral-200);
    scale: 1;
  }
}
@keyframes pcycle-node-ic {
  0%,
  13% {
    background: var(--color-primary-600);
    color: #fff;
    box-shadow: 0 0 0 0.35rem color-mix(in oklch, var(--color-primary-500) 18%, transparent);
  }
  26%,
  100% {
    background: var(--color-primary-50);
    color: var(--color-primary-700);
    box-shadow: 0 0 0 0 transparent;
  }
}
@keyframes pcycle-arrow {
  0%,
  100% {
    opacity: 0.45;
    translate: 0 0;
  }
  18% {
    opacity: 1;
    translate: 0.35rem 0;
  }
  40% {
    opacity: 0.45;
    translate: 0 0;
  }
}
@keyframes pcycle-nudge {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 0.3rem;
  }
}