/* ============================================================================
   The ecoPi journey — /workflow.html (five always-expanded steps, no image
   required) and the compact icon teaser on the home page.
   ========================================================================= */

/* ---- /workflow.html: step list ------------------------------------------------
   Six steps down a single vertical spine: a numbered circle per step,
   joined by one continuous line, with the step's icon, heading and body
   text to its right. The same single-column layout holds at any width, so
   there is no separate narrow-screen rearrangement to maintain. */

.ep-steps {
  position: relative;
  list-style: none;
  margin: var(--ep-space-2) auto 0;
  padding: 0;
  max-width: 66rem;
}

/* The spine itself, behind the numbered circles. Anchored to the circle's
   own radius (half of 3.5rem) so it lines up with the node centre and stops
   a radius short of the first and last one, rather than poking out above
   step 1 or dangling past step 6. */
.ep-steps::before {
  content: "";
  position: absolute;
  top: 1.75rem;
  bottom: 1.75rem;
  left: 1.75rem;
  width: 2px;
  background: var(--ep-border-strong);
  transform: translateX(-1px);
}

.ep-steps__item {
  position: relative;
  display: flex;
  gap: var(--ep-space-4);
  padding-bottom: var(--ep-space-6);
}

.ep-steps__item:last-child {
  padding-bottom: 0;
}

/* The numbered circle on the spine. */
.ep-steps__node {
  flex: none;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--ep-primary);
  color: var(--ep-text-inverse);
  font-family: var(--ep-font-heading);
  font-size: var(--ep-h4);
  font-weight: 600;
}

/* A soft one-hue gradient across the six circles, darkest first and
   brightening step by step, so the sequence reads through colour too —
   without leaving the brand's teal family for a second hue. */
.ep-steps__item:nth-child(1) .ep-steps__node { background: var(--ep-step-1); }
.ep-steps__item:nth-child(2) .ep-steps__node { background: var(--ep-step-2); }
.ep-steps__item:nth-child(3) .ep-steps__node { background: var(--ep-step-3); }
.ep-steps__item:nth-child(4) .ep-steps__node { background: var(--ep-step-4); }
.ep-steps__item:nth-child(5) .ep-steps__node { background: var(--ep-step-5); }

/* The last step closes the sequence at the brightest point of the gradient,
   with a soft ring instead of a hard edge — the same "you've arrived"
   treatment used elsewhere on the site, now in the same teal family. */
.ep-steps__item:last-child .ep-steps__node {
  background: var(--ep-step-6);
  box-shadow: 0 0 0 6px var(--ep-primary-faint);
}

.ep-steps__content {
  padding-top: var(--ep-space-2);
}

.ep-steps__head {
  display: flex;
  align-items: center;
  gap: var(--ep-space-2);
  margin-bottom: var(--ep-space-2);
}

.ep-steps__head h3 {
  margin: 0;
}

/* A plain coloured icon next to the heading — no badge behind it, since the
   numbered circle on the spine already carries that role for the step. */
.ep-steps__icon {
  flex: none;
  display: inline-flex;
  color: var(--ep-primary);
}

.ep-steps__icon svg {
  width: 1.375rem;
  height: 1.375rem;
}

.ep-steps__item:last-child .ep-steps__icon {
  color: var(--ep-step-6);
}

.ep-steps__body {
  max-width: none;
}

.ep-steps__body > p {
  margin: 0;
  color: var(--ep-text-secondary);
}

/* Low-key follow-on link after step 6 ("Prüfen & auswerten" mentions the
   dashboard) — a nudge toward the dashboard page, not a second CTA to
   compete with "Bereit für den nächsten Schritt?" further down. Right-aligned
   so its "leads onward" direction matches reading direction, like a page turn. */
.ep-steps__followup {
  margin-top: var(--ep-space-6);
  padding-right: 5rem;
  text-align: right;
}

.ep-steps__panel {
  margin-top: var(--ep-space-1);
  max-width: 34rem;
}

.ep-steps__panel.media-placeholder {
  min-height: 14rem;
}

/* ---- /workflow.html: comic strip --------------------------------------------- */

.ep-comic {
  margin: 0;
  text-align: center;
}

/* Frame is a row: the image viewport, plus a narrow sidebar for the credit
   running vertically alongside it — beside the art rather than on top of it
   or as a full-width line competing with it for attention. */
