/* Común a las páginas interiores (desde Auswahl): colores, fuente, cabecera y menú. */
@font-face { font-family: "Questrial"; src: url("../fonts/Questrial-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "TeX Gyre Adventor"; src: url("../fonts/texgyreadventor-regular.otf") format("opentype"); font-display: swap; }

:root {
  --fondo: #4d4d4d;
  /* #c0c0c0 sobre #4d4d4d da 4,65:1, por encima del 4,5:1 de WCAG AA (#b3b3b3 se quedaba en 4,03). */
  --texto: #c0c0c0;
  --texto-activo: #ffffff;
  /* Thomas, 19 oct: TeX Gyre Adventor en todo y en todas las páginas (la Startseite lleva su propia fuente). */
  --schrift: "TeX Gyre Adventor", "Century Gothic", CenturyGothic, AppleGothic, Futura, sans-serif;
  --t-pie: 0.7rem;
  --margen: clamp(1rem, 4vw, 4rem);
  --aire: clamp(1.8rem, 4vw, 3.5rem);
  /* Margen sobre el nombre; el mismo en la Startseite. */
  --arriba: 2.25rem;
  /* Columnas de la lista de Projekte. --marca-w = ancho del nombre: lo mide js/comun.js (el valor de aquí es solo hasta que lo mide). */
  --marca-w: 13.5rem;
  --spalt: clamp(1rem, 2.5vw, 2rem);
  --spalte-titel: clamp(16rem, 34vw, 36rem);
  /* PROJEKTE / KÜNSTLERBÜCHER junto a «fotografisches» (Thomas, 20 oct: del tamaño de «fotografisches»). */
  --t-projekte: var(--schrift-projekte-groesse);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  min-height: 100vh; display: flex; flex-direction: column;
  background: var(--fondo); color: var(--texto);
  font-family: var(--schrift); font-size: 0.875rem; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a:focus-visible, button:focus-visible { outline: 1px solid var(--texto-activo); outline-offset: 3px; }
.icono { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Nombre | PROJEKTE | menú en una fila, PROJEKTE a la altura de «fotografisches». Thomas, 23 oct: PROJEKTE en todas las
   páginas (también en Künstlerbücher) a unos 4 cm de «fotografisches»; en el iPhone vertical, entre «fotografisches» y el menú.
   La cabecera se queda arriba al bajar por la página (Thomas, 23 oct), con el fondo para que no se vea lo de debajo. */
.cabecera { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; padding: var(--arriba) var(--margen) 1.2rem; background: var(--fondo); }
/* El nombre y el botón del menú, con sus medidas por aparato, están en css/marca.css. */
.cabecera .marca { grid-area: 1 / 1; color: inherit; text-decoration: none; }
.cabecera .derecha { grid-area: 1 / 3; align-self: start; }
/* Mismo alto de línea que el nombre: así su línea base coincide con la de «fotografisches» (js/comun.js la ajusta). */
.cabecera__seccion {
  position: relative; grid-area: 1 / 2; justify-self: start; margin: 0 0 0 var(--pj-titel-abstand, 150px); line-height: 1.15; white-space: nowrap;
  font-size: var(--pj-titel-groesse, var(--t-projekte)); font-family: var(--pj-titel-schrift, inherit);
  letter-spacing: var(--pj-titel-sperrung, var(--seccion-sperrung, var(--schrift-projekte-laufweite))); text-transform: var(--pj-titel-case, var(--schrift-projekte-case));
  translate: 0 var(--pj-titel-y, 0);
}
span.cabecera__seccion { color: var(--pj-titel-farbe, var(--texto-activo)); }
/* Sin flecha (Thomas, 22 oct): se ilumina al pasar el ratón. */
a.cabecera__seccion { color: var(--pj-titel-farbe, var(--texto)); transition: color .3s; }
a.cabecera__seccion:hover { color: var(--texto-activo); }
.cabecera__seccion--oculta { visibility: hidden; pointer-events: none; }
/* iPhone vertical: tiene que caber entre «fotografisches» y el menú; si aun así no cabe, js/comun.js baja la letra. */
@media (max-width: 699px) { :root { --seccion-sperrung: 0.12em; } .cabecera__seccion { justify-self: center; margin: 0 0.5rem; } }
@media (orientation: landscape) and (max-height: 500px) { .cabecera__seccion { justify-self: start; margin: 0 0 0 var(--pj-titel-abstand, 150px); } }
.cabecera__seccion.abajo { grid-area: 2 / 1 / 3 / -1; justify-self: start; margin: 0.9rem 0 0; }
.pie { font-size: var(--t-pie); }
.pie { letter-spacing: 0.16em; text-transform: uppercase; }
.menu__panel a { font-size: var(--m-t, var(--schrift-menue-groesse)); letter-spacing: var(--m-sperrung, var(--schrift-menue-laufweite)); line-height: 1.2; text-transform: var(--m-case, var(--schrift-menue-case)); font-family: var(--m-schrift, inherit); color: var(--m-farbe, inherit); }

/* Título de página (AKTUELLES, KÜNSTLERBÜCHER, AUSSTELLUNGEN…): todos iguales y en mayúsculas (Thomas, 23 oct), con los
   valores que él dio a AKTUELLES. Título y texto empiezan en --x-text y dejan lo mismo a la derecha (Thomas, 23 oct):
   en el ordenador bajo PROJEKTE, en el iPad y el iPhone bajo «fotografisches» (así lo puso él). --x-projekte y --x-zusatz los mide js/comun.js. */
:root { --x-anker: var(--x-projekte, var(--margen)); }
@media (max-width: 1180px) { :root { --x-anker: var(--x-zusatz, var(--margen)); } }
/* iPhone girado: también bajo «fotografisches», como en vertical. Thomas, 24 oct, pidió +70 px «bündig zum Anfang von
   fotografisches»; atado a lo medido queda exacto en cualquier iPhone. */
@media (orientation: landscape) and (max-height: 500px) { :root { --x-anker: var(--x-zusatz, var(--margen)); } }
:root { --x-text: calc(var(--x-anker) + var(--ak-titel-x, 0px)); }
.seitentitel {
  display: block; font-weight: 400; line-height: 1.3;
  font-size: var(--ak-titel-groesse, var(--schrift-titel-groesse)); color: var(--ak-titel-farbe, var(--farbe-titel));
  font-family: var(--ak-titel-schrift, inherit); letter-spacing: var(--ak-titel-sperrung, var(--schrift-titel-laufweite));
  text-transform: var(--ak-titel-case, var(--schrift-titel-case));
  margin: var(--ak-titel-oben, 0) 0 var(--ak-titel-unten, calc(var(--aire) * 0.6));
}
a.seitentitel { transition: color .3s; }
a.seitentitel:hover { color: var(--texto-activo); }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.menu { position: relative; }
.menu__boton:hover, .menu__boton[aria-expanded="true"] { color: var(--texto-activo); }
.menu__boton .icono { stroke: var(--icono-farbe, currentColor); stroke-width: var(--icono-dicke, 1.5px); }
.menu__boton:hover .icono, .menu__boton[aria-expanded="true"] .icono { stroke: var(--icono-aktiv, var(--icono-farbe, currentColor)); }
.menu__boton .cerrar, .menu__boton[aria-expanded="true"] .abrir { display: none; }
.menu__boton[aria-expanded="true"] .cerrar { display: block; }
.menu__panel {
  position: absolute; right: -0.5rem; top: calc(100% + 0.75rem);
  display: flex; flex-direction: column; gap: var(--m-gap, 0.75rem); min-width: 11rem;
  padding: var(--m-pad, 1.25rem) calc(var(--m-pad, 1.25rem) * 1.2); isolation: isolate;
  box-shadow: var(--m-sombra, 0 0.75rem 2rem rgba(0, 0, 0, .25));
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  /* Al cerrar, se oculta cuando acaba el fundido; al abrir, los enlaces son enfocables desde el primer instante (teclado). */
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
/* El fondo va aparte para que su transparencia (prueba de Thomas, 23 oct) no aclare también la letra. */
.menu__panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--m-bg, var(--fondo)); opacity: var(--m-op, 1); }
.menu.abierto .menu__panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.menu__panel a { transition: color .3s; }
.menu__panel a:hover, .menu__panel a.activo { color: var(--m-aktiv, var(--texto-activo)); }
/* Separa las secciones de la obra de las páginas de servicio, sin línea. */
.menu__panel .fin-grupo { margin-bottom: var(--m-grupo, 0.6rem); }
/* «Ganze Fläche» (prueba, 23 oct): en el iPhone el menú abierto tapa toda la pantalla; nombre, palabra y ✕ quedan encima. */
@media (max-width: 699px), (orientation: landscape) and (max-height: 500px) {
  .menu-flaeche .menu__panel { position: fixed; inset: 0; z-index: 1; overflow-y: auto; padding: 7.5rem var(--margen) 2rem; box-shadow: none; }
  .menu-flaeche .cabecera .marca, .menu-flaeche .cabecera__seccion, .menu-flaeche .menu__boton { position: relative; z-index: 2; }
}

.pie { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.4rem var(--margen); }
.pie nav { display: flex; gap: 1.6rem; }
.pie a { transition: color .3s; }
.pie a:hover { color: var(--texto-activo); }

@media (max-width: 540px) {
  .pie { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Versión de la web (motor/generar.php, WEB_STAND): al pie y casi del gris del fondo, solo para nosotros. Alto 0: si ocupara sitio, el body (flex, 100vh) encogía el libro de los Künstlerbücher unos px. */
.web-stand { height: 0; margin: 0; padding: 0 var(--margen); overflow: visible; line-height: 1; text-align: right; font-size: 9px; letter-spacing: 0.06em; opacity: 0.15; transform: translateY(-1.1rem); pointer-events: none; }