/* ════════════════════════════════════════
   HOW I WORK — editorial long-read
   ════════════════════════════════════════ */

.hiw { --hiw-ink: #9A7B55; background: var(--color-cream-base); color: var(--color-ink); }
.hiw p { margin: 0; }
.hiw-wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-h); }

.hiw-eyebrow { font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--hiw-ink); margin-bottom: 1.4rem !important; }

/* Hero */
.hiw-hero { background: var(--color-cream-soft); padding: 9rem 0 7rem; border-bottom: var(--border-line); }
.hiw-hero-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.7rem, 3.5vw, 3.2rem); line-height: 1.1; text-transform: uppercase; margin: 0 0 2rem; max-width: 22em; }
.hiw-hero-sub { font-family: var(--font-display); font-style: italic; font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.35; color: var(--color-ink-dark); max-width: 26em; }

/* Body text */
.hiw-text p, .hiw-point-body p, .hiw-part-lead p, .hiw-trio-item p, .hiw-note {
  font-family: var(--font-body); font-weight: var(--weight-light); font-size: var(--size-body); line-height: 1.65; color: var(--color-ink);
}
.hiw-text p + p, .hiw-point-body > p + p, .hiw-part-lead p + p { margin-top: 1.1rem; }
.hiw em { font-style: italic; }

/* Intro */
.hiw-intro { padding: var(--space-section) 0; }
.hiw-cols { display: grid; grid-template-columns: 1fr 1.25fr; gap: 5rem; align-items: start; }
.hiw-statement { font-family: var(--font-display); font-size: clamp(2rem, 3.2vw, 2.9rem); line-height: 1.15; color: var(--color-ink); }
.hiw-cols .hiw-statement { position: sticky; top: 7rem; }

/* Pillars overview */
.hiw-pillars { background: var(--color-cream-soft); padding: var(--space-section) 0; border-top: var(--border-line); text-align: center; }
.hiw-kicker { font-family: var(--font-display); font-style: italic; font-size: clamp(2.6rem, 6vw, 5.1rem); line-height: 1.1; text-align: center; margin-bottom: 3rem !important; }
.hiw-pillar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.hiw-pillar { display: flex; flex-direction: column; gap: 1rem; padding: 3.5rem 2rem; background: transparent; border: none; color: inherit; text-decoration: none; transition: background 0.2s; }
@media (hover: hover) { .hiw-pillar:hover .hiw-pillar-name { color: var(--color-accent); } }
.hiw-pillar-num { font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0.18em; color: var(--hiw-ink); }
.hiw-pillar-name { font-family: var(--font-display); font-size: 3rem; line-height: 1; text-transform: uppercase; }
.hiw-pillar-q { font-family: var(--font-display); font-style: italic; font-size: 1.5rem; line-height: 1.25; }
.hiw-pillar-text { font-family: var(--font-body); font-weight: var(--weight-light); font-size: var(--size-small); line-height: 1.55; color: var(--color-ink-muted); }
.hiw-note { margin-top: 3rem !important; max-width: 38em; color: var(--color-ink-muted) !important; }
.hiw-note--wide { max-width: 44em; }
.hiw-note + .hiw-note { margin-top: 1.1rem !important; }
.hiw-pillars .hiw-pillar { align-items: center; }
.hiw-pillars .hiw-note { margin-left: auto; margin-right: auto; }
.hiw-pillars .hiw-wrap::after { content: ""; display: block; width: 140px; height: 50px; margin: 3.5rem auto 0; background: var(--color-cream-mid); clip-path: polygon(0 0, 100% 0, 50% 100%); }

/* Pillar sections */
.hiw-part { padding: var(--space-section) 0; border-top: var(--border-line); }
.hiw-part--soft { background: var(--color-cream-soft); }
.hiw-part-head { display: grid; grid-template-columns: 1fr 1.25fr; gap: 1rem 5rem; padding-bottom: 4rem; margin-bottom: 1rem; border-bottom: 0.5px solid rgba(28,26,22,0.25); }
.hiw-part-head .hiw-eyebrow { grid-column: 1 / -1; }
.hiw-part-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(3.4rem, 6vw, 5.6rem); line-height: 1; text-transform: uppercase; margin: 0; }
.hiw-part-title em { display: block; margin-top: 0.8rem; text-transform: none; font-size: 0.42em; line-height: 1.2; color: var(--hiw-ink); }

/* Points */
.hiw-point { display: grid; grid-template-columns: 1fr 1.25fr; gap: 5rem; padding: 4rem 0; border-bottom: var(--border-line); }
.hiw-point:last-child { border-bottom: 0; padding-bottom: 0; }
.hiw-point-side { position: sticky; top: 7rem; align-self: start; }
.hiw-num { display: block; font-family: var(--font-display); font-size: clamp(5rem, 9vw, 8rem); line-height: 0.85; color: var(--color-accent); }
.hiw-point-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 3vw, 2.6rem); line-height: 1.1; margin: 1rem 0 0; }
.hiw-point-body .hiw-quote { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.25; margin-bottom: 2rem !important; }
.hiw-point-body .hiw-key { font-weight: 400; border-left: 2px solid var(--color-accent); padding-left: 1.3rem; margin-top: 1.6rem !important; margin-bottom: 0.5rem; }

