/* ============================================================
   DMC  page-stories.css  -  Maserati Stories, Kapitel 1: Nuerburgring
   Nur Tokens aus tokens.css. Baut auf components/layout/fix-media auf.
   Wird ausschliesslich ueber page.pageStyles auf /maserati-stories
   eingebunden und beeinflusst keine andere Seite.
   ============================================================ */

/* ---------- Seitenbreite ---------- */
.page-stories .section{
  width:100%;max-width:var(--container-xl);
  margin-inline:auto;padding-inline:var(--gutter);
}
.page-stories .section > .lead{max-width:64ch}

/* ---------- Hero: Kapitel-Cover ---------- */
.stories-hero{align-items:end}
.stories-hero .hero__media img{
  object-position:50% 46%;
  filter:saturate(.82) contrast(1.12) brightness(.78);
}
.stories-hero .hero__media::after{
  background:
    radial-gradient(90% 70% at 12% 88%, oklch(13% .02 264 / .82), transparent 68%),
    linear-gradient(180deg, oklch(13% .02 264 / .62) 0%, oklch(13% .02 264 / .28) 38%, var(--bg) 97%);
}
.stories-hero .hero__title{max-width:14ch;font-family:var(--font-display);font-weight:700;text-wrap:balance}
.stories-hero .hero__lead{max-width:56ch}

/* Kapitelziffer: reine Typografie als Tiefenebene hinter dem Satz.
   Bleibt bewusst innerhalb des Viewports, nur nach unten ueber die
   Hero-Kante hinaus. */
.stories-hero__numeral{
  position:absolute;z-index:-1;
  right:var(--gutter);bottom:-.14em;
  font-family:var(--font-display);font-weight:700;font-size:var(--text-hero);
  line-height:.72;letter-spacing:var(--tracking-tight);
  color:transparent;-webkit-text-stroke:1px var(--hairline-strong);
  opacity:.55;pointer-events:none;user-select:none;
}

/* ---------- Kapitel 1: Das Wochenende ---------- */
.stories-cards{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-6);margin-top:var(--space-9);
}
.story-card{
  display:flex;flex-direction:column;gap:var(--space-3);
  padding:var(--space-6) var(--space-5) var(--space-7);
  background:var(--surface);border:1px solid var(--hairline);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-1),var(--edge-catch);
  transition:border-color var(--dur-normal) var(--ease-standard),
             box-shadow var(--dur-normal) var(--ease-standard);
}
.story-card:hover{border-color:var(--accent-line);box-shadow:var(--shadow-3),var(--edge-catch)}
/* Rhythmus statt Raster: die Karten sitzen versetzt, ohne transform
   (transform gehoert dem data-animate-Reveal). */
.stories-cards .story-card:nth-child(2){margin-block-start:var(--space-6)}
.stories-cards .story-card:nth-child(3){margin-block-start:var(--space-9)}
.story-card__no{
  font-family:var(--font-mono);font-size:var(--text-h3);line-height:1;
  color:var(--rame);font-variant-numeric:tabular-nums;
}
.story-card__title{
  font-family:var(--font-display);font-weight:700;
  font-size:var(--text-h4);line-height:var(--leading-snug);color:var(--text);
}
.story-card__text{color:var(--text-muted);font-size:var(--text-body);line-height:var(--leading-normal)}

.stories-band{margin-top:var(--space-10);aspect-ratio:1920 / 600}
.stories-band__caption{max-width:52ch}

/* ---------- Der Ring und der Dreizack ---------- */
.stories-ring__grid{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:var(--space-9);align-items:start;
}
.stories-ring__list{list-style:none;margin:var(--space-8) 0 0;padding:0;display:grid;gap:var(--space-7)}
.ring-note{
  display:grid;gap:var(--space-2);
  padding-top:var(--space-5);border-top:1px solid var(--hairline);
}
.ring-note__year{
  font-family:var(--font-mono);font-size:var(--text-caption);
  letter-spacing:var(--tracking-kicker);text-transform:uppercase;color:var(--accent-hover);
}
.ring-note__title{
  font-family:var(--font-display);font-weight:700;
  font-size:var(--text-h3);line-height:var(--leading-snug);color:var(--text);
}
.ring-note__text{color:var(--text-muted);font-size:var(--text-body);line-height:var(--leading-normal);max-width:56ch}
.stories-ring__media{aspect-ratio:410 / 250;margin-top:var(--space-8)}
.stories-ring__caption{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:var(--tracking-wide)}

/* ---------- Drei Formate ---------- */
.stories-formats__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-7);margin-top:var(--space-9);
}
.format-card{display:flex;flex-direction:column;gap:var(--space-5)}
.format-card__media{aspect-ratio:4 / 3}
.format-card__body{display:grid;gap:var(--space-3)}
.format-card__kicker{
  font-family:var(--font-mono);font-size:var(--text-caption);
  text-transform:uppercase;letter-spacing:var(--tracking-kicker);color:var(--rame-luce);
}
.format-card__title{
  font-family:var(--font-display);font-weight:700;
  font-size:var(--text-h3);line-height:var(--leading-snug);color:var(--text);
}
.format-card__text{color:var(--text-muted);font-size:var(--text-body);line-height:var(--leading-normal)}

