/* J.S.E.R VALMES — Pressefoto-Seite
   Vorgaben Kunde: grauer Hintergrund, roter Schriftzug (#FF0000),
   Schriftzug auf 1/3 Höhe, horizontal mittig, darunter die Fotos. */

/* Bodoni Moda — freie Didone (SIL OFL) als Vertretung fuer Linotype Didot Pro Bold.
   Sobald die lizenzierten Didot-Webfont-Dateien da sind: Datei hier tauschen,
   font-family unten anpassen, font-variation-settings in .name entfernen. */
@font-face {
  font-family: 'Bodoni Moda';
  src: url('/assets/fonts/bodoni-moda-latin.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --grau:        #4D4D4D;   /* aus dem Referenz-Screenshot gepipettiert */
  --rot:         #FF0000;   /* Kundenvorgabe */
  --serif:       'Bodoni Moda', 'Didot', 'Bodoni 72', 'Playfair Display', 'Times New Roman', Times, serif;
  --sans:        'Helvetica Neue', Helvetica, Arial, sans-serif;
  --seite-max:   1180px;
  --rand:        clamp(20px, 5vw, 64px);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--grau);
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;   /* wie auf eure-erde.eu: eine Scrollbewegung
                                      schiebt den ganzen Abschnitt weiter */
}

body {
  margin: 0;
  background: var(--grau);
  color: var(--rot);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- 1. Bildschirm: nur Grau + Name ---------- */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  scroll-snap-align: start;
  scroll-snap-stop: always;        /* der Schriftzug darf nicht uebersprungen werden */
}

/* Schriftzug und erstes Foto bilden einen Block. Der Block ist so verankert, dass die
   MITTE DES SCHRIFTZUGS auf 1/3 der Fensterhoehe liegt — genau wie vorher, als der
   Schriftzug allein dort stand. --nameHalb setzt das Skript in index.html. */
.hero-inhalt {
  position: absolute;
  top: calc(33.333% - var(--nameHalb, 4rem));
  left: 0;
  width: 100%;
  padding: 0 var(--rand);
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: var(--fade, 1);
  will-change: opacity;
}

.name {
  position: static;
  width: max-content;
  max-width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  color: var(--rot);
  font-family: var(--serif);
  font-weight: 900;
  font-variation-settings: "opsz" 14, "wght" 900;  /* opsz steuert die Haarlinienstaerke — auf 96 reissen sie auf dem Grau ab */
  font-size: clamp(2.4rem, 8.6vw, 10.5rem);
  line-height: 1.05;
  letter-spacing: -0.008em;   /* wie im Didot-Original: eng gesetzt, nicht gesperrt */
  white-space: nowrap;
}

.name .wort { display: block; }

/* schwarze Linie unter dem Schriftzug, laeuft exakt auf dessen Breite mit */
.name .regel {
  display: block;
  width: 100%;
  height: 0.05em;
  margin-top: 0.16em;
  background: #000000;
}

/* Auf schmalen Displays zweizeilig statt winzig */
@media (max-width: 560px) {
  .name {
    white-space: normal;
    font-size: 13vw;
  }
}

/* Scroll-Hinweis — gleiche Mechanik wie auf eure-erde.eu (.scroll-cue):
   Chevron, das ruhig auf und ab wandert; Klick springt weich zu den Fotos. */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(6px, 1.5vh, 20px);
  transform: translate(-50%, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--rot);
  opacity: calc(0.8 * var(--fade, 1));   /* auf eure-erde reichen 0.5 (hell auf dunkel);
                            rot auf grau braucht mehr, sonst verschwindet der Cue */
  transition: opacity 0.15s ease;
  animation: scroll-cue-bounce 2.2s ease-in-out infinite;
}

.scroll-cue:hover,
.scroll-cue:focus-visible { opacity: var(--fade, 1); }

.scroll-cue__icon {
  width: clamp(28px, 4vh, 40px);
  height: clamp(28px, 4vh, 40px);
}

@keyframes scroll-cue-bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 8px); }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- 2. Fotos ---------- */

.photos {
  max-width: var(--seite-max);
  margin: 0 auto;
  padding: 0 var(--rand) clamp(60px, 10vh, 140px);
  scroll-snap-align: start;
}

.intro {
  max-width: 46em;
  margin: 0 auto clamp(40px, 7vh, 90px);
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--sans);
  font-size: clamp(0.82rem, 1.1vw, 0.95rem);
  font-weight: 300;
  line-height: 1.75;
  letter-spacing: 0.02em;
  text-align: center;
}

.photo {
  width: fit-content;              /* Block schrumpft auf Bildbreite, damit
                                      Bildunterschrift und Download-Link am Bild
                                      sitzen statt an den Containerraendern */
  max-width: 100%;
  margin: 0 auto clamp(48px, 9vh, 110px);
  scroll-snap-align: start;        /* jedes Foto ist ein eigener Haltepunkt — ohne das
                                      waere die Mitte der Fotostrecke bei "mandatory"
                                      nicht mehr frei erreichbar */
}
.photo:last-child { margin-bottom: 0; }

/* Das erste Foto sitzt direkt unter dem Schriftzug im ersten Bildschirm.
   Die Hoehe ist gedeckelt, damit Schriftzug + Foto zusammen ins Fenster passen. */
.photo--hero {
  margin: clamp(20px, 4svh, 52px) 0 0;
  min-height: 0;
}
.photo.photo--hero img { max-height: 40svh; }   /* .photo--hero allein ist EINE Klasse
                                                     und verliert sonst gegen .photo img */

.photo > a { display: block; text-align: center; }

.photo img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 82svh;               /* kein Foto darf hoeher als das Fenster werden,
                                      sonst blieben Hochformate beim Snappen angeschnitten */
  height: auto;
  margin: 0 auto;
  background: rgba(0, 0, 0, 0.12);
}

.photo figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 1.6em;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 0.85em;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  text-transform: lowercase;
}

.caption { color: rgba(255, 255, 255, 0.6); }

a.dl {
  color: var(--rot);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 0, 0, 0.45);
  padding-bottom: 1px;
  transition: border-color .2s ease;
}
a.dl:hover { border-bottom-color: var(--rot); }

/* ---------- Fuß ---------- */

.foot {
  padding: 0 var(--rand) clamp(28px, 5vh, 56px);
  scroll-snap-align: end;
  text-align: center;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 300;
  letter-spacing: 0.08em;
}
.foot a {
  color: rgba(255, 255, 255, 0.42);
  text-decoration: none;
}
.foot a:hover { color: rgba(255, 255, 255, 0.75); }

/* ---------- Fokus / A11y ---------- */

a:focus-visible {
  outline: 1px solid var(--rot);
  outline-offset: 3px;
}