/* modopup — Ausgabe "Hochglanz", 2026-08-26, zweiter Anlauf.
   Joerg zum ersten: "Das sieht haesslich aus. Verwirf alle bisherigen Designs und mach es
   komplett neu. High gloss - wie eCommerceMinded, Spiegel.de, onetoone.de, vogue.de."

   Was die Bildstreifen dieser drei Hefte gemeinsam haben (aufgenommen am 2026-08-26, 1440 px):
   1. JEDES Teaserelement traegt eine Flaeche. Kein Text ohne Bild daneben.
   2. Die Seite hat einen Untergrund, die Inhalte liegen als helle Karten darauf.
   3. Ueber jeder Schlagzeile steht ein kurzes Ressortwort in Versalien, darunter Antiqua.
   4. Der Kopf ist ruhig und mittig; die Ressortleiste bleibt beim Scrollen stehen.
   5. Genau eine Signalfarbe, sparsam gesetzt.

   modopup hat keine Fotos und darf keine haben. Die Flaechen baut portada.ts aus dem Namen des
   Stuecks: gleicher Name, gleiches Bild. Das ist der Unterschied zum ersten Anlauf, der Text auf
   Papier legte und hoffte, dass Typografie allein Glanz macht. Tut sie nicht. */

/* ---------- Schriften, alle lokal ---------- */
@font-face { font-family: 'Archivo Black'; src: url('/static/fonts/archivo-black-latin.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('/static/fonts/barlow-condensed-400-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('/static/fonts/barlow-condensed-700-latin.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('/static/fonts/fraunces-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('/static/fonts/fraunces-latin-600-italic.woff2') format('woff2'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('/static/fonts/fraunces-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/static/fonts/inter-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/static/fonts/inter-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/static/fonts/inter-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/static/fonts/inter-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Karla'; src: url('/static/fonts/karla-latin-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --lienzo: #F1F0ED;
  --carta: #FFFFFF;
  --tinta: #101014;
  --gris: #56565F;
  --gris-claro: #6E6E77;
  --linea: #E2E1DD;
  --acento: #C8102E;
  --acento-vivo: #E01B4C;
  --acento-suave: #FCEEF1;
  --ancho: 78rem;
  --columna: 40rem;
  --sombra: 0 1px 2px rgba(16, 16, 20, 0.05), 0 14px 30px -18px rgba(16, 16, 20, 0.35);
  --sombra-alta: 0 2px 4px rgba(16, 16, 20, 0.07), 0 26px 48px -22px rgba(16, 16, 20, 0.45);
  --titular: 'Fraunces', Georgia, serif;
  --texto: 'Inter', system-ui, -apple-system, sans-serif;
  --etiqueta: 'Barlow Condensed', 'Inter', sans-serif;
  --marca-tipo: 'Archivo Black', 'Inter', sans-serif;
}

body.modo-pup {
  --acento: #7A1FA2;
  --acento-vivo: #9B2FC4;
  --acento-suave: #F5ECFA;
}

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

html { background: var(--lienzo); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--lienzo);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

.envoltura { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: 1.5rem; }

a { color: var(--acento); text-underline-offset: 0.16em; }
a:hover { color: var(--tinta); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 3px;
}

.salta { position: absolute; left: -9999px; top: 0; z-index: 40; background: var(--tinta); color: #FFFFFF; padding: 0.7rem 1.1rem; }
.salta:focus { left: 0.5rem; top: 0.5rem; }

/* ---------- Kopf ---------- */
.sitio-head { background: var(--carta); }

.banda { background: var(--tinta); color: #FFFFFF; }
.banda-fila {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.4rem 1.5rem; min-height: 2.5rem; padding-block: 0.3rem;
}
.banda-lema {
  margin: 0; font-family: var(--etiqueta); font-size: 0.92rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: #D6D5D2;
}
.banda-acciones { display: flex; align-items: center; gap: 1rem; }

.registro { display: flex; align-items: center; gap: 0.3rem; padding: 0.15rem; border: 1px solid #3A3A42; border-radius: 999px; }
.registro-op {
  display: inline-block; padding: 0.12rem 0.75rem; border-radius: 999px;
  font-family: var(--etiqueta); font-size: 0.95rem; letter-spacing: 0.08em;
  color: #D6D5D2; text-decoration: none;
}
.registro-op:hover { color: #FFFFFF; }
.registro-op.activo { background: #FFFFFF; color: var(--tinta); font-weight: 700; }
.registro-op.activo:hover { color: var(--tinta); }

.idioma-enlace {
  font-family: var(--etiqueta); font-size: 0.95rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: #FFFFFF; text-decoration: none;
  border-bottom: 1px solid #6B6B74; padding-bottom: 1px;
}
.idioma-enlace:hover { color: #FFFFFF; border-color: #FFFFFF; }

.cabeza {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  padding-block: 2rem 1.5rem; text-align: center;
}
.marca { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--tinta); text-decoration: none; }
.marca svg { color: var(--acento); flex: none; }
.marca span {
  font-family: var(--marca-tipo); font-size: clamp(2.2rem, 6.5vw, 3.6rem);
  line-height: 1; letter-spacing: -0.03em;
}
.marca-sub {
  margin: 0; font-family: var(--etiqueta); font-size: 0.95rem;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--gris);
}

.principal {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(1.4) blur(8px);
  border-block: 1px solid var(--linea);
}
.principal ul {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1.15rem;
  margin: 0; padding: 0; list-style: none;
}
@media (max-width: 52rem) {
  /* Vier gestapelte Zeilen schieben den Inhalt unter die Falz. Eine schiebbare Zeile ist das,
     was die Referenzhefte auf dem Telefon fahren -- ohne JavaScript, nur Ueberlauf. */
  .principal ul {
    flex-wrap: nowrap; justify-content: flex-start;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .principal ul::-webkit-scrollbar { display: none; }
  .principal li { flex: none; }
}
.principal a {
  display: block; padding: 0.7rem 0;
  font-family: var(--etiqueta); font-size: 0.94rem; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap;
  color: var(--tinta); text-decoration: none;
}
.principal a:hover { color: var(--acento); }
.principal a[aria-current="page"] { color: var(--acento); box-shadow: inset 0 -3px 0 var(--acento); }

/* ---------- Rumpf ---------- */
.contenido { width: 100%; max-width: var(--ancho); margin-inline: auto; padding: 2.25rem 1.5rem 4rem; }

.rubrica-etiqueta {
  display: inline-block; margin-bottom: 0.45rem;
  font-family: var(--etiqueta); font-size: 0.95rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--acento); text-decoration: none;
}
a.rubrica-etiqueta:hover { color: var(--tinta); }

.meta {
  margin: 0.5rem 0 0; font-family: var(--etiqueta); font-size: 0.98rem;
  letter-spacing: 0.06em; color: var(--gris-claro);
}

.cinta {
  display: inline-block; margin-bottom: 0.9rem; padding: 0.22rem 0.8rem;
  background: var(--acento-vivo); color: #FFFFFF;
  font-family: var(--etiqueta); font-size: 0.98rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
}

.boton-accion, .boton {
  display: inline-block; padding: 0.85rem 1.9rem;
  background: var(--acento); color: #FFFFFF; border: 0; border-radius: 3px;
  font-family: var(--etiqueta); font-size: 1.15rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  box-shadow: var(--sombra);
}
.boton-accion:hover, .boton:hover { background: var(--tinta); color: #FFFFFF; }
.llamada { margin: 1.6rem 0 0; }

/* ---------- Der Aufmacher ---------- */
.apertura {
  position: relative; isolation: isolate; overflow: hidden;
  background-color: #17111F;
  border-radius: 6px; box-shadow: var(--sombra-alta);
  min-height: clamp(24rem, 56vh, 34rem);
  display: flex; align-items: flex-end;
  margin-bottom: 3.5rem;
}
.apertura-arte { position: absolute; inset: 0; z-index: -2; }
.apertura-arte .arte { width: 100%; height: 100%; display: block; }
.apertura::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(8, 8, 12, 0.15) 0%, rgba(8, 8, 12, 0.55) 45%, rgba(8, 8, 12, 0.88) 100%);
}
.apertura-texto { padding: 2.5rem 2rem 2.75rem; max-width: 46rem; color: #FFFFFF; }
.apertura-texto h1 {
  margin: 0 0 0.9rem; font-family: var(--titular); font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 4.4rem); line-height: 1; letter-spacing: -0.02em;
  color: #FFFFFF;
}
.apertura-lead p { margin: 0 0 0.6rem; font-size: clamp(1.05rem, 1.8vw, 1.3rem); line-height: 1.5; color: #F2F1EE; }
.apertura-lead a { color: #FFFFFF; }

/* ---------- Bloecke und Raster ---------- */
.bloque { margin-bottom: 3.5rem; }
.bloque-cabeza {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-bottom: 1.5rem; padding-bottom: 0.7rem; border-bottom: 2px solid var(--tinta);
}
.bloque-cabeza h2 {
  margin: 0; font-family: var(--etiqueta); font-weight: 700; font-size: 1.5rem;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.bloque-mas {
  font-family: var(--etiqueta); font-size: 1rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
  white-space: nowrap;
}
.bloque-mas::after { content: " →"; }

.rejilla { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
/* Ist genau eine Karte da, laeuft sie quer ueber zwei Spuren -- eine einzelne Hochkantkarte in
   einem dreispaltigen Raster sieht aus wie ein Rest, nicht wie eine Ausgabe. */
@media (min-width: 48rem) {
  .rejilla > .tarjeta:first-child:nth-last-child(1) { grid-column: span 2; flex-direction: row; }
  .rejilla > .tarjeta:first-child:nth-last-child(1) .tarjeta-arte { aspect-ratio: auto; width: 45%; }
  .rejilla > .tarjeta:first-child:nth-last-child(1) .tarjeta-texto { justify-content: center; }
}

.tarjeta {
  display: flex; flex-direction: column;
  background: var(--carta); border: 1px solid var(--linea); border-radius: 5px;
  overflow: hidden; box-shadow: var(--sombra);
}
.tarjeta:hover { box-shadow: var(--sombra-alta); }
.tarjeta-arte { display: block; aspect-ratio: 16 / 10; position: relative; overflow: hidden; background: var(--tinta); }
.tarjeta-arte .arte { width: 100%; height: 100%; display: block; }
.arte-nr {
  position: absolute; left: 1rem; bottom: 0.6rem;
  font-family: var(--marca-tipo); font-size: 2.4rem; line-height: 1; color: #FFFFFF; opacity: 0.85;
}
.tarjeta-texto { padding: 1.1rem 1.2rem 1.35rem; display: flex; flex-direction: column; flex: 1; }
.tarjeta-texto h2,
.tarjeta-texto h3 {
  margin: 0 0 0.5rem; font-family: var(--titular); font-weight: 700;
  font-size: 1.35rem; line-height: 1.14; letter-spacing: -0.01em;
}
.tarjeta-texto h2 a,
.tarjeta-texto h3 a { color: var(--tinta); text-decoration: none; }
.tarjeta-texto h2 a:hover,
.tarjeta-texto h3 a:hover { color: var(--acento); }
.tarjeta-resumen { margin: 0; color: var(--gris); font-size: 1rem; line-height: 1.55; }
.tarjeta-texto .meta { margin-top: auto; padding-top: 0.8rem; }

/* Aufmacherzeile: eine breite Karte plus eine schmale Liste, wie die Referenzhefte sie fahren. */
.destacado-fila { display: grid; gap: 1.75rem; }
.tarjeta-ancha .tarjeta-arte { aspect-ratio: 16 / 9; }
.tarjeta-ancha .tarjeta-texto { padding: 1.5rem 1.6rem 1.7rem; }
.tarjeta-ancha .tarjeta-texto h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.08; }
.tarjeta-ancha .tarjeta-resumen { font-size: 1.1rem; }

.lista-breve { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1.1rem; }
.lista-breve li {
  display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.9rem; align-items: start;
  padding-bottom: 1.1rem; border-bottom: 1px solid var(--linea);
}
.lista-breve li:last-child { border-bottom: 0; padding-bottom: 0; }
.lista-breve-arte { display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 4px; background: var(--tinta); }
.lista-breve-arte .arte { width: 100%; height: 100%; display: block; }
.lista-breve .rubrica-etiqueta { margin-bottom: 0.2rem; font-size: 0.88rem; }
.lista-breve-titulo {
  display: block; font-family: var(--titular); font-weight: 600; font-size: 1.08rem;
  line-height: 1.2; color: var(--tinta); text-decoration: none;
}
.lista-breve-titulo:hover { color: var(--acento); }
.lista-breve .meta { margin-top: 0.3rem; }

/* "En corto": die kurzen Bloecke der Startseite, ohne Bild, dafuer als flache Karten. */
.rejilla-corto { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.corto {
  background: var(--carta); border: 1px solid var(--linea); border-left: 3px solid var(--acento);
  border-radius: 4px; padding: 1.15rem 1.25rem;
}
.corto h3 {
  margin: 0 0 0.5rem; font-family: var(--etiqueta); font-weight: 700; font-size: 1.2rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta);
}
.corto p { margin: 0 0 0.7rem; font-size: 1rem; color: var(--gris); }
.corto p:last-child { margin-bottom: 0; }

/* ---------- Einzelseite: Dossier, Kernseite, Artikel ---------- */
.hoja { display: block; }

.hoja-cabeza {
  position: relative; isolation: isolate; overflow: hidden;
  background-color: #17111F;
  border-radius: 6px; box-shadow: var(--sombra-alta);
  min-height: 15rem; display: flex; align-items: flex-end; margin-bottom: 2.5rem;
}
.hoja-cabeza-grande { min-height: clamp(19rem, 42vh, 26rem); }
.hoja-arte { position: absolute; inset: 0; z-index: -2; }
.hoja-arte .arte { width: 100%; height: 100%; display: block; }
.hoja-cabeza::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(8, 8, 12, 0.2) 0%, rgba(8, 8, 12, 0.55) 50%, rgba(8, 8, 12, 0.88) 100%);
}
.hoja-cabeza-texto { padding: 2rem 1.75rem 2.25rem; max-width: 48rem; color: #FFFFFF; }
.hoja-cabeza-texto .rubrica-etiqueta { color: #FFFFFF; border-bottom: 2px solid var(--acento-vivo); padding-bottom: 2px; }
.hoja-cabeza-texto h1 {
  margin: 0; font-family: var(--titular); font-weight: 700;
  font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.04; letter-spacing: -0.02em; color: #FFFFFF;
}
.hoja-cabeza-texto .meta,
.apertura-texto .meta { color: #E4E3E0; }

.hoja-cuerpo { display: grid; gap: 2.5rem; }
.hoja-cuerpo > .prosa {
  max-width: calc(var(--columna) + 4.5rem);
  background: var(--carta);
  border: 1px solid var(--linea);
  border-radius: 6px;
  box-shadow: var(--sombra);
  padding: 2rem 1.5rem 2.5rem;
}
@media (min-width: 48rem) { .hoja-cuerpo > .prosa { padding: 2.5rem 2.25rem 3rem; } }

/* ---------- Fliesstext ---------- */
.prosa { max-width: var(--columna); font-size: 1.09375rem; }
.prosa h2 {
  margin: 2.6rem 0 0.8rem; font-family: var(--titular); font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 1.95rem); line-height: 1.15; letter-spacing: -0.01em;
}
.prosa h3 {
  margin: 2.2rem 0 0.6rem; padding-top: 1rem; border-top: 1px solid var(--linea);
  font-family: var(--titular); font-weight: 600; font-size: 1.32rem; line-height: 1.2;
}
.prosa h4 { margin: 1.5rem 0 0.5rem; font-family: var(--texto); font-weight: 700; font-size: 1.05rem; }
.prosa p { margin: 0 0 1.15rem; }
.prosa ul, .prosa ol { margin: 0 0 1.25rem; padding-left: 1.3rem; }
.prosa li { margin-bottom: 0.5rem; }
.prosa li::marker { color: var(--acento); }
.prosa blockquote {
  margin: 1.8rem 0; padding: 0.2rem 0 0.2rem 1.3rem; border-left: 3px solid var(--acento);
  font-family: 'Karla', var(--texto); font-style: italic; font-size: 1.2rem;
}
.prosa hr { margin: 2.5rem 0; border: 0; border-top: 1px solid var(--linea); }
.prosa table { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; font-size: 1rem; }
.prosa th, .prosa td { padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: top; }
.prosa th { font-family: var(--etiqueta); letter-spacing: 0.1em; text-transform: uppercase; }

.texto-seite > p:first-of-type { font-size: 1.22rem; line-height: 1.55; color: var(--tinta); }

/* Inhaltsverzeichnis eines Dossiers: als eigene Karte, zweispaltig, ohne Punkte. */
.es-dossier .texto-seite > ul:first-of-type {
  margin: 0 0 2.4rem; padding: 1.2rem 1.4rem; list-style: none;
  background: var(--lienzo); border: 1px solid var(--linea); border-radius: 5px;
  columns: 2; column-gap: 2rem;
}
.es-dossier .texto-seite > ul:first-of-type li { break-inside: avoid; margin-bottom: 0.6rem; }
.es-dossier .texto-seite > ul:first-of-type a {
  font-family: var(--etiqueta); font-size: 1.12rem; letter-spacing: 0.02em;
  color: var(--tinta); text-decoration-color: var(--linea);
}
.es-dossier .texto-seite > ul:first-of-type a:hover { color: var(--acento); }
@media (max-width: 40rem) { .es-dossier .texto-seite > ul:first-of-type { columns: 1; } }

.articulo-contenido > h1 { display: none; }
.articulo-contenido > p:first-of-type::first-letter {
  float: left; margin: 0.3rem 0.6rem 0 0; font-family: var(--titular); font-weight: 700;
  font-size: 3.8rem; line-height: 0.76; color: var(--acento);
}
.articulo-pie {
  margin-top: 2.5rem; padding-top: 1.2rem; border-top: 2px solid var(--tinta);
  font-family: var(--etiqueta); font-size: 1.05rem; letter-spacing: 0.04em; color: var(--gris);
}
.articulo-pie p { margin: 0 0 0.35rem; }

.kette {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0 0 1.8rem; padding: 0.8rem 0;
  border-block: 1px solid var(--linea); list-style: none;
  font-family: var(--etiqueta); font-size: 1.25rem; letter-spacing: 0.1em; color: var(--gris);
}
.kette li { margin: 0; }

/* ---------- Randspalte ---------- */
.rail { align-self: start; }
.rail-caja { background: var(--carta); border: 1px solid var(--linea); border-radius: 5px; padding: 1.2rem 1.3rem; box-shadow: var(--sombra); }
.rail-titulo {
  margin: 0 0 0.9rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--tinta);
  font-family: var(--etiqueta); font-size: 1.05rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.rail-lista { margin: 0; padding: 0; list-style: none; }
.rail-lista > li { margin-bottom: 0.7rem; }
.rail-lista > li:last-child { margin-bottom: 0; }
.rail-lista a { font-family: var(--etiqueta); font-size: 1.12rem; color: var(--tinta); text-decoration: none; }
.rail-lista a:hover { color: var(--acento); }
.rail-lista-arte > li { display: grid; grid-template-columns: 4.5rem 1fr; gap: 0.8rem; align-items: center; }
.rail-arte { display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 4px; background: var(--tinta); }
.rail-arte .arte { width: 100%; height: 100%; display: block; }

/* ---------- Magazin-Uebersicht ---------- */
.magazin-cabecera { margin-bottom: 2rem; padding-bottom: 1.2rem; border-bottom: 2px solid var(--tinta); text-align: center; }
.magazin-marca {
  margin: 0; font-family: var(--etiqueta); font-size: 1rem; font-weight: 700;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--acento);
}
.magazin-cabecera h1 {
  margin: 0.4rem 0 0.5rem; font-family: var(--titular); font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1; letter-spacing: -0.02em;
}
.magazin-editor { margin: 0; color: var(--gris); font-size: 1.05rem; }

.rubrica-filtros { margin-bottom: 2rem; }
.rubrica-filtros ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.rubrica-filtros a {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.9rem; background: var(--carta);
  border: 1px solid var(--linea); border-radius: 999px;
  font-family: var(--etiqueta); font-size: 1.02rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta); text-decoration: none;
}
.rubrica-filtros a:hover { border-color: var(--acento); color: var(--acento); }
.rubrica-filtros a[aria-current="page"] { background: var(--tinta); border-color: var(--tinta); color: #FFFFFF; }
.contador { font-size: 0.85rem; color: var(--gris-claro); }
.rubrica-filtros a[aria-current="page"] .contador { color: #C9C8C5; }
.rubrica-actual {
  margin: 0 0 1.4rem; font-family: var(--etiqueta); font-size: 1.1rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gris);
}

/* ---------- Formulare ---------- */
.formulario {
  max-width: 36rem; margin-inline: auto; padding: 2rem 2rem 2.25rem;
  background: var(--carta); border: 1px solid var(--linea); border-radius: 6px; box-shadow: var(--sombra-alta);
}
.formulario h1 {
  margin: 0 0 0.8rem; font-family: var(--titular); font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.05;
}
.formulario .sticker,
.prosa .sticker {
  display: inline-block; margin-bottom: 0.9rem; padding: 0.2rem 0.7rem;
  background: var(--acento); color: #FFFFFF; font-family: var(--etiqueta);
  font-size: 0.95rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
}
.campo { margin-bottom: 1.3rem; }
.campo label {
  display: block; margin-bottom: 0.35rem; font-family: var(--etiqueta);
  font-size: 1.05rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 0.7rem 0.8rem; background: #FFFFFF;
  border: 1px solid #B9B8B4; border-radius: 4px;
  font-family: var(--texto); font-size: 1.05rem; color: var(--tinta);
}
.campo input:focus { border-color: var(--acento); }
.ayuda { margin: 0.35rem 0 0; font-size: 0.98rem; color: var(--gris); }
.casilla { display: flex; align-items: flex-start; gap: 0.6rem; }
.casilla input { width: auto; margin-top: 0.35rem; }
.consentimiento { margin-bottom: 1.4rem; padding: 1rem 1.2rem; background: var(--lienzo); border-radius: 4px; font-size: 1rem; }
.version { margin: 0.6rem 0 0; font-size: 0.9rem; color: var(--gris); }
.datos-evento {
  margin: 0 0 1.2rem; font-family: var(--etiqueta); font-size: 1.2rem;
  letter-spacing: 0.06em; color: var(--tinta);
}
.aviso-error {
  margin: 0 0 1.2rem; padding: 0.8rem 1rem; background: var(--acento-suave);
  border-left: 4px solid var(--acento); border-radius: 4px; color: var(--tinta);
}

/* ---------- Gaesteliste ---------- */
.responsable { margin-bottom: 1.4rem; padding: 1rem 1.2rem; background: var(--carta); border: 1px solid var(--linea); border-radius: 5px; font-size: 1rem; }
table { border-collapse: collapse; width: 100%; background: var(--carta); }
th, td { padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--linea); text-align: left; }
th { font-family: var(--etiqueta); letter-spacing: 0.12em; text-transform: uppercase; border-bottom: 2px solid var(--tinta); }
.nr { width: 3rem; color: var(--gris); }

/* ---------- Fuss ---------- */
.pie { margin-top: 4rem; padding-block: 2.75rem 2.25rem; background: var(--tinta); color: #C9C8C5; }
.pie-marca {
  margin: 0 0 1.5rem; font-family: var(--marca-tipo); font-size: clamp(2rem, 7vw, 3rem);
  line-height: 1; letter-spacing: -0.03em; color: #FFFFFF;
}
.pie-rejilla { display: grid; gap: 1.5rem; }
.pie-bloque { margin: 0; display: flex; flex-direction: column; gap: 0.45rem; font-size: 1rem; }
.pie-lema { max-width: 26rem; }
.pie-nav ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.45rem; }
.pie-nav a, .pie-enlaces a { color: #FFFFFF; text-decoration: none; border-bottom: 1px solid #43434B; padding-bottom: 1px; }
.pie-nav a:hover, .pie-enlaces a:hover { border-color: #FFFFFF; color: #FFFFFF; }

/* ---------- Breiten ---------- */
@media (min-width: 48rem) {
  .apertura-texto { padding: 3rem 3rem 3.25rem; }
  .destacado-fila { grid-template-columns: minmax(0, 1.55fr) minmax(16rem, 1fr); }
  /* Solange es genau ein Stueck gibt, gibt es auch keine zweite Spalte: die Karte laeuft
     ueber die volle Breite, und das Bild wird flacher, damit sie nicht zum Plakat wird. */
  .destacado-fila.sin-lista { grid-template-columns: 1fr; }
  .destacado-fila.sin-lista .tarjeta-ancha { display: grid; grid-template-columns: 1.25fr 1fr; }
  .destacado-fila.sin-lista .tarjeta-arte { aspect-ratio: auto; height: 100%; min-height: 20rem; }
  .destacado-fila.sin-lista .tarjeta-texto { justify-content: center; }
  .destacado-fila.sin-lista .tarjeta-texto .meta { margin-top: 1.2rem; padding-top: 0; }
  .pie-rejilla { grid-template-columns: 1.2fr 1fr 1fr; }
  .hoja-cabeza-texto { padding: 2.5rem 2.5rem 2.75rem; }
}

@media (min-width: 64rem) {
  .contenido { padding-block: 2.75rem 5rem; }
  /* Die zweite Spalte traegt den naechsten Text, statt die halbe Seite leer zu lassen. */
  .hoja-cuerpo { grid-template-columns: minmax(0, var(--columna)) minmax(15rem, 20rem); gap: 4rem; justify-content: start; }
  .rail { position: sticky; top: 4.5rem; }
  .rejilla { grid-template-columns: repeat(auto-fill, minmax(18.5rem, 1fr)); }
}

@media (prefers-reduced-motion: no-preference) {
  .tarjeta { transition: box-shadow 160ms ease, transform 160ms ease; }
  .tarjeta:hover { transform: translateY(-2px); }
  a, .boton, .boton-accion, .registro-op { transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease; }
}

/* ---------- Druck: die Gaesteliste ist ein Papierdokument ---------- */
@media print {
  .salta, .sitio-head, .pie, .rail, .llamada, .rubrica-filtros, .hoja-arte, .apertura-arte { display: none !important; }
  html, body { background: #FFFFFF !important; color: #000000 !important; }
  .contenido { padding: 0; max-width: none; }
  .prosa, .hoja-cuerpo, .magazin { max-width: none; display: block; }
  .prosa { font-size: 11pt; line-height: 1.45; color: #000000; }
  .prosa a { color: #000000; text-decoration: none; }
  .hoja-cabeza, .apertura { min-height: 0; box-shadow: none; border: 0; margin-bottom: 1rem; }
  .hoja-cabeza::after, .apertura::after { display: none; }
  .hoja-cabeza-texto, .apertura-texto { padding: 0; color: #000000; }
  .hoja-cabeza-texto h1, .apertura-texto h1 { color: #000000; }
  .hoja-cabeza-texto .rubrica-etiqueta { color: #000000; }
  .tarjeta, .corto, .rail-caja, .responsable, .consentimiento, .formulario {
    border: 1px solid #000000 !important; box-shadow: none !important; page-break-inside: avoid;
  }
  .articulo-contenido > h1 { display: block; }
  .articulo-contenido > p:first-of-type::first-letter { float: none; margin: 0; font-size: inherit; color: #000000; }
  table { page-break-inside: auto; }
  tr { page-break-inside: avoid; }
  th { border-bottom: 2px solid #000000; }
  td { border-bottom: 1px solid #666666; }
}