/* =====================================================================
   JB Reitsport · „Noir“ – Impressum und Datenschutz (impressum.html, datenschutz.html)
   Nur seitenspezifisch, alle Klassen mit Präfix rec-. Basis/Komponenten: css/site.css (nicht ändern).
   Hero E ohne Bild (Serif-H1, Haarlinie), rechts ein stiller Hinweis zum Stand. Signatur: Abspann der Angaben
   (Begriff | Angabe) um eine Mittelachse, die sich von oben nach unten zeichnet; mobil läuft die Linie links mit.
   Abschluss: kompaktes CTA-Band (Impressum 145921, Datenschutz 145916). Kein echter Rechtstext, keine Anschrift.
   ===================================================================== */

/* ---------------------------------------------------------------- Hero E ohne Bild */
.rec-hero .label { margin: 0 0 18px; }
.rec-hero .hero__title { font-size: clamp(56px, 16vw, 96px); }
.rec-hero .hero__sub { max-width: 42ch; margin-bottom: 0; hyphens: manual; -webkit-hyphens: manual; }
.rec-note {
  position: relative; z-index: 3;
  display: grid; gap: 12px; justify-items: start;
  margin: 44px var(--gutter) 0; padding-top: 22px;
  border-top: 1px solid var(--line);
}
.js .rec-note { animation: hero-rise 1.1s var(--ease-out) both; animation-delay: calc(var(--hd) + .75s); }
.rec-note p { margin: 0; }
.rec-note__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.rec-note__k { font: 600 var(--fs-label)/1.3 var(--f-text); letter-spacing: .22em; text-transform: uppercase; color: var(--grey); }
.rec-note__text { max-width: 36ch; font-size: 15px; line-height: 1.55; color: var(--grey); hyphens: manual; -webkit-hyphens: manual; }
@media (min-width: 1024px) {
  .rec-hero.hero--quiet { padding-bottom: clamp(56px, 9svh, 112px); }
  .rec-hero .hero__title { font-size: clamp(88px, min(9.6vw, 17svh), 164px); line-height: .96; }
  .rec-note { grid-column: 2; grid-row: 1; align-self: end; margin: 0 0 6px; }
}

/* ---------------------------------------------------------------- Abspann der Angaben mit gezeichneter Achse */
.rec-sec { padding-top: clamp(40px, 6vw, 88px); }
.rec-roll { position: relative; max-width: 980px; margin-inline: auto; padding-left: 22px; }
.rec-axis {
  position: absolute; left: 0; top: 0; bottom: 0; width: 1px; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0), var(--accent) 12%, var(--accent-hi) 50%, var(--accent) 88%, rgba(var(--accent-rgb), 0));
  transform: scaleY(0); transform-origin: 50% 0;
  transition: transform 2.6s var(--ease-inout) .15s;
}
.rec-roll.is-in .rec-axis { transform: none; }
.no-anim .rec-axis { transform: none; }
.rec-pairs { max-width: none; justify-items: stretch; text-align: left; }   /* mobil: an der Linie links ausgerichtet */
.rec-pairs .credits__pair { padding: 20px 0; }
.rec-pairs dt { hyphens: manual; -webkit-hyphens: manual; }
.rec-pairs dd { min-height: 32px; display: flex; align-items: center; }
.rec-foot {
  margin: clamp(40px, 5vw, 64px) auto 0; max-width: 980px; text-align: center;
  font: italic 400 clamp(19px, 1.6vw, 23px)/1.4 var(--f-serif); color: var(--grey);
  text-wrap: balance;
}
@media (min-width: 768px) {
  .rec-roll { padding-left: 0; }
  .rec-axis { left: 50%; margin-left: -.5px; }        /* Mittelachse im Spaltenabstand der Paare */
  .rec-pairs .credits__pair { padding: 24px 0; }
  .rec-pairs dd { justify-content: flex-start; }
}

/* Endnote 8,4: die Angaben stehen als heller Moment auf Elfenbein (.lumen) – ein Blatt Papier zwischen Hero und
   Abschluss; Linien und Achse in Tinte/Bronze */
.lumen.rec-sec { padding-block: clamp(64px, 8vw, 120px); }
.lumen .credits__pair { border-top-color: rgba(23, 20, 15, .16); }
.lumen .credits__pair:last-child { border-bottom-color: rgba(23, 20, 15, .16); }
.lumen .credits__pair dt { color: var(--ink-2); }
.lumen .credits__pair dd { color: var(--ink); }
.lumen .rec-axis { background: linear-gradient(180deg, rgba(110, 80, 38, 0), var(--bronze) 12%, var(--bronze) 88%, rgba(110, 80, 38, 0)); }
.lumen .rec-foot { color: var(--ink-2); }

/* ---------------------------------------------------------------- Abschluss (kompakt) */
/* Review 3: Pferdekopf im Bild statt Kruppe – Impressum 150527 (Dunkelbrauner mit Stern), Datenschutz 150759 (Rappe,
   gespiegelt: Bild rechts). Ausschnitt mit Himmel, nur dort ziehen die Wolken des Cinemagraphs. */
.rec-finale .cta-band__media img { object-position: var(--pos-m, 60% 18%); }   /* mobil: Pferdekopf über dem überlappenden Text */
.rec-finale { --pos-m: 62% 16%; --pos: 58% 22%; }
.rec-finale.cta-band--flip { --pos-m: 64% 6%; --pos: 62% 4%; }
@media (min-width: 1024px) {
  /* schmaleres Hochformat, damit Himmel, Jennifer und Pferd zusammen im Bild bleiben (die Bühne füllt am Desktop das
     ganze Band, site.css) */
  .rec-finale .cta-band__media { width: 46%; }
  .rec-finale .cta-band__media img { object-position: var(--pos, 58% 22%); }
  .rec-finale .cta-band__fade {
    background:
      linear-gradient(90deg, rgba(var(--night-rgb), 0) 0%, rgba(var(--night-rgb), 0) 26%, rgba(var(--night-rgb), .78) 38%, var(--night) 46%),
      linear-gradient(180deg, var(--night) 0%, rgba(var(--night-rgb), 0) 12%, rgba(var(--night-rgb), 0) 84%, var(--night) 100%);
  }
  .rec-finale .cta-band__content { margin-left: 50%; width: 50%; max-width: 780px; }
  .rec-finale .cta-band__title.title-serif { font-size: clamp(48px, 4.6vw, 80px); }
  /* Datenschutz gespiegelt: Bild rechts, Text links auf Schwarz */
  .rec-finale.cta-band--flip .cta-band__fade {
    background:
      linear-gradient(270deg, rgba(var(--night-rgb), 0) 0%, rgba(var(--night-rgb), 0) 26%, rgba(var(--night-rgb), .78) 38%, var(--night) 46%),
      linear-gradient(180deg, var(--night) 0%, rgba(var(--night-rgb), 0) 12%, rgba(var(--night-rgb), 0) 84%, var(--night) 100%);
  }
  .rec-finale.cta-band--flip .cta-band__content { margin: 0; width: 52%; max-width: 820px; padding: 120px 0 120px var(--gutter); }
}

/* ---------------------------------------------------------------- ruhige Fassung: Achse blendet ein statt sich zu zeichnen */
@media (prefers-reduced-motion: reduce) {
  .js .rec-note { animation-name: hero-fade; animation-timing-function: ease; }
  .rec-axis { transform: none; opacity: 0; transition: opacity 1.2s ease .15s; }
  .rec-roll.is-in .rec-axis { opacity: 1; }
}