/* Páginas de texto (Ausstellungen, Bibliografie, Kontakt, Links…): la misma letra que la lista de Projekte y el título
   como el de las Series (Thomas, 22 oct: se veían bastante más grandes). */
:root {
  --t-serie: var(--schrift-liste-groesse);
  /* Los rótulos (Einzelausstellungen, Bibliografie…) no pueden quedar más pequeños que las entradas que encabezan. Las pruebas de tamaño las hace Thomas en el Entwurf 11 del prototipo. */
  --t-rubrik: var(--t-serie);
}

/* Título y texto desde --x-text, y lo mismo a la derecha (css/comun.css). */
.pagina { flex: 1; width: 100%; padding: var(--aire) var(--x-text); }
.pagina h2 { font-size: var(--t-rubrik); font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--texto-activo); margin-bottom: 1.25rem; }
.pagina h3 { font-size: var(--t-rubrik); font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; margin: 2rem 0 0.9rem; }
.pagina h2 + h3 { margin-top: 0; }

.indice { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; margin-bottom: calc(var(--aire) * 1.2); }
.indice a { font-size: var(--t-pie); letter-spacing: 0.16em; text-transform: uppercase; padding-bottom: 0.25rem; border-bottom: 1px solid transparent; transition: color .3s, border-color .3s; }
.indice a:hover { color: var(--texto-activo); border-color: currentColor; }

.seccion { margin-bottom: calc(var(--aire) * 1.3); scroll-margin-top: 1.5rem; }
.seccion:last-child { margin-bottom: 0; }

.entradas { list-style: none; }
.entradas li { display: grid; grid-template-columns: 7.5rem minmax(0, 46rem); column-gap: clamp(1rem, 2.5vw, 2rem); padding: 0.45rem 0; font-size: var(--t-serie); letter-spacing: var(--liste-laufweite, var(--schrift-liste-laufweite)); line-height: 1.45; }
.entradas .jahr { white-space: nowrap; font-variant-numeric: tabular-nums; }

.enlaces { list-style: none; display: grid; gap: 0.9rem; }
.enlaces a, .enlaces span { font-size: var(--t-serie); letter-spacing: var(--liste-laufweite, var(--schrift-liste-laufweite)); transition: color .3s; }
.enlaces a:hover { color: var(--texto-activo); }
/* «filmisches» con la Laufweite de «fotografisches» en la cabecera (Thomas, 24 oct). */
.enlaces .enlace-marca { letter-spacing: var(--zusatz-laufweite, var(--schrift-zusatz-laufweite)); }
/* Línea vacía de la lista de Thomas (entre filmisches y las galerías). */
.enlaces .hueco { height: 0.6rem; }

.pagina p, .pagina .lista { max-width: 46rem; font-size: var(--t-serie); letter-spacing: var(--liste-laufweite, var(--schrift-text-laufweite)); text-transform: var(--schrift-text-case); line-height: 1.6; margin-bottom: 0.9rem; }
.pagina .lista { padding-left: 1.2rem; }
.pagina .lista li { margin-bottom: 0.3rem; }
.pagina p a, .pagina .lista a { text-decoration: underline; text-underline-offset: 0.2em; word-break: break-word; }

@media (max-width: 540px) {
  .entradas li { grid-template-columns: minmax(0, 1fr); row-gap: 0.15rem; }
}
/* Thomas, 23 oct (prueba): letra de la lista 16 px en el iPhone vertical, como en Projekte. */
/* iPhone girado: desde PROJEKTE queda poco ancho; la columna del año, más estrecha. */
@media (orientation: landscape) and (max-height: 500px) { .entradas li { grid-template-columns: 3.5rem minmax(0, 1fr); } }

/* Künstlerbücher con su portada, como en la web original. */
#kuenstlerbuecher .entradas li { grid-template-columns: 7.5rem minmax(0, 30rem) auto; align-items: center; padding: 0.8rem 0; }
.portada { display: flex; gap: 0.5rem; }
.portada img { display: block; height: 120px; width: auto; }
@media (max-width: 760px) {
  #kuenstlerbuecher .entradas li { grid-template-columns: minmax(0, 1fr); }
  .portada { margin-top: 0.5rem; }
  .portada img { height: 150px; }
}