.ep-comic__frame {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--ep-space-2);
  max-width: 100%;
}

.ep-comic__viewport {
  position: relative;
  min-width: 0;
  max-width: 100%;
}

.ep-comic__scroll {
  max-width: 100%;
}

.ep-comic img {
  display: none;
  max-width: 100%;
  height: auto;
  border-radius: var(--ep-radius-md);
  aspect-ratio: 1488 / 1024;
  object-fit: contain;
}

html[data-lang="de"] .ep-comic img[data-lang-text="de"],
html[data-lang="en"] .ep-comic img[data-lang-text="en"] {
  display: inline-block;
}

/* AI-disclosure credit, set as a slim vertical sidebar to the right of the
   comic — read by tilting your head to the left, bottom-to-top, the same
   convention as a photo credit running down the edge of a print. Kept out
   of the artwork entirely so it never overlaps panels, and small/muted so
   it stays a quiet aside rather than a headline under the comic. */
.ep-comic__credit {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: "Comic Sans MS", "Chalkboard SE", "Comic Neue", sans-serif;
  font-size: clamp(0.7rem, 0.3vw + 0.64rem, 0.8rem);
  color: var(--ep-text-muted);
  white-space: nowrap;
}

/* Right-edge fade and swipe hint that signal there's more comic off-screen
   on the small-screen filmstrip below. Hidden by default; only switched on
   inside the small-screen media query, since above 767px the whole comic
   fits and neither is needed. */
.ep-comic__fade {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 2.5rem;
  border-radius: 0 var(--ep-radius-md) var(--ep-radius-md) 0;
  background: linear-gradient(to right, transparent, var(--ep-bg-alt) 88%);
  pointer-events: none;
}

.ep-comic__hint {
  display: none;
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  padding: 0.2rem 0.65rem;
  background: rgba(14, 42, 50, 0.72);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #fff;
  pointer-events: none;
}

/* Hero variant: full-bleed comic right under the page header. */
.ep-comic--hero {
  padding: var(--ep-space-5) 0 var(--ep-space-6);
  background: var(--ep-bg-alt);
}

/* min() with 100% so these targets are ceilings, not fixed sizes: a fixed
   rem value doesn't shrink when the real container (e.g. a tablet-width
   viewport, ~768–1150px) is narrower than the target — the img would just
   overflow it instead of scaling down, since this rule replaces rather
   than adds to `.ep-comic img`'s own `max-width: 100%` above. */
