/* ==========================================================================
   huhu.Media — concepts-v2 · Seite: Prozess
   Ergänzende Komponenten zu style.css (fluid, clamp-basiert).
   ========================================================================== */

/* ---------- Hero lead ---------- */
.hero-lead { margin-top: var(--space-l); }

/* ---------- Timeline (große Outline-Ziffern + Rail) ---------- */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.timeline__item {
  display: grid;
  grid-template-columns: clamp(4.25rem, 2.5rem + 9vw, 12.5rem) clamp(2.25rem, 1.75rem + 2vw, 4rem) 1fr;
  align-items: stretch;
}

.timeline__num {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 1.5rem + 5vw, 6.5rem);
  line-height: 1;
  text-align: right;
  padding-right: clamp(.75rem, .5rem + 1.2vw, 1.75rem);
  color: transparent;
  -webkit-text-stroke: 2px var(--lime);
}

.timeline__item--last .timeline__num {
  color: var(--lime);
  -webkit-text-stroke: 0;
}

.timeline__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.timeline__dot {
  flex: none;
  width: clamp(.8rem, .7rem + .4vw, 1.125rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--lime);
  margin-top: .5rem;
  box-shadow: 0 0 24px rgba(204, 255, 0, .6);
}

.timeline__rail::after {
  content: "";
  width: 2px;
  flex: 1;
  background: linear-gradient(180deg, var(--lime), rgba(204, 255, 0, .15));
}

.timeline__item--last .timeline__rail::after { content: none; }

.timeline__body {
  padding: 0 0 clamp(2.25rem, 1.8rem + 2vw, 4rem) clamp(.9rem, .7rem + 1.2vw, 1.75rem);
}

.timeline__item--last .timeline__body { padding-bottom: clamp(.75rem, .6rem + .8vw, 1.25rem); }

.timeline__body h3 { margin-bottom: var(--space-2xs); }

.timeline__body p {
  color: var(--muted);
  line-height: 1.6;
  max-width: 35em;
}

/* ---------- Prinzipien: feste Zweispaltigkeit ab mittlerer Breite ---------- */
.card-grid--halves {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

.card-grid--halves .card h3 { margin-top: 0; }

/* ---------- Projekttypen (Formate) ---------- */
.formate-lead {
  max-width: 40em;
  margin-bottom: var(--space-l);
}

/* ---------- Ehrlichkeits-Break (ruhige Zitat-Sektion) ---------- */
.quote-break {
  text-align: center;
  max-width: 52rem;
  margin-inline: auto;
  padding-block: clamp(1rem, .5rem + 2.5vw, 2.5rem);
}

.quote-break blockquote { margin: 0; }

.quote-break blockquote p {
  font-size: clamp(1.4rem, 1.1rem + 1.5vw, 2.125rem);
  line-height: 1.45;
  font-weight: 500;
  color: var(--ink);
  text-wrap: balance;
}

/* ---------- Mein Anspruch: Check-Karten (Muster .fit-col--yes ul) ---------- */
.promise-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-s);
}

.promise-list li {
  display: flex;
  gap: clamp(.8rem, .6rem + .6vw, 1.125rem);
  align-items: baseline;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  line-height: 1.55;
}

.promise-list li::before {
  content: "✓";
  font-family: var(--font-mono);
  color: var(--lime);
  flex: 0 0 auto;
}

/* ---------- Kundengespräch-Bild ---------- */
.section--tight {
  padding-block: clamp(1rem, .6rem + 2vw, 2.75rem);
}

.talk-shot {
  position: relative;
  max-width: 62rem;
  margin-inline: auto;
  border: 2px solid var(--lime);
  border-radius: var(--radius-lg);
  box-shadow: 0 0 60px rgba(204, 255, 0, .15);
  overflow: hidden;
}

.talk-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--radius-lg) - 3px);
}

/* Platzhalter, solange das Foto noch fehlt */
.talk-shot__placeholder {
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  background:
    radial-gradient(120% 120% at 25% 15%, rgba(124, 92, 255, .28), transparent 60%),
    radial-gradient(120% 120% at 85% 95%, rgba(204, 255, 0, .14), transparent 55%),
    var(--surface);
}

.talk-shot__placeholder span {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--ink);
}

.talk-shot__placeholder small {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: var(--text-xs);
  color: var(--muted);
}

.talk-shot__cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(.7rem, .5rem + 1vw, 1.1rem) clamp(1rem, .8rem + 1vw, 1.4rem);
  background: linear-gradient(transparent, rgba(11, 7, 19, .82));
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink);
}