/* Visor de PDF: libros de Künstlerbücher y CV. */
.libro-pdf { display: block; width: 100%; height: min(80vh, 60rem); margin-top: calc(var(--aire) * 0.6); border: 0; background: #fff; }
.libro-abrir { display: inline-block; margin-top: 1rem; font-size: var(--t-pie); letter-spacing: 0.16em; text-transform: uppercase; transition: color .3s; }
.libro-abrir:hover { color: var(--texto-activo); }

/* Aktuelles: los textos de los anuncios en blanco (Thomas, 23 oct). */
.seite-aktuelles .pagina p { color: var(--ak-text-farbe, var(--farbe-fliesstext)); }

/* Vídeos y mapas de otros servicios (motor/plantillas/einbetten.php, js/einbetten.js). */
.einbetten { max-width: 46rem; margin: 0 0 1.6rem; }
.einbetten__flaeche { position: relative; aspect-ratio: 16 / 9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9rem;
  padding: 1.5rem; text-align: center; border: 1px solid var(--texto); border: 1px solid color-mix(in srgb, var(--texto) 35%, transparent); background: var(--fondo); background: color-mix(in srgb, var(--fondo) 85%, #000); }
.einbetten--karte .einbetten__flaeche { aspect-ratio: 4 / 3; }
.einbetten__hinweis { max-width: 30rem; font-size: 0.85rem; margin: 0; }
.einbetten__hinweis a { text-decoration: underline; text-underline-offset: 0.2em; }
.einbetten__laden { padding: 0.6rem 1.3rem; border: 1px solid var(--texto-activo); color: var(--texto-activo); letter-spacing: 0.08em; transition: background-color .3s, color .3s; }
.einbetten__laden:hover { background: var(--texto-activo); color: var(--fondo); }
.einbetten__immer { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; cursor: pointer; }
.einbetten__immer input { accent-color: var(--texto-activo); }
.einbetten.geladen .einbetten__flaeche { padding: 0; border: 0; background: none; }
.einbetten iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.einbetten figcaption { margin-top: 0.5rem; font-size: 0.8rem; }
.einbetten figcaption a:hover, .einbetten__hinweis a:hover { color: var(--texto-activo); }
.einbetten__widerrufen { padding: 0.5rem 1rem; border: 1px solid var(--texto); font-size: 0.85rem; }
.einbetten__widerrufen:disabled { border-color: transparent; padding-left: 0; cursor: default; }
/* Sin JavaScript no hay botón ni casilla: el display de .einbetten__immer pisaría el atributo hidden. */
.einbetten [hidden] { display: none; }

/* Formulario de contacto (motor/plantillas/formular.php, js/kontakt.js). */
.kontaktformular { max-width: 34rem; margin-top: calc(var(--aire) * 0.8); }
.kontaktformular h2 { font-size: var(--t-serie); font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-activo); margin-bottom: 1.2rem; }
.kf__feld { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1.1rem; }
.kf__feld label { font-size: 0.8rem; letter-spacing: 0.06em; }
.kf__feld input[type=text], .kf__feld input[type=email], .kf__feld textarea {
  font: inherit; font-size: var(--t-serie); color: var(--texto-activo); background: transparent; padding: 0.55rem 0.7rem;
  border: 1px solid var(--texto); border: 1px solid color-mix(in srgb, var(--texto) 55%, transparent); border-radius: 0; }
.kf__feld textarea { resize: vertical; min-height: 9rem; line-height: 1.5; }
.kf__feld input:focus-visible, .kf__feld textarea:focus-visible { outline: 1px solid var(--texto-activo); outline-offset: 2px; border-color: var(--texto-activo); }
.kf__feld input[aria-invalid="true"], .kf__feld textarea[aria-invalid="true"] { border-color: #f0a07a; }
.kf__fehler, .kf__aviso { font-size: 0.8rem; color: var(--texto-activo); min-height: 0; }
.kf__fehler:empty, .kf__aviso:empty { display: none; }
.kf__feld--zustimmung label { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.8rem; line-height: 1.5; letter-spacing: 0; }
.kf__feld--zustimmung input { margin-top: 0.25rem; accent-color: var(--texto-activo); }
.kf__feld--zustimmung a, .kf-respuesta a { text-decoration: underline; text-underline-offset: 0.2em; }
.kf__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kf__senden { padding: 0.65rem 1.6rem; border: 1px solid var(--texto-activo); color: var(--texto-activo); letter-spacing: 0.08em; transition: background-color .3s, color .3s; }
.kf__senden:hover:not(:disabled) { background: var(--texto-activo); color: var(--fondo); }
.kf__senden:disabled { opacity: 0.6; cursor: progress; }
.kf__ok { color: var(--texto-activo); }

/* Páginas propias de Thomas (motor/plantillas/eigene.php): una columna con los mismos tamaños que las demás páginas. */
.eigene { max-width: 70rem; }
.eigene .eg-headline { margin: 2.2rem 0 0.6rem; }
.eigene .eg-headline:first-child { margin-top: 0; }
.eigene .eg-subline { color: var(--texto); letter-spacing: 0.08em; margin-bottom: 1.4rem; }
.eigene .eg-text { margin-bottom: 0.6rem; }
.eigene figure { margin: 0; }
.eigene figure img { display: block; width: 100%; height: auto; }
.eg-fotos { display: grid; gap: clamp(0.6rem, 1.5vw, 1.2rem); margin: 1.4rem 0 1.8rem; }
.eg-fotos--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.eg-fotos--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.eg-fotos figure { aspect-ratio: 3 / 2; background: rgba(0, 0, 0, 0.12); }
.eg-fotos figure img { height: 100%; object-fit: contain; }
.eg-fotos--1 figure { aspect-ratio: var(--w) / var(--h); max-width: 46rem; }
.eg-foto { max-width: 52rem; margin: 1.4rem 0 1.8rem !important; }
.eg-textfoto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1rem, 3vw, 2.5rem); align-items: start; margin: 1.4rem 0 1.8rem; }
.eg-zitat { max-width: 40rem; margin: 1.6rem 0; padding-left: 1.2rem; border-left: 1px solid var(--texto); }
.eg-zitat p { font-style: italic; color: var(--texto-activo); margin-bottom: 0.4rem; }
.eg-zitat footer { font-size: var(--t-pie); letter-spacing: 0.12em; }
.eg-knopf a { display: inline-block; padding: 0.55rem 1.2rem; border: 1px solid currentColor; text-decoration: none !important; transition: color .3s; }
.eg-knopf a:hover { color: var(--texto-activo); }
.eg-abstand { height: calc(var(--aire) * 1.2); }
@media (max-width: 760px) {
  .eg-fotos--2, .eg-fotos--3, .eg-textfoto { grid-template-columns: minmax(0, 1fr); }
}