/* /story/ — „Unsere Geschichte. Eure Geschichte?“ (seit 2026-11-05, Andreas).
   Seitenkopf fuer beide Artikel, darunter je Artikel ein eigener Titelbereich
   mit Kennzeile (♂ „Aus seiner Sicht“, spaeter ♀ „Aus ihrer Sicht“).
   Die Spalte ist --measure breit; Text, Ueberschriften und Hochkant-Bilder
   stehen darin auf Lesebreite, die breiten Bilder nutzen die ganze Spalte.
   Keine Farbwerte hier — nur die Tokens aus site.css. */

@font-face {
  font-family: "Caveat";
  src: url("../fonts/caveat-600-subset.woff2?v=9cd6e57e8f23") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

.story {
  max-width: var(--measure);
  margin-inline: auto;
  font-size: 1.0625rem;
  line-height: 1.7;
}
.story-intro,
.story-article > * {
  max-width: 40rem;
  margin-inline: auto;
}
.story-article > .story-wide,
.story-article > .story-theme-block { max-width: none; }

.story p { margin: 0 auto 1.15rem; }

/* Kennzeilen in Versalien: Seitentitel oben, Sicht je Artikel */
.story-eyebrow {
  margin: 0 0 .6rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--accent);
  hyphens: manual;
}

/* Seitenkopf: gilt fuer beide Artikel */
.story-intro {
  padding: 1rem 0 2.5rem;
  border-bottom: 1px solid var(--hairline);
}
.story-intro .story-lead {
  margin: 0 0 1rem;
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--text);
  text-wrap: pretty;
}
.story-lead .story-hl { font-weight: 700; color: var(--accent); }
.story-intro .story-note { margin: 0; font-size: 1rem; color: var(--text-muted); text-wrap: pretty; }

/* Titelbereich je Artikel */
.story-head {
  margin: 4.5rem auto 2.2rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--hairline);
}
.story-brand {
  margin: 0 0 1.75rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  font-weight: 700;
  color: var(--heading);
}
.story-brand img { width: 32px; height: 32px; border-radius: 8px; }
.story .story-persona { display: flex; align-items: center; gap: .25rem; margin: 0 0 .5rem; }
.story-persona svg { flex: none; width: 1.15rem; height: 1.15rem; overflow: visible; }
.story-title-block { container-type: inline-size; }
.story-title {
  margin: 0;
  font-size: clamp(1.8rem, 5.4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-strong);
  text-wrap: balance;
  hyphens: manual;
}
/* Einzeilig, sobald die Spalte es hergibt: Schriftgroesse aus der Breite.
   Der Titel misst ~16,9 em (Segoe UI); 18,6 laesst Reserve fuer breitere
   Systemschriften. Darunter (Telefone) bricht er in zwei Zeilen. */
@container (min-width: 28rem) {
  .story-title { white-space: nowrap; font-size: calc(100cqi / 18.6); }
}
.story .story-kicker {
  margin: .7rem 0 0;
  font-size: clamp(1.2rem, 3.4vw, 1.45rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--accent);
}
.story .story-dek {
  margin: .7rem 0 0;
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--text-muted);
  text-wrap: balance;
}
/* Erscheinungsdatum (seit der Freigabe am 2026-11-06) */
.story .story-date {
  margin: .9rem 0 0;
  font-size: .85rem;
  color: var(--text-faint);
}

.story-article h3 {
  margin: 3rem auto .4rem;
  font-size: 1.45rem;
  line-height: 1.25;
  color: var(--heading);
  text-wrap: balance;
}
.story-article a { color: var(--accent-link); text-decoration-color: var(--accent-link-underline); text-underline-offset: 3px; }
.story-article a:hover { text-decoration-color: currentColor; }
.story .story-solo {
  margin: .2rem auto 1.15rem;
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--text-strong);
}

