/* Lista con una foto por fila: Projekte y Künstlerbücher (Thomas, 21 oct: los libros como Projekte). */
:root {
  /* Thomas, 20 oct: letra más pequeña (antes hasta 17,6 px). */
  --t-serie: var(--schrift-liste-groesse);
  /* Aire entre el nombre y la lista. */
  --abstand-projekte: var(--aire);
  /* Escritorio: alto de la foto, que puede pasar del de la fila. Thomas, 20 oct: «½ más arriba y ½ más abajo» (260 px); 21 oct: unos 5 mm menos por arriba y por abajo en su
     pantalla de 16″, que no se acerquen tanto a los títulos vecinos. */
  --foto-hoehe: 210px;
  --fila-min: 150px;
  /* Móvil: alto máximo de cada foto; el ancho se calcula con su proporción, así ocupa su sitio antes de cargarse. */
  --alto-foto: 75vh;
  /* Parte de la fila, desde la izquierda y en %, en la que el ratón cambia la foto. Sin número: hasta el final
     de la columna de títulos, para poder ir hacia la foto sin cambiarla (Thomas, 20 oct). */
  --zona: auto;
  /* Escritorio: la foto de antes se apaga y la nueva se enciende en 0,7 s (Thomas, 23 oct; antes 2 s). */
  --blende-foto: .7s;
  /* Con el dedo: velo blanco sobre todas las fotos; al tocar una se disuelve en --dauer y se abre la serie. */
  --schleier: 0.5;
  --dauer: 1.5s;
}

@supports (height: 1svh) { :root { --alto-foto: 75svh; } }
/* Escritorio: la foto al menos a 1 cm del texto (Thomas, 20 oct). */
:root { --abstand-foto-text: 40px; }
/* Valores de la prueba de Thomas, 23 oct. */
@media (min-width: 1181px) { :root { --foto-hoehe: 190px; --abstand-foto-text: 70px; --zona: 80; --abstand-projekte: 10px; } }
@media (min-width: 700px) and (max-width: 1180px) { :root { --alto-foto: 40svh; } }
@media (min-width: 700px) and (max-width: 1180px) and (orientation: portrait) { :root { --abstand-projekte: 0px; --schleier: 0.4; --dauer: 0.5s; } }
@media (max-width: 699px) { :root { --alto-foto: 50svh; --schleier: 0.4; --dauer: 0.5s; --abstand-projekte: 10px; } }
/* El título (PROJEKTE, KÜNSTLERBÜCHER) va en la cabecera; aquí solo el subtítulo, si lo hay. */
.encabezado { padding: 0 var(--margen); font-size: clamp(0.72rem, 0.9vw, 0.82rem); letter-spacing: 0.18em; text-transform: uppercase; }

/* Künstlerbücher: el título donde el de Aktuelles (Thomas, 23 oct); su margen inferior hace de aire hasta la lista. */
.seite-buecher .seitentitel { padding-top: var(--aire); margin-left: var(--x-text); }
.seite-buecher .catalogo { padding-top: 0; }
/* Pegada al margen como el nombre, no centrada: las columnas de la lista son las que colocan PROJEKTE en la cabecera. */
.catalogo { flex: 1; width: 100%; padding: var(--abstand-projekte) var(--margen) var(--aire); list-style: none; }
.serie a {
  /* Los años acaban donde acaba el nombre, en una línea (Thomas, 22 oct); la foto empieza bajo PROJEKTE. */
  display: grid; grid-template-columns: var(--marca-w) var(--spalte-titel) 1fr;
  align-items: center; column-gap: var(--spalt);
  padding: 0.6rem 0; min-height: var(--fila-min);
}
.anio { white-space: nowrap; text-align: right; }
.anio, .titulo { font-size: var(--t-serie); letter-spacing: var(--liste-laufweite, var(--schrift-liste-laufweite)); text-transform: var(--schrift-liste-case); line-height: 1.35; font-variant-numeric: tabular-nums; transition: color .3s; }
/* Thomas pidió los títulos no resaltados más oscuros, pero sobre #4d4d4d cualquier gris más oscuro que --texto
   baja del 4,5:1 de WCAG AA (78 % daba 3,5:1): se quedan en --texto y el activo en blanco (revisión, 19 oct). */
.serie.activo .anio, .serie.activo .titulo { color: var(--texto-activo); }

/* Projekte (Thomas, 11 nov): ya estamos en esta página, así que su entrada del menú no lleva a ningún sitio. En Künstlerbücher, en cambio, el nombre y la cabecera siguen llevando a Projekte. */
.seite-auswahl .menu__panel a[aria-current="page"] { pointer-events: none; cursor: default; }
/* Projekte y Künstlerbücher, con ratón: la fila solo se abre (y solo cambia la foto, ver js/liste.js) desde donde empieza el título, un poco antes
   que él: a la izquierda, bajo el nombre y el año, no pasa nada. El enlace ocupa toda la fila, por eso se apaga y se
   reabre la parte válida con un ::before. Los años no se resaltan nunca. */
@media (min-width: 961px) and (hover: hover) {
  .seite-auswahl .serie a, .seite-buecher .serie a { position: relative; pointer-events: none; }
  .seite-auswahl .serie a::before, .seite-buecher .serie a::before { content: ""; position: absolute; top: 0; bottom: 0; right: 0; left: calc(var(--marca-w) + var(--spalt) / 2); pointer-events: auto; cursor: pointer; }
  .seite-auswahl .serie.activo .anio, .seite-buecher .serie.activo .anio { color: var(--texto); }
}

