/* ==========================================================================
   Story — "Die Story dahinter": Intro + Faden (Kordel) durch die Entstehung.
   Signatur: die Kordel der Badeshort wird zum roten Faden der Geschichte;
   jeder Moment sitzt als Öse auf ihr. Wird nach layout.css geladen.
   ========================================================================== */

/* Story braucht keine vertikale Flex-Zentrierung wie der Hero —
   als Block-Layout kann der Inhalt frei umbrechen statt zu überlaufen. */
main{display:block}

/* ---------- intro ---------- */
.story{width:100%;padding-block:clamp(1rem,3vw,2.5rem) clamp(2.5rem,6vw,4rem)}
.story__intro{position:relative;max-width:46rem}
.story__eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--ff-mono);font-size:.76rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink);
  padding:.5rem .95rem;border-radius:999px;
  background:rgba(255,255,255,.7);border:1px solid var(--line-strong);
}
.story__title{
  font-family:var(--ff-display);font-weight:800;
  font-size:clamp(2rem,7vw,4.4rem);line-height:.96;letter-spacing:-.02em;
  margin:1.4rem 0 0;overflow-wrap:break-word;
}
.story__title .grad{
  background:var(--grad-head);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.story__lead{
  font-size:clamp(1.12rem,2.2vw,1.4rem);font-weight:500;line-height:1.45;
  color:var(--ink-soft);margin:1.4rem 0 0;max-width:42ch;
}
.story__pants{
  position:absolute;top:-.5rem;right:-.5rem;width:clamp(96px,16vw,150px);
  height:auto;transform-origin:50% 8%;animation:sway 5.2s ease-in-out infinite;
  pointer-events:none;filter:drop-shadow(0 14px 26px rgba(124,43,245,.22));
}

/* ---------- der Faden (Kordel + Ösen) ---------- */
.thread{
  position:relative;list-style:none;padding:0;
  margin:clamp(2.6rem,6vw,4.2rem) 0 0;max-width:48rem;
}
/* die Kordel */
.thread::before{
  content:"";position:absolute;left:14px;top:6px;bottom:34px;width:3px;
  border-radius:3px;background:var(--grad);opacity:.85;
}
/* Aglet / Endkappe der Kordel */
.thread::after{
  content:"";position:absolute;left:9px;bottom:18px;width:13px;height:18px;
  border-radius:4px;background:var(--cyan);border:2.5px solid var(--ink);
}

.beat{
  position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);
  gap:clamp(1rem,3vw,1.6rem);align-items:start;
}
.beat + .beat{margin-top:clamp(2.2rem,5vw,3.4rem)}

/* die Öse, durch die der Faden läuft */
.beat__node{
  width:30px;height:30px;border-radius:50%;background:var(--paper);
  border:3.5px solid var(--violet);box-shadow:0 0 0 5px var(--paper);
  position:relative;z-index:1;
}
.beat__node::after{
  content:"";position:absolute;inset:7px;border-radius:50%;
  background:rgba(4,35,42,.12);
}
.beat:nth-child(1) .beat__node{border-color:var(--pink)}
.beat:nth-child(2) .beat__node{border-color:var(--violet)}
.beat:nth-child(3) .beat__node{border-color:var(--cyan)}
.beat:nth-child(4) .beat__node{border-color:var(--pink)}

.beat__body{padding-top:1px}
.beat__when{
  font-family:var(--ff-mono);font-size:.74rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--violet);
}
.beat__title{
  font-family:var(--ff-display);font-weight:700;
  font-size:clamp(1.3rem,3vw,1.75rem);line-height:1.08;letter-spacing:-.01em;
  margin:.5rem 0 0;overflow-wrap:break-word;
}
.beat__text{margin:.7rem 0 0;color:var(--ink-soft);max-width:52ch;overflow-wrap:break-word}

/* ---------- Abschluss-Karte ---------- */
.story__cta{
  margin:clamp(2.6rem,6vw,4rem) 0 0;max-width:48rem;
  padding:clamp(1.6rem,4vw,2.4rem);border-radius:22px;
  border:1px solid var(--line-strong);background:rgba(255,255,255,.6);
  display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem 1.6rem;
  justify-content:space-between;
}
.story__cta-copy{flex:1 1 16rem}
.story__cta-eyebrow{
  font-family:var(--ff-mono);font-size:.74rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);
}
.story__cta-title{
  font-family:var(--ff-display);font-weight:700;
  font-size:clamp(1.25rem,3vw,1.6rem);line-height:1.1;letter-spacing:-.01em;
  margin:.5rem 0 0;
}

/* ---------- responsive ---------- */
@media (max-width:620px){
  .story__pants{display:none}
}