/* ==========================================================================
   2 · Eine Nachricht für dich – der persönliche Brief
   Schmale Lesespalte, unterschiedliche Tonlagen, bewusste Pausen.
   ========================================================================== */

.letter {
  display: flow-root;          /* verhindert, dass der negative Rand des Umschlags die Sektion mitzieht */
  position: relative;
  z-index: 1;
  padding: 0 0 var(--section-y);
  background: var(--ivory);
}

/* Briefumschlag: zentriert, mit etwas Abstand unter dem Hero-Video */
.letter__envelope {
  position: relative;
  z-index: 2;
  width: var(--env-w);
  margin: clamp(3.5rem, 7vw, 6.5rem) auto 0;
}
.letter__envelope img {
  width: 100%;
  height: auto;
  border-radius: 2px;
  box-shadow:
    0 2px 6px rgb(38 61 75 / 0.12),
    0 40px 80px -30px rgb(38 61 75 / 0.45);
}

/* Briefbogen mit Papierstruktur */
.letter__sheet {
  position: relative;
  width: min(52rem, 100% - 1.5rem);
  margin: calc(var(--env-h) * -0.25) auto 0;
  padding:
    calc(var(--env-h) * 0.25 + clamp(4rem, 9vw, 7.5rem))
    clamp(1.5rem, 7vw, 6rem)
    clamp(5rem, 10vw, 8rem);
  background-color: #F3EADC;
  background-image:
    /* feine Körnung */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.36 0 0 0 0 0.29 0 0 0 0 0.2 0 0 0 0.11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    /* Papierfasern */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.09' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.34 0 0 0 0 0.24 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    /* weiche Wolken im Papier */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.42 0 0 0 0 0.3 0 0 0 0.12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E"),
    /* leichte Abschattung zu den Rändern */
    radial-gradient(130% 90% at 50% 40%, transparent 55%, rgb(120 95 65 / 0.07) 100%);
  box-shadow:
    0 1px 2px rgb(38 61 75 / 0.08),
    0 30px 70px -40px rgb(38 61 75 / 0.35);
}

.letter__column {
  max-width: 37rem;
  margin-inline: auto;
}

.letter__part > * + * { margin-top: 2.25rem; }

/* Grundton: ruhiger Brieftext */
.l-lines {
  font-family: var(--font-display);
  font-weight: 300;
  font-variation-settings: var(--display-fvs);
  font-size: clamp(1.25rem, 1.75vw, 1.5rem);
  line-height: 1.7;
  color: var(--blue-ink);
}
.l-lines em,
.l-whisper,
.l-cascade,
.l-aside {
  font-style: italic;
}

/* Flüstern: leiser, aber grösser */
.letter__part > .l-whisper { margin-top: 4.5rem; }
.l-whisper {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.3;
  color: var(--blue-deep);
}
.letter__part > .l-whisper--soft {
  margin-top: 1rem;
  color: var(--text-muted);
}

/* Der laute Alltag: kurze, sachliche Schlagworte */
.l-staccato {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.75rem;
  padding: 1.75rem 0;
  border-block: 1px solid var(--line-dark);
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.l-aside {
  font-size: 0.85em;
  color: var(--text-muted);
}

/* Innerer Wirrwarr: Fragen, die sich verschieben */
.l-cascade {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.4rem, 2.2vw, 1.875rem);
  line-height: 1.55;
  color: var(--blue-deep);
}
.l-cascade li:nth-child(2) { padding-left: clamp(1.5rem, 5vw, 3.5rem); }
.l-cascade li:nth-child(3) { padding-left: clamp(0.75rem, 2.5vw, 1.75rem); }
.l-cascade li:nth-child(4) { padding-left: clamp(2.25rem, 7.5vw, 5.25rem); }

/* Höhepunkte */
.letter__part > .l-climax { margin-top: 3.5rem; }
.l-climax {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: var(--display-fvs);
  font-size: clamp(2.1rem, 4.4vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--blue-deep);
  text-wrap: balance;
}
.l-climax--question {
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1.25;
}

.l-lead {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: var(--display-fvs);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.25;
  color: var(--blue-deep);
  text-wrap: balance;
}

/* Trenner aus dem Originaltext */
.l-heart {
  margin-block: clamp(5rem, 12vw, 9rem);
  text-align: center;
  font-size: 1.5rem;
  color: var(--sky);
}

/* Ausatmen · hinhören */
.letter__part > .l-release { margin-top: 4.5rem; }
.l-words {
  margin-block: 1.25rem 1.5rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(3.25rem, 9vw, 6.75rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--blue-deep);
}
.l-words span { display: block; }
.l-words span + span { padding-left: 1.4em; }

/* 15 Plätze · 5 ganze Tage */
.letter__part > .l-facts { margin-top: 4.5rem; }
.l-facts {
  display: grid;
  gap: 0.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line-dark);
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--blue-deep);
}

.letter__part > .l-cta { margin-top: 2.5rem; }