/* ---------- Nuerburgring Diary ---------- */
.stories-diary__list{display:grid;gap:var(--space-4);margin-top:var(--space-8)}
.diary-day{
  background:var(--surface);border:1px solid var(--hairline);
  border-radius:var(--radius-lg);overflow:hidden;
  transition:border-color var(--dur-fast) var(--ease-standard);
}
.diary-day:hover{border-color:var(--hairline-strong)}
.diary-day[open]{border-color:var(--accent-line)}
.diary-day > .event-day__summary{
  display:flex;justify-content:flex-start;align-items:baseline;gap:var(--space-4);
  padding:var(--space-5);cursor:pointer;list-style:none;
}
.diary-day > .event-day__summary::-webkit-details-marker{display:none}
/* Chevron ans Ende, Tag und Titel bleiben als Paar links */
.diary-day > .event-day__summary::after{margin-left:auto;align-self:center}
.diary-day[open] > .event-day__summary::after{transform:rotate(225deg);border-color:var(--accent-hover)}
.diary-day__day{
  flex:none;font-family:var(--font-mono);font-size:var(--text-caption);
  text-transform:uppercase;letter-spacing:var(--tracking-kicker);color:var(--accent-hover);
}
.diary-day__title{
  font-family:var(--font-display);font-weight:700;
  font-size:var(--text-h4);line-height:var(--leading-snug);color:var(--text);
}
.diary-day__quote{
  margin:0;padding:0 var(--space-5);
  border-left:2px solid var(--rame);margin-left:var(--space-5);
}
.diary-day__quote p{
  margin:0;max-width:62ch;
  font-family:var(--font-display);font-weight:var(--weight-regular);font-style:italic;
  font-size:var(--text-lead);line-height:var(--leading-normal);color:var(--text);
}
.diary-day .event-day__list{padding-top:var(--space-5)}

/* ---------- Alt trifft Neu ---------- */
.stories-pairs__list{list-style:none;margin:var(--space-9) 0 0;padding:0}
.pair{
  display:grid;align-items:center;
  grid-template-columns:8rem minmax(0,1.3fr) minmax(0,.8fr);
  gap:var(--space-4) var(--space-7);
  padding-block:var(--space-6);border-top:1px solid var(--hairline);
  transition:border-color var(--dur-normal) var(--ease-standard);
}
.pair:last-child{border-bottom:1px solid var(--hairline)}
.pair:hover{border-top-color:var(--accent-line)}
.pair__media{grid-row:span 2;aspect-ratio:16 / 10;width:8rem}
.pair__media--plate{
  display:grid;place-items:center;
  background:linear-gradient(150deg,var(--surface-2),var(--surface));
  border:1px solid var(--hairline);border-radius:var(--radius-lg);
}
.pair__media--plate img{width:1.75rem;height:1.75rem;opacity:.32}
.pair__models{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-3) var(--space-5)}
.pair__model{display:flex;flex-direction:column;gap:var(--space-1)}
.pair__name{
  font-family:var(--font-display);font-weight:700;
  font-size:var(--text-h4);line-height:var(--leading-tight);color:var(--text);
}
.pair__model:first-of-type .pair__name{color:var(--rame-luce)}
.pair__year{
  font-family:var(--font-mono);font-size:var(--text-caption);
  letter-spacing:var(--tracking-wide);color:var(--text-faint);
}
.pair__link{font-size:var(--text-h4);line-height:1;color:var(--accent-hover)}
.pair__trait{color:var(--text-muted);font-size:var(--text-body);line-height:var(--leading-normal);max-width:46ch}

/* ---------- Markenkern ---------- */
.stories-core__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
  gap:var(--space-9);align-items:start;
}
.stories-quote{
  margin:0;padding:var(--space-8) var(--space-7);
  background:radial-gradient(120% 140% at 50% -20%,var(--accent-soft),transparent 62%),
             linear-gradient(160deg,var(--surface-2),var(--surface));
  border:1px solid var(--accent-line);border-radius:var(--radius-xl);
  box-shadow:var(--shadow-3),var(--edge-catch);
}
.stories-quote p{
  margin:0;font-family:var(--font-display);font-weight:700;
  font-size:var(--text-h4);line-height:var(--leading-snug);
  letter-spacing:var(--tracking-tight);color:var(--text);text-wrap:balance;
}
.stories-quote cite{
  display:block;margin-top:var(--space-5);font-style:normal;
  font-family:var(--font-mono);font-size:var(--text-caption);
  text-transform:uppercase;letter-spacing:var(--tracking-kicker);color:var(--text-faint);
}

/* ---------- Generation Maserati ---------- */
.stories-audience__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.7fr);
  gap:var(--space-9);align-items:start;
}
.stories-chips{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:var(--space-3);
}