/* Bilder */
.story figure { margin: 2.2rem auto 2.4rem; text-align: center; }
.story figcaption {
  margin: .9rem auto 0;
  max-width: 30rem;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--text-faint);
}
.story-shot {
  display: block;
  margin: 0 auto;
  width: min(290px, 78%);
  height: auto;
  border-radius: 30px;
  border: 1px solid var(--accent-28);
  box-shadow: var(--shadow-lg);
}
/* Querformat-Ausschnitt (DER TAG im Band): breiter als die Hochkant-Screens. */
.story-shot-quer {
  width: min(100%, 28rem);
}
/* Homescreen-Attrappe: gerendertes Bild mit freien Ecken; der Radius folgt
   dem Geraeterahmen (42 px auf 300 x 651), damit der Schatten anliegt. */
.story-home {
  display: block;
  margin: 0 auto;
  width: min(270px, 80%);
  height: auto;
  border-radius: 14% / 6.45%;
  box-shadow: var(--shadow-lg);
}
.story-symbol-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: 1.6rem auto 1.8rem;
}
.story-symbol-row p {
  margin: 0;
  flex: 1;
}
.story-symbol-row .story-icon {
  flex: none;
  width: 78px;
  height: 78px;
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
}

/* Split-Layout: Bleibt exakt innerhalb der normalen Lesebreite (40rem) */
.story-split {
  margin: 3rem auto 2.5rem;
}
.story-split-text {
  margin: 0 0 1.5rem;
}
.story-article .story-split-text h3 {
  margin-top: 0;
  margin-bottom: 1rem;
}
.story-split-text p {
  margin-bottom: 1.15rem;
}
.story-split-text p:last-child {
  margin-bottom: 0;
}
.story-split-media,
.story .story-split-media {
  margin: 0 auto;
  text-align: center;
}
@media (min-width: 640px) {
  .story-split {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 2.2rem;
    margin: 3rem auto 3rem;
  }
  .story-split-text {
    flex: 1 1 60%;
    margin: 0;
  }
  .story-split-media,
  .story .story-split-media {
    flex: 0 0 180px;
    margin: 0;
  }
  .story-split-media .story-shot {
    width: 180px;
  }
}
@media (min-width: 480px) {
  .story-symbol-row {
    gap: 1.5rem;
  }
  .story-symbol-row .story-icon {
    width: 92px;
    height: 92px;
    border-radius: 22px;
  }
}
.story-icon {
  display: block;
  margin: 0 auto;
  width: 112px;
  height: 112px;
  border-radius: 26px;
  box-shadow: var(--shadow-lg);
}
.story-themes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
  max-width: 22rem;
  margin-inline: auto;
}
.story .story-themes figure { margin: 0; }
.story-themes img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  border: 1px solid var(--accent-28);
  box-shadow: var(--shadow-lg);
}
.story .story-themes figcaption { margin-top: .5rem; font-size: .82rem; }
.story .story-theme-block > figcaption { margin-top: 1rem; }
.story-wide img,
.story-illustration img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--accent-28);
  box-shadow: var(--shadow-lg);
}
.story-illustration {
  max-width: 28rem;
  margin: 2rem auto;
}

/* Abspann */
.story-signoff {
  margin-top: 3rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--hairline);
  font-size: .95rem;
  color: var(--text-muted);
}
.story .story-signoff p { margin-bottom: .8rem; }
.story .story-fineprint { font-size: .82rem; color: var(--text-faint); }
.story-hand {
  display: block;
  margin-top: 1.6rem;
  text-align: right;
  font-family: "Caveat", "Segoe Script", "Bradley Hand", cursive;
  font-weight: 600;
  font-size: 1.9rem;
  color: var(--accent);
}

.story-soon-note {
  margin: 1.5rem auto 3.5rem;
  font-size: 1.05rem;
  color: var(--text-muted);
  font-style: italic;
}

@media (min-width: 581px) {
  .story-themes { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 44rem; }
}