/* Escritorio: una foto por galería, en su proporción, que aparece al pasar el ratón (0,7 s, Thomas, 23 oct) y sin
   desplazarse (Thomas, 20 oct). La foto flota centrada en la fila: si es más alta que ella, sobresale por arriba y por
   abajo sin mover la lista, y no recoge el ratón para no tapar las filas vecinas. */
.foto { position: relative; height: 130px; margin-left: calc(var(--abstand-foto-text) - var(--spalt)); opacity: 0; pointer-events: none; transition: opacity var(--blende-foto) ease; }
.foto img { position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: block; height: var(--foto-hoehe); width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
.serie.activo .foto { z-index: 1; opacity: 1; }
/* La foto de la primera fila, centrada en ella como las demás: la lista baja lo que la foto sobresale por arriba
   (Thomas, 24 oct; antes era la foto la que bajaba). */
:root { --sobresale: max(0px, (var(--foto-hoehe) - var(--fila-min)) / 2); }
:root:not(.tactil) .catalogo { padding-top: calc(var(--abstand-projekte) + var(--sobresale)); }
:root:not(.tactil) .seite-buecher .catalogo { padding-top: var(--sobresale); }

@media (max-width: 960px) {
  /* baseline: en los títulos de dos líneas el año va con la primera, no entre las dos. */
  .serie a { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; row-gap: 0.75rem; min-height: auto; padding: 1.1rem 0; }
  .anio { text-align: left; }
  /* El ancho sale de la proporción (--w/--h de la propia foto) y no de la foto cargada: antes cada foto medía 0 hasta
     llegar y, al cargarse mientras se bajaba, empujaba la página (Thomas, 21 oct: «die Fotos werden plötzlich größer»). */
  .foto { grid-column: 1 / -1; justify-self: start; height: auto; margin-left: 0; opacity: 1; width: min(100%, calc(var(--alto-foto) * var(--w) / var(--h))); }
  .foto img { position: static; transform: none; display: block; width: 100%; height: auto; aspect-ratio: var(--w) / var(--h); max-width: none; }
}
/* iPad: foto centrada y algo más pequeña, metida respecto al texto, con más aire encima. */
@media (min-width: 700px) and (max-width: 960px) {
  .serie a { row-gap: 1.4rem; padding: 1.6rem 0; }
  .foto { justify-self: center; width: min(78%, calc(var(--alto-foto) * var(--w) / var(--h))); }
}
/* iPhone: texto de unos 14 px; texto y foto del mismo ancho. */
/* iPhone girado: la misma letra que en vertical, y la foto cabe entera con su título arriba (Thomas, 20 oct). */
/* Thomas, 21 oct: la foto empieza donde empieza el título, no en el año, y es más pequeña para que se adivinen la
   serie anterior y la siguiente. */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --alto-foto: 45svh; }
  /* Thomas, 22 oct: texto y foto en el centro de la pantalla. */
  /* Thomas, 24 oct: con «2017 - 2018» cada fila se centraba por su cuenta y los títulos se corrían. La columna de años
     mide lo que el año más ancho (--anio-w, js/liste.js) y los años van a la derecha. */
  .serie a { grid-template-columns: var(--anio-w, auto) minmax(0, 26rem); justify-content: center; row-gap: 0.75rem; padding: 1.1rem 0; }
  .anio { text-align: right; }
  /* --alto-foto-fijo: el alto en px que js/liste.js toma al cargar. Con 45svh la primera foto crecía al empezar a bajar en el iPhone (Thomas, 24 oct). */
  .foto { grid-column: 2; justify-self: start; width: min(100%, calc(var(--alto-foto-fijo, var(--alto-foto)) * var(--w) / var(--h))); }
  /* Las verticales, en el centro de la columna del título (Thomas, 24 oct). */
  .foto--hoch { justify-self: center; }
}

/* Pantallas táctiles anchas (iPad en horizontal, > 960 px): la misma lista que en el iPad en vertical, con la foto debajo
   del título. Sin esto la foto se quedaba invisible, porque el script táctil no resalta ninguna fila (Kimi, 21 oct). */
@media (min-width: 961px) {
  .tactil .anio { text-align: left; }
  .tactil .serie a { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; row-gap: 1.4rem; min-height: auto; padding: 1.6rem 0; }
  .tactil .foto { grid-column: 1 / -1; justify-self: center; width: min(78%, calc(var(--alto-foto) * var(--w) / var(--h))); height: auto; margin-left: 0; opacity: 1; }
  .tactil .foto img { position: static; transform: none; display: block; width: 100%; height: auto; aspect-ratio: var(--w) / var(--h); max-width: none; }
}
/* Con el dedo (Thomas, 20 oct): todas las fotos blanquecinas; la que se toca recobra el color y luego se abre. */
.tactil .foto::after { content: ""; position: absolute; inset: 0; background: rgba(236, 241, 246, var(--schleier)); transition: opacity var(--dauer) ease; }
.tactil .serie.abriendo .foto::after { opacity: 0; }
/* Thomas, 21 oct: el velo solo no se entendía; la foto que está en el centro de la pantalla sale en color. */
.tactil .serie.centro .foto::after { opacity: 0; transition-duration: .6s; }
@media (prefers-reduced-motion: reduce) { .tactil .foto::after { transition: none; } }