/* ---------- Content Factory ---------- */
.stories-output{
  list-style:none;margin:var(--space-9) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:var(--space-5);border-block:1px solid var(--hairline);padding-block:var(--space-7);
}
.output{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.output__value{
  font-family:var(--font-mono);font-weight:500;font-size:var(--text-h3);
  line-height:1;color:var(--text);font-variant-numeric:tabular-nums;
}
.output__label{
  font-size:var(--text-caption);text-transform:uppercase;
  letter-spacing:var(--tracking-wide);color:var(--text-muted);overflow-wrap:anywhere;
}
.stories-factory__note{
  margin-top:var(--space-6);max-width:64ch;
  color:var(--text-faint);font-size:var(--text-body);line-height:var(--leading-normal);
}

/* ---------- Ausblick ---------- */
.stories-outlook__list{
  list-style:none;margin:var(--space-9) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-6);
  counter-reset:outlook;
}
.outlook{
  display:grid;gap:var(--space-3);align-content:start;
  padding-top:var(--space-5);border-top:1px solid var(--hairline);
  transition:border-top-color var(--dur-normal) var(--ease-standard);
}
.outlook:hover{border-top-color:var(--rame)}
.outlook::before{
  counter-increment:outlook;content:"0" counter(outlook);
  font-family:var(--font-mono);font-size:var(--text-caption);
  letter-spacing:var(--tracking-kicker);color:var(--text-faint);
}
.outlook__title{
  font-family:var(--font-display);font-weight:700;
  font-size:var(--text-h4);line-height:var(--leading-snug);color:var(--text);
}
.outlook__text{color:var(--text-muted);font-size:var(--text-body);line-height:var(--leading-normal)}

/* ---------- Gaestebuch ---------- */
/* Optik eines echten Gaestebuchs: vorgedruckter Feldname links, daneben die
   Zeile zum Eintragen. Die Linie unter jeder Zeile ist die Schreiblinie. */
.stories-guestbook__lead{max-width:72ch}
.stories-guestbook__lines{
  list-style:none;margin:var(--space-9) 0 0;padding:0;
  border-top:1px solid var(--hairline);
}
.guestline{
  display:grid;grid-template-columns:11rem minmax(0,1fr);gap:var(--space-6);
  align-items:baseline;padding-block:var(--space-5);
  border-bottom:1px solid var(--hairline);
  transition:border-bottom-color var(--dur-normal) var(--ease-standard);
}
.guestline:hover{border-bottom-color:var(--rame)}
.guestline__label{
  font-family:var(--font-mono);font-size:var(--text-caption);
  text-transform:uppercase;letter-spacing:var(--tracking-kicker);color:var(--rame);
}
.guestline__text{
  font-family:var(--font-display);font-size:var(--text-h4);
  line-height:var(--leading-snug);color:var(--text);
}
.stories-guestbook__note{
  margin-top:var(--space-6);max-width:64ch;
  color:var(--text-faint);font-size:var(--text-caption);line-height:var(--leading-normal);
}

/* ---------- CTA ---------- */
.page-stories .cta-band{margin-block:var(--space-section) var(--space-10)}
.stories-cta__actions{display:flex;flex-wrap:wrap;gap:var(--space-4)}
.cta-band--wide .stories-cta__actions{grid-column:1;grid-row:2;justify-self:start}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .stories-ring__grid,.stories-core__grid,.stories-audience__grid{grid-template-columns:1fr;gap:var(--space-8)}
  .stories-ring__media{max-width:26rem;margin-top:0}
  .stories-formats__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stories-output{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6)}
  .stories-outlook__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-7)}
  .pair{grid-template-columns:7rem minmax(0,1fr)}
  .pair__media{grid-row:span 2;width:7rem}
  .pair__trait{max-width:none}
}
@media (max-width:768px){
  /* Hochformat: das Motiv sitzt im unteren Bilddrittel, sonst steht oben
     nur leerer Himmel. */
  .stories-hero .hero__media img{object-position:50% 64%}
  .stories-hero__numeral{font-size:var(--text-display);right:var(--gutter);opacity:.4}
  .stories-cards{grid-template-columns:1fr;gap:var(--space-5)}
  .stories-cards .story-card:nth-child(2),
  .stories-cards .story-card:nth-child(3){margin-block-start:0}
  .stories-band{aspect-ratio:4 / 3}
  .stories-formats__grid{grid-template-columns:1fr;gap:var(--space-8)}
  .stories-output{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stories-outlook__list{grid-template-columns:1fr;gap:var(--space-6)}
  .diary-day > .event-day__summary{flex-direction:column;align-items:flex-start;gap:var(--space-2)}
  .diary-day__quote{margin-left:var(--space-5);padding-inline:var(--space-4) var(--space-5)}
  .pair{grid-template-columns:1fr;gap:var(--space-4)}
  .pair__media{grid-row:auto;width:9rem}
  .stories-quote{padding:var(--space-7) var(--space-5)}
  .guestline{grid-template-columns:1fr;gap:var(--space-2)}
}

/* ---------- Motion-Praeferenz ---------- */
@media (prefers-reduced-motion:reduce){
  .story-card,.diary-day,.pair,.outlook,.guestline{transition:none}
}