/* ==========================================================================
   WAVE 231 - SIGNAL LETTER ALS BRIEF
   ==========================================================================
   Aus der freigegebenen Vorlage "Signal Brief": die Ausgabe ist kein
   Content-Block mehr, sondern ein Blatt - Briefkopf, der gerahmte Kasten
   "Der Read", der Fliesstext, die Empfehlung als nummerierte Liste und die
   Unterschrift. Cremefarbenes Papier auf dunklem Grund, genau wie in der
   Vorlage.

   Der Text bleibt Wort fuer Wort der Text der Seite. Es kommen nur der
   Briefkopf und die Grussformel dazu - beides steht als Markup in der Seite,
   damit es auch ohne JavaScript da ist. Kein Skript, kein Storage.

   Flaechensprache Welle 230 gilt auch auf Papier: Gold traegt die Grenze,
   Kuehl gliedert, kein Schatten, kein Radius.
   ========================================================================== */

.signal-letter-issue {
  --w231b-paper: #f7f4ea;
  --w231b-ink: #0c1b33;
  --w231b-mid: #3d4a5c;
  --w231b-meta: #5a6678;
  --w231b-gold: #8a6520;
  --w231b-rule: #c9942f;
  --w231b-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--w231b-paper);
  color: var(--w231b-ink);
  padding-block: clamp(2rem, 4vw, 3.2rem);
  border-block: 1px solid rgba(201, 148, 47, .55);
}

.signal-letter-page .signal-letter-issue p,
.signal-letter-page .signal-letter-issue li,
.signal-letter-page .signal-letter-issue ol,
.signal-letter-page .signal-letter-issue h2,
.signal-letter-page .signal-letter-issue h3,
.signal-letter-page .signal-letter-issue time,
.signal-letter-page .signal-letter-issue span,
.signal-letter-page .signal-letter-issue blockquote { color: inherit; }
.signal-letter-page .signal-letter-issue__header h2 { color: var(--w231b-ink); }

.signal-letter-page .signal-letter-issue p.eyebrow { color: var(--w231b-gold); }
.signal-letter-issue .signal-letter-issue__byline { color: var(--w231b-meta); }
.signal-letter-issue .signal-letter-issue__byline span,
.signal-letter-issue .signal-letter-issue__byline time { color: var(--w231b-meta); }

/* ---------- Briefkopf ----------------------------------------------------- */
.ka-w231b__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(1rem, 2.4vw, 1.75rem);
  padding-bottom: .9rem;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  border-bottom: 2px solid var(--w231b-ink);
}
.ka-w231b__brand { display: grid; gap: .2rem; min-width: 0; }
.ka-w231b__name { font-size: clamp(1rem, 1.3vw, 1.1rem); font-weight: 700; letter-spacing: .02em; }
.ka-w231b__tag {
  font: 400 clamp(11px, .66rem, .69rem)/1.2 inherit;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6b5a3e;
}
.ka-w231b__meta { display: grid; gap: .25rem; text-align: right; }
.ka-w231b__meta span { font: 400 clamp(11px, .7rem, .72rem)/1.4 var(--w231b-mono); color: var(--w231b-meta); }
.ka-w231b__kind {
  font: 700 clamp(11px, .64rem, .66rem)/1.3 var(--w231b-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--w231b-gold);
}

/* ---------- "Der Read": die Triade wird der gerahmte Kasten --------------- */
.signal-letter-issue .signal-letter-triad {
  border: 1px solid var(--w231b-rule);
  background: rgba(201, 148, 47, .07);
  padding: clamp(.9rem, 2vw, 1.15rem);
  gap: clamp(.9rem, 2vw, 1.2rem);
}
.signal-letter-issue .signal-letter-triad > section { background: transparent; border: 0; padding: 0; }
.signal-letter-issue .signal-letter-triad > section + section {
  border-top: 1px solid rgba(12, 27, 51, .18);
  padding-top: clamp(.8rem, 1.6vw, 1rem);
}
@media (min-width: 900px) {
  .signal-letter-issue .signal-letter-triad > section + section {
    border-top: 0;
    border-left: 1px solid rgba(12, 27, 51, .18);
    padding-top: 0;
    padding-left: clamp(.9rem, 1.8vw, 1.2rem);
  }
}
.signal-letter-issue .signal-letter-triad > section > span {
  font: 700 clamp(11px, .64rem, .66rem)/1.2 var(--w231b-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--w231b-gold);
}
.signal-letter-issue .signal-letter-triad h3 { color: var(--w231b-ink); }
.signal-letter-issue .signal-letter-triad p { color: var(--w231b-mid); }

/* ---------- Fliesstext ---------------------------------------------------- */
.signal-letter-page .signal-letter-issue .signal-letter-body__copy p { color: var(--w231b-mid); }
.signal-letter-page .signal-letter-issue p.signal-letter-body__lead { color: var(--w231b-ink); font-weight: 700; }
.signal-letter-page .signal-letter-issue .signal-letter-body__copy h3 { color: var(--w231b-ink); }
.signal-letter-page .signal-letter-issue blockquote {
  border-left: 2px solid var(--w231b-rule);
  color: var(--w231b-gold);
  background: transparent;
  font-style: italic;
}

/* ---------- Die Empfehlung ------------------------------------------------ */
.signal-letter-page .signal-letter-issue .signal-letter-field-note {
  border: 1px solid rgba(12, 27, 51, .28);
  background: transparent;
  box-shadow: none;
}
.signal-letter-page .signal-letter-issue .signal-letter-field-note h3 { color: var(--w231b-ink); }
.signal-letter-page .signal-letter-issue .signal-letter-field-note ol,
.signal-letter-page .signal-letter-issue .signal-letter-field-note li { color: var(--w231b-mid); }
.signal-letter-page .signal-letter-issue .signal-letter-field-note li::marker { color: var(--w231b-gold); }
.signal-letter-page .signal-letter-issue .signal-letter-field-note__close { color: var(--w231b-gold); font-style: italic; }

/* ---------- Grussformel --------------------------------------------------- */
.ka-w231b__sign {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1rem, 2.4vw, 1.75rem);
  flex-wrap: wrap;
  margin-top: clamp(1.4rem, 2.8vw, 2.2rem);
  padding-top: .9rem;
  border-top: 1px solid rgba(12, 27, 51, .2);
}
.ka-w231b__sign p { margin: 0; }
.ka-w231b__regards { font-size: clamp(12px, .92rem, .96rem); line-height: 1.5; color: var(--w231b-mid); }
.ka-w231b__signer { margin-top: .5rem; font-size: clamp(1rem, 1.3vw, 1.1rem); font-weight: 700; line-height: 1.3; }
.ka-w231b__role { font-size: clamp(12px, .82rem, .85rem); line-height: 1.4; color: var(--w231b-mid); }
.ka-w231b__foot { display: grid; gap: .2rem; text-align: right; }
.ka-w231b__foot span { font: 400 clamp(12px, .72rem, .74rem)/1.5 var(--w231b-mono); color: var(--w231b-meta); }

@media (max-width: 700px) {
  .ka-w231b__head { flex-direction: column; }
  .ka-w231b__meta { text-align: left; }
  .ka-w231b__foot { text-align: left; }
}