.ep-comic--hero img {
  max-width: min(56rem, 100%);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

@media (min-width: 768px) {
  .ep-comic--hero img {
    max-width: min(72rem, 100%);
  }
}

@media (min-width: 1200px) {
  .ep-comic--hero img {
    max-width: min(88rem, 100%);
  }
}

/* Small screens: the six panels shrink past readability once the whole
   comic is scaled to fit the viewport width, so instead of scaling down we
   fix a readable panel height (22rem tall, which at this image's aspect
   ratio renders ~511px wide) and let the strip scroll horizontally — the
   viewport takes the full width left over next to the credit sidebar, so
   the fade/hint line up with the visible edge, not the (much wider)
   scrolled content.

   The threshold is ~540px, not a round "phone" number: below 768px the
   comic (with no side padding of its own) still renders at
   `viewport - ~29px` for the credit sidebar and gap, so it only actually
   drops below the 511px target — and only then needs scrolling — once the
   viewport itself is under about 511 + 29 = 540px. Cutting over earlier
   shrank a comic that still had plenty of room to fill, leaving it
   stranded small and left-aligned with a "wischen" hint floating in the
   empty space beside it. */
@media (max-width: 540px) {
  .ep-comic__frame {
    display: flex;
    width: 100%;
  }

  .ep-comic__viewport {
    flex: 1 1 auto;
  }

  .ep-comic__scroll {
    display: flex;
    /* Belt-and-braces: with the threshold above matched to the actual
       crossover, the image should always fill or overflow this track. If
       it were ever narrower regardless (a different image asset, a hand-
       resized window), centring beats leaving it stranded at the left
       edge with empty track beside it. "safe" keeps that only for the
       no-overflow case — once the image genuinely overflows (the normal
       case, well below the threshold), it falls back to start-aligned so
       the comic still opens on panel 1 instead of scrolled to its middle. */
    justify-content: safe center;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    border-radius: var(--ep-radius-md);
  }

  .ep-comic--hero img {
    flex: none;
    width: auto;
    max-width: none;
    /* Taller than the viewport is wide at this aspect ratio (1488:1024),
       so the strip is forced to scroll rather than already fitting flush —
       a shorter height here would make the scroll affordance pointless. */
    height: 22rem;
  }

  .ep-comic__fade,
  .ep-comic__hint {
    display: block;
  }
}

/* ---- Home page: icon flow diagram -----------------------------------------
   Five hand-drawn glyphs on primary-coloured badges, connected by the same
   plain-text arrow the card teasers use elsewhere (→). Column by default —
   the safe, always-correct layout at any width — becoming a row with
   connecting arrows at 1100px. That breakpoint went up from 900px when the
   plug-and-play station was added: five badges plus labels need the extra
   width to avoid wrapping mid-label. The badge itself (.ep-flow__icon)
   lives in ecopi-components.css — it's shared with /workflow.html and
   /pricing.html now, not just this page. */

/* This section's heading needs more breathing room before the icon row
   than the generic --dashboard spacing provides — that spacing is shared
   with the "Projekte weltweit" map section below, so it's overridden here
   rather than changed globally. */
section[aria-labelledby="ablauf-heading"] .ep-section-heading--dashboard {
  margin-bottom: var(--ep-space-7);
}

/* Shorter top/bottom padding than the generic .ep-section rhythm, scoped
   here rather than changed globally since other sections share that token. */
section[aria-labelledby="ablauf-heading"] {
  padding-block: clamp(2rem, 4vw, 4rem);
}

/* Column mode: shrink-wrapped and centred as a block, with the steps
   themselves left-aligned so the badges form one vertical line rather than
   each centring independently and going ragged. */
.ep-flow {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ep-space-4);
  width: fit-content;
  margin-top: var(--ep-space-5);
  margin-inline: auto;
}

/* .ep-flow__step itself is a plain block: it just stacks .ep-flow__row
   (icon + label) above .ep-flow__tip in normal flow, so the tip's reveal
   pushes later steps down instead of squeezing into the row as a third
   flex item. The row's own layout (icon+label side by side on mobile,
   stacked on desktop) lives on .ep-flow__row instead. */
.ep-flow__row {
  display: flex;
  align-items: center;
  gap: var(--ep-space-3);
}

/* Bigger badge for the home page teaser specifically — scoped to
   .ep-flow__step (only exists here) so /workflow.html's and /pricing.html's
   own .ep-flow__icon usages, sized in ecopi-components.css, are untouched. */
.ep-flow__step .ep-flow__icon {
  width: 3.75rem;
  height: 3.75rem;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(14, 42, 50, 0.18);
}

.ep-flow__step .ep-flow__icon svg {
  width: 1.875rem;
  height: 1.875rem;
}

.ep-flow__label {
  font-weight: 600;
  color: var(--ep-text);
}

@media (min-width: 1100px) {
  .ep-flow {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    width: auto;
    max-width: 50rem;
    gap: 1.75rem;
  }

  .ep-flow__step {
    flex: 1 1 0;
  }

  .ep-flow__row {
    flex-direction: column;
    gap: var(--ep-space-3);
    text-align: center;
  }

  /* Row mode: the columns have room below them (nothing sits directly
     under the flow except the CTA, further down), so the tooltip becomes a
     floating overlay centred under its badge instead of the mobile push-down
     reveal — pushing the row's own height around on hover would shift every
     column's badge vertically, not just the hovered one. */
  .ep-flow__tip {
    display: block;
    position: absolute;
    z-index: 5;
    top: calc(100% + var(--ep-space-2));
    left: 50%;
    width: 16rem;
    margin-top: 0;
    transform: translateX(-50%);
  }

  /* The mobile hover state bumps margin-top to open a gap for the push-down
     reveal; the overlay here already gets that gap from the top: calc()
     above, so the extra margin would just nudge it down further on hover. */
  .ep-flow__step:hover .ep-flow__tip,
  .ep-flow__step:focus-within .ep-flow__tip {
    margin-top: 0;
  }

  /* Decorative only: generated content is invisible to the accessibility
     tree, so this needs no aria-hidden and adds nothing to the <ol> a screen
     reader announces. */
  .ep-flow__step:not(:last-child)::after {
    content: "→";
    position: absolute;
    top: 1.875rem;
    left: calc(100% + 1.75rem / 2);
    transform: translate(-50%, -50%);
    color: var(--ep-primary);
    font-size: 2.25rem;
    line-height: 1;
  }

  /* The tooltip above is an absolute overlay with no reserved space, so
     without help it can reach down over the CTA button below (worst case:
     the longest tooltip text under the tallest step). Give the button
     enough clearance for that worst case instead of letting it get
     covered. .ep-flow ~ p, not the adjacent-sibling combinator, because the
     noscript fallback (index.njk) sits between the flow and the button.
     !important is required: the button carries Bootstrap's .mt-5 utility,
     which sets margin-top with !important itself. */
  section[aria-labelledby="ablauf-heading"] .ep-flow ~ p {
    margin-top: 5.5rem !important;
  }
}