/* Example box */
.hiw-example { background: var(--color-cream-mid); padding: 2rem 2.2rem; margin: 2rem 0; }
.hiw-example p { font-size: var(--size-small) !important; }
.hiw-example p + p { margin-top: 0.9rem; }
.hiw-example-label { font-size: 0.8rem !important; letter-spacing: 0.18em; text-transform: uppercase; color: var(--hiw-ink) !important; }
.hiw-mock { background: var(--color-cream-base); padding: 1.6rem 1.8rem; margin-top: 1.2rem; border: var(--border-line); }
.hiw-mock-cat { font-size: 0.8rem !important; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-ink-muted) !important; }
.hiw-mock .hiw-mock-head { font-family: var(--font-display) !important; font-size: 1.6rem !important; line-height: 1.25 !important; margin-top: 0.6rem; }

/* Before / after */
.hiw-compare { display: grid; gap: 0.8rem; margin: 1.8rem 0; }
.hiw-compare p { padding: 1.3rem 1.6rem; margin: 0 !important; }
.hiw-compare-before { background: transparent; border: 0.5px dashed rgba(28,26,22,0.3); color: var(--color-ink-muted) !important; }
.hiw-compare-after { background: var(--color-cream-mid); font-family: var(--font-display) !important; font-style: italic; font-size: 1.5rem !important; line-height: 1.35 !important; }
.hiw-part--soft .hiw-compare-after, .hiw-part--soft .hiw-example { background: var(--color-cream-deep); }

/* Bringing it together */
.hiw-together { padding: var(--space-section) 0; border-top: var(--border-line); background: var(--color-cream-mid); }
.hiw-together .hiw-part-head { border-bottom-color: rgba(28,26,22,0.2); }
.hiw-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; padding-top: 3rem; }
.hiw-trio-title { font-family: var(--font-display); font-weight: 400; font-size: 2.2rem; margin: 0 0 1rem; padding-top: 1rem; border-top: 2px solid var(--color-accent); }
.hiw-trio-item p { font-size: var(--size-small); }
.hiw-trio-item p + p { margin-top: 1em; }
.hiw-statement--center { text-align: center; max-width: 22em; margin: 5rem auto 0 !important; }

/* CTA */
.hiw-cta { background: var(--color-ink-dark); color: var(--color-cream-base); padding: 6rem 0; text-align: center; }
.hiw-cta-q { font-family: var(--font-display); font-style: italic; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.2; max-width: 18em; margin: 0 auto 2.6rem !important; }
.hiw-cta-btn { display: inline-block; font-family: var(--font-body); font-size: var(--size-eyebrow); letter-spacing: var(--tracking-wide); text-transform: uppercase; line-height: 1; background: var(--color-cream-base); color: var(--color-ink-dark); padding: 1.1rem 2.4rem; text-decoration: none; transition: background 0.2s; }
@media (hover: hover) { .hiw-cta-btn:hover { background: var(--color-cream-deep); } }

/* Mobile */
@media (max-width: 1100px) {
  .hiw-wrap { padding: 0 var(--space-h-mobile); }
  .hiw-hero { padding: 5rem 0 4rem; }
  .hiw-intro, .hiw-pillars, .hiw-part, .hiw-together { padding: var(--space-section-mobile) 0; }
  .hiw-cols, .hiw-part-head, .hiw-point, .hiw-pillar-grid, .hiw-trio { grid-template-columns: 1fr; gap: 2rem; }
  .hiw-cols .hiw-statement, .hiw-point-side { position: static; }
  .hiw-part-head { padding-bottom: 2.5rem; }
  .hiw-point { gap: 1.5rem; padding: 3rem 0; }
  .hiw-point-side { display: flex; align-items: baseline; gap: 1rem; }
  .hiw-num { font-size: 4.2rem; }
  .hiw-point-title { margin: 0; }
  .hiw-example { padding: 1.5rem 1.4rem; }
  .hiw-statement--center { margin-top: 3rem !important; }
  .hiw-cta { padding: 4.5rem 0; }
  .hiw-cta-btn { padding: 1rem 1.6rem; }
}

/* Newsletter-Teaser vor dem Footer – nur mobil */
.nl-teaser-mobile { display: none; }
@media (max-width: 1100px) {
  .nl-teaser-mobile { display: block; background: var(--color-cream-soft); border-top: 0.5px solid rgba(28,26,22,.14); padding: 3rem 1.6rem 3.2rem; }
  .nl-teaser-eyebrow { font-family: var(--font-body); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--color-ink-muted); margin: 0 0 .8rem; }
  .nl-teaser-heading { font-family: var(--font-display); font-size: 1.6rem; font-weight: 300; line-height: 1.2; color: var(--color-ink); margin: 0 0 .9rem; }
  .nl-teaser-text { font-family: var(--font-body); font-size: .95rem; font-weight: 300; line-height: 1.65; color: var(--color-ink-muted); margin: 0 0 1.4rem; }
  .nl-teaser-link { font-family: var(--font-body); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--color-ink); text-decoration: none; border-bottom: 0.5px solid currentColor; padding-bottom: .2rem; }
}