/*
 * VOMA Child Theme – story.css
 *
 * Fließtext-/Erzähl-Sektion für Geschichte, Unternehmensnarrativ und
 * ähnliche längere Textstrecken außerhalb von Karten/FAQ. Erste
 * Verwendung: /ueber-uns/ (Gruppe B.1).
 *
 * Quellen:
 *   06_Standards/CI/TYPOGRAPHY.md – Schriftsystem
 *   06_Standards/DEVELOPMENT/CSS-TOKENS.md – Token-Register
 */

.voma-story {
  padding-block: var(--voma-space-8);
  background: #f7f8f9;
}

.voma-story__inner {
  max-width: var(--voma-max-service);
  margin-inline: auto;
  /* Kein eigenes horizontales Padding mehr – kommt von .site-content
     (Mobile-Design-System, docs/components/mobile-design-system.md). */
}

.voma-story__kicker {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--voma-green);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--voma-space-3);
}

.voma-story__title {
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 900;
  line-height: 1.2;
  color: #111827;
  margin: 0 0 var(--voma-space-6);
  max-width: 30ch;
}

.voma-story__body {
  display: flex;
  flex-direction: column;
  gap: var(--voma-space-5);
}

.voma-story__body p {
  font-size: 16.5px;
  line-height: 1.75;
  color: #1f2933;
  margin: 0;
}

/* Wörtliches Zitat aus einer Quelle (z. B. Presseinterview) – optisch
   abgesetzt, damit klar bleibt: das sind die Worte der zitierten
   Person, nicht redaktioneller VOMA-Text. */
.voma-story__quote {
  margin: 0;
  padding-inline-start: var(--voma-space-5);
  border-inline-start: 3px solid var(--voma-green);
  font-size: 16.5px;
  line-height: 1.75;
  font-style: italic;
  color: #1f2933;
}

.voma-story__source {
  font-size: 13px;
  color: rgba(17, 24, 39, .55);
  margin: var(--voma-space-2) 0 0;
}

/* ============================================================
   DESKTOP BREAKPOINT (≥ 64rem)
   Desktop-Spacing-Pass 02.07.2026 (Runde 2): Datei hatte bisher
   keinerlei @media-Regel, war von 400px bis 2000px pixelgleich –
   bei einer reinen Fließtext-Sektion auf breiten Screens zu eng
   und mit zu kleiner Schrift für die größere Lesedistanz.
   ============================================================ */

@media (min-width: 64rem) {
  .voma-story {
    padding-block: 96px;
  }

  /* Premium-Feinschliff 04.07.2026: schmalere Innenbreite auf der
     getönten Fläche – der graue Hintergrund soll als bewusst gerahmte
     Fläche wirken, nicht als knapper Rand um einen fast kartenbreiten
     Textblock. Siehe --voma-max-tinted in base.css. */
  .voma-story__inner {
    max-width: var(--voma-max-tinted);
  }

  .voma-story__body p,
  .voma-story__quote {
    font-size: 17.5px;
  }
}