/* Very simple entrance animation: each step fades and rises into place,
   staggered so the sequence itself reads as the journey. flow-reveal.js
   adds .is-visible once the row scrolls into view and disconnects — this
   is a one-shot reveal, not a repeating/scroll-linked effect. Scoped to
   prefers-reduced-motion: no-preference so reduced-motion users just see
   the finished layout with no animation and no hidden-then-shown flash. */
@media (prefers-reduced-motion: no-preference) {
  .ep-flow__step {
    opacity: 0;
    transform: translateY(0.75rem);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }

  .ep-flow.is-visible .ep-flow__step {
    opacity: 1;
    transform: none;
  }

  .ep-flow__step:nth-child(2) { transition-delay: 0.12s; }
  .ep-flow__step:nth-child(3) { transition-delay: 0.24s; }
  .ep-flow__step:nth-child(4) { transition-delay: 0.36s; }
  .ep-flow__step:nth-child(5) { transition-delay: 0.48s; }
  .ep-flow__step:nth-child(6) { transition-delay: 0.6s; }
}

/* Ongoing, periodic pulse once the row has settled in: the badge itself
   lifts — grows and casts a deeper, softer shadow, like it's rising off
   the page — then settles back, one at a time in sequence, so the
   sequence itself reads as a signal moving through the steps. Each icon
   shares one 10s cycle, staggered a full 2s apart; the keyframes only move
   during the first ~16% of that cycle (1.6s, eased in and out for a slow,
   rounded swell with no snap), leaving a clear pause before the next
   icon's turn rather than five badges lifting in and out of sync at once.
   Pure CSS, no JS beyond gating it on .is-visible so it doesn't run before
   the entrance reveal, and so no-JS pages — which never get .is-visible —
   just stay static. (An expanding ring behind the badge, and a scale-only
   pulse with no shadow change, were both tried first; this reads as more
   obviously "raised" than either.) */
@media (prefers-reduced-motion: no-preference) {
  /* Longhand rather than the `animation` shorthand: the shorthand resets
     animation-delay to its 0s default, which — at four classes deep —
     outranks the nth-child rules below and silently synced every icon to
     the same phase regardless of their intended delay. */
  .ep-flow.is-visible .ep-flow__step .ep-flow__icon {
    animation-name: ep-flow-pulse;
    animation-duration: 12s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
  }

  .ep-flow__step:nth-child(1) .ep-flow__icon { animation-delay: 0s; }
  .ep-flow__step:nth-child(2) .ep-flow__icon { animation-delay: 2s; }
  .ep-flow__step:nth-child(3) .ep-flow__icon { animation-delay: 4s; }
  .ep-flow__step:nth-child(4) .ep-flow__icon { animation-delay: 6s; }
  .ep-flow__step:nth-child(5) .ep-flow__icon { animation-delay: 8s; }
  .ep-flow__step:nth-child(6) .ep-flow__icon { animation-delay: 10s; }
}

@keyframes ep-flow-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 4px 10px rgba(14, 42, 50, 0.18);
  }
  8% {
    transform: scale(1.18);
    box-shadow: 0 20px 34px rgba(14, 42, 50, 0.38);
  }
  16% {
    transform: scale(1);
    box-shadow: 0 4px 10px rgba(14, 42, 50, 0.18);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 4px 10px rgba(14, 42, 50, 0.18